:root{
    --bg: #f3f5f7;
    --bg-2: #eef2f4;
    --white: rgba(255,255,255,0.74);
    --line: rgba(255,255,255,0.72);
    --text: #111747;
    --text-soft: rgba(17,23,71,0.72);
    --text-muted: rgba(17,23,71,0.52);
    --accent: #8ca4ac;
    --accent-deep: #667f88;
    --accent-dark: #5b747d;
    --navy: #0A1628;
    --navy-mid: #152848;
    --shadow-soft: 0 16px 40px rgba(17,23,71,0.06);
    --shadow-medium: 0 22px 55px rgba(17,23,71,0.08);
    --container: 1320px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; min-height:100%; }

body{
    font-family:"Inter",sans-serif;
    color:var(--text);
    background:linear-gradient(135deg,#f6f8fa 0%,#eef2f4 45%,#f9fbfc 100%);
    overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }

.page-shell{ position:relative; min-height:100vh; overflow:hidden; isolation:isolate; }

.container-soft{
    width:min(var(--container),calc(100% - 96px));
    padding-left:40px;
}

.ambient{
    position:absolute; border-radius:50%;
    filter:blur(50px); pointer-events:none; z-index:-2;
}
.ambient-one{ width:520px;height:520px;top:-120px;right:-140px;background:rgba(140,164,172,0.16); }
.ambient-two{ width:460px;height:460px;bottom:-150px;left:-120px;background:rgba(255,255,255,0.80); }
.ambient-three{ width:720px;height:720px;top:12%;left:42%;transform:translateX(-50%);background:rgba(140,164,172,0.08); }

/* ─── NAV ─── */
.topbar{ padding:20px 0 18px; }
.nav-shell{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:10px 20px;border-radius:999px;
    background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.34);
    backdrop-filter:blur(18px);box-shadow:var(--shadow-soft);
}
.brand{ display:flex;align-items:center;gap:14px;min-width:max-content; }
.brand img{ width:48px;height:48px;object-fit:contain; }
.brand-text{ display:flex;flex-direction:column;line-height:1.05; }
.brand-text strong{ font-size:1.1rem;font-weight:900;color:var(--text);letter-spacing:-0.03em; }
.brand-text span{ margin-top:6px;font-size:0.78rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-soft); }
.nav-links{ display:flex;align-items:center;gap:8px; }
.nav-links a{ padding:10px 14px;border-radius:999px;color:var(--text-soft);font-weight:700;font-size:0.95rem;transition:all .24s; }
.nav-links a:hover,.nav-links a.active{ color:var(--text);background:rgba(255,255,255,0.52); }
.nav-actions{ display:flex;align-items:center;gap:12px; }
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:800;transition:all .24s;border:1px solid transparent;white-space:nowrap; }
.btn-ghost{ padding:12px 18px;background:rgba(255,255,255,0.48);border-color:var(--line);color:var(--text); }
.btn-ghost:hover{ background:rgba(255,255,255,0.72);transform:translateY(-1px); }
.btn-primary{ padding:12px 20px;background:linear-gradient(135deg,#1C3358,#0A1628);color:#fff;border-color:rgba(10,22,40,0.30);box-shadow:0 10px 28px rgba(10,22,40,0.20); }
.btn-primary:hover{ transform:translateY(-2px);box-shadow:0 14px 36px rgba(10,22,40,0.28);background:linear-gradient(135deg,#2A4A70,#152848); }
.btn-secondary{ padding:14px 22px;background:rgba(255,255,255,0.60);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-soft); }
.btn-secondary:hover{ background:rgba(255,255,255,0.84);transform:translateY(-1px); }
.btn-large{ padding:16px 24px;font-size:0.98rem; }
.nav-toggle{ display:none;width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,0.54);color:var(--text);font-size:1rem; }

/* ─── HERO ─── */
.hero-section{
    min-height:calc(100vh - 106px);
    display:flex;align-items:center;
    padding:0 0 32px;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 600px;
    gap:48px;
    align-items:center;
}

.hero-copy{ max-width:640px; }

.hero-title{
    font-size:clamp(3.4rem,5.8vw,6.2rem);
    line-height:0.94;letter-spacing:-0.09em;font-weight:900;
    color:var(--text);max-width:720px;
}
.hero-title span{ display:block;color:var(--navy); }
.hero-actions{ display:flex;flex-wrap:wrap;gap:16px;margin-top:36px; }

/* ─── VISUAL STAGE ───
   The stage IS the canvas. No separate orb-shell.
   Three.js renders the full stage width/height.
   Orbital rings live inside Three.js so they NEVER clip.
   Cards float above via absolute positioning.
─────────────────────────── */
.hero-visual{ display:flex;align-items:center;justify-content:center; }

.visual-stage{
    position:relative;
    /* Large square — ball fills it impressively */
    width:600px;
    height:600px;
    flex-shrink:0;
}

/* Canvas fills the entire stage */
#globeCanvas{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    display:block;
}

/* ─── FLOATING CARDS ───
   Vivid, solid white glass.
   Positioned at 3 corners of the stage,
   overlapping the sphere edge naturally.
─────────────────────────── */
.f-card{
    position:absolute;
    width:210px;
    padding:22px 24px 20px;
    border-radius:24px;
    background:rgba(255,255,255,0.38);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:0 20px 56px rgba(17,23,71,0.13),0 4px 16px rgba(17,23,71,0.07);
    z-index:10;
    /* Entrance animation */
    animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
}
.f-card:nth-child(2){ animation-delay:.10s; }
.f-card:nth-child(3){ animation-delay:.22s; }
.f-card:nth-child(4){ animation-delay:.34s; }
@keyframes cardIn{
    from{ opacity:0;transform:translateY(14px); }
    to  { opacity:1;transform:translateY(0); }
}

.f-label{
    display:block;
    font-size:0.68rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--accent-dark);margin-bottom:9px;
}
.f-value{
    font-size:2.2rem;font-weight:900;letter-spacing:-0.05em;
    color:var(--navy);line-height:1;margin-bottom:9px;
}
.f-desc{
    font-size:0.86rem;font-weight:600;line-height:1.65;
    color:var(--text-soft);
}

