/* ICE WIND — shared styles for service specialisation pages.
   Extends the existing homepage design system (tokens, header, footer,
   card grids, numbered process, CTA card) so every service page reads as
   an original part of the site. Loaded via ../assets/service.css. */
:root{
  --bg:#050b16;
  --bg-2:#081226;
  --panel:rgba(148,199,255,.045);
  --line:rgba(125,211,252,.14);
  --ice:#7dd3fc;
  --ice-strong:#38bdf8;
  --frost:#e0f2fe;
  --text:#dbe7f4;
  --muted:#8fa3bb;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
}
img,svg,canvas{max-width:100%}
a[href^="mailto:"],.mail,.legal a{overflow-wrap:anywhere;word-break:break-word}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.15}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid rgba(125,211,252,.55);outline-offset:3px}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(5,11,22,.65);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{display:block}
.logo-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.28em;
  background:linear-gradient(90deg,var(--frost),var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}
nav.links{display:flex;gap:30px;font-size:.92rem;color:var(--muted)}
nav.links a{transition:color .2s}
nav.links a:hover{color:var(--frost)}
.btn{
  display:inline-block;padding:11px 24px;border-radius:999px;font-weight:600;font-size:.92rem;
  background:linear-gradient(120deg,var(--ice-strong),var(--ice));color:#04101e;
  box-shadow:0 0 24px rgba(56,189,248,.35);transition:transform .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(56,189,248,.55)}
.btn.ghost{background:transparent;color:var(--frost);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ice);box-shadow:0 0 18px rgba(56,189,248,.25)}
@media(max-width:820px){nav.links{display:none}}

/* ---------- sections ---------- */
section{padding:96px 0;position:relative}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head .kicker{margin-bottom:18px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.05rem}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ice);
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;background:rgba(56,189,248,.06)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice)}

/* ---------- service hero ---------- */
.svc-hero{position:relative;overflow:hidden;
  background:radial-gradient(1100px 560px at 78% -10%,rgba(56,189,248,.16),transparent 60%),
             radial-gradient(820px 460px at 8% 120%,rgba(14,165,233,.12),transparent 62%),var(--bg)}
#wind{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.svc-hero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:150px 24px 84px}
.svc-hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:700;margin:24px 0 18px;letter-spacing:-.01em;max-width:17ch}
.svc-hero h1 .grad{background:linear-gradient(95deg,#fff 10%,var(--ice) 55%,var(--ice-strong));-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-hero .lead{max-width:640px;font-size:1.15rem;color:var(--frost)}
.svc-hero .sub{max-width:640px;margin-top:14px;color:var(--muted)}
.svc-hero-cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}

/* ---------- generic grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr}}

/* ---------- "what we build" cards (mirror homepage .svc) ---------- */
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;
  background:linear-gradient(160deg,var(--panel),rgba(148,199,255,.015));
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.card:hover{border-color:rgba(125,211,252,.4);transform:translateY(-4px);box-shadow:0 18px 50px rgba(3,10,22,.6),0 0 30px rgba(56,189,248,.08)}
.card .tag{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);opacity:.85}
.card h3{font-size:1.22rem;margin:8px 0 2px;color:var(--frost)}
.card ul{list-style:none;margin-top:18px;display:grid;gap:9px}
.card li{position:relative;padding-left:22px;color:var(--muted);font-size:.96rem}
.card li::before{content:"\2744";position:absolute;left:0;top:0;font-size:.7rem;color:var(--ice);opacity:.8}

/* ---------- problems (left-border cards) ---------- */
.prob{padding:24px 24px;border-left:2px solid var(--ice);background:rgba(148,199,255,.04);border-radius:0 var(--radius) var(--radius) 0}
.prob b{display:block;color:var(--frost);margin-bottom:6px;font-family:'Space Grotesk',sans-serif;font-size:1.02rem}
.prob span{color:var(--muted);font-size:.95rem}

/* ---------- why (mirror homepage .why) ---------- */
.why{border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:var(--panel)}
.why b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.05rem;color:var(--frost);margin-bottom:8px}
.why span{font-size:.92rem;color:var(--muted)}

