/* ═══════════════════════════════════════
   INDEX.CSS — Homepage-specific styles
═══════════════════════════════════════ */

/* ── WORD CYCLER ── */
.word-cycler{display:inline-block;position:relative;color:var(--corp-blue-accent);font-style:italic;min-width:2ch}
.word-cycler .word{display:block;position:absolute;top:0;left:0;white-space:nowrap;opacity:0;transform:translateY(36px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.word-cycler .word.active{opacity:1;transform:translateY(0);position:relative;pointer-events:auto}
.word-cycler .word.exit{opacity:0;transform:translateY(-36px);position:absolute}

/* ── HERO OVERRIDES ── */
.hero-arrow{display:none!important}
.slide-progress{display:none!important}
.hslide{display:none;flex:1;align-items:center;position:relative;z-index:10;padding:0 5%}
.hslide.active{display:flex;animation:sIn .75s cubic-bezier(.25,1,.5,1) both}
@keyframes sIn{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}

/* ── HERO ILLUSTRATION ── */
.hero-illus-wrap{position:relative;width:100%}
.hero-illus-wrap svg{width:100%;height:auto;display:block;border-radius:18px;border:1px solid rgba(245,166,35,.18);box-shadow:0 8px 60px rgba(0,0,0,.55),0 0 0 1px rgba(245,166,35,.08);background:#1a1410}
.illus-badge{position:absolute;background:linear-gradient(135deg,#d4890a,#f5a623);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border-radius:30px;box-shadow:0 4px 20px rgba(212,137,10,.5);animation:badgeFloat 3.2s ease-in-out infinite;white-space:nowrap;pointer-events:none;top:14px;right:18px}
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(0deg)}}

/* ── FEATURES BENTO ── */
.features-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-color);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;margin-top:50px}
.fb-card{background:var(--bg-elevated);padding:40px 36px 50px;position:relative;overflow:hidden;transition:background .4s ease;cursor:default}
.fb-card:hover{background:rgba(245,166,35,.05)}
.fb-card.wide{grid-column:span 2}
.fb-card.tall{grid-row:span 2}
.fb-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--corp-blue),var(--corp-blue-light));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.25,1,.5,1)}
.fb-card:hover::before{transform:scaleX(1)}
.fb-icon{width:52px;height:52px;background:rgba(245,166,35,.1);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--corp-blue);margin-bottom:24px;transition:background .3s,color .3s}
.fb-card:hover .fb-icon{background:var(--corp-blue);color:#fff}
.fb-card h3{font-size:1.12rem;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.fb-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.75}
.fb-num{position:absolute;bottom:18px;right:22px;font-size:3.8rem;font-weight:800;color:rgba(245,166,35,.06);font-family:var(--font-heading);line-height:1;user-select:none;transition:color .4s}
.fb-card:hover .fb-num{color:rgba(245,166,35,.12)}
.fb-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(245,166,35,.1);color:var(--corp-blue);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:5px 12px;border-radius:20px;margin-top:18px}

/* ── MARQUEE OVERRIDES ── */
.index-marquee .tech-marquee-wrap{padding:28px 0;background:var(--bg-elevated)}
.index-marquee .tech-marquee-label{font-size:.62rem;margin-bottom:20px}
.index-marquee .tech-marquee-item{flex-direction:column;align-items:center;gap:10px;padding:0 44px;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--text-secondary)}
.index-marquee .tech-marquee-item svg{width:30px!important;height:30px!important;stroke-width:1.3;color:var(--corp-blue);flex-shrink:0;transition:transform .3s}
.index-marquee .tech-marquee-item:hover svg{transform:scale(1.15)}
.index-marquee .tech-marquee-item:hover{color:var(--corp-blue)}
.index-marquee .tech-marquee-divider{font-size:1.6rem;align-self:center;padding-bottom:8px}

