/*======================================================
HT ERP
STYLE.CSS
PART 1
======================================================*/

:root{

--primary:#3b82f6;
--secondary:#06b6d4;
--accent:#7c3aed;

--dark:#050816;
--dark2:#0b1023;
--dark3:#131b34;

--white:#ffffff;
--text:#dbe4ff;
--muted:#8d97b5;

--glass:rgba(255,255,255,.08);
--border:rgba(255,255,255,.12);

--shadow:0 25px 60px rgba(0,0,0,.45);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Vazirmatn',sans-serif;

background:var(--dark);

color:var(--white);

overflow-x:hidden;

line-height:1.8;

position:relative;

}

/*==============================
BACKGROUND
==============================*/

.bg-gradient{

position:fixed;

inset:0;

background:

radial-gradient(circle at 15% 20%,rgba(59,130,246,.25),transparent 28%),

radial-gradient(circle at 85% 10%,rgba(124,58,237,.28),transparent 28%),

radial-gradient(circle at 50% 80%,rgba(6,182,212,.18),transparent 35%),

linear-gradient(180deg,#040612,#070b19,#0b1124);

z-index:-5;

}

.bg-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);

background-size:50px 50px;

opacity:.45;

z-index:-4;

}

.bg-glow{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-3;

}

.glow-1{

width:420px;

height:420px;

background:#2563eb;

top:-120px;

left:-120px;

opacity:.30;

}

.glow-2{

width:500px;

height:500px;

background:#7c3aed;

bottom:-150px;

right:-150px;

opacity:.25;

}

.particles{

position:fixed;

inset:0;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:45px 45px;

opacity:.08;

z-index:-2;

}

/*==============================
CONTAINER
==============================*/

.container{

max-width:1350px;

}

/*==============================
HEADER
==============================*/

.main-header{

position:fixed;

top:20px;

left:0;

right:0;

z-index:999;

}

.navbar{

background:rgba(9,15,33,.55);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:14px 26px;

box-shadow:var(--shadow);

}

.navbar-brand{

display:flex;

align-items:center;

gap:15px;

text-decoration:none;

}

.logo-icon{

width:54px;

height:54px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:800;

color:#fff;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

box-shadow:

0 0 35px rgba(59,130,246,.45);

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text span{

font-size:20px;

font-weight:800;

color:#fff;

}

.logo-text small{

font-size:12px;

color:var(--muted);

letter-spacing:1px;

}

/*==============================
MENU
==============================*/

.navbar-nav{

gap:12px;

}

.nav-link{

color:#c7d3ff;

font-size:15px;

font-weight:500;

padding:10px 18px !important;

border-radius:12px;

transition:.35s;

}

.nav-link:hover{

background:rgba(255,255,255,.06);

color:#fff;

}

.nav-link.active{

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:#fff;

}

/*==============================
HEADER BUTTONS
==============================*/

.header-actions{

display:flex;

align-items:center;

gap:12px;

}

.btn-login{

text-decoration:none;

color:#fff;

padding:12px 24px;

border-radius:14px;

border:1px solid rgba(255,255,255,.15);

transition:.35s;

}

.btn-login:hover{

background:rgba(255,255,255,.08);

color:#fff;

}

.btn-demo{

text-decoration:none;

padding:12px 28px;

border-radius:14px;

font-weight:700;

color:#fff;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

box-shadow:

0 15px 35px rgba(59,130,246,.35);

transition:.35s;

}

.btn-demo:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:

0 20px 45px rgba(59,130,246,.45);

}

/*==============================
HERO SECTION
==============================*/

.hero-section{

position:relative;

padding-top:190px;

padding-bottom:120px;

overflow:hidden;

}

.hero-content{

position:relative;

z-index:5;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:50px;

margin-bottom:30px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

color:#84c5ff;

font-size:14px;

font-weight:600;

backdrop-filter:blur(15px);

}

.hero-badge i{

font-size:15px;

color:#46b3ff;

}

.hero-content h1{

font-size:72px;

font-weight:900;

line-height:1.2;

margin-bottom:30px;

letter-spacing:-2px;

}

