/* ==========================================================================
   MS DIGITAL — msdigitalsrilanka.site
   Design system: "Midnight Premium"
   Headline font: Fraunces (serif) · Body font: Inter (sans-serif)
   Brand: deep midnight blue + gold · Light & dark themes
   Hand-coded. No frameworks, no builders.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Dark theme (default) — the signature Midnight Premium look */
  --bg:#070b14;
  --bg2:#0b1120;
  --surface:#101827;
  --surface2:#141d30;
  --ink:#eef2fa;
  --muted:#9fabc4;
  --line:rgba(238,242,250,.09);
  --blue:#3b82f6;
  --blue-soft:#60a5fa;
  --gold:#f5b301;
  --gold-bright:#ffd34d;
  --gold-ink:#1a1200;
  --accent:var(--gold-bright);          /* accent text colour on this theme  */
  --shadow:0 30px 70px -30px rgba(0,0,0,.7);
  --shadow-sm:0 16px 40px -20px rgba(0,0,0,.6);
  --glow-b:rgba(59,130,246,.28);
  --glow-g:rgba(245,179,1,.22);
  --wa:#25d366;
  --wa-ink:#0b3d1f;
  --radius:20px;
  --radius-sm:14px;
  --header-h:66px;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f8f6f0;
  --bg2:#f1eee5;
  --surface:#ffffff;
  --surface2:#faf8f2;
  --ink:#101b30;
  --muted:#5c6a84;
  --line:rgba(16,27,48,.1);
  --blue:#1d4ed8;
  --blue-soft:#2563eb;
  --gold:#eaa800;
  --gold-bright:#f5b301;
  --accent:#b07e00;                     /* readable gold on cream            */
  --shadow:0 30px 60px -30px rgba(16,27,48,.25);
  --shadow-sm:0 16px 36px -20px rgba(16,27,48,.18);
  --glow-b:rgba(37,99,235,.14);
  --glow-g:rgba(234,168,0,.16);
  color-scheme:light;
}

/* ---------- 2. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.6; font-size:16px;
  transition:background .35s ease,color .35s ease;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.serif{font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-.015em}
em{font-style:italic}
.container{max-width:1120px; margin:0 auto; padding:0 clamp(18px,4.5vw,32px)}
section{padding:clamp(48px,7vw,88px) 0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
::selection{background:var(--gold); color:var(--gold-ink)}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:var(--gold-ink);
  padding:10px 18px; border-radius:0 0 10px 0; font-weight:600; text-decoration:none}
.skip-link:focus{left:0}

/* Icons (inline SVG, stroke-based) */
.ic{width:1.25em; height:1.25em; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; flex:none; display:inline-block; vertical-align:-.22em}
.ic-fill{fill:currentColor; stroke:none}

/* ---------- 3. Header / navigation ---------- */
header.site{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:14px; height:var(--header-h)}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none; flex:none}
.logomark{width:38px;height:38px;display:grid;place-items:center;flex:none}
.logomark picture,.logomark img{display:block;width:100%;height:100%}
.logomark img{object-fit:contain;filter:drop-shadow(0 5px 10px color-mix(in srgb,var(--blue) 20%,transparent));
  transition:transform .35s cubic-bezier(.22,.65,.25,1),filter .35s ease}
.logo:hover .logomark img{transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 7px 14px color-mix(in srgb,var(--blue) 30%,transparent))}
.navlinks{display:none; align-items:center; gap:4px; margin-left:auto}
.navlinks > a, .navdrop > button{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
  padding:9px 13px; border-radius:99px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease, background .2s ease}
.navlinks > a:hover, .navdrop > button:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent)}
.navlinks > a[aria-current="page"]{color:var(--ink); font-weight:600}
.navdrop{position:relative}
.navdrop .chev{width:.9em;height:.9em;transition:transform .2s ease}
.navdrop.open .chev{transform:rotate(180deg)}
.dropdown{position:absolute; top:calc(100% + 10px); left:0; min-width:260px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s}
.navdrop.open .dropdown{opacity:1; visibility:visible; transform:none}
.dropdown a{display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:10px;
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:500}
.dropdown a:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.dropdown .d-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--blue-soft)}
.dropdown a:nth-child(2) .d-ic{background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--accent)}
.dropdown a:nth-child(3) .d-ic{background:color-mix(in srgb, var(--blue-soft) 14%, transparent); color:var(--blue-soft)}
.dropdown small{display:block; color:var(--muted); font-weight:400; font-size:12px}

