/* ==========================================================================
   Innovalley Services — shared light-theme design system
   Display: Fraunces (serif, editorial)  ·  Body/UI: Plus Jakarta Sans
   ========================================================================== */
:root{
  --ink:#0B1220;--ink2:#1A2333;
  --bg:#FFFFFF;--bg2:#F6F8FC;--bg3:#EEF2F9;
  --card:#FFFFFF;--card2:#F7F9FD;
  --gl:rgba(11,18,32,0.03);--gl2:rgba(11,18,32,0.06);
  --line:#E7EBF3;--line2:#D9E0EC;
  --a1:#1B6EF3;--a2:#7C3AED;--a3:#0891B2;--a4:#F97316;--a5:#16A34A;
  --ag:linear-gradient(135deg,#1B6EF3,#7C3AED);
  --ag2:linear-gradient(135deg,#7C3AED,#F97316);
  --ag3:linear-gradient(135deg,#1B6EF3,#0891B2);
  --t1:#0B1220;--t2:#5A6B8C;--t3:#94A1BD;
  --f:'Plus Jakarta Sans',sans-serif;--d:'Fraunces',serif;
  --r:10px;--r2:18px;--r3:26px;--nh:72px;
  --shadow:0 8px 30px rgba(16,24,50,0.06);
  --shadow-lg:0 20px 50px rgba(16,24,50,0.10);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--f);background:var(--bg);color:var(--t1);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--d);font-weight:600;letter-spacing:-0.01em;line-height:1.14}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:var(--f);cursor:pointer}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* NAV */
.nav{position:fixed;inset:0 0 auto;height:var(--nh);z-index:900;
  background:rgba(255,255,255,0.82);backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(255,255,255,0.97);box-shadow:0 1px 0 var(--line2)}
.nw{max-width:1300px;margin:0 auto;padding:0 2rem;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nlogo{cursor:pointer;flex-shrink:0;display:flex;align-items:center}
.nlogo img{height:48px}
.nlinks{display:flex;align-items:center;gap:2px;list-style:none}
.nlinks a{background:none;border:none;color:var(--t2);font-family:var(--f);
  font-size:14.5px;font-weight:500;padding:8px 15px;border-radius:var(--r);
  transition:color .25s var(--ease);position:relative;display:inline-block}
.nlinks a::after{content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:linear-gradient(90deg,var(--a1),var(--a2));border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nlinks a:hover{color:var(--t1)}
.nlinks a:hover::after,.nlinks a.on::after{transform:scaleX(1)}
.nlinks a.on{color:var(--t1)}
.ncta{background:var(--ag)!important;color:#fff!important;
  padding:10px 24px!important;border-radius:100px!important;
  font-weight:600!important;font-size:14px!important;
  box-shadow:0 8px 22px rgba(27,110,243,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease)!important}
.ncta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(27,110,243,.38)!important}
.ncta::after{display:none!important}
.ham{display:none;background:none;border:none;padding:8px;color:var(--t1)}
.mob{display:none;position:fixed;inset:var(--nh) 0 0;
  background:rgba(255,255,255,.99);z-index:899;
  padding:2rem;flex-direction:column;gap:4px;overflow-y:auto}
.mob.open{display:flex}
.mob a{background:none;border:none;color:var(--t1);font-family:var(--d);
  font-size:24px;font-weight:600;padding:14px 0;
  border-bottom:1px solid var(--line);text-align:left;transition:.2s;display:block}
.mob a:hover{color:var(--a1)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);
  font-size:14.5px;font-weight:600;padding:13px 27px;border-radius:100px;
  border:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
  white-space:nowrap;letter-spacing:-.005em}
.btn-g{background:var(--ag);color:#fff;box-shadow:0 10px 24px rgba(27,110,243,.22)}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(27,110,243,.32)}
.btn-o{background:transparent;color:var(--t2);border:1px solid var(--line2)}
.btn-o:hover{color:var(--t1);border-color:var(--a1);transform:translateY(-2px)}
.btn-v{background:var(--a4);color:#fff}
.btn-v:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:13px}

/* LAYOUT */
.W{max-width:1280px;margin:0 auto;padding:0 2rem}
.sec{padding:6.5rem 0}.sec-s{padding:4rem 0}
.bg2{background:var(--bg2)}.bg3{background:var(--bg3)}
.bb{border-bottom:1px solid var(--line)}

/* TYPE */
.ey{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--a1);
  margin-bottom:1.25rem}