/* ── LAUNCH OVERLAY ── */
#launchOverlay{position:fixed;inset:0;z-index:99999;background:#0e0b07;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s ease,transform .7s ease}
#launchOverlay.hide{opacity:0;transform:scale(1.05);pointer-events:none}
.lo-canvas{position:absolute;inset:0;z-index:0}
.lo-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(212,137,10,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,137,10,.05) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at center,black 10%,transparent 80%)}
.lo-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(212,137,10,.09) 0%,transparent 70%);animation:loGlowPulse 4s ease-in-out infinite}
@keyframes loGlowPulse{0%,100%{opacity:.6}50%{opacity:1}}
.lo-stage{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:0}
.lo-logo-wrap{opacity:0;transform:scale(.6) translateY(30px);animation:loLogoIn .9s cubic-bezier(.25,1,.5,1) .3s forwards;position:relative;margin-bottom:30px}
@keyframes loLogoIn{to{opacity:1;transform:scale(1) translateY(0)}}
.lo-logo-svg{width:100px;height:100px;filter:drop-shadow(0 0 28px rgba(212,137,10,.4));animation:loLogoPulse 3s ease-in-out 1.2s infinite}
@keyframes loLogoPulse{0%,100%{filter:drop-shadow(0 0 28px rgba(212,137,10,.4))}50%{filter:drop-shadow(0 0 52px rgba(245,166,35,.6))}}
.lo-orbit{position:absolute;top:50%;left:50%;width:150px;height:150px;border-radius:50%;border:1px solid rgba(212,137,10,.22);transform:translate(-50%,-50%);animation:loOrbit 7s linear infinite}
.lo-orbit::after{content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:#f5a623;box-shadow:0 0 8px #f5a623;transform:translateX(-50%)}
@keyframes loOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lo-orbit2{position:absolute;top:50%;left:50%;width:192px;height:192px;border-radius:50%;border:1px dashed rgba(212,137,10,.1);transform:translate(-50%,-50%);animation:loOrbit 12s linear infinite reverse}
.lo-wordmark{opacity:0;transform:translateY(20px);animation:loWordIn .8s cubic-bezier(.25,1,.5,1) .85s forwards;text-align:center}
.lo-tagline{opacity:0;animation:loWordIn .7s ease 1.25s forwards;margin-top:10px;font-size:clamp(.58rem,1.5vw,.78rem);font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:#6b5e4a}
@keyframes loWordIn{to{opacity:1;transform:none}}
.lo-wordmark h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#f5f0e8;margin:0}
.lo-wordmark h2 span{color:#f5a623}
.lo-progress-wrap{opacity:0;animation:loWordIn .6s ease 1.65s forwards;margin-top:44px;width:clamp(200px,28vw,340px)}
.lo-track{width:100%;height:2px;background:rgba(212,137,10,.15);border-radius:2px;overflow:hidden}
.lo-fill{height:100%;width:0%;background:linear-gradient(90deg,#a36808,#f5a623);border-radius:2px;box-shadow:0 0 8px rgba(245,166,35,.4);transition:width .08s linear}
.lo-progress-label{display:flex;justify-content:space-between;margin-top:8px;font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:#6b5e4a}
#loPct{color:#f5a623}
.lo-word{opacity:0;animation:loWordIn .4s ease 1.85s forwards;margin-top:8px;font-family:'Space Grotesk',sans-serif;font-size:.7rem;color:#6b5e4a;text-align:center;min-height:1.2em}
.lo-skip{position:absolute;bottom:36px;right:36px;z-index:20;opacity:0;animation:loWordIn .5s ease 2.1s forwards;background:rgba(212,137,10,.1);border:1px solid rgba(212,137,10,.25);color:#6b5e4a;padding:9px 20px;border-radius:50px;font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:all .3s;border-style:solid}
.lo-skip:hover{background:rgba(212,137,10,.2);border-color:#f5a623;color:#f5a623}
.lo-corner{position:absolute;width:50px;height:50px;z-index:5;opacity:0;animation:loWordIn .5s ease 1.95s forwards}
.lo-corner.tl{top:22px;left:22px;border-top:1.5px solid #f5a623;border-left:1.5px solid #f5a623}
.lo-corner.tr{top:22px;right:22px;border-top:1.5px solid #f5a623;border-right:1.5px solid #f5a623}
.lo-corner.bl{bottom:22px;left:22px;border-bottom:1.5px solid #f5a623;border-left:1.5px solid #f5a623}
.lo-corner.br{bottom:22px;right:22px;border-bottom:1.5px solid #f5a623;border-right:1.5px solid #f5a623}
.lo-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.012) 2px,rgba(0,0,0,.012) 4px)}

/* ── HEADING LINE HEIGHT ── */
.heading-xl--tight{line-height:1.06}

/* ── TEXT ALIGN CENTER UTILITY ── */
.text-center{text-align:center}
.mt-48{margin-top:48px}

/* ── TECH MARQUEE (non-scoped) ── */
.tech-marquee-wrap{padding:28px 0;background:var(--bg-elevated)}
.tech-marquee-label{font-size:.62rem;margin-bottom:20px}
.tech-marquee-item{flex-direction:column;align-items:center;gap:10px;padding:0 44px;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--text-secondary)}
.tech-marquee-item svg{width:30px!important;height:30px!important;stroke-width:1.3;color:var(--corp-blue);flex-shrink:0;transition:transform .3s}
.tech-marquee-item:hover svg{transform:scale(1.15)}
.tech-marquee-item:hover{color:var(--corp-blue)}
.tech-marquee-divider{font-size:1.6rem;align-self:center;padding-bottom:8px}

/* ── SVC FEATURES GRID ── */
.svc-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.sfc{background:var(--bg-base);border:1px solid var(--border-color);border-radius:16px;padding:36px 30px 38px;position:relative;overflow:hidden;transition:border-color .35s,transform .35s,box-shadow .35s;cursor:default}
.sfc:hover{border-color:var(--corp-blue);transform:translateY(-5px);box-shadow:0 16px 48px rgba(212,137,10,.15)}
.sfc::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--corp-blue),var(--corp-blue-light));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.25,1,.5,1);border-radius:16px 16px 0 0}
.sfc:hover::after{transform:scaleX(1)}
.sfc-icon{width:60px;height:60px;background:rgba(245,166,35,.1);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--corp-blue);margin-bottom:22px;transition:background .3s,color .3s,transform .3s}
.sfc:hover .sfc-icon{background:var(--corp-blue);color:#fff;transform:scale(1.08)}
.sfc-icon svg{width:28px;height:28px;stroke-width:1.4;flex-shrink:0}
.sfc h3{font-size:1.08rem;font-weight:700;color:var(--text-primary);margin-bottom:12px;line-height:1.3}
.sfc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.sfc-list li{font-size:.84rem;color:var(--text-secondary);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.sfc-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--corp-blue);flex-shrink:0;margin-top:6px;transition:transform .3s}
.sfc:hover .sfc-list li::before{transform:scale(1.4)}
.sfc-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(245,166,35,.1);color:var(--corp-blue);font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:5px 12px;border-radius:20px;margin-bottom:14px}

/* ── VERTICAL TIMELINE ── */
.v-timeline{position:relative;max-width:760px;margin:60px auto 0}
.v-timeline::before{content:'';position:absolute;left:40px;top:0;bottom:0;width:2px;background:var(--border-color)}
.v-timeline-fill{position:absolute;left:40px;top:0;width:2px;height:0%;background:linear-gradient(180deg,var(--corp-blue),var(--corp-blue-light));transition:height 1.8s cubic-bezier(.25,1,.5,1);box-shadow:0 0 12px rgba(212,137,10,.5)}
.v-timeline.animated .v-timeline-fill{height:100%}
.v-step{display:flex;gap:32px;align-items:flex-start;padding-bottom:52px;position:relative;opacity:0;transform:translateX(-20px);transition:opacity .55s ease,transform .55s ease}
.v-step.visible{opacity:1;transform:translateX(0)}
.v-step:last-child{padding-bottom:0}
.v-dot{width:80px;height:80px;flex-shrink:0;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.4rem;font-weight:800;color:var(--text-muted);position:relative;z-index:2;transition:border-color .4s,color .4s,background .4s,box-shadow .4s}
.v-step.visible .v-dot{border-color:var(--corp-blue);color:var(--corp-blue);box-shadow:0 0 0 6px rgba(212,137,10,.1),0 4px 20px rgba(212,137,10,.2);background:var(--bg-base)}
.v-content{flex:1;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:14px;padding:28px 30px;position:relative;transition:border-color .4s,box-shadow .4s;margin-top:14px}
.v-step.visible .v-content{border-color:rgba(212,137,10,.25);box-shadow:0 4px 24px rgba(212,137,10,.08)}
.v-content::before{content:'';position:absolute;left:-8px;top:20px;width:14px;height:14px;background:var(--bg-elevated);border-left:1px solid rgba(212,137,10,.2);border-bottom:1px solid rgba(212,137,10,.2);transform:rotate(45deg)}
.v-step-label{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--corp-blue);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.v-step-label::after{content:'';flex:1;height:1px;background:rgba(212,137,10,.2)}
.v-content h3{font-size:1.12rem;font-weight:700;color:var(--text-primary);margin-bottom:10px}
.v-content p{font-size:.87rem;color:var(--text-secondary);line-height:1.7}
.v-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(212,137,10,.08);color:var(--corp-blue);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 11px;border-radius:20px;margin-top:14px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
    .features-bento{grid-template-columns:1fr 1fr}
    .fb-card.wide{grid-column:span 2}
    .fb-card.tall{grid-row:auto}
    .svc-features-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
    .features-bento{grid-template-columns:1fr}
    .fb-card.wide,.fb-card.tall{grid-column:span 1;grid-row:auto}
    .svc-features-grid{grid-template-columns:1fr}
}