.header-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:transparent;
  color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:all .2s ease; flex:none}
.theme-toggle:hover{color:var(--ink); border-color:var(--muted)}
.theme-toggle .ic{width:17px;height:17px; vertical-align:0}
[data-theme="light"] .theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .ic-sun, :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:block}

.menu-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line); background:transparent;
  color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none}
.menu-btn .ic{width:20px;height:20px;vertical-align:0}

/* Mobile menu (full overlay) */
.mnav{position:fixed; inset:0; z-index:90; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; flex-direction:column; padding:18px clamp(18px,4.5vw,32px) 34px;
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s}
.mnav.open{opacity:1; visibility:visible}
.mnav-top{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.mnav-links{display:flex; flex-direction:column; gap:2px; margin-top:26px; overflow-y:auto}
.mnav-links a{font-family:'Fraunces',Georgia,serif; font-size:clamp(26px,6.8vw,34px); font-weight:500;
  color:var(--ink); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease}
.mnav.open .mnav-links a{opacity:1; transform:none}
.mnav-links a .ic{color:var(--accent); width:.7em; height:.7em}
.mnav-links a.sub{font-family:'Inter',sans-serif; font-size:16px; font-weight:500; color:var(--muted); padding:12px 0 12px 4px}
.mnav-cta{margin-top:auto; padding-top:26px}
.mnav-cta .btn{width:100%}

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:99px; font-weight:600; text-decoration:none; cursor:pointer;
  font-size:15px; padding:14px 26px; border:0; font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--gold-ink);
  box-shadow:0 12px 30px -10px var(--glow-g); position:relative; overflow:hidden}
.btn-gold::after{content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(105deg,transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-160%) skewX(-18deg); pointer-events:none}
.btn-gold:hover::after{animation:shine .9s ease}
.btn-ghost{border:1px solid var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--muted)}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 12px 30px -10px rgba(37,211,102,.5)}
.btn-sm{padding:10px 18px; font-size:13.5px}
.btn-lg{padding:16px 32px; font-size:16px}
.btn .ic{width:1.15em;height:1.15em}

/* ---------- 5. Hero (home) ---------- */
.hero{position:relative; padding:clamp(44px,6vw,80px) 0 clamp(48px,6vw,72px); overflow:hidden}
.hero::before{content:""; position:absolute; width:min(70vw,700px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--glow-b), transparent 65%); top:-25%; right:-18%; pointer-events:none}
.hero::after{content:""; position:absolute; width:min(55vw,520px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--glow-g), transparent 65%); bottom:-35%; left:-14%; pointer-events:none}
.hero .container{position:relative; z-index:1}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:22px}
.kicker::before{content:""; width:26px; height:1px; background:var(--accent)}
h1{font-size:clamp(40px,8.4vw,76px); line-height:1.04; font-weight:500}
h1 em, h2 em{font-style:italic; color:var(--accent)}
.lead{color:var(--muted); font-size:clamp(16px,2.6vw,19px); max-width:54ch; margin:26px 0 34px; line-height:1.7}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px}
.hero-visual{margin-top:clamp(36px,6vw,64px); position:relative}
.browser{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.browser-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.browser-bar .url{margin-left:10px; flex:1; height:22px; border-radius:6px; background:var(--bg2);
  font-size:10.5px; color:var(--muted); display:flex; align-items:center; padding:0 10px; letter-spacing:.04em;
  font-style:normal}
.browser-body{position:relative; background:var(--bg2)}
.browser-body picture,.browser-body img{display:block;width:100%}
/* Keep the responsive source's intrinsic height. The HTML fallback dimensions are
   desktop-sized, so an explicit auto height prevents them from becoming a fixed
   787 px image on phones and tablets. */
.browser-body img{height:auto; aspect-ratio:16/8.2; object-fit:cover}
.float-card{position:absolute; z-index:2; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-sm); padding:13px 16px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:10px; color:var(--ink)}
.float-card b{display:block; font-size:11px; color:var(--muted); font-weight:500}
.fc1{left:4%; bottom:-18px}
.fc2{right:4%; top:-16px}
.fc-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--blue) 18%, transparent); color:var(--blue-soft); flex:none}
.fc2 .fc-ic{background:color-mix(in srgb, var(--gold) 20%, transparent); color:var(--accent)}
.fc-ic .ic{width:17px;height:17px;vertical-align:0}