/* Card positions: one per quadrant, overlapping sphere edge */
.fc-tr{ top:18px;   right:0;   }   /* top-right */
.fc-bl{ bottom:50px; left:0;   }   /* bottom-left */
.fc-br{ bottom:18px; right:0;  }   /* bottom-right */


/* ════════════ ORB SHELL + CSS RINGS ════════════ */
.orb-shell {
    position: absolute;
    top: 50%; left: 50%;
    width:  300px; height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
}
#globeCanvas {
    position: absolute;
    inset: 0;
    width:  100% !important;
    height: 100% !important;
}
.css-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}
.css-r1 { width:380px;height:380px; border:1.5px solid rgba(10,22,40,0.22); animation:cssRCW 22s linear infinite; }
.css-r2 { width:470px;height:470px; border:1px   solid rgba(10,22,40,0.13); animation:cssRCC 34s linear infinite; }
.css-r3 { width:560px;height:560px; border:1px   solid rgba(10,22,40,0.07); animation:cssRCW 50s linear infinite reverse; }
@keyframes cssRCW { to{ transform:translate(-50%,-50%) rotate(360deg);  } }
@keyframes cssRCC { to{ transform:translate(-50%,-50%) rotate(-360deg); } }
.rbit {
    position:absolute;
    font-family:'Share Tech Mono','Courier New',monospace;
    font-size:12px; font-weight:900;
    color:rgba(10,22,40,0.78);
    transform:translate(-50%,-50%);
    line-height:1; user-select:none;
}
.rbit::before {
    content:'';
    display:block;
    width:7px; height:7px; border-radius:50%;
    background:#1B8FAA;
    box-shadow:0 0 8px 3px rgba(27,143,170,0.70),
               0 0 2px 1px rgba(27,143,170,1.00);
    margin:0 auto 4px;
}
.rb-t{ top:0;    left:50%;  }
.rb-r{ top:50%;  left:100%; }
.rb-b{ top:100%; left:50%;  }
.rb-l{ top:50%;  left:0;    }

/* ─── RESPONSIVE ─── */
@media(max-width:1280px){
    .orb-shell{width:270px;height:270px;}
    .css-r1{width:340px;height:340px;}
    .css-r2{width:420px;height:420px;}
    .css-r3{width:500px;height:500px;}
    .hero-grid{ grid-template-columns:minmax(0,1fr) 540px;gap:36px; }
    .visual-stage{ width:540px;height:540px; }
    .f-card{ width:190px;padding:18px 20px; }
    .f-value{ font-size:1.9rem; }
}

@media(max-width:1100px){
    .container-soft{ width:min(var(--container),calc(100% - 56px));padding-left:28px; }
    .hero-grid{ grid-template-columns:1fr;gap:24px; }
    .hero-copy{ max-width:100%; }
    .hero-section{ padding-top:12px;min-height:auto; }
    .visual-stage{ width:min(560px,100%);height:560px;margin:0 auto; }
}

@media(max-width:920px){
    .orb-shell{width:230px;height:230px;}
    .css-r1{width:290px;height:290px;}
    .css-r2{width:360px;height:360px;}
    .css-r3{width:430px;height:430px;}
    .nav-links,.nav-actions{ display:none; }
    .nav-toggle{ display:inline-flex;align-items:center;justify-content:center; }
    .nav-shell{ flex-wrap:wrap; }
    .nav-shell.mobile-open .nav-links,
    .nav-shell.mobile-open .nav-actions{
        display:flex;width:100%;flex-direction:column;align-items:stretch;margin-top:10px;gap:8px;
    }
    .nav-shell.mobile-open .nav-links a{ text-align:center; }
    .container-soft{ width:min(var(--container),calc(100% - 28px));padding-left:14px; }
    .topbar{ padding:12px 0 8px; }
    .hero-title{ font-size:clamp(2.6rem,10vw,4.4rem); }
    .visual-stage{ height:480px; }
    .f-card{ width:165px;padding:14px 16px;border-radius:18px; }
    .f-value{ font-size:1.6rem; }
    .f-desc{ font-size:0.78rem; }
    .fc-tr{ top:10px;right:4px; }
    .fc-bl{ bottom:30px;left:4px; }
    .fc-br{ bottom:10px;right:4px; }
}

@media(max-width:640px){
    .orb-shell{width:190px;height:190px;}
    .css-r1{width:240px;height:240px;}
    .css-r2{width:298px;height:298px;}
    .css-r3{width:356px;height:356px;}
    .hero-actions{ flex-direction:column;align-items:flex-start; }
    .btn-large,.btn-secondary,.btn-primary{ width:100%; }
    .visual-stage{ height:400px; }
    .f-card{ width:140px;padding:12px 13px;border-radius:16px; }
    .f-label{ font-size:0.60rem; }
    .f-value{ font-size:1.35rem;margin-bottom:5px; }
    .f-desc{ font-size:0.72rem; }
    .fc-tr{ top:6px;right:2px; }
    .fc-bl{ bottom:20px;left:2px; }
    .fc-br{ bottom:6px;right:2px; }
}