.ey::before{content:'';width:16px;height:2px;border-radius:2px;background:var(--ag);flex-shrink:0}
.gt,.gt2{background:var(--ag);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic}
.gt2{background:var(--ag2)}
.sh{font-size:clamp(1.8rem,2.8vw,2.5rem);color:var(--t1);margin-bottom:.9rem}
.sp{font-size:1.05rem;color:var(--t2);line-height:1.75;max-width:580px}
.shd{margin-bottom:3.5rem}.shd.c{text-align:center}.shd.c .sp{margin:0 auto}

/* HERO */
.hero{min-height:88vh;padding-top:var(--nh);display:flex;align-items:center;
  position:relative;overflow:hidden;background:var(--bg)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 75% 30%,rgba(27,110,243,.07) 0%,transparent 70%),
             radial-gradient(ellipse 45% 45% at 10% 85%,rgba(124,58,237,.06) 0%,transparent 70%)}
.hgrid{position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(11,18,32,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%)}
.hin{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;
  padding:4rem 2rem;display:grid;grid-template-columns:1.05fr 1fr;
  gap:4.5rem;align-items:center}
.hh1{font-family:var(--d);font-size:clamp(2.6rem,5vw,4.4rem);font-weight:600;color:var(--t1);
  line-height:1.05;letter-spacing:-0.01em;margin-bottom:1.5rem}
.hsub{font-size:1.15rem;color:var(--t2);line-height:1.75;max-width:480px;margin-bottom:2.5rem}
.hbtns{display:flex;flex-wrap:wrap;gap:12px}
.hvis{display:flex;align-items:center;justify-content:center;position:relative}
.hvis svg{width:100%;height:auto;max-width:520px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* TICKER */
.tkr{overflow:hidden;padding:1.5rem 0;background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.tkr::before,.tkr::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2}
.tkr::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.tkr::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.ttrack{display:flex;width:max-content;animation:scrollx 38s linear infinite}
.ttrack:hover{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tchip{display:flex;align-items:center;gap:8px;padding:0 2.25rem;
  white-space:nowrap;font-family:var(--f);font-size:13px;font-weight:500;
  color:var(--t3);border-right:1px solid var(--line)}
.tchip svg{opacity:.5}

/* GRID CARDS (AI showcase / services teaser) */
.aigrid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border-radius:var(--r3);overflow:hidden;border:1px solid var(--line)}
.aic{background:var(--card);padding:2.5rem 2rem;transition:background .3s var(--ease),transform .3s var(--ease);cursor:pointer;position:relative;overflow:hidden}
.aic:hover{background:var(--card2);transform:translateY(-2px)}
.aic::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ag);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.aic:hover::before{transform:scaleX(1)}
.aico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;border:1px solid var(--line2);background:var(--gl2);transition:transform .3s var(--ease)}
.aic:hover .aico{transform:scale(1.08) rotate(-4deg)}
.aih{font-size:1.15rem;font-weight:600;color:var(--t1);margin-bottom:.6rem}
.aip{font-size:13.5px;color:var(--t2);line-height:1.65;margin-bottom:1.1rem}
.aitags{display:flex;flex-wrap:wrap;gap:6px}
.aitag{background:var(--gl2);border:1px solid var(--line2);border-radius:20px;
  padding:4px 11px;font-family:var(--f);font-size:11px;font-weight:600;color:var(--t2)}