/* ---------- 6. Page hero (interior pages) ---------- */
.page-hero{position:relative; padding:clamp(40px,6vw,72px) 0 clamp(38px,5vw,60px); overflow:hidden}
.page-hero::before{content:""; position:absolute; width:min(60vw,560px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--glow-b), transparent 65%); top:-40%; right:-12%; pointer-events:none}
.page-hero::after{content:""; position:absolute; width:min(45vw,420px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--glow-g), transparent 65%); bottom:-55%; left:-10%; pointer-events:none}
.page-hero .container{position:relative; z-index:1}
.page-hero h1{font-size:clamp(34px,6.8vw,58px); max-width:20ch}
.page-hero .lead{margin-bottom:0}
.page-hero .hero-ctas{margin-top:32px}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);
  margin-bottom:26px; list-style:none}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"/"; margin-right:8px; opacity:.5}

/* ---------- 7. Trust strip ---------- */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2)}
.trust .container{display:grid; grid-template-columns:1fr 1fr; gap:1px; padding-top:0; padding-bottom:0}
.trust-item{padding:22px 20px 22px 0; display:flex; gap:12px; align-items:flex-start; font-size:13.5px;
  color:var(--muted); line-height:1.45}
.trust-item b{color:var(--ink); display:block; font-size:14px; margin-bottom:2px}
.trust-item .t-ic{color:var(--accent); flex:none; margin-top:2px}
.trust-item .t-ic .ic{width:18px;height:18px;vertical-align:0}

/* ---------- 8. Section headers ---------- */
.sec-head{max-width:640px; margin-bottom:clamp(34px,6vw,56px)}
.sec-head h2{font-size:clamp(30px,5.6vw,46px); line-height:1.12; font-weight:500}
.sec-head p{color:var(--muted); margin-top:14px; font-size:16px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.alt-band{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- 9. Service cards ---------- */
.services{display:grid; gap:18px}
.svc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,4.5vw,38px); position:relative; overflow:hidden; display:block;
  text-decoration:none; color:var(--ink);
  transition:transform .25s ease, border-color .25s ease}
.svc:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--gold) 45%, var(--line))}
.svc .n{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:15px; color:var(--accent)}
.svc h3{font-size:clamp(21px,3.4vw,26px); margin:12px 0 10px; font-weight:600; letter-spacing:-.02em}
.svc p{color:var(--muted); font-size:15px; max-width:44ch}
.svc .link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:var(--ink);
  font-weight:600; font-size:14px; text-decoration:none}
.svc .link .ic{transition:transform .2s ease; color:var(--accent); width:1.05em; height:1.05em}
.svc:hover .link .ic{transform:translateX(4px)}
.svc.flag{background:radial-gradient(120% 150% at 100% 0%, var(--glow-b), transparent 55%), var(--surface)}
.badge{position:absolute; top:20px; right:20px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); padding:6px 11px; border-radius:99px}

/* ---------- 10. Promise / icon points ---------- */
.promise-grid{display:grid; gap:clamp(30px,6vw,70px)}
.promise-grid h2{font-size:clamp(30px,5.6vw,46px); line-height:1.14; font-weight:500}
.promise-grid > div > p{color:var(--muted); margin-top:16px; font-size:16px; max-width:50ch}
.points{display:grid; gap:14px}
.point{display:flex; gap:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:20px 22px}
.point-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--accent)}
.point-ic .ic{width:19px;height:19px;vertical-align:0}
.point b{display:block; margin-bottom:3px; font-size:15px}
.point p{color:var(--muted); font-size:13.5px; line-height:1.55}

