/* =========================================================================
   GLASYN LIMITED — glasyn-limited.com
   Design system inspired by the RNO1 reference:
   warm near-black canvas, oversized grotesque display type, violet accent.
   Fonts self-hosted (GDPR-safe) — see /fonts/get-fonts.sh + README.
   ========================================================================= */

/* ---- Self-hosted variable fonts (populated at build time) ---------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Palette (pulled from the reference: bg #1D1C1F, accent #9747FF) */
  --bg:        #1a191c;
  --bg-deep:   #121113;
  --panel:     #232127;
  --panel-2:   #2b2930;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  --ink:       #f4f2ef;
  --ink-soft:  #c6c3ca;
  --muted:     #8b8891;
  --muted-2:   #6d6a73;

  --accent:    #9747ff;   /* signature violet */
  --accent-2:  #b98bff;
  --accent-ink:#ffffff;
  --lime:      #d6ff3f;   /* rare secondary highlight */

  --font-display: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 18px;
  --radius-lg: 26px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Metric-ish fallbacks to reduce layout shift before webfonts load */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial");
  ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; size-adjust: 100%;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

/* ---- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 150px); position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Display type scale */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --pad-y: 14px; --pad-x: 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -12px var(--accent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px var(--accent); }
.btn--primary:hover svg { transform: translate(3px,-3px); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: #fff; color: #111; border-color: #fff; transform: translateY(-2px); }
.btn--lg { --pad-y: 18px; --pad-x: 34px; font-size: 1.02rem; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(18,17,19,.72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: .01em; }
.brand__word b { color: var(--accent); }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a { font-size: .95rem; color: var(--ink-soft); position: relative; padding: 6px 0; transition: color .3s; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--accent); transition: width .3s var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); align-items: center; justify-content: center; }
.nav__toggle span { position: relative; width: 18px; height: 2px; background: var(--ink); transition: .3s; }
.nav__toggle span::before, .nav__toggle span::after { content:""; position:absolute; left:0; width:18px; height:2px; background: var(--ink); transition: .3s; }
.nav__toggle span::before { top:-6px; } .nav__toggle span::after { top:6px; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: rotate(45deg); top:0; }
body.menu-open .nav__toggle span::after { transform: rotate(-45deg); top:0; }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; padding-top: 128px; padding-bottom: 48px; overflow: hidden; }
.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__glow::before {
  content:""; position:absolute; left:46%; top:38%; transform: translate(-50%,-50%);
  width: min(94vw, 1020px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,71,255,.5), rgba(151,71,255,.14) 42%, rgba(151,71,255,0) 66%);
  filter: blur(38px);
}
/* Second, cooler pool low-right — ties the prism into the canvas, and a
   top-down darkening so the header and headline always sit on deep ground. */
.hero__glow::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(48% 42% at 78% 74%, rgba(120,60,220,.30), transparent 70%),
    radial-gradient(70% 50% at 50% 0%, rgba(0,0,0,.62), transparent 62%),
    linear-gradient(180deg, rgba(18,17,19,.55) 0%, transparent 34%, rgba(18,17,19,.75) 100%);
}
.hero__inner { position: relative; z-index: 2; text-align: center; }
.hero__badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px;
  padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .8rem; color: var(--ink-soft); background: rgba(255,255,255,.03);
  max-width: 100%; flex-wrap: wrap; text-align: center; line-height: 1.4;
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: .88; letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 10.4vw, 9.6rem);
  margin: 0 auto; overflow-wrap: break-word;
}
.hero__title .stroke {
  color: transparent; -webkit-text-stroke: 1.4px var(--ink-soft);
  text-stroke: 1.4px var(--ink-soft);
}
.hero__title .accent { color: var(--accent); }
.hero__title .tm { font-size: .28em; vertical-align: super; -webkit-text-stroke: 0; color: var(--accent-2); }
.hero__lede {
  max-width: 640px; margin: 26px auto 0; font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  color: var(--ink-soft); line-height: 1.6;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero__scroll { margin-top: 44px; display: inline-flex; align-items:center; gap:10px; color: var(--muted); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.hero__scroll .mouse { width:22px; height:34px; border:1.5px solid var(--line-2); border-radius:14px; position:relative; }
.hero__scroll .mouse::after { content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px; background: var(--accent-2); transform:translateX(-50%); animation: scrolldot 1.6s var(--ease) infinite; }
@keyframes scrolldot { 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)} }

