/* Smart Cedra — shared design system */
:root{
  --ink-950:#02060f; --ink-900:#050b18; --ink-800:#0a1426; --ink-700:#122036;
  --brand-200:#a9caf0; --brand-300:#6ea6e2; --brand-400:#2f7fd0; --brand-500:#1466c0; --brand-600:#004080; --brand-700:#00305f;
  --azure-200:#bfe3ff; --azure-300:#7fcaff; --azure-400:#34a6f0;
  --max:1180px;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{margin:0;padding:0}
body{
  background:#02060f;color:#d6e3f2;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(47,127,208,.3);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#02060f}
::-webkit-scrollbar-thumb{background:linear-gradient(#2f7fd0,#00305f);border-radius:10px;border:2px solid #02060f}

.glass{background:rgba(255,255,255,.035);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);border:1px solid rgba(255,255,255,.08)}
.glass-strong{background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11)}
.ring-hairline{box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.text-gradient{background:linear-gradient(110deg,#ffffff 8%,#7fcaff 46%,#2f7fd0 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-balance{text-wrap:balance}
.display{font-family:'Sora','Inter',sans-serif;letter-spacing:-0.02em}

.ambient{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--ink-950);pointer-events:none}
.orb{position:absolute;border-radius:999px;filter:blur(110px);animation:pulseGlow 6s ease-in-out infinite;will-change:transform}
.orb.o1{left:-12rem;top:-12rem;height:42rem;width:42rem;background:rgba(20,102,192,.20)}
.orb.o2{right:-14rem;top:28%;height:40rem;width:40rem;background:rgba(52,166,240,.15);animation-delay:-2s}
.orb.o3{bottom:-10%;left:20%;height:36rem;width:36rem;background:rgba(0,64,128,.15);animation-delay:-4s}
.grid-bg{position:absolute;inset:0;opacity:.035;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,black 40%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 0%,black 40%,transparent 80%)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(2,6,15,.85))}
@keyframes pulseGlow{0%,100%{opacity:.5}50%{opacity:.85}}

.nav-wrap{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:center;padding:16px;pointer-events:none}
.nav-wrap > nav{pointer-events:auto}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max);border-radius:18px;padding:10px 18px;border:1px solid transparent;transition:all .45s ease}
.nav.scrolled{background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11);box-shadow:0 0 0 1px rgba(47,127,208,.18),0 0 60px -18px rgba(47,127,208,.5)}
.nav .brand img{height:38px;width:auto;filter:drop-shadow(0 2px 12px rgba(47,127,208,.45))}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{padding:8px 14px;font-size:14px;color:rgba(255,255,255,.7);border-radius:999px;transition:color .25s,background .25s}
.nav ul a:hover,.nav ul a.active{color:#fff;background:rgba(255,255,255,.04)}
.nav .actions{display:flex;align-items:center;gap:12px}
.nav .actions a.ghost{font-size:14px;color:rgba(255,255,255,.7)}
.nav .actions a.ghost:hover{color:#fff}
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 22px;font-weight:600;font-size:14px;color:#02060f;background:linear-gradient(110deg,var(--brand-300),var(--azure-300));box-shadow:0 10px 30px -10px rgba(47,127,208,.6);transition:transform .25s ease,box-shadow .25s ease;cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(47,127,208,.7)}
.btn.ghost{background:transparent;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);box-shadow:none}
.btn.ghost:hover{border-color:rgba(255,255,255,.35);color:#fff}
.menu-btn{display:none;height:42px;width:42px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);align-items:center;justify-content:center;color:#fff;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:#fff;margin:3px 0;transition:.3s}
.mobile-panel{display:none;position:fixed;left:16px;right:16px;top:80px;z-index:49;background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:14px;opacity:0;transform:translateY(-8px);transition:.25s ease}
.mobile-panel.open{opacity:1;transform:translateY(0);display:block}
.mobile-panel a{display:block;padding:12px 14px;color:rgba(255,255,255,.8);border-radius:12px;font-size:14px}
.mobile-panel a:hover{background:rgba(255,255,255,.04);color:#fff}
.mobile-cta{display:flex;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}

section{position:relative;padding:80px 24px}
.container{max-width:var(--max);margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:500;color:rgba(255,255,255,.75);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(120%)}
.live{position:relative;width:8px;height:8px}
.live::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--brand-400);opacity:.75;animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.live::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--brand-400)}
@keyframes ping{75%,100%{transform:scale(2.5);opacity:0}}