/* INFOGRAPHIC FLOW (process / timeline — reused across pages) */
.flow{position:relative;display:grid;grid-template-columns:repeat(var(--fn,4),1fr);gap:1.75rem;padding-top:1rem}
.flowline{position:absolute;top:34px;left:8%;right:8%;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--line2) 0 8px,transparent 8px 14px)}
.fnode{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.ficon{width:68px;height:68px;border-radius:50%;background:#fff;border:1.5px solid var(--line2);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;position:relative;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);box-shadow:var(--shadow)}
.fnode:hover .ficon{border-color:var(--a1);transform:translateY(-5px) scale(1.04);box-shadow:var(--shadow-lg)}
.fnum{position:absolute;top:-6px;right:-4px;background:var(--ag);color:#fff;font-family:var(--f);
  font-size:10.5px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;border:2px solid #fff;z-index:2}
.fnode h4{font-family:var(--d);font-size:1.05rem;font-weight:600;margin-bottom:.4rem;color:var(--t1)}
.fnode p{font-size:12.5px;color:var(--t2);line-height:1.6;max-width:190px}

/* COMPACT HIGHLIGHT CARDS (short-styled callouts — e.g. SEO/GEO/AEO trio) */
.hlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.hlcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:1.85rem;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hlcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--hlc,var(--ag))}
.hlcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hltag{display:inline-block;font-family:var(--d);font-style:italic;font-weight:600;font-size:1.5rem;
  color:var(--hlc1,var(--a1));margin-bottom:.65rem}
.hlcard h3{font-size:1rem;font-weight:700;margin-bottom:.5rem;color:var(--t1)}
.hlcard p{font-size:13px;color:var(--t2);line-height:1.62;margin-bottom:1.1rem}
.hllink{font-size:12.5px;font-weight:600;color:var(--t3);display:inline-flex;align-items:center;gap:5px;transition:color .25s,transform .25s var(--ease)}
.hlcard:hover .hllink{color:var(--hlc1,var(--a1));transform:translateX(3px)}

/* SERVICE TEASER GRID */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border-radius:var(--r3);overflow:hidden;border:1px solid var(--line)}
.sgrid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.sgrid-2{grid-template-columns:1fr}}
.sc{background:var(--card);padding:2rem 1.75rem;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);position:relative;overflow:hidden;display:block}
.sc:hover{background:var(--card2);transform:translateY(-2px)}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ag);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sc:hover::before{transform:scaleX(1)}
.sc:hover .scl{color:var(--a1);transform:translateX(4px)}
.scn{font-family:var(--f);font-size:11px;font-weight:700;color:var(--t3);letter-spacing:1px;margin-bottom:.9rem}
.scico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;border:1px solid var(--line2);background:var(--gl2);transition:transform .3s var(--ease)}
.sc:hover .scico{transform:scale(1.08) rotate(-4deg)}
.sct{font-size:1.02rem;font-weight:700;color:var(--t1);margin-bottom:.5rem;font-family:var(--f)}
.scd{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:.9rem}
.scl{font-family:var(--f);font-size:12px;font-weight:600;color:var(--t3);
  display:inline-flex;align-items:center;gap:5px;transition:transform .3s var(--ease),color .3s}

/* WHY / VALUE CARDS */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.wcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:2rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;box-shadow:var(--shadow)}
.wcard:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.wgrid-cta{grid-template-columns:1fr 1fr;margin-top:1.5rem}
@media(max-width:560px){.wgrid-cta{grid-template-columns:1fr}}
.wico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.wt{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.45rem;font-family:var(--f)}
.wd{font-size:13.5px;color:var(--t2);line-height:1.65}

/* PLAN / PACKAGE CARDS — scope by tier, no published pricing */
.plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.plancard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:2.25rem 1.75rem 1.75rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plancard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.plancard h3{font-family:var(--d);font-size:1.35rem;font-weight:600;color:var(--t1);margin-bottom:.5rem}
.plandesc{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:1.5rem;min-height:42px}
.plancard .splist{margin-bottom:1.75rem}
.plancard .splist li{font-size:13.5px;padding:7px 0}
.plancard-popular{border-color:var(--a1);box-shadow:0 14px 36px rgba(27,110,243,.16)}
.planbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ag);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 16px;border-radius:20px;white-space:nowrap}

/* TESTIMONIALS */
.testigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testicard{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:2rem 1.75rem;
  display:flex;flex-direction:column;position:relative;height:100%}
.testiquote{color:var(--a1);opacity:.35;margin-bottom:.75rem}
.testimsg{font-size:14.5px;color:var(--t2);line-height:1.75;flex:1;margin-bottom:1.5rem}
.testifoot{border-top:1px solid var(--line);padding-top:1rem}
.testiname{font-size:14px;font-weight:700;color:var(--t1)}
.testirole{font-size:12px;color:var(--t3);margin-top:2px}
.testiempty{text-align:center;padding:3rem 1rem;color:var(--t3);font-size:14px;border:1px dashed var(--line2);border-radius:var(--r2)}

/* Home page — auto-advancing testimonial carousel.
   Desktop/tablet: 2 cards per slide from up to 6 testimonials.
   Mobile: exactly 1 card per slide, from the first 3 only — swapped in via the breakpoint below. */
.testicarousel{max-width:920px;margin:0 auto}
.testislide{display:none}
.testislide.active{display:block}
.testipair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.testidots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:1.75rem}
.testidot{width:8px;height:8px;padding:0;border:none;border-radius:4px;background:var(--line2);cursor:pointer;transition:.25s var(--ease)}
.testidot.active{width:22px;background:var(--a1)}
.testicarousel-mobile,.testidots-mobile{display:none}
@media(max-width:768px){
  .testicarousel-wide,.testidots-wide{display:none}
  .testicarousel-mobile{display:block}
  .testidots-mobile{display:flex}
}

