/* ============================================================
   Ruchi Software Solutions — main stylesheet (light & bright)
   Layout: airy white canvas, one colour per service, bright
   gradient moments reserved for hero, CTA and highlights.
   ============================================================ */
:root{
  color-scheme: light;
  --bg:#FFFFFF; --bg2:#F4F6FF; --bg3:#EEF2FF; --card:#FFFFFF; --card2:#F5F7FF;
  --line:#E3E8F6; --line2:#CCD4EE;
  --text:#0D1330; --soft:#353D5E; --muted:#5E6789;
  --blue:#2F5BFF; --coral:#FF5A6A; --sun:#FFB21E; --mint:#0FBF95; --violet:#8A5CF6; --sky:#16A7F2;
  --accent:var(--blue); --on-accent:#FFFFFF;
  --grad:linear-gradient(100deg,#2F5BFF 0%,#8A5CF6 50%,#FF5A6A 100%);
  --grad-soft:linear-gradient(135deg,#EEF2FF,#FFF1F3 60%,#FFF8E6);
  --shadow-sm:0 2px 6px rgba(29,42,98,.06),0 1px 2px rgba(29,42,98,.05);
  --shadow:0 18px 40px -18px rgba(29,42,98,.22),0 4px 12px -4px rgba(29,42,98,.08);
  --shadow-lg:0 40px 80px -30px rgba(29,42,98,.35);
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --radius:20px; --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;overflow-x:hidden;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ic{flex-shrink:0;vertical-align:middle}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:.76rem;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;font-weight:500}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:10px}
.mobile-only{display:none!important}
::selection{background:#FFE08A;color:var(--text)}
:focus-visible{outline:3px solid rgba(47,91,255,.45);outline-offset:3px;border-radius:8px}

/* progress, cursor */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--grad);z-index:100}
.cursor-glow{display:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:200;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cur-dot{width:8px;height:8px;background:var(--coral)}
.cur-ring{width:38px;height:38px;border:2px solid var(--blue);transition:width .25s,height .25s,border-color .25s,background .25s,opacity .3s}
.cur-ring.big{width:64px;height:64px;border-color:var(--coral);background:rgba(255,90,106,.08)}
body.has-cursor .cur-dot,body.has-cursor .cur-ring{opacity:1}
main,footer,header{position:relative;z-index:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.93rem;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate}
.btn-lg{padding:16px 30px;font-size:1rem}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(47,91,255,.7)}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .35s;z-index:-1}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{box-shadow:0 16px 34px -12px rgba(138,92,246,.7)}
.btn-primary .ic{transition:transform .25s}
.btn-primary:hover .ic{transform:translateX(4px)}
.btn-ghost{border:1.5px solid var(--line2);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-sm)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}
.btn-ghost .ripple{background:rgba(47,91,255,.18)}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ============ HEADER ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s,transform .35s,box-shadow .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line);box-shadow:0 6px 24px -18px rgba(29,42,98,.4)}
.site-header.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.1}
.logo-mark{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;box-shadow:0 8px 20px -8px rgba(138,92,246,.7);transition:transform .4s}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.06)}
.logo small{display:block;font-family:var(--mono);font-weight:500;font-size:.6rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}
.menu{display:flex;gap:6px;align-items:center}
.menu>a,.has-mega>a{color:var(--soft);font-size:.93rem;font-weight:600;transition:color .2s,background .2s;padding:9px 14px;border-radius:999px;display:inline-block}
.menu>a:hover,.has-mega:hover>a{color:var(--blue);background:var(--bg3)}
.menu a.on{color:var(--blue);background:var(--bg3)}
.chev{font-size:.7rem;margin-left:2px}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);width:660px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:.25s}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-item{display:flex;gap:12px;padding:12px;border-radius:14px;transition:background .2s;align-items:flex-start}
.mega-item:hover{background:var(--bg2)}
.mega-item b{display:block;font-size:.92rem;font-family:var(--display)}
.mega-item small{color:var(--muted);font-size:.78rem;line-height:1.4;display:block;margin-top:2px}
.mi-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.mega-item:nth-child(6n+1) .mi-ico{background:var(--coral)}
.mega-item:nth-child(6n+2) .mi-ico{background:var(--blue)}
.mega-item:nth-child(6n+3) .mi-ico{background:var(--violet)}
.mega-item:nth-child(6n+4) .mi-ico{background:var(--mint)}
.mega-item:nth-child(6n+5) .mi-ico{background:var(--sun)}
.mega-item:nth-child(6n+6) .mi-ico{background:var(--sky)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-phone{display:flex;gap:6px;align-items:center;color:var(--soft);font-size:.9rem;font-weight:600}
.menu-btn{display:none;background:#fff;border:1.5px solid var(--line2);color:var(--text);border-radius:12px;width:44px;height:44px;cursor:pointer;place-items:center}

/* ============ HERO ============ */
.hero{position:relative;padding:150px 0 90px;overflow:hidden;background:linear-gradient(180deg,#F7F9FF 0%,#FFFFFF 70%)}
.net{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle,#CCD4EE 1.2px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse at 60% 30%,#000 15%,transparent 70%);opacity:.8}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;will-change:transform}
.blob.b1{width:420px;height:420px;background:#9DB2FF;top:-120px;right:6%}
.blob.b2{width:340px;height:340px;background:#FFB3BC;top:180px;right:-80px}
.blob.b3{width:300px;height:300px;background:#FFE28A;bottom:-120px;left:8%}
.blob.b4{width:260px;height:260px;background:#9EF0D8;top:40px;left:-100px;opacity:.45}
.glow{display:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem);margin:20px 0 22px}
.rotator{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.14em}
.rotator span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.7,0,.2,1),opacity .6s;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;padding-bottom:.08em}
.rotator span.on{transform:none;opacity:1}
.rotator span.out{transform:translateY(-110%);opacity:0}
.lead{font-size:1.14rem;color:var(--muted);max-width:600px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-trust span{display:flex;gap:8px;align-items:center;font-size:.86rem;font-weight:600;color:var(--soft);background:#fff;border:1px solid var(--line);padding:7px 14px 7px 8px;border-radius:999px;box-shadow:var(--shadow-sm)}
.hero-trust .ic{color:#fff;background:var(--mint);border-radius:50%;padding:3px;width:22px;height:22px}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:.84rem;color:var(--soft);background:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,191,149,.6)}70%{box-shadow:0 0 0 10px rgba(15,191,149,0)}100%{box-shadow:0 0 0 0 rgba(15,191,149,0)}}
.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.7rem;font-family:var(--mono);letter-spacing:.14em}
.scroll-hint i{width:22px;height:36px;border:2px solid var(--line2);border-radius:12px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:3px;background:var(--coral);transform:translateX(-50%);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;top:7px}100%{opacity:0;top:20px}}

/* ============ HERO BUILDER (interactive) ============ */
.builder{position:relative}
.bld-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:center}
.bld-chips button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line2);background:#fff;color:var(--soft);padding:8px 14px;border-radius:999px;font:600 .84rem var(--body);cursor:pointer;transition:.25s;box-shadow:var(--shadow-sm)}
.bld-chips button i{width:10px;height:10px;border-radius:50%;background:var(--c);transition:transform .25s}
.bld-chips button:hover{border-color:var(--c);transform:translateY(-2px)}
.bld-chips button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.bld-chips button[aria-pressed="true"] i{background:#fff;transform:scale(1.2)}
.bld-frame{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.builder:hover .bld-frame{transform:perspective(1200px) rotateY(0) rotateX(0)}
.bld-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.bld-bar i{width:10px;height:10px;border-radius:50%}
.bld-bar i:nth-child(1){background:#FF6159}.bld-bar i:nth-child(2){background:#FFBE2F}.bld-bar i:nth-child(3){background:#2ACB42}
.bld-bar em{flex:1;margin-left:10px;height:22px;border-radius:7px;background:#fff;border:1px solid var(--line);font-style:normal;font:500 .7rem var(--mono);color:var(--muted);display:flex;align-items:center;padding-left:10px;gap:6px}
.bld-bar em b{color:var(--mint)}
.bld-body{position:relative;height:340px;padding:14px;overflow:hidden;background:#fff}
.bl{position:absolute;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.builder.s-site .bl.site,.builder.s-store .bl.store,.builder.s-app .bl.app,.builder.s-seo .bl.seo{opacity:1;transform:none}
.bl-nav{left:14px;right:14px;top:14px;height:28px;display:flex;align-items:center;justify-content:space-between}
.bl-nav b{width:70px;height:12px;border-radius:6px;background:var(--grad)}
.bl-nav span{display:flex;gap:8px}.bl-nav span i{width:34px;height:8px;border-radius:4px;background:var(--line)}
.bl-nav span i:last-child{width:52px;height:20px;border-radius:10px;background:var(--blue)}
.bl-hero{left:14px;right:14px;top:52px;height:96px;border-radius:14px;background:linear-gradient(120deg,#EAF0FF,#FFE9EC);padding:16px;display:flex;flex-direction:column;gap:8px}
.bl-hero i{height:12px;border-radius:6px;background:var(--text);width:62%}
.bl-hero i:nth-child(2){width:44%;background:var(--coral)}
.bl-hero u{margin-top:6px;width:84px;height:22px;border-radius:11px;background:var(--blue);text-decoration:none}
.bl-hero.store,.bl-hero.app,.bl-hero.seo{display:none}
.bl-shop{left:14px;right:14px;top:160px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transition-delay:.05s}
.bl-shop div{height:82px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);position:relative;padding:8px}
.bl-shop div::before{content:"";display:block;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--c1),var(--c2))}
.bl-shop div::after{content:"$";position:absolute;right:8px;bottom:8px;font:700 .7rem var(--mono);color:var(--mint)}
.bl-shop div:nth-child(1){--c1:#FFB3BC;--c2:#FF5A6A}.bl-shop div:nth-child(2){--c1:#FFE28A;--c2:#FFB21E}.bl-shop div:nth-child(3){--c1:#9EF0D8;--c2:#0FBF95}
.bl-cart{right:22px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font:700 .72rem var(--body);box-shadow:0 6px 14px -4px rgba(255,90,106,.8);z-index:3}
.bl-dash{left:14px;right:14px;top:258px;height:70px;border-radius:12px;background:var(--text);display:flex;align-items:flex-end;gap:6px;padding:12px;transition-delay:.1s}
.bl-dash span{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(var(--sky),var(--violet));height:var(--h);transform-origin:bottom;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.builder.s-app .bl-dash span{transform:scaleY(1)}
.bl-dash span:nth-child(2n){background:linear-gradient(var(--sun),var(--coral))}
.bl-kpi{left:14px;top:160px;display:flex;gap:10px;right:14px;transition-delay:.02s}
.builder.s-store .bl-kpi{display:none}
.bl-kpi div{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow-sm)}
.bl-kpi b{display:block;font:700 1rem var(--display);color:var(--violet)}
.bl-kpi small{font-size:.62rem;color:var(--muted)}
.bl-google{right:10px;top:118px;width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);z-index:4;transition-delay:.15s}
.bl-google .q{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.66rem;color:var(--muted);margin-bottom:10px}
.bl-google .r{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;font-size:.68rem;font-weight:600}
.bl-google .r small{color:var(--muted);font-weight:500;margin-left:auto}
.bl-google .r.you{background:#E9FBF5;color:#067A5F}
.bl-google .r i{width:18px;height:18px;border-radius:50%;background:var(--line);display:grid;place-items:center;font:700 .6rem var(--mono);font-style:normal;color:var(--muted)}
.bl-google .r.you i{background:var(--mint);color:#fff}
.bld-caption{margin-top:14px;text-align:center;font-size:.84rem;color:var(--muted)}
.bld-caption b{color:var(--text)}

/* page hero (inner pages) */
.page-hero{position:relative;padding:150px 0 80px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--grad-soft)}
.page-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:16px 0 20px;max-width:900px}
.page-hero .lead{max-width:720px}
.page-hero .net{opacity:.7}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);margin-bottom:22px;font-weight:500}
.crumbs a:hover{color:var(--blue)}
.crumbs b{color:var(--text);font-weight:600}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 22px;border-right:1px solid var(--line);transition:background .3s}
.stat:hover{background:var(--bg2)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat:nth-child(1) b{color:var(--blue)}.stat:nth-child(2) b{color:var(--coral)}.stat:nth-child(3) b{color:var(--mint)}.stat:nth-child(4) b{color:var(--violet)}
.stat span{color:var(--muted);font-size:.9rem}

/* marquee */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:18px 0;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marq 45s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:55s}
.marquee.rev{padding-top:0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font:500 .82rem var(--mono);color:var(--soft);background:var(--bg2);white-space:nowrap;transition:.2s}
.marquee span:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section{padding:110px 0;position:relative}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:54px;flex-wrap:wrap}
.sec-head h2{margin-top:12px;max-width:680px}
.sec-head p{color:var(--muted);max-width:430px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head.center p{max-width:620px}

/* service cards — one colour each */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{--c:var(--blue);--t:#EEF2FF;position:relative;padding:34px 30px;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s,transform .3s;box-shadow:var(--shadow-sm)}
.svc-card:nth-child(6n+1){--c:var(--coral);--t:#FFEEF0}
.svc-card:nth-child(6n+2){--c:var(--blue);--t:#EDF1FF}
.svc-card:nth-child(6n+3){--c:var(--violet);--t:#F3EEFF}
.svc-card:nth-child(6n+4){--c:var(--mint);--t:#E6FAF4}
.svc-card:nth-child(6n+5){--c:#E89A00;--t:#FFF6E0}
.svc-card:nth-child(6n+6){--c:var(--sky);--t:#E6F6FE}
.svc-card::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:var(--t);transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:0}
.svc-card:hover::before{transform:scale(5)}
.svc-card>*{position:relative;z-index:1}
.svc-card:hover{border-color:var(--c);box-shadow:var(--shadow)}
.svc-ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--c);color:#fff;margin-bottom:22px;transition:transform .4s;box-shadow:0 10px 20px -10px var(--c)}
.svc-card:hover .svc-ico{transform:rotate(-10deg) scale(1.08)}
.svc-card h3{font-size:1.32rem;margin-bottom:8px}
.in-city{display:block;font-size:.84rem;color:var(--c);font-weight:600;margin-top:4px;font-family:var(--mono)}
.svc-card p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.svc-card ul{list-style:none;margin-bottom:22px;display:grid;gap:7px}
.svc-card li{font-size:.87rem;color:var(--soft);padding-left:20px;position:relative}
.svc-card li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:3px;background:var(--c);transform:rotate(45deg)}
.svc-more{margin-top:auto;display:inline-flex;gap:8px;align-items:center;color:var(--c);font-weight:700;font-size:.92rem}
.svc-more .ic{transition:transform .25s}
.svc-card:hover .svc-more .ic{transform:translateX(6px)}

/* spotlight */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(47,91,255,.08),transparent 45%);opacity:0;transition:opacity .3s;z-index:0}
.spot:hover::after{opacity:1}

/* compare slider */
.compare{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);aspect-ratio:16/8;max-width:100%;background:#fff;user-select:none;touch-action:pan-y}
.cmp-pane{position:absolute;inset:0;display:flex;flex-direction:column}
.cmp-after{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp-label{position:absolute;top:16px;z-index:5;font:700 .74rem var(--mono);letter-spacing:.1em;padding:6px 12px;border-radius:999px}
.cmp-before .cmp-label{left:16px;background:#EAEAEA;color:#666}
.cmp-after .cmp-label{right:16px;background:var(--mint);color:#fff}
.old{background:#E9E6DD;font-family:"Times New Roman",serif;color:#333;height:100%;padding:0}
.old .o-top{background:#27408B;color:#fff;padding:10px 18px;font-size:1.1rem;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
.old .o-top small{font-size:.7rem;color:#FFFF66;text-decoration:underline}
.old .o-marq{background:#FFFF66;color:#C00;font-size:.78rem;padding:3px 18px;white-space:nowrap;overflow:hidden}
.old .o-body{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:14px 18px;flex:1}
.old .o-side{background:#D0CCBF;border:2px outset #aaa;padding:8px;font-size:.72rem;display:grid;gap:4px;align-content:start}
.old .o-side u{color:#00E}
.old .o-main h4{font-family:"Times New Roman",serif;font-size:1.3rem;color:#8B0000;letter-spacing:0;margin-bottom:6px}
.old .o-main p{font-size:.78rem;line-height:1.35;margin-bottom:6px}
.old .o-main .o-img{height:70px;background:repeating-linear-gradient(45deg,#bbb 0 8px,#ccc 8px 16px);border:2px inset #999;display:grid;place-items:center;font-size:.7rem;color:#555;margin:8px 0}
.old .o-count{font:.7rem monospace;background:#000;color:#0F0;display:inline-block;padding:2px 6px}
.new{background:linear-gradient(135deg,#F4F7FF,#FFF3F5);height:100%;display:flex;flex-direction:column}
.new .n-top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px}
.new .n-top b{font:800 1rem var(--display);display:flex;gap:8px;align-items:center}
.new .n-top b i{width:22px;height:22px;border-radius:7px;background:var(--grad)}
.new .n-top span{display:flex;gap:14px;font-size:.74rem;color:var(--muted);font-weight:600;align-items:center}
.new .n-top span em{font-style:normal;background:var(--blue);color:#fff;padding:6px 12px;border-radius:999px}
.new .n-body{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;padding:10px 22px 22px;align-items:center}
.new h4{font:800 clamp(1.1rem,2.4vw,1.9rem)/1.05 var(--display);letter-spacing:-.02em}
.new h4 em{font-style:normal;color:var(--coral)}
.new p{font-size:.8rem;color:var(--muted);margin:8px 0 12px}
.new .n-btns{display:flex;gap:8px}
.new .n-btns i{height:28px;width:100px;border-radius:999px;background:var(--blue)}
.new .n-btns i+i{background:#fff;border:1.5px solid var(--line2);width:80px}
.new .n-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.new .n-cards div{background:#fff;border-radius:14px;padding:12px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.new .n-cards div i{display:block;width:26px;height:26px;border-radius:9px;margin-bottom:8px}
.new .n-cards div:nth-child(1) i{background:var(--coral)}.new .n-cards div:nth-child(2) i{background:var(--mint)}.new .n-cards div:nth-child(3) i{background:var(--sun)}.new .n-cards div:nth-child(4) i{background:var(--violet)}
.new .n-cards b{display:block;height:8px;border-radius:4px;background:var(--line);width:80%}
.new .n-cards small{display:block;height:6px;border-radius:3px;background:var(--bg3);width:60%;margin-top:6px}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;background:#fff;transform:translateX(-50%);z-index:6;box-shadow:0 0 0 1px rgba(13,19,48,.1),0 0 20px rgba(13,19,48,.2);pointer-events:none}
.cmp-handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.7rem;letter-spacing:2px;box-shadow:var(--shadow)}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:7;margin:0;padding:0;border:0}
.cmp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.cmp-points>div{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.cmp-points .ic{color:#fff;border-radius:10px;padding:6px;width:34px;height:34px}
.cmp-points div:nth-child(1) .ic{background:var(--blue)}.cmp-points div:nth-child(2) .ic{background:var(--coral)}.cmp-points div:nth-child(3) .ic{background:var(--mint)}
.cmp-points b{display:block}
.cmp-points small{color:var(--muted)}

/* industries tabs */
.tabs{display:grid;grid-template-columns:290px 1fr;gap:30px}
.tab-list{display:flex;flex-direction:column;gap:8px}
.tab-list button{text-align:left;background:#fff;border:1.5px solid var(--line);color:var(--soft);padding:16px 18px;border-radius:16px;font:700 1.02rem var(--display);cursor:pointer;transition:.25s;display:flex;align-items:center;gap:12px}
.tab-list button .ic{color:var(--muted);transition:.25s}
.tab-list button:hover{border-color:var(--blue);transform:translateX(4px)}
.tab-list button.on{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 12px 24px -12px rgba(47,91,255,.8)}
.tab-list button.on .ic{color:#fff}
.tab-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:26px;padding:40px;animation:fadeUp .5s;box-shadow:var(--shadow)}
.tab-panel.on{display:block}
.tab-panel h3{font-size:1.75rem;margin-bottom:12px}
.tab-panel>p{color:var(--soft);margin-bottom:24px;max-width:640px}
.sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.sol{display:flex;gap:12px;padding:16px;border-radius:16px;background:var(--bg2);border:1px solid var(--line);transition:.25s}
.sol:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.sol .ic{color:#fff;background:var(--mint);border-radius:50%;padding:3px;width:24px;height:24px;margin-top:2px}
.sol b{display:block;font-size:.95rem}
.sol small{color:var(--muted);font-size:.84rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* sticky stacking projects */
.stack-projects{display:grid;gap:30px}
.stack-projects .project{position:sticky;top:100px}
.stack-projects .project:nth-child(2){top:120px}
.stack-projects .project:nth-child(3){top:140px}
.stack-projects .project:nth-child(4){top:160px}

/* projects */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.filters button{background:#fff;border:1.5px solid var(--line2);color:var(--soft);padding:9px 18px;border-radius:999px;font:600 .88rem var(--body);cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--text);border-color:var(--text);color:#fff}
.projects{display:grid;gap:28px}
.project{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:border-color .3s,box-shadow .3s;box-shadow:var(--shadow)}
.project:hover{border-color:var(--line2);box-shadow:var(--shadow-lg)}
.project.flip .shot{order:2}
.project.hide{display:none}
.shot{position:relative;padding:40px;display:flex;align-items:center;justify-content:center;min-height:400px;overflow:hidden}
.info{padding:44px 44px 40px;display:flex;flex-direction:column}
.info .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.cat{font:600 .72rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.badge{font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.badge.live{background:#E3FAF3;color:#068566}
.badge.wip{background:#FFF3D6;color:#A26A00}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.info h3{font-size:2.05rem;margin-bottom:6px}
.info .url{font:500 .85rem var(--mono);color:var(--blue);margin-bottom:18px}
.info p{color:var(--soft);margin-bottom:20px}
.feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:24px;font-size:.9rem;color:var(--soft)}
.feats li{padding-left:22px;position:relative}
.feats li::before{content:"✓";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;background:#E3FAF3;color:#068566;font-size:.62rem;font-weight:800;display:grid;place-items:center}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.tags span{font:500 .72rem var(--mono);padding:5px 10px;border-radius:8px;background:var(--bg3);color:#3D4C8F}
.info .actions{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}

/* browser mockups (client brand colours kept) */
.browser{width:100%;max-width:480px;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);background:#fff;position:relative;z-index:2;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.project:hover .browser{transform:translateY(-8px) rotate(-1.2deg) scale(1.03)}
.b-bar{height:30px;background:#E9ECF1;display:flex;align-items:center;gap:6px;padding:0 12px}
.b-bar i{width:9px;height:9px;border-radius:50%;background:#C8CDD6}
.b-bar em{flex:1;margin-left:10px;height:16px;border-radius:5px;background:#fff;font-style:normal;font:500 .6rem var(--mono);color:#8a93a3;display:flex;align-items:center;padding-left:8px}
.b-body{height:280px;position:relative;overflow:hidden}
.bg-books{background:radial-gradient(circle at 70% 20%,#9EF0D8,transparent 55%),linear-gradient(135deg,#D8E6FF,#B9D2FF)}
.bg-haveli{background:radial-gradient(circle at 30% 80%,#FFE2A8,transparent 55%),linear-gradient(135deg,#FFD6DA,#FFB9C1)}
.bg-gstar{background:radial-gradient(circle at 70% 30%,#F6E4BD,transparent 55%),linear-gradient(135deg,#ECE6DA,#D9CFBC)}
.bg-rl{background:radial-gradient(circle at 20% 20%,#FFC9C9,transparent 55%),linear-gradient(135deg,#E6E9EF,#CDD3DD)}
.ba{display:grid;grid-template-columns:70px 1fr;height:100%;background:#F4F7FB}
.ba-side{background:#0F2A4A;padding:12px 8px;display:flex;flex-direction:column;gap:8px}
.ba-side i{height:8px;border-radius:3px;background:#2E5A87}
.ba-side i:first-child{background:#3FD19B;width:70%;height:12px;margin-bottom:8px}
.ba-main{padding:14px;display:flex;flex-direction:column;gap:10px}
.ba-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ba-kpis div{background:#fff;border-radius:7px;padding:8px;box-shadow:0 1px 3px #0001}
.ba-kpis b{display:block;font:700 .85rem var(--display);color:#0F2A4A}
.ba-kpis small{font-size:.5rem;color:#8a93a3}
.ba-chart{flex:1;background:#fff;border-radius:7px;display:flex;align-items:end;gap:5px;padding:10px;box-shadow:0 1px 3px #0001}
.ba-chart span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#3FD19B,#1C5D8F);height:var(--h);transform-origin:bottom;transform:scaleY(.08);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.in .ba-chart span,.ba-chart.in span{transform:scaleY(1)}
.ba-rows div{height:9px;border-radius:3px;background:#E3E8F0;margin-bottom:5px}
.hv{height:100%;background:#4A0912;color:#EAC171;display:flex;flex-direction:column}
.hv-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #CA9F5944}
.hv-nav b{font-family:var(--display);letter-spacing:.2em;font-size:.8rem}
.hv-nav span{font-size:.5rem;background:#CA9F59;color:#4A0912;padding:3px 8px;border-radius:99px;font-weight:600}
.hv-hero{padding:18px 14px 10px;text-align:center}
.hv-hero h5{font-family:Georgia,serif;font-size:1.05rem;color:#F4E3C1;font-weight:400}
.hv-hero small{font-size:.5rem;letter-spacing:.2em;color:#CA9F59}
.hv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px}
.hv-grid div{border:1.5px solid #CA9F59;border-radius:8px;height:66px;background:radial-gradient(circle at 50% 40%,#C2652A,#6B1A12)}
.hv-grid div:nth-child(2){background:radial-gradient(circle at 50% 40%,#E6A93A,#7A2A10)}
.hv-grid div:nth-child(3){background:radial-gradient(circle at 50% 40%,#8FA34A,#3C3A10)}
.hv-cart{margin:10px 14px 0;background:#CA9F59;color:#4A0912;border-radius:8px;padding:8px;font-size:.55rem;font-weight:700;display:flex;justify-content:space-between}
.gs{height:100%;background:#0A0A0C;position:relative;overflow:hidden}
.gs-nav{display:flex;justify-content:space-between;padding:10px 14px;color:#D4AF6A;font-family:var(--display);font-size:.7rem;letter-spacing:.15em;position:relative;z-index:2}
.gs-nav span{color:#777;font-size:.5rem;letter-spacing:.1em}
.gs-tiles{position:absolute;right:-20px;top:40px;width:220px;height:220px;transform:perspective(500px) rotateX(55deg) rotateZ(-35deg);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;animation:tileFloat 6s ease-in-out infinite}
@keyframes tileFloat{50%{transform:perspective(500px) rotateX(50deg) rotateZ(-30deg) translateY(-6px)}}
.gs-tiles i{background:linear-gradient(135deg,#2A2A30,#141418);border:1px solid #D4AF6A33;border-radius:2px}
.gs-tiles i:nth-child(3n){background:linear-gradient(135deg,#D4AF6A,#6E5424)}
.gs-tiles i:nth-child(5n){background:linear-gradient(135deg,#EDEDF0,#9A9AA2)}
.gs-copy{position:absolute;left:16px;top:70px;z-index:2;color:#fff}
.gs-copy h5{font-family:var(--display);font-size:1.1rem;line-height:1.15;width:140px}
.gs-copy h5 em{font-style:normal;color:#D4AF6A}
.gs-copy div{margin-top:12px;display:inline-block;background:#D4AF6A;color:#0A0A0C;font-size:.5rem;font-weight:700;padding:6px 12px;border-radius:99px}
.gs-glass{position:absolute;left:16px;bottom:14px;right:16px;height:44px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px);display:flex;gap:8px;padding:7px;z-index:2}
.gs-glass i{flex:1;border-radius:5px;background:linear-gradient(135deg,#3a3a42,#1d1d22)}
.rl{height:100%;background:#15181D;display:flex;flex-direction:column}
.rl-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0E1013}
.rl-nav b{font-family:var(--display);color:#fff;font-size:.8rem}
.rl-nav b em{font-style:normal;color:#E53935}
.rl-nav span{font-size:.5rem;background:#E53935;color:#fff;padding:4px 9px;border-radius:4px;font-weight:700}
.rl-hero{flex:1;position:relative;padding:20px 14px;background:linear-gradient(90deg,#15181D 45%,transparent),repeating-linear-gradient(135deg,#22262D 0 14px,#1B1E24 14px 28px)}
.rl-hero h5{font-family:var(--display);color:#fff;font-size:1.05rem;width:170px;line-height:1.15;text-transform:uppercase}
.rl-hero h5 em{font-style:normal;color:#E53935}
.rl-hero p{color:#9aa2ad;font-size:.5rem;margin:8px 0 12px;width:160px}
.rl-btns{display:flex;gap:6px}
.rl-btns i{width:60px;height:18px;border-radius:4px;background:#E53935}
.rl-btns i+i{background:transparent;border:1px solid #555}
.rl-truck{position:absolute;right:14px;bottom:16px;width:150px;height:70px;animation:truck 4s ease-in-out infinite}
@keyframes truck{50%{transform:translateX(-8px)}}
.rl-truck .cab{position:absolute;right:0;bottom:14px;width:48px;height:46px;background:#C62828;border-radius:6px 10px 3px 3px}
.rl-truck .cab::after{content:"";position:absolute;top:8px;left:8px;width:22px;height:14px;background:#9EC3DB;border-radius:3px}
.rl-truck .box{position:absolute;left:0;bottom:14px;width:100px;height:40px;background:#CFD4DB;border-radius:3px}
.rl-truck .w{position:absolute;bottom:2px;width:22px;height:22px;border-radius:50%;background:#111;border:4px solid #444}
.rl-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 14px;background:#0E1013}
.rl-svc i{height:24px;border-radius:4px;background:#22262D;border-bottom:2px solid #E53935}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.tl-line{position:absolute;top:30px;left:30px;right:30px;height:3px;border-radius:3px;background:var(--line)}
.tl-line span{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
.timeline.go .tl-line span{width:100%}
.tl-step{position:relative}
.tl-dot{--c:var(--blue);width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:#fff;border:2px solid var(--c);color:var(--c);margin-bottom:22px;position:relative;z-index:1;transition:.3s;box-shadow:var(--shadow-sm)}
.tl-step:nth-child(3) .tl-dot{--c:var(--violet)}.tl-step:nth-child(4) .tl-dot{--c:var(--coral)}.tl-step:nth-child(5) .tl-dot{--c:var(--mint)}
.tl-step:hover .tl-dot{background:var(--c);color:#fff;transform:translateY(-6px) rotate(-6deg);box-shadow:0 14px 24px -12px var(--c)}
.tl-num{color:var(--muted);font-size:.78rem}
.tl-step h3{font-size:1.28rem;margin:6px 0 8px}
.tl-step p{color:var(--muted);font-size:.93rem}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{padding:28px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:.3s;box-shadow:var(--shadow-sm)}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.why-card .ic{color:#fff;border-radius:14px;padding:10px;width:48px;height:48px;margin-bottom:16px;position:relative;z-index:1}
.why-card:nth-child(1) .ic{background:var(--blue)}.why-card:nth-child(2) .ic{background:var(--coral)}.why-card:nth-child(3) .ic{background:var(--mint)}.why-card:nth-child(4) .ic{background:var(--sun)}
.why-card h3{font-size:1.14rem;margin-bottom:8px;position:relative;z-index:1}
.why-card p{color:var(--muted);font-size:.9rem;position:relative;z-index:1}

/* FAQ */
.faq{display:grid;gap:12px;max-width:880px;margin:0 auto}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:18px;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--blue);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;font:700 1.06rem var(--display);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.plus{width:30px;height:30px;border-radius:50%;background:var(--bg3);position:relative;flex-shrink:0;transition:background .3s,transform .3s}
details[open] .plus{background:var(--blue);transform:rotate(180deg)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--blue);transform:translate(-50%,-50%);transition:transform .3s,background .3s}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus::before{background:#fff}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0);background:#fff}
.ans{padding:0 24px 22px;color:var(--soft)}

/* locations */
.loc-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;align-items:center}
.search-box{position:relative;flex:1;min-width:240px;max-width:420px}
.search-box .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--blue)}
.search-box input{width:100%;padding:14px 16px 14px 46px}
.region-chips{display:flex;gap:8px;flex-wrap:wrap}
.region-chips button{background:#fff;border:1.5px solid var(--line2);color:var(--soft);padding:8px 14px;border-radius:999px;font:600 .83rem var(--body);cursor:pointer;transition:.2s}
.region-chips button:hover{border-color:var(--blue);color:var(--blue)}
.region-chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.region-block{margin-bottom:44px}
.region-block h2{font-size:1.55rem;margin-bottom:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.region-block h2 small{font:600 .72rem var(--mono);color:var(--blue);background:var(--bg3);padding:4px 10px;border-radius:999px}
.region-block>p{color:var(--muted);margin-bottom:18px;max-width:760px;font-size:.93rem}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.city-link{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:.94rem;transition:.25s}
.city-link .ic{color:var(--coral);transition:.25s}
.city-link:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.city-link:hover .ic{transform:scale(1.2) translateY(-2px)}
.city-link.hide{display:none}
.no-results{color:var(--muted);display:none;padding:20px 0}

/* BC reach */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.reach-cloud{display:flex;flex-wrap:wrap;gap:8px}
.reach-cloud a{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.85rem;font-weight:600;color:var(--soft);transition:.2s}
.reach-cloud a:nth-child(5n+1):hover{background:var(--blue);border-color:var(--blue);color:#fff}
.reach-cloud a:nth-child(5n+2):hover{background:var(--coral);border-color:var(--coral);color:#fff}
.reach-cloud a:nth-child(5n+3):hover{background:var(--mint);border-color:var(--mint);color:#fff}
.reach-cloud a:nth-child(5n+4):hover{background:var(--violet);border-color:var(--violet);color:#fff}
.reach-cloud a:nth-child(5n+5):hover{background:var(--sun);border-color:var(--sun);color:var(--text)}
.reach-cloud a:hover{transform:translateY(-3px) rotate(-2deg)}
.city-jump{display:flex;gap:10px;margin:26px 0;max-width:460px}
.city-jump input{flex:1}

/* content blocks */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.two-col>*{min-width:0}
.prose p{color:var(--soft);margin-bottom:18px;font-size:1.05rem}
.prose h2{margin-bottom:22px}
.prose h3{font-size:1.32rem;margin:28px 0 12px}
.checks{list-style:none;display:grid;gap:12px;margin-top:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--soft)}
.checks li::before{content:"✓";color:#fff;background:var(--mint);width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:.75rem;font-weight:800;flex-shrink:0;margin-top:2px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:32px;position:sticky;top:100px;box-shadow:var(--shadow)}
.side-card h3{font-size:1.24rem;margin-bottom:16px}
.side-card .btn{width:100%;margin-top:22px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{--c:var(--blue);padding:28px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:.3s;box-shadow:var(--shadow-sm)}
.feature:nth-child(6n+2){--c:var(--coral)}.feature:nth-child(6n+3){--c:var(--mint)}.feature:nth-child(6n+4){--c:var(--violet)}.feature:nth-child(6n+5){--c:#E89A00}.feature:nth-child(6n+6){--c:var(--sky)}
.feature:hover{border-color:var(--c);transform:translateY(-6px);box-shadow:var(--shadow)}
.feature .n{font:700 .78rem var(--mono);color:var(--c);position:relative;z-index:1}
.feature h3{font-size:1.16rem;margin:10px 0 8px;position:relative;z-index:1}
.feature p{color:var(--muted);font-size:.92rem;position:relative;z-index:1}
.pill-list{display:flex;flex-wrap:wrap;gap:10px}
.pill-list span{padding:10px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line);font-size:.9rem;font-weight:600;color:var(--soft);transition:.2s}
.pill-list span:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}
.nearby{display:flex;flex-wrap:wrap;gap:10px}

/* forms */
input,select,textarea{background:#fff;border:1.5px solid var(--line2);border-radius:14px;padding:13px 14px;color:var(--text);font-family:inherit;font-size:.96rem;transition:border-color .2s,box-shadow .2s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,91,255,.14)}
input::placeholder,textarea::placeholder{color:#98A0BC}
textarea{min-height:140px;resize:vertical}
label{font-size:.84rem;color:var(--soft);display:block;margin-bottom:6px;font-weight:600}
.field{margin-bottom:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute!important;left:-9999px!important}
.form-msg{font-size:.92rem;min-height:1.2em;margin-top:12px;font-weight:600}
.form-msg.ok{color:#068566}.form-msg.err{color:#D8233A}

/* quote wizard */
.quote-wrap{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.quote-wrap>*{min-width:0}
.wizard{background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.wz-progress{display:flex;gap:8px;margin-bottom:30px}
.wz-progress div{flex:1}
.wz-progress i{display:block;height:6px;border-radius:6px;background:var(--bg3);overflow:hidden;position:relative}
.wz-progress i::after{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.wz-progress div.done i::after,.wz-progress div.cur i::after{transform:scaleX(1)}
.wz-progress small{display:block;margin-top:8px;font:600 .74rem var(--mono);color:var(--muted)}
.wz-progress div.cur small{color:var(--blue)}
.step{display:none;animation:fadeUp .45s}
.step.on{display:block}
.step h2{font-size:1.75rem;margin-bottom:6px}
.step>p{color:var(--muted);margin-bottom:24px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt-grid.two{grid-template-columns:repeat(2,1fr)}
.opt-grid.four{grid-template-columns:repeat(4,1fr)}
.opt{position:relative;cursor:pointer;margin:0}
.opt input{position:absolute;opacity:0;pointer-events:none;width:auto}
.opt span{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;border:1.5px solid var(--line2);background:#fff;transition:.2s;height:100%;font-size:.92rem;font-weight:700;color:var(--text)}
.opt span .ic{color:var(--blue);transition:.2s}
.opt span small{color:var(--muted);font-size:.78rem;font-weight:500;line-height:1.4}
.opt:hover span{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.opt input:checked+span{border-color:var(--blue);background:#EEF2FF;box-shadow:0 0 0 2px var(--blue) inset}
.opt input:checked+span::after{content:"✓";position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:.72rem;display:grid;place-items:center}
.opt input:focus-visible+span{outline:3px solid rgba(47,91,255,.4);outline-offset:2px}
.wz-sub{font:700 1.02rem var(--display);margin:26px 0 12px}
.wz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.wz-err{color:#D8233A;font-size:.9rem;min-height:1.2em;margin-top:12px;font-weight:600}
.summary{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:10px;font-size:.9rem}
.summary div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--line2)}
.summary div:last-child{border:0}
.summary b{color:var(--muted);font-weight:500}
.summary span{text-align:right;font-weight:600}
.success{text-align:center;padding:40px 10px;display:none}
.success.on{display:block;animation:fadeUp .5s}
.success .big{width:84px;height:84px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;margin:0 auto 20px;animation:pop .6s cubic-bezier(.2,1.6,.4,1);box-shadow:0 16px 30px -12px var(--mint)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success h2{margin-bottom:10px}
.success p{color:var(--muted)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}
.contact-grid>*{min-width:0}
.c-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.c-line{display:flex;gap:14px;align-items:center;margin-bottom:18px;color:var(--text);font-weight:600;transition:transform .2s}
a.c-line:hover{transform:translateX(4px);color:var(--blue)}
.c-line .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--bg3);color:var(--blue);flex-shrink:0;font:800 1rem var(--display)}
.c-line small{display:block;color:var(--muted);font-size:.78rem;font-weight:500}
.c-line div{min-width:0;overflow-wrap:anywhere}

/* CTA band */
.cta-band{padding:40px 0 110px}
.cta-box{position:relative;overflow:hidden;border-radius:34px;padding:64px;background:var(--grad);display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center;color:#fff;box-shadow:0 40px 80px -30px rgba(138,92,246,.6)}
.cta-box .eyebrow{color:#fff}
.cta-box .eyebrow::before{background:#fff}
.cta-box h2{margin:12px 0 14px;font-size:clamp(1.8rem,3.4vw,2.8rem)}
.cta-box p{color:rgba(255,255,255,.9);max-width:620px}
.cta-actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.cta-box .btn-primary{background:#fff;color:var(--blue);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.cta-box .btn-primary::before{background:var(--sun)}
.cta-box .btn-primary:hover{color:var(--text)}
.cta-box .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#fff}
.cta-orbs span{position:absolute;border-radius:50%;animation:orb 12s ease-in-out infinite;opacity:.35}
.cta-orbs span:nth-child(1){width:220px;height:220px;border:30px solid #fff;top:-90px;right:8%;opacity:.12}
.cta-orbs span:nth-child(2){width:120px;height:120px;background:var(--sun);bottom:-40px;left:40%;opacity:.5;animation-delay:-4s}
.cta-orbs span:nth-child(3){width:70px;height:70px;background:var(--mint);top:30%;right:-20px;opacity:.6;animation-delay:-8s}
.cta-box>div{position:relative;z-index:1}
@keyframes orb{50%{transform:translate(24px,18px) scale(1.12)}}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:70px 0 30px;background:var(--bg2);font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:40px}
.foot-grid>*{min-width:0}
.foot-grid h4{font-size:1rem;margin-bottom:16px}
.foot-grid a{display:block;color:var(--muted);margin-bottom:9px;transition:color .2s,transform .2s}
.foot-grid a:hover{color:var(--blue);transform:translateX(3px)}
.foot-grid .more{color:var(--blue);font-weight:600}
.foot-brand p{color:var(--muted);margin:16px 0;max-width:320px}
.foot-contact{display:flex;gap:8px;align-items:center;margin:8px 0!important;overflow-wrap:anywhere}
.foot-contact .ic{color:var(--coral)}
.foot-contact a{display:inline;margin:0}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:50px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:.84rem}

/* floating */
.to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);z-index:50;opacity:0;transform:translateY(20px);transition:.3s;pointer-events:none;box-shadow:var(--shadow)}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue);color:#fff}
.float-quote{display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.split .w{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.split.in .w{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .menu{gap:0}.nav-phone{display:none}
  .svc-cards,.feature-grid{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .opt-grid.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .hero-inner,.two-col,.reach,.contact-grid,.quote-wrap,.cta-box{grid-template-columns:1fr}
  .bld-frame{transform:none}
  .project,.project.flip{grid-template-columns:1fr}
  .project.flip .shot{order:0}
  .stack-projects .project{position:relative;top:auto!important}
  .timeline{grid-template-columns:1fr 1fr;row-gap:40px}
  .tl-line{display:none}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tabs{grid-template-columns:1fr}
  .tab-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .tab-list button{white-space:nowrap}
  .side-card{position:relative;top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-actions{flex-direction:row;flex-wrap:wrap}
  .compare{aspect-ratio:4/3}
  .cmp-points{grid-template-columns:1fr}
}
@media(max-width:860px){
  .menu{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 22px;max-height:calc(100vh - 76px);overflow:auto;box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu>a,.has-mega>a{padding:14px 4px;border-bottom:1px solid var(--line);display:block;color:var(--text);border-radius:0;background:none}
  .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;grid-template-columns:1fr;background:transparent;border:0;box-shadow:none;padding:6px 0;display:none}
  .has-mega.open .mega{display:grid}
  .has-mega:hover .mega{transform:none}
  .mobile-only{display:inline-flex!important;margin-top:16px}
  .nav-right .btn{display:none}
  .menu-btn{display:grid}
  .site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
  .float-quote{display:flex;position:fixed;left:16px;right:80px;bottom:20px;z-index:55;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;font-weight:700;padding:14px;border-radius:999px;box-shadow:0 12px 30px -10px rgba(138,92,246,.8);transform:translateY(120px);transition:transform .35s}
  .float-quote.on{transform:none}
  .new .n-body{grid-template-columns:1fr}
  .new .n-cards{display:none}
  .old .o-body{grid-template-columns:90px 1fr}
}
@media(max-width:640px){
  body{font-size:15px}
  .hero{padding:118px 0 70px}
  .page-hero{padding:118px 0 60px}
  section{padding:76px 0}
  .svc-cards,.feature-grid,.why,.timeline,.sol-grid,.row2{grid-template-columns:1fr}
  .opt-grid,.opt-grid.two,.opt-grid.four{grid-template-columns:1fr 1fr}
  .info{padding:28px 22px}
  .shot{padding:24px 14px;min-height:300px}
  .feats{grid-template-columns:1fr}
  .b-body{height:240px}
  .bld-body{height:300px}
  .bl-google{width:190px;top:108px}
  .wizard,.c-card,.tab-panel{padding:26px 20px}
  .cta-box{padding:38px 24px}
  .foot-grid{grid-template-columns:1fr}
  .scroll-hint{display:none}
  .city-grid{grid-template-columns:1fr 1fr}
  .compare{aspect-ratio:3/4}
  .old .o-side{display:none}.old .o-body{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.split .w{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .bl{opacity:1;transform:none}
}

/* fixes */
.hero-inner>*{min-width:0}
.hero h1{overflow-wrap:anywhere}
.new .n-body{grid-template-columns:1.15fr .85fr}
.new h4{font-size:clamp(1.1rem,2vw,1.6rem)}
.new .n-body>div:first-child{order:2}
.new .n-cards{order:1}
.cmp-label{top:auto;bottom:16px}
@media(max-width:860px){.new .n-body{grid-template-columns:1fr}.new .n-body>div:first-child{padding-left:58%}.new .n-top span{font-size:0;gap:0}.new .n-top span em{font-size:.7rem}.new .n-top b{font-size:.8rem}}
@media(max-width:640px){.hero h1{font-size:2.35rem}.new .n-body>div:first-child{padding-left:58%}.new h4{font-size:1.05rem}.new p{display:none}}

/* SocialSpark360 mockup */
.bg-ss360{background:radial-gradient(circle at 75% 25%,#BFE8FF,transparent 55%),linear-gradient(135deg,#E3DEFF,#C9C0FF)}
.ss{display:grid;grid-template-columns:62px 1fr;height:100%;background:#F7F7FD}
.ss-side{background:#17133A;padding:12px 10px;display:flex;flex-direction:column;gap:9px}
.ss-side b{font:800 .8rem var(--display);color:#fff;margin-bottom:8px}
.ss-side b em{font-style:normal;background:linear-gradient(90deg,#6d5efc,#22a5f2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-side i{height:8px;border-radius:4px;background:#2E2860}
.ss-side i.on{background:linear-gradient(90deg,#6d5efc,#22a5f2)}
.ss-main{padding:12px;display:flex;flex-direction:column;gap:10px}
.ss-top{display:flex;justify-content:space-between;align-items:center;font:700 .66rem var(--display);color:#17133A}
.ss-top em{font-style:normal;font-size:.52rem;color:#fff;background:linear-gradient(90deg,#6d5efc,#22a5f2);padding:4px 9px;border-radius:99px}
.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ss-grid div{background:#fff;border-radius:8px;padding:6px;box-shadow:0 1px 3px #0001;transition:transform .4s}
.project:hover .ss-grid div:nth-child(2){transform:translateY(-5px)}
.ss-grid i{display:block;height:62px;border-radius:5px;margin-bottom:5px}
.ss-grid .t1 i{background:linear-gradient(160deg,#4A0912 55%,#CA9F59 55%)}
.ss-grid .t2 i{background:linear-gradient(160deg,#FCE4EC 55%,#E91E63 55%)}
.ss-grid .t3 i{background:linear-gradient(160deg,#1F2A37 55%,#F59E0B 55%)}
.ss-grid small{font-size:.5rem;color:#6B6890;font-weight:600}
.ss-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.ss-stats div{background:#fff;border-radius:8px;padding:8px;box-shadow:0 1px 3px #0001;display:flex;flex-direction:column;justify-content:center}
.ss-stats b{font:800 .9rem var(--display);color:#6d5efc}
.ss-stats div:nth-child(3) b{color:#0FA07A}
.ss-stats small{font-size:.48rem;color:#8A88A8}
.stack-projects .project:nth-child(5){top:180px}

/* markets (home + worldwide) */
.markets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 6px}
.mkt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;border:1.5px solid var(--line);font-weight:700;transition:.25s;min-width:0}
.mkt b{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg3);font-size:1.3rem;color:var(--c);flex-shrink:0}
.mkt span{min-width:0;font-size:.92rem;line-height:1.2}
.mkt small{display:block;font-weight:500;color:var(--muted);font-size:.74rem;margin-top:2px}
.mkt:hover{border-color:var(--c);transform:translateY(-3px);box-shadow:var(--shadow)}
.mkt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mkt-card{--c:var(--blue);background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow-sm);transition:.3s;scroll-margin-top:110px;position:relative;overflow:hidden}
.mkt-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.mkt-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.mkt-card .flag{font-size:2.4rem;line-height:1;margin-bottom:16px;display:block;color:var(--c)}
.mkt-card h3{font-size:1.5rem;margin-bottom:10px}
.mkt-card>p{color:var(--muted);margin-bottom:18px}
.mkt-card .checks li{font-size:.92rem}
.mkt-card:target{box-shadow:0 0 0 3px var(--c),var(--shadow)}
.clocks{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.clock{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px 16px;text-align:center;transition:.25s}
.clock.us{border-color:var(--blue);background:#EEF2FF}
.clock b{display:block;white-space:nowrap;font:800 clamp(1.1rem,1.6vw,1.5rem) var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock span{display:block;font-weight:700;font-size:.9rem;margin-top:4px}
.clock small{display:inline-block;margin-top:8px;font:600 .68rem var(--mono);padding:3px 8px;border-radius:999px;background:var(--bg3);color:var(--muted)}
.clock small.open{background:#E3FAF3;color:#068566}
.clock:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media(max-width:980px){.mkt-cards{grid-template-columns:1fr}.clocks{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.markets{grid-template-columns:1fr}.clocks{grid-template-columns:1fr 1fr}}