.hero-content h1 span{

background:linear-gradient(90deg,#46b3ff,#8b5cf6,#06b6d4);

-webkit-background-clip:text;
background-clip: text;

-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:18px;

line-height:2.1;

color:var(--text);

max-width:650px;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

margin-bottom:55px;

flex-wrap:wrap;

}

.btn-primary-custom{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:18px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

text-decoration:none;

font-weight:700;

font-size:16px;

transition:.35s;

box-shadow:0 20px 45px rgba(37,99,235,.35);

}

.btn-primary-custom:hover{

transform:translateY(-5px);

color:#fff;

box-shadow:0 30px 60px rgba(37,99,235,.50);

}

.btn-secondary-custom{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:18px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(18px);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.btn-secondary-custom:hover{

background:rgba(255,255,255,.09);

color:#fff;

transform:translateY(-5px);

}

.hero-statistics{

display:flex;

gap:22px;

flex-wrap:wrap;

}

.stat-card{

width:170px;

padding:28px;

border-radius:24px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

border-color:#3b82f6;

box-shadow:0 20px 40px rgba(59,130,246,.20);

}

.stat-card h2{

font-size:34px;

font-weight:900;

margin-bottom:8px;

background:linear-gradient(90deg,#46b3ff,#8b5cf6);

-webkit-background-clip:text;
background-clip: text;

-webkit-text-fill-color:transparent;

}

.stat-card span{

font-size:14px;

color:#9eb0d8;

}

/*==============================
HERO VISUAL
==============================*/

.hero-visual{

position:relative;

width:100%;

height:760px;

display:flex;

align-items:center;

justify-content:center;

}

.hero-glow{

position:absolute;

width:550px;

height:550px;

border-radius:50%;

background:radial-gradient(circle,#2563eb55,transparent 70%);

filter:blur(80px);

}

.hero-circle{

position:absolute;

border-radius:50%;

border:1px solid rgba(255,255,255,.08);

}

.hero-circle-1{

width:620px;

height:620px;

}

.hero-circle-2{

width:500px;

height:500px;

}

.hero-circle-3{

width:380px;

height:380px;

}

.orbit{

position:absolute;

border-radius:50%;

border:1px dashed rgba(98,164,255,.25);

animation:rotateOrbit 35s linear infinite;

}

.orbit-1{

width:640px;

height:640px;

}

.orbit-2{

width:520px;

height:520px;

animation-duration:26s;

}

.orbit-3{

width:420px;

height:420px;

animation-duration:18s;

}

@keyframes rotateOrbit{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}
/*==============================
AI GLOBE
==============================*/

.ai-globe{

position:relative;

width:360px;

height:360px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

radial-gradient(circle at center,
rgba(59,130,246,.12),
rgba(124,58,237,.06),
transparent);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.08);

box-shadow:

0 0 60px rgba(59,130,246,.25),

0 0 120px rgba(124,58,237,.15),

inset 0 0 50px rgba(255,255,255,.04);

animation:globeFloat 8s ease-in-out infinite;

}

.brain-core{

position:absolute;

width:120px;

height:120px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:52px;

color:#9fd4ff;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

box-shadow:

0 0 40px rgba(37,99,235,.45),

0 0 80px rgba(124,58,237,.30);

z-index:5;

animation:pulseBrain 3s infinite;

}

@keyframes pulseBrain{

0%{

transform:scale(1);

box-shadow:

0 0 35px rgba(59,130,246,.45);

}

50%{

transform:scale(1.08);

box-shadow:

0 0 65px rgba(59,130,246,.80);

}

100%{

transform:scale(1);

box-shadow:

0 0 35px rgba(59,130,246,.45);

}

}

@keyframes globeFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/*==============================
NODES
==============================*/

.node{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:#62b9ff;

box-shadow:

0 0 18px #62b9ff,

0 0 35px #62b9ff;

}

.node-1{

top:20px;

left:50%;

transform:translateX(-50%);

}

.node-2{

top:70px;

right:35px;

}

.node-3{

top:50%;

right:12px;

transform:translateY(-50%);

}

.node-4{

bottom:70px;

right:35px;

}

.node-5{

bottom:20px;

left:50%;

transform:translateX(-50%);

}

.node-6{

bottom:70px;

left:35px;

}

.node-7{

top:50%;

left:12px;

transform:translateY(-50%);

}

.node-8{

top:70px;

left:35px;

}

/*==============================
CONNECTION LINES
==============================*/

.line{

position:absolute;

background:

linear-gradient(90deg,
transparent,
#5cbcff,
transparent);

opacity:.75;

}

.line-1{

width:170px;

height:1px;

top:50%;

left:95px;

}

.line-2{

width:1px;

height:170px;

left:50%;

top:95px;

}

.line-3{

width:150px;

height:1px;

transform:rotate(45deg);

top:105px;

left:104px;

}

.line-4{

width:150px;

height:1px;

transform:rotate(-45deg);

bottom:105px;

left:104px;

}

/*==============================
FLOATING CARDS
==============================*/

.floating-card{

position:absolute;

width:180px;

padding:20px;

border-radius:22px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(18px);

box-shadow:0 20px 40px rgba(0,0,0,.25);

transition:.4s;

}

.floating-card:hover{

transform:translateY(-10px);

border-color:#4da8ff;

}

.floating-card i{

font-size:28px;

margin-bottom:15px;

background:linear-gradient(135deg,#46b3ff,#8b5cf6);

-webkit-background-clip:text;
background-clip: text;

-webkit-text-fill-color:transparent;

}

.floating-card h5{

font-size:18px;

margin-bottom:8px;

font-weight:700;

color:#fff;

}

.floating-card p{

font-size:13px;

margin:0;

color:#9eb0d8;

}

.card-1{

top:35px;

left:-20px;

}

.card-2{

bottom:130px;

left:-40px;

}

.card-3{

right:-25px;

top:180px;

}
/*=====================================
TRUSTED SECTION
======================================*/

.trusted-section{

position:relative;

padding:90px 0;

}

.trusted-title{

text-align:center;

font-size:15px;

font-weight:600;

letter-spacing:2px;

color:#93b5ff;

margin-bottom:45px;

text-transform:uppercase;

}

.trusted-wrapper{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:22px;

}

.trusted-item{

height:95px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(16px);

font-size:22px;

font-weight:700;

color:#cfd9ff;

transition:.35s;

}

.trusted-item:hover{

transform:translateY(-8px);

border-color:#3b82f6;

box-shadow:

0 18px 45px rgba(59,130,246,.20);

color:#fff;

}

/*=====================================
COMMON SECTION
======================================*/

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-header span{

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:rgba(59,130,246,.10);

border:1px solid rgba(59,130,246,.25);

color:#6ec2ff;

font-size:14px;

font-weight:700;

margin-bottom:22px;

}

.section-header h2{

font-size:52px;

font-weight:900;

line-height:1.25;

margin-bottom:20px;

letter-spacing:-1px;

}

.section-header p{

font-size:18px;

line-height:2;

color:#a8b6d9;

}

/*=====================================
FEATURES
======================================*/

.features-section{

padding:120px 0;

position:relative;

}

.feature-card{

position:relative;

height:100%;

padding:40px;

border-radius:30px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.4s;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#2563eb,#7c3aed,#06b6d4);

transform:scaleX(0);

transition:.4s;

}

.feature-card:hover::before{

transform:scaleX(1);

}

.feature-card:hover{

transform:translateY(-12px);

border-color:#3b82f6;

box-shadow:

0 25px 55px rgba(59,130,246,.18);

}

.feature-icon{

width:80px;

height:80px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

margin-bottom:30px;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

box-shadow:

0 20px 40px rgba(59,130,246,.35);

}

.feature-card h4{

font-size:28px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.feature-card p{

font-size:16px;

line-height:2;

color:#aeb9d6;

margin:0;

}
/*=====================================
ERP MODULES
======================================*/

.modules-section{

padding:120px 0;

position:relative;

}

.module-card{

position:relative;

height:100%;

padding:38px;

border-radius:28px;

background:rgba(255,255,255,.045);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

overflow:hidden;

transition:.4s;

}

.module-card::after{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:160px;

height:160px;

border-radius:50%;

background:rgba(59,130,246,.10);

filter:blur(30px);

transition:.4s;

}

.module-card:hover{

transform:translateY(-12px);

border-color:#4f8cff;

box-shadow:

0 25px 60px rgba(37,99,235,.18);

}

.module-card:hover::after{

transform:scale(1.5);

}

.module-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

margin-bottom:28px;

font-size:30px;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

box-shadow:

0 18px 40px rgba(37,99,235,.35);

}

.module-card h4{

font-size:25px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.module-card p{

font-size:15px;

line-height:2;

color:#aab7d8;

margin:0;

}

/*=====================================
AI SECTION
======================================*/

.ai-section{

position:relative;

padding:140px 0;

overflow:hidden;

}

.ai-content span{

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:rgba(59,130,246,.10);

border:1px solid rgba(59,130,246,.20);

color:#6dc4ff;

font-size:14px;

font-weight:700;

margin-bottom:25px;

}

.ai-content h2{

font-size:56px;

font-weight:900;

line-height:1.25;

margin-bottom:28px;

}

.ai-content p{

font-size:17px;

line-height:2.1;

color:#b1bddb;

margin-bottom:35px;

}

.ai-list{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:18px;

}

.ai-list li{

display:flex;

align-items:center;

gap:14px;

font-size:17px;

font-weight:500;

color:#d9e5ff;

}

.ai-list i{

width:36px;

height:36px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

font-size:14px;

box-shadow:0 10px 25px rgba(59,130,246,.35);

}

.ai-visual{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

}

.ai-platform{

position:relative;

width:430px;

height:430px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

radial-gradient(circle,
rgba(59,130,246,.12),
rgba(124,58,237,.08),
transparent);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

box-shadow:

0 0 80px rgba(59,130,246,.20);

}

.platform-core{

width:135px;

height:135px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:56px;

color:#fff;

background:

linear-gradient(135deg,#2563eb,#7c3aed);

box-shadow:

0 0 50px rgba(59,130,246,.45);

animation:pulseBrain 3s infinite;

}

.platform-ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(97,171,255,.20);

animation:rotateOrbit 28s linear infinite;

}

.ring-1{

width:500px;

height:500px;

}

.ring-2{

width:390px;

height:390px;

animation-duration:20s;

}

.ring-3{

width:300px;

height:300px;

animation-duration:14s;

}

.platform-dot{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:#63b8ff;

box-shadow:

0 0 15px #63b8ff,

0 0 30px #63b8ff;

}

.dot-1{top:25px;left:50%;transform:translateX(-50%);}
.dot-2{top:90px;right:45px;}
.dot-3{right:18px;top:50%;transform:translateY(-50%);}
.dot-4{bottom:90px;right:45px;}
.dot-5{bottom:25px;left:50%;transform:translateX(-50%);}
.dot-6{left:18px;top:50%;transform:translateY(-50%);}
/*=====================================
DASHBOARD
======================================*/

.dashboard-section{

padding:130px 0;

position:relative;

}

.dashboard-preview{

display:flex;

gap:30px;

padding:35px;

border-radius:35px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(22px);

box-shadow:0 35px 80px rgba(0,0,0,.30);

overflow:hidden;

}

.dashboard-sidebar{

width:260px;

padding:15px;

border-radius:24px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

display:flex;

flex-direction:column;

gap:15px;

}

.menu-item{

display:flex;

align-items:center;

gap:15px;

padding:18px 20px;

border-radius:18px;

font-size:16px;

font-weight:600;

color:#b8c5e6;

transition:.35s;

cursor:pointer;

}

.menu-item i{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:rgba(255,255,255,.05);

font-size:18px;

}

.menu-item:hover{

background:rgba(255,255,255,.06);

color:#fff;

}

.menu-item.active{

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.menu-item.active i{

background:rgba(255,255,255,.18);

}

.dashboard-content{

flex:1;

display:flex;

flex-direction:column;

gap:25px;

}

.dashboard-cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.dashboard-card{

padding:28px;

border-radius:22px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-8px);

border-color:#3b82f6;

box-shadow:0 20px 45px rgba(59,130,246,.18);

}

.dashboard-card small{

display:block;

color:#98a8cf;

margin-bottom:12px;

font-size:14px;

}

.dashboard-card h3{

font-size:34px;

font-weight:900;

background:linear-gradient(90deg,#4db8ff,#8b5cf6);

-webkit-background-clip:text;
background-clip: text;

-webkit-text-fill-color:transparent;

}

.dashboard-chart{

height:420px;

border-radius:28px;

background:

linear-gradient(180deg,

rgba(59,130,246,.10),

rgba(124,58,237,.08));

border:1px solid rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

font-weight:800;

color:#6dc4ff;

position:relative;

overflow:hidden;

}

.dashboard-chart::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(90deg,

transparent,

rgba(255,255,255,.05),

transparent);

animation:scanLine 4s linear infinite;

}

@keyframes scanLine{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}

/*=====================================
STATISTICS
======================================*/

.statistics-section{

padding:120px 0;

}

.stat-box{

padding:45px;

border-radius:28px;

text-align:center;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.stat-box:hover{

transform:translateY(-10px);

border-color:#3b82f6;

box-shadow:0 20px 50px rgba(59,130,246,.18);

}

.stat-box h2{

font-size:54px;

font-weight:900;

margin-bottom:12px;

background:linear-gradient(90deg,#4db8ff,#8b5cf6);

-webkit-background-clip:text;
background-clip: text;

-webkit-text-fill-color:transparent;

}

.stat-box span{

font-size:16px;

color:#aab8d8;

}
/*=====================================
MOBILE APP
======================================*/

.mobile-section{

padding:140px 0;

position:relative;

overflow:hidden;

}

.mobile-image{

display:flex;

align-items:center;

justify-content:center;

}

.phone-frame{

width:340px;

height:690px;

padding:14px;

border-radius:55px;

background:linear-gradient(145deg,#111827,#1e293b);

box-shadow:

0 35px 80px rgba(0,0,0,.45),

0 0 60px rgba(59,130,246,.15);

border:1px solid rgba(255,255,255,.08);

position:relative;

}

.phone-frame::before{

content:"";

position:absolute;

top:16px;

left:50%;

transform:translateX(-50%);

width:120px;

height:12px;

border-radius:20px;

background:#0a0f1f;

}

.phone-screen{

width:100%;

height:100%;

border-radius:42px;

padding:28px;

background:

linear-gradient(180deg,#0d1428,#111c34,#162543);

overflow:hidden;

}

.screen-header{

font-size:24px;

font-weight:800;

margin-bottom:25px;

color:#fff;

}

.screen-chart{

height:180px;

border-radius:24px;

margin-bottom:24px;

background:

linear-gradient(135deg,

rgba(37,99,235,.40),

rgba(124,58,237,.30));

}

.screen-card{

height:75px;

margin-bottom:18px;

border-radius:20px;

background:rgba(255,255,255,.08);

}

.mobile-content span{

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:rgba(59,130,246,.10);

border:1px solid rgba(59,130,246,.20);

color:#69c2ff;

font-weight:700;

margin-bottom:24px;

}

.mobile-content h2{

font-size:54px;

font-weight:900;

line-height:1.3;

margin-bottom:25px;

}

.mobile-content p{

font-size:17px;

line-height:2;

color:#aebcdc;

margin-bottom:35px;

}

.mobile-content ul{

list-style:none;

padding:0;

margin:0;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.mobile-content li{

display:flex;

align-items:center;

gap:12px;

font-size:17px;

color:#dfe8ff;

}

.mobile-content i{

color:#46b3ff;

font-size:20px;

}

/*=====================================
PRICING
======================================*/

.pricing-section{

padding:140px 0;

}

.pricing-card{

position:relative;

height:100%;

padding:45px;

border-radius:32px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.4s;

overflow:hidden;

}

.pricing-card:hover{

transform:translateY(-12px);

border-color:#3b82f6;

box-shadow:

0 30px 70px rgba(59,130,246,.18);

}

.pricing-card.featured{

background:

linear-gradient(180deg,

rgba(37,99,235,.18),

rgba(124,58,237,.12));

border:1px solid rgba(96,165,250,.35);

transform:scale(1.04);

}

.popular{

position:absolute;

top:22px;

left:22px;

padding:8px 18px;

border-radius:30px;

font-size:12px;

font-weight:700;

background:#2563eb;

color:#fff;

}

.plan{

display:inline-block;

margin-bottom:18px;

color:#69c2ff;

font-size:14px;

font-weight:700;

text-transform:uppercase;

}

.pricing-card h2{

font-size:26px;

font-weight:800;

margin-bottom:22px;

}

.pricing-card h1{

font-size:52px;

font-weight:900;

margin-bottom:30px;

background:linear-gradient(90deg,#46b3ff,#8b5cf6);

-webkit-background-clip:text;

background-clip: text;

-webkit-text-fill-color:transparent;

}

.pricing-card ul{

list-style:none;

padding:0;

margin:0 0 35px;

}

.pricing-card li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:18px;

color:#dbe6ff;

}

.pricing-card li i{

color:#4db8ff;

}

.pricing-btn{

display:flex;

justify-content:center;

align-items:center;

height:58px;

border-radius:18px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

text-decoration:none;

font-weight:700;

color:#fff;

transition:.35s;

}

.pricing-btn:hover{

color:#fff;

transform:translateY(-4px);

}
/*=====================================
FAQ
======================================*/

.faq-section{

padding:140px 0;

position:relative;

}

.accordion{

max-width:950px;

margin:auto;

}

.accordion-item{

margin-bottom:22px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:22px !important;

overflow:hidden;

backdrop-filter:blur(20px);

}

.accordion-button{

background:transparent;

color:#fff;

font-size:18px;

font-weight:700;

padding:28px 30px;

box-shadow:none !important;

}

.accordion-button:not(.collapsed){

background:linear-gradient(90deg,

rgba(37,99,235,.18),

rgba(124,58,237,.10));

color:#fff;

}

.accordion-button::after{

filter:brightness(5);

}

.accordion-body{

padding:30px;

font-size:16px;

line-height:2;

color:#b5c2df;

background:transparent;

}

/*=====================================
CTA
======================================*/

.cta-section{

padding:140px 0;

}

.cta-wrapper{

padding:70px;

border-radius:36px;

background:

linear-gradient(135deg,

rgba(37,99,235,.22),

rgba(124,58,237,.18));

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(20px);

box-shadow:

0 35px 80px rgba(0,0,0,.30);

}

.cta-badge{

display:inline-flex;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.10);

color:#77c7ff;

margin-bottom:22px;

font-size:14px;

font-weight:700;

}

.cta-wrapper h2{

font-size:54px;

font-weight:900;

line-height:1.3;

margin-bottom:22px;

}

.cta-wrapper p{

font-size:17px;

line-height:2;

color:#c4d2ef;

margin:0;

}

.btn-cta-primary{

display:inline-flex;

justify-content:center;

align-items:center;

width:100%;

height:62px;

margin-bottom:18px;

border-radius:18px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.btn-cta-primary:hover{

transform:translateY(-5px);

color:#fff;

}

.btn-cta-secondary{

display:inline-flex;

justify-content:center;

align-items:center;

width:100%;

height:62px;

border-radius:18px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.10);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.btn-cta-secondary:hover{

background:rgba(255,255,255,.10);

color:#fff;

}

/*=====================================
FOOTER
======================================*/

.footer{

padding:100px 0 40px;

border-top:1px solid rgba(255,255,255,.08);

background:rgba(4,8,18,.75);

backdrop-filter:blur(15px);

}

.footer-logo{

display:flex;

align-items:center;

gap:16px;

margin-bottom:22px;

}

.footer h3{

margin:0;

font-size:28px;

font-weight:900;

}

.footer span{

color:#8da2c8;

}

.footer p{

margin-top:20px;

line-height:2;

color:#9fb0d2;

}

.footer h5{

margin-bottom:24px;

font-size:18px;

font-weight:800;

}

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer li{

margin-bottom:14px;

}

.footer a{

text-decoration:none;

color:#9fb0d2;

transition:.3s;

}

.footer a:hover{

color:#58bcff;

}

.social-links{

display:flex;

gap:14px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:rgba(255,255,255,.06);

font-size:18px;

}

.social-links a:hover{

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

}

.footer-bottom{

margin-top:70px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

color:#8193b8;

}

/*=====================================
RESPONSIVE
======================================*/

@media(max-width:1200px){

.hero-content h1,
.section-header h2,
.ai-content h2,
.mobile-content h2,
.cta-wrapper h2{

font-size:44px;

}

.dashboard-preview{

flex-direction:column;

}

.dashboard-sidebar{

width:100%;

}

.dashboard-cards{

grid-template-columns:repeat(2,1fr);

}

.trusted-wrapper{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:992px){

.hero-section{

padding-top:160px;

text-align:center;

}

.hero-buttons,
.hero-statistics{

justify-content:center;

}

.hero-visual{

margin-top:80px;

height:620px;

}

.ai-content,
.mobile-content{

text-align:center;

margin-top:50px;

}

.mobile-content ul{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:36px;

}

.section-header h2{

font-size:34px;

}

.dashboard-cards{

grid-template-columns:1fr;

}

.trusted-wrapper{

grid-template-columns:repeat(2,1fr);

}

.cta-wrapper{

padding:40px;

}

.hero-visual{

transform:scale(.75);

}

}

@media(max-width:576px){

.trusted-wrapper{

grid-template-columns:1fr;

}

.hero-statistics{

flex-direction:column;

align-items:center;

}

.stat-card{

width:100%;

}

.hero-buttons a{

width:100%;

}

}
/*=====================================
APP.JS SUPPORT STYLES
======================================*/

.main-header{

transition:
top .35s ease,
transform .35s ease,
filter .35s ease;

}

.main-header.header-scrolled{

top:8px;

}

.main-header.header-scrolled .navbar{

background:rgba(7,12,27,.88);

border-color:rgba(255,255,255,.14);

box-shadow:
0 18px 55px rgba(0,0,0,.50),
0 0 35px rgba(59,130,246,.10);

}

/*=====================================
PAGE LOAD
======================================*/

body{

opacity:0;

transition:opacity .7s ease;

}

body.page-loaded{

opacity:1;

}

/*=====================================
REVEAL ANIMATION
======================================*/

.reveal-item{

opacity:0;

transform:translateY(45px);

transition:
opacity .85s cubic-bezier(.2,.8,.2,1),
transform .85s cubic-bezier(.2,.8,.2,1);

}

.reveal-item.revealed{

opacity:1;

transform:translateY(0);

}

/*=====================================
DASHBOARD TRANSITION
======================================*/

.dashboard-chart{

transition:
opacity .25s ease,
transform .25s ease,
filter .25s ease;

}

.dashboard-chart.chart-changing{

opacity:.20;

transform:scale(.985);

filter:blur(5px);

}

/*=====================================
BACK TO TOP
======================================*/

.back-to-top{

position:fixed;

left:28px;

bottom:28px;

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(255,255,255,.13);

border-radius:17px;

background:
linear-gradient(
135deg,
rgba(37,99,235,.92),
rgba(124,58,237,.92)
);

color:#fff;

font-size:18px;

cursor:pointer;

z-index:1000;

opacity:0;

visibility:hidden;

transform:translateY(25px) scale(.85);

box-shadow:
0 18px 45px rgba(37,99,235,.35);

transition:
opacity .35s ease,
visibility .35s ease,
transform .35s ease,
box-shadow .35s ease;

}

.back-to-top.visible{

opacity:1;

visibility:visible;

transform:translateY(0) scale(1);

}

.back-to-top:hover{

transform:translateY(-6px) scale(1.04);

box-shadow:
0 25px 55px rgba(37,99,235,.50);

}

/*=====================================
CURSOR GLOW
======================================*/

.cursor-glow{

position:fixed;

width:340px;

height:340px;

left:0;

top:0;

border-radius:50%;

pointer-events:none;

z-index:-1;

transform:translate(-50%,-50%);

background:
radial-gradient(
circle,
rgba(59,130,246,.11) 0%,
rgba(124,58,237,.06) 35%,
transparent 72%
);

filter:blur(12px);

transition:
width .2s ease,
height .2s ease;

}

/*=====================================
SELECTION
======================================*/

::selection{

background:#2563eb;

color:#fff;

}

/*=====================================
SCROLLBAR
======================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050816;

}

::-webkit-scrollbar-thumb{

border-radius:20px;

background:
linear-gradient(
180deg,
#2563eb,
#7c3aed
);

border:2px solid #050816;

}

::-webkit-scrollbar-thumb:hover{

background:
linear-gradient(
180deg,
#3b82f6,
#8b5cf6
);

}

/*=====================================
MOBILE NAVIGATION
======================================*/

.navbar-toggler{

width:48px;

height:48px;

border:1px solid rgba(255,255,255,.12);

border-radius:14px;

color:#fff;

background:rgba(255,255,255,.06);

box-shadow:none !important;

}

.navbar-toggler i{

font-size:20px;

}

@media(max-width:1199px){

.navbar-collapse{

margin-top:18px;

padding:22px;

border-radius:20px;

background:rgba(7,12,27,.96);

border:1px solid rgba(255,255,255,.10);

box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.navbar-nav{

gap:5px;

margin-bottom:20px;

}

.nav-link{

text-align:right;

padding:13px 16px !important;

}

.header-actions{

display:grid;

grid-template-columns:1fr 1fr;

}

.btn-login,
.btn-demo{

display:flex;

align-items:center;

justify-content:center;

}

}

/*=====================================
ACCESSIBILITY
======================================*/

a:focus-visible,
button:focus-visible{

outline:3px solid rgba(96,165,250,.65);

outline-offset:4px;

}

/*=====================================
REDUCED MOTION
======================================*/

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{

scroll-behavior:auto !important;

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;

}

}

/*=====================================
SMALL MOBILE
======================================*/

@media(max-width:576px){

.main-header{

top:8px;

}

.navbar{

padding:11px 14px;

border-radius:17px;

}

.logo-icon{

width:44px;

height:44px;

font-size:18px;

}

.logo-text span{

font-size:17px;

}

.logo-text small{

font-size:10px;

}

.header-actions{

grid-template-columns:1fr;

}

.back-to-top{

left:16px;

bottom:16px;

width:48px;

height:48px;

}

.cursor-glow{

display:none;

}

}




















/*======================================================
VERSION 1 - LAYOUT FIXES
======================================================*/

html,
body {
width: 100%;
max-width: 100%;
overflow-x: clip;
}

body {
direction: rtl;
}

section {
width: 100%;
position: relative;
}

.container {
width: min(100% - 40px, 1350px);
margin-inline: auto;
}

/* جلوگیری از بیرون‌زدگی Bootstrap Row */
.row {
margin-left: 0;
margin-right: 0;
}

.row > * {
min-width: 0;
}

/*======================================================
HEADER FIX
======================================================*/

.main-header {
width: 100%;
padding-inline: 18px;
}

.main-header .container {
width: min(100%, 1350px);
}

.navbar {
width: 100%;
}

.navbar-collapse {
min-width: 0;
}

.header-actions {
flex-shrink: 0;
}

/*======================================================
HERO FIX
======================================================*/

.hero-section {
min-height: 900px;
}

.hero-section .row {
min-height: 720px;
}

.hero-content {
width: 100%;
max-width: 650px;
}

.hero-content h1 {
font-size: clamp(42px, 5vw, 72px);
overflow-wrap: anywhere;
}

.hero-visual {
width: 100%;
max-width: 680px;
height: 680px;
margin-inline: auto;
}

.ai-globe {
width: min(360px, 70vw);
height: min(360px, 70vw);
}

.hero-circle-1,
.orbit-1 {
width: min(620px, 92vw);
height: min(620px, 92vw);
}

.hero-circle-2,
.orbit-2 {
width: min(500px, 78vw);
height: min(500px, 78vw);
}

.hero-circle-3,
.orbit-3 {
width: min(380px, 62vw);
height: min(380px, 62vw);
}

.card-1 {
top: 50px;
left: 10px;
}

.card-2 {
bottom: 95px;
left: 10px;
}

.card-3 {
right: 10px;
top: 190px;
}

/*======================================================
TRUSTED FIX
======================================================*/

.trusted-wrapper {
width: 100%;
}

.trusted-item {
min-width: 0;
padding-inline: 12px;
text-align: center;
overflow-wrap: anywhere;
}

/*======================================================
AI FIX
======================================================*/

.ai-section .row {
min-height: 650px;
}

.ai-content {
max-width: 640px;
}

.ai-visual {
width: 100%;
max-width: 650px;
margin-inline: auto;
}

.ai-platform {
width: min(430px, 72vw);
height: min(430px, 72vw);
}

.ring-1 {
width: min(500px, 82vw);
height: min(500px, 82vw);
}

.ring-2 {
width: min(390px, 68vw);
height: min(390px, 68vw);
}

.ring-3 {
width: min(300px, 54vw);
height: min(300px, 54vw);
}

/*======================================================
DASHBOARD FIX
======================================================*/

.dashboard-preview {
width: 100%;
max-width: 1250px;
margin-inline: auto;
}

.dashboard-content {
min-width: 0;
}

.dashboard-cards {
width: 100%;
}

.dashboard-card {
min-width: 0;
}

.dashboard-chart {
width: 100%;
}

/*======================================================
MOBILE SECTION FIX
======================================================*/

.mobile-section .row {
min-height: 750px;
}

.mobile-content {
width: 100%;
max-width: 650px;
}

.mobile-content h2 {
font-size: clamp(38px, 4vw, 54px);
overflow-wrap: anywhere;
}

.mobile-image {
width: 100%;
}

.phone-frame {
max-width: 90vw;
}

/*======================================================
PRICING FIX
======================================================*/

.pricing-card {
width: 100%;
}

.pricing-card.featured {
transform: none;
}

.pricing-card h1,
.pricing-card h2 {
overflow-wrap: anywhere;
}

/*======================================================
DESKTOP RESPONSIVE FIX
======================================================*/

@media (min-width: 992px) and (max-width: 1400px) {

.hero-content h1 {
font-size: 52px;
}

.hero-visual {
transform: scale(.88);
transform-origin: center;
}

.floating-card {
width: 165px;
}

.dashboard-cards {
grid-template-columns: repeat(2, 1fr);
}

.main-header {
padding-inline: 10px;
}

.navbar {
padding-inline: 18px;
}

.nav-link {
padding-inline: 12px !important;
}
}

/*======================================================
TABLET
======================================================*/

@media (max-width: 991px) {

.hero-section {
min-height: auto;
}

.hero-content {
margin-inline: auto;
}

.hero-visual {
height: 620px;
max-width: 620px;
}

.floating-card {
width: 155px;
padding: 16px;
}

.card-1 {
left: 20px;
}

.card-2 {
left: 20px;
bottom: 70px;
}

.card-3 {
right: 20px;
}

.ai-content,
.mobile-content {
margin-inline: auto;
}

.dashboard-sidebar {
flex-direction: row;
overflow-x: auto;
}

.menu-item {
min-width: 150px;
}
}

/*======================================================
MOBILE
======================================================*/

@media (max-width: 576px) {

.container {
width: min(100% - 24px, 1350px);
}

.hero-section {
padding-top: 130px;
}

.hero-visual {
height: 500px;
transform: none;
}

.floating-card {
display: none;
}

.hero-circle-1,
.orbit-1 {
width: 440px;
height: 440px;
}

.hero-circle-2,
.orbit-2 {
width: 360px;
height: 360px;
}

.hero-circle-3,
.orbit-3 {
width: 290px;
height: 290px;
}

.dashboard-preview {
padding: 18px;
}

.dashboard-chart {
height: 300px;
font-size: 24px;
}

.phone-frame {
width: 290px;
height: 590px;
}

.mobile-section,
.ai-section,
.dashboard-section,
.pricing-section {
padding-block: 90px;
}
}

/*======================================================
EARTH HERO SYSTEM
======================================================*/

.earth-system {
position: relative;
width: 680px;
height: 680px;
display: flex;
align-items: center;
justify-content: center;
}

.earth-shell {
position: relative;
width: 330px;
height: 330px;
border-radius: 50%;
z-index: 5;
}

#earth-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}

#earth-canvas canvas {
display: block;
width: 100% !important;
height: 100% !important;
}

.earth-atmosphere {
position: absolute;
inset: -10px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(
circle at 35% 30%,
rgba(96, 165, 250, 0.22),
transparent 55%
);
border: 1px solid rgba(125, 211, 252, 0.3);
box-shadow:
0 0 35px rgba(59, 130, 246, 0.45),
0 0 90px rgba(37, 99, 235, 0.28),
inset 0 0 45px rgba(125, 211, 252, 0.14);
}

.earth-core-brand {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
text-align: center;
text-shadow: 0 0 25px rgba(59, 130, 246, 0.9);
}

.earth-core-brand strong {
font-size: 46px;
line-height: 1;
font-weight: 900;
color: #ffffff;
}

.earth-core-brand span {
margin-top: 8px;
font-size: 11px;
letter-spacing: 1.5px;
color: #b7d8ff;
}

.earth-orbit {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(96, 165, 250, 0.18);
pointer-events: none;
}

.earth-orbit-outer {
width: 620px;
height: 620px;
border-style: dashed;
animation: earthOrbitSpin 38s linear infinite;
}

.earth-orbit-inner {
width: 500px;
height: 500px;
animation: earthOrbitSpinReverse 28s linear infinite;
}

@keyframes earthOrbitSpin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

@keyframes earthOrbitSpinReverse {
from {
transform: rotate(360deg);
}

to {
transform: rotate(0deg);
}
}

/*======================================================
ORBIT MODULES
======================================================*/

.orbit-module {
position: absolute;
min-width: 155px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 16px;
color: #eaf3ff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
background: rgba(8, 15, 34, 0.78);
border: 1px solid rgba(96, 165, 250, 0.22);
backdrop-filter: blur(14px);
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.3),
0 0 24px rgba(59, 130, 246, 0.12);
z-index: 15;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}

.orbit-module i {
color: #60a5fa;
font-size: 16px;
}

.orbit-module:hover {
transform: translateY(-5px) scale(1.04);
border-color: rgba(96, 165, 250, 0.7);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.36),
0 0 32px rgba(59, 130, 246, 0.35);
}

.module-warehouse {
top: 40px;
left: 50%;
transform: translateX(-50%);
}

.module-hr {
top: 145px;
right: 5px;
}

.module-production {
bottom: 145px;
right: 5px;
}

.module-sales {
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}

.module-purchase {
bottom: 145px;
left: 5px;
}

.module-finance {
top: 145px;
left: 5px;
}

.module-warehouse:hover,
.module-sales:hover {
transform: translateX(-50%) translateY(-5px) scale(1.04);
}

/*======================================================
EARTH STATUS
======================================================*/

.earth-status {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border-radius: 30px;
color: #c9ddff;
font-size: 12px;
white-space: nowrap;
background: rgba(8, 15, 34, 0.85);
border: 1px solid rgba(96, 165, 250, 0.2);
backdrop-filter: blur(14px);
z-index: 20;
}

.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow:
0 0 10px #22c55e,
0 0 22px rgba(34, 197, 94, 0.75);
animation: statusPulse 1.8s ease-in-out infinite;
}

@keyframes statusPulse {
0%,
100% {
opacity: 0.45;
transform: scale(0.85);
}

50% {
opacity: 1;
transform: scale(1.15);
}
}

/*======================================================
EARTH RESPONSIVE
======================================================*/

@media (max-width: 1200px) {
.earth-system {
transform: scale(0.88);
}
}

@media (max-width: 991px) {
.earth-system {
width: 620px;
height: 620px;
transform: scale(0.9);
}
}

@media (max-width: 576px) {
.earth-system {
width: 430px;
height: 500px;
transform: scale(0.82);
}

.earth-shell {
width: 280px;
height: 280px;
}

.earth-orbit-outer {
width: 470px;
height: 470px;
}

.earth-orbit-inner {
width: 380px;
height: 380px;
}

.orbit-module {
min-width: 125px;
padding: 10px 12px;
font-size: 11px;
}

.module-hr,
.module-production {
right: 0;
}

.module-finance,
.module-purchase {
left: 0;
}
}

/*======================================================
DASHBOARD CHART
======================================================*/

.dashboard-chart{
position:relative;
width:100%;
height:420px;
border-radius:28px;
padding:28px;
overflow:hidden;
background:linear-gradient(180deg,
rgba(22,32,62,.96),
rgba(11,18,35,.94));
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 25px 60px rgba(0,0,0,.35);
}

.chart-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:26px;
}

.chart-header span{
display:block;
color:#94a3b8;
font-size:13px;
}

.chart-header strong{
display:block;
color:#fff;
font-size:22px;
margin-top:6px;
}

.chart-growth{
display:flex;
align-items:center;
gap:10px;
padding:10px 18px;
border-radius:30px;
background:rgba(34,197,94,.12);
color:#22c55e;
font-weight:700;
}

.chart-area{
position:relative;
height:250px;
}

.chart-grid-lines{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.chart-grid-lines span{
width:100%;
border-top:1px dashed rgba(255,255,255,.07);
}

.sales-chart{
position:absolute;
inset:0;
width:100%;
height:100%;
}

.chart-line{
animation:drawChart 2s ease forwards;
stroke-dasharray:1400;
stroke-dashoffset:1400;
}

.chart-area-fill{
animation:fadeArea 2.3s ease forwards;
opacity:0;
}

.chart-point{
fill:#ffffff;
stroke:#3b82f6;
stroke-width:4;
filter:drop-shadow(0 0 12px #3b82f6);
animation:pulsePoint 2s infinite;
}

.chart-labels{
position:absolute;
left:0;
right:0;
bottom:-28px;
display:flex;
justify-content:space-between;
color:#94a3b8;
font-size:12px;
}

.chart-summary{
margin-top:55px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.chart-summary div{
border-radius:18px;
padding:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
}

.chart-summary span{
display:block;
color:#94a3b8;
font-size:12px;
}

.chart-summary strong{
display:block;
color:#fff;
margin-top:8px;
font-size:22px;
}

@keyframes drawChart{

to{

stroke-dashoffset:0;

}

}

@keyframes fadeArea{

to{

opacity:1;

}

}

@keyframes pulsePoint{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.18);

}

}

@media(max-width:991px){

.dashboard-chart{

height:auto;

padding:20px;

}

.chart-summary{

grid-template-columns:1fr;

}

.chart-header{

flex-direction:column;

align-items:flex-start;

gap:16px;

}

}
/*======================================================
ENTERPRISE DASHBOARD V2
======================================================*/

.enterprise-dashboard{
margin-top:60px;
background:rgba(10,16,34,.75);
border:1px solid rgba(255,255,255,.08);
border-radius:34px;
backdrop-filter:blur(22px);
overflow:hidden;
box-shadow:
0 30px 80px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.05);
}

.dashboard-topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:26px 34px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.dashboard-title{
display:flex;
align-items:center;
gap:18px;
}

.dashboard-title-icon{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
font-size:22px;
box-shadow:0 10px 35px rgba(59,130,246,.35);
}

.dashboard-title strong{
display:block;
color:#fff;
font-size:24px;
}

.dashboard-title span{
display:block;
margin-top:4px;
color:#94a3b8;
font-size:13px;
}

.dashboard-top-actions{
display:flex;
gap:14px;
}

.dashboard-top-actions button{
border:none;
outline:none;
color:#fff;
cursor:pointer;
padding:12px 22px;
border-radius:14px;
background:rgba(255,255,255,.05);
transition:.3s;
}

.dashboard-export{
background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
}

.dashboard-top-actions button:hover{
transform:translateY(-3px);
}
/*======================================================
ENTERPRISE DASHBOARD V2
PART 2 - LAYOUT & SIDEBAR
======================================================*/

.dashboard-layout{
display:grid;
grid-template-columns:240px minmax(0,1fr);
min-height:760px;
}

.dashboard-nav{
padding:24px 18px;
border-left:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.025);
display:flex;
flex-direction:column;
gap:10px;
}

.dashboard-nav-item{
width:100%;
display:flex;
align-items:center;
gap:14px;
padding:15px 16px;
border:none;
border-radius:16px;
background:transparent;
color:#9fb0d2;
font-family:inherit;
font-size:14px;
font-weight:700;
cursor:pointer;
text-align:right;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}

.dashboard-nav-item i{
width:42px;
height:42px;
flex:0 0 42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
background:rgba(255,255,255,.05);
color:#7dd3fc;
font-size:17px;
transition:.3s ease;
}

.dashboard-nav-item:hover{
background:rgba(255,255,255,.05);
color:#fff;
transform:translateX(-4px);
}

.dashboard-nav-item.active{
color:#fff;
background:
linear-gradient(
135deg,
rgba(37,99,235,.95),
rgba(124,58,237,.92)
);
box-shadow:
0 16px 36px rgba(37,99,235,.28);
}

.dashboard-nav-item.active i{
background:rgba(255,255,255,.16);
color:#fff;
}

.dashboard-ai-card{
margin-top:auto;
padding:20px;
border-radius:20px;
background:
linear-gradient(
145deg,
rgba(37,99,235,.14),
rgba(124,58,237,.12)
);
border:1px solid rgba(96,165,250,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04);
}

.dashboard-ai-card i{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
border-radius:15px;
color:#fff;
font-size:20px;
background:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);
box-shadow:
0 12px 30px rgba(59,130,246,.28);
}

.dashboard-ai-card strong{
display:block;
color:#fff;
font-size:15px;
margin-bottom:7px;
}

.dashboard-ai-card span{
display:block;
color:#9fb0d2;
font-size:12px;
line-height:1.8;
}

.dashboard-main{
min-width:0;
padding:26px;
display:flex;
flex-direction:column;
gap:22px;
}

.dashboard-kpi-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}

.dashboard-kpi-card{
min-width:0;
padding:22px;
border-radius:22px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.055),
rgba(255,255,255,.025)
);
border:1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}

.dashboard-kpi-card:hover{
transform:translateY(-7px);
border-color:rgba(96,165,250,.4);
box-shadow:
0 20px 42px rgba(0,0,0,.24),
0 0 28px rgba(59,130,246,.10);
}

.kpi-card-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}

