/* ============ ABOUT PAGE ============
   Loads only on the About page, on top of the theme tokens in style.css.
   The About hero is .ihero (inner hero) so it does not collide with the
   homepage hero, which is a different layout in this theme. */

/* --- components carried over for the About hero and story blocks --- */
.btn-ghost{color:var(--ink);background:var(--glass-2);border:1px solid var(--line-strong);backdrop-filter:blur(14px)}
.btn-ghost:hover{border-color:var(--orange);background:rgba(242,132,17,.08)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:100px;
  border:1px solid var(--line-strong);background:var(--glass);font-family:"JetBrains Mono";font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#38e08a;box-shadow:0 0 0 0 rgba(56,224,138,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(56,224,138,0)}100%{box-shadow:0 0 0 0 rgba(56,224,138,0)}}
.hero-sub{font-size:clamp(16px,1.3vw,19px);color:var(--ink-soft);max-width:46ch;margin-bottom:34px}
.hero-ctas{
    /*display:flex;*/
gap:14px;flex-wrap:wrap;margin-bottom:46px}
.counter{position:relative;flex:1;min-width:130px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);overflow:hidden;transition:.35s var(--ease)}
.counter::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(130deg,rgba(242,132,17,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s}
.counter:hover{transform:translateY(-5px);background:var(--glass-2)}
.counter:hover::before{opacity:1}
.counter .num{font-family:"Space Grotesk";font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;
  background:linear-gradient(100deg,#fff,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.counter .lbl{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.hero-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
@keyframes breathe{50%{transform:scale(1.08);opacity:.8}}
.tower-img{position:relative;z-index:5;width:78%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));animation:float 8s ease-in-out infinite;will-change:transform}
.radar{position:absolute;z-index:2;width:96%;height:96%;border-radius:50%;overflow:hidden;
  -webkit-mask:radial-gradient(circle,#000 66%,transparent 67%);mask:radial-gradient(circle,#000 66%,transparent 67%)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(242,132,17,.0) 300deg,rgba(242,132,17,.45) 355deg,rgba(255,171,77,.6) 360deg);
  animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(120,140,255,.16);z-index:1}
.ring.r1{width:52%;height:52%}
.ring.r2{width:74%;height:74%}
.ring.r3{width:96%;height:96%;border-color:rgba(242,132,17,.14)}
.ring.pulse{border-color:rgba(242,132,17,.4);animation:ringpulse 3.4s ease-out infinite}
@keyframes ringpulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.scanline{position:absolute;z-index:3;width:88%;height:1.5px;left:6%;
  background:linear-gradient(90deg,transparent,rgba(255,171,77,.9),transparent);
  box-shadow:0 0 14px rgba(242,132,17,.7);animation:scan 4.5s ease-in-out infinite}
@keyframes scan{0%,100%{top:18%;opacity:0}10%{opacity:1}50%{top:80%;opacity:1}60%{opacity:0}}
.hud{position:absolute;z-index:7;padding:11px 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(10,10,34,.62);backdrop-filter:blur(14px);box-shadow:0 12px 30px -14px rgba(0,0,0,.8);
  min-width:132px;animation:floaty 6s ease-in-out infinite;will-change:transform}
.hud .cap{font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:6px;margin-bottom:5px}
.hud .cap i{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);font-style:normal}
.hud .val{font-family:"JetBrains Mono";font-size:13px;font-weight:500;color:var(--ink)}
.hud .val small{color:var(--ink-soft);font-size:10px}
.hud.h1{top:8%;left:-6%;animation-delay:0s}
.hud.h2{top:34%;right:-9%;animation-delay:-1.5s}
.hud.h3{bottom:20%;left:-9%;animation-delay:-3s}
.hud.h4{bottom:5%;right:-2%;animation-delay:-2.2s}
@keyframes floaty{50%{transform:translateY(-12px)}}
.bar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--grad-accent);width:72%;animation:barmove 3s ease-in-out infinite}
@keyframes dash{to{stroke-dashoffset:-400}}
.cta-band .bgimg{position:absolute;inset:0;z-index:-2}
.cta-band .bgimg img{width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-visual{max-width:480px;margin:0 auto;order:-1}
}
@media (max-width:640px){
  .hero-ctas .btn{flex:1;justify-content:center}
  .hud.h1{left:-2%}
  .hud.h3{left:-2%}
  .hud.h2{right:-2%}
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .inner{display:inline-block;will-change:transform}

/* --- About specific layout --- */
/* ============ ABOUT PAGE ============ */
/* Reuses global tokens, .wrap, .section, .eyebrow, .grad-text, .btn, .reveal,
   [data-stagger], .hero-visual, .hud, .counter, .panel from style.css */

.about-hero{padding-top:150px}
.about-hero .hero-badge{margin-bottom:24px}
.about-hero h1{font-size:clamp(38px,5.6vw,76px);font-weight:700;letter-spacing:-.03em;margin-bottom:22px}
.about-hero h1 .line{display:block;overflow:hidden}
.about-hero h1 .inner{display:inline-block;will-change:transform}
/*.about-hero .hero-sub{max-width:44ch}*/
.about-hero .hero-sub {
    max-width: 56ch !important;
}
.about-hud .hud .val{font-size:12px}

/* section intro shared */
.intro{max-width:680px;margin:0 auto clamp(46px,6vw,72px);text-align:center}
.intro.left{margin-left:0;text-align:left}
.intro .eyebrow{margin-bottom:16px}
.intro h2{font-size:clamp(28px,4vw,52px);margin-bottom:14px}
.intro p{color:var(--ink-soft);font-size:17px}

/* ---------- OUR STORY ---------- */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.story-copy .eyebrow{margin-bottom:18px}
.story-copy h2{font-size:clamp(28px,3.6vw,50px);margin-bottom:22px;letter-spacing:-.02em}
.story-copy .rich p{color:var(--ink-soft);font-size:16.5px;margin-bottom:16px;max-width:52ch}
.story-copy .rich b{color:var(--ink);font-weight:600}
.story-media{position:relative;aspect-ratio:1/1;perspective:1200px}
.story-media .sh{position:absolute;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);transition:transform .5s var(--ease)}
.story-media .sh img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.story-media .sh::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(58,58,168,.14),transparent 55%)}
.story-media .s1{width:66%;height:70%;top:0;left:0;z-index:2;animation:floatY 8s ease-in-out infinite}
.story-media .s2{width:52%;height:56%;right:0;bottom:6%;z-index:3;animation:floatY 7s ease-in-out infinite reverse}
.story-media .s3{width:38%;height:36%;right:12%;top:6%;z-index:4;animation:floatY 9s ease-in-out infinite}
.story-media .sh:hover{transform:translateY(-6px) scale(1.02)}
.story-media .sh:hover img{transform:scale(1.08)}
.story-lines{position:absolute;inset:-8% -8%;z-index:1;pointer-events:none}
.story-lines path{stroke:url(#slg);stroke-width:1;fill:none;stroke-dasharray:4 8;opacity:.4;animation:dash 20s linear infinite}
@keyframes floatY{50%{transform:translateY(-14px)}}

/* ---------- MISSION ---------- */
.mission{position:relative}
.mission-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.core-stage{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.core-glow{position:absolute;width:60%;height:60%;border-radius:50%;filter:blur(56px);
  background:radial-gradient(circle,rgba(242,132,17,.4),rgba(58,58,168,.28) 55%,transparent 72%);animation:breathe 7s ease-in-out infinite}
.core{position:relative;z-index:4;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,rgba(255,171,77,.9),var(--orange) 40%,var(--navy-700) 100%);
  box-shadow:0 0 60px rgba(242,132,17,.5),inset 0 0 30px rgba(255,255,255,.25)}
.core span{font-family:"Space Grotesk";font-weight:700;font-size:22px;letter-spacing:.1em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.core::before,.core::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,171,77,.4)}
.core::before{inset:-16px;animation:ringpulse 3s ease-out infinite}
.core::after{inset:-16px;animation:ringpulse 3s ease-out infinite 1.5s}
.orbit{position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(120,140,255,.22);animation:spin 40s linear infinite}
.orbit.o2{inset:22%;border-color:rgba(242,132,17,.18);animation-duration:28s;animation-direction:reverse}
.node-ic{position:absolute;z-index:5;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:rgba(10,10,34,.7);backdrop-filter:blur(12px);
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),border-color .35s}
.node-ic svg{width:24px;height:24px;stroke:var(--amber)}
.node-ic:hover{transform:translate(-50%,-50%) scale(1.12);border-color:var(--orange)}
.node-ic small{position:absolute;top:112%;left:50%;transform:translateX(-50%);font-family:"JetBrains Mono";font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.mission-lines{position:absolute;inset:0;z-index:2;pointer-events:none}
.mission-lines line{stroke:url(#mlg);stroke-width:1;opacity:.35;stroke-dasharray:3 6;animation:dash 16s linear infinite}
.mission-copy h2{font-size:clamp(28px,3.6vw,48px);margin-bottom:18px;letter-spacing:-.02em}
.mission-copy p{color:var(--ink-soft);font-size:17px;margin-bottom:16px;max-width:48ch}
.mission-copy .stamp{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono";font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:8px}
.mission-copy .stamp::before{content:"";width:26px;height:1px;background:var(--grad-accent)}

/* ---------- VIDEO SHOWCASE ---------- */
.video-frame{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line-strong);
  aspect-ratio:16/9;isolation:isolate;transition:transform .3s var(--ease);cursor:pointer}
.video-frame::before{content:"";position:absolute;inset:0;z-index:3;border-radius:26px;padding:1px;
  background:linear-gradient(130deg,rgba(242,132,17,.6),rgba(58,58,168,.4) 50%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.video-frame::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,6,28,.25),rgba(6,6,28,.55))}
.video-frame:hover img{transform:scale(1.06)}
.video-sweep{position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);transition:left .8s var(--ease)}
.video-frame:hover .video-sweep{left:130%}
.play{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);
  background:rgba(10,10,34,.5);backdrop-filter:blur(10px);transition:.35s var(--ease)}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(242,132,17,.5);animation:ringpulse 2.6s ease-out infinite}