/* ---------- 11. Feature grid (interior pages) ---------- */
.feats{display:grid; gap:16px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:24px; transition:transform .25s ease, border-color .25s ease}
.feat:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}
.feat .f-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center; margin-bottom:16px;
  background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue-soft)}
.feat:nth-child(even) .f-ic{background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--accent)}
.feat .f-ic .ic{width:20px;height:20px;vertical-align:0}
.feat h3{font-size:16.5px; font-weight:600; margin-bottom:7px; letter-spacing:-.01em}
.feat p{color:var(--muted); font-size:14px; line-height:1.6}

/* ---------- 12. Projects ---------- */
.projects{display:grid; gap:20px}
.proj{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); text-decoration:none; color:var(--ink); display:block;
  transition:transform .25s ease, border-color .25s ease; cursor:pointer;
  text-align:left; font-family:inherit; font-size:inherit; width:100%; padding:0}
.proj:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}
.proj-cover{aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--bg2)}
.proj-cover picture{display:block;width:100%;height:100%}
.case-cover picture{display:block;width:100%;height:auto}
.proj-cover img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.65,.25,1)}
.proj:hover .proj-cover img{transform:scale(1.05)}
.proj-cover .tag{position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:#fff; background:rgba(7,11,20,.55);
  padding:5px 10px; border-radius:7px; backdrop-filter:blur(6px)}
.proj-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px}
.proj-meta h3{font-size:17px; font-weight:600; letter-spacing:-.01em}
.proj-meta p{color:var(--muted); font-size:13px; margin-top:2px}
.proj-meta .arrow{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:all .2s ease; color:var(--ink)}
.proj-meta .arrow .ic{width:15px;height:15px;vertical-align:0}
.proj:hover .arrow{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--gold-ink); border-color:transparent}

/* Project detail cards (projects page) */
.case{display:grid; gap:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:26px}
.case-cover{position:relative; overflow:hidden; background:var(--bg2)}
.case-cover img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform .6s cubic-bezier(.22,.65,.25,1)}
.case:hover .case-cover img{transform:scale(1.03)}
.case-body{padding:clamp(24px,4.5vw,40px)}
.case-body .n{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; color:var(--accent)}
.case-body h3{font-size:clamp(22px,4vw,30px); font-weight:600; letter-spacing:-.02em; margin:8px 0 4px}
.case-body .case-type{color:var(--muted); font-size:13.5px; margin-bottom:16px}
.case-body > p{color:var(--muted); font-size:15px; line-height:1.7; max-width:60ch}
.case-facts{display:grid; gap:12px; margin:22px 0}
.case-facts div{border-left:2px solid color-mix(in srgb, var(--gold) 55%, transparent); padding-left:14px}
.case-facts b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:3px}
.case-facts p{color:var(--muted); font-size:13.5px; line-height:1.55}
.case-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* ---------- 13. Process steps ---------- */
.steps{display:grid; gap:14px; counter-reset:step}
.step{display:flex; align-items:flex-start; gap:18px; padding:20px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); transition:transform .25s ease, border-color .25s ease}
.step:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}
.step::before{counter-increment:step; content:"0" counter(step);
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:22px; color:var(--accent);
  flex:none; width:40px; line-height:1.4}
.step b{font-size:15px; display:block}
.step p{color:var(--muted); font-size:13px; margin-top:2px; line-height:1.5}

/* Vertical timeline (service pages) */
.timeline{display:grid; gap:0; counter-reset:tl; max-width:720px}
.tl-item{position:relative; padding:0 0 30px 56px; counter-increment:tl}
.tl-item::before{content:"0" counter(tl); position:absolute; left:0; top:-2px;
  width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, var(--gold) 50%, var(--line));
  display:grid; place-items:center; font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:14px; color:var(--accent); background:var(--surface)}