.kpi-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
color:#fff;
font-size:18px;
}

.kpi-icon-blue{
background:linear-gradient(135deg,#0ea5e9,#2563eb);
}

.kpi-icon-purple{
background:linear-gradient(135deg,#7c3aed,#a855f7);
}

.kpi-icon-cyan{
background:linear-gradient(135deg,#06b6d4,#0ea5e9);
}

.kpi-icon-green{
background:linear-gradient(135deg,#16a34a,#22c55e);
}

.kpi-trend{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:30px;
font-size:11px;
font-weight:800;
}

.kpi-trend.positive{
color:#4ade80;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.16);
}

.kpi-trend.neutral{
color:#7dd3fc;
background:rgba(14,165,233,.10);
border:1px solid rgba(14,165,233,.16);
}

.kpi-label{
display:block;
color:#94a3b8;
font-size:12px;
margin-bottom:8px;
}

.kpi-value{
display:block;
color:#fff;
font-size:25px;
font-weight:900;
line-height:1.3;
margin-bottom:9px;
}

.dashboard-kpi-card small{
color:#7f8faf;
font-size:11px;
}
/*======================================================
ENTERPRISE DASHBOARD V2
PART 3 - ANALYTICS
======================================================*/

.dashboard-analytics-grid{

display:grid;

grid-template-columns:2.2fr .9fr;

gap:20px;

}

.dashboard-panel{

position:relative;

overflow:hidden;

border-radius:26px;

padding:24px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.07);

box-shadow:
inset 0 1px 0 rgba(255,255,255,.04);

}

.panel-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:22px;

}

.panel-header span{

display:block;

color:#94a3b8;

font-size:12px;

}

.panel-header strong{

display:block;

margin-top:6px;

color:#fff;

font-size:20px;

}

.chart-legend{

display:flex;

gap:18px;

color:#cbd5e1;

font-size:12px;

}

.chart-legend span{

display:flex;

align-items:center;

gap:8px;

}

.legend-dot{

width:10px;

height:10px;

border-radius:50%;

}

.sales-dot{

background:#3b82f6;

}

.profit-dot{

background:#a855f7;

}

.revenue-chart{

display:grid;

grid-template-columns:46px 1fr;

gap:18px;

height:330px;

}

.chart-y-axis{

display:flex;

flex-direction:column;

justify-content:space-between;

color:#64748b;

font-size:11px;

}

.chart-plot{

position:relative;

}

.chart-horizontal-lines{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:space-between;

}

.chart-horizontal-lines span{

border-top:1px dashed rgba(255,255,255,.06);

}

.chart-plot svg{

position:absolute;

inset:0;

width:100%;

height:100%;

}

.dashboard-area-path{

opacity:0;

animation:areaFade 1.8s ease forwards;

}

.dashboard-sales-line{

stroke-dasharray:1400;

stroke-dashoffset:1400;

animation:drawSalesLine 2.5s ease forwards;

}

.dashboard-profit-line{

stroke-dasharray:1200;

stroke-dashoffset:1200;

animation:drawProfitLine 2.8s ease forwards;

}

.chart-plot circle{

fill:#ffffff;

stroke:#3b82f6;

stroke-width:4;

filter:drop-shadow(0 0 12px #3b82f6);

}

.chart-x-axis{

position:absolute;

left:0;

right:0;

bottom:-26px;

display:flex;

justify-content:space-between;

color:#94a3b8;

font-size:11px;

}

@keyframes drawSalesLine{

to{

stroke-dashoffset:0;

}

}

@keyframes drawProfitLine{

to{

stroke-dashoffset:0;

}

}

@keyframes areaFade{

to{

opacity:1;

}

}

.target-panel{

display:flex;

flex-direction:column;

}

.target-donut{

position:relative;

width:220px;

height:220px;

margin:18px auto;

}

.target-donut svg{

width:100%;

height:100%;

transform:rotate(-90deg);

}

.donut-background{

fill:none;

stroke:rgba(255,255,255,.08);

stroke-width:12;

}

.donut-progress{

fill:none;

stroke:#3b82f6;

stroke-width:12;

stroke-linecap:round;

stroke-dasharray:390;

stroke-dashoffset:32;

filter:drop-shadow(0 0 16px rgba(59,130,246,.7));

}

.target-donut-value{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.target-donut-value strong{

color:#fff;

font-size:42px;

font-weight:900;

}

.target-donut-value span{

margin-top:6px;

color:#94a3b8;

}

.target-details{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-top:auto;

}

.target-details div{

padding:14px;

border-radius:16px;

background:rgba(255,255,255,.04);

}

.target-details span{

display:block;

color:#94a3b8;

font-size:11px;

}

.target-details strong{

display:block;

margin-top:8px;

color:#fff;

font-size:18px;

}
/*======================================================
ENTERPRISE DASHBOARD V2
PART 4 - BOTTOM PANELS & RESPONSIVE
======================================================*/

.dashboard-bottom-grid{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:20px;
}

.department-bars{
display:flex;
flex-direction:column;
gap:20px;
}

.department-row{
display:grid;
grid-template-columns:90px minmax(0,1fr) 48px;
align-items:center;
gap:14px;
}

.department-row > span{
color:#cbd5e1;
font-size:13px;
font-weight:700;
}

.department-progress{
height:10px;
overflow:hidden;
border-radius:20px;
background:rgba(255,255,255,.06);
box-shadow:inset 0 1px 4px rgba(0,0,0,.35);
}

.department-progress i{
display:block;
height:100%;
border-radius:20px;
background:
linear-gradient(
90deg,
#22d3ee,
#3b82f6,
#8b5cf6
);
box-shadow:
0 0 14px rgba(59,130,246,.35);
animation:departmentGrow 1.8s ease forwards;
transform-origin:right center;
}

.department-row strong{
color:#fff;
font-size:13px;
text-align:left;
}

@keyframes departmentGrow{
from{
transform:scaleX(0);
}

to{
transform:scaleX(1);
}
}

.activity-panel .panel-header a{
color:#60a5fa;
font-size:12px;
text-decoration:none;
transition:.3s ease;
}

.activity-panel .panel-header a:hover{
color:#93c5fd;
}

.activity-list{
display:flex;
flex-direction:column;
gap:14px;
}

.activity-item{
display:grid;
grid-template-columns:46px minmax(0,1fr) auto;
align-items:center;
gap:14px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.05);
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease;
}

.activity-item:hover{
transform:translateX(-5px);
background:rgba(255,255,255,.055);
border-color:rgba(96,165,250,.18);
}

.activity-icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
font-size:16px;
}

.activity-success{
color:#4ade80;
background:rgba(34,197,94,.11);
}

.activity-warning{
color:#fbbf24;
background:rgba(245,158,11,.11);
}

.activity-info{
color:#60a5fa;
background:rgba(59,130,246,.11);
}

.activity-item strong{
display:block;
color:#fff;
font-size:13px;
margin-bottom:5px;
}

.activity-item span{
display:block;
color:#94a3b8;
font-size:11px;
}

.activity-item time{
color:#64748b;
font-size:10px;
white-space:nowrap;
}

/*======================================================
DASHBOARD RESPONSIVE
======================================================*/

@media(max-width:1200px){

.dashboard-kpi-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.dashboard-analytics-grid{
grid-template-columns:1fr;
}

.dashboard-bottom-grid{
grid-template-columns:1fr;
}

}

@media(max-width:991px){

.dashboard-topbar{
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.dashboard-top-actions{
width:100%;
}

.dashboard-top-actions button{
flex:1;
}

.dashboard-layout{
grid-template-columns:1fr;
}

.dashboard-nav{
border-left:none;
border-bottom:1px solid rgba(255,255,255,.06);
flex-direction:row;
overflow-x:auto;
padding-bottom:18px;
}

.dashboard-nav-item{
min-width:165px;
flex:0 0 auto;
}

.dashboard-nav-item:hover{
transform:translateY(-3px);
}

.dashboard-ai-card{
min-width:210px;
margin-top:0;
flex:0 0 auto;
}

.revenue-chart{
height:290px;
}

}

@media(max-width:768px){

.enterprise-dashboard{
border-radius:24px;
}

.dashboard-topbar{
padding:20px;
}

.dashboard-main{
padding:18px;
}

.dashboard-kpi-grid{
grid-template-columns:1fr;
}

.dashboard-panel{
padding:18px;
}

.panel-header{
flex-direction:column;
gap:12px;
}

.chart-legend{
width:100%;
justify-content:flex-start;
}

.revenue-chart{
grid-template-columns:34px 1fr;
height:250px;
}

.target-donut{
width:190px;
height:190px;
}

.department-row{
grid-template-columns:72px minmax(0,1fr) 42px;
gap:10px;
}

.activity-item{
grid-template-columns:42px minmax(0,1fr);
}

.activity-item time{
grid-column:2;
}

}

@media(max-width:576px){

.dashboard-title-icon{
width:48px;
height:48px;
}

.dashboard-title strong{
font-size:19px;
}

.dashboard-top-actions{
flex-direction:column;
}

.dashboard-top-actions button{
width:100%;
}

.dashboard-main{
padding:14px;
}

.dashboard-kpi-card{
padding:18px;
}

.kpi-value{
font-size:22px;
}

.chart-x-axis{
font-size:9px;
}

.revenue-chart{
height:220px;
gap:10px;
}

.target-details{
grid-template-columns:1fr;
}

.department-row{
grid-template-columns:1fr;
gap:8px;
}

.department-row strong{
text-align:right;
}

}


/*======================================================
FINAL TARGETED EDITS
Only Hero visual, AI visual, Mobile phone and Footer theme
======================================================*/

/* Obsolete Hero decoration removed, grid background remains untouched */
.hero-visual .floating-card,
.hero-visual .node,
.hero-visual .line{
display:none !important;
}

/* HERO EARTH VISUAL */
.hero-visual{
height:720px;
overflow:visible;
}

.hero-glow{
width:620px;
height:620px;
background:
radial-gradient(circle,
rgba(0,229,168,.17) 0%,
rgba(16,216,255,.10) 34%,
rgba(37,99,235,.08) 54%,
transparent 72%);
filter:blur(72px);
animation:htHeroGlow 5s ease-in-out infinite;
}

@keyframes htHeroGlow{
0%,100%{opacity:.62;transform:scale(.96)}
50%{opacity:1;transform:scale(1.05)}
}

.earth-system{
width:680px;
height:680px;
isolation:isolate;
}

.earth-system::before{
content:"";
position:absolute;
left:50%;
bottom:68px;
width:350px;
height:72px;
transform:translateX(-50%);
border-radius:50%;
border:1px solid rgba(0,229,168,.32);
background:
radial-gradient(ellipse,
rgba(0,229,168,.22),
rgba(16,216,255,.08) 42%,
transparent 72%);
box-shadow:
0 0 25px rgba(0,229,168,.28),
0 0 75px rgba(16,216,255,.16);
z-index:2;
animation:htEarthBase 3.8s ease-in-out infinite;
}

.earth-system::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:485px;
height:174px;
transform:translate(-50%,-50%) rotate(-10deg);
border-radius:50%;
border:1px solid rgba(0,229,168,.32);
box-shadow:
0 0 18px rgba(0,229,168,.20),
inset 0 0 16px rgba(16,216,255,.08);
z-index:7;
pointer-events:none;
animation:htDataOrbit 11s linear infinite;
}

@keyframes htEarthBase{
0%,100%{opacity:.55;transform:translateX(-50%) scale(.94)}
50%{opacity:1;transform:translateX(-50%) scale(1.04)}
}

@keyframes htDataOrbit{
from{transform:translate(-50%,-50%) rotate(-10deg) rotateZ(0deg)}
to{transform:translate(-50%,-50%) rotate(-10deg) rotateZ(360deg)}
}

.earth-shell{
width:380px;
height:380px;
z-index:6;
filter:drop-shadow(0 24px 34px rgba(0,0,0,.42));
animation:htEarthFloat 6s ease-in-out infinite;
}

@keyframes htEarthFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}

#earth-canvas{
background:
radial-gradient(circle at 68% 30%,rgba(255,214,140,.12),transparent 25%),
radial-gradient(circle at 30% 65%,rgba(0,229,168,.10),transparent 45%);
box-shadow:
0 0 46px rgba(0,229,168,.28),
0 0 110px rgba(16,216,255,.15);
}