.play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.video-frame:hover .play{transform:translate(-50%,-50%) scale(1.12);background:var(--grad-accent)}
.video-frame:hover .play svg{fill:#160c02}
.video-cap{position:absolute;left:24px;bottom:22px;z-index:4;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ---------- STATS ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{position:relative;padding:26px 24px;border-radius:18px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(10px);overflow:hidden;transition:transform .35s var(--ease),background .35s}
.stat::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,rgba(242,132,17,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s}
.stat:hover{transform:translateY(-6px);background:var(--glass-2)}
.stat:hover::before{opacity:1}
.stat .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  border:1px solid var(--line-strong);background:linear-gradient(140deg,rgba(242,132,17,.16),rgba(58,58,168,.14))}
.stat .ic svg{width:22px;height:22px;stroke:var(--amber)}
.stat .val{    font-family: "Clash Display", "Space Grotesk", sans-serif;
font-weight:600;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}

/* ---------- WHAT MAKES US DIFFERENT ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
.diff-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);min-height:330px;
  display:flex;align-items:flex-end;isolation:isolate;transition:transform .3s var(--ease)}
/*.diff-card:nth-child(2),*/
/*.diff-card:nth-child(3){margin-top:40px}*/
.diff-card .media{position:absolute;inset:0;z-index:-2}
.diff-card .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .8s var(--ease)}
.diff-card:hover .media img{transform:scale(1.11)}
.diff-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,28,.1) 25%,rgba(6,6,28,.5) 55%,rgba(6,6,28,.95))}
.diff-body{padding:28px 26px;transform:translateZ(28px)}
.diff-body .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  border:1px solid var(--line-strong);background:rgba(10,10,34,.5);backdrop-filter:blur(10px)}
.diff-body .ic svg{width:22px;height:22px;stroke:var(--amber)}
.diff-body h3{font-size:22px;margin-bottom:8px}
.diff-body p{font-size:14.5px;color:rgba(240,242,255,.82);max-width:42ch}

