/* ============================================================
   Raja S. — Portfolio · shared styles (all pages)
   ============================================================ */
:root{
  --bg:#07080d; --bg2:#0b0d15; --surface:rgba(255,255,255,.035); --surface2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09); --border2:rgba(139,92,246,.45);
  --text:#eceef6; --muted:#9299ad; --faint:#5b6172;
  --acc:#8b5cf6; --acc2:#22d3ee; --lime:#c8f31d;
  --grad:linear-gradient(100deg,#8b5cf6,#22d3ee);
  --shadow:0 30px 60px -20px rgba(0,0,0,.6);
  --ghost:rgba(255,255,255,.028);
  --nav:rgba(7,8,13,.72);
}
[data-theme="light"]{
  --bg:#f6f7fb; --bg2:#eef0f7; --surface:#ffffff; --surface2:#ffffff;
  --border:rgba(13,15,25,.1); --border2:rgba(124,58,237,.4);
  --text:#0d0f19; --muted:#4d5464; --faint:#9aa0b0;
  --acc:#7c3aed; --acc2:#0891b2; --lime:#84cc16;
  --grad:linear-gradient(100deg,#7c3aed,#0891b2);
  --shadow:0 30px 60px -28px rgba(20,20,60,.25);
  --ghost:rgba(13,15,25,.045);
  --nav:rgba(246,247,251,.8);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;transition:background .4s,color .4s}
h1,h2,h3,h4,.sg{font-family:'Space Grotesk','Inter',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--acc);color:#fff}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:2000;background:var(--bg);display:grid;place-items:center;transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .5s;transform-origin:top}
#loader .lg{width:74px;height:74px;border-radius:20px;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:1.6rem;animation:loaderPulse 1s ease-in-out infinite alternate;box-shadow:0 0 60px rgba(139,92,246,.55)}
@keyframes loaderPulse{from{transform:scale(.92) rotate(-4deg)}to{transform:scale(1.06) rotate(4deg)}}
#loader.done{transform:translateY(-100%);opacity:.6;pointer-events:none}

/* ---------- page transition wipe ---------- */
#wipe{position:fixed;inset:0;z-index:1900;background:var(--grad);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);pointer-events:none}
#wipe.go{transform:scaleY(1)}

/* ---------- custom cursor ---------- */
#cdot,#cring{position:fixed;top:0;left:0;pointer-events:none;z-index:1800;border-radius:50%;display:none}
@media(pointer:fine){#cdot,#cring{display:block}}
#cdot{width:7px;height:7px;background:var(--acc2);transform:translate(-50%,-50%)}
#cring{width:38px;height:38px;border:1.5px solid var(--acc);transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,opacity .25s;opacity:.6}
body.cur-link #cring{width:58px;height:58px;border-color:var(--acc2);opacity:1}

/* ---------- background ---------- */
.orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32;will-change:transform;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.orb-a{width:520px;height:520px;background:#6d28d9;top:-160px;left:-120px;animation:drift 16s ease-in-out infinite alternate}
.orb-b{width:460px;height:460px;background:#0e7490;bottom:-180px;right:-120px;animation:drift 20s ease-in-out infinite alternate-reverse}
.orb-c{width:300px;height:300px;background:#be185d;top:40%;left:55%;opacity:.18;animation:drift 24s ease-in-out infinite alternate}
[data-theme="light"] .orb{opacity:.14}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,60px) scale(1.15)}}
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--ghost) 1px,transparent 1px),linear-gradient(90deg,var(--ghost) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 55%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 55%,transparent 100%)}
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:1000;border-radius:0 3px 3px 0}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,5vw,64px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--nav);border-bottom:1px solid transparent;transition:border-color .3s,padding .3s}
nav.scrolled{border-bottom-color:var(--border);padding-top:10px;padding-bottom:10px}
.logo{font-family:'Space Grotesk';font-weight:700;font-size:1.5rem;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
.logo .mark{width:38px;height:38px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:.95rem;font-weight:700;box-shadow:0 8px 24px -6px rgba(139,92,246,.55);transition:transform .3s}
.logo:hover .mark{transform:rotate(-10deg) scale(1.08)}
.nav-links{display:flex;gap:34px;list-style:none;align-items:center}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--muted);position:relative;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:width .3s;border-radius:2px}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
#themeBtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;transition:transform .25s,border-color .25s}
#themeBtn:hover{transform:rotate(20deg) scale(1.08);border-color:var(--border2)}
#burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:1.2rem}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:14px;font-weight:600;font-size:.95rem;font-family:'Space Grotesk';cursor:pointer;border:none;overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s;white-space:nowrap;will-change:transform}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 34px -10px rgba(139,92,246,.55)}
.btn-primary:hover{box-shadow:0 20px 44px -10px rgba(139,92,246,.7)}
.btn-primary::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.btn-primary:hover::before{left:130%}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);background:var(--surface)}
.btn-sm{padding:10px 20px;font-size:.85rem;border-radius:11px}