.tl-item::after{content:""; position:absolute; left:19.5px; top:42px; bottom:4px; width:1px;
  background:linear-gradient(var(--line), transparent)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::after{display:none}
.tl-item b{font-size:16px; display:block; margin-bottom:4px}
.tl-item p{color:var(--muted); font-size:14px; line-height:1.65; max-width:56ch}

/* ---------- 14. Team ---------- */
.team{display:grid; gap:18px}
.member{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; text-align:center; transition:transform .25s ease}
.member:hover{transform:translateY(-4px)}
.member .photo{width:112px;height:112px;border-radius:50%;margin:0 auto 18px; position:relative}
.member .photo picture{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.member .photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.65,.25,1),filter .4s ease}
.member:hover .photo img{transform:scale(1.045);filter:saturate(1.04)}
.member .photo::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--gold) 55%, transparent)}
.member:hover .photo::after{animation:ringSpin 10s linear infinite}
.member h3{font-size:18px; font-weight:600}
.member .role{color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; margin:5px 0 10px}
.member p{color:var(--muted); font-size:13.5px; line-height:1.6}
.member.wide{text-align:left}
.member.wide .photo{margin:0 0 18px}

/* ---------- 15. FAQ accordion ---------- */
.faq{max-width:760px; display:grid; gap:12px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .25s ease}
.faq details[open]{border-color:color-mix(in srgb, var(--gold) 45%, var(--line))}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:19px 22px; font-weight:600; font-size:15.5px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fx{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--accent);transition:transform .3s ease, background .2s ease}
.faq details[open] summary .fx{transform:rotate(45deg)}
.faq summary .fx .ic{width:14px;height:14px;vertical-align:0}
.faq .faq-a{padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.7; max-width:64ch}
.faq .faq-a a{color:var(--accent)}

/* ---------- 16. CTA band ---------- */
.cta-band{position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(80% 120% at 50% -20%, var(--glow-b), transparent 60%),
    radial-gradient(60% 100% at 80% 120%, var(--glow-g), transparent 60%),
    var(--bg2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band h2{font-size:clamp(30px,6vw,50px); line-height:1.12; font-weight:500; max-width:22ch; margin:0 auto}
.cta-band > .container > p{color:var(--muted); max-width:52ch; margin:18px auto 32px; font-size:16px}
.wa-note{margin-top:18px; font-size:13px; color:var(--muted)}
.cta-steps{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:0 auto 34px;
  list-style:none; color:var(--muted); font-size:13.5px; padding:0}
.cta-steps li{display:flex; align-items:center; gap:8px}
.cta-steps .cs-n{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:color-mix(in srgb, var(--gold) 20%, transparent);color:var(--accent)}

/* ---------- 17. Contact ---------- */
.contact-grid{display:grid; gap:16px}
.ccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink);
  transition:transform .25s ease, border-color .25s ease}
a.ccard:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--gold) 45%, var(--line))}
.ccard .c-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;
  background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue-soft)}
.ccard.gold .c-ic{background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--accent)}
.ccard.wa .c-ic{background:color-mix(in srgb, var(--wa) 18%, transparent); color:var(--wa)}
.ccard .c-ic .ic{width:20px;height:20px;vertical-align:0}
.ccard b{font-size:16px; letter-spacing:-.01em}
.ccard p{color:var(--muted); font-size:13.5px; line-height:1.55}
.ccard .val{font-size:17px; font-weight:600; margin-top:2px; overflow-wrap:anywhere}

/* ---------- 18. Careers ---------- */
.role-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4.5vw,36px); margin-bottom:20px}
.role-card h3{font-size:clamp(20px,3.6vw,25px); font-weight:600; letter-spacing:-.02em; margin-bottom:8px}
.role-card .r-sub{color:var(--muted); font-size:14.5px; line-height:1.65; max-width:62ch}
.role-cols{display:grid; gap:18px; margin:22px 0}
.role-cols h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.role-cols ul{list-style:none; display:grid; gap:8px}
.role-cols li{display:flex; gap:10px; color:var(--muted); font-size:14px; line-height:1.5}
.role-cols li .ic{color:var(--accent); width:16px; height:16px; margin-top:3px}