/* ---- Marquee ------------------------------------------------------------ */
.marquee { border-block: 1px solid var(--line); padding-block: 26px; overflow: hidden; background: var(--bg-deep); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--muted); letter-spacing: .01em; }
.marquee__item svg { width: 20px; height: 20px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Section heading (oversized "ghost" style, per reference) ------------ */
.sec-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); padding-right: clamp(0px, 12vw, 160px); }
.sec-head > div:first-child { max-width: 100%; }
.sec-head__title {
  font-size: clamp(2.8rem, 10vw, 8.5rem);
  text-transform: uppercase; line-height: .84; letter-spacing: -0.035em;
  color: #46434b;               /* ghost grey, echoes reference #575B5F */
  margin-top: 18px; max-width: 16ch;
}
.sec-head__title em { font-style: normal; color: var(--accent); }
.sec-head__aside { max-width: 460px; color: var(--ink-soft); font-size: 1.06rem; }

/* rotating violet orb accent (top-right of the heading block) */
.orb { position: absolute; top: 6px; right: 0; width: clamp(74px, 9vw, 120px); height: clamp(74px, 9vw, 120px); color: var(--accent); animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .orb { width: 62px; height: 62px; top: 0; } .sec-head { padding-right: 76px; } }

/* ---- Services ----------------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.svc {
  grid-column: span 4; position: relative; overflow: hidden;
  padding: 34px 30px 30px; border-radius: var(--radius-lg);
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  min-height: 300px; display: flex; flex-direction: column;
}
.svc::after { content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(500px circle at var(--mx,50%) var(--my,0%), rgba(151,71,255,.16), transparent 60%); opacity:0; transition: opacity .5s; pointer-events:none; }
.svc:hover { transform: translateY(-6px); border-color: var(--line-2); background: var(--panel-2); }
.svc:hover::after { opacity: 1; }
.svc__num { font-family: var(--font-display); font-size: .8rem; color: var(--muted-2); letter-spacing: .08em; }
.svc__icon { width: 52px; height: 52px; margin: 18px 0 22px; color: var(--accent); }
.svc__icon svg { width: 100%; height: 100%; }
.svc__title { font-size: 1.5rem; text-transform: none; letter-spacing: -0.01em; margin-bottom: 10px; }
.svc__desc { color: var(--ink-soft); font-size: .98rem; margin-bottom: 20px; }
.svc__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.svc__tags span { font-size: .74rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.svc--wide { grid-column: span 8; }
.svc--accent { background: linear-gradient(135deg, var(--accent), #6d29c9); border-color: transparent; }
.svc--accent .svc__num, .svc--accent .svc__desc { color: rgba(255,255,255,.86); }
.svc--accent .svc__icon { color: #fff; }
.svc--accent .svc__tags span { border-color: rgba(255,255,255,.35); color: #fff; }
.svc--accent:hover { background: linear-gradient(135deg, #a95cff, #7a34d6); }

/* ---- Work / showcase (borderless, caption below — per reference) --------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px,4vw,52px) 24px; }
.work-card { position: relative; }
.work-card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--bg-deep); border-radius: 6px; }
.work-card__media img { width:100%; height:100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.work-card:hover .work-card__media img { transform: scale(1.045); }
.work-card__tag { position:absolute; top:16px; left:16px; z-index:2; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; background: rgba(18,17,19,.66); border:1px solid var(--line-2); backdrop-filter: blur(6px); padding:6px 12px; border-radius:999px; color: var(--ink-soft); }
.work-card__body { padding: 20px 2px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.work-card__title { font-size: clamp(1.5rem,2.4vw,2rem); text-transform: none; letter-spacing:-.02em; }
.work-card__title + .work-card__meta, .work-card__meta { color: var(--muted); font-size: 1rem; margin-top:8px; }
.work-card__arrow { flex: none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink); transition:.4s var(--ease); margin-top:4px; }
.work-card:hover .work-card__arrow { background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }
.work-card__arrow svg { width:18px; height:18px; }

/* ---- Approach / process ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { padding: 34px 26px 40px; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: 0; }
.step__n { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--panel-2); line-height:1; }
.step:hover .step__n { color: var(--accent); transition: color .4s; }
.step__t { font-size: 1.2rem; text-transform:none; margin: 16px 0 10px; }
.step__d { color: var(--ink-soft); font-size: .95rem; }

/* ---- Stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { padding: 28px 24px; border:1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.stat__n { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.6rem); color: var(--ink); line-height:1; }
.stat__n span { color: var(--accent); }
.stat__l { color: var(--muted); margin-top: 10px; font-size: .92rem; }

/* ---- About -------------------------------------------------------------- */
.about { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,70px); align-items:center; }
.about__media { position:relative; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio: 4/5; background: var(--bg-deep); }
.about__media img { width:100%; height:100%; object-fit:cover; }
.about__lead { font-family: var(--font-display); font-weight:500; text-transform:none; font-size: clamp(1.5rem,3vw,2.2rem); line-height:1.15; letter-spacing:-.02em; }
.about__lead em { font-style:normal; color: var(--accent); }
.about__p { color: var(--ink-soft); margin-top: 22px; font-size: 1.02rem; }
.about__list { margin-top: 26px; display:grid; gap:14px; }
.about__list li { display:flex; gap:14px; align-items:flex-start; color: var(--ink-soft); }
.about__list svg { flex:none; width:22px; height:22px; color: var(--accent); margin-top:2px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { display:grid; grid-template-columns: 1fr; gap: 0; border-top:1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding: 28px 4px; font-family: var(--font-display); font-weight:500; font-size: clamp(1.15rem,2.4vw,1.7rem); text-transform:none; letter-spacing:-.01em; color: var(--ink); }
.faq__q .ic { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:.4s var(--ease); }
.faq__q .ic::before, .faq__q .ic::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background: var(--ink); transform: translate(-50%,-50%); transition:.4s var(--ease); }
.faq__q .ic::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq__item.open .ic { background: var(--accent); border-color: var(--accent); }
.faq__item.open .ic::after { transform: translate(-50%,-50%) rotate(0); opacity:0; }
.faq__a { overflow:hidden; height:0; transition: height .45s var(--ease); }
.faq__a-inner { padding: 0 4px 30px; max-width: 70ch; color: var(--ink-soft); font-size:1.02rem; }