/* ---------- layout ---------- */
section{padding:110px clamp(20px,6vw,80px);max-width:1280px;margin:0 auto;position:relative}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--acc);margin-bottom:18px}
.kicker::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;letter-spacing:-1.5px;line-height:1.12;margin-bottom:16px}
.h2 .grad,.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:640px;font-size:1.05rem}
.ghost-word{position:absolute;top:30px;right:0;font-family:'Space Grotesk';font-weight:700;font-size:clamp(4rem,12vw,9rem);letter-spacing:-4px;color:transparent;-webkit-text-stroke:1px var(--ghost);pointer-events:none;user-select:none;line-height:1;z-index:0}

/* ---------- reveal + split text ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.vis{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top}
[data-split] .w i{display:inline-block;font-style:normal;transform:translateY(115%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
[data-split].vis .w i{transform:none}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding-top:190px;padding-bottom:70px}
.crumbs{display:flex;gap:10px;font-size:.82rem;color:var(--faint);margin-bottom:22px;font-weight:500}
.crumbs a:hover{color:var(--acc)}
.crumbs span{color:var(--faint)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;letter-spacing:-2.5px;line-height:1.05;max-width:900px}
.page-hero .sub{margin-top:22px}

/* ---------- home hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;max-width:1280px}
.hero-inner{will-change:transform,opacity}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;border:1px solid var(--border2);background:var(--surface);font-size:.82rem;font-weight:600;width:fit-content;margin-bottom:28px;animation:fadeUp .8s .1s both}
.pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #22c55e;animation:ping 1.6s infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:700;letter-spacing:-2.5px;line-height:1.04;max-width:1000px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .sub{margin:26px 0 38px;animation:fadeUp .8s .5s both;font-size:1.12rem}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;animation:fadeUp .8s .65s both}
.hero-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:56px;animation:fadeUp .8s .8s both}
.chip{padding:10px 18px;border-radius:100px;border:1px solid var(--border);background:var(--surface);font-size:.85rem;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:center;transition:transform .25s,border-color .25s}
.chip:hover{transform:translateY(-3px);border-color:var(--border2);color:var(--text)}
.chip b{color:var(--text)}
.typed-wrap{color:var(--muted)}
#typed{color:var(--acc2);font-weight:600}
.caret{display:inline-block;width:2px;height:1em;background:var(--acc2);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--border);border-radius:14px;animation:fadeUp 1s 1.2s both}
.scroll-hint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--acc);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;overflow:hidden;background:var(--surface);position:relative}
.marquee .track{display:flex;gap:56px;width:max-content;animation:scrollx 30s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:56px;white-space:nowrap}
.marquee .item::after{content:"◆";color:var(--acc);font-size:.7rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- glow border card base ---------- */
.gcard{position:relative;border-radius:20px;border:1px solid var(--border);background:var(--surface);overflow:hidden;transition:transform .35s,box-shadow .35s;will-change:transform}
.gcard::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 70%,var(--acc) 82%,var(--acc2) 90%,transparent 100%);opacity:0;transition:opacity .4s;animation:spin 3.2s linear infinite;z-index:0}
.gcard::after{content:"";position:absolute;inset:1px;border-radius:19px;background:var(--bg2);z-index:0;transition:background .4s}
[data-theme="light"] .gcard::after{background:#fff}
.gcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.gcard:hover::before{opacity:1}
.gcard>*{position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:50px;position:relative;z-index:1}
.stat{padding:34px 26px}
.stat .num{font-family:'Space Grotesk';font-size:clamp(2rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-1.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--muted);font-size:.88rem;font-weight:500;margin-top:6px}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:50px;position:relative;z-index:1}
.svc{padding:32px 28px}
.svc .ico{width:52px;height:52px;border-radius:14px;background:var(--grad);display:grid;place-items:center;margin-bottom:20px;font-size:1.35rem;color:#fff;box-shadow:0 10px 26px -8px rgba(139,92,246,.5);transition:transform .35s}
.svc:hover .ico{transform:rotate(-8deg) scale(1.1)}
.svc h3{font-size:1.15rem;font-weight:600;margin-bottom:10px}
.svc p{color:var(--muted);font-size:.92rem}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tags span{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:100px;background:var(--bg2);border:1px solid var(--border);color:var(--muted)}
[data-theme="light"] .tags span{background:var(--bg2)}

/* ---------- portfolio ---------- */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;position:relative;z-index:1}
.fbtn{padding:9px 20px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--muted);font-weight:600;font-size:.85rem;cursor:pointer;font-family:'Space Grotesk';transition:all .25s}
.fbtn:hover{color:var(--text);border-color:var(--border2)}
.fbtn.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px -8px rgba(139,92,246,.55)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;margin-top:34px;position:relative;z-index:1}
.work{border-radius:22px}
.work.hide{display:none}
.work .cover{height:190px;position:relative;display:flex;align-items:flex-end;padding:20px;overflow:hidden;border-radius:20px 20px 0 0}
.work .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)}
.work .cover .big{font-family:'Space Grotesk';font-weight:700;font-size:2.6rem;letter-spacing:-2px;color:rgba(255,255,255,.92);position:relative;z-index:1;line-height:1;transition:transform .4s}
.work:hover .cover .big{transform:translateX(8px) skewX(-4deg)}
.work .cover .shine{position:absolute;top:0;left:-90%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .7s;z-index:2}
.work:hover .cover .shine{left:140%}
.c1{background:linear-gradient(130deg,#4c1d95,#7c3aed 55%,#2563eb)}
.c2{background:linear-gradient(130deg,#0e7490,#06b6d4 55%,#3b82f6)}
.c3{background:linear-gradient(130deg,#9d174d,#e11d48 55%,#f97316)}
.c4{background:linear-gradient(130deg,#14532d,#16a34a 55%,#84cc16)}
.c5{background:linear-gradient(130deg,#1e3a8a,#4f46e5 55%,#a855f7)}
.c6{background:linear-gradient(130deg,#7c2d12,#ea580c 55%,#facc15)}
.c7{background:linear-gradient(130deg,#134e4a,#0d9488 55%,#22d3ee)}
.c8{background:linear-gradient(130deg,#581c87,#9333ea 55%,#ec4899)}
.c9{background:linear-gradient(130deg,#0c4a6e,#0284c7 55%,#38bdf8)}
.work .body{padding:22px}
.work .cat{font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc2)}
.work h3{font-size:1.12rem;font-weight:600;margin:8px 0 8px}
.work p{color:var(--muted);font-size:.9rem}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:50px;position:relative;z-index:1}
.rev{padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.stars{color:#fbbf24;letter-spacing:3px;font-size:.95rem}
.rev q{color:var(--text);font-size:.97rem;quotes:"\201C" "\201D";font-style:italic}
.rev .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;font-family:'Space Grotesk';font-size:.9rem;flex-shrink:0}
.rev .who b{display:block;font-size:.92rem}
.rev .who small{color:var(--faint);font-size:.78rem}
.rev .price{margin-left:auto;font-family:'Space Grotesk';font-weight:700;color:var(--lime);font-size:.9rem;white-space:nowrap}
.rev-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.rev-meta .chip b{color:var(--lime)}
#revStatus{color:var(--faint);font-size:.85rem;margin-top:26px}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;margin-top:50px;position:relative;z-index:1}
.about-copy p{color:var(--muted);margin-bottom:18px;font-size:1.02rem}
.about-copy strong{color:var(--text)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{padding:8px 16px;border-radius:9px;font-size:.8rem;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:transform .25s,border-color .25s}
.badge:hover{transform:translateY(-3px);border-color:var(--border2)}
.badge.hot{border-color:var(--border2);color:var(--acc)}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--acc),var(--acc2));border-radius:2px;opacity:.5}
.t-item{position:relative;padding-bottom:30px}
.t-item::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--acc);transition:transform .3s,background .3s}
.t-item:hover::before{transform:scale(1.3);background:var(--acc)}
.t-item .when{font-size:.78rem;font-weight:600;letter-spacing:1.5px;color:var(--acc2);text-transform:uppercase}
.t-item h3{font-size:1.08rem;margin:4px 0 5px;font-weight:600}
.t-item p{color:var(--muted);font-size:.92rem}
.usa-strip{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:18px;border:1px solid var(--border2);background:var(--surface);margin-top:34px}
.usa-strip .flag{font-size:1.9rem}
.usa-strip b{font-family:'Space Grotesk'}
.usa-strip small{display:block;color:var(--muted)}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:50px;position:relative;z-index:1}
.step{padding:26px 20px;border-radius:18px}
.step .n{font-family:'Space Grotesk';font-weight:700;font-size:1.9rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:.98rem;margin-top:8px;font-weight:600}

/* ---------- CTA ---------- */
.cta-box{border-radius:30px;border:1px solid var(--border2);padding:clamp(44px,7vw,90px);text-align:center;position:relative;overflow:hidden;background:var(--surface)}
.cta-box::before{content:"";position:absolute;inset:-2px;background:radial-gradient(600px circle at 50% -20%,rgba(139,92,246,.28),transparent 60%);pointer-events:none}
.cta-box h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-2px;line-height:1.08;margin-bottom:18px;position:relative}
.cta-box p{color:var(--muted);max-width:560px;margin:0 auto 36px;position:relative}
.cta-box .btn{position:relative}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:44px clamp(20px,6vw,80px);max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .links{display:flex;gap:26px;flex-wrap:wrap}
footer a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .25s}
footer a:hover{color:var(--acc)}
footer small{color:var(--faint)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav-links{position:fixed;inset:64px 16px auto 16px;flex-direction:column;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:18px;transform:translateY(-16px);opacity:0;pointer-events:none;transition:.3s;box-shadow:var(--shadow);z-index:950}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:10px 14px;display:block;width:100%}
  #burger{display:block}
  .nav-cta .btn{display:none}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .ghost-word{font-size:4.2rem;top:44px}
  #cdot,#cring{display:none}
}
/* ============================================================
   CODER AESTHETIC — terminal, code windows, mono accents
   ============================================================ */
:root{--mono:'JetBrains Mono','SF Mono',Consolas,monospace}
.mono{font-family:var(--mono)}
.cmd{font-family:var(--mono);font-size:.82rem;color:var(--acc);background:var(--surface);border:1px solid var(--border);padding:6px 14px;border-radius:8px;display:inline-flex;gap:8px;align-items:center}
.cmd::before{content:"$";color:var(--acc2);font-weight:700}

/* terminal window — always dark, looks pro on light theme */
.term{background:#0d1117;border-radius:16px;border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 80px -30px rgba(15,20,40,.45);overflow:hidden;font-family:var(--mono);font-size:.84rem;line-height:1.75}
.term-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#161b22;border-bottom:1px solid rgba(255,255,255,.07)}
.term-bar i{width:12px;height:12px;border-radius:50%;font-style:normal}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar .title{margin-left:10px;color:#8b949e;font-size:.75rem}
.term-body{padding:20px 22px;color:#c9d1d9;min-height:230px;white-space:pre-wrap;word-break:break-word}
.tk-p{color:#d2a8ff}.tk-g{color:#7ee787}.tk-c{color:#79c0ff}.tk-y{color:#ffa657}.tk-m{color:#8b949e}.tk-r{color:#ff7b72}.tk-w{color:#e6edf3}
.term-cursor{display:inline-block;width:8px;height:15px;background:#58a6ff;vertical-align:-2px;animation:blink 1s step-end infinite}

/* editor-style code window with line numbers */
.codewin{background:#0d1117;border-radius:16px;border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 80px -30px rgba(15,20,40,.45);overflow:hidden;font-family:var(--mono);font-size:.82rem;line-height:1.8}
.codewin .term-bar .tab{margin-left:10px;background:#0d1117;color:#79c0ff;font-size:.72rem;padding:4px 12px;border-radius:7px 7px 0 0;border:1px solid rgba(255,255,255,.07);border-bottom:none}
.codewin .rows{padding:18px 0;counter-reset:ln}
.codewin .ln{display:flex;gap:18px;padding:0 20px;opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.codewin.vis .ln{opacity:1;transform:none}
.codewin .ln::before{counter-increment:ln;content:counter(ln);color:#3d444d;min-width:20px;text-align:right;user-select:none}
.codewin .ln:hover{background:rgba(255,255,255,.03)}

/* hero split (home) */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero-term{animation:fadeUp .9s .6s both;position:relative}
.hero-term .float-chip{position:absolute;font-family:var(--mono);font-size:.72rem;font-weight:600;padding:8px 14px;border-radius:10px;background:var(--surface2);border:1px solid var(--border2);color:var(--acc);box-shadow:var(--shadow);animation:floaty 4s ease-in-out infinite}
.hero-term .fc1{top:-18px;right:22px;animation-delay:.5s}
.hero-term .fc2{bottom:-16px;left:-14px;color:var(--acc2);animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- live website screenshots on covers ---------- */
.cover .shot,.case-cover .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:0;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.work:hover .cover .shot{transform:scale(1.06)}
.cover.has-shot .big,.case-cover.has-shot .big{font-size:1.15rem;letter-spacing:0;padding:8px 14px;border-radius:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.case-cover.has-shot .big{font-size:1.5rem}

/* ============================================================
   PRICING
   ============================================================ */
.ptoggle{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);padding:5px;border-radius:100px;margin-top:36px;position:relative;z-index:1}
.ptoggle button{padding:10px 26px;border-radius:100px;border:none;background:transparent;color:var(--muted);font-weight:600;font-family:'Space Grotesk';font-size:.9rem;cursor:pointer;transition:all .3s}
.ptoggle button.on{background:var(--grad);color:#fff;box-shadow:0 8px 20px -8px rgba(124,58,237,.5)}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:44px;position:relative;z-index:1;align-items:stretch}
.plan{padding:38px 32px;display:flex;flex-direction:column;border-radius:22px}
.plan .name{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:1.5px;color:var(--acc2);text-transform:uppercase}
.plan h3{font-size:1.35rem;margin:10px 0 4px}
.plan .amount{font-family:'Space Grotesk';font-size:2.8rem;font-weight:700;letter-spacing:-2px;margin:14px 0 4px}
.plan .amount small{font-size:1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.plan .for{color:var(--muted);font-size:.9rem;margin-bottom:22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.plan li{color:var(--muted);font-size:.92rem;display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--lime);font-weight:700;font-family:var(--mono)}
.plan li.no{opacity:.45}.plan li.no::before{content:"—";color:var(--faint)}
.plan .btn{margin-top:auto;justify-content:center}
.plan.hot{border-color:var(--border2)}
.plan.hot .flag-pop{position:absolute;top:18px;right:18px;background:var(--grad);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:1.5px;padding:6px 13px;border-radius:100px;z-index:2;animation:floaty 3s ease-in-out infinite}
.pset{display:none}.pset.on{display:grid}
.price-note{margin-top:30px;color:var(--faint);font-size:.85rem;position:relative;z-index:1;font-family:var(--mono)}

@media (max-width:1020px){.hero-split{grid-template-columns:1fr;gap:44px}.hero{min-height:auto;padding-bottom:80px}}

/* ============================================================
   NEXT-GEN: matrix rain · terminal loader · binary art
   ============================================================ */
#rain{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.55}
[data-theme="light"] #rain{opacity:.4}

#loader .lwrap{display:flex;flex-direction:column;align-items:center;gap:0}
#loader .rocket{font-size:3rem;animation:rocketIdle 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 10px 30px rgba(139,92,246,.55))}
@keyframes rocketIdle{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}
.lbar{font-family:var(--mono);font-size:.8rem;letter-spacing:3px;color:var(--muted);margin-top:26px}
.lbar b{font-weight:400;color:var(--acc)}
.lbar b::after{content:"▪▫▫▫▫▫▫▫▫▫";animation:lblocks 1.1s steps(1,end) infinite}
@keyframes lblocks{0%{content:"▪▫▫▫▫▫▫▫▫▫"}10%{content:"▪▪▫▫▫▫▫▫▫▫"}20%{content:"▪▪▪▫▫▫▫▫▫▫"}30%{content:"▪▪▪▪▫▫▫▫▫▫"}40%{content:"▪▪▪▪▪▫▫▫▫▫"}50%{content:"▪▪▪▪▪▪▫▫▫▫"}60%{content:"▪▪▪▪▪▪▪▫▫▫"}70%{content:"▪▪▪▪▪▪▪▪▫▫"}80%{content:"▪▪▪▪▪▪▪▪▪▫"}90%,100%{content:"▪▪▪▪▪▪▪▪▪▪"}}

.binary{position:absolute;font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:2px;color:var(--faint);opacity:.16;pointer-events:none;user-select:none;white-space:pre;z-index:0}

/* ============================================================
   BUDGET / TIMELINE SLIDERS (terminal style)
   ============================================================ */
.rangebox{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border2);border-radius:18px;overflow:hidden;margin-top:36px;background:#0d1117;position:relative;z-index:1;box-shadow:var(--shadow)}
.rb{padding:26px 30px 42px;position:relative}
.rb+.rb{border-left:1px solid rgba(255,255,255,.08)}
.rb label{font-family:var(--mono);font-size:.78rem;letter-spacing:3px;color:#c9d1d9;display:block;margin-bottom:34px}
.track{position:relative;height:56px;display:flex;align-items:center}
.track input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:2px;outline:none;cursor:pointer}
.track input::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:56px;border-radius:50%;background:transparent;cursor:grab}
.track input::-moz-range-thumb{width:56px;height:56px;border-radius:50%;background:transparent;border:none;cursor:grab}
.bub{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;color:#0d0f19;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.76rem;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.5);z-index:2}
@media(max-width:760px){.rangebox{grid-template-columns:1fr}.rb+.rb{border-left:none;border-top:1px solid rgba(255,255,255,.08)}}

/* estimator output */
.est-out{margin-top:22px;position:relative;z-index:1}
.est-out .term-body{min-height:0;padding:16px 22px}

/* ============================================================
   SERVICE DETAIL MODAL
   ============================================================ */
.svc{cursor:pointer}
.svc .more{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:.74rem;color:var(--acc2);letter-spacing:1px;transition:transform .25s}
.svc:hover .more{transform:translateX(4px)}
#modalWrap{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
#modalWrap.open{opacity:1;pointer-events:auto}
#modalWrap .ovl{position:absolute;inset:0;background:rgba(4,5,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#modalBox{position:relative;max-width:620px;width:100%;max-height:86vh;overflow:auto;background:var(--bg2);border:1px solid var(--border2);border-radius:24px;padding:40px;transform:translateY(34px) scale(.95);transition:transform .38s cubic-bezier(.2,.8,.3,1.15);box-shadow:var(--shadow)}
[data-theme="light"] #modalBox{background:#fff}
#modalWrap.open #modalBox{transform:none}
#modalClose{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:1rem;transition:transform .25s,border-color .25s}
#modalClose:hover{transform:rotate(90deg);border-color:var(--border2)}
.mhead{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.mhead .ico{width:54px;height:54px;border-radius:15px;background:var(--grad);display:grid;place-items:center;font-size:1.4rem;color:#fff;flex-shrink:0}
.mhead h3{font-size:1.45rem;letter-spacing:-.5px}
.mhead small{font-family:var(--mono);color:var(--acc2);font-size:.75rem;letter-spacing:1px}
.mdesc{color:var(--muted);margin-bottom:22px;font-size:.98rem}
.mlist{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.mlist li{display:flex;gap:11px;color:var(--muted);font-size:.93rem;align-items:flex-start}
.mlist li::before{content:"✓";color:var(--lime);font-family:var(--mono);font-weight:700;flex-shrink:0}
.mact{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
body.modal-open{overflow:hidden}

/* ============================================================
   GLOBAL SEARCH (⌘K style overlay)
   ============================================================ */
#searchBtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;transition:transform .25s,border-color .25s}
#searchBtn:hover{transform:scale(1.08);border-color:var(--border2)}
#searchWrap{position:fixed;inset:0;z-index:1700;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
#searchWrap.open{display:flex}
#searchWrap .s-ovl{position:absolute;inset:0;background:rgba(4,5,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#searchBox{position:relative;width:100%;max-width:640px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);animation:searchIn .3s cubic-bezier(.2,.8,.3,1.1)}
[data-theme="light"] #searchBox{background:#fff}
@keyframes searchIn{from{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}
#searchBox .s-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
#searchBox .s-head .pfx{font-family:var(--mono);color:var(--acc2);font-weight:700}
#searchInput{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:1rem}
#searchInput::placeholder{color:var(--faint)}
#searchBox .esc{font-family:var(--mono);font-size:.7rem;color:var(--faint);border:1px solid var(--border);padding:3px 8px;border-radius:6px}
#searchResults{max-height:52vh;overflow:auto;padding:10px}
.s-group{font-family:var(--mono);font-size:.7rem;letter-spacing:2px;color:var(--faint);text-transform:uppercase;padding:12px 12px 6px}
.s-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .15s}
.s-item:hover,.s-item.sel{background:var(--surface2);outline:1px solid var(--border2)}
.s-item .s-ico{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;font-size:.95rem;color:#fff;flex-shrink:0}
.s-item b{display:block;font-size:.93rem}
.s-item b mark{background:transparent;color:var(--acc);font-weight:700}
.s-item p{color:var(--muted);font-size:.8rem;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-empty{padding:30px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:.85rem}

/* ============================================================
   PREMIUM CASE-STUDY GALLERY (browser + devices)
   ============================================================ */
.bframe{background:#0d1117;border-radius:18px;border:1px solid rgba(255,255,255,.09);overflow:hidden;box-shadow:0 50px 100px -40px rgba(10,15,35,.55)}
.bframe .bf-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161b22;border-bottom:1px solid rgba(255,255,255,.07)}
.bframe .bf-bar i{width:11px;height:11px;border-radius:50%;font-style:normal}
.bframe .bf-bar i:nth-child(1){background:#ff5f57}.bframe .bf-bar i:nth-child(2){background:#febc2e}.bframe .bf-bar i:nth-child(3){background:#28c840}
.bframe .bf-url{flex:1;margin-left:8px;background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:5px 14px;font-family:var(--mono);font-size:.74rem;color:#7ee787;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bframe .bf-view{position:relative;min-height:300px;max-height:480px;overflow:hidden;background:#0d1117}
.bframe .bf-view img{width:100%;display:block;object-fit:cover;object-position:top}
.case-hero-gallery{position:relative;margin-top:40px}
.dev-phone{position:absolute;right:clamp(6px,4vw,44px);bottom:-46px;width:150px;border-radius:24px;border:7px solid #0d1117;background:#0d1117;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);z-index:2;transform:rotate(3deg);transition:transform .4s}
.dev-phone:hover{transform:rotate(0) scale(1.04)}
.dev-phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:46px;height:9px;background:#0d1117;border-radius:6px;z-index:3}
.dev-phone img{width:100%;height:290px;object-fit:cover;object-position:top;display:block}
.views-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:70px;position:relative;z-index:1}
.view-tile{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:transform .3s,border-color .3s}
.view-tile:hover{transform:translateY(-6px);border-color:var(--border2)}
.view-tile .vt-img{height:180px;overflow:hidden;background:#0d1117;position:relative}
.view-tile .vt-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 2.5s ease}
.view-tile:hover .vt-img img{object-position:bottom}
.view-tile .vt-cap{padding:12px 16px;font-family:var(--mono);font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.view-tile .vt-cap span{color:var(--acc2)}
@media(max-width:760px){.dev-phone{width:110px;bottom:-30px}.dev-phone img{height:214px}}

/* work card action buttons (shared) */
.work .actions{display:flex;gap:10px;margin-top:16px}
.work .actions a{font-family:'Space Grotesk';font-weight:600;font-size:.82rem;padding:9px 16px;border-radius:10px;transition:all .25s}
.work .actions .cs{background:var(--grad);color:#fff}
.work .actions .cs:hover{box-shadow:0 10px 24px -8px rgba(124,58,237,.6);transform:translateY(-2px)}
.work .actions .lv{border:1px solid var(--border);color:var(--muted)}
.work .actions .lv:hover{border-color:var(--border2);color:var(--text);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  [data-split] .w i{transform:none}
  .codewin .ln{opacity:1;transform:none}
  #loader{display:none}
}