#earth-canvas canvas{
filter:saturate(.88) brightness(.82) contrast(1.14);
}

.earth-atmosphere{
inset:-13px;
border-color:rgba(0,229,168,.46);
background:
radial-gradient(circle at 72% 28%,rgba(255,226,168,.14),transparent 28%),
radial-gradient(circle at 34% 38%,rgba(16,216,255,.18),transparent 52%);
box-shadow:
0 0 30px rgba(0,229,168,.46),
0 0 82px rgba(16,216,255,.26),
inset 0 0 42px rgba(0,229,168,.12);
animation:htAtmospherePulse 3.2s ease-in-out infinite;
}

@keyframes htAtmospherePulse{
0%,100%{opacity:.66}
50%{opacity:1}
}

.earth-core-brand{
display:none;
}

.earth-orbit{
z-index:5;
border-color:rgba(0,229,168,.32);
box-shadow:0 0 12px rgba(0,229,168,.12);
}

.earth-orbit-outer{
width:535px;
height:235px;
border-style:solid;
animation:htOrbitOne 15s linear infinite;
}

.earth-orbit-inner{
width:470px;
height:180px;
border-color:rgba(16,216,255,.28);
animation:htOrbitTwo 11s linear infinite reverse;
}

@keyframes htOrbitOne{
from{transform:rotate(-18deg) rotateZ(0)}
to{transform:rotate(-18deg) rotateZ(360deg)}
}