/* ---------- VALUES TIMELINE ---------- */
.values{position:relative;max-width:940px;margin:0 auto}
.values-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line)}
.values-line i{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--royal-soft),var(--orange),var(--amber));box-shadow:0 0 12px rgba(242,132,17,.6)}
.val-row{position:relative;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-bottom:34px}
.val-node{display: none !important;width:54px;height:54px;justify-self:center;border-radius:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:rgba(10,10,34,.85);backdrop-filter:blur(10px);position:relative;z-index:2}
.val-node svg{width:24px;height:24px;stroke:var(--amber)}
.val-card{position:relative;padding:22px 24px;border-radius:18px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(10px);overflow:hidden;transition:transform .35s var(--ease),background .35s}
.val-card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,rgba(242,132,17,.5),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.val-card:hover{transform:translateY(-5px);background:var(--glass-2)}
.val-card:hover::before{opacity:1}
.val-card .n{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.16em;color:var(--amber)}
.val-card h4{font-size:20px;margin:8px 0 8px}
.val-card p{font-size:14.5px;color:var(--ink-soft)}
.val-row:nth-child(even) .val-card{grid-column:3}
.val-row:nth-child(odd) .val-card{grid-column:1;text-align:right}
.val-row:nth-child(odd) .val-card .n{display:block}