/* TECH GRID */
.techgrid{display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--card)}
.tc{padding:2rem 1.5rem;border-right:1px solid var(--line);transition:background .3s}
.tc:last-child{border-right:none}.tc:hover{background:var(--card2)}
.tch{font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--a1);margin-bottom:1rem}
.tcl{list-style:none}
.tcl li{font-size:13px;color:var(--t2);padding:5px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px}
.tcl li:last-child{border-bottom:none}
.tcl li::before{content:'';width:4px;height:4px;border-radius:50%;
  background:linear-gradient(135deg,var(--a1),var(--a2));flex-shrink:0}

/* CTA BANNER */
.ctab{background:var(--ink);border-radius:var(--r3);padding:4rem 3.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  position:relative;overflow:hidden}
.ctab::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ag)}
.ctab::after{content:'';position:absolute;top:-100px;right:-100px;width:350px;height:350px;
  background:radial-gradient(circle,rgba(91,140,255,.15),transparent 70%);border-radius:50%;pointer-events:none}
.ctal{position:relative;z-index:1}
.ctal h2{font-size:clamp(1.6rem,2.5vw,2.1rem);color:#fff;margin-bottom:.5rem}
.ctal p{color:rgba(255,255,255,.65);font-size:.97rem}
.ctaa{display:flex;gap:1rem;flex-shrink:0;flex-wrap:wrap;position:relative;z-index:1}

/* SERVICE / PAGE HEADER */
.ph{background:var(--bg2);padding-top:var(--nh);padding-bottom:5rem;
  position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phorb{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 85% 50%,rgba(27,110,243,.08),transparent 70%);pointer-events:none}
.phi{position:relative;z-index:1;max-width:720px;padding-top:4rem}
.sph{font-family:var(--d);font-size:clamp(2.1rem,4vw,3.4rem);font-weight:600;color:var(--t1);margin-bottom:.9rem}
.spp{font-size:1.05rem;color:var(--t2);max-width:600px;line-height:1.75}
.ssec{border-bottom:1px solid var(--line)}
/* Named grid areas keep desktop layout (text+CTA in one column, illustration in the other)
   while letting mobile reflow to: details → illustration → CTA, independent of DOM order. */
.srow{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"text illus" "cta illus";min-height:480px;align-items:stretch}
.srow.r{grid-template-areas:"illus text" "illus cta"}
.sc2{grid-area:text;padding:4.5rem 4rem 1rem 2rem;display:flex;flex-direction:column;justify-content:center}
.srow.r .sc2{padding:4.5rem 2rem 1rem 4rem}
.svbtn{grid-area:cta;padding:0 4rem 3.5rem 2rem}
.srow.r .svbtn{padding:0 2rem 3.5rem 4rem}
.sico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;border:1px solid var(--line2);background:var(--gl2)}
.splist{list-style:none;margin-bottom:2rem}
.splist li{display:flex;align-items:flex-start;gap:11px;padding:8px 0;font-size:14.5px;color:var(--t2);border-bottom:1px solid var(--line)}
.splist li:last-child{border-bottom:none}
.splist li::before{content:'';flex-shrink:0;width:18px;height:18px;border-radius:50%;margin-top:3px;
  background:rgba(27,110,243,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231B6EF3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/10px}
.sv{grid-area:illus;overflow:hidden}

/* Abstract signature illustration panel — replaces stock photography, one consistent visual language */
.vp{position:relative;overflow:hidden;height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.vp::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(64px);
  opacity:.4;background:var(--ag);top:-70px;right:-70px}
.ring{position:absolute;border-radius:50%;border:1.5px dashed var(--line2);pointer-events:none}
.ring1{width:220px;height:220px;animation:spin-slow 44s linear infinite}
.ring2{width:300px;height:300px;border-style:dotted;animation:spin-slow 65s linear infinite reverse}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.vin{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;gap:1.5rem;text-align:center}
.vico{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:floaty 5s ease-in-out infinite;box-shadow:var(--shadow-lg)}
.vtags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:320px}
.vtag{background:#fff;border:1px solid var(--line2);border-radius:20px;padding:4px 12px;font-family:var(--f);font-size:11px;font-weight:600;color:var(--t2);box-shadow:var(--shadow)}

/* ABOUT */
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.aimg{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r3);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.abadge{position:absolute;bottom:-16px;right:-16px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:1rem 1.25rem;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);z-index:3}
.abaico{width:38px;height:38px;border-radius:10px;background:var(--ag);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.abn{font-family:var(--d);font-size:1.3rem;font-weight:600;color:var(--t1);line-height:1}
.abl{font-family:var(--f);font-size:11.5px;color:var(--t3);margin-top:3px}
.apt{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}
.api{width:38px;height:38px;border-radius:10px;background:rgba(27,110,243,.08);border:1px solid rgba(27,110,243,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--a1)}
.aph{font-size:.97rem;font-weight:700;color:var(--t1);margin-bottom:3px;font-family:var(--f)}
.app{font-size:13.5px;color:var(--t2);line-height:1.65}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r3);overflow:hidden;border:1px solid var(--line)}
.val{background:var(--card);padding:2rem 1.5rem;text-align:center;transition:background .3s}
.val:hover{background:var(--card2)}
.vali{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;border:1px solid var(--line2);background:var(--gl2)}
.valt{font-size:.97rem;font-weight:700;color:var(--t1);margin-bottom:.4rem;font-family:var(--f)}
.vald{font-size:13px;color:var(--t2);line-height:1.6}

