/* ============================================================
   DevHive — OUR STORY · "AURORA CONTROL" dark concept
   Self-contained dark theme (scoped to .ourstory).
   ============================================================ */
.ourstory{
  --bg:#0b1422;--bg2:#0e1a2c;
  --panel:rgba(255,255,255,.04);--panel2:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.09);--line3:rgba(255,255,255,.14);
  --txt:#9fb2c6;--txt-dim:#728aa1;--vio:#7b6cff;--teal:#00bdc3;--blue:#0277d4;
  --mono:"JetBrains Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,1,.36,1);
}
body.ourstory{background:var(--bg);color:var(--txt)}
.ourstory main{position:relative;z-index:1}
.ourstory::before,.ourstory::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
.ourstory::before{background:
  radial-gradient(1200px 520px at 50% 0%,rgba(0,189,195,.16),transparent 70%),
  radial-gradient(900px 620px at 8% 22%,rgba(0,189,195,.1),transparent 60%),
  radial-gradient(840px 600px at 94% 30%,rgba(123,108,255,.13),transparent 60%),
  radial-gradient(1000px 760px at 50% 120%,rgba(2,119,212,.1),transparent 60%),
  linear-gradient(180deg,#070b14,#0b1422 42%,#0a1322)}
.ourstory::after{background-image:linear-gradient(rgba(122,170,200,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 22%,#000,transparent 85%);mask-image:radial-gradient(ellipse 75% 60% at 50% 22%,#000,transparent 85%);opacity:.4}

.ourstory .section{position:relative;z-index:1;padding:104px 0}
.ourstory .section.tight{padding:72px 0}
.ourstory .section.bg-mist,.ourstory .bg-navy{background:transparent;color:var(--txt)}
.ourstory h1,.ourstory h2,.ourstory h3,.ourstory h4{color:#f3f8fc}
.ourstory .title{color:#fff}
.ourstory .lead{color:var(--txt)}
.ourstory .center{text-align:center}
.ourstory .grad-text{background:linear-gradient(120deg,#9ff7ee,#03aae1 50%,#9b8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ourstory .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7ff0e6;margin-bottom:16px}
.ourstory .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--vio))}
.ourstory .eyebrow.light{color:#7ff0e6}
.ourstory .sec-head{max-width:760px;margin:0 auto}
.ourstory .btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line3)}
.ourstory .btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-3px)}
.ourstory .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ourstory .reveal.in{opacity:1;transform:none}
.ourstory .reveal.d1{transition-delay:.1s}.ourstory .reveal.d2{transition-delay:.2s}.ourstory .reveal.d3{transition-delay:.3s}

/* header light-glass on scroll */
.ourstory .site-header.scrolled{background:rgba(8,14,24,.94);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06)}
.ourstory .site-header.scrolled .nav .nav-links>li>a{color:#e7f1f8}
.ourstory .site-header.scrolled .nav-links>li>a:hover,.ourstory .site-header.scrolled .nav-links>li>a.active{color:var(--teal)}
.ourstory .site-header.scrolled .brand .wordmark b{color:#fff}
.ourstory .site-header.scrolled .brand .wordmark span{color:var(--sky)}
.ourstory .site-header.scrolled .burger span{background:#fff}

/* ============================================================
   HERO — narrative + floating year orbs
   ============================================================ */
.ourstory .hero{position:relative;overflow:hidden;background:transparent}
.ourstory .hero .glow-orb,.ourstory .hero .scene{display:none}
.ourstory .hero-pad{position:relative;z-index:2;padding-top:160px;padding-bottom:90px}
.ourstory .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.ourstory .hero .crumb{font:600 12px var(--mono);letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:18px}
.ourstory .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;background:var(--panel);border:1px solid var(--line2);color:#cfe0ea;font:600 13px var(--body);margin-bottom:22px}
.ourstory .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#3ee68f;box-shadow:0 0 0 4px rgba(62,230,143,.18)}
.ourstory .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,5.4vw,60px);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.ourstory .hero .lead{font-size:18px;line-height:1.65;color:rgba(225,238,247,.86);max-width:52ch;margin:0 0 30px}
.ourstory .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* orbiting years visual */
.os-orbit{position:relative;height:420px;display:grid;place-items:center}
.os-core{position:relative;z-index:3;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(150deg,rgba(0,189,195,.25),rgba(123,108,255,.2)),#0a1726;border:1px solid rgba(127,240,230,.3);box-shadow:0 0 50px rgba(0,189,195,.3)}
.os-core b{font-family:var(--display);font-size:30px;color:#fff;line-height:1}
.os-core span{font:600 10px var(--mono);color:#7ff0e6;letter-spacing:.1em;margin-top:4px}
.os-ring{position:absolute;border-radius:50%;border:1px dashed rgba(150,170,255,.18);top:50%;left:50%;transform:translate(-50%,-50%)}
.os-ring.r1{width:240px;height:240px;animation:osSpin 22s linear infinite}
.os-ring.r2{width:360px;height:360px;animation:osSpin 34s linear infinite reverse}
@keyframes osSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.os-yr{position:absolute;top:50%;left:50%;font:700 12px var(--mono);color:#fff;background:rgba(8,15,26,.8);border:1px solid var(--line2);border-radius:100px;padding:6px 13px;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.os-ring.r1 .os-yr{--r:120px}.os-ring.r2 .os-yr{--r:180px}
@media(prefers-reduced-motion:reduce){.os-ring{animation:none}}
@media(max-width:980px){.ourstory .hero-grid{grid-template-columns:1fr;gap:44px}.os-orbit{max-width:460px;margin:0 auto}}
@media(max-width:560px){.os-orbit{height:340px}.os-ring.r2{display:none}}

/* ============================================================
   BEGINNING split
   ============================================================ */
.ourstory .split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.os-beginpanel{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line2);background:linear-gradient(160deg,rgba(0,189,195,.1),rgba(123,108,255,.08)),var(--panel);padding:38px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.os-beginpanel .bq{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:#fff}
.os-beginpanel .bq b{background:linear-gradient(120deg,#9ff7ee,#9b8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.os-beginpanel .bgrid{position:absolute;inset:0;z-index:0;opacity:.5;background-image:linear-gradient(rgba(122,170,200,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.06) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%)}
.os-beginpanel>*{position:relative;z-index:1}
.ourstory .split p{color:var(--txt);font-size:16px;line-height:1.75;margin:0 0 16px}
@media(max-width:900px){.ourstory .split{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   TIMELINE (vertical, alternating)
   ============================================================ */
.os-tl{position:relative;max-width:860px;margin:54px auto 0}
.os-tl::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--teal),var(--vio),transparent);transform:translateX(-50%)}
.os-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:30px}
.os-row .os-card{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:24px;transition:transform .4s var(--ease),border-color .4s}
.os-row .os-card:hover{transform:translateY(-4px);border-color:rgba(0,189,195,.4)}
.os-row:nth-child(odd) .os-card{grid-column:1}
.os-row:nth-child(even) .os-card{grid-column:2}
.os-row .os-yrbadge{position:absolute;left:50%;top:24px;transform:translateX(-50%);z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--display);color:#fff;background:#0a1726;border:2px solid var(--teal);box-shadow:0 0 0 5px var(--bg),0 0 20px rgba(0,189,195,.3)}
.os-card h3{color:#fff;font-size:18px;margin:0 0 6px;font-family:var(--display)}
.os-card p{color:var(--txt);font-size:14px;line-height:1.6;margin:0}
@media(max-width:720px){
  .os-tl::before{left:19px}
  .os-row{grid-template-columns:1fr;gap:0;padding-left:52px}
  .os-row:nth-child(odd) .os-card,.os-row:nth-child(even) .os-card{grid-column:1}
  .os-row .os-yrbadge{left:19px;top:18px;width:40px;height:40px;font-size:11px}
}

/* ============================================================
   VALUES grid (reuse .grid .card dark)
   ============================================================ */
.ourstory .grid.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.ourstory .grid .card{background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:30px 26px;transition:transform .45s var(--ease),border-color .45s,background .45s}
.ourstory .grid .card:hover{transform:translateY(-6px);border-color:rgba(0,189,195,.4);background:rgba(255,255,255,.05);box-shadow:none}
.ourstory .grid .card h3{color:#fff;font-family:var(--display);font-size:18px;margin:0 0 8px}
.ourstory .grid .card p{color:var(--txt);font-size:14px;line-height:1.6;margin:0}
.ourstory .grid .card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,189,195,.18),rgba(123,108,255,.16));color:#7ff0e6;border:1px solid rgba(127,240,230,.22);margin-bottom:16px}
.ourstory .grid .card .ic svg{width:25px;height:25px}
@media(max-width:880px){.ourstory .grid.g3{grid-template-columns:1fr}}

/* ============================================================
   CTA band (dark aurora)
   ============================================================ */
.ourstory .cta-band{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(0,189,195,.12),rgba(123,108,255,.12)),#0e1a2c!important;border:1px solid var(--line3);border-radius:30px;padding:64px 40px;text-align:center}
.ourstory .cta-band::after{display:block!important;content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,transparent,rgba(0,189,195,.18),transparent 35%,rgba(123,108,255,.18),transparent 70%);animation:osCtaSpin 18s linear infinite}
@keyframes osCtaSpin{to{transform:rotate(360deg)}}
.ourstory .cta-band>*{position:relative;z-index:2}
.ourstory .cta-band h2{color:#fff}
.ourstory .cta-band p{color:#bcd0e0}
@media(prefers-reduced-motion:reduce){.ourstory .cta-band::after{animation:none}}