/* ---------- ABOUT CTA ---------- */
.about-cta{text-align:center;max-width:720px;margin:0 auto}
.about-cta h2{font-size:clamp(30px,4.4vw,56px);margin-bottom:16px}
.about-cta p{color:var(--ink-soft);font-size:17px;margin-bottom:28px}
.about-cta .hero-ctas{justify-content:center}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .story-grid,.mission-wrap{grid-template-columns:1fr;gap:40px}
  .story-media{max-width:520px;margin:0 auto;width:100%}
  .core-stage{max-width:440px;margin:0 auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:1fr}
  .diff-card:nth-child(2),.diff-card:nth-child(3){margin-top:0}
}
@media (max-width:640px){
  .stats-grid{grid-template-columns:1fr}
  .values-line{left:26px}
  .val-row{grid-template-columns:52px 1fr;gap:14px}
  .val-node{grid-column:1;justify-self:start}
  .val-row .val-card,.val-row:nth-child(odd) .val-card,.val-row:nth-child(even) .val-card{grid-column:2;text-align:left}
  .val-row:nth-child(odd) .val-card{text-align:left}
}


/* --- About hero HUD placement (classes, so mobile can reposition) --- */
.about-hud .hud{position:absolute}
.about-hud .p1{top:7%;left:-6%}
.about-hud .p2{top:38%;left:-9%}
.about-hud .p3{bottom:16%;left:-5%}
.about-hud .p4{top:20%;right:-8%}
.about-hud .p5{top:52%;right:-10%}
.about-hud .p6{bottom:5%;right:-2%}

@media (max-width:900px){
  .about-hud .p1,.about-hud .p2,.about-hud .p3{left:0}
  .about-hud .p4,.about-hud .p5,.about-hud .p6{right:0}
}
@media (max-width:760px){
  .about-hud .hud{transform:scale(.86);transform-origin:left center}
  .about-hud .p4,.about-hud .p5,.about-hud .p6{transform-origin:right center}
  .about-hud .p2{top:34%}
  .about-hud .p5{top:56%}
  .story-lines{inset:0}
}
@media (max-width:520px){
  .about-hud .p2,.about-hud .p5{display:none}
}