/* FAQ (AEO) */
.faqlist{max-width:820px;margin:0 auto}
.faqitem{border:1px solid var(--line);border-radius:var(--r2);margin-bottom:12px;background:var(--card);overflow:hidden;transition:border-color .3s}
.faqitem.open{border-color:var(--line2)}
.faqq{width:100%;text-align:left;background:none;border:none;padding:1.25rem 1.5rem;font-size:15px;font-weight:700;color:var(--t1);display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--f)}
.faqq svg{flex-shrink:0;transition:transform .3s var(--ease);color:var(--a1)}
.faqitem.open .faqq svg{transform:rotate(45deg)}
.faqa{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faqitem.open .faqa{max-height:400px}
.faqa p{padding:0 1.5rem 1.25rem;font-size:14px;color:var(--t2);line-height:1.7}

/* CLIENTS LOGO WALL — justified row layout: every tile shares one fixed height and its
   width is whatever that logo's own aspect ratio produces at that height. A square logo
   naturally gets a square tile, a portrait logo a narrow-tall tile, a landscape logo a
   wide-short tile — nothing is cropped, squeezed or padded into a shape it isn't. */
.clientgrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem}
.clientcell{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;height:150px;padding:1.25rem 1.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.clientcell:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.clientcell img{height:100%;width:auto;max-width:320px;display:block;object-fit:contain}
/* Background-backed cards — dark ones for white/light logos, light ones for extra separation from the page.
   Logos always display in their original colour — no grayscale/muting filter. */
.clientcell[class*="cbg-"]{border-color:transparent}

/* Hover reveal — just the title and (if there's more to say) an info icon that opens the detail popup */
.clienthover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:.5rem 1rem;background:rgba(8,10,18,.82);
  backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%);
  opacity:0;transition:opacity .3s var(--ease)}