@keyframes htOrbitTwo{
from{transform:rotate(21deg) rotateZ(0)}
to{transform:rotate(21deg) rotateZ(360deg)}
}

.orbit-module{
min-width:185px;
padding:15px 18px;
gap:12px;
border-radius:18px;
color:#f1fff9;
font-size:14px;
background:
linear-gradient(145deg,rgba(6,22,28,.88),rgba(5,14,27,.78));
border:1px solid rgba(110,255,211,.28);
box-shadow:
0 18px 40px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.04),
0 0 20px rgba(0,229,168,.08);
}

.orbit-module i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
color:#00e5a8;
font-size:18px;
background:
radial-gradient(circle,rgba(0,229,168,.22),rgba(0,229,168,.06));
box-shadow:
0 0 18px rgba(0,229,168,.22);
}

.orbit-module::after{
content:"";
position:absolute;
top:50%;
width:88px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(0,229,168,.75));
box-shadow:0 0 8px rgba(0,229,168,.48);
pointer-events:none;
}

.orbit-module::before{
content:"";
position:absolute;
top:calc(50% - 3px);
width:7px;
height:7px;
border-radius:50%;
background:#00e5a8;
box-shadow:
0 0 8px #00e5a8,
0 0 18px rgba(0,229,168,.80);
pointer-events:none;
animation:htModuleNode 2s ease-in-out infinite;
}

@keyframes htModuleNode{
0%,100%{opacity:.55;transform:scale(.85)}
50%{opacity:1;transform:scale(1.25)}
}

.module-warehouse,
.module-hr,
.module-production{
right:0;
left:auto;
transform:none;
}

.module-sales,
.module-purchase,
.module-finance{
left:0;
right:auto;
transform:none;
}

.module-warehouse{top:80px}
.module-hr{top:265px}
.module-production{bottom:80px}
.module-sales{top:80px;bottom:auto}
.module-purchase{top:265px;bottom:auto}
.module-finance{bottom:80px;top:auto}

.module-warehouse::after,
.module-hr::after,
.module-production::after{
left:-88px;
background:linear-gradient(90deg,rgba(0,229,168,.75),transparent);
}

.module-warehouse::before,
.module-hr::before,
.module-production::before{
left:-92px;
}

.module-sales::after,
.module-purchase::after,
.module-finance::after{
right:-88px;
}

.module-sales::before,
.module-purchase::before,
.module-finance::before{
right:-92px;
}

.orbit-module:hover,
.module-warehouse:hover,
.module-sales:hover{
transform:translateY(-5px) scale(1.025);
border-color:rgba(110,255,211,.62);
box-shadow:
0 22px 48px rgba(0,0,0,.36),
0 0 28px rgba(0,229,168,.22);
}

.earth-status{
bottom:22px;
color:#d8fff2;
border-color:rgba(0,229,168,.30);
background:rgba(5,19,24,.88);
}

.status-dot{
background:#00e5a8;
box-shadow:
0 0 10px #00e5a8,
0 0 22px rgba(0,229,168,.78);
}

/* AI VISUAL: adjacent HTML content remains unchanged */
.ai-platform{
width:560px;
height:560px;
border:0;
background:transparent;
backdrop-filter:none;
box-shadow:none;
overflow:visible;
}

.ai-brain-aura{
position:absolute;
inset:6%;
border-radius:50%;
background:
radial-gradient(circle,
rgba(0,133,255,.28),
rgba(72,46,255,.13) 43%,
transparent 70%);
filter:blur(32px);
animation:htAiAura 3.4s ease-in-out infinite;
}

.ai-brain-stage{
position:relative;
width:520px;
height:520px;
display:grid;
place-items:center;
border-radius:50%;
overflow:hidden;
animation:htAiFloat 5.6s ease-in-out infinite;
filter:
drop-shadow(0 0 25px rgba(0,160,255,.45))
drop-shadow(0 0 65px rgba(65,48,255,.24));
}

.ai-brain-stage::before{
content:"";
position:absolute;
inset:7%;
z-index:2;
border-radius:50%;
border:1px solid rgba(80,190,255,.28);
box-shadow:
inset 0 0 24px rgba(0,160,255,.15),
0 0 24px rgba(0,160,255,.15);
animation:htAiRing 12s linear infinite;
pointer-events:none;
}

.ai-brain-stage::after{
content:"";
position:absolute;
inset:2%;
z-index:1;
border-radius:50%;
background:
conic-gradient(
from 0deg,
transparent 0 18%,
rgba(0,202,255,.22) 21%,
transparent 25% 48%,
rgba(104,76,255,.18) 52%,
transparent 56% 100%);
animation:htAiRing 18s linear infinite reverse;
pointer-events:none;
}

.ai-brain-image{
position:relative;
z-index:1;
width:100%;
height:100%;
display:block;
object-fit:contain;
border-radius:46%;
mix-blend-mode:screen;
transform:scale(.96);
animation:htAiPulse 3.2s ease-in-out infinite;
}

.ai-brain-scan{
position:absolute;
z-index:4;
top:8%;
bottom:8%;
left:8%;
width:2px;
background:
linear-gradient(to bottom,
transparent,
rgba(72,210,255,.9),
transparent);
box-shadow:0 0 16px rgba(72,210,255,.9);
animation:htAiScan 4.2s ease-in-out infinite;
pointer-events:none;
}

@keyframes htAiAura{
0%,100%{opacity:.55;transform:scale(.94)}
50%{opacity:1;transform:scale(1.04)}
}

@keyframes htAiFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-14px)}
}

@keyframes htAiPulse{
0%,100%{filter:brightness(.92) saturate(1.06);transform:scale(.94)}
50%{filter:brightness(1.14) saturate(1.22);transform:scale(.99)}
}

@keyframes htAiRing{
to{transform:rotate(360deg)}
}

@keyframes htAiScan{
0%,100%{left:8%;opacity:0}
15%{opacity:1}
50%{left:91%;opacity:.9}
85%{opacity:1}
}

/* MOBILE PHONE VIEW: adjacent HTML copy remains unchanged */
.phone-frame{
animation:htPhoneFloat 5.5s ease-in-out infinite;
}

@keyframes htPhoneFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}

.phone-screen{
position:relative;
padding:34px 18px 16px;
background:
radial-gradient(circle at 20% 6%,rgba(37,99,235,.24),transparent 35%),
linear-gradient(180deg,#101a34,#0a1225 55%,#07101f);
}

.screen-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
font-size:initial;
}

.screen-header strong{
display:block;
font-size:18px;
color:#fff;
}

.screen-header small{
display:block;
margin-top:2px;
color:#8393b2;
font-size:9px;
}

.screen-header>i{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:11px;
color:#7dd3fc;
background:rgba(255,255,255,.055);
}

.screen-balance{
padding:18px;
border-radius:20px;
background:
linear-gradient(135deg,rgba(37,99,235,.90),rgba(124,58,237,.86));
box-shadow:0 16px 32px rgba(37,99,235,.22);
}

.screen-balance span{
display:block;
color:#dbeafe;
font-size:10px;
}

.screen-balance strong{
display:block;
margin-top:7px;
font-size:23px;
color:#fff;
}

.screen-balance em{
display:inline-block;
margin-top:7px;
color:#86efac;
font-size:9px;
font-style:normal;
}

.screen-kpis{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:9px;
margin-top:11px;
}

.screen-kpis>div{
padding:12px;
border:1px solid rgba(255,255,255,.07);
border-radius:15px;
background:rgba(255,255,255,.045);
}

.screen-kpis i{
color:#7dd3fc;
font-size:13px;
}

.screen-kpis strong{
display:block;
margin-top:6px;
font-size:15px;
color:#fff;
}

.screen-kpis span{
display:block;
margin-top:2px;
color:#7f8fab;
font-size:8px;
}

.screen-chart{
height:125px;
margin:11px 0 0;
padding:12px;
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
background:rgba(255,255,255,.035);
}

.screen-chart-title{
display:flex;
align-items:center;
justify-content:space-between;
}

.screen-chart-title span{
color:#8393b2;
font-size:9px;
}

.screen-chart-title strong{
font-size:10px;
color:#fff;
}

.screen-chart-bars{
height:76px;
display:flex;
align-items:flex-end;
gap:6px;
margin-top:9px;
}

.screen-chart-bars i{
flex:1;
min-height:12px;
border-radius:6px 6px 2px 2px;
background:
linear-gradient(to top,#2563eb,#22d3ee);
box-shadow:0 0 10px rgba(34,211,238,.12);
animation:htMobileBars 2.8s ease-in-out infinite alternate;
}

.screen-chart-bars i:nth-child(2n){
animation-delay:.25s;
}

@keyframes htMobileBars{
from{filter:brightness(.78);transform:scaleY(.92);transform-origin:bottom}
to{filter:brightness(1.18);transform:scaleY(1);transform-origin:bottom}
}

.screen-activity{
display:flex;
flex-direction:column;
gap:7px;
margin-top:10px;
}

.screen-activity>div{
display:flex;
align-items:center;
gap:8px;
padding:8px;
border-radius:12px;
background:rgba(255,255,255,.035);
}

.screen-activity>div>i{
width:28px;
height:28px;
display:grid;
place-items:center;
flex:0 0 28px;
border-radius:9px;
color:#7dd3fc;
background:rgba(37,99,235,.13);
font-size:10px;
}

.screen-activity p{
margin:0;
}

.screen-activity strong{
display:block;
font-size:9px;
color:#f1f5f9;
}

.screen-activity span{
display:block;
margin-top:2px;
font-size:7px;
color:#7686a4;
}

.screen-nav{
position:absolute;
left:16px;
right:16px;
bottom:14px;
display:flex;
align-items:center;
justify-content:space-around;
padding:10px;
border-radius:15px;
background:rgba(255,255,255,.045);
backdrop-filter:blur(10px);
}

.screen-nav i{
color:#667895;
font-size:12px;
}

.screen-nav i.active{
color:#60a5fa;
text-shadow:0 0 12px rgba(96,165,250,.7);
}

/* FOOTER THEME ONLY: all text and links remain unchanged */
.footer{
position:relative;
overflow:hidden;
padding:105px 0 34px;
border-top:1px solid rgba(96,165,250,.14);
background:
radial-gradient(circle at 14% 0,rgba(37,99,235,.16),transparent 32%),
radial-gradient(circle at 88% 15%,rgba(124,58,237,.14),transparent 34%),
linear-gradient(180deg,rgba(6,11,24,.90),rgba(3,7,16,.98));
backdrop-filter:blur(18px);
}

.footer::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(90deg,transparent,#22d3ee,#7c3aed,transparent);
box-shadow:
0 0 18px rgba(34,211,238,.65),
0 0 32px rgba(124,58,237,.28);
}

.footer::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.20;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:46px 46px;
mask-image:linear-gradient(to bottom,black,transparent 80%);
}

.footer>.container{
position:relative;
z-index:2;
}

.footer .row{
padding:38px 30px 32px;
border:1px solid rgba(255,255,255,.075);
border-radius:26px;
background:
linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
box-shadow:
0 30px 70px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.035);
}

.footer-logo .logo-icon{
box-shadow:
0 12px 30px rgba(59,130,246,.28),
0 0 24px rgba(124,58,237,.18);
}

.footer h5{
position:relative;
padding-bottom:12px;
}

