/* ---- Brand & tokens (exact) ---- */
:root{
  --pill-pad-x:18px; --pill-pad-y:6px;
  --parallax:0px; --scroll-progress:0%;
  --brand-blue-700:#2255C7; --brand-blue-500:#4392D6; --brand-cyan-300:#6CDFEA; --brand-black:#000; --brand-white:#fff;
  --ink-900:#08131c; --ink-800:#0c1c28; --ink-700:#0f2432; --text-100:#E6F0F7; --text-70:#B7C7D6;
  --wrapW:1200px;
  --gutterX: clamp(16px, 4vw, 24px);
  --ink:#0b1220; --bridgeH:190px;
  --radius:18px;
  --alt:#f6f8ff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box;backface-visibility:hidden}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Titillium Web', sans-serif, sans-serif;color:var(--ink);background:#fff}
.wrap{max-width:var(--wrapW);margin:0 auto;padding:0 var(--gutterX)}

/* --- Header --- */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(10px);z-index:1000;border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{height:28px;width:auto;display:block}
.brand-name{font-family:'Titillium Web',sans-serif;font-weight:700;color:var(--ink)}
.nav{display:flex;gap:22px;align-items:center}
.nav-link{color:var(--ink);text-decoration:none;font-weight:600;opacity:.85}
.nav-link:hover,.nav-link.active{opacity:1}
.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn.small{padding:10px 14px;font-size:.95rem}
.btn-primary{background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500));color:#fff;box-shadow:var(--shadow)}
.btn-ghost{background:#fff;border:1px solid rgba(0,0,0,.08);color:var(--ink)}
#nav-toggle{display:none}
.burger{display:none;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

@media(max-width:920px){
  .burger{display:block}
  .nav{position:fixed;inset:68px 0 auto 0;background:#fff;border-top:1px solid rgba(0,0,0,.06);flex-direction:column;padding:16px 20px;transform:translateY(-120%);transition:.3s}
  #nav-toggle:checked ~ .burger + .nav{transform:translateY(0)}
}

/* --- Sections --- */
.section{padding:96px 0}
.section.no-pad{padding:0}
.section.alt{background:var(--alt)}
.section-title{font-family:'Titillium Web',sans-serif;font-size:36px;margin:0 0 10px}
.section-subtitle,.lead{color:#657089;margin-top:0}

/* --- Hero 3D canvas --- */
.hero{position:relative;overflow:hidden;background:radial-gradient(80% 60% at 50% 0%, rgba(34,85,199,.16), transparent 60%)}
.hero-3d{position:absolute;inset:0;z-index:0}
#heroCanvas{display:block;width:100%;height:100%}
.hero-content{position:relative;z-index:1;min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.headline{font-size:46px;line-height:1.1;margin:0 0 12px}
.subhead{color:#000000;font-size:18px;margin:0 0 22px}
.badges{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.badges i{color:var(--brand-blue-700);margin-right:8px}

/* --- Cards & grids --- */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
@media(max-width:960px){.grid-2{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;transition:transform .25s, box-shadow .25s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(0,0,0,.12)}
.service-card i{font-size:26px;color:var(--brand-blue-700)}
@media(max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.ticks i{color:var(--brand-blue-700);margin-right:8px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.meta{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.meta li{display:flex;justify-content:space-between}

/* --- Features --- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
@media(max-width:960px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr}}

/* --- Blogs --- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.blog-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:10px}
.blog-card .btn{align-self:flex-start}
@media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

/* --- Careers --- */
.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.job-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
@media(max-width:900px){.jobs{grid-template-columns:1fr}}

/* --- Contact --- */
.contact-form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.contact-form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.contact-form label{display:grid;gap:8px}
.contact-form input,.contact-form textarea{padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.1);font:inherit}
.contact-form .form-note{color:#657089;margin-top:10px}
@media(max-width:720px){.contact-form .row{grid-template-columns:1fr}}

/* --- Footer --- */
.site-footer{background:#0e1629;color:#c7d1ea;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:30px 0}
.site-footer .brand-name{color:#fff}
.linklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.linklist a{color:#c7d1ea;text-decoration:none}
.linklist a:hover{text-decoration:underline}
.socials a{color:#c7d1ea;margin-right:10px}
.bottom{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding:14px 0;color:#9aaccf}

/* --- Micro-interactions --- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
[data-elevate].elevated{box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
}


/* ===== Enhanced polish ===== */
.site-header{border-bottom:1px solid rgba(0,0,0,.06); box-shadow: 0 2px 20px rgba(0,0,0,.04)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.service-card:hover .fa, .feature:hover h3{filter:brightness(1.05)}
.hero::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 10%, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none;
}

/* Toggle button */
.btn.toggle{margin-right:8px}

/* ===== Dark mode ===== */
body.dark{
  color: var(--text-100);
  background: #0a0f1c;
}
body.dark .site-header{background: rgba(10,15,28,.78); border-color: rgba(255,255,255,.06)}
body.dark .brand-name{color: var(--text-100)}
body.dark .nav-link{color: var(--text-100)}
body.dark .btn-ghost{background:rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--text-100)}
body.dark .section.alt{background: #0f1a2e}
body.dark .card, body.dark .service-card, body.dark .feature, body.dark .blog-card, body.dark .job-card, body.dark .contact-form {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-100);
}
body.dark .section-subtitle, body.dark .lead, body.dark .contact-form .form-note{color: var(--text-70)}
body.dark .site-footer{background:#060a14;color:#99a9cc}
body.dark .linklist a, body.dark .socials a{color:#9fb2d6}

/* Premium text width control for hero */
.hero-content .headline, .hero-content .subhead { max-width: 780px }


/* Improved subhead readability (bright + shadow) */
body.dark .subhead {
  color: #ffffff;           /* 🔹 Dark theme ke liye grey */
  text-shadow: none;        /* optional: shadow hata sakte ho */
}


/* Theme-aware SVG logo swap */
.brand-logo{ height:28px; width:auto; display:block }


/* v6: Theme-specific logos (light keeps original, dark uses white logo) */
.brand-logo{ height:28px; width:auto; display:block }


/* v6.1: Theme-specific logos (exact filenames) */
.brand-logo{ height:28px; width:auto; display:block }


/* ===== About (Premium) ===== */
.about-premium{
  background: radial-gradient(70% 60% at 20% 10%, rgba(34,85,199,.10), transparent 50%),
              radial-gradient(70% 60% at 100% 0%, rgba(108,223,234,.10), transparent 60%);
  color: var(--ink);
}
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center }
@media (max-width: 960px){ .about-grid{ grid-template-columns:1fr; gap:28px } }

.about-media{ perspective:1200px; will-change:transform }
.about-art{
  position:relative; border-radius:24px; overflow:hidden; isolation:isolate;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  transform-style:preserve-3d;
}
.about-art::before{
  /* subtle inner gradient frame */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode:soft-light; pointer-events:none;
}
.about-art img{ display:block; width:100%; height:auto; transform:translateZ(30px) }
.about-art .glow{
  content:""; position:absolute; inset:-25% -25% auto -25%; height:60%;
  background: radial-gradient(closest-side, rgba(108,223,234,.35), rgba(108,223,234,0));
  filter: blur(24px); transform: translateZ(10px); pointer-events:none;
  animation: aboutGlow 6s ease-in-out infinite alternate;
}
@keyframes aboutGlow{ from{transform:translate3d(-6%,2%,0)} to{transform:translate3d(6%,-4%,0)} }

.ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.ring-1{ width:86%; height:86%; left:7%; top:7%;
  background: conic-gradient(from 0deg, rgba(34,85,199,.22), rgba(108,223,234,.22), rgba(34,85,199,.22));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
  animation: spin 28s linear infinite;
}
.ring-2{ width:70%; height:70%; left:15%; top:15%;
  background: conic-gradient(from 90deg, rgba(255,255,255,.18), rgba(108,223,234,.18), rgba(255,255,255,.18));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
  animation: spin 18s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg) } }

.about-copy .kicker{
  display:inline-block; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; font-size:12px; color: var(--brand-cyan-300); margin-bottom:8px;
}
.about-copy .title{
  font-family:'Titillium Web',sans-serif; font-size:36px; margin:0 0 12px;
}
.about-copy p{ color:#657089; margin:0 0 12px }

.about-premium .ticks{ list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:8px }
.about-premium .ticks li{ display:flex; align-items:flex-start; gap:10px }
.about-premium .ticks i{ color:var(--brand-blue-700); margin-top:2px }

.about-premium .cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* reveal from below */
.about-premium.reveal{ opacity:0; transform: translateY(18px); }
.about-premium.reveal.visible,
.about-premium.reveal.active{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease }

/* prefers-reduced-motion: disable fancy effects */
@media (prefers-reduced-motion: reduce){
  .about-art .glow, .ring-1, .ring-2{ animation:none }
}

body.dark .about-premium .title,
body.dark .about-section .section-title { color: var(--text-100); text-shadow: 0 2px 8px rgba(0,0,0,.45); }
body.dark .about-premium .kicker,
body.dark .about-section .section-tag { color: var(--brand-cyan-300); }


/* ===================================================================
   OUR SERVICES (Premium) — full CSS
   =================================================================== */

/* Section background + star/dot overlay */
.services-premium{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--brand-blue-700, #2255C7) 0%, var(--brand-blue-500, #4392D6) 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.services-premium::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.05) 1.2px, transparent 1.2px) 0 0/26px 26px;
  opacity:.45;
}

/* Head */
.services-premium .svc-head .kicker{
  letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--brand-cyan-300, #6CDFEA)
}
.services-premium .svc-head .title{
  font-family:'Titillium Web',sans-serif; font-weight:800; color:#fff;
  margin:6px 0 8px; font-size:clamp(28px,4vw,44px);
}
.services-premium .svc-head .lead{ color:rgba(255,255,255,.9) }

/* Grid & staggered rows */
.svc-grid{ max-width:980px; margin:28px auto 0; position:relative }
.svc-row{
  display:grid; grid-template-columns:1fr 64px 1fr;
  gap:18px; align-items:center; margin:16px 0; position:relative;
  opacity:0; transform:translateY(20px) scale(.98);
}
.services-premium.reveal.visible .svc-row,
.services-premium.reveal.active  .svc-row{ animation: svc-rise .75s cubic-bezier(.2,.7,.2,1) forwards; }
.svc-row:nth-child(1){ animation-delay: .00s }
.svc-row:nth-child(2){ animation-delay: .06s }
.svc-row:nth-child(3){ animation-delay: .12s }
.svc-row:nth-child(4){ animation-delay: .18s }
.svc-row:nth-child(5){ animation-delay: .24s }
.svc-row:nth-child(6){ animation-delay: .30s }
@keyframes svc-rise{ to{ opacity:1; transform:none } }

/* Pills */
.svc-pill{
  background:#f2f6ff; color:var(--ink, #0b1220);
  border-radius:999px; padding:16px 26px; font-weight:700; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.svc-pill:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(0,0,0,.18);
  background:#fff;
}

/* Center orb with spinning ring (accepts IMG or <i> icon) */
.svc-mid{
  width:64px; height:64px; border-radius:50%;
  position:relative; display:grid; place-items:center; margin:0 auto; overflow:hidden;
  background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.35));
  box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.svc-mid .svc-icon{              /* image icon */
  width:28px; height:28px; object-fit:contain; z-index:2; display:block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.svc-mid i{                      /* Font Awesome fallback */
  color:#cfeaff; font-size:22px; position:relative; z-index:2;
}

/* spinning conic ring */
.svc-mid::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:1;
  background: conic-gradient(from 0deg, rgba(108,223,234,.45), rgba(34,85,199,.45), rgba(108,223,234,.45));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: svc-spin 14s linear infinite;
}
@keyframes svc-spin{ to{ transform: rotate(360deg) } }

/* connectors (top & bottom segments) */
.svc-mid::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); width:2px; pointer-events:none;
  /* two backgrounds: top segment + bottom segment */
  background:
    linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0)) top center / 2px 22px no-repeat,
    linear-gradient(to top,    rgba(255,255,255,.35), rgba(255,255,255,0)) bottom center / 2px 22px no-repeat;
  inset: 0; /* allow both segments via bg-size */
}
.svc-row:first-child .svc-mid::after{ background-size: 0 0, 2px 22px; }   /* hide top segment on first row */
.svc-row:last-child  .svc-mid::after{ background-size: 2px 22px, 0 0; }   /* hide bottom segment on last row */

/* Responsive */
@media (max-width: 860px){
  .svc-row{ grid-template-columns:1fr; gap:12px }
  .svc-mid{ order:-1 } /* icon up top on mobile */
  .svc-mid::after{ display:none } /* connectors off on mobile */
}

/* Dark mode */
body.dark .services-premium{
  background:
    radial-gradient(90% 80% at 20% 8%, rgba(108,223,234,.08), transparent 60%),
    linear-gradient(180deg, #07111e 0%, #0a0f1c 100%);
  color: var(--text-100, #E6F0F7);
}
body.dark .services-premium::before{ opacity:.25 }
body.dark .svc-pill{
  background: rgba(255,255,255,.06);
  color: var(--text-100, #E6F0F7);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}
body.dark .svc-pill:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.36);
}
body.dark .svc-mid{
  background: radial-gradient(70% 70% at 50% 50%, rgba(255,255,255,.04), rgba(255,255,255,.08));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .svc-mid::before{ animation: none }
}


/* ===================================================================
   FEATURE POINT (Premium) – matches screenshot
   =================================================================== */
.featurepoint-premium{
  position:relative; overflow:hidden;
  background: #0e1c2a; /* deep navy like screenshot */
  color: var(--text-100, #E6F0F7);
}

/* layout */
.fp-wrap{ display:grid; grid-template-columns:1.05fr 1.35fr; gap:36px; align-items:start }
@media (max-width: 1024px){ .fp-wrap{ grid-template-columns:1fr; gap:28px } }

.kicker{ letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--brand-cyan-300,#6CDFEA) }
.featurepoint-premium .title{
  font-family:'Titillium Web',sans-serif; font-weight:800; margin:6px 0 8px;
  font-size: clamp(28px, 4vw, 44px); color:#D8E8F8;
}
.featurepoint-premium .lead{ color: rgba(216,232,248,.85); margin: 6px 0 18px; }

/* left media card */
.fp-media{ perspective:1200px }
.fp-art{
  position:relative; border-radius:18px; overflow:hidden; isolation:isolate;
  padding:14px; background: #0b1826; box-shadow: 0 22px 56px rgba(0,0,0,.4);
}
.fp-art img{
  display:block; width:100%; height:auto; border-radius:14px; object-fit:cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.fp-art::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  mix-blend-mode:soft-light;
}
.fp-glow{
  content:""; position:absolute; inset:-28% -28% auto -28%; height:58%;
  background: radial-gradient(closest-side, rgba(108,223,234,.28), transparent 70%);
  filter: blur(26px); pointer-events:none; animation: fpGlow 7s ease-in-out infinite alternate;
}
@keyframes fpGlow{ from{ transform: translate3d(-4%,3%,0)} to{ transform: translate3d(6%,-5%,0)} }

/* cards grid */
.fp-grid{
  display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap:18px;
}
.fp-card{
  display:grid; grid-template-columns:64px 1fr; align-items:center; gap:14px;
  padding:18px; border-radius:14px; position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  transform: translateY(14px) scale(.985); opacity:0;
}
.featurepoint-premium.reveal.visible .fp-card,
.featurepoint-premium.reveal.active  .fp-card{
  animation: fpCardIn .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.fp-card:nth-child(1){ animation-delay:.00s }
.fp-card:nth-child(2){ animation-delay:.06s }
.fp-card:nth-child(3){ animation-delay:.12s }
.fp-card:nth-child(4){ animation-delay:.18s }
.fp-card:nth-child(5){ animation-delay:.24s }

@keyframes fpCardIn{ to{ opacity:1; transform:none } }

.fp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0,0,0,.45);
}

.fp-card.span2{ grid-column:1 / -1 }

/* badge (icon container) */
.fp-badge{
  width:64px; height:64px; border-radius:14px; display:grid; place-items:center; position:relative; overflow:hidden;
  background: radial-gradient(70% 70% at 50% 50%, rgba(15,23,42,.42), rgba(15,23,42,.6));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35);
}
.fp-badge img{
  width:28px; height:28px; object-fit:contain; z-index:2; display:block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
/* subtle animated ring (premium feel) */
.fp-badge::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:1;
  background: conic-gradient(from 0deg, rgba(108,223,234,.45), rgba(34,85,199,.45), rgba(108,223,234,.45));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: fpRing 16s linear infinite;
}
@keyframes fpRing{ to{ transform: rotate(360deg) } }

/* text */
.fp-text h3{ margin:0; font-weight:800; font-size:18px; line-height:1.2; color:#fff }
.fp-text p{ margin:6px 0 0; font-size:14px; color: rgba(255,255,255,.78) }

/* responsive */
@media (max-width: 640px){
  .fp-grid{ grid-template-columns:1fr }
  .fp-card.span2{ grid-column:auto }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .fp-glow, .fp-badge::before{ animation:none }
}


/* ================================================================
   FEATURE POINT — Animation Upgrade (drop-in overrides)
   ================================================================ */

/* 1) Left media: premium pop-in + gentle float */
.featurepoint-premium .fp-art{
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.featurepoint-premium.reveal.visible .fp-art,
.featurepoint-premium.reveal.active .fp-art{
  animation: fpMediaIn .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fpMediaIn{
  0%{
    opacity:0;
    transform: translateY(18px) scale(.965) rotateX(-6deg);
    filter: blur(4px) saturate(.9);
  }
  100%{
    opacity:1;
    transform: none;
    filter: none;
  }
}
/* subtle float on the image for a living feel */
.featurepoint-premium .fp-art img{
  transform-origin: 50% 65%;
  animation: fpFloat 10s ease-in-out 1.2s infinite alternate;
}
@keyframes fpFloat{
  from { transform: translateY(0) scale(1) }
  to   { transform: translateY(-6px) scale(1.005) }
}

/* 2) Cards: depth + blur entrance (stagger remains same) */
.featurepoint-premium .fp-card{
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transform: translateY(26px) scale(.94) rotateX(8deg);
  opacity:0; filter: blur(6px) saturate(.9);
}
@keyframes fpCardIn{ to{ opacity:1; transform:none; filter:none } } /* keep same name */

/* 3) Card hover: soft lift + shimmer sweep */
.featurepoint-premium .fp-card{ position:relative; overflow:hidden }
.featurepoint-premium .fp-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(0,0,0,.45);
}
.featurepoint-premium .fp-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%,
             rgba(255,255,255,.10) 14%, transparent 28%);
  transform: translateX(-160%);
  transition: transform .8s cubic-bezier(.22,.7,.2,1);
}
.featurepoint-premium .fp-card:hover::after{ transform: translateX(160%) }
.featurepoint-premium .fp-card:active{ transform: translateY(-1px) scale(.997) }

/* 4) Badge: faster ring + soft pulse glow */
.featurepoint-premium .fp-badge{ transition: transform .25s ease, box-shadow .25s ease }
.featurepoint-premium .fp-badge::before{ animation: fpRing 12s linear infinite } /* was 16s */
.featurepoint-premium .fp-badge::after{
  content:""; position:absolute; inset:12%; border-radius:inherit; z-index:0;
  background: radial-gradient(circle at 50% 60%, rgba(108,223,234,.22), transparent 70%);
  filter: blur(12px); opacity:.18; transform: scale(.96);
  animation: badgePulse 3.2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{ opacity:.16; transform: scale(.96) }
  50%    { opacity:.36; transform: scale(1.04) }
}
.featurepoint-premium .fp-card:hover .fp-badge{
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 14px 28px rgba(0,0,0,.45);
}

/* 5) Title: subtle fade-up */
.featurepoint-premium .title{
  opacity:0; transform: translateY(10px);
  animation: fpTitle .6s cubic-bezier(.2,.7,.2,1) .05s both;
}
@keyframes fpTitle{ to{ opacity:1; transform:none } }

/* 6) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .featurepoint-premium .fp-art,
  .featurepoint-premium .fp-card,
  .featurepoint-premium .title{ animation:none !important; opacity:1; transform:none; filter:none }
  .featurepoint-premium .fp-art img,
  .featurepoint-premium .fp-badge::before,
  .featurepoint-premium .fp-badge::after{ animation:none !important }
}


/* =========================================================
   HALL OF FAME — clean + advanced animations (design same)
   ========================================================= */

/* Section bg */
.hof-premium{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg, var(--brand-blue-700,#2255C7) 0%, var(--brand-blue-500,#4392D6) 100%);
  color:#fff; position:relative; overflow:hidden;
}

/* Head */
.hof-premium .hof-head{ text-align:center; max-width:860px; margin:0 auto 18px }
.hof-premium .hof-tag{
  font:700 12px/1 'Inter',sans-serif; letter-spacing:2px; text-transform:uppercase;
  color:var(--brand-cyan-300,#6CDFEA); display:inline-block; margin-bottom:8px; opacity:0; transform:translateY(8px)
}
.hof-premium .hof-title{
  font-family:'Titillium Web',sans-serif; font-weight:800; margin:0 0 8px;
  font-size:clamp(28px,3.6vw,40px); color:#fff; opacity:0; transform:translateY(8px)
}
.hof-premium .hof-subtitle{
  color:rgba(255,255,255,.92); font-size:14px; line-height:1.6; margin:0 auto 26px;
  opacity:0; transform:translateY(8px)
}

/* Animate header */
.hof-premium.reveal.visible .hof-tag,
.hof-premium.reveal.active  .hof-tag{ animation:hofHead .45s ease-out .02s both }
.hof-premium.reveal.visible .hof-title,
.hof-premium.reveal.active  .hof-title{ animation:hofHead .55s ease-out .08s both }
.hof-premium.reveal.visible .hof-subtitle,
.hof-premium.reveal.active  .hof-subtitle{ animation:hofHead .60s ease-out .16s both }
@keyframes hofHead{ to{ opacity:1; transform:none } }

/* White panel (center card) */
.hof-card{
  max-width:min(1080px, 92vw); margin:0 auto; background:#fff; color:#0b1220;
  border-radius:14px; padding:30px 24px;
  box-shadow:0 14px 50px rgba(0,0,0,.18);
  opacity:0; transform: translateY(14px) scale(.985);
  clip-path: polygon(0 0,100% 0,100% 0,0 0);  /* mask wipe from top */
  will-change: transform, opacity, clip-path, filter;
}
.hof-premium.reveal.visible .hof-card,
.hof-premium.reveal.active  .hof-card{
  animation: hofPanelIn .7s cubic-bezier(.2,.7,.2,1) .06s both;
}
@keyframes hofPanelIn{
  60%{ clip-path: polygon(0 0,100% 0,100% 96%,0 96%); opacity:.98; transform:none }
  100%{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity:1 }
}

/* Grid */
.hof-grid{
  display:grid; gap:28px 16px;
  grid-template-columns:repeat(5, minmax(150px,1fr));
  list-style:none; margin:0; padding:0; justify-items:center; align-items:center;
}
@media (max-width:1024px){ .hof-grid{ grid-template-columns:repeat(4, minmax(140px,1fr)) } }
@media (max-width:768px){  .hof-grid{ grid-template-columns:repeat(3, minmax(130px,1fr)) } }
@media (max-width:520px){  .hof-grid{ grid-template-columns:repeat(2, minmax(120px,1fr)) } }

/* Items */
.hof-item{
  width:100%; text-align:center; display:flex; flex-direction:column; gap:8px;
  padding:6px 8px; border-radius:10px; position:relative; overflow:hidden;
  opacity:0; transform: translateY(18px) scale(.94) rotateX(6deg); filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  will-change: transform, opacity, filter;
}

/* Advanced logo pop (column-wise stagger) */
.hof-premium.reveal.visible .hof-item,
.hof-premium.reveal.active  .hof-item{
  animation: hofLogoIn .55s cubic-bezier(.22,.72,.22,1) var(--d,0s) both;
}
@keyframes hofLogoIn{
  70%{ transform: translateY(-2px) scale(1.01) }
  100%{ opacity:1; transform:none; filter:none }
}
/* 5-col */
.hof-item:nth-child(5n+1){ --d: .00s }
.hof-item:nth-child(5n+2){ --d: .05s }
.hof-item:nth-child(5n+3){ --d: .10s }
.hof-item:nth-child(5n+4){ --d: .15s }
.hof-item:nth-child(5n+5){ --d: .20s }
/* 4-col, 3-col, 2-col responsive staggering */
@media (max-width:1024px){
  .hof-item:nth-child(4n+1){ --d: .00s } .hof-item:nth-child(4n+2){ --d: .06s }
  .hof-item:nth-child(4n+3){ --d: .12s } .hof-item:nth-child(4n+4){ --d: .18s }
}
@media (max-width:768px){
  .hof-item:nth-child(3n+1){ --d: .00s } .hof-item:nth-child(3n+2){ --d: .07s } .hof-item:nth-child(3n+3){ --d: .14s }
}
@media (max-width:520px){
  .hof-item:nth-child(2n+1){ --d: .00s } .hof-item:nth-child(2n+2){ --d: .08s }
}

/* Logo image (color from start) */
.hof-item img{
  height:40px; width:auto; max-width:140px; object-fit:contain; display:block; margin:0 auto;
  transition: transform .22s ease, filter .22s ease;
}

/* Label */
.hof-item span{ font-weight:600; font-size:12.5px; line-height:1.25; color:#334155 }

/* Hover: micro-lift + diagonal shimmer */
.hof-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(15,23,42,.06) 18%, transparent 36%);
  transform: translateX(-160%); transition: transform .85s cubic-bezier(.22,.7,.2,1);
}
.hof-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  background: rgba(15,23,42,.04);
}
.hof-item:hover::after{ transform: translateX(160%) }
.hof-item:hover img{ transform: translateY(-1px); filter: saturate(1.08) brightness(1.02) }

/* Dark mode */
body.dark .hof-premium{ background:linear-gradient(180deg,#0a1730 0%, #0e1c2a 100%) }
body.dark .hof-card{
  background:rgba(255,255,255,.05); color:#E6F0F7;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 46px rgba(0,0,0,.36);
}
body.dark .hof-item span{ color:#c9d6ea }
body.dark .hof-item:hover{ background:rgba(255,255,255,.06) }
body.dark .hof-item::after{
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 18%, transparent 36%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hof-card, .hof-item, .hof-premium .hof-tag, .hof-premium .hof-title, .hof-premium .hof-subtitle{
    animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important;
  }
}


/* =========================================================
   OUR APPROACH — premium animated flow (FINAL)
   ========================================================= */
.approach-premium{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 70% at 70% -20%, rgba(108,223,234,.10), transparent 60%),
    radial-gradient(80% 60% at 10% 0%, rgba(34,85,199,.18), transparent 65%),
    #0e1c2a;
  color: var(--text-100,#E6F0F7);
}
.approach-premium::before{
  /* subtle matrix speckles */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px;
}

.ap-head{ text-align:center; max-width:860px; margin:0 auto; }
.approach-premium .title{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  font-size:clamp(28px,4vw,44px); margin:8px 0 6px; color:#fff;
}
.approach-premium .lead{ color:rgba(216,232,248,.85) }

/* Stage */
.ap-stage{
  position:relative; max-width:1000px; height:700px; margin:28px auto 0;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.35));
}

/* Connectors (SVG) */
.ap-lines{ position:absolute; inset:0; width:100%; height:100% }
.ap-path{
  stroke: rgba(108,223,234,.9);
  stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  opacity:.9;
}
/* Aurora overlay clone (animated in) */
.ap-aurora{
  stroke: rgba(108,223,234,.85);
  stroke-width: 8;
  fill: none;
  filter: blur(8px);
  opacity: 0;
}
.approach-premium.reveal.visible .ap-aurora,
.approach-premium.reveal.active  .ap-aurora{
  animation: auroraPulse 2.2s ease-out .18s both, auroraBreathe 6s ease-in-out 2.4s infinite alternate;
}
@keyframes auroraPulse{ 0%{opacity:0} 40%{opacity:.6} 100%{opacity:.12} }
@keyframes auroraBreathe{ from{opacity:.08} to{opacity:.16} }

.ap-mote{ opacity:.9 }

/* Nodes */
.ap-node{
  --s: 150px; /* size */
  position:absolute;
  left: calc(var(--x) - (var(--s)/2));
  top:  calc(var(--y) - (var(--s)/2));
  width:var(--s); height:var(--s); border-radius:50%;
  display:grid; place-items:center; isolation:isolate;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    radial-gradient(70% 70% at 50% 50%, rgba(108,223,234,.16), rgba(15,23,42,.65)),
    /* moving sheen layer */
    linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
  background-size: auto, auto, 220% 100%;
  background-position: center, center, -120% 0;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 40px rgba(0,0,0,.35);
  transform: translateY(14px) scale(.96);
  opacity:0;
}

/* rotating energy ring */
.ap-node::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:1;
  background: conic-gradient(from 0deg, rgba(108,223,234,.5), rgba(34,85,199,.5), rgba(108,223,234,.5));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  opacity:.9; transform: rotate(0deg);
}

/* icon */
.ap-node img{ width:38px; height:38px; object-fit:contain; z-index:2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)) }

/* label */
.ap-node::after{
  content: attr(data-label);
  position:absolute; left:50%; bottom:-28px; transform:translateX(-50%);
  font:700 12.5px/1.2 'Inter',sans-serif; letter-spacing:.2px; color:#cfe3ff; white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Appear/stagger + sheen sweep */
.approach-premium.reveal.visible .ap-path,
.approach-premium.reveal.active  .ap-path{
  animation: apDraw 1.8s cubic-bezier(.2,.7,.2,1) .2s both;
}
@keyframes apDraw{ to{ stroke-dashoffset:0 } }

.approach-premium.reveal.visible .ap-node,
.approach-premium.reveal.active  .ap-node{
  animation: apPop .65s cubic-bezier(.22,.72,.22,1) var(--d, .3s) both,
             apSheen 2.2s ease-out calc(var(--d,.3s) + .15s) 1;
}
@keyframes apPop{
  70%{ transform: translateY(-2px) scale(1.02) }
  100%{ transform:none; opacity:1 }
}
@keyframes apSheen{ to{ background-position: center, center, 120% 0 } }

/* Continuous ring & soft pulse once visible */
.approach-premium.reveal.visible .ap-node::before,
.approach-premium.reveal.active  .ap-node::before{
  animation: apRing 14s linear infinite;
}
@keyframes apRing{ to{ transform: rotate(360deg) } }

.approach-premium.reveal.visible .ap-node img,
.approach-premium.reveal.active  .ap-node img{
  animation: apPulse 2.4s ease-in-out .4s 1;
}
@keyframes apPulse{
  0%{ transform:scale(1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)) }
  40%{ transform:scale(1.06) }
  100%{ transform:scale(1) }
}

/* Sparks (burst on reveal) */
.ap-spark{
  position:absolute; top:50%; left:50%;
  width:4px; height:4px; border-radius:50%;
  background: radial-gradient(circle, #6CDFEA, #4392D6);
  box-shadow: 0 0 12px rgba(108,223,234,.8);
  pointer-events:none; opacity:0;
  transform: translate(-50%,-50%) scale(.4);
}
.ap-spark.run{ animation: apSpark .7s ease-out forwards }
@keyframes apSpark{
  0%  { opacity:1; transform: translate(-50%,-50%) scale(.4) }
  80% { opacity:1 }
  100%{ opacity:0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(.9) }
}

/* Hover */
.ap-node:hover{ transform:translateY(-4px) scale(1.02); box-shadow: 0 26px 60px rgba(0,0,0,.45) }

/* Responsive stack */
@media (max-width: 860px){
  .ap-stage{ height:680px }
  .ap-node{ --s: 132px; left:calc(50% - var(--s)/2) } /* center nodes horizontally */
}

/* Dark mode fine-tuning */
body.dark .approach-premium{ background:#0a1421 }
body.dark .ap-node::after{ color:#e2f2ff }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ap-path, .ap-aurora, .ap-node::before, .ap-node, .ap-node img{ animation:none !important }
  .ap-aurora{ opacity:0 !important }
  .ap-path{ stroke-dashoffset:0 }
  .ap-node{ opacity:1; transform:none }
  .ap-spark{ display:none !important }
}

/* =========================================================
   INDUSTRY STANDARDS — Hyper single-line marquee (premium)
   ========================================================= */
.standards-hyper{
  position:relative;
  padding:56px 0 64px;
  color:#E6F0F7;
  background:
    radial-gradient(80% 60% at 70% -10%, rgba(108,223,234,.10), transparent 60%),
    radial-gradient(70% 55% at 10% 0%, rgba(34,85,199,.16), transparent 65%),
    #0e1c2a;
}
.standards-hyper .std-title{
  text-align:center;
  font-family:'Titillium Web',sans-serif;
  font-weight:800;
  margin:0 0 16px;
  font-size:clamp(22px,3.4vw,36px);
  letter-spacing:.2px;
  color:#fff;
}

/* Belt: glass card container */
.standards-hyper .std-belt{
  position:relative;
  max-width:min(1180px, 94vw);
  margin:0 auto;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;              /* hide marquee overflow */
}

/* Edge fades so track disappears softly on sides */
.standards-hyper .std-belt::before,
.standards-hyper .std-belt::after{
  content:""; position:absolute; top:0; bottom:0; width:110px; pointer-events:none; z-index:4;
}
.standards-hyper .std-belt::before{
  left:0;
  background:linear-gradient(90deg, #0e1c2a 0%, rgba(14,28,42,.0) 100%);
  mix-blend-mode:multiply; opacity:.92;
}
.standards-hyper .std-belt::after{
  right:0;
  background:linear-gradient(270deg, #0e1c2a 0%, rgba(14,28,42,.0) 100%);
  mix-blend-mode:multiply; opacity:.92;
}

/* Scanner highlight */
.standards-hyper .std-belt .scanner{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 45%,
      rgba(255,255,255,.26) 50%,
      rgba(255,255,255,.18) 55%,
      rgba(255,255,255,0) 100%);
  width:34%; left:-42%;
  filter: blur(2px);
  animation: std-scan 8s linear infinite;
}
@keyframes std-scan{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(320%) }
}

/* Single-line track */
.standards-hyper .logos{
  display:flex;
  flex-wrap:nowrap;              /* important: one line only */
  align-items:center;
  gap:26px;
  list-style:none;
  padding:0; margin:0;
  width:max-content;             /* size equals content */
  will-change:transform;
  animation: std-scroll var(--speed,28s) linear infinite;
  animation-play-state: paused;  /* JS turns it on when visible */
}

/* one loop = shift by exactly one set width (set via --shift in JS) */
@keyframes std-scroll{
  from{ transform: translateX(0) }
  to  { transform: translateX(calc(-1 * var(--shift, 50%))) }
}

/* Logo tile */
.standards-hyper .tile{
  position:relative; z-index:2;
  flex:0 0 auto;
  width: clamp(186px, 23vw, 260px);
  height: clamp(84px, 11vw, 120px);
  display:grid; place-items:center;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.standards-hyper .tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,.24);
}
.standards-hyper .tile img{
  max-width:72%; max-height:54px; object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
  opacity:.96; transition: transform .18s ease;
}
.standards-hyper .tile:hover img{ transform: translateY(-1px) }

/* Spotlight winner (center tile) */
.standards-hyper .tile.is-hot{
  box-shadow: 0 18px 54px rgba(67,146,214,.35), 0 0 0 1px rgba(67,146,214,.40) inset;
  background: linear-gradient(180deg, #fff, #f7fbff);
}
.standards-hyper .tile.is-hot::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid rgba(108,223,234,.45);
  opacity:.0; pointer-events:none;
  animation: std-ripple 1.8s ease-out infinite;
}
@keyframes std-ripple{
  0%{ opacity:.20; transform:scale(.96) }
  70%{ opacity:.0; transform:scale(1.06) }
  100%{ opacity:0; transform:scale(1.06) }
}

/* Dark mode refinements */
body.dark .standards-hyper .std-belt{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}
body.dark .standards-hyper .tile{
  background:rgba(255,255,255,.98);
  border-color:rgba(0,0,0,.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .standards-hyper .logos{ animation:none !important; transform:none !important }
  .standards-hyper .std-belt .scanner{ display:none }
  .standards-hyper .tile.is-hot::after{ display:none }
}


/* =========================================================
   CONTACT — Premium map + form with micro-interactions
   ========================================================= */
.contact-premium{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 60% at 75% -10%, rgba(108,223,234,.10), transparent 60%),
    radial-gradient(70% 55% at 10% 0%, rgba(34,85,199,.14), transparent 66%),
    #fff;
  color: var(--ink, #0b1220);
  padding: 72px 0 90px;
}
body.dark .contact-premium{ background:#0a0f1c; color:var(--text-100,#E6F0F7) }

.cp-head{ text-align:center; margin-bottom:22px }
.cp-title{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  margin:0 0 6px; font-size: clamp(28px,4vw,44px); color:inherit;
}
.cp-sub{ margin:0; color:#657089 }
body.dark .cp-sub{ color:var(--text-70,#B7C7D6) }

.cp-grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:22px;
  max-width: min(1100px, 96vw); margin:0 auto;
}
@media (max-width: 980px){ .cp-grid{ grid-template-columns:1fr; } }

/* Map card */
.map-card{
  background: rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px; overflow:hidden; position:relative;
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
  min-height: 420px;
}
body.dark .map-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 58px rgba(0,0,0,.35);
}
.map-card iframe{ display:block; width:100%; height:100%; border:0 }

/* Pulsing pin */
.map-pin{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-70%);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  opacity:0; transform-origin: 50% 100%;
}
.contact-premium.reveal.visible .map-pin,
.contact-premium.reveal.active  .map-pin{
  animation: pinDrop .9s cubic-bezier(.2,.8,.2,1) .25s forwards,
             pinBreathe 3.2s ease-in-out 1.1s infinite;
}
@keyframes pinDrop{ 0%{ opacity:0; transform:translate(-50%,-90%) scale(.92) } 100%{ opacity:1; transform:translate(-50%,-70%) scale(1) } }
@keyframes pinBreathe{ 0%,100%{ transform:translate(-50%,-70%) scale(1) } 50%{ transform:translate(-50%,-72%) scale(1.03) } }

/* Form card */
.form-card{
  background:#fff; color:inherit;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px; padding:18px;
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
}
body.dark .form-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color:var(--text-100,#E6F0F7);
  box-shadow: 0 22px 60px rgba(0,0,0,.36);
}
.form-card .row{ display:grid; gap:12px; margin-bottom:12px }
.form-card .row.two{ grid-template-columns:1fr 1fr }
@media (max-width:640px){ .form-card .row.two{ grid-template-columns:1fr } }

.field{ display:grid; gap:8px; }
.field > span{ font-weight:700; font-size:12.5px; color:#657089 }
body.dark .field > span{ color:var(--text-70,#B7C7D6) }
.field input, .field textarea{
  width:100%; border-radius:12px; border:1px solid rgba(0,0,0,.1); font:inherit;
  padding:12px 14px; background:#fff; color:inherit; outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.field textarea{ resize:vertical; min-height:120px }
body.dark .field input, body.dark .field textarea{
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  color:var(--text-100,#E6F0F7);
}
.field input:focus, .field textarea:focus{
  border-color: rgba(67,146,214,.8);
  box-shadow: 0 0 0 3px rgba(67,146,214,.18), 0 10px 24px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Staggered field reveal */
.form-card .field{ opacity:0; transform: translateY(8px) }
.contact-premium.reveal.visible .form-card .field,
.contact-premium.reveal.active  .form-card .field{
  animation: fieldIn .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.form-card .row.two .field:nth-child(1){ animation-delay:.18s }
.form-card .row.two .field:nth-child(2){ animation-delay:.26s }
.form-card .row + .row .field:nth-child(1){ animation-delay:.34s }
.form-card .row + .row .field:nth-child(2){ animation-delay:.42s }
.form-card > .field{ animation-delay:.50s }
@keyframes fieldIn{ to{ opacity:1; transform:none } }

/* Send button */
.btn-send{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:56px; border:0; width:100%; margin-top:10px;
  border-radius:999px; cursor:pointer; font-weight:800; letter-spacing:.2px;
  color:#fff; background: linear-gradient(135deg, var(--brand-blue-700,#2255C7), var(--brand-blue-500,#4392D6));
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-send:hover{ transform: translateY(-1px); box-shadow: 0 18px 50px rgba(0,0,0,.24) }
.btn-send:active{ transform: translateY(0) }

.btn-send .btn-progress{
  position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%,
                           rgba(255,255,255,.25) 45%,
                           rgba(255,255,255,.40) 50%,
                           rgba(255,255,255,.25) 55%,
                           rgba(255,255,255,0) 100%);
  transform: translateX(-120%); pointer-events:none;
}
.btn-send .btn-check{
  position:absolute; inset:0; display:grid; place-items:center;
  transform: scale(0); opacity:0;
}

/* states */
.btn-send.is-sending .btn-progress{ animation: btnSweep 1.2s linear infinite }
.btn-send.is-sending .btn-label{ opacity:.7 }
.btn-send.is-done .btn-label{ opacity:0 }
.btn-send.is-done .btn-check{ animation: btnTick .35s ease forwards }
@keyframes btnSweep{ from{ transform:translateX(-120%) } to{ transform:translateX(120%) } }
@keyframes btnTick{ to{ transform:scale(1); opacity:1 } }

/* invalid wiggle */
@keyframes shakeX{
  10%,90%{ transform: translateX(-1px) }
  20%,80%{ transform: translateX(2px) }
  30%,50%,70%{ transform: translateX(-4px) }
  40%,60%{ transform: translateX(4px) }
}
.form-card.is-invalid{ animation: shakeX .35s ease }








/* =========================================================
   FOOTER (Premium)
   ========================================================= */
.footer-premium{
  position:relative; color:#c7d1ea; background:#0d131c; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-premium::before{
  /* soft aurora wash */
  content:""; position:absolute; inset:-30% -10% auto -10%; height:90%;
  background:
    radial-gradient(closest-side at 40% 40%, rgba(108,223,234,.12), transparent 60%),
    radial-gradient(closest-side at 70% 20%, rgba(34,85,199,.10), transparent 65%);
  filter: blur(32px); pointer-events:none; animation: aur 18s ease-in-out infinite alternate;
}
@keyframes aur{ from{ transform: translate3d(-5%,0,0)} to{ transform:translate3d(6%, -4%,0)} }

.footer-premium .foot-grid{
  display:grid; grid-template-columns:1.1fr .9fr 1fr; gap:28px; padding:34px 0 26px;
}
@media (max-width:960px){
  .footer-premium .foot-grid{ grid-template-columns:1fr; text-align:center }
}

/* =======  Desktop-only: MORE distance between columns ======= */
@media (min-width:961px){
  .footer-premium .foot-grid{
    gap: clamp(76px, 7vw, 260px); /* increase spacing between left/center/right */
  }
}

.foot-title{
  margin:0 0 12px; font:700 22px/1 'Titillium Web',sans-serif; color:#fff;
}

/* contact list */
.foot-list{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px }
.foot-list li{ display:flex; align-items:center; gap:10px }
@media (max-width:960px){ .foot-list li{ justify-content:center } }
.foot-list a{ color:#cfe3ff; text-decoration:none }
.foot-list a:hover{ text-decoration:underline }
.foot-list .ico{
  width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)
}
.foot-list .ico svg{ width:16px; height:16px; fill:none; stroke:#9fb2d6; stroke-width:1.8 }
.foot-list .ico svg path{ stroke:#9fb2d6; }

/* socials */
.socials{ display:flex; gap:12px; margin-top:10px }
@media (max-width:960px){ .socials{ justify-content:center } }
.sbtn{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#d9e6ff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sbtn svg{ width:20px; height:20px; fill:#d9e6ff }
.sbtn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.10); box-shadow:0 10px 26px rgba(0,0,0,.35) }

/* brand column */
.brand{ display:grid; justify-items:center; align-content:center; gap:8px; text-align:center }
.brand-logo{ height:44px; width:auto; display:block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) }
.tagline{ margin:6px 0 10px; color:#9fb2d6 }

/* Startup India badge */

.dpiit-logo{
  height: 60px;        /* larger than before */
  width: auto;
  display: block;
  margin-top: 12px;    /* spacing from tagline */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* links */
.links .linklist{
  list-style:none; padding:0; margin:0; display:grid; gap:10px; justify-items:flex-start
}
@media (max-width:960px){ .links .linklist{ justify-items:center } }
.links a{
  color:#d7e6ff; text-decoration:none; font-weight:700; position:relative
}
.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg, #6CDFEA, #2255C7); transition:right .25s ease;
}
.links a:hover::after{ right:0 }

/* bottom bar */
.foot-bottom{ background:#1a212b; color:#aab9d4; border-top:1px solid rgba(255,255,255,.06) }
.foot-bottom p{ margin:0; padding:14px 0; text-align:center }

/* light mode */
body:not(.dark) .footer-premium{ background:#0f1520 }
body:not(.dark) .foot-bottom{ background:#212a36 }

/* optional container (if not already in your global CSS) */
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px }

/* Push QUICK LINKS further to the right on desktop */
@media (min-width: 961px){
  .footer-premium .foot-grid{
    /* first two columns grow, last is auto and sits at the far right */
    grid-template-columns: 1.1fr 1fr auto;
    justify-content: space-between;              /* pushes ends to edges */
    column-gap: clamp(56px, 7vw, 160px);         /* keep your big gap */
  }

  /* align the whole links column to the right */
  .footer-premium .links{
    justify-self: end;
    text-align: right;
  }
  /* right-align the list items inside */
  .footer-premium .links .linklist{
    justify-items: end;
  }
}
/* === Footer layout: center BRAND, push QUICK LINKS to the right (desktop) === */
@media (min-width: 961px){
  .footer-premium .foot-grid{
    /* Left = 1fr, Center = auto width (locked), Right = 1fr  */
    grid-template-columns: 1fr minmax(280px, 420px) 1fr;
    column-gap: clamp(56px, 7vw, 160px); /* big, responsive spacing */
    align-items: start;
    justify-content: center; /* keeps center column perfectly centered */
  }

  /* Left column stays on the left */
  .footer-premium .contact{
    justify-self: start;
    text-align: left;
  }

  /* Center column (Invokesafe + Startup India) dead-center */
  .footer-premium .brand{
    justify-self: center;
    text-align: center; /* ensure logo + badge centered inside */
  }

  /* Right column hugs the right edge */
  .footer-premium .links{
    justify-self: end;
    text-align: right;
  }

  /* Optional: make link items align to right nicely */
  .footer-premium .links .linklist{
    justify-items: end;
  }
}





/* =========================================================
   About (v10 palette) — Scoped Light + Dark (NO navbar impact)
   ========================================================= */

/* You can keep site-wide tokens in main.css.
   About-specific defaults kept local to avoid clashes. */
.about-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* LIGHT defaults (same feel as home) */
  --ap-ink:#0b1220;
  --ap-text-100:#0b1220;
  --ap-text-70:#4d5b70;
  --ap-alt:#f6f8ff;

  --ap-shadow:0 18px 50px rgba(0,0,0,.12);
  --ap-radius:22px;
  --ap-wrapW:1200px;
  --ap-gutterX: clamp(16px, 4vw, 24px);
}

/* ===== Base ===== */
.about-page{font-family:'Inter',sans-serif; color:var(--ap-ink); background:#fff}
.about-page .wrap{max-width:var(--ap-wrapW); margin:0 auto; padding:0 var(--ap-gutterX)}
.about-page img{max-width:100%; display:block}
.about-page a{text-decoration:none; color:inherit}

.about-page .btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 20px; border-radius:999px;
  border:1px solid transparent; box-shadow:var(--ap-shadow);
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500));
  color:#fff; font-weight:600;
}
.about-page .btn.ghost{background:transparent; color:var(--brand-blue-700); border-color:rgba(34,85,199,.2); box-shadow:none}
.about-page .tag{display:inline-block; padding:.45rem .8rem; border-radius:999px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(34,85,199,.08); color:var(--brand-blue-700)}
.about-page .muted{color:var(--ap-text-70)}
.about-page .card{border-radius:var(--ap-radius); background:#fff; box-shadow:var(--ap-shadow)}
.about-page .title{font-weight:800; line-height:1.04; letter-spacing:-.02em; color:var(--ap-text-100)}
.about-page .lead{font-size:clamp(16px,2.6vw,18px); color:#2c3a4d}

/* ===== HERO ===== */
.about-page .ap-hero{position:relative; overflow:hidden; padding:110px 0 70px}
.about-page .ap-hero__backdrop{
  position:absolute; inset:-20%; z-index:-1; filter:blur(40px); opacity:.75;
  background:
    radial-gradient(45% 60% at 20% 20%, rgba(108,223,234,.9), transparent 60%),
    radial-gradient(45% 60% at 80% 40%, rgba(67,146,214,.9), transparent 60%),
    radial-gradient(50% 70% at 50% 90%, rgba(34,85,199,.9), transparent 60%);
  animation:ap-float-bg 14s ease-in-out infinite alternate;
}
@keyframes ap-float-bg{0%{transform:translateY(0)}100%{transform:translateY(-24px)}}

.about-page .ap-hero__grid{display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px}
.about-page .ap-hero .title{font-size:clamp(32px,6vw,56px); margin:.35em 0 .2em}
.about-page .ap-hero .grad{
  background:linear-gradient(90deg,var(--brand-blue-700),var(--brand-cyan-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-page .ap-cta{margin-top:22px; display:flex; gap:12px}
.about-page .ap-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px}
.about-page .ap-stat{padding:20px; border-radius:16px; background:linear-gradient(180deg,#fff 0%, #f8fbff 100%); border:1px solid rgba(34,85,199,.10)}
.about-page .ap-stat .n{font-weight:800; font-size:clamp(26px,5vw,34px); color:var(--brand-blue-700)}
.about-page .ap-stat .k{font-weight:600; opacity:.8}

.about-page .ap-hero__img{border-radius:24px}
.about-page .ap-blob{
  position:absolute; inset:auto; width:420px; height:420px; top:0; right:0; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(108,223,234,.35), transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(67,146,214,.35), transparent 60%);
  filter:blur(20px); animation:ap-blob 10s ease-in-out infinite;
}
@keyframes ap-blob{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-16px,10px) scale(1.04)}
  100%{transform:translate(6px,-6px) scale(1)}
}

/* ===== STORY ===== */
.about-page .section{padding:80px 0}
.about-page .grid{display:grid; gap:clamp(16px,2.4vw,28px)}
.about-page .ap-story{grid-template-columns:1.1fr .9fr}
.about-page .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(34,85,199,.06); color:var(--brand-blue-700); font-weight:600}
.about-page .ap-h2{font-size:clamp(28px,5vw,42px); margin:.5em 0 .3em}

.about-page .ap-mv{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px}
.about-page .ap-tile{padding:24px; border-radius:18px; background:#fff; border:1px solid rgba(34,85,199,.11); box-shadow:var(--ap-shadow); transition:transform .4s ease, box-shadow .4s ease}
.about-page .ap-tile:hover{transform:translateY(-6px) rotateX(2deg); box-shadow:0 24px 60px rgba(0,0,0,.14)}
.about-page .ap-tile h4{font-family:'Titillium Web',sans-serif; font-size:1.2rem}

/* ===== TIMELINE ===== */
.about-page .ap-timeline{position:relative}
.about-page .ap-timeline::before{content:""; position:absolute; left:calc(50% - 2px); top:0; bottom:0; width:4px; background:linear-gradient(180deg, rgba(34,85,199,.15), rgba(108,223,234,.25))}
.about-page .t-row{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; margin:30px 0}
.about-page .t-card{padding:24px; border-radius:16px; background:#fff; border:1px solid rgba(34,85,199,.12); box-shadow:var(--ap-shadow)}
.about-page .t-dot{width:16px; height:16px; border-radius:50%; background:linear-gradient(180deg,var(--brand-blue-700),var(--brand-blue-500)); margin:0 auto; box-shadow:0 0 0 6px rgba(67,146,214,.18)}

/* ===== VALUES ===== */
.about-page .ap-alt{background:var(--ap-alt)}
.about-page .ap-values{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px}
.about-page .value{padding:22px; border-radius:18px; background:linear-gradient(180deg,#fff,#f8fbff); border:1px solid rgba(34,85,199,.10)}

/* ===== TEAM ===== */
.about-page .ap-team{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.about-page .teammate{padding:22px; text-align:center; border-radius:18px; background:#fff; box-shadow:var(--ap-shadow)}
.about-page .avatar{width:100px; height:100px; border-radius:50%; margin:10px auto 12px; object-fit:cover}
.about-page .role{font-size:.9rem; color:#5c6d85}

/* ===== CTA ===== */
.about-page .ap-cta{position:relative; overflow:hidden}
.about-page .ap-cta .belt{
  position:relative;
  padding:46px; border-radius:24px;
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500));
  color:#fff; display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center
}
.about-page .ap-cta .belt::after{
  content:""; position:absolute; right:-10%; top:-40%; width:460px; height:460px;
  background:radial-gradient(closest-side, rgba(108,223,234,.6), transparent);
  filter:blur(20px); animation:ap-float-bg 12s ease-in-out infinite alternate;
}
.about-page .ap-cta .field{display:flex; gap:12px; background:#fff; border-radius:999px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.18)}
.about-page .ap-cta input{flex:1; height:44px; border:0; outline:0; padding:0 16px; font-size:16px; border-radius:999px; color:#1b2332}
.about-page .ap-cta .btn{height:44px}
.about-page .eyebrow{font-family:'Titillium Web',sans-serif; font-weight:700; letter-spacing:.04em; font-size:clamp(12px,2vw,14px); color:#cfe9ff}
.about-page .ap-h3{font-size:clamp(24px,4.5vw,34px); color:#fff; margin:.2em 0 .4em}
.about-page .muted.light{color:#e7f2ff}

/* ===== Reveal Animations ===== */
.about-page .reveal{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease}
.about-page .reveal.in{opacity:1; transform:none}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .about-page .ap-hero__grid{grid-template-columns:1fr}
  .about-page .ap-stats{grid-template-columns:repeat(2,1fr)}
  .about-page .ap-mv{grid-template-columns:1fr 1fr}
  .about-page .ap-values{grid-template-columns:1fr 1fr}
  .about-page .ap-team{grid-template-columns:1fr 1fr}
  .about-page .ap-cta .belt{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .about-page .ap-timeline::before{left:22px}
  .about-page .t-row{grid-template-columns:1fr; padding-left:40px}
}
@media (prefers-reduced-motion: reduce){
  .about-page .reveal{transition:none}
  .about-page .ap-hero__backdrop,
  .about-page .ap-blob,
  .about-page .ap-cta .belt::after{animation:none}
}

/* ===================== DARK THEME (scoped) ===================== */
/* Mirrors Home: relies on your existing `body.dark` toggle */
body.dark .about-page{
  /* token swap */
  --ap-ink:#E6F0F7;
  --ap-text-100:#E6F0F7;
  --ap-text-70:#B7C7D6;
  --ap-alt:#0f1a2e;
  --ap-shadow:none;

  background:#060a14;
  color:var(--ap-ink);
}

/* Text */
body.dark .about-page .title{ color:var(--ap-text-100); }
body.dark .about-page .lead,
body.dark .about-page p,
body.dark .about-page .muted{ color:var(--ap-text-70); }

/* Hero */
body.dark .about-page .ap-hero{ background:transparent; }
body.dark .about-page .ap-hero__backdrop{
  opacity:.85; filter: blur(44px);
  background:
    radial-gradient(45% 60% at 20% 20%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 40%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 50% 90%, rgba(34,85,199,.35), transparent 60%);
}

/* Stats */
body.dark .about-page .ap-stat{
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
body.dark .about-page .ap-stat .n{ color:var(--ap-text-100); }
body.dark .about-page .ap-stat .k{ color:var(--ap-text-70); }

/* Buttons & tags */
body.dark .about-page .btn.ghost{ color:#cfe0ff; border-color:rgba(255,255,255,.18) }
body.dark .about-page .tag,
body.dark .about-page .pill{ background:rgba(255,255,255,.08); color:#cfe0ff }

/* Cards / Tiles / Values / Team */
body.dark .about-page .ap-tile,
body.dark .about-page .t-card,
body.dark .about-page .value,
body.dark .about-page .teammate,
body.dark .about-page .card{
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
  color:var(--ap-text-100);
}

/* Timeline */
body.dark .about-page .ap-timeline::before{
  background: linear-gradient(180deg, rgba(108,223,234,.25), rgba(67,146,214,.35));
}
body.dark .about-page .t-dot{ box-shadow:0 0 0 6px rgba(108,223,234,.16) }

/* Team role */
body.dark .about-page .role{ color:#9fb2d6 }

/* CTA */
body.dark .about-page .ap-cta .belt{
  background:linear-gradient(135deg, var(--brand-blue-700), var(--brand-blue-500));
  color:#fff;
}
body.dark .about-page .ap-cta .belt .muted{ color:#e7f2ff }
body.dark .about-page .ap-cta .field{
  background:rgba(6,10,20,.6);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}
body.dark .about-page .ap-cta input{ color:#eaf3ff; background:transparent }
body.dark .about-page .ap-cta input::placeholder{ color:#bcd1f3 }

/* Hover feel (dark slightly reduced) */
@media (prefers-color-scheme: dark){
  body.dark .about-page .ap-tile:hover{ transform: translateY(-4px); }
}


/* =========================================================
   Services (v10 palette) — Scoped Light + Dark (no navbar impact)
   ========================================================= */

/* =========================================================
   Services (v10) — Premium Motion, Scoped Light+Dark
   ========================================================= */
.services-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* Light */
  --sv-ink:#0b1220;
  --sv-text-100:#0b1220;
  --sv-text-70:#4d5b70;
  --sv-bg:#ffffff;
  --sv-surface:#ffffff;
  --sv-alt:#f6f8ff;
  --sv-border:rgba(34,85,199,.10);
  --sv-shadow:0 18px 50px rgba(0,0,0,.12);

  /* Motion */
  --ease-out-3:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  --sv-wrapW:1200px;
  --sv-gutterX:clamp(16px,4vw,24px);
}

.services-page{font-family:'Inter',sans-serif; background:var(--sv-bg); color:var(--sv-ink)}
.services-page .svc-wrap{max-width:var(--sv-wrapW); margin:0 auto; padding:0 var(--sv-gutterX)}

/* Ambient Backdrops */
.services-page .sv-backdrop{
  position:fixed; inset:-30% -10% auto -10%; height:60vh; z-index:-2;
  filter:blur(50px); opacity:.70; pointer-events:none;
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.65), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.55), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.45), transparent 60%);
  animation:sv-float 16s ease-in-out infinite alternate;
}
.services-page .sv-gridlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background:
    repeating-linear-gradient(90deg, #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px);
  animation:grid-pan 40s linear infinite;
}
@keyframes sv-float{0%{transform:translateY(0)}100%{transform:translateY(-28px)}}
@keyframes grid-pan{0%{background-position:0 0,0 0}100%{background-position:360px 0,0 360px}}

/* Section head */
.services-page .services-section{position:relative; padding:96px 0}
.services-page .svc-head{text-align:center; margin-bottom:28px}
.services-page .svc-tag{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.services-page .svc-title{
  font-family:'Titillium Web',sans-serif; font-weight:700;
  font-size:clamp(26px,5vw,40px); margin:.5rem 0 .25rem; color:var(--sv-text-100)
}
.services-page .svc-sub{ color:var(--sv-text-70) }

/* Grid */
.services-page .svc-grid{
  display:grid; gap:22px; margin-top:28px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width: 1100px){ .services-page .svc-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 780px){ .services-page .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .services-page .svc-grid{grid-template-columns:1fr} }

/* Card — premium micro-interactions */
.services-page .svc-card{
  position:relative; overflow:hidden; outline:0; cursor:default;
  padding:22px; border-radius:20px;
  background:var(--sv-surface);
  border:1px solid var(--sv-border);
  box-shadow:var(--sv-shadow);
  transform-style:preserve-3d;
  transition:
    transform .55s var(--ease-spring),
    box-shadow .35s var(--ease-out-3),
    border-color .35s var(--ease-out-3);
  will-change:transform;
}

/* Focus ring */
.services-page .svc-card:focus-visible{ box-shadow:0 0 0 3px rgba(34,85,199,.35) }

/* Gradient border shine */
.services-page .svc-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(108,223,234,.65), rgba(34,85,199,.65));
  -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 ease;
}
.services-page .svc-card:hover::before,
.services-page .svc-card:focus-visible::before{ opacity:.9 }

/* Spotlight following cursor */
.services-page .svc-card::after{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(108,223,234,.18), transparent 60%);
  filter:blur(18px); opacity:0; transition:opacity .35s var(--ease-out-3); pointer-events:none;
}
.services-page .svc-card:hover::after{ opacity:.35 }

/* Corner accent */
.services-page .svc-corner{
  position:absolute; top:-28px; right:-28px; width:160px; height:160px; border-radius:32px;
  background:linear-gradient(135deg, rgba(34,85,199,.25), rgba(108,223,234,.25));
  transform:rotate(35deg); filter:blur(2px); transition:transform .6s var(--ease-spring);
}
.services-page .svc-card:hover .svc-corner{ transform:rotate(25deg) translate3d(4px,4px,0) }

/* Icon + text */
.services-page .svc-icon{
  width:56px; height:56px; object-fit:contain; margin-bottom:12px;
  transform:translate(var(--tx,0px), var(--ty,0px)) scale(1);
  transition:transform .35s var(--ease-spring);
}
.services-page .svc-h3{ font-weight:800; margin:.15rem 0 .4rem }
.services-page .svc-desc{ color:var(--sv-text-70); line-height:1.55 }

/* Lift on hover */
.services-page .svc-card:hover{
  border-color:rgba(34,85,199,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.16);
  --tz:12px;
}
.services-page .svc-card{
  --rx:0deg; --ry:0deg; --tz:0px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
}

/* Reveal (staggered) */
.services-page .reveal{ opacity:0; transform:translateY(18px) scale(.98); }
.services-page .reveal.in{
  opacity:1; transform:none;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease-out-3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .services-page .sv-backdrop,.services-page .sv-gridlines{ animation:none }
  .services-page .reveal{ transition:none }
  .services-page .svc-card{ transition:none; transform:none }
}

/* ===================== DARK THEME (scoped) ===================== */
body.dark .services-page{
  --sv-ink:#E6F0F7;
  --sv-text-100:#E6F0F7;
  --sv-text-70:#B7C7D6;
  --sv-bg:#060a14;
  --sv-surface:rgba(255,255,255,.045);
  --sv-alt:#0f1a2e;
  --sv-border:rgba(255,255,255,.12);
  --sv-shadow:none;
}
body.dark .services-page .sv-backdrop{
  opacity:.85; filter:blur(56px);
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.35), transparent 60%);
}
body.dark .services-page .sv-gridlines{ opacity:.08; background:
  repeating-linear-gradient(90deg, #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px),
  repeating-linear-gradient(0deg,  #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px);
}
body.dark .services-page .svc-card:hover{ box-shadow:none; border-color:rgba(255,255,255,.22) }
body.dark .services-page .svc-corner{
  background:linear-gradient(135deg, rgba(108,223,234,.22), rgba(34,85,199,.22));
}
body.dark .services-page .svc-desc{ color:var(--sv-text-70) }



/* =========================================================
   Features (v10) — Premium Motion, Scoped Light+Dark
   ========================================================= */
.features-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* LIGHT defaults (home/about feel) */
  --ft-ink:#0b1220;
  --ft-text-100:#0b1220;
  --ft-text-70:#4d5b70;
  --ft-bg:#ffffff;
  --ft-alt:#f6f8ff;

  --ft-surface:#ffffff;
  --ft-border:rgba(34,85,199,.10);
  --ft-shadow:0 18px 50px rgba(0,0,0,.12);

  --ease-out-3:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  --ft-wrapW:1200px;
  --ft-gutterX:clamp(16px,4vw,24px);
}

.features-page{font-family:'Inter',sans-serif; background:var(--ft-bg); color:var(--ft-ink)}
.features-page .container{max-width:var(--ft-wrapW); margin:0 auto; padding:0 var(--ft-gutterX)}
.features-page .service-container{max-width:var(--ft-wrapW); margin:0 auto; padding:0 var(--ft-gutterX)}

/* Ambient Backdrops */
.features-page .ft-backdrop{
  position:fixed; inset:-30% -10% auto -10%; height:56vh; z-index:-2;
  filter:blur(50px); opacity:.72; pointer-events:none;
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.65), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.55), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.45), transparent 60%);
  animation:ft-float 16s ease-in-out infinite alternate;
}
.features-page .ft-gridlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background:
    repeating-linear-gradient(90deg, #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px);
  animation:grid-pan 40s linear infinite;
}
@keyframes ft-float{0%{transform:translateY(0)}100%{transform:translateY(-26px)}}
@keyframes grid-pan{0%{background-position:0 0,0 0}100%{background-position:360px 0,0 360px}}

/* Sub Banner */
.features-page .sub-banner-service{padding:88px 0 40px; position:relative}
.features-page .sub-banner-service h1{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  font-size:clamp(28px,5.4vw,44px); line-height:1.08; margin:.25em 0 .35em;
  color:var(--ft-text-100);
}
.features-page .sub-banner-service p{color:var(--ft-text-70)}
.features-page .ft-tag{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.features-page .grad{
  background:linear-gradient(90deg,var(--brand-blue-700),var(--brand-cyan-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Features Section */
.features-page .features-section{padding:28px 0 96px; position:relative}

/* Card layout (two-column) */
.features-page .card{
  position:relative; overflow:hidden; outline:0;
  display:grid; grid-template-columns:1.1fr .9fr; gap:26px;
  align-items:center; margin:22px 0;
  padding:22px; border-radius:22px;
  background:var(--ft-surface);
  border:1px solid var(--ft-border);
  box-shadow:var(--ft-shadow);
  transform-style:preserve-3d;
  transition:
    transform .55s var(--ease-spring),
    box-shadow .35s var(--ease-out-3),
    border-color .35s var(--ease-out-3),
    background .35s ease;
}

/* Alternate layout for even cards */
.features-page .card:nth-child(even){
  grid-template-columns:.9fr 1.1fr;
}
.features-page .card:nth-child(even) .feature-card-left{order:2}
.features-page .card:nth-child(even) .feature-card-right{order:1}

/* Corner accent */
.features-page .corner{
  position:absolute; top:-32px; right:-32px; width:180px; height:180px; border-radius:40px;
  background:linear-gradient(135deg, rgba(34,85,199,.25), rgba(108,223,234,.25));
  transform:rotate(35deg); filter:blur(2px); transition:transform .6s var(--ease-spring);
}
.features-page .card:hover .corner{ transform:rotate(25deg) translate3d(4px,6px,0) }

/* Gradient border shine + spotlight */
.features-page .card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(108,223,234,.65), rgba(34,85,199,.65));
  -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 ease;
}
.features-page .card:hover::before,
.features-page .card:focus-visible::before{ opacity:.9 }

.features-page .card::after{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(108,223,234,.18), transparent 60%);
  filter:blur(18px); opacity:0; transition:opacity .35s var(--ease-out-3); pointer-events:none;
}
.features-page .card:hover::after{ opacity:.35 }

/* Image panel */
.features-page .feature-card-left img{
  width:100%; height:auto; display:block; border-radius:18px;
  transform:translate(var(--tx,0px), var(--ty,0px)) scale(1);
  transition:transform .35s var(--ease-spring);
}

/* Copy panel */
.features-page .feature-card-right h2{
  font-weight:800; font-size:clamp(22px,3.4vw,28px); margin:.1em 0 .35em; color:var(--ft-text-100);
}
.features-page .feature-card-right p{ color:var(--ft-text-70); line-height:1.6 }

/* Lift on hover (3D tilt) */
.features-page .card:hover{
  border-color:rgba(34,85,199,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.16);
  --tz:14px;
}
.features-page .card{
  --rx:0deg; --ry:0deg; --tz:0px;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
}

/* Reveal (staggered) */
.features-page .reveal{ opacity:0; transform:translateY(20px) scale(.985); }
.features-page .reveal.in{
  opacity:1; transform:none;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease-out-3);
}

/* Responsive */
@media (max-width: 980px){
  .features-page .card,
  .features-page .card:nth-child(even){
    grid-template-columns:1fr; gap:16px;
  }
  .features-page .card:nth-child(even) .feature-card-left{order:0}
  .features-page .card:nth-child(even) .feature-card-right{order:0}
}
@media (prefers-reduced-motion: reduce){
  .features-page .ft-backdrop,.features-page .ft-gridlines{ animation:none }
  .features-page .reveal{ transition:none }
  .features-page .card{ transition:none; transform:none }
}

/* ===================== DARK THEME (scoped) ===================== */
body.dark .features-page{
  --ft-ink:#E6F0F7;
  --ft-text-100:#E6F0F7;
  --ft-text-70:#B7C7D6;
  --ft-bg:#060a14;
  --ft-alt:#0f1a2e;

  --ft-surface:rgba(255,255,255,.045);
  --ft-border:rgba(255,255,255,.12);
  --ft-shadow:none;
}
body.dark .features-page .ft-backdrop{
  opacity:.85; filter:blur(56px);
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.35), transparent 60%);
}
body.dark .features-page .ft-gridlines{
  opacity:.08; background:
    repeating-linear-gradient(90deg, #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px);
}
body.dark .features-page .card:hover{ box-shadow:none; border-color:rgba(255,255,255,.22) }
body.dark .features-page .corner{
  background:linear-gradient(135deg, rgba(108,223,234,.22), rgba(34,85,199,.22));
}
body.dark .features-page .feature-card-right p{ color:var(--ft-text-70) }


/* =========================================================
   Blogs (v10) — Premium Motion, Scoped Light+Dark
   ========================================================= */
.blogs-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* Light */
  --bl-ink:#0b1220;
  --bl-text-100:#0b1220;
  --bl-text-70:#4d5b70;
  --bl-bg:#ffffff;
  --bl-surface:#ffffff;
  --bl-alt:#f6f8ff;
  --bl-border:rgba(34,85,199,.10);
  --bl-shadow:0 18px 50px rgba(0,0,0,.12);

  --ease-out-3:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  --wrapW:1200px;
  --gutterX:clamp(16px,4vw,24px);
}

.blogs-page{font-family:'Inter',sans-serif; background:var(--bl-bg); color:var(--bl-ink)}
.blogs-page .container,.blogs-page .blog-grid{max-width:var(--wrapW); margin:0 auto; padding:0 var(--gutterX)}

/* Ambient Backdrops */
.blogs-page .bl-backdrop{
  position:fixed; inset:-30% -10% auto -10%; height:56vh; z-index:-2;
  filter:blur(50px); opacity:.72; pointer-events:none;
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.65), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.55), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.45), transparent 60%);
  animation:bl-float 16s ease-in-out infinite alternate;
}
.blogs-page .bl-gridlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background:
    repeating-linear-gradient(90deg, #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px);
  animation:grid-pan 40s linear infinite;
}
@keyframes bl-float{0%{transform:translateY(0)}100%{transform:translateY(-26px)}}
@keyframes grid-pan{0%{background-position:0 0,0 0}100%{background-position:360px 0,0 360px}}

/* Sub Hero */
.blogs-page .sub-blog-service{padding:88px 0 40px; position:relative}
.blogs-page .bl-tag{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.blogs-page .sub-blog-service h1{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  font-size:clamp(28px,5.4vw,44px); line-height:1.08; margin:.25em 0 .35em;
  color:var(--bl-text-100);
}
.blogs-page .sub-blog-service p{ color:var(--bl-text-70) }
.blogs-page .grad{
  background:linear-gradient(90deg,var(--brand-blue-700),var(--brand-cyan-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Blog Grid */
.blogs-page .blog-section{padding:28px 0 96px}
.blogs-page .blog-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 1100px){ .blogs-page .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 720px){ .blogs-page .blog-grid{grid-template-columns:1fr} }

/* Card */
.blogs-page .blog-card{
  position:relative; overflow:hidden; outline:0; border-radius:20px;
  background:var(--bl-surface);
  border:1px solid var(--bl-border);
  box-shadow:var(--bl-shadow);
  transition:
    transform .55s var(--ease-spring),
    box-shadow .35s var(--ease-out-3),
    border-color .35s var(--ease-out-3),
    background .35s ease;
  transform-style:preserve-3d;
}
.blogs-page .blog-card:focus-visible{ box-shadow:0 0 0 3px rgba(34,85,199,.35) }

/* Media */
.blogs-page .media{ position:relative; overflow:hidden }
.blogs-page .blog-image{
  display:block; width:100%; height:auto;
  transform:scale(1) translate(var(--tx,0px), var(--ty,0px));
  transition:transform .6s var(--ease-spring);
}
.blogs-page .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
  opacity:.0; transition:opacity .35s ease;
}
.blogs-page .media-glow{
  content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  left:var(--mx, 70%); top:var(--my, 30%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(108,223,234,.18), transparent 60%);
  filter:blur(18px); opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease-out-3);
}

/* Content */
.blogs-page .blog-content{ padding:18px 18px 16px }
.blogs-page .blog-category{
  display:inline-block; padding:.32rem .66rem; border-radius:999px; font-weight:700; font-size:.74rem;
  background:rgba(34,85,199,.10); color:#2255C7;
}
.blogs-page .blog-category.blog-product{ background:rgba(34,85,199,.10); color:#2255C7 }
.blogs-page .blog-category.blog-design{ background:rgba(108,223,234,.16); color:#0b6b86 }
.blogs-page .blog-category.blog-software{ background:rgba(98, 142, 255, .16); color:#2a49c7 }

.blogs-page .blog-title{ font-weight:800; margin:.45rem 2.8rem .35rem .0; color:var(--bl-text-100) }
.blogs-page .blog-text{ color:var(--bl-text-70); line-height:1.6 }

.blogs-page .blog-arrow{
  position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:999px;
  display:inline-grid; place-items:center; background:#fff; border:1px solid var(--bl-border);
  box-shadow:var(--bl-shadow); transition: transform .4s var(--ease-out-3), box-shadow .35s var(--ease-out-3), background .2s ease;
}
.blogs-page .blog-arrow img{ width:18px; height:18px; transform:translateX(0); transition:transform .35s var(--ease-out-3) }
.blogs-page .blog-arrow:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(0,0,0,.16) }
.blogs-page .blog-arrow:hover img{ transform:translateX(3px) }

/* Footer */
.blogs-page .blog-footer{ margin-top:16px; display:flex; align-items:center; gap:10px }
.blogs-page .blog-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover }

/* Hover Lift */
.blogs-page .blog-card:hover{
  border-color:rgba(34,85,199,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
.blogs-page .blog-card:hover .blog-image{ transform:scale(1.04) translate(var(--tx,0px), var(--ty,0px)) }
.blogs-page .blog-card:hover .media::after{ opacity:1 }
.blogs-page .blog-card:hover .media-glow{ opacity:.35 }

/* Reveal (staggered) */
.blogs-page .reveal{ opacity:0; transform:translateY(18px) scale(.985) }
.blogs-page .reveal.in{
  opacity:1; transform:none;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease-out-3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .blogs-page .bl-backdrop,.blogs-page .bl-gridlines{ animation:none }
  .blogs-page .reveal{ transition:none }
  .blogs-page .blog-card{ transition:none; transform:none }
}

/* ===================== DARK THEME (scoped) ===================== */
body.dark .blogs-page{
  --bl-ink:#E6F0F7;
  --bl-text-100:#E6F0F7;
  --bl-text-70:#B7C7D6;
  --bl-bg:#060a14;
  --bl-surface:rgba(255,255,255,.045);
  --bl-alt:#0f1a2e;
  --bl-border:rgba(255,255,255,.12);
  --bl-shadow:none;
}
body.dark .blogs-page .bl-backdrop{
  opacity:.85; filter:blur(56px);
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.35), transparent 60%);
}
body.dark .blogs-page .bl-gridlines{
  opacity:.08; background:
    repeating-linear-gradient(90deg, #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px);
}
body.dark .blogs-page .blog-card:hover{ box-shadow:none; border-color:rgba(255,255,255,.22) }
body.dark .blogs-page .blog-text{ color:var(--bl-text-70) }
body.dark .blogs-page .blog-arrow{ background:rgba(255,255,255,.92) }


/* =========================================================
   Careers (v10) — Advanced Motion, Scoped Light+Dark
   ========================================================= */
.careers-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* Light tokens */
  --cr-ink:#0b1220;
  --cr-text-100:#0b1220;
  --cr-text-70:#4d5b70;
  --cr-bg:#ffffff;
  --cr-alt:#f6f8ff;

  --cr-surface:#ffffff;
  --cr-border:rgba(34,85,199,.10);
  --cr-shadow:0 18px 50px rgba(0,0,0,.12);

  --ease-out-3:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  --wrapW:1200px;
  --gutterX:clamp(16px,4vw,24px);
}

.careers-page{font-family:'Inter',sans-serif; background:var(--cr-bg); color:var(--cr-ink)}
.careers-page .container,
.careers-page .benefits-container,
.careers-page .openings-wrap{max-width:var(--wrapW); margin:0 auto; padding:0 var(--gutterX)}

/* Ambient Backdrops */
.careers-page .cr-backdrop{
  position:fixed; inset:-30% -10% auto -10%; height:58vh; z-index:-2;
  filter:blur(50px); opacity:.72; pointer-events:none;
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.65), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.55), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.45), transparent 60%);
  animation:cr-float 16s ease-in-out infinite alternate;
}
.careers-page .cr-gridlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background:
    repeating-linear-gradient(90deg, #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px);
  animation:grid-pan 40s linear infinite;
}
@keyframes cr-float{0%{transform:translateY(0)}100%{transform:translateY(-26px)}}
@keyframes grid-pan{0%{background-position:0 0,0 0}100%{background-position:360px 0,0 360px}}

/* Sub Hero */
.careers-page .sub-carrer-service{padding:88px 0 40px; position:relative}
.careers-page .cr-tag{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.careers-page .sub-carrer-service h1{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  font-size:clamp(28px,5.4vw,44px); line-height:1.08; margin:.25em 0 .35em;
  color:var(--cr-text-100);
}
.careers-page .sub-carrer-service p{ color:var(--cr-text-70) }
.careers-page .grad{
  background:linear-gradient(90deg,var(--brand-blue-700),var(--brand-cyan-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Benefits */
.careers-page .benefits-section{padding:28px 0 96px}
.careers-page .benefits-intro{ max-width:820px; text-align:center; margin:0 auto 26px }
.careers-page .benefits-label{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.careers-page .benefits-title{
  font-family:'Titillium Web',sans-serif; font-weight:800; margin:.45rem 0 .35rem;
  font-size:clamp(26px,5vw,40px); color:var(--cr-text-100)
}
.careers-page .benefits-description{ color:var(--cr-text-70) }

.careers-page .benefits-grid{
  display:grid; gap:20px; margin-top:22px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width: 1100px){ .careers-page .benefits-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 780px){ .careers-page .benefits-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .careers-page .benefits-grid{grid-template-columns:1fr} }

.careers-page .benefit-item{
  position:relative; overflow:hidden; outline:0; cursor:default;
  padding:22px; border-radius:20px;
  background:var(--cr-surface);
  border:1px solid var(--cr-border);
  box-shadow:var(--cr-shadow);
  transform-style:preserve-3d;
  transition: transform .55s var(--ease-spring), box-shadow .35s var(--ease-out-3), border-color .35s var(--ease-out-3);
}
.careers-page .benefit-item:focus-visible{ box-shadow:0 0 0 3px rgba(34,85,199,.35) }

.careers-page .benefit-corner{
  position:absolute; top:-28px; right:-28px; width:160px; height:160px; border-radius:32px;
  background:linear-gradient(135deg, rgba(34,85,199,.25), rgba(108,223,234,.25));
  transform:rotate(35deg); filter:blur(2px); transition:transform .6s var(--ease-spring);
}
.careers-page .benefit-item:hover .benefit-corner{ transform:rotate(25deg) translate3d(4px,6px,0) }

.careers-page .benefit-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:16px; margin-bottom:12px;
  background:linear-gradient(135deg, rgba(34,85,199,.08), rgba(108,223,234,.10));
  transform:translate(var(--tx,0px), var(--ty,0px));
  transition:transform .35s var(--ease-spring);
}
.careers-page .benefit-title{ font-weight:800; margin:.15rem 0 .4rem; color:var(--cr-text-100) }
.careers-page .benefit-text{ color:var(--cr-text-70); line-height:1.55 }

.careers-page .benefit-item:hover{
  border-color:rgba(34,85,199,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.16);
  --tz:12px;
}
.careers-page .benefit-item{ --rx:0deg; --ry:0deg; --tz:0px; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)) }

/* Openings */
.careers-page .openings-wrap{
  display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; margin:8px auto 96px;
}
@media (max-width: 920px){ .careers-page .openings-wrap{ grid-template-columns:1fr } }

.careers-page .sidebar{
  position:sticky; top:84px; align-self:start; display:flex; flex-direction:column; gap:8px;
}
.careers-page .tab{
  text-align:left; padding:12px 14px; border-radius:12px; border:1px solid var(--cr-border);
  background:var(--cr-surface); color:var(--cr-text-100); font-weight:700; cursor:pointer;
  transition:transform .3s var(--ease-out-3), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.careers-page .tab:hover{ transform:translateY(-2px) }
.careers-page .tab.active{ border-color:rgba(34,85,199,.35); box-shadow:0 18px 46px rgba(0,0,0,.12) }

.careers-page .content{ min-height:240px }
.careers-page .job-panel[hidden]{ display:none !important }

.careers-page .job-item{
  border:1px solid var(--cr-border); border-radius:16px; background:var(--cr-surface); box-shadow:var(--cr-shadow);
  margin-bottom:14px; overflow:hidden;
}
.careers-page .job-head{
  width:100%; text-align:left; display:grid; grid-template-columns:1fr auto auto 24px; gap:16px;
  align-items:center; padding:16px 18px; background:transparent; border:0; cursor:pointer;
  color:var(--cr-text-100); font-weight:700; position:relative;
}
@media (max-width: 680px){
  .careers-page .job-head{ grid-template-columns:1fr 1fr; row-gap:8px }
}
.careers-page .job-title{ font-weight:800 }
.careers-page .job-meta{ display:grid; gap:2px; justify-items:start }
.careers-page .job-meta b{ font-size:.78rem; color:var(--cr-text-70); font-weight:700; letter-spacing:.02em }
.careers-page .job-meta em{ font-style:normal; font-weight:700 }

.careers-page .chev{
  width:22px; height:22px; border-radius:999px; border:1px solid var(--cr-border);
  display:inline-block; position:relative; transition:transform .35s var(--ease-out-3), background .2s ease;
}
.careers-page .chev::before{
  content:""; position:absolute; inset:5px; border-right:2px solid #2255C7; border-bottom:2px solid #2255C7; transform:rotate(-45deg)
}
.careers-page .job-head[aria-expanded="true"] .chev{ transform:rotate(180deg) }

.careers-page .job-body{
  height:0; overflow:hidden; transition:height .5s var(--ease-spring), opacity .25s ease;
  opacity:0; padding:0 18px;
}
.careers-page .job-body.expanded{ opacity:1; padding:0 18px 18px }
.careers-page .job-body h3{ margin:14px 0 8px; font-size:1.05rem }
.careers-page .job-body ul{ margin:0 0 10px 18px; color:var(--cr-text-70) }
.careers-page .job-actions{ display:flex; gap:10px; margin-top:8px }
.careers-page .btn{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; box-shadow:var(--cr-shadow);
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500));
  color:#fff; font-weight:700;
}
.careers-page .btn.ghost{ background:transparent; color:#2255C7; border-color:rgba(34,85,199,.25); box-shadow:none }

/* Reveal */
.careers-page .reveal{ opacity:0; transform:translateY(18px) scale(.985) }
.careers-page .reveal.in{
  opacity:1; transform:none;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease-out-3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .careers-page .cr-backdrop,.careers-page .cr-gridlines{ animation:none }
  .careers-page .reveal{ transition:none }
  .careers-page .benefit-item,
  .careers-page .job-body{ transition:none }
}

/* ===================== DARK THEME (scoped) ===================== */
body.dark .careers-page{
  --cr-ink:#E6F0F7;
  --cr-text-100:#E6F0F7;
  --cr-text-70:#B7C7D6;
  --cr-bg:#060a14;
  --cr-alt:#0f1a2e;

  --cr-surface:rgba(255,255,255,.045);
  --cr-border:rgba(255,255,255,.12);
  --cr-shadow:none;
}
body.dark .careers-page .cr-backdrop{
  opacity:.85; filter:blur(56px);
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.35), transparent 60%);
}
body.dark .careers-page .cr-gridlines{
  opacity:.08; background:
    repeating-linear-gradient(90deg, #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px);
}
body.dark .careers-page .btn.ghost{ color:#cfe0ff; border-color:rgba(255,255,255,.22) }
body.dark .careers-page .benefit-item:hover{ box-shadow:none; border-color:rgba(255,255,255,.22) }

/* =========================================================
   Contact (v10) — Premium Motion, Scoped Light+Dark
   ========================================================= */
.contact-page{
  --brand-blue-700:#2255C7;
  --brand-blue-500:#4392D6;
  --brand-cyan-300:#6CDFEA;

  /* Light tokens */
  --ct-ink:#0b1220;
  --ct-text-100:#0b1220;
  --ct-text-70:#4d5b70;
  --ct-bg:#ffffff;
  --ct-alt:#f6f8ff;

  --ct-surface:#ffffff;
  --ct-border:rgba(34,85,199,.10);
  --ct-shadow:0 18px 50px rgba(0,0,0,.12);

  --ease-out-3:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  --wrapW:1200px;
  --gutterX:clamp(16px,4vw,24px);
}

.contact-page{font-family:'Inter',sans-serif; background:var(--ct-bg); color:var(--ct-ink)}
.contact-page .container,
.contact-page .contact-wrap{max-width:var(--wrapW); margin:0 auto; padding:0 var(--gutterX)}

/* Ambient Backdrops */
.contact-page .ct-backdrop{
  position:fixed; inset:-30% -10% auto -10%; height:56vh; z-index:-2;
  filter:blur(50px); opacity:.72; pointer-events:none;
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.65), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.55), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.45), transparent 60%);
  animation:ct-float 16s ease-in-out infinite alternate;
}
.contact-page .ct-gridlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background:
    repeating-linear-gradient(90deg, #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #1c2a44 0, #1c2a44 1px, transparent 1px, transparent 36px);
  animation:grid-pan 40s linear infinite;
}
@keyframes ct-float{0%{transform:translateY(0)}100%{transform:translateY(-26px)}}
@keyframes grid-pan{0%{background-position:0 0,0 0}100%{background-position:360px 0,0 360px}}

/* Sub Hero */
.contact-page .sub-banner-contact{padding:88px 0 40px; position:relative}
.contact-page .ct-tag{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  background:rgba(34,85,199,.10); color:#2255C7; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem
}
.contact-page .sub-banner-contact h1{
  font-family:'Titillium Web',sans-serif; font-weight:800;
  font-size:clamp(28px,5.4vw,44px); line-height:1.08; margin:.25em 0 .35em;
  color:var(--ct-text-100);
}
.contact-page .sub-banner-contact p{ color:var(--ct-text-70) }
.contact-page .grad{
  background:linear-gradient(90deg,var(--brand-blue-700),var(--brand-cyan-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Layout */
.contact-page .contact-section{padding:28px 0 120px}
.contact-page .contact-wrap{
  display:grid; gap:24px; grid-template-columns:1fr 1.2fr; align-items:start;
}
@media (max-width: 980px){ .contact-page .contact-wrap{ grid-template-columns:1fr } }

/* Info Card */
.contact-page .contact-info{
  position:relative; overflow:hidden; border-radius:22px; padding:26px;
  color:#fff; background:linear-gradient(135deg, #102a57, #2255C7 60%, #4392D6 100%);
  box-shadow:0 20px 60px rgba(34,85,199,.35);
}
.contact-page .ci-title{ font-family:'Titillium Web',sans-serif; font-weight:800; margin:0 0 .3rem; font-size:clamp(20px,3.6vw,26px) }
.contact-page .ci-sub{ color:#e4efff; margin:0 0 10px }
.contact-page .ci-list{ list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:12px }
.contact-page .ci-line{ display:flex; align-items:center; gap:12px }
.contact-page .ci-line a, .contact-page .ci-line span{ color:#fff; text-decoration:none }
.contact-page .ci-icon{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  background:rgba(255,255,255,.12); color:#fff;
}
.contact-page .ci-cta{ display:flex; gap:10px; margin-top:10px }
.contact-page .btn{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:999px;
  border:1px solid transparent; box-shadow:var(--ct-shadow); font-weight:700;
}
.contact-page .btn.ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.25) }
.contact-page .btn{ background:#fff; color:#102a57 }

/* info decorative corner */
.contact-page .ci-corner{
  position:absolute; top:-30px; right:-30px; width:200px; height:200px; border-radius:40px;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.1));
  transform:rotate(35deg); filter:blur(2px);
}

/* Form Card */
.contact-page .contact-form{
  background:var(--ct-surface); border:1px solid var(--ct-border); border-radius:22px;
  box-shadow:var(--ct-shadow); padding:26px; position:relative; overflow:hidden;
}
.contact-page .contact-form::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(108,223,234,.65), rgba(34,85,199,.65));
  -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 ease;
}
.contact-page .contact-form:hover::before{ opacity:.9 }

.contact-page .input-grid{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width: 720px){ .contact-page .input-grid{ grid-template-columns:1fr } }

.contact-page .field{ display:grid; gap:8px }
.contact-page label{ font-weight:700; font-size:.92rem; color:var(--ct-text-100) }
.contact-page input, .contact-page textarea{
  width:100%; border-radius:14px; border:1px solid var(--ct-border); background:#fff;
  padding:12px 14px; font-size:16px; color:#1b2332; outline:0; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.contact-page textarea{ min-height:140px; resize:vertical }
.contact-page .field:focus-within input,
.contact-page .field:focus-within textarea{
  border-color:rgba(34,85,199,.35);
  box-shadow:0 0 0 3px rgba(34,85,199,.18);
}
.contact-page .err{ min-height:18px; font-size:.8rem; color:#c23939 }

.contact-page .group-label{ display:block; margin:16px 0 8px; font-weight:800; color:var(--ct-text-100) }
.contact-page .radio-group{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px }
.contact-page .chip{ position:relative; }
.contact-page .chip input{ position:absolute; inset:0; opacity:0; pointer-events:none }
.contact-page .chip span{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:rgba(34,85,199,.08); color:#2255C7; font-weight:700; border:1px solid rgba(34,85,199,.15);
  transition:transform .25s var(--ease-out-3), background .25s ease, border-color .25s ease, color .2s ease;
}
.contact-page .chip input:checked + span{
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500));
  color:#fff; border-color:transparent; transform:translateY(-1px);
}

.contact-page .btn.submit{
  margin-top:10px; height:46px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-blue-500)); color:#fff; font-weight:800;
  display:inline-grid; place-items:center; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out-3), box-shadow .35s var(--ease-out-3);
}
.contact-page .btn.submit:hover{ transform:translateY(-2px); box-shadow:0 22px 60px rgba(0,0,0,.18) }
.contact-page .btn.submit:disabled{ opacity:.75; cursor:not-allowed }

.contact-page .btn.submit .spinner{
  position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin 1s linear infinite; opacity:0; transform:scale(.6);
}
.contact-page .btn.submit.loading .btn-label{ opacity:0 }
.contact-page .btn.submit.loading .spinner{ opacity:1; transform:scale(1) }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Reveal */
.contact-page .reveal{ opacity:0; transform:translateY(18px) scale(.985) }
.contact-page .reveal.in{
  opacity:1; transform:none;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease-out-3);
}

/* Toast */
.contact-page .toast{
  position:fixed; right:22px; bottom:22px; z-index:50;
  display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:14px;
  background:#0d1e3f; color:#e8f3ff; box-shadow:0 20px 60px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.18);
}
.contact-page .toast .toast-icon{
  display:grid; place-items:center; width:22px; height:22px; border-radius:999px; background:#1ea672; color:#fff; font-weight:800
}

/* Responsive small */
@media (max-width: 520px){
  .contact-page .btn{ width:100%; justify-content:center }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .contact-page .ct-backdrop,.contact-page .ct-gridlines{ animation:none }
  .contact-page .reveal{ transition:none }
  .contact-page .btn.submit{ transition:none }
}

/* ===================== DARK THEME (scoped) ===================== */
body.dark .contact-page{
  --ct-ink:#E6F0F7;
  --ct-text-100:#E6F0F7;
  --ct-text-70:#B7C7D6;
  --ct-bg:#060a14;
  --ct-alt:#0f1a2e;

  --ct-surface:rgba(255,255,255,.045);
  --ct-border:rgba(255,255,255,.12);
  --ct-shadow:none;
}
body.dark .contact-page .ct-backdrop{
  opacity:.85; filter:blur(56px);
  background:
    radial-gradient(40% 60% at 15% 35%, rgba(108,223,234,.35), transparent 60%),
    radial-gradient(45% 60% at 80% 15%, rgba(67,146,214,.35), transparent 60%),
    radial-gradient(50% 70% at 60% 100%, rgba(34,85,199,.35), transparent 60%);
}
body.dark .contact-page .ct-gridlines{
  opacity:.08; background:
    repeating-linear-gradient(90deg, #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(0deg,  #2a3a59 0, #2a3a59 1px, transparent 1px, transparent 36px);
}
body.dark .contact-page input, body.dark .contact-page textarea{
  background:rgba(255,255,255,.04); color:#eaf3ff; border-color:rgba(255,255,255,.12)
}
body.dark .contact-page input::placeholder, body.dark .contact-page textarea::placeholder{ color:#bcd1f3 }
body.dark .contact-page .btn.ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22) }
body.dark .contact-page .contact-form:hover::before{ opacity:.6 }

/* === Automated override: Header tint on dark === */
body.dark .site-header{
  background: rgba(10,15,28,.62);
  border-color: rgba(255,255,255,.08);
  backdrop-filter: saturate(160%) blur(8px);
}

/* === NAV active indicator (prominent & distinct from CTA) === */
.nav .nav-link { position: relative; padding-bottom: 8px; }
.nav .nav-link.active:not(.btn):not(.btn-primary):not(.btn-contact) {
  color: var(--brand-blue-700);
  background: rgba(34,85,199,.10);
  border-radius: 999px;
  padding: 10px 14px;
}
.nav .nav-link.active:not(.btn):not(.btn-primary):not(.btn-contact)::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background: linear-gradient(90deg, var(--brand-blue-700), var(--brand-cyan-300));
  border-radius:2px;
}
/* ensure CTA button never looks like active link */
.nav .btn, .nav .btn-primary, .nav .btn-contact {
  box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.12));
}
.nav .btn::after, .nav .btn-primary::after, .nav .btn-contact::after { display:none !important; }

/* Dark theme tweak */
body.dark .nav .nav-link.active{
  color: var(--text-100, #E6F0F7);
  background: rgba(255,255,255,.08);
}

/* === NAV: Make Contact CTA behave like other links (same hover/underline) === */
.nav .btn-contact,
.nav .btn-primary {
  position: relative;
  background: transparent;
  color: var(--brand-blue-700);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: none;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.nav .btn-contact::after,
.nav .btn-primary::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background: linear-gradient(90deg, var(--brand-blue-700), var(--brand-cyan-300));
  border-radius:2px;
  transform-origin: center;
  transform: scaleX(.6);
  opacity: .0;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.nav .btn-contact:hover,
.nav .btn-primary:hover {
  background: rgba(34,85,199,.08);
  transform: translateY(-1px);
}
.nav .btn-contact:hover::after,
.nav .btn-primary:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Dark theme */
body.dark .nav .btn-contact,
body.dark .nav .btn-primary {
  color: #cfe0ff;
  background: transparent;
  border-color: transparent;
}
body.dark .nav .btn-contact:hover,
body.dark .nav .btn-primary:hover {
  background: rgba(255,255,255,.08);
}

/* === NAV: Contact CTA active state same as links === */
.nav .btn-contact.active,
.nav .btn-primary.active {
  background: rgba(34,85,199,.10);
  color: var(--brand-blue-700);
  border-color: transparent;
}
.nav .btn-contact.active::after,
.nav .btn-primary.active::after {
  transform: scaleX(1);
  opacity: 1;
}
/* Dark theme */
body.dark .nav .btn-contact.active,
body.dark .nav .btn-primary.active {
  background: rgba(255,255,255,.08);
  color: var(--text-100, #E6F0F7);
}

/* === NAV: Contact CTA exact same design as other links (v3) === */
/* Base ghost style inside nav */
.nav a.btn-contact,
.nav a.btn-primary {
  position: relative;
  background: transparent !important;
  color: var(--brand-blue-700);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: none;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
/* Re-enable underline (::after) even if older rule disabled it */
.nav a.btn-contact::after,
.nav a.btn-primary::after{
  display: block !important;
  content:"";
  position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background: linear-gradient(90deg, var(--brand-blue-700), var(--brand-cyan-300));
  border-radius:2px;
  transform-origin: center;
  transform: scaleX(.6);
  opacity: .0;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
/* Hover like other links */
.nav a.btn-contact:hover,
.nav a.btn-primary:hover {
  background: rgba(34,85,199,.08);
  transform: translateY(-1px);
}
.nav a.btn-contact:hover::after,
.nav a.btn-primary:hover::after { transform: scaleX(1); opacity: 1; }
/* Active (current page) like other links */
.nav a.btn-contact.active,
.nav a.btn-primary.active {
  background: rgba(34,85,199,.10) !important;
  color: var(--brand-blue-700) !important;
  border-color: transparent;
}
.nav a.btn-contact.active::after,
.nav a.btn-primary.active::after { transform: scaleX(1); opacity: 1; }
/* Dark theme */
body.dark .nav a.btn-contact,
body.dark .nav a.btn-primary { color: #cfe0ff; }
body.dark .nav a.btn-contact:hover,
body.dark .nav a.btn-primary:hover { background: rgba(255,255,255,.08); }
body.dark .nav a.btn-contact.active,
body.dark .nav a.btn-primary.active {
  background: rgba(255,255,255,.08) !important;
  color: var(--text-100, #E6F0F7) !important;
}

/* === NAV: Remove blue outline/border on Contact CTA (active/focus) === */
.nav a.btn-contact,
.nav a.btn-primary {
  border: none !important;
}
.nav a.btn-contact:focus,
.nav a.btn-primary:focus,
.nav a.btn-contact:focus-visible,
.nav a.btn-primary:focus-visible,
.nav a.btn-contact.active,
.nav a.btn-primary.active {
  outline: none !important;
  border: none !important;
  box-shadow: none;
}

/* === NAV: Contact default black; hover blue; no underline on hover === */
.nav a.btn-contact,
.nav a.btn-primary {
  color: var(--ink, #0b1220) !important; /* default like other links */
}
body.dark .nav a.btn-contact,
body.dark .nav a.btn-primary {
  color: var(--text-100, #E6F0F7) !important;
}
.nav a.btn-contact:hover,
.nav a.btn-primary:hover {
  color: var(--brand-blue-700) !important; /* blue on hover */
}
/* prevent underline on hover for Contact CTA */
.nav a.btn-contact:hover::after,
.nav a.btn-primary:hover::after {
  opacity: 0 !important;
  transform: scaleX(.6) !important;
}


/* ===== Unified navbar logo swap (light default) ===== */
.brand-logo--light { display: block; }
.brand-logo--dark  { display: none;  }
body.dark .brand-logo--light { display: none;  }
body.dark .brand-logo--dark  { display: block; }
body.dark .burger span {display: block; width: 22px; height: 2px; background: #ffffff; margin: 5px 0; transition: .25s; }
.ap-stage-desktop{display: block}