.clientcell:hover .clienthover{opacity:1}
.chname{color:#fff;font-size:12.5px;font-weight:700;text-align:center;line-height:1.35;max-width:100%;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis}
.ccinfo{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:.2s var(--ease)}
.ccinfo:hover{background:var(--a1);border-color:transparent}
.clientsmore{text-align:center;margin-top:1.5rem;font-family:var(--d);font-style:italic;font-weight:600;font-size:1.6rem;color:var(--t2)}
.clientempty{text-align:center;padding:4rem 2rem;color:var(--t3);font-size:14px}

/* Client detail popup — opened from the info icon; the only place the website is a real, clickable link */
dialog.cdmodal{border:none;border-radius:18px;padding:0;width:min(380px,90vw);max-height:85vh;overflow-y:auto;
  box-shadow:0 30px 70px rgba(16,24,50,.28);position:fixed;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}
dialog.cdmodal::backdrop{background:rgba(11,18,32,.55)}
.cdbody{padding:2rem;position:relative;text-align:center}
.cdclose{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);
  background:#fff;color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.cdclose:hover{background:var(--ink);color:#fff;border-color:transparent}
.cdlogowrap{display:inline-flex;align-items:center;justify-content:center;height:64px;padding:0 1.25rem;
  border-radius:var(--r);margin-bottom:1.1rem}
.cdlogowrap img{max-height:100%;max-width:180px;object-fit:contain}
.cdname{font-family:var(--d);font-size:1.05rem;font-weight:600;color:var(--t1);margin-bottom:.3rem}
.cdname + .cdinfo{margin-top:.8rem}
.cdlocsub{font-size:12px;color:var(--t3);margin-bottom:.8rem}
/* Detail rows — left-aligned, boxed; only the service list uses point-styled chips */
.cdinfo{text-align:left;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);padding:.25rem 1.1rem;margin-bottom:1.5rem}
.cdrow{padding:.7rem 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--t2);line-height:1.6}
.cdrow:last-child{border-bottom:none}
.cdtypes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.cdtype{display:inline-block;background:var(--gl2);border:1px solid var(--line2);color:var(--t2);font-size:11px;
  font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.cdnoteslist{list-style:none}
.cdnoteslist li{position:relative;padding-left:18px}
.cdnoteslist li:not(:last-child){margin-bottom:6px}
.cdnoteslist li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--a1)}
.cdlink{width:100%;justify-content:center}
@media(max-width:768px){.clientcell{height:130px;padding:1rem 1.25rem}.clientcell img{max-width:250px}}
@media(max-width:480px){.clientgrid{gap:.75rem}.clientcell{height:118px;padding:.8rem 1.1rem}.clientcell img{max-width:190px}
  .clienthover{padding:.4rem .85rem;gap:6px}}