.footer h5::after{
content:"";
position:absolute;
right:0;
bottom:0;
width:34px;
height:2px;
border-radius:99px;
background:linear-gradient(90deg,#22d3ee,#7c3aed);
box-shadow:0 0 12px rgba(34,211,238,.38);
}

.footer li{
transition:transform .25s ease;
}

.footer li:hover{
transform:translateX(-4px);
}

.footer a{
position:relative;
}

.footer a:hover{
color:#8ad8ff;
text-shadow:0 0 14px rgba(88,188,255,.24);
}

.social-links a{
border:1px solid rgba(255,255,255,.08);
background:
linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.social-links a:hover{
color:#fff;
border-color:rgba(96,165,250,.40);
background:linear-gradient(135deg,#2563eb,#7c3aed);
box-shadow:
0 12px 28px rgba(37,99,235,.28),
0 0 22px rgba(124,58,237,.18);
transform:translateY(-4px);
}

.footer-bottom{
margin-top:24px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.07);
}

.footer-bottom p{
margin:0;
}

/* RESPONSIVE TARGETED EDITS */
@media(max-width:1200px){
.hero-visual{
height:670px;
}

.earth-system{
transform:scale(.88);
}

.ai-platform{
width:500px;
height:500px;
}

.ai-brain-stage{
width:470px;
height:470px;
}
}

@media(max-width:991px){
.hero-visual{
height:650px;
}

.earth-system{
width:650px;
height:650px;
transform:scale(.86);
}

.ai-visual{
height:560px;
}

.ai-platform{
width:500px;
height:500px;
}

.footer .row{
padding:30px 22px;
row-gap:34px;
}
}

@media(max-width:576px){
.hero-visual{
height:600px;
overflow:hidden;
}

.earth-system{
width:620px;
height:620px;
transform:scale(.65);
}

.orbit-module{
min-width:170px;
font-size:13px;
}

.ai-visual{
height:440px;
}

.ai-platform{
width:390px;
height:390px;
}

.ai-brain-stage{
width:380px;
height:380px;
}

.phone-frame{
width:290px;
height:620px;
}

.phone-screen{
padding-inline:15px;
}

.screen-balance strong{
font-size:20px;
}

.footer{
padding-top:82px;
}

.footer .row{
padding:26px 18px;
border-radius:20px;
}
}


/*======================================================
SMALL FIXES - HERO / AI / MOBILE
No content or section structure changed
======================================================*/

/* HERO: stagger the six module cards around the globe */
.orbit-module{
--card-rotate:0deg;
animation:htModuleFloat 5.2s ease-in-out infinite;
transform:rotate(var(--card-rotate));
transform-origin:center;
will-change:transform;
}

.module-warehouse{
top:34px;
right:28px;
--card-rotate:-2.1deg;
animation-delay:-.4s;
}

.module-hr{
top:248px;
right:-26px;
--card-rotate:1.5deg;
animation-delay:-2.6s;
}

.module-production{
top:auto;
bottom:38px;
right:42px;
--card-rotate:-1.2deg;
animation-delay:-1.4s;
}

.module-sales{
top:108px;
left:-24px;
--card-rotate:2deg;
animation-delay:-3.1s;
}

.module-purchase{
top:326px;
left:34px;
--card-rotate:-1.7deg;
animation-delay:-.9s;
}

.module-finance{
top:auto;
bottom:8px;
left:-8px;
--card-rotate:1.6deg;
animation-delay:-2s;
}

@keyframes htModuleFloat{
0%,100%{
transform:translateY(0) rotate(var(--card-rotate));
}
50%{
transform:translateY(-8px) rotate(var(--card-rotate));
}
}

.orbit-module:hover,
.module-warehouse:hover,
.module-sales:hover{
animation-play-state:paused;
transform:translateY(-8px) scale(1.035) rotate(var(--card-rotate));
}

/* Individual connector lengths follow the staggered card positions */
.module-warehouse::after{width:112px;left:-112px}
.module-warehouse::before{left:-116px}

.module-hr::after{width:74px;left:-74px}
.module-hr::before{left:-78px}

.module-production::after{width:102px;left:-102px}
.module-production::before{left:-106px}

.module-sales::after{width:106px;right:-106px}
.module-sales::before{right:-110px}

.module-purchase::after{width:76px;right:-76px}
.module-purchase::before{right:-80px}

.module-finance::after{width:116px;right:-116px}
.module-finance::before{right:-120px}

/* Add depth without changing Hero HTML */
.earth-system{
perspective:1100px;
}

.earth-shell{
transform-style:preserve-3d;
}

.earth-system::before{
filter:blur(.2px);
}

.orbit-module:nth-of-type(1),
.orbit-module:nth-of-type(4){
backdrop-filter:blur(18px);
}

.orbit-module:nth-of-type(2),
.orbit-module:nth-of-type(5){
background:
linear-gradient(145deg,rgba(8,28,30,.92),rgba(5,14,27,.80));
}

.orbit-module:nth-of-type(3),
.orbit-module:nth-of-type(6){
background:
linear-gradient(145deg,rgba(7,20,31,.92),rgba(7,27,26,.80));
}

/* AI: transparent image, no dark circular plate, slightly lower alignment */
.ai-visual{
align-items:center;
}

.ai-platform{
transform:translateY(48px);
}

.ai-brain-stage{
overflow:visible;
border-radius:0;
filter:
drop-shadow(0 0 24px rgba(0,160,255,.42))
drop-shadow(0 0 58px rgba(65,48,255,.22));
}

.ai-brain-stage::before{
inset:11%;
border-color:rgba(80,190,255,.20);
}

.ai-brain-stage::after{
inset:7%;
}

.ai-brain-image{
border-radius:0;
mix-blend-mode:normal;
object-fit:contain;
}

/* MOBILE: keep phone and existing copy side-by-side from tablet upward */
@media(min-width:768px){
.mobile-section .row{
display:flex;
flex-wrap:nowrap;
align-items:center;
}

.mobile-section .row > .col-lg-6{
flex:0 0 50%;
width:50%;
max-width:50%;
}

.mobile-image{
justify-content:center;
}

.mobile-content{
margin-inline:auto;
}
}

@media(max-width:991px) and (min-width:768px){
.mobile-section{
padding-block:105px;
}

.phone-frame{
width:300px;
height:620px;
}

.mobile-content h2{
font-size:clamp(34px,4.7vw,46px);
}

.mobile-content p{
font-size:15px;
line-height:1.9;
}
}

@media(max-width:767px){
.mobile-section .row{
display:flex;
flex-direction:column;
}

.mobile-section .row > .col-lg-6{
width:100%;
max-width:100%;
}

.mobile-image{
order:1;
}

.mobile-content{
order:2;
margin-top:42px;
text-align:center;
}
}


/*======================================================
CORRECTIONS V2
Hero layout, transparent AI brain, mobile two-column layout
======================================================*/

/* HERO: clean orbital arrangement, no tilted cards */
.orbit-module{
--card-rotate:0deg !important;
transform:none !important;
animation:htModuleFloatSoft 5.8s ease-in-out infinite !important;
min-width:182px;
}

@keyframes htModuleFloatSoft{
0%,100%{transform:translateY(0) !important}
50%{transform:translateY(-5px) !important}
}

.orbit-module:hover,
.module-warehouse:hover,
.module-sales:hover{
transform:translateY(-6px) scale(1.025) !important;
}

/* Cards follow two curved arcs, rather than rigid horizontal rows */
.module-warehouse{
top:58px !important;
right:18px !important;
bottom:auto !important;
left:auto !important;
animation-delay:-.4s !important;
}

.module-hr{
top:254px !important;
right:-34px !important;
bottom:auto !important;
left:auto !important;
animation-delay:-2.2s !important;
}

.module-production{
top:auto !important;
right:28px !important;
bottom:52px !important;
left:auto !important;
animation-delay:-1.1s !important;
}

.module-sales{
top:122px !important;
left:12px !important;
right:auto !important;
bottom:auto !important;
animation-delay:-3s !important;
}

.module-purchase{
top:332px !important;
left:-38px !important;
right:auto !important;
bottom:auto !important;
animation-delay:-1.5s !important;
}

.module-finance{
top:auto !important;
left:38px !important;
right:auto !important;
bottom:12px !important;
animation-delay:-2.5s !important;
}

/* Shorter, subtler connectors */
.orbit-module::after{
height:1px !important;
opacity:.68;
}

.module-warehouse::after{width:86px !important;left:-86px !important}
.module-warehouse::before{left:-90px !important}

.module-hr::after{width:62px !important;left:-62px !important}
.module-hr::before{left:-66px !important}

.module-production::after{width:82px !important;left:-82px !important}
.module-production::before{left:-86px !important}

.module-sales::after{width:82px !important;right:-82px !important}
.module-sales::before{right:-86px !important}

.module-purchase::after{width:60px !important;right:-60px !important}
.module-purchase::before{right:-64px !important}

.module-finance::after{width:88px !important;right:-88px !important}
.module-finance::before{right:-92px !important}

/* AI: only the transparent brain remains, with glow and animation */
.ai-platform{
transform:translateY(54px) !important;
background:transparent !important;
box-shadow:none !important;
border:0 !important;
}

.ai-brain-stage{
width:500px !important;
height:500px !important;
overflow:visible !important;
border-radius:0 !important;
background:transparent !important;
filter:
drop-shadow(0 0 19px rgba(0,160,255,.58))
drop-shadow(0 0 48px rgba(74,60,255,.30)) !important;
}

.ai-brain-stage::before,
.ai-brain-stage::after,
.ai-brain-scan{
display:none !important;
}

.ai-brain-aura{
inset:14% !important;
background:
radial-gradient(circle,
rgba(0,153,255,.22),
rgba(76,55,255,.10) 44%,
transparent 72%) !important;
filter:blur(34px) !important;
}

.ai-brain-image{
width:100% !important;
height:100% !important;
object-fit:contain !important;
border-radius:0 !important;
mix-blend-mode:normal !important;
animation:htAiBrainOnly 4.8s ease-in-out infinite !important;
}

@keyframes htAiBrainOnly{
0%,100%{
transform:translateY(0) scale(.96);
filter:brightness(.98) saturate(1.08);
}
50%{
transform:translateY(-10px) scale(1.01);
filter:brightness(1.16) saturate(1.24);
}
}

/* MOBILE: copy on the left, phone on the right, even below Bootstrap lg */
@media(min-width:560px){
.mobile-section .row{
display:grid !important;
grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr) !important;
grid-template-areas:"copy phone" !important;
align-items:center !important;
gap:clamp(30px,6vw,80px) !important;
min-height:750px !important;
}

.mobile-section .row > .col-lg-6:first-child{
grid-area:phone !important;
width:auto !important;
max-width:none !important;
padding:0 !important;
}

.mobile-section .row > .col-lg-6:last-child{
grid-area:copy !important;
width:auto !important;
max-width:none !important;
padding:0 !important;
}

.mobile-image{
justify-content:center !important;
}

.mobile-content{
max-width:650px !important;
margin:0 !important;
text-align:right !important;
}
}

@media(max-width:559px){
.mobile-section .row{
display:flex !important;
flex-direction:column !important;
}

.mobile-section .row > .col-lg-6{
width:100% !important;
max-width:100% !important;
}

.mobile-image{order:1 !important}
.mobile-content{
order:2 !important;
margin-top:40px !important;
text-align:center !important;
}
}

@media(max-width:1200px){
.ai-brain-stage{
width:455px !important;
height:455px !important;
}
}

@media(max-width:576px){
.ai-platform{
transform:translateY(28px) !important;
}
.ai-brain-stage{
width:360px !important;
height:360px !important;
}
}


/*======================================================
CORRECTIONS V3
Hero harmony, AI clean transparency, Mobile real columns
======================================================*/

/* HERO: quieter globe, cleaner glow */
.hero-glow{
width:540px !important;
height:540px !important;
opacity:.58 !important;
filter:blur(84px) !important;
background:
radial-gradient(circle,
rgba(0,229,168,.11) 0%,
rgba(16,216,255,.07) 38%,
transparent 72%) !important;
}

.earth-system{
width:660px !important;
height:660px !important;
}

.earth-shell{
width:350px !important;
height:350px !important;
filter:
drop-shadow(0 22px 30px rgba(0,0,0,.42))
drop-shadow(0 0 20px rgba(0,229,168,.16)) !important;
}

#earth-canvas{
box-shadow:
0 0 24px rgba(0,229,168,.18),
0 0 58px rgba(16,216,255,.09) !important;
}

#earth-canvas canvas{
filter:saturate(.76) brightness(.72) contrast(1.12) !important;
}

.earth-atmosphere{
inset:-8px !important;
border-color:rgba(0,229,168,.24) !important;
background:
radial-gradient(circle at 72% 28%,rgba(255,226,168,.08),transparent 30%),
radial-gradient(circle at 34% 38%,rgba(16,216,255,.08),transparent 54%) !important;
box-shadow:
0 0 17px rgba(0,229,168,.22),
0 0 36px rgba(16,216,255,.12),
inset 0 0 24px rgba(0,229,168,.07) !important;
}

.earth-system::before{
width:295px !important;
height:52px !important;
bottom:72px !important;
opacity:.48 !important;
box-shadow:
0 0 16px rgba(0,229,168,.16),
0 0 38px rgba(16,216,255,.08) !important;
}

.earth-system::after{
width:430px !important;
height:150px !important;
border-color:rgba(0,229,168,.20) !important;
box-shadow:
0 0 10px rgba(0,229,168,.10),
inset 0 0 10px rgba(16,216,255,.05) !important;
}

.earth-orbit{
opacity:.58 !important;
border-color:rgba(0,229,168,.20) !important;
box-shadow:none !important;
}

.earth-orbit-outer{
width:485px !important;
height:210px !important;
}

.earth-orbit-inner{
width:425px !important;
height:164px !important;
border-color:rgba(16,216,255,.18) !important;
}

/* HERO: harmonious two-arc card composition */
.orbit-module{
width:184px !important;
min-width:184px !important;
min-height:64px !important;
padding:11px 14px !important;
border-radius:15px !important;
gap:10px !important;
font-size:12px !important;
border-color:rgba(110,255,211,.22) !important;
background:
linear-gradient(145deg,rgba(7,22,27,.88),rgba(5,13,25,.82)) !important;
box-shadow:
0 12px 28px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.03),
0 0 12px rgba(0,229,168,.05) !important;
animation:htCardBreath 5.5s ease-in-out infinite !important;
transform:none !important;
}

.orbit-module i{
width:36px !important;
height:36px !important;
font-size:15px !important;
box-shadow:0 0 11px rgba(0,229,168,.14) !important;
}

@keyframes htCardBreath{
0%,100%{transform:translateY(0);border-color:rgba(110,255,211,.18)}
50%{transform:translateY(-4px);border-color:rgba(110,255,211,.30)}
}

/* Right arc */
.module-warehouse{
top:62px !important;
right:22px !important;
left:auto !important;
bottom:auto !important;
animation-delay:-.4s !important;
}

.module-hr{
top:272px !important;
right:-18px !important;
left:auto !important;
bottom:auto !important;
animation-delay:-2.1s !important;
}

.module-production{
top:auto !important;
right:38px !important;
left:auto !important;
bottom:72px !important;
animation-delay:-1.2s !important;
}

/* Left arc */
.module-sales{
top:124px !important;
left:20px !important;
right:auto !important;
bottom:auto !important;
animation-delay:-3.2s !important;
}

.module-purchase{
top:326px !important;
left:-20px !important;
right:auto !important;
bottom:auto !important;
animation-delay:-1.6s !important;
}

.module-finance{
top:auto !important;
left:42px !important;
right:auto !important;
bottom:28px !important;
animation-delay:-2.6s !important;
}

/* Uniform, subtle connector lines */
.orbit-module::after{
width:72px !important;
opacity:.48 !important;
box-shadow:0 0 5px rgba(0,229,168,.28) !important;
}

.orbit-module::before{
width:6px !important;
height:6px !important;
opacity:.78 !important;
box-shadow:
0 0 6px #00e5a8,
0 0 11px rgba(0,229,168,.48) !important;
}

.module-warehouse::after,
.module-hr::after,
.module-production::after{
left:-72px !important;
}

.module-warehouse::before,
.module-hr::before,
.module-production::before{
left:-76px !important;
}

.module-sales::after,
.module-purchase::after,
.module-finance::after{
right:-72px !important;
}

.module-sales::before,
.module-purchase::before,
.module-finance::before{
right:-76px !important;
}

.earth-status{
bottom:8px !important;
}

/* AI: no blue aura, only transparent brain artwork and its own circuit lines */
.ai-brain-aura{
display:none !important;
}

.ai-platform{
transform:translateY(50px) !important;
}

.ai-brain-stage{
width:485px !important;
height:485px !important;
background:transparent !important;
filter:
drop-shadow(0 0 12px rgba(0,160,255,.28))
drop-shadow(0 0 25px rgba(74,60,255,.14)) !important;
animation:htAiStageFloat 6.2s ease-in-out infinite !important;
}

.ai-brain-stage::before,
.ai-brain-stage::after,
.ai-brain-scan{
display:none !important;
}

.ai-brain-image{
animation:htAiLineMotion 4.6s ease-in-out infinite !important;
filter:brightness(1.02) saturate(1.08) !important;
}

@keyframes htAiStageFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}

@keyframes htAiLineMotion{
0%,100%{
transform:scale(.965);
filter:brightness(.96) saturate(1.04)
drop-shadow(0 0 5px rgba(0,183,255,.22));
}
50%{
transform:scale(1.005);
filter:brightness(1.18) saturate(1.18)
drop-shadow(0 0 13px rgba(0,183,255,.50));
}
}

/* MOBILE: guaranteed two-column layout because both columns are now inside the row */
@media(min-width:768px){
.mobile-section .row{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(320px,.82fr) !important;
grid-template-areas:"text phone" !important;
align-items:center !important;
column-gap:clamp(36px,6vw,90px) !important;
}

.mobile-section .row > .col-lg-6:first-child{
grid-area:phone !important;
width:auto !important;
max-width:none !important;
}

.mobile-section .row > .col-lg-6:last-child{
grid-area:text !important;
width:auto !important;
max-width:none !important;
}

.mobile-content{
margin:0 !important;
max-width:650px !important;
text-align:right !important;
}

.mobile-image{
justify-content:center !important;
}
}