.section-head{max-width:760px;margin:0 auto;text-align:center}
.section-head .tag{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.section-head h2{font-family:'Sora','Inter',sans-serif;font-weight:700;letter-spacing:-0.02em;font-size:clamp(28px,4.6vw,42px);line-height:1.06;margin:12px 0 14px;color:#fff}
.section-head p{color:rgba(255,255,255,.55);font-size:16px;max-width:600px;margin:0 auto}

.page-hero{padding:160px 24px 80px;position:relative}
.page-hero .grid{display:grid;gap:48px;align-items:start;grid-template-columns:1.15fr .85fr;max-width:var(--max);margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px}
.crumbs a{color:rgba(255,255,255,.7);transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.4}
.page-hero h1{font-family:'Sora','Inter',sans-serif;font-weight:700;color:#fff;font-size:clamp(34px,5.2vw,56px);line-height:1.04;letter-spacing:-0.03em;margin:14px 0 0}
.page-hero p.lead{margin-top:18px;max-width:600px;color:rgba(255,255,255,.65);font-size:18px;line-height:1.6}
.page-hero p.sub2{margin-top:8px;max-width:600px;color:rgba(255,255,255,.45);font-size:15px}
.page-hero .cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero-side{padding:28px;border-radius:22px;background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.hero-side h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;color:#fff;margin:0 0 18px}

.feature-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:11px}
.feature-list li{position:relative;padding-left:30px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.7)}
.feature-list li::before{content:'';position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:rgba(47,127,208,.15);border:1px solid rgba(47,127,208,.4)}
.feature-list li::after{content:'';position:absolute;left:6px;top:11px;width:7px;height:4px;border-left:2px solid var(--azure-300);border-bottom:2px solid var(--azure-300);transform:rotate(-45deg)}

.proof-list{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proof-list li{padding:18px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.proof-list li strong{display:block;font-family:'Sora',sans-serif;font-size:24px;font-weight:600;background:linear-gradient(110deg,#fff,var(--azure-300));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.proof-list li span{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5}

.content-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:32px;align-items:start}
.content-grid.single{grid-template-columns:1fr}
.content-grid.equal{grid-template-columns:1fr 1fr}
.prose h2{font-family:'Sora',sans-serif;font-size:28px;font-weight:600;color:#fff;margin:0 0 16px;letter-spacing:-0.015em}
.prose h2:not(:first-child){margin-top:36px}
.prose h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:600;color:#fff;margin:24px 0 12px}
.prose p{margin:0 0 14px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.7)}
.prose ul:not(.feature-list){padding-left:22px;margin:14px 0;color:rgba(255,255,255,.7);font-size:15px;line-height:1.7}
.prose ul:not(.feature-list) li{margin-bottom:6px}
.prose a{color:var(--azure-300);transition:color .25s}
.prose a:hover{color:#fff;text-decoration:underline}
.prose strong{color:#fff;font-weight:600}

.side-card{padding:24px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.side-card h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0}
.side-card .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.42);margin-bottom:8px;display:block}

.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.mini-grid.two{grid-template-columns:repeat(2,1fr)}
.mini{padding:22px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);transition:transform .3s ease,border-color .3s ease}
.mini:hover{transform:translateY(-4px);border-color:rgba(47,127,208,.3)}
.mini h4{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:#fff;margin:0 0 8px}
.mini p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5;margin:0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.svc{position:relative;padding:26px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);transition:transform .35s ease,border-color .35s ease;display:block}
.svc::before{content:'';position:absolute;top:-40px;right:-40px;height:128px;width:128px;border-radius:50%;background:rgba(20,102,192,.1);filter:blur(40px);transition:.5s ease;opacity:0}
.svc:hover{transform:translateY(-6px);border-color:rgba(47,127,208,.35)}
.svc:hover::before{opacity:1}
.svc .ic{position:relative;height:46px;width:46px;border-radius:14px;display:grid;place-items:center;color:var(--brand-200);background:linear-gradient(135deg,rgba(47,127,208,.2),rgba(127,202,255,.08));border:1px solid rgba(255,255,255,.1)}
.svc .ic svg{height:22px;width:22px}
.svc h3{position:relative;font-family:'Sora',sans-serif;font-size:18px;font-weight:600;color:#fff;margin:18px 0 8px}
.svc p{position:relative;font-size:14px;line-height:1.65;color:rgba(255,255,255,.55);margin:0}
.svc .tag-mini{position:relative;display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{padding:6px 14px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:.25s}
a.pill:hover{color:#fff;border-color:rgba(47,127,208,.4);background:rgba(47,127,208,.12)}
.pill.solid{background:rgba(47,127,208,.18);color:var(--brand-200);border-color:rgba(47,127,208,.3)}

.timeline-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.timeline-list span{padding:6px 12px;border-radius:8px;font-size:12px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}

.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.meta-card{padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.meta-card .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;margin-bottom:6px;display:block}
.meta-card .val{font-size:15px;color:#fff}

.metric-row{display:grid;gap:14px;margin-top:8px}
.metric-card{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.metric-card .v{font-family:'Sora',sans-serif;font-size:30px;font-weight:600;background:linear-gradient(110deg,#fff,var(--azure-300));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric-card .l{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}

.faq-list{margin-top:32px;display:grid;gap:12px;max-width:820px;margin-left:auto;margin-right:auto}
.faq{padding:0;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.faq summary{padding:18px 22px;cursor:pointer;font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'Sora',sans-serif;font-size:22px;font-weight:300;color:var(--azure-300);transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 22px 18px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.65)}

.form-card{padding:32px;border-radius:24px;background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11)}
.form-card label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:6px;display:block}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:13px 16px;border-radius:12px;background:rgba(2,6,15,.5);border:1px solid rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .25s}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--brand-400)}
.form-card textarea{resize:vertical;min-height:108px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}

.cta-band{position:relative;margin-top:64px;padding:48px;border-radius:28px;background:linear-gradient(135deg,rgba(20,102,192,.18),rgba(52,166,240,.06));border:1px solid rgba(47,127,208,.2);overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(127,202,255,.15),transparent 60%);pointer-events:none}
.cta-band h3{font-family:'Sora',sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-0.015em;line-height:1.15}
.cta-band p{color:rgba(255,255,255,.6);margin:0;font-size:15px}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;position:relative}

.insight-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.insight{padding:24px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:.3s ease;display:block}
.insight:hover{transform:translateY(-4px);border-color:rgba(47,127,208,.3)}
.insight .topic{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--azure-300);margin-bottom:10px;display:block}
.insight h4{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.3}
.insight p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin:0}

footer{position:relative;padding:80px 24px 32px}
.foot{border-radius:32px;padding:48px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot-brand img{height:44px;width:auto;filter:drop-shadow(0 2px 14px rgba(47,127,208,.45))}
.foot-brand p{margin-top:18px;max-width:300px;color:rgba(255,255,255,.45);font-size:14px;line-height:1.6}
.foot-col h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.42);margin:0 0 16px}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot-col a{font-size:14px;color:rgba(255,255,255,.65);transition:color .25s}
.foot-col a:hover{color:var(--brand-300)}
.bigtype{margin-top:48px;text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:14vw;line-height:1;letter-spacing:-0.04em;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.foot-bot{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:12px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@media (max-width:1024px){
  .nav ul,.nav .actions{display:none}
  .menu-btn{display:flex}
  .page-hero{padding:128px 24px 64px}
  .page-hero .grid{grid-template-columns:1fr;gap:32px}
  .content-grid,.content-grid.equal{grid-template-columns:1fr;gap:24px}
  .proof-list{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .mini-grid,.cards,.insight-list{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .meta-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  section{padding:60px 20px}
  .page-hero{padding:108px 20px 48px}
  .page-hero h1{font-size:34px}
  .proof-list{grid-template-columns:1fr}
  .mini-grid,.cards,.insight-list{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .foot{padding:32px}
  .foot-grid{grid-template-columns:1fr}
  .cta-band{padding:32px}
  .cta-band h3{font-size:22px}
}
/* ============================================================
   RICH GRAPHICS COMPONENTS (v2)
   ============================================================ */

/* Decorative section accent orb */
.section-orb{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5}
.section-orb.left{left:-12%;top:10%;width:30rem;height:30rem;background:rgba(20,102,192,.14)}
.section-orb.right{right:-12%;bottom:0;width:28rem;height:28rem;background:rgba(52,166,240,.12)}
section > .container{position:relative;z-index:1}

/* ---- Hero floating visual card (sub-pages) ---- */
.hero-visual{position:relative;max-width:430px;margin:0 auto;perspective:1400px}
.hv-glow{position:absolute;inset:-22px;border-radius:34px;background:linear-gradient(45deg,rgba(20,102,192,.3),rgba(52,166,240,.2));filter:blur(56px);z-index:-1}
.hv-card{position:relative;border-radius:26px;padding:24px;overflow:hidden;background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);animation:floatY 6s ease-in-out infinite}
.hv-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hv-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;background:rgba(47,127,208,.15);color:var(--brand-200)}
.hv-chip .live{width:7px;height:7px}
.hv-loc{font-family:'Sora',sans-serif;font-size:13px;color:rgba(255,255,255,.5)}
.hv-stage{margin-top:18px;height:140px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hv-stage::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(127,202,255,.16),transparent 55%)}
.hv-stage svg{height:64px;width:64px;color:var(--brand-300);position:relative;z-index:1}
.hv-stage .ring{position:absolute;border-radius:50%;border:1px solid rgba(127,202,255,.25)}
.hv-stage .ring.r1{width:90px;height:90px;animation:spinSlow 18s linear infinite}
.hv-stage .ring.r2{width:130px;height:130px;border-style:dashed;animation:spinSlow 28s linear infinite reverse}
.hv-title{margin-top:18px;font-family:'Sora',sans-serif;font-size:17px;font-weight:600;color:#fff}
.hv-sub{font-size:13px;color:rgba(255,255,255,.45);margin-top:2px}
.hv-bars{margin-top:18px;display:grid;gap:10px}
.hv-bar{display:grid;grid-template-columns:1fr;gap:5px}
.hv-bar .lab{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.55)}
.hv-bar .lab b{color:var(--azure-300);font-weight:600;font-family:'Sora',sans-serif}
.hv-bar .track{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.hv-bar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-400),var(--azure-300));transform-origin:left;transform:scaleX(0);animation:growBar 1.1s ease forwards}
.hv-badge{position:absolute;border-radius:16px;padding:11px 14px;background:rgba(255,255,255,.07);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);display:flex;align-items:center;gap:10px}
.hv-badge .ic{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;color:var(--brand-200);background:rgba(47,127,208,.2)}
.hv-badge .ic.azure{color:var(--azure-300);background:rgba(52,166,240,.2)}
.hv-badge .ic svg{height:17px;width:17px}
.hv-badge .t{font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:#fff}
.hv-badge .s{font-size:11px;color:rgba(255,255,255,.45)}
.hv-badge.b1{left:-26px;top:30px;animation:floatY 5s ease-in-out infinite}
.hv-badge.b2{right:-18px;bottom:46px;animation:floatY 5.6s ease-in-out infinite reverse}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes growBar{to{transform:scaleX(var(--w,.6))}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ---- Proof chips in hero (replaces plain proof-list when small) ---- */
.proof-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.proof-chip{padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.proof-chip b{display:block;font-family:'Sora',sans-serif;font-size:18px;font-weight:600;background:linear-gradient(110deg,#fff,var(--azure-300));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-chip span{font-size:12px;color:rgba(255,255,255,.5)}

/* ---- Animated stat strip ---- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.stat-strip.three{grid-template-columns:repeat(3,1fr)}
.stat-cell{text-align:center;padding:26px 16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.stat-cell .v{font-family:'Sora',sans-serif;font-size:clamp(26px,3.4vw,38px);font-weight:700;background:linear-gradient(110deg,#fff,var(--azure-300));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-0.02em}
.stat-cell .l{font-size:12px;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.4}

/* ---- Icon capability grid ---- */
.icap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.icap-grid.two{grid-template-columns:repeat(2,1fr)}
.icap{position:relative;padding:26px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);transition:transform .35s ease,border-color .35s ease}
.icap::before{content:'';position:absolute;top:-40px;right:-40px;height:120px;width:120px;border-radius:50%;background:rgba(20,102,192,.12);filter:blur(38px);opacity:0;transition:.5s ease}
.icap:hover{transform:translateY(-6px);border-color:rgba(47,127,208,.35)}
.icap:hover::before{opacity:1}
.icap .ic{position:relative;height:48px;width:48px;border-radius:14px;display:grid;place-items:center;color:var(--brand-200);background:linear-gradient(135deg,rgba(47,127,208,.22),rgba(127,202,255,.08));border:1px solid rgba(255,255,255,.1)}
.icap .ic svg{height:23px;width:23px}
.icap h3{position:relative;font-family:'Sora',sans-serif;font-size:17px;font-weight:600;color:#fff;margin:18px 0 8px}
.icap p{position:relative;font-size:14px;line-height:1.6;color:rgba(255,255,255,.58);margin:0}

/* ---- Process timeline (numbered) ---- */
.proc{position:relative;margin-top:44px}
.proc-line{position:absolute;top:26px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(47,127,208,.35),rgba(127,202,255,.55),rgba(47,127,208,.35),transparent)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.proc-step{position:relative;padding-top:66px;text-align:center}
.proc-step .num{position:absolute;top:0;left:50%;transform:translateX(-50%);height:52px;width:52px;border-radius:50%;display:grid;place-items:center;background:rgba(2,6,15,.92);border:1px solid rgba(47,127,208,.45);font-family:'Sora',sans-serif;font-size:18px;font-weight:600;color:#fff;box-shadow:0 0 0 6px rgba(47,127,208,.06),0 0 30px -6px rgba(47,127,208,.5)}
.proc-step h4{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.proc-step p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55);margin:0}

/* ---- Deliverables split panel ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.panel{padding:30px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.panel.accent{background:linear-gradient(135deg,rgba(20,102,192,.16),rgba(52,166,240,.05));border-color:rgba(47,127,208,.2)}
.panel h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:600;color:#fff;margin:0 0 6px}
.panel .lead{font-size:14px;color:rgba(255,255,255,.55);margin:0 0 8px}

/* ---- Tool / tech pills band ---- */
.toolband{margin-top:40px;padding:30px 32px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);text-align:center}
.toolband .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600}
.toolband .pills{justify-content:center;margin-top:18px}
.toolband .pill{padding:9px 18px;font-size:13px}

/* ---- Results band (case studies) ---- */
.results-band{margin-top:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.results-band.three{grid-template-columns:repeat(3,1fr)}
.result{padding:28px 22px;border-radius:20px;background:linear-gradient(135deg,rgba(20,102,192,.16),rgba(52,166,240,.05));border:1px solid rgba(47,127,208,.2)}
.result .v{font-family:'Sora',sans-serif;font-size:clamp(30px,4vw,44px);font-weight:700;background:linear-gradient(110deg,#fff,var(--azure-300));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-0.02em;line-height:1}
.result .l{font-size:13px;color:rgba(255,255,255,.6);margin-top:10px}

/* ---- Narrative steps (challenge/solution/outcome) ---- */
.narrative{display:grid;gap:18px;margin-top:40px}
.narr{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;padding:28px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06)}
.narr .ic{height:52px;width:52px;border-radius:15px;display:grid;place-items:center;color:var(--brand-200);background:linear-gradient(135deg,rgba(47,127,208,.22),rgba(127,202,255,.08));border:1px solid rgba(255,255,255,.1)}
.narr .ic svg{height:25px;width:25px}
.narr .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--azure-300);font-weight:600}
.narr h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:600;color:#fff;margin:4px 0 8px}
.narr p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.68);margin:0}

/* ---- Visual delivery timeline (vertical-ish horizontal) ---- */
.vtimeline{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.vstep{position:relative;flex:1;min-width:120px;padding:16px 16px 16px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vstep .dot{position:absolute;left:18px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--azure-300);box-shadow:0 0 12px rgba(127,202,255,.8)}
.vstep .n{font-size:11px;color:rgba(255,255,255,.4);padding-left:18px}
.vstep .t{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:#fff;margin-top:4px;padding-left:18px}

/* ---- Value cards (about) ---- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.value{padding:26px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);transition:transform .3s ease,border-color .3s ease}
.value:hover{transform:translateY(-5px);border-color:rgba(47,127,208,.3)}
.value .ic{height:46px;width:46px;border-radius:13px;display:grid;place-items:center;color:var(--azure-300);background:rgba(52,166,240,.14);border:1px solid rgba(255,255,255,.1)}
.value .ic svg{height:22px;width:22px}
.value h3{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;color:#fff;margin:16px 0 8px}
.value p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.58);margin:0}

/* ---- Contact band (digital menu / generic) ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px;align-items:center}

/* ---- Contact card + info column (used by the Arabic home) ---- */
.contact-card{padding:32px;border-radius:24px;background:rgba(255,255,255,.06);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.contact-card h3{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.015em}
.contact-card .lead{color:rgba(255,255,255,.6);font-size:15px;margin:0 0 28px}
.contact-card .info{display:grid;gap:18px;margin-top:8px}
.contact-card .info .row{display:flex;gap:14px;align-items:center}
.contact-card .info svg{height:36px;width:36px;padding:8px;border-radius:10px;background:rgba(47,127,208,.15);color:var(--brand-200);flex-shrink:0}
.contact-card .info .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.45)}
.contact-card .info .val{font-size:15px;color:#fff;margin-top:2px}
.contact-card .info .val a{transition:color .25s}
.contact-card .info .val a:hover{color:var(--azure-300)}
@media (max-width:1024px){ .contact-card{grid-template-columns:1fr;padding:28px} }

/* Defensive: any inline icon SVG inside content stays icon-sized, never 300px default */
.info svg,.prose p svg,.cta-band svg{max-width:36px;max-height:36px}

/* ---- Responsive (v2) ---- */
@media (max-width:1024px){
  .icap-grid,.value-grid{grid-template-columns:repeat(2,1fr)}
  .proc-steps{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .proc-line{display:none}
  .stat-strip,.results-band{grid-template-columns:repeat(2,1fr)}
  .stat-strip.three,.results-band.three{grid-template-columns:repeat(3,1fr)}
  .split,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .icap-grid,.icap-grid.two,.value-grid{grid-template-columns:1fr}
  .proc-steps{grid-template-columns:1fr}
  .stat-strip,.stat-strip.three,.results-band,.results-band.three{grid-template-columns:1fr 1fr}
  .narr{grid-template-columns:1fr;gap:14px}
  .hv-badge.b1{left:-10px;top:18px}
  .hv-badge.b2{right:-8px;bottom:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}