/* ---------- capabilities chips ---------- */
.caps{display:flex;flex-wrap:wrap;gap:12px}
.cap{border:1px solid var(--line);border-radius:14px;padding:13px 18px;background:var(--panel);color:var(--frost);font-size:.95rem;display:inline-flex;align-items:center;gap:10px}
.cap::before{content:"\2744";color:var(--ice);font-size:.72rem;opacity:.85}

/* ---------- process (mirror homepage .steps) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;background:var(--panel);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;
  background:linear-gradient(180deg,var(--ice),rgba(125,211,252,.15));-webkit-background-clip:text;background-clip:text;color:transparent}
.step b{display:block;margin:14px 0 8px;color:var(--frost);font-family:'Space Grotesk',sans-serif}
.step span{font-size:.92rem;color:var(--muted)}

/* ---------- FAQ (native accessible disclosure) ---------- */
.faq{display:grid;gap:14px;max-width:880px}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  color:var(--frost);font-family:'Space Grotesk',sans-serif;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ice);font-size:1.45rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:18px 24px 24px;color:var(--muted);font-size:.98rem}

/* ---------- explore other specialisations (lighter than homepage block) ---------- */
.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.other-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.other-grid{grid-template-columns:1fr}}
.other{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--panel);
  display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.other:hover{border-color:rgba(125,211,252,.4);transform:translateY(-3px)}
.other span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);opacity:.85}
.other b{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--frost)}
.other .go{color:var(--muted);font-size:.85rem;margin-top:2px}
.other:hover .go{color:var(--ice)}

/* ---------- final CTA (mirror homepage .contact-card) ---------- */
.cta-card{
  text-align:center;border:1px solid rgba(125,211,252,.25);border-radius:24px;padding:72px 32px;
  background:radial-gradient(600px 280px at 50% -20%,rgba(56,189,248,.18),transparent 70%),linear-gradient(180deg,#0a1830,#060e1e);
}
.cta-card h2{font-size:clamp(1.9rem,3.8vw,2.8rem)}
.cta-card p{color:var(--muted);margin:16px auto 30px;max-width:560px}
.cta-card .mail{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;color:var(--ice);margin-top:22px;display:inline-block;max-width:100%}
.cta-card .mail:hover{text-decoration:underline}

/* ---------- footer (copied from homepage) ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 52px;font-size:.85rem;color:var(--muted);background:#040910}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot .legal{max-width:520px}
.foot b{color:var(--text);font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:12px}
.foot-links a{color:var(--frost);text-decoration:underline;text-decoration-color:rgba(125,211,252,.35);text-underline-offset:3px}
.foot-links a:hover{color:var(--ice)}
.foot-spec{display:flex;flex-direction:column;gap:9px}
.foot-spec b{color:var(--text);font-weight:600;font-family:'Space Grotesk',sans-serif;margin-bottom:2px}
.foot-spec a{color:var(--frost);text-decoration:none}
.foot-spec a:hover{color:var(--ice)}

@media(prefers-reduced-motion:reduce){#wind{display:none}html{scroll-behavior:auto}.card,.other,.btn{transition:none}}

/* ---------- mobile polish ---------- */
@media(max-width:600px){
  .wrap{padding:0 18px}
  .svc-hero-inner{padding:104px 18px 60px}
  .nav{height:64px}
  .logo-word{font-size:1rem;letter-spacing:.2em}
  .btn{padding:10px 18px;font-size:.88rem}
  section{padding:64px 0}
  .svc-hero .lead{font-size:1.05rem}
  .svc-hero-cta{gap:12px;margin-top:28px}
  .svc-hero-cta .btn{flex:1 1 auto;text-align:center}
  .sec-head{margin-bottom:36px}
  .card{padding:26px 22px}
  .cta-card{padding:52px 22px}
  .cta-card p{margin:14px auto 26px}
  footer{padding:36px 0 44px}
  .foot{gap:22px}
}