/* Background swatches — Plain, Gradient Dark (for white/light logos), Gradient Light (subtle separation) */
.cbg-black{background:#000}
.cbg-charcoal{background:#374151}
.cbg-cloud{background:#E5E7EB}
.cbg-navy{background:linear-gradient(135deg,#0B1220,#1A2333)}
.cbg-midnight{background:linear-gradient(135deg,#020617,#1E293B)}
.cbg-indigo{background:linear-gradient(135deg,#1B6EF3,#7C3AED)}
.cbg-violet{background:linear-gradient(135deg,#7C3AED,#DB2777)}
.cbg-berry{background:linear-gradient(135deg,#BE185D,#7C3AED)}
.cbg-sunset{background:linear-gradient(135deg,#F97316,#DC2626)}
.cbg-ocean{background:linear-gradient(135deg,#0C4A6E,#0891B2)}
.cbg-emerald{background:linear-gradient(135deg,#16A34A,#0891B2)}
.cbg-sky{background:linear-gradient(135deg,#BFDBFE,#C7D2FE)}
.cbg-ice{background:linear-gradient(135deg,#E0F2FE,#F0F9FF)}
.cbg-lavender{background:linear-gradient(135deg,#E9D5FF,#BFDBFE)}
.cbg-rose{background:linear-gradient(135deg,#FBCFE8,#FECACA)}
.cbg-peach{background:linear-gradient(135deg,#FED7AA,#FBCFE8)}
.cbg-sand{background:linear-gradient(135deg,#FDE68A,#FEF3C7)}
.cbg-mint{background:linear-gradient(135deg,#BBF7D0,#A5F3FC)}
.cbg-slate{background:linear-gradient(135deg,#E2E8F0,#CBD5E1)}

/* SWATCH DROPDOWN — grouped colour/gradient picker, 4 per row, used in admin client-logo forms */
.swatchdrop{position:relative;display:inline-block}
.swatchdrop summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border:1px solid var(--line2);border-radius:20px;font-size:12.5px;color:var(--t2);
  background:#fff;user-select:none}
.swatchdrop summary::-webkit-details-marker{display:none}
.swatchdrop[open] summary{border-color:var(--a1)}
.swatchdrop .swpreview{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,18,32,.15);flex-shrink:0}
.swatchdrop .panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;background:#fff;
  border:1px solid var(--line2);border-radius:14px;padding:14px;box-shadow:var(--shadow-lg);width:216px}
.swatchgroup + .swatchgroup{margin-top:12px}
.swatchgroup-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:7px}
.swatchpicker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;justify-items:center}
.swatch{width:34px;height:34px;border-radius:50%;position:relative;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(11,18,32,.1);transition:transform .2s var(--ease)}
.swatch:hover{transform:scale(1.1)}
.swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.swatch:has(input:checked){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--a1)}
.swatch.cbg-none{background:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.swatch.cbg-none:has(input:checked){box-shadow:0 0 0 2px #fff,0 0 0 4px var(--a1),inset 0 0 0 1px var(--line2)}

/* CONTACT / FORMS */
.ctgrid{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;align-items:start}
.cicard{background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow)}
.ciitem{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.ciitem:last-child{border-bottom:none}
.ciico{width:40px;height:40px;border-radius:10px;background:rgba(27,110,243,.08);border:1px solid rgba(27,110,243,.18);display:flex;align-items:center;justify-content:center;color:var(--a1);flex-shrink:0}
.cil{font-family:var(--f);font-size:11px;font-weight:700;color:var(--a1);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.civ{font-size:14px;color:var(--t1);font-weight:500;line-height:1.55}
.civ a{color:var(--t1)}.civ a:hover{color:var(--a1)}
.cis{font-size:12px;color:var(--t3);margin-top:2px}
.cf{background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);padding:2.5rem;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cf::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ag)}
.cf h3{font-family:var(--d);font-size:1.5rem;font-weight:600;color:var(--t1);margin-bottom:.25rem}
.cfsub{font-size:12.5px;color:var(--t3);margin-bottom:2rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--t3);margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase}
.fg input,.fg textarea,.fg select{width:100%;padding:11px 14px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);font-family:var(--f);font-size:14px;color:var(--t1);outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--t3)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(27,110,243,.1);background:#fff}
.fg select{color:var(--t2)}
.fg textarea{resize:vertical;min-height:120px}
.fok{display:none;background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.25);border-radius:var(--r);padding:1.5rem;text-align:center}
.fer{display:none;background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.2);border-radius:var(--r);padding:10px 14px;margin-bottom:1rem;font-size:13px;color:#DC2626}

/* FOOTER */
.ft{background:var(--ink);padding:4rem 0 0;color:#fff}
.ftg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
.ftlogo{height:52px;width:auto;display:block;margin-bottom:1.1rem}
.ftbrand p{font-size:13.5px;color:rgba(255,255,255,.55);margin:0 0 1.5rem;line-height:1.7;max-width:300px}
.ftsocial{display:flex;gap:8px}
.ftsoc{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:.25s var(--ease)}
.ftsoc:hover{color:#fff;transform:translateY(-2px);border-color:transparent}
.ftsoc.linkedin:hover{background:#0A66C2}
.ftsoc.twitter:hover{background:#1DA1F2}
.ftsoc.facebook:hover{background:#1877F2}
.ftsoc.instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ftsoc.youtube:hover{background:#FF0000}
.ftcol h5{font-family:var(--f);font-size:11px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:1.25rem}
.ftcol ul{list-style:none}
.ftcol ul li{margin-bottom:.6rem}
.ftcol ul li a{color:rgba(255,255,255,.7);font-size:14px;transition:.2s;display:inline-block}
.ftcol ul li a:hover{color:#5B9CFF}
.ftplots{color:#86EFAC!important}
.ftplots:hover{color:#BBF7D0!important}
.ftci{display:flex;gap:8px;align-items:flex-start}
.ftci svg{flex-shrink:0;margin-top:3px;color:rgba(255,255,255,.4)}
.ftci span{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.55}
.ftci a{color:rgba(255,255,255,.65)}.ftci a:hover{color:#5B9CFF}
.ftphone{font-size:16px!important;font-weight:700}
.ftphone a{color:#fff!important}
.ftbot{padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ftbot p{font-size:12px;color:rgba(255,255,255,.4)}
.ftlinks{display:flex;gap:1.5rem}
.ftlinks a{font-size:12px;color:rgba(255,255,255,.4);transition:.2s}
.ftlinks a:hover{color:#fff}

/* SCROLL TOP */
.stb{position:fixed;bottom:20px;left:20px;z-index:899;width:34px;height:34px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.stb.on{opacity:1;transform:translateY(0)}
.stb:hover{background:var(--ag);border-color:transparent}
.stb:hover svg{color:#fff}
.stb svg{width:15px;height:15px;color:var(--t2)}

/* WHATSAPP FAB */
.wafab{position:fixed;bottom:20px;right:20px;z-index:899;width:44px;height:44px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .3s var(--ease)}
.wafab:hover{transform:scale(1.08)}

/* OFFER POPUP */
#offerPop{display:none;position:fixed;inset:0;background:rgba(11,18,32,.6);z-index:2100;align-items:center;justify-content:center;padding:1.5rem}
#offerPop.show{display:flex}
.offerbox{position:relative;max-width:440px;width:100%;background:var(--card);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-lg)}
.offerbox img{width:100%;display:block}
.offercap{padding:1.5rem;text-align:center}
.offercap p{font-size:15px;color:var(--t1);font-weight:600;margin-bottom:1rem}
.offerx{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);border:1px solid var(--line2);border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.2s;z-index:2}
.offerx:hover{background:var(--ink);color:#fff}

/* PRIVACY MODAL */
.legalmodal{display:none;position:fixed;inset:0;background:rgba(11,18,32,.6);z-index:2000;overflow-y:auto;padding:2rem}
.pvmin{max-width:640px;margin:2rem auto;background:var(--card);border:1px solid var(--line2);border-radius:var(--r3);padding:2.5rem;position:relative}
.pvmin h2{font-size:1.4rem;color:var(--t1);margin-bottom:1rem}
.pvmin h4{font-size:.95rem;color:var(--t1);margin:.9rem 0 .4rem;font-family:var(--f)}
.pvmin p{font-size:13.5px;color:var(--t2);line-height:1.7;margin-bottom:.75rem}
.pvx{position:absolute;top:1rem;right:1rem;background:var(--card2);border:1px solid var(--line2);border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.2s}
.pvx:hover{background:var(--ag);color:#fff;border-color:transparent}

/* ANIMATION */
.fu{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fu.vis{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:1024px){
  .hin{grid-template-columns:1fr}.hvis{display:none}
  .aigrid{grid-template-columns:1fr 1fr}.sgrid{grid-template-columns:1fr 1fr}.hlgrid{grid-template-columns:1fr 1fr}
  .wgrid{grid-template-columns:1fr 1fr}.techgrid{grid-template-columns:repeat(3,1fr)}
  .plangrid{grid-template-columns:1fr}.plancard-popular{order:-1}
  .testigrid{grid-template-columns:1fr 1fr}
  .agrid{grid-template-columns:1fr}.vals{grid-template-columns:1fr 1fr}
  .ctgrid{grid-template-columns:1fr}
  .ftg{grid-template-columns:1fr 1fr}
  .srow,.srow.r{grid-template-columns:1fr;grid-template-areas:"text" "illus" "cta";min-height:auto}
  .sc2,.srow.r .sc2{padding:2.5rem 1.5rem 1rem}
  .svbtn,.srow.r .svbtn{padding:0 1.5rem 2.5rem}
  .vp{min-height:280px}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}.flowline{display:none}
}
@media(max-width:768px){
  .hh1{font-size:2.5rem}.nlinks{display:none}.ham{display:flex}
  .aigrid,.sgrid,.wgrid,.hlgrid,.testigrid{grid-template-columns:1fr}
  .techgrid{grid-template-columns:1fr 1fr}
  .ctab{flex-direction:column;text-align:center;padding:2.5rem 1.5rem}
  .ctaa{justify-content:center}.ftbot{flex-direction:column;text-align:center;padding-bottom:2.5rem}
  .ftright{display:block}
  .f2{grid-template-columns:1fr}.vals{grid-template-columns:1fr}
  .cf{padding:1.75rem 1.25rem}
  .ciitem{padding:1rem 1.1rem;gap:.75rem}
  .ciico{width:34px;height:34px}
  .ciico svg{width:15px;height:15px}
  .ftg{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:0;display:flex;flex-direction:column}
  .fnode{flex-direction:row;text-align:left;align-items:flex-start;gap:1.1rem;padding:0 0 2rem 0;position:relative}
  .fnode:not(:last-child)::before{content:'';position:absolute;left:33px;top:68px;bottom:0;width:2px;
    background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 11px)}
  .ficon{margin-bottom:0;flex-shrink:0}
  .fnum{top:-4px;right:auto;left:-4px}
}
@media(max-width:480px){
  .sec{padding:4rem 0}.techgrid{grid-template-columns:1fr}
  .W{padding:0 1.25rem}
  .nw{padding:0 1.25rem;gap:.6rem}
  .ncta{padding:8px 16px!important;font-size:12.5px!important}
  .hin{padding:3rem 1.25rem}
  .ph{padding-bottom:3rem}.phi{padding-top:3rem}
  .cf{padding:1.5rem 1rem!important}
  .cicard{padding:0!important}
  .ciitem{padding:.9rem .9rem;gap:.6rem}
  .ciico{width:30px;height:30px;border-radius:8px}
  .ciico svg{width:14px;height:14px}
  .fg input,.fg textarea,.fg select{padding:10px 12px}
  .ctab{padding:1.75rem 1rem!important}
}