/* ---------- 19. Checklists & prose ---------- */
.checks{list-style:none; display:grid; gap:12px}
.checks li{display:flex; gap:12px; color:var(--muted); font-size:14.5px; line-height:1.6}
.checks li .ic{color:var(--accent); width:18px; height:18px; margin-top:4px}
.checks li b{color:var(--ink)}
.prose{max-width:720px}
.prose h2{font-size:clamp(22px,4vw,28px); font-weight:600; letter-spacing:-.02em; margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p, .prose li{color:var(--muted); font-size:15px; line-height:1.75}
.prose ul{padding-left:20px; margin:10px 0}
.prose a{color:var(--accent)}
.split{display:grid; gap:clamp(28px,5vw,64px); align-items:center}
.split .img-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);background:var(--bg2)}
.split .img-wrap picture{display:block;width:100%;height:100%}
.split .img-wrap img{display:block;width:100%; height:100%; object-fit:cover;transition:transform 1s cubic-bezier(.22,.65,.25,1),filter .8s ease}

/* Platform chips */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:99px;
  padding:9px 16px; font-size:13.5px; font-weight:600; background:var(--surface)}
.chip .ic{width:15px;height:15px;color:var(--accent)}

/* ---------- 20. Footer ---------- */
footer.site{padding:clamp(40px,7vw,64px) 0 110px; border-top:1px solid var(--line); background:var(--bg)}
.foot{display:grid; gap:32px}
.foot .logo{margin-bottom:12px}
.foot > div > p{color:var(--muted); font-size:13.5px; max-width:36ch; line-height:1.65}
.foot h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.foot ul{list-style:none; display:grid; gap:9px}
.foot ul a{color:var(--ink); opacity:.85; text-decoration:none; font-size:14px; transition:color .2s ease, opacity .2s ease}
.foot ul a:hover{opacity:1; color:var(--accent)}
.socials{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted); transition:all .2s ease}
.socials a:hover{color:var(--ink); border-color:var(--muted); transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.copyright{margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}
.copyright a{color:var(--muted); text-decoration:none}
.copyright a:hover{color:var(--ink)}

/* ---------- 21. Floating WhatsApp ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:70; display:flex; align-items:center; gap:0;
  height:56px; border-radius:99px; background:var(--wa); color:#fff; text-decoration:none;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55); transition:transform .2s ease; padding:0 16px}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px;fill:#fff;flex:none}
.wa-float .wa-label{max-width:0; overflow:hidden; white-space:nowrap; font-weight:600; font-size:14px;
  transition:max-width .35s ease, margin .35s ease}
.wa-float.show-label .wa-label, .wa-float:hover .wa-label{max-width:170px; margin-left:10px}

/* ---------- 22. Modal (project preview) ---------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:14px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s}
.modal.open{opacity:1; visibility:visible}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,7,13,.72); backdrop-filter:blur(8px)}
.modal-box{position:relative; width:min(1060px,100%); max-height:calc(100dvh - 28px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(24px) scale(.98); transition:transform .35s cubic-bezier(.22,.65,.25,1)}
.modal.open .modal-box{transform:none}
.modal-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex:none}
.modal-head .m-title{font-weight:600; font-size:15px; letter-spacing:-.01em}
.modal-head .m-url{color:var(--muted); font-size:12px; display:none}
.modal-close{margin-left:auto; width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none;
  transition:all .2s ease}
.modal-close:hover{border-color:var(--muted); transform:rotate(90deg)}
.modal-close .ic{width:15px;height:15px;vertical-align:0}
.modal-frame{flex:1; min-height:0; background:var(--bg2)}
.modal-frame iframe{width:100%; height:100%; min-height:min(62vh,560px); border:0; display:block}
.modal-foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 18px;
  border-top:1px solid var(--line); flex:none}
.modal-foot .m-note{color:var(--muted); font-size:12.5px; flex:1 1 100%}
body.modal-open{overflow:hidden}

/* ---------- 23. Motion ---------- */
@keyframes rise{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@keyframes glowDrift{from{opacity:.7; transform:scale(1) translate(0,0)} to{opacity:1; transform:scale(1.15) translate(-2%,3%)}}
@keyframes bob{from{transform:translateY(0)} to{transform:translateY(-9px)}}
@keyframes shine{from{transform:translateX(-160%) skewX(-18deg)} to{transform:translateX(260%) skewX(-18deg)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.hero .kicker, .page-hero .kicker{animation:rise .8s .05s cubic-bezier(.22,.65,.25,1) both}
.hero h1, .page-hero h1{animation:rise .9s .15s cubic-bezier(.22,.65,.25,1) both}
.hero .lead, .page-hero .lead{animation:rise .9s .3s cubic-bezier(.22,.65,.25,1) both}
.hero-ctas{animation:rise .9s .42s cubic-bezier(.22,.65,.25,1) both}
.hero-visual{animation:rise 1s .55s cubic-bezier(.22,.65,.25,1) both}
.page-hero .crumbs{animation:rise .7s 0s cubic-bezier(.22,.65,.25,1) both}
.hero::before, .page-hero::before{animation:glowDrift 11s ease-in-out infinite alternate}
.hero::after, .page-hero::after{animation:glowDrift 14s 2s ease-in-out infinite alternate-reverse}
.float-card{animation:bob 4.5s ease-in-out infinite alternate}
.fc2{animation-delay:1.4s; animation-duration:5.5s}
.rv{opacity:0; transform:translateY(30px)}
.rv-in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.22,.65,.25,1)}
.img-wrap.rv img,.proj.rv picture img,.case.rv picture img{transform:scale(1.035);filter:saturate(.78) brightness(.86)}
.img-wrap.rv-in img,.proj.rv-in picture img,.case.rv-in picture img{transform:scale(1);filter:none}
.proj.rv-in:hover picture img{transform:scale(1.05)}
.case.rv-in:hover picture img{transform:scale(1.03)}

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

/* ---------- 24. Responsive (mobile-first) ---------- */
@media (max-width:639px){
  /* The full CTA lives inside the mobile menu; hiding this copy keeps 320 px headers comfortable. */
  .header-actions > .btn{display:none}
  /* Keep paired hero actions visually balanced until they have room to sit side by side. */
  .hero-ctas .btn{width:100%; padding-left:20px; padding-right:20px}
  .wa-float.show-label .wa-label, .wa-float:hover .wa-label{max-width:0; margin-left:0}
  .browser-body img{height:auto; aspect-ratio:4/3}
  .proj-cover{aspect-ratio:4/3}
  .case-cover img{aspect-ratio:4/3}
}
@media (max-width:479px){
  .trust .container{grid-template-columns:1fr}
  .trust-item{padding:18px 0}
  .trust-item + .trust-item{border-top:1px solid var(--line)}
}
@media (max-width:359px){
  .hero h1{font-size:36px}
  .container{padding-left:16px; padding-right:16px}
  .point{padding:18px}
  .float-card{padding:11px 12px; font-size:11.5px}
  .float-card b{font-size:10.5px}
  .fc-ic{width:30px; height:30px}
}
@media (min-width:480px){
  .trust .container{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:640px){
  .trust .container{grid-template-columns:repeat(2,1fr)}
  .trust-item{padding:22px 20px}
  .services{grid-template-columns:repeat(2,1fr)}
  .svc.flag{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
  .proj:first-child{grid-column:1/-1}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot > :first-child{grid-column:1/-1}
  .feats{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .role-cols{grid-template-columns:1fr 1fr}
  .case-facts{grid-template-columns:repeat(3,1fr)}
  .modal-head .m-url{display:block}
}
@media (min-width:900px){
  .trust .container{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .navlinks{display:flex}
  .navlinks + .header-actions{margin-left:8px}
  .menu-btn{display:none}
  .services{grid-template-columns:repeat(3,1fr)}
  .svc.flag{grid-column:auto}
  .promise-grid{grid-template-columns:1fr 1fr; align-items:center}
  .projects{grid-template-columns:repeat(3,1fr)}
  .proj:first-child{grid-column:auto}
  .steps{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .feats{grid-template-columns:repeat(3,1fr)}
  .feats.cols2{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(4,1fr)}
  .contact-grid.cols3{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .split.rev .img-wrap{order:2}
  .case{grid-template-columns:1.05fr 1fr; align-items:stretch}
  .case-cover picture{height:100%}
  .case-cover img{height:100%; aspect-ratio:auto; min-height:420px}
  .case.rev .case-cover{order:2}
  .foot{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .foot > :first-child{grid-column:auto}
}