@media(max-width:767px){
.mobile-section .row{
display:flex !important;
flex-direction:column !important;
}

.mobile-section .row > .col-lg-6{
width:100% !important;
max-width:100% !important;
}

.mobile-image{
order:1 !important;
}

.mobile-content{
order:2 !important;
margin-top:40px !important;
text-align:center !important;
}
}

@media(max-width:1200px){
.earth-system{
transform:scale(.86) !important;
}
.ai-brain-stage{
width:445px !important;
height:445px !important;
}
}

@media(max-width:576px){
.earth-system{
transform:scale(.64) !important;
}
.ai-platform{
transform:translateY(26px) !important;
}
.ai-brain-stage{
width:355px !important;
height:355px !important;
}
}


/*======================================================
HT HERO V2 - COMPLETE REDESIGN
Only the Hero section is affected
======================================================*/

.ht-hero-v2{
position:relative;
min-height:1180px;
padding:170px 0 110px;
overflow:hidden;
background:
radial-gradient(circle at 50% 43%,rgba(0,229,168,.07),transparent 22%),
radial-gradient(circle at 50% 48%,rgba(37,99,235,.10),transparent 38%);
}

.ht-hero-v2::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(to bottom,black 0%,black 72%,transparent 100%);
opacity:.46;
}

.ht-hero-v2>.container{
position:relative;
z-index:2;
}

.ht-hero-v2__intro{
max-width:880px;
margin:0 auto;
text-align:center;
}

.ht-hero-v2__intro .hero-badge{
margin-inline:auto;
}

.ht-hero-v2__intro h1{
margin:22px 0 16px;
font-size:clamp(48px,6.2vw,82px);
line-height:1.18;
font-weight:900;
letter-spacing:-1.5px;
}

.ht-hero-v2__intro h1 span{
display:block;
margin-top:8px;
background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.ht-hero-v2__intro p{
max-width:720px;
margin:0 auto;
color:#9eabc3;
font-size:17px;
line-height:2;
}

.ht-hero-v2__intro .hero-buttons{
justify-content:center;
margin-top:26px;
}

.ht-hero-v2__intro .hero-statistics{
max-width:590px;
margin:34px auto 0;
}

.ht-hero-v2__stage{
position:relative;
display:grid;
grid-template-columns:minmax(235px,1fr) minmax(430px,520px) minmax(235px,1fr);
align-items:center;
gap:28px;
min-height:660px;
margin-top:74px;
isolation:isolate;
}

.ht-hero-v2__backdrop{
position:absolute;
left:50%;
top:50%;
width:760px;
height:760px;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle,rgba(0,229,168,.11) 0%,rgba(37,99,235,.08) 32%,transparent 70%);
filter:blur(28px);
opacity:.92;
z-index:-3;
animation:htHeroBackdrop 6s ease-in-out infinite;
}

@keyframes htHeroBackdrop{
0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.66}
50%{transform:translate(-50%,-50%) scale(1.04);opacity:1}
}

.ht-hero-v2__links{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:-1;
overflow:visible;
pointer-events:none;
}

.ht-hero-v2__links path{
fill:none;
stroke:#00e5a8;
stroke-width:1.2;
stroke-linecap:round;
stroke-dasharray:7 11;
opacity:.34;
filter:drop-shadow(0 0 4px rgba(0,229,168,.32));
animation:htHeroDash 14s linear infinite;
}

@keyframes htHeroDash{
to{stroke-dashoffset:-180}
}

.ht-hero-v2__modules{
display:flex;
flex-direction:column;
justify-content:space-between;
height:500px;
z-index:4;
}

.ht-hero-v2__modules--left{
align-items:flex-end;
padding-block:20px 34px;
}

.ht-hero-v2__modules--right{
align-items:flex-start;
padding-block:20px 34px;
}

.ht-module-card{
width:100%;
max-width:270px;
min-height:112px;
display:flex;
align-items:center;
gap:15px;
padding:18px;
border:1px solid rgba(110,255,211,.18);
border-radius:20px;
background:
linear-gradient(145deg,rgba(7,22,30,.88),rgba(6,13,26,.78));
backdrop-filter:blur(18px);
box-shadow:
0 20px 44px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.04);
transition:.3s ease;
animation:htModuleDrift 5.5s ease-in-out infinite;
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(2),
.ht-hero-v2__modules--right .ht-module-card:nth-child(2){
transform:translateX(26px);
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(3),
.ht-hero-v2__modules--right .ht-module-card:nth-child(3){
transform:translateX(8px);
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(1),
.ht-hero-v2__modules--right .ht-module-card:nth-child(3){
animation-delay:-1.1s;
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(2),
.ht-hero-v2__modules--right .ht-module-card:nth-child(2){
animation-delay:-2.8s;
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(3),
.ht-hero-v2__modules--right .ht-module-card:nth-child(1){
animation-delay:-4s;
}

@keyframes htModuleDrift{
0%,100%{translate:0 0}
50%{translate:0 -6px}
}

.ht-module-card:hover{
transform:translateY(-6px) scale(1.02) !important;
border-color:rgba(110,255,211,.42);
box-shadow:
0 24px 54px rgba(0,0,0,.34),
0 0 26px rgba(0,229,168,.12),
inset 0 1px 0 rgba(255,255,255,.05);
}

.ht-module-card__icon{
width:54px;
height:54px;
flex:0 0 54px;
display:grid;
place-items:center;
border-radius:17px;
color:#00e5a8;
font-size:20px;
background:
linear-gradient(145deg,rgba(0,229,168,.18),rgba(0,229,168,.055));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 0 20px rgba(0,229,168,.15);
}

.ht-module-card strong{
display:block;
font-size:15px;
font-weight:800;
color:#f7fffc;
}

.ht-module-card small{
display:block;
margin-top:7px;
color:#7f8da6;
font-size:10px;
line-height:1.75;
}

.ht-hero-v2__core{
position:relative;
height:610px;
display:grid;
place-items:center;
}

.ht-hero-v2__earth{
position:relative;
width:390px;
height:390px;
z-index:4;
border-radius:50%;
filter:
drop-shadow(0 34px 36px rgba(0,0,0,.40))
drop-shadow(0 0 28px rgba(0,229,168,.14));
animation:htHeroEarthFloat 6s ease-in-out infinite;
}

@keyframes htHeroEarthFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}

.ht-hero-v2__earth #earth-canvas{
width:100%;
height:100%;
border-radius:50%;
overflow:hidden;
background:
radial-gradient(circle at 72% 26%,rgba(255,214,140,.10),transparent 26%),
radial-gradient(circle at 34% 62%,rgba(0,229,168,.08),transparent 48%);
box-shadow:
0 0 22px rgba(0,229,168,.16),
0 0 60px rgba(37,99,235,.11);
}

.ht-hero-v2__earth #earth-canvas canvas{
width:100%!important;
height:100%!important;
display:block;
filter:saturate(.78) brightness(.76) contrast(1.10);
}

.ht-hero-v2__earth-shine{
position:absolute;
inset:-12px;
border-radius:50%;
border:1px solid rgba(0,229,168,.22);
background:
radial-gradient(circle at 72% 28%,rgba(255,220,156,.10),transparent 25%),
radial-gradient(circle at 32% 40%,rgba(16,216,255,.09),transparent 52%);
box-shadow:
0 0 20px rgba(0,229,168,.18),
inset 0 0 22px rgba(0,229,168,.07);
pointer-events:none;
animation:htHeroShine 4s ease-in-out infinite;
}

@keyframes htHeroShine{
0%,100%{opacity:.56}
50%{opacity:.92}
}

.ht-hero-v2__halo{
position:absolute;
left:50%;
top:50%;
border-radius:50%;
border:1px solid rgba(0,229,168,.19);
pointer-events:none;
}

.ht-hero-v2__halo.halo-a{
width:470px;
height:180px;
transform:translate(-50%,-50%) rotate(-14deg);
animation:htHaloA 13s linear infinite;
}

.ht-hero-v2__halo.halo-b{
width:445px;
height:160px;
transform:translate(-50%,-50%) rotate(22deg);
border-color:rgba(34,211,238,.17);
animation:htHaloB 11s linear infinite reverse;
}

.ht-hero-v2__halo.halo-c{
width:500px;
height:500px;
transform:translate(-50%,-50%);
border-color:rgba(124,58,237,.10);
animation:htHaloC 18s linear infinite;
}

@keyframes htHaloA{
to{transform:translate(-50%,-50%) rotate(346deg)}
}

@keyframes htHaloB{
to{transform:translate(-50%,-50%) rotate(-338deg)}
}

@keyframes htHaloC{
to{transform:translate(-50%,-50%) rotate(360deg)}
}

.ht-hero-v2__platform{
position:absolute;
left:50%;
bottom:66px;
width:320px;
height:72px;
transform:translateX(-50%);
border-radius:50%;
border:1px solid rgba(0,229,168,.20);
background:
radial-gradient(ellipse,rgba(0,229,168,.13),rgba(34,211,238,.05) 44%,transparent 72%);
box-shadow:
0 0 18px rgba(0,229,168,.14),
0 0 48px rgba(34,211,238,.06);
}

.ht-hero-v2__platform span{
position:absolute;
left:50%;
top:50%;
border-radius:50%;
border:1px solid rgba(0,229,168,.18);
transform:translate(-50%,-50%);
}

.ht-hero-v2__platform span:nth-child(1){width:270px;height:52px}
.ht-hero-v2__platform span:nth-child(2){width:220px;height:38px}
.ht-hero-v2__platform span:nth-child(3){width:165px;height:24px}

.ht-hero-v2__status{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
border:1px solid rgba(0,229,168,.18);
border-radius:999px;
color:#d9fff3;
background:rgba(5,18,24,.80);
backdrop-filter:blur(12px);
font-size:11px;
white-space:nowrap;
}

.ht-hero-v2__status i{
width:7px;
height:7px;
border-radius:50%;
background:#00e5a8;
box-shadow:0 0 8px #00e5a8,0 0 18px rgba(0,229,168,.58);
animation:htStatusPulse 2s ease-in-out infinite;
}

@keyframes htStatusPulse{
0%,100%{opacity:.55;transform:scale(.85)}
50%{opacity:1;transform:scale(1.2)}
}

@media(max-width:1200px){
.ht-hero-v2{min-height:1120px}
.ht-hero-v2__stage{
grid-template-columns:minmax(200px,1fr) minmax(390px,470px) minmax(200px,1fr);
gap:16px;
}
.ht-module-card{
max-width:235px;
min-height:104px;
padding:15px;
}
.ht-hero-v2__earth{
width:350px;
height:350px;
}
}

@media(max-width:991px){
.ht-hero-v2{
min-height:auto;
padding-bottom:90px;
}
.ht-hero-v2__stage{
grid-template-columns:1fr;
min-height:auto;
gap:28px;
}
.ht-hero-v2__links{display:none}
.ht-hero-v2__core{
order:1;
height:560px;
}
.ht-hero-v2__modules{
height:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
padding:0;
align-items:stretch;
}
.ht-hero-v2__modules--left{order:2}
.ht-hero-v2__modules--right{order:3}
.ht-hero-v2__modules--left .ht-module-card,
.ht-hero-v2__modules--right .ht-module-card{
max-width:none;
width:100%;
transform:none !important;
}
.ht-module-card{min-height:108px}
}

@media(max-width:680px){
.ht-hero-v2{padding-top:140px}
.ht-hero-v2__intro h1{
font-size:clamp(42px,12vw,62px);
}
.ht-hero-v2__core{height:470px}
.ht-hero-v2__earth{
width:290px;
height:290px;
}
.ht-hero-v2__halo.halo-a{
width:360px;
height:138px;
}
.ht-hero-v2__halo.halo-b{
width:338px;
height:124px;
}
.ht-hero-v2__halo.halo-c{
width:390px;
height:390px;
}
.ht-hero-v2__platform{
bottom:48px;
width:260px;
}
.ht-hero-v2__status{
bottom:2px;
font-size:10px;
}
.ht-hero-v2__modules{
grid-template-columns:1fr;
}
.ht-module-card{
max-width:100%;
}
}


/*======================================================
HT HERO V2 - ROTATING TITLE WORD
======================================================*/

.ht-hero-v2__intro h1 .ht-hero-v2__title-line{
display:flex;
justify-content:center;
align-items:baseline;
flex-wrap:wrap;
gap:.20em;
margin-top:8px;
color:inherit;
background:none;
-webkit-text-fill-color:initial;
}

.ht-hero-v2__title-line>b{
font:inherit;
font-weight:900;
white-space:nowrap;
background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.ht-hero-v2__dynamic-word{
position:relative;
display:inline-grid;
place-items:center;
min-width:5.8em;
white-space:nowrap;
background:linear-gradient(90deg,#22d3ee,#60a5fa,#8b5cf6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transform-origin:center;
will-change:transform,opacity,filter;
}

.ht-hero-v2__dynamic-word::after{
content:"";
position:absolute;
right:0;
bottom:.02em;
width:100%;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,transparent);
opacity:.48;
transform:scaleX(.72);
box-shadow:0 0 12px rgba(34,211,238,.35);
}

.ht-hero-v2__dynamic-word.is-leaving{
animation:htHeroWordLeave .36s cubic-bezier(.4,0,1,1) forwards;
}

.ht-hero-v2__dynamic-word.is-entering{
animation:htHeroWordEnter .52s cubic-bezier(.16,1,.3,1) both;
}

@keyframes htHeroWordLeave{
0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
100%{opacity:0;transform:translateY(-22px) scale(.95);filter:blur(7px)}
}

@keyframes htHeroWordEnter{
0%{opacity:0;transform:translateY(24px) scale(.95);filter:blur(8px)}
100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@media(max-width:680px){
.ht-hero-v2__dynamic-word{
min-width:100%;
order:3;
}
.ht-hero-v2__title-line>b{
order:2;
}
.ht-hero-v2__title-line>span:first-child{
order:1;
}
}

@media(prefers-reduced-motion:reduce){
.ht-hero-v2__dynamic-word.is-leaving,
.ht-hero-v2__dynamic-word.is-entering{
animation:none;
}
}

.ht-hero-v2__title-line>span{
margin-top:0 !important;
}

.ht-hero-v2__title-line>span:first-child{
display:inline !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.ht-hero-v2__dynamic-word{
-webkit-text-fill-color:transparent !important;
}


/*======================================================
FINAL GLOBE-ONLY REFINEMENT
- keeps hero copy/layout intact
- cleaner globe quality
- orbit rings stay outside the globe
- center cards sit slightly inward for circular harmony
======================================================*/
.ht-hero-v2__modules--left .ht-module-card:nth-child(1),
.ht-hero-v2__modules--left .ht-module-card:nth-child(3){
transform:translateX(0);
}

.ht-hero-v2__modules--right .ht-module-card:nth-child(1),
.ht-hero-v2__modules--right .ht-module-card:nth-child(3){
transform:translateX(0);
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(2){
transform:translateX(22px);
}

.ht-hero-v2__modules--right .ht-module-card:nth-child(2){
transform:translateX(-22px);
}

.ht-hero-v2__modules--left .ht-module-card:nth-child(2),
.ht-hero-v2__modules--right .ht-module-card:nth-child(2){
animation-delay:-2.8s;
}

.ht-hero-v2__earth{
width:408px;
height:408px;
filter:
drop-shadow(0 26px 30px rgba(0,0,0,.30))
drop-shadow(0 0 18px rgba(0,229,168,.12));
}

.ht-hero-v2__earth #earth-canvas{
background:transparent;
box-shadow:
0 0 18px rgba(0,229,168,.12),
0 0 36px rgba(37,99,235,.08);
}

.ht-hero-v2__earth #earth-canvas canvas{
filter:saturate(.98) brightness(.96) contrast(1.08);
}

.ht-hero-v2__earth-shine{
inset:-10px;
border-color:rgba(0,229,168,.18);
background:
radial-gradient(circle at 74% 26%,rgba(255,220,156,.08),transparent 23%),
radial-gradient(circle at 36% 42%,rgba(16,216,255,.06),transparent 50%);
box-shadow:
0 0 16px rgba(0,229,168,.14),
inset 0 0 16px rgba(0,229,168,.05);
}

.ht-hero-v2__halo{
z-index:1;
opacity:.95;
}

.ht-hero-v2__halo.halo-a{
width:470px;
height:188px;
transform:translate(-50%,-50%) rotate(-12deg);
border-color:rgba(0,229,168,.26);
}

.ht-hero-v2__halo.halo-b{
width:440px;
height:170px;
transform:translate(-50%,-50%) rotate(18deg);
border-color:rgba(34,211,238,.22);
}

.ht-hero-v2__halo.halo-c{
width:492px;
height:492px;
border-color:rgba(124,58,237,.09);
opacity:.62;
}

.ht-hero-v2__platform{
width:344px;
height:82px;
bottom:58px;
background:
radial-gradient(ellipse,rgba(0,229,168,.12),rgba(34,211,238,.04) 44%,transparent 72%);
}

.ht-hero-v2__platform span:nth-child(1){width:290px;height:56px}
.ht-hero-v2__platform span:nth-child(2){width:236px;height:40px}
.ht-hero-v2__platform span:nth-child(3){width:174px;height:24px}

.ht-hero-v2__status{
bottom:12px;
}

@media(max-width:1200px){
.ht-hero-v2__earth{
width:372px;
height:372px;
}
.ht-hero-v2__halo.halo-a{width:430px;height:172px}
.ht-hero-v2__halo.halo-b{width:406px;height:154px}
.ht-hero-v2__halo.halo-c{width:456px;height:456px}
}

@media(max-width:991px){
.ht-hero-v2__modules--left .ht-module-card,
.ht-hero-v2__modules--right .ht-module-card{
transform:none !important;
}
}

@media(max-width:680px){
.ht-hero-v2__earth{
width:300px;
height:300px;
}
.ht-hero-v2__halo.halo-a{width:350px;height:136px}
.ht-hero-v2__halo.halo-b{width:330px;height:120px}
.ht-hero-v2__halo.halo-c{width:390px;height:390px}
.ht-hero-v2__platform{width:268px;height:68px;bottom:42px}
.ht-hero-v2__status{bottom:0}
}


/*======================================================
GLOBE FINAL V2 - ONLY GLOBE AREA
No intro/title/button/stat content changed.
======================================================*/
.ht-hero-v2__stage{
margin-top:42px !important;
min-height:620px !important;
grid-template-columns:minmax(250px,1fr) minmax(500px,560px) minmax(250px,1fr) !important;
gap:18px !important;
}

.ht-hero-v2__modules{
height:500px !important;
justify-content:space-between !important;
}

.ht-module-card{
max-width:272px !important;
min-height:106px !important;
transform:none !important;
}

/* top and bottom align; only the middle card steps inward */
.ht-hero-v2__modules--left .ht-module-card:nth-child(1),
.ht-hero-v2__modules--left .ht-module-card:nth-child(3),
.ht-hero-v2__modules--right .ht-module-card:nth-child(1),
.ht-hero-v2__modules--right .ht-module-card:nth-child(3){
transform:translateX(0) !important;
}

/* because the grid is RTL, the named sides render opposite visually */
.ht-hero-v2__modules--left .ht-module-card:nth-child(2){
transform:translateX(-28px) !important;
}

.ht-hero-v2__modules--right .ht-module-card:nth-child(2){
transform:translateX(28px) !important;
}

.ht-module-card:hover{
transform:translateY(-5px) scale(1.018) !important;
}

.ht-hero-v2__core{
height:620px !important;
}

.ht-hero-v2__earth{
width:468px !important;
height:468px !important;
z-index:4 !important;
filter:
drop-shadow(0 30px 34px rgba(0,0,0,.34))
drop-shadow(0 0 16px rgba(17,216,255,.12)) !important;
}

.ht-hero-v2__earth #earth-canvas{
background:transparent !important;
box-shadow:
0 0 18px rgba(17,216,255,.11),
0 0 42px rgba(0,229,168,.07) !important;
}

.ht-hero-v2__earth #earth-canvas canvas{
filter:saturate(1.08) brightness(.91) contrast(1.16) !important;
}

.ht-hero-v2__earth-shine{
inset:-7px !important;
border-color:rgba(46,215,255,.22) !important;
background:
radial-gradient(circle at 72% 25%,rgba(255,229,180,.055),transparent 21%),
radial-gradient(circle at 26% 42%,rgba(0,224,255,.045),transparent 48%) !important;
box-shadow:
0 0 13px rgba(0,210,255,.18),
inset 0 0 12px rgba(0,229,168,.04) !important;
}

/* orbit rings are larger than the globe and sit behind it */
.ht-hero-v2__halo{
z-index:1 !important;
opacity:1 !important;
pointer-events:none !important;
box-shadow:0 0 10px rgba(0,229,168,.10) !important;
}

.ht-hero-v2__halo.halo-a{
width:584px !important;
height:224px !important;
transform:translate(-50%,-50%) rotate(-12deg) !important;
border-color:rgba(0,229,168,.43) !important;
}

.ht-hero-v2__halo.halo-b{
width:548px !important;
height:204px !important;
transform:translate(-50%,-50%) rotate(18deg) !important;
border-color:rgba(35,211,238,.33) !important;
}

.ht-hero-v2__halo.halo-c{
width:560px !important;
height:560px !important;
transform:translate(-50%,-50%) !important;
border-color:rgba(91,79,255,.10) !important;
box-shadow:none !important;
}

.ht-hero-v2__platform{
width:382px !important;
height:90px !important;
bottom:42px !important;
background:
radial-gradient(ellipse,rgba(0,229,168,.10),rgba(34,211,238,.035) 45%,transparent 72%) !important;
box-shadow:
0 0 13px rgba(0,229,168,.11),
0 0 32px rgba(34,211,238,.05) !important;
}

.ht-hero-v2__platform span:nth-child(1){width:326px !important;height:62px !important}
.ht-hero-v2__platform span:nth-child(2){width:268px !important;height:45px !important}
.ht-hero-v2__platform span:nth-child(3){width:196px !important;height:27px !important}

.ht-hero-v2__status{
bottom:-2px !important;
}

@media(max-width:1200px){
.ht-hero-v2__stage{
grid-template-columns:minmax(220px,1fr) minmax(440px,500px) minmax(220px,1fr) !important;
}
.ht-hero-v2__earth{width:420px !important;height:420px !important}
.ht-hero-v2__halo.halo-a{width:524px !important;height:202px !important}
.ht-hero-v2__halo.halo-b{width:492px !important;height:184px !important}
.ht-hero-v2__halo.halo-c{width:510px !important;height:510px !important}
}

@media(max-width:991px){
.ht-hero-v2__stage{
grid-template-columns:1fr !important;
margin-top:36px !important;
}
.ht-hero-v2__modules--left .ht-module-card,
.ht-hero-v2__modules--right .ht-module-card{
transform:none !important;
}
.ht-hero-v2__earth{width:390px !important;height:390px !important}
.ht-hero-v2__halo.halo-a{width:480px !important;height:186px !important}
.ht-hero-v2__halo.halo-b{width:452px !important;height:170px !important}
.ht-hero-v2__halo.halo-c{width:470px !important;height:470px !important}
}

@media(max-width:680px){
.ht-hero-v2__core{height:480px !important}
.ht-hero-v2__earth{width:302px !important;height:302px !important}
.ht-hero-v2__halo.halo-a{width:378px !important;height:148px !important}
.ht-hero-v2__halo.halo-b{width:354px !important;height:134px !important}
.ht-hero-v2__halo.halo-c{width:380px !important;height:380px !important}
.ht-hero-v2__platform{width:276px !important;height:68px !important;bottom:38px !important}
.ht-hero-v2__status{bottom:-2px !important}
}


/*======================================================
HT ERP v0.2.0 PREVIEW - CONTENT & CARD REFINEMENTS
Edited areas only: Hero summary cards, capabilities, modules heading,
and organization trust statistics.
======================================================*/

/* HERO SUMMARY CARDS */
.ht-hero-v2__intro .hero-statistics-v2{
max-width:820px;
width:100%;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin:34px auto 0;
}

.hero-statistics-v2 .stat-card{
position:relative;
width:auto;
min-width:0;
min-height:126px;
padding:19px 14px 17px;
dis:flex;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:22px;
background:
linear-gradient(145deg,rgba(18,35,61,.76),rgba(8,18,35,.66));
border:1px solid rgba(116,170,255,.18);
box-shadow:
0 16px 38px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.04);
overflow:hidden;
}