/* ---- CTA / contact ------------------------------------------------------ */
.cta { position:relative; overflow:hidden; }
.cta__big { font-family: var(--font-display); font-weight:700; text-transform:uppercase; line-height:.86; letter-spacing:-.03em; font-size: clamp(3.4rem, 16vw, 15rem); text-align:center; }
.cta__big .accent { color: var(--accent); }
.cta__row { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top: 40px; }
.contact-panels { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 70px; }
.cpanel { padding: 30px 28px; border:1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cpanel h3 { text-transform: uppercase; font-size: .8rem; letter-spacing:.14em; color: var(--muted); font-family: var(--font-body); font-weight:600; margin-bottom:14px; }
.cpanel a, .cpanel address { font-style: normal; font-size: 1.12rem; color: var(--ink); line-height:1.5; }
.cpanel a:hover { color: var(--accent-2); }

/* ---- Newsletter (light contrast panel — per reference) ------------------ */
.news { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items:center; padding: clamp(38px,5vw,72px); border-radius: var(--radius-lg); background: #c7c4cc; color: #17161a; }
.news .eyebrow { color: #55525b; }
.news .eyebrow::before { background: var(--accent); box-shadow: none; }
.news h3 { font-size: clamp(1.8rem,4vw,3rem); text-transform:uppercase; color:#141317; letter-spacing:-.02em; }
.news p { color: #3d3b42; margin-top:14px; }
.news form { display:flex; gap:10px; flex-wrap:wrap; background:#fff; border-radius:999px; padding:7px 7px 7px 4px; }
.news input { flex:1; min-width: 200px; padding: 14px 20px; border-radius:999px; border:0; background:transparent; color:#17161a; font-size:1rem; }
.news input::placeholder { color: #8a8791; }
.news input:focus { outline:none; }
.news form .btn--primary { box-shadow:none; }
.news small { display:block; margin-top:14px; color: #56535c; font-size:.82rem; }
.news small a { color: #56535c; text-decoration: underline; }
.news #newsMsg { color:#5a2ea6 !important; }

/* ---- Footer ------------------------------------------------------------- */
.footer { border-top:1px solid var(--line); background: var(--bg-deep); padding-block: clamp(56px,7vw,90px) 40px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand .brand__word { font-size: 1.7rem; }
.footer__tagline { color: var(--ink-soft); margin-top: 18px; max-width: 32ch; }
.footer__col h4 { font-family: var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color: var(--muted); margin-bottom:16px; }
.footer__col a { display:block; color: var(--ink-soft); padding: 6px 0; transition: color .3s; }
.footer__col a:hover { color: #fff; }
.footer__legal { margin-top: clamp(46px,6vw,72px); padding-top: 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color: var(--muted); font-size:.85rem; line-height:1.7; }
.footer__legal .company-id { max-width: 62ch; }
.footer__legal a { color: var(--muted); text-decoration: underline; }
.footer__legal a:hover { color: var(--ink); }
.socials { display:flex; gap:12px; margin-top:20px; }
.socials a { width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color: var(--ink-soft); transition:.35s var(--ease); }
.socials a:hover { background:#fff; color:#111; border-color:#fff; transform: translateY(-2px); }
.socials svg { width:18px; height:18px; }

/* ---- Cookie banner ------------------------------------------------------ */
.cookie { position: fixed; right: clamp(14px,3vw,28px); bottom: clamp(14px,3vw,28px); z-index: 80; width: min(380px, calc(100vw - 28px)); background: rgba(24,23,26,.94); backdrop-filter: blur(16px); border:1px solid var(--line-2); border-radius: var(--radius); padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); transform: translateY(20px); opacity:0; pointer-events:none; transition: .5s var(--ease); }
.cookie.show { transform:none; opacity:1; pointer-events:auto; }
.cookie h4 { font-family: var(--font-display); font-size: 1.15rem; text-transform:none; margin-bottom:10px; }
.cookie p { color: var(--ink-soft); font-size: .9rem; }
.cookie p a { color: var(--accent-2); text-decoration: underline; }
.cookie__row { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.cookie__row .btn { --pad-y:11px; --pad-x:18px; font-size:.86rem; flex:1; }
.cookie__row .btn--ghost { flex:1; }

/* ---- Reveal animations -------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"]{ transition-delay:.08s } [data-reveal-delay="2"]{ transition-delay:.16s }
[data-reveal-delay="3"]{ transition-delay:.24s } [data-reveal-delay="4"]{ transition-delay:.32s }
[data-reveal-delay="5"]{ transition-delay:.40s }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .svc { grid-column: span 6; } .svc--wide { grid-column: span 12; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step:nth-child(2) { border-right:0; }
  .step { border-bottom:1px solid var(--line); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; }
  .contact-panels { grid-template-columns: 1fr; }
  .news { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .mobile-menu { position: fixed; inset: 78px 0 0 0; z-index: 55; background: var(--bg); display:flex; flex-direction:column; padding: 30px var(--gutter); gap: 6px; transform: translateY(-8px); opacity:0; pointer-events:none; transition:.4s var(--ease); }
  body.menu-open .mobile-menu { transform:none; opacity:1; pointer-events:auto; }
  .mobile-menu a { font-family: var(--font-display); font-size: 2rem; text-transform:uppercase; padding: 14px 0; border-bottom:1px solid var(--line); }
  .mobile-menu .btn { margin-top: 22px; }
  .hero { padding-top: 128px; }
  .hero__badge { font-size: .72rem; padding: 7px 14px; }
  .hero__badge > span:last-child { min-width: 0; }
  .hero__title { font-size: clamp(2.1rem, 9vw, 3.7rem); }
  .cta__big { font-size: clamp(3rem, 22vw, 6rem); }
  .cookie { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  .cookie__row { flex-wrap: nowrap; }
  .work-grid { grid-template-columns: 1fr; }
  .svc { grid-column: span 12; min-height: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .footer__legal { flex-direction: column; }
  .hero__title .stroke { -webkit-text-stroke-width: 1px; }
}
.mobile-menu { display: none; }
@media (max-width: 720px) { .mobile-menu { display: flex; } }

/* ---- Legal pages -------------------------------------------------------- */
.legal { padding-top: 150px; }
.legal .wrap { max-width: 820px; }
.legal__eyebrow { color: var(--accent-2); }
.legal h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); text-transform: uppercase; margin: 14px 0 8px; letter-spacing:-.03em; }
.legal__meta { color: var(--muted); font-size: .92rem; margin-bottom: 44px; }
.legal h2 { font-size: 1.4rem; text-transform: none; margin: 40px 0 12px; letter-spacing:-.01em; }
.legal h3 { font-size: 1.08rem; text-transform:none; margin: 26px 0 8px; color: var(--ink); font-family: var(--font-body); font-weight:700; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 18px; padding-left: 0; }
.legal ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.legal ul li::before { content:""; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:50%; background: var(--accent); }
.legal a { color: var(--accent-2); text-decoration: underline; }
.legal .callout { border:1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); padding: 22px 24px; margin: 24px 0; }
.legal .callout p:last-child { margin-bottom:0; }
.legal__back { display:inline-flex; align-items:center; gap:8px; margin-top:50px; color: var(--ink-soft); }
.legal__back:hover { color:#fff; }
.legal table { width:100%; border-collapse: collapse; margin: 10px 0 22px; font-size:.96rem; }
.legal th, .legal td { text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.legal th { color: var(--ink); font-family: var(--font-body); font-weight:700; }