.hero-statistics-v2 .stat-card::before{
content:"";
position:absolute;
inset:auto 16% -55% 16%;
height:80%;
border-radius:50%;
background:radial-gradient(circle,rgba(34,211,238,.17),transparent 70%);
filter:blur(18px);
pointer-events:none;
transition:.35s ease;
}

.hero-statistics-v2 .stat-card:hover{
transform:translateY(-7px);
border-color:rgba(88,183,255,.48);
box-shadow:
0 22px 48px rgba(0,0,0,.28),
0 0 24px rgba(59,130,246,.12),
inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-statistics-v2 .stat-card:hover::before{
transform:translateY(-10px) scale(1.12);
opacity:1;
}

.hero-statistics-v2 .stat-card-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
margin-bottom:7px;
border-radius:11px;
color:#59dcff;
font-size:14px;
background:rgba(37,99,235,.13);
border:1px solid rgba(91,192,255,.18);
box-shadow:0 0 16px rgba(37,99,235,.10);
}

.hero-statistics-v2 .stat-card h2{
position:relative;
z-index:1;
font-size:28px;
line-height:1.1;
margin:0 0 7px;
}

.hero-statistics-v2 .stat-card span{
position:relative;
z-index:1;
font-size:12px;
white-space:nowrap;
}

.hero-statistics-v2 .stat-card-ai{
border-color:rgba(139,92,246,.25);
}

.hero-statistics-v2 .stat-card-ai .stat-card-icon{
color:#b69cff;
background:rgba(124,58,237,.14);
border-color:rgba(168,85,247,.22);
}

/* CAPABILITIES: prevent overlap with ERP modules */
.capabilities-section .section-header p{
max-width:750px;
margin-inline:auto;
}

.capabilities-section .capability-card{
height:100%;
min-height:285px;
position:relative;
}

.capabilities-section .capability-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(145deg,rgba(34,211,238,.035),transparent 40%,rgba(124,58,237,.025));
opacity:0;
transition:.35s ease;
}

.capabilities-section .capability-card:hover::before{
opacity:1;
}

.capabilities-section .capability-card h4{
position:relative;
z-index:1;
}

.capabilities-section .capability-card p{
position:relative;
z-index:1;
}

/* ORGANIZATION TRUST STATISTICS */
.trust-statistics-section{
position:relative;
padding:118px 0;
}

.trust-statistics-section::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:min(980px,88vw);
height:310px;
transform:translate(-50%,-50%);
background:radial-gradient(ellipse,rgba(37,99,235,.09),transparent 68%);
filter:blur(30px);
pointer-events:none;
}

.trust-statistics-section .container{
position:relative;
z-index:1;
}

.trust-stat-box{
position:relative;
height:100%;
min-height:252px;
padding:32px 22px 28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(150deg,rgba(20,39,68,.72),rgba(8,18,35,.72));
border:1px solid rgba(113,167,255,.17);
box-shadow:
0 22px 55px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.04);
}

.trust-stat-box::before{
content:"";
position:absolute;
width:150px;
height:150px;
top:-86px;
right:-55px;
border-radius:50%;
background:radial-gradient(circle,rgba(34,211,238,.18),transparent 68%);
filter:blur(7px);
transition:.4s ease;
}

.trust-stat-box::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.045) 50%,transparent 70%);
transform:translateX(-120%);
transition:transform .75s ease;
pointer-events:none;
}

.trust-stat-box:hover{
transform:translateY(-9px);
border-color:rgba(71,187,255,.48);
box-shadow:
0 28px 64px rgba(0,0,0,.30),
0 0 28px rgba(37,99,235,.13),
inset 0 1px 0 rgba(255,255,255,.06);
}

.trust-stat-box:hover::before{
transform:scale(1.18);
}

.trust-stat-box:hover::after{
transform:translateX(120%);
}

.trust-stat-icon{
width:48px;
height:48px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:16px;
color:#4bdcff;
font-size:18px;
background:linear-gradient(145deg,rgba(37,99,235,.20),rgba(124,58,237,.10));
border:1px solid rgba(83,192,255,.20);
box-shadow:0 0 22px rgba(37,99,235,.14);
}

.trust-stat-box h2{
position:relative;
z-index:1;
font-size:46px;
line-height:1;
margin-bottom:10px;
}

.trust-stat-box span{
position:relative;
z-index:1;
font-size:16px;
font-weight:700;
color:#dce8ff;
}

.trust-stat-box small{
position:relative;
z-index:1;
display:block;
margin-top:9px;
font-size:11px;
line-height:1.7;
color:#7586a6;
}

@media(max-width:991px){
.ht-hero-v2__intro .hero-statistics-v2{
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:560px;
}
.capabilities-section .capability-card{
min-height:265px;
}
}

@media(max-width:576px){
.ht-hero-v2__intro .hero-statistics-v2{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.hero-statistics-v2 .stat-card{
min-height:116px;
padding:15px 8px;
}
.hero-statistics-v2 .stat-card h2{
font-size:24px;
}
.hero-statistics-v2 .stat-card span{
font-size:10px;
}
.trust-stat-box{
min-height:225px;
}
}