@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;800&family=Space+Mono:wght@400;700&display=swap');

/* ==========================================================================
   Tu Little — custom website development
   Deep navy-slate base, frosted glass surfaces and ONE restrained blue accent. Colour is used to point at things (actions, active
   state, numbers), never for decoration — that is what keeps it corporate
   rather than loud. Type: Archivo Black display, Space Mono labels, Inter body.
   ========================================================================== */

:root{
  --bg:#0b1220;
  --bg-2:#0f1829;

  --ink:#e9eef8;
  --ink-70:rgba(233,238,248,.70);
  --ink-55:rgba(233,238,248,.55);
  --ink-40:rgba(233,238,248,.40);

  /* Frosted surfaces, low alpha so the base tone reads through them. */
  --glass:rgba(255,255,255,.05);
  --glass-strong:rgba(255,255,255,.075);
  --glass-line:rgba(255,255,255,.13);
  --glass-line-soft:rgba(255,255,255,.09);

  --accent:#3b82f6;        /* icons, labels, hairlines */
  --accent-strong:#2563eb; /* button fills — passes contrast with white text */
  --accent-soft:#93b4fb;
  --accent-deep:#1e3a8a;

  --radius-lg:28px;
  --radius-md:22px;
  --shadow-card:0 24px 60px rgba(3,7,18,.55), inset 0 1px 0 rgba(255,255,255,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);overflow-x:hidden}
body{
  margin:0;
  position:relative;
  /* A fixed background only paints inside its own box, so on a very tall
     viewport a short page would leave a flat band below the content. */
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  background-color:var(--bg);
  /* Depth, not decoration: two cool pools of light in a single hue family.
     Fixed, so the page reads as content moving through a lit room. */
  background-image:
    radial-gradient(62vw 55vh at 10% 0%, rgba(59,130,246,.16), transparent 62%),
    radial-gradient(55vw 50vh at 90% 42%, rgba(37,99,235,.11), transparent 62%),
    radial-gradient(60vw 55vh at 30% 96%, rgba(30,58,138,.20), transparent 64%),
    linear-gradient(180deg,#0b1220 0%,#0f1829 50%,#0b1220 100%);
  background-attachment:fixed;
}
body > *{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-strong);color:#fff}

/* --- Type & layout primitives ------------------------------------------- */
.display{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.04em;line-height:.9}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:-.02em;font-weight:700}
.container{width:min(1440px,calc(100% - 40px));margin-inline:auto}
.lede{font-size:clamp(19px,2.4vw,32px);font-weight:800;text-transform:uppercase;line-height:1.02;margin:0}
.section-title{font-size:clamp(44px,7vw,104px);margin:0 0 20px}
.prose{font-size:clamp(15px,1.5vw,17px);line-height:1.62;color:var(--ink-70);font-weight:500;max-width:70ch}

/* Buttons use Inter at a real reading size, not the mono label face: uppercase
   monospace is fine for 10px kickers but it is the hardest thing to read at the
   one place a visitor has to make a decision. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border:1px solid rgba(255,255,255,.18);
  padding:.95rem 1.6rem;border-radius:999px;
  font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 12px 26px rgba(3,7,18,.38), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
/* Flat brand fill with one hairline of light along the top edge — enough to
   read as a raised surface without the showroom gloss. */
.btn.ink{
  background:var(--accent-strong);border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -8px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.ink:hover{background:#1d4ed8}
.btn.accent{background:var(--accent);color:#fff;border-color:transparent}
.btn.glass{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 12px 26px rgba(3,7,18,.38), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.btn.glass:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}

/* --- Header -------------------------------------------------------------- */
.site-header{position:fixed;top:16px;left:0;width:100%;z-index:50;pointer-events:none}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;min-height:54px}
.brand,.nav-pill,.nav-cta,.menu-toggle{pointer-events:auto}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 34px rgba(3,7,18,.5), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
}
/* The badge artwork is a circle on a square black plate — clipping to a circle
   drops the plate's corners so it sits on the glass capsule with no black box. */
.logo-mark{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  object-fit:cover;background:transparent;border:0;
  /* Hairline ring + glow: the badge art is dark, so it needs its own edge to
     separate from the equally dark header capsule behind it. */
  box-shadow:0 0 0 1px rgba(147,180,251,.32), 0 6px 18px rgba(59,130,246,.42);
}
.brand-name{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;letter-spacing:-.03em;line-height:1}
.brand-name small{display:block;font-size:9px;color:var(--ink-55);letter-spacing:.06em;margin-top:3px}

.nav-pill{
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 14px 34px rgba(3,7,18,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-pill a{
  font-family:'Space Mono',monospace;text-transform:uppercase;font-size:12px;font-weight:700;
  padding:10px 14px;border-radius:999px;color:var(--ink-70);
  transition:background .2s,color .2s;
}
.nav-pill a:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.nav-pill a.active{background:var(--accent-strong);color:#fff}
.nav-cta{
  display:inline-flex;align-items:center;
  font-family:'Space Mono',monospace;text-transform:uppercase;font-size:12px;font-weight:700;
  padding:12px 16px;border-radius:999px;
  background:var(--accent-strong);color:#fff;
  box-shadow:0 14px 30px rgba(37,99,235,.32);
  transition:transform .2s ease,background .2s ease;
}
.nav-cta:hover{transform:scale(1.04);background:#1d4ed8}

.menu-toggle,.menu-close{
  display:none;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--ink);
  border-radius:16px;cursor:pointer;padding:0;
  box-shadow:0 14px 30px rgba(3,7,18,.5), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  /* backdrop-filter promotes this to its own layer; pin paint/hit-test order so
     real taps land on the button and not the element painted underneath it. */
  isolation:isolate;transform:translateZ(0);position:relative;z-index:60;
  flex-direction:column;gap:5px;
}
.menu-toggle{width:48px;height:48px}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.menu-close{width:46px;height:46px;font:700 26px 'Space Mono',monospace;line-height:1}

/* Drawer is a SIBLING of <header>: .site-header's backdrop-filtered children
   create containing blocks that would otherwise collapse this fixed overlay. */
.mobile-menu{position:fixed;inset:0;width:100vw;height:100dvh;z-index:80;background:rgba(3,7,18,.72);opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mobile-menu.is-open{opacity:1;pointer-events:auto}
.mobile-menu-panel{
  position:absolute;top:0;right:0;width:min(86vw,380px);height:100%;
  background:
    radial-gradient(80% 40% at 85% 0%, rgba(59,130,246,.20), transparent 62%),
    linear-gradient(180deg,#111c31,#0b1220);
  border-left:1px solid rgba(255,255,255,.11);
  color:var(--ink);
  transform:translateX(100%);transition:transform .25s ease;
  padding:18px;display:flex;flex-direction:column;
}
.mobile-menu.is-open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:16px;margin-bottom:10px;color:var(--accent-soft);font-size:11px}
.mobile-menu-panel>a{
  font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(28px,8vw,42px);line-height:1.04;
  border-bottom:1px solid rgba(255,255,255,.11);padding:16px 0;
  transition:transform .2s,color .2s;
}
.mobile-menu-panel>a:hover,.mobile-menu-panel>a.active{color:var(--accent-soft);transform:translateX(12px)}
.mobile-menu-note{margin-top:auto;color:var(--accent-soft);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:13px 14px;font-size:11px;text-align:center;background:rgba(255,255,255,.04)}
body.menu-open{overflow:hidden}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* Capped, not pure 100svh: on a tall monitor a full-viewport hero stretched
     into a large empty field above the copy. */
  min-height:min(100svh,880px);padding-top:118px;
  display:flex;align-items:flex-end;
  background:
    radial-gradient(70% 60% at 20% 6%, rgba(59,130,246,.30), transparent 64%),
    radial-gradient(60% 55% at 85% 20%, rgba(37,99,235,.20), transparent 62%),
    linear-gradient(180deg,#132039 0%,#0d1526 58%,#0b1220 100%);
}
.waves-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.42;mix-blend-mode:screen}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg,rgba(11,18,32,0) 42%,rgba(11,18,32,.78) 100%);
}
.hero-inner{position:relative;z-index:2;width:min(1440px,calc(100% - 40px));margin-inline:auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(min(100svh,880px) - 118px);padding-bottom:34px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin:0 0 20px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  font-size:11px;color:var(--ink-70);text-transform:none;letter-spacing:0;
}
.hero-kicker i{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(59,130,246,.20);
  animation:kickerPulse 2.6s ease-in-out infinite;
}
@keyframes kickerPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-sub{
  margin:0 0 26px;max-width:640px;
  font-size:clamp(15px,1.55vw,19px);line-height:1.55;font-weight:500;color:var(--ink-70);
}
.hero-title{
  display:flex;flex-direction:column;gap:.02em;
  font-size:clamp(40px,8.4vw,116px);line-height:.92;letter-spacing:-.045em;
  margin:0 0 26px;max-width:1280px;
}
.hero-title span{display:block;color:#ffffff}
.hero-title .accent{color:var(--accent-soft)}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* --- Marquee ------------------------------------------------------------- */
.marquee-section{
  background:rgba(255,255,255,.04);
  border-block:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  transform:skewY(-2deg);margin:76px 0 66px;padding:52px 0;overflow:hidden;
}
.marquee-inner{transform:skewY(2deg)}
.marquee{display:flex;white-space:nowrap;overflow:hidden}
.marquee span{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(42px,9vw,132px);padding-right:3vw;animation:marq 24s linear infinite}
/* Solid row against an outlined row: the contrast between the two is what
   gives the band some life. A single flat tint read as grey noise. */
.marquee.row1 span{color:rgba(233,238,248,.62)}
.marquee.row2 span{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(59,130,246,.75);
  animation-direction:reverse;animation-duration:28s;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* --- Split + panels ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;padding:80px 0}
/* Grid and flex children default to min-width:auto, so anything with a wide
   min-content — the mock browser, a nowrap chip row — pushes its own column
   past the container instead of shrinking. Every layout track opts out. */
.split > *,.card-grid > *,.contact-layout > *,.legal-layout > *,.footer-grid > *{min-width:0}
.split h2{font-size:clamp(44px,7vw,104px);margin:0 0 20px}
.panel{
  position:relative;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:var(--radius-lg);padding:26px;
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--shadow-card);
}
.panel>.mono{margin:0 0 10px;font-size:11px;color:var(--accent-soft)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.metric{
  background:var(--glass);border:1px solid var(--glass-line-soft);border-radius:20px;padding:20px;
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
  box-shadow:0 18px 44px rgba(3,7,18,.4), inset 0 1px 0 rgba(255,255,255,.09);
}
.metric strong{display:block;font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.04em;line-height:1;color:#fff}
.metric span{display:block;margin-top:8px;font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;color:var(--ink-55)}

/* Browser mock — pure CSS, no image asset to keep in sync. */
.build-mock{padding:16px;border-radius:24px;margin-bottom:18px;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(59,130,246,.07));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

/* Stage chips under the browser frame. */
.build-stages{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.build-stages span{
  font-family:'Space Mono',monospace;text-transform:uppercase;font-size:10.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  border-radius:999px;padding:8px 11px;color:var(--ink-70);white-space:nowrap;
}
.build-stages span.done{background:var(--accent-strong);color:#fff;border-color:transparent}

/* --- Auto-scrolling interface showcase ----------------------------------- */
/* Five miniature interfaces, one per kind of project, stepping past inside the
   browser frame. They are drawn in CSS at roughly a third of real scale, with
   real navigation, prices, ratings and states — a customer should recognise
   them as finished screens, not wireframes. None of them is a real client site. */
.mock-screens{position:relative;overflow:hidden;height:352px;margin-top:14px;border-radius:14px}
.mock-track{display:flex;flex-direction:column;height:100%;animation:mockScreens 13.5s cubic-bezier(.7,0,.2,1) infinite}
/* Hold the carousel while the pointer is on it, so a screen someone is actually
   reading does not slide away mid-sentence. Resumes on its own when they leave. */
.build-mock:hover .mock-track,
.build-mock:focus-within .mock-track{animation-play-state:paused}
/* ~2.2s on each screen, then a half-second move. The last step lands on the
   duplicate of screen one, so the restart is invisible. */
@keyframes mockScreens{
  0%,16%   {transform:translateY(0)}
  20%,36%  {transform:translateY(-100%)}
  40%,56%  {transform:translateY(-200%)}
  60%,76%  {transform:translateY(-300%)}
  80%,96%  {transform:translateY(-400%)}
  100%     {transform:translateY(-500%)}
}
.scr{
  position:relative;flex:0 0 100%;height:100%;padding:12px;
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  font-size:10px;
}
/* Top-aligned, not centred: five screens with different amounts of content were
   each centring to a different starting height, so the nav row jumped up and
   down as the carousel stepped. Now every screen begins at the same y and the
   bottom strip is pinned to the floor, exactly like a real page. */
.scr-body{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.scr-strip{margin-top:auto}
/* Browser chrome for each screen: dots, that project's own domain, and the
   project type on the right. In flow, so it can never cover the interface. */
.scr-chrome{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.12);
}
.scr-chrome i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto}
.scr-chrome i:first-child{background:var(--scr)}
.scr-url{
  flex:1;min-width:0;margin-left:4px;
  font-family:'Space Mono',monospace;font-size:8.5px;color:var(--ink-55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scr-tag{
  flex:0 0 auto;font-size:8px;color:var(--scr);
  background:color-mix(in srgb,var(--scr) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--scr) 40%,transparent);
  border-radius:999px;padding:4px 9px;white-space:nowrap;
}
/* Per-screen accent, drawn from the same cool family as the industry tiles. */
.scr-ecom{--scr:#60a5fa}
.scr-school{--scr:#818cf8}
.scr-clinic{--scr:#5eead4}
.scr-estate{--scr:#94a3b8}
.scr-app{--scr:#38bdf8}

/* Navigation strip */
.scr-nav{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.scr-logo{font-size:10.5px;font-weight:800;color:var(--ink);letter-spacing:-.015em;white-space:nowrap}
.scr-menu{display:flex;gap:9px;flex:1;min-width:0;overflow:hidden}
.scr-menu i{font-size:8.5px;font-style:normal;color:var(--ink-55);white-space:nowrap}
.scr-menu i.on{color:var(--scr);font-weight:700}
.scr-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.scr-ico{font-style:normal;font-size:9px;color:var(--ink-55)}
.scr-cart{
  display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;color:var(--ink-70);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 7px;
}
.scr-cart em{font-style:normal;background:var(--scr);color:#0b1220;border-radius:999px;padding:0 4px;font-size:7.5px}

/* Buttons inside a screen */
.scr-btn{
  font-style:normal;font-size:8px;font-weight:700;white-space:nowrap;
  background:var(--scr);color:#0b1220;border-radius:999px;padding:4px 9px;
}
.scr-btn.ghost{background:transparent;color:var(--ink-70);border:1px solid rgba(255,255,255,.2)}
.scr-btnrow{display:flex;gap:5px;margin-top:2px}

.scr-chips{display:flex;gap:4px;flex-wrap:wrap}
.scr-chips span{
  font-size:8px;font-weight:700;color:var(--ink-55);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  border-radius:999px;padding:4px 8px;white-space:nowrap;
}
.scr-chips span.on{background:var(--scr);border-color:transparent;color:#0b1220}
.scr-chips span.off{opacity:.35;text-decoration:line-through}
.scr-chips.slots span{font-family:'Space Mono',monospace;font-size:8px}

/* Product / course cards */
.scr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1;min-height:0}
.scr-tiles.two{grid-template-columns:repeat(2,1fr)}
.tile{
  display:flex;flex-direction:column;gap:4px;padding:7px;border-radius:10px;min-height:0;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
}
.tile .ph{flex:1}
.tile b{font-size:9.5px;font-weight:700;color:var(--ink);line-height:1.25}
.tile i{font-size:8px;font-style:normal;color:var(--ink-55);line-height:1.3}
/* Product image. The artwork sits on a tinted plate, exactly the way a real
   catalogue thumbnail would — an empty coloured block reads as a missing image,
   which is the one thing a sample screen must never look like. */
.scr .ph{
  position:relative;display:grid;place-items:center;overflow:hidden;
  min-height:40px;border-radius:7px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(150deg,var(--scr),rgba(11,18,32,.55));
}
.scr-art{display:grid;place-items:center;width:100%;height:100%;padding:6px}
.scr-art svg{width:auto;height:100%;max-width:78%;fill:rgba(255,255,255,.92)}
.scr-flag{
  position:absolute;top:4px;left:4px;font-style:normal;font-size:7px;font-weight:700;
  background:rgba(11,18,32,.82);color:#fff;border-radius:999px;padding:2px 5px;
}
.scr-stars{font-size:8px;color:var(--scr)}
.scr-stars u{text-decoration:none;color:var(--ink-40)}
.scr-buy{display:flex;align-items:center;justify-content:space-between;gap:6px}
.scr-price{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;color:var(--scr);white-space:nowrap}
.scr-price s{color:var(--ink-40);font-size:7.5px}

/* Hero band */
.scr-hero{
  display:grid;gap:5px;justify-items:start;padding:10px;border-radius:11px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--scr) 26%,transparent),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}
.scr-hero b{font-size:12px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.015em}
.scr-hero i{font-size:8.5px;font-style:normal;color:rgba(255,255,255,.72);line-height:1.35}

.scr-stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;align-content:center;min-height:0}
.scr-stats4 span{display:grid;gap:1px;padding:7px;border-radius:9px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.scr-stats4 b{font-family:'Archivo Black',Impact,sans-serif;font-size:13px;letter-spacing:-.03em;color:#fff;line-height:1}
.scr-stats4 i{font-size:7.5px;font-style:normal;color:var(--ink-55)}

/* Rows: doctors, listings */
.scr-rows{display:grid;gap:6px;align-content:start}
.scr-rows .row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.scr .av{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--scr),rgba(255,255,255,.10));
  font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;color:#0b1220;
}
.scr .txt{flex:1;display:grid;gap:2px;min-width:0}
.scr .txt b{font-size:9.5px;font-weight:700;color:var(--ink);line-height:1.25}
.scr .txt i{font-size:8px;font-style:normal;color:var(--ink-55);line-height:1.3}
.scr-col{display:grid;gap:3px;justify-items:end;flex:0 0 auto}
.scr-slot{font-family:'Space Mono',monospace;font-size:7.5px;font-style:normal;color:var(--ink-40);white-space:nowrap}

.scr-dates{display:flex;gap:5px}
.scr-dates span{
  flex:1;display:grid;gap:1px;justify-items:center;padding:5px 2px;border-radius:8px;
  font-size:7px;color:var(--ink-55);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
}
.scr-dates span b{font-size:10px;font-weight:800;color:var(--ink)}
.scr-dates span.on{background:var(--scr);border-color:transparent;color:#0b1220}
.scr-dates span.on b{color:#0b1220}

.scr-search{display:flex;align-items:center;gap:5px;padding:6px 7px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.scr-search i{flex:1;font-size:8.5px;font-style:normal;color:var(--ink-70);white-space:nowrap;overflow:hidden}
.scr-chipmini{font-size:7.5px;font-weight:700;color:var(--ink-55);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 6px;white-space:nowrap}

.scr-wide{display:grid;gap:7px;flex:1;align-content:stretch;min-height:0}
.scr-wide .wide{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.scr-wide .ph{flex:0 0 62px;align-self:stretch;min-height:44px}
.scr-specs{display:flex;gap:5px;margin-top:1px}
.scr-specs u{text-decoration:none;font-size:7.5px;color:var(--ink-55);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:2px 6px;white-space:nowrap}


/* Toolbar above a product grid: filters on the left, sort on the right. */
.scr-toolbar{display:flex;align-items:center;gap:8px}
.scr-toolbar .scr-chips{flex:1;min-width:0;overflow:hidden;flex-wrap:nowrap}
.scr-sort{font-size:8px;font-weight:700;color:var(--ink-55);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:4px 8px;white-space:nowrap}

/* Booking footer: label, slot row, then the confirm bar */
.scr-slotwrap{display:grid;gap:6px;margin-top:auto}
.scr-slotlabel{font-size:7.5px;font-weight:700;color:var(--ink-40);text-transform:uppercase;letter-spacing:.03em}
.scr-confirm{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.scr-confirm i{font-size:8px;font-style:normal;color:var(--ink-55)}
.scr-specs u.emi{color:var(--scr);border-color:color-mix(in srgb,var(--scr) 45%,transparent)}

/* The mock screens are responsive in their own right: on a narrow panel they
   drop secondary columns and menu items rather than letting content spill —
   which is exactly what the real builds they represent would do. */
@media(max-width:600px){
  .mock-screens{height:328px}
  .scr{padding:10px;font-size:9.5px}
  .scr-menu{display:none}
  .scr-tiles{grid-template-columns:repeat(2,1fr);gap:6px}
  .scr-tiles .tile:nth-child(3){display:none}
  .scr-toolbar{flex-wrap:wrap}
  .scr-toolbar .scr-chips span:nth-child(n+4){display:none}
  .scr-stats4{grid-template-columns:repeat(2,1fr)}
  .scr-strip i:nth-child(n+3){display:none}
  .scr-search .scr-chipmini:nth-child(n+3){display:none}
  .scr-specs u:nth-child(n+4){display:none}
  .scr-dates span:nth-child(n+5){display:none}
  .scr-chips.slots span:nth-child(n+5){display:none}
  .scr-wide .ph{flex-basis:52px}
  .scr-app .side{flex-basis:54px}
  .scr-app .stats{grid-template-columns:repeat(2,1fr)}
  .scr-app .stats b:nth-child(3){display:none}
  .scr-table i{grid-template-columns:1fr 1.5fr .9fr}
  .scr-table u:nth-child(3){display:none}
  .scr-table i:nth-child(3){display:none}
}

/* Very small phones (320px). The panel is only ~190px wide there, so the
   screens drop to their essentials: one product, no secondary buttons, text
   over thumbnails. */
@media(max-width:340px){
  .scr-tiles{grid-template-columns:1fr}
  .scr-tiles .tile:nth-child(n+2){display:none}
  .scr-toolbar .scr-chips span:nth-child(n+3){display:none}
  .scr-sort{display:none}
  .scr-hero i{display:none}
  .scr-btnrow .scr-btn.ghost{display:none}
  .scr-wide .ph{display:none}
  .scr-specs u:nth-child(n+3){display:none}
  .scr-buy{flex-wrap:wrap;gap:3px}
  .scr-confirm{flex-wrap:wrap;gap:5px}
  .scr-confirm i{display:none}
  .scr-search .scr-chipmini{display:none}
  .scr-rows .row .scr-col .scr-slot{display:none}
  .scr-actions .scr-btn.ghost{display:none}
  .scr-url{display:none}
  .scr-chrome i:nth-child(n+3){display:none}
  .scr-app .side{flex-basis:48px}
  .scr-app .side i:nth-child(n+5){display:none}
  .scr-app .side i{overflow:hidden;text-overflow:ellipsis}
}

/* Bottom info strip */
.scr-strip{display:flex;gap:12px;padding-top:7px;border-top:1px solid rgba(255,255,255,.10);flex-wrap:wrap;margin-top:auto}
.scr-strip i{font-size:7.5px;font-style:normal;color:var(--ink-40);white-space:nowrap}

/* Dashboard */
.scr-app{display:flex;gap:8px;height:100%}
.scr-app .side{flex:0 0 62px;display:grid;gap:5px;align-content:start;padding:8px 7px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.scr-app .side .scr-logo{font-size:9px;margin-bottom:2px}
.scr-app .side i{font-size:7.5px;font-style:normal;color:var(--ink-55);white-space:nowrap}
.scr-app .side i.on{color:var(--scr);font-weight:700}
.scr-app .main{flex:1;display:grid;gap:7px;grid-template-rows:auto auto 1fr auto;min-width:0}
.scr-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scr-topbar b{font-size:10px;font-weight:800;color:var(--ink)}
.scr-topbar i{font-size:7.5px;font-style:normal;color:var(--ink-40);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:3px 7px}
.scr-app .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.scr-app .stats b{
  display:grid;gap:1px;padding:7px;border-radius:9px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
}
.scr-app .stats em{font-family:'Archivo Black',Impact,sans-serif;font-style:normal;font-size:13px;letter-spacing:-.03em;color:#fff;line-height:1}
.scr-app .stats u{text-decoration:none;font-size:7px;color:var(--ink-55)}
.scr-app .stats s{text-decoration:none;font-size:7px;font-weight:700}
.scr-app .stats s.up{color:#4ade80}
.scr-app .stats s.down{color:#f87171}
.scr-app .chart{display:flex;align-items:flex-end;gap:5px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);min-height:44px}
.scr-app .chart b{flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--scr),rgba(255,255,255,.06))}
.scr-table{display:grid;gap:4px}
.scr-table i{display:grid;grid-template-columns:1fr 1.6fr 1fr .9fr;gap:6px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.045);font-style:normal}
.scr-table u{text-decoration:none;font-size:7.5px;color:var(--ink-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-table u.ok{color:#4ade80}
.scr-table u.wait{color:#fbbf24}

/* --- Service list -------------------------------------------------------- */
.services{
  background:rgba(255,255,255,.035);
  border-block:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
  padding:88px 0;
}
.service-list{border-top:1px solid rgba(255,255,255,.11)}
.service-item{display:grid;grid-template-columns:90px 1fr 90px;gap:16px;align-items:center;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.11);transition:background .2s}
.service-item:hover{background:rgba(59,130,246,.07)}
.service-item .idx{color:var(--accent);font-size:13px}
.service-title{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(30px,5.2vw,76px);line-height:.96;transition:transform .2s,color .2s}
.service-item:hover .service-title{transform:translateX(14px);color:var(--accent-soft)}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.tag{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 10px;color:var(--ink-70);font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase}
.arrow{opacity:0;color:var(--accent);font-size:56px;line-height:1;transition:opacity .2s,transform .2s;justify-self:end}
.service-item:hover .arrow{opacity:1;transform:rotate(45deg)}

/* --- Card grid ----------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  position:relative;overflow:hidden;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:24px;
  padding:22px 22px 16px;display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:var(--shadow-card);
  transition:transform .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22)}
.card-head{display:flex;align-items:flex-start;gap:12px}
.num-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:999px;margin-top:2px;
  background:var(--accent-strong);color:#fff;border:0;
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  box-shadow:0 10px 22px -8px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.card h3{margin:0;font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(20px,2.4vw,28px);line-height:1.02;min-width:0;color:var(--ink)}
.card-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.card-list li{padding:11px 2px;font-weight:600;font-size:14.5px;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.09);color:var(--ink-70)}
.card-body{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-70);font-weight:500}

/* --- Section head -------------------------------------------------------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:clamp(24px,3vw,38px);border-bottom:1px solid rgba(255,255,255,.12)}
.sec-head h2{margin:0;font-size:clamp(42px,7vw,104px)}
.sec-kicker{margin:0;font-size:11px;color:var(--accent-soft);padding-bottom:8px}
.sec{padding:clamp(48px,6vw,80px) 0}

/* --- Industries ---------------------------------------------------------- */
.industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.industry{
  display:flex;align-items:center;gap:14px;padding:18px;
  background:var(--glass);border:1px solid var(--glass-line-soft);border-radius:20px;
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
  box-shadow:0 18px 44px rgba(3,7,18,.4), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .2s ease,border-color .2s ease;
}
.industry:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.industry b{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:16px;line-height:1.1;color:var(--ink)}
.industry span{display:block;margin-top:5px;font-size:13px;color:var(--ink-55);font-weight:500}
/* Categories stay distinguishable, but every tile is drawn from one cool
   blue-to-slate family so six tiles read as a set instead of a paintbox. */
.industry i{
  position:relative;overflow:hidden;
  flex:0 0 52px;width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -10px rgba(3,7,18,.8);
  transition:transform .25s ease;
}
.industry i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);
}
.industry i svg{
  position:relative;z-index:1;width:26px;height:26px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.industry:hover i{transform:scale(1.05)}

.ico-ecommerce{background:linear-gradient(150deg,#60a5fa,#1e40af)}
.ico-school{background:linear-gradient(150deg,#818cf8,#312e81)}
.ico-clinic{background:linear-gradient(150deg,#5eead4,#0f766e)}
.ico-realestate{background:linear-gradient(150deg,#94a3b8,#334155)}
.ico-manufacturer{background:linear-gradient(150deg,#38bdf8,#075985)}
.ico-custom{background:linear-gradient(150deg,#a5b4fc,#1e3a8a)}

/* --- Statement ----------------------------------------------------------- */
.statement-panel{padding:clamp(26px,4vw,46px)}
.statement-panel h2{margin:0 0 18px;font-size:clamp(36px,5.6vw,80px)}

/* --- FAQ ----------------------------------------------------------------- */
.faq-list{display:grid;gap:12px}
.faq-item{
  background:var(--glass);border:1px solid var(--glass-line-soft);border-radius:20px;padding:0 clamp(16px,2vw,24px);
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.faq-item[open]{box-shadow:0 20px 44px rgba(3,7,18,.45);border-color:rgba(255,255,255,.18)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(16px,2vw,20px) 0;cursor:pointer;list-style:none;
  font-weight:700;font-size:clamp(15px,1.6vw,17.5px);line-height:1.35;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary i{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:999px;background:var(--accent-strong);box-shadow:0 8px 18px -6px rgba(37,99,235,.8)}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;inset:50% 8px auto 8px;height:2px;background:#fff;transform:translateY(-50%);transition:transform .2s ease,opacity .2s ease}
.faq-item summary i::after{transform:translateY(-50%) rotate(90deg)}
.faq-item[open] summary i::after{transform:translateY(-50%) rotate(0);opacity:0}
.faq-item p{margin:0;padding:16px 0 clamp(18px,2vw,22px);max-width:78ch;font-size:15px;line-height:1.62;font-weight:500;color:var(--ink-70);border-top:1px solid rgba(255,255,255,.12)}

/* --- Page hero (inner pages) --------------------------------------------- */
.page-hero{padding:clamp(150px,14vw,200px) 0 60px;border-bottom:1px solid rgba(255,255,255,.12)}
.page-hero h1{font-size:clamp(46px,10vw,150px);margin:0;line-height:.92}
.page-hero p{font-size:clamp(17px,2.4vw,32px);font-weight:800;text-transform:uppercase;max-width:920px;line-height:1.05;margin:16px 0 0;color:var(--ink-70)}

/* --- Steps (process) ----------------------------------------------------- */
.step-line{display:grid;gap:14px}
.step{
  display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:start;
  background:var(--glass);border:1px solid var(--glass-line-soft);border-radius:var(--radius-md);
  padding:24px;
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
  box-shadow:0 18px 44px rgba(3,7,18,.4), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .22s ease,border-color .22s ease;
}
.step:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.step-num{font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(34px,4vw,54px);letter-spacing:-.05em;line-height:.9;color:var(--accent)}
.step h3{margin:0 0 8px;font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(22px,3vw,34px);line-height:1;color:var(--ink)}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-70);font-weight:500;max-width:76ch}
.step-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* --- Contact form -------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;padding:clamp(40px,5vw,64px) 0 clamp(56px,8vw,92px)}
.form-card{padding:clamp(22px,3vw,34px)}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:-.02em;color:var(--ink-70)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
  font:600 15px Inter,system-ui,sans-serif;color:var(--ink);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
.field textarea{min-height:132px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
/* The native dropdown list is painted by the OS, so its options need an
   explicit dark background — they do not inherit the field's glass. */
.field select option{background:#111c31;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.field .hint{font-size:12.5px;color:var(--ink-55);font-weight:500}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12.5px;line-height:1.5;color:var(--ink-55);margin:4px 0 18px}
.form-alert{border-radius:16px;padding:16px 18px;margin-bottom:20px;font-size:14.5px;line-height:1.55;font-weight:600}
.form-alert.ok{background:rgba(59,130,246,.13);border:1px solid rgba(59,130,246,.42)}
.form-alert.ok a{color:var(--accent-soft);text-decoration:underline}
.form-alert.bad{background:rgba(244,63,94,.13);border:1px solid rgba(244,63,94,.42);color:#ffd7dd}
.form-alert ul{margin:8px 0 0;padding-left:18px}
/* Consent block. Checkboxes are never pre-ticked — an unticked marketing box has
   to mean a real "no", or the record proves nothing. */
.consent{
  margin:20px 0 18px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line-soft);
}
.consent-copy{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--ink-55)}
.check{display:flex;align-items:flex-start;gap:11px;margin-top:11px;cursor:pointer;font-size:13.5px;line-height:1.5;color:var(--ink-70);font-weight:500}
.check input{
  flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;cursor:pointer;
  accent-color:var(--accent-strong);
}
.check a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px}
.check a:hover{color:#fff}
.consent-note{margin:16px 0 0;font-size:12px;line-height:1.65;color:var(--ink-40)}
.consent-note a{color:var(--ink-55);text-decoration:underline;text-underline-offset:3px}

.contact-side{display:grid;gap:16px}
.contact-mail{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;font-weight:700;font-size:clamp(15px,2vw,21px);
  letter-spacing:-.03em;word-break:break-word;color:var(--accent-soft);
  transition:color .2s;
}
.contact-mail:hover{color:#fff}

/* --- Policy pages -------------------------------------------------------- */

/* Effective / updated line under a policy title. (This rule was lost in an
   earlier cleanup, which left the dates rendering at body size in caps.) */
.legal-dates{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:26px;font-size:11px;color:var(--ink-55);
}
.legal-dates span:not(:last-child)::after{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);opacity:.75;margin-left:14px;vertical-align:middle;
}

.legal-layout{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:28px;align-items:start;padding:clamp(32px,4vw,52px) 0 clamp(56px,8vw,92px)}
.legal-side{position:sticky;top:96px;display:grid;gap:14px}
.legal-highlights ul{margin:0;padding-left:18px;display:grid;gap:9px}
.legal-highlights li{font-size:14px;line-height:1.5;color:var(--ink-70);font-weight:500}
.legal-highlights li::marker{color:var(--accent)}
.legal-highlights-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--ink-40)}
.legal-toc ol{margin:0;padding-left:20px;display:grid;gap:7px;font-size:13px}
.legal-toc li{color:var(--ink-55)}
.legal-toc li::marker{font-family:'Space Mono',monospace;font-size:11px}
.legal-toc a{color:var(--ink-70);transition:color .18s}
.legal-toc a:hover{color:var(--accent-soft)}

.legal-body{display:grid;gap:clamp(26px,3vw,38px);min-width:0}
.legal-section{scroll-margin-top:96px}
.legal-section h2{
  display:flex;align-items:baseline;gap:12px;margin:0 0 14px;
  font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(20px,2.4vw,28px);line-height:1.1;color:var(--ink);
}
.legal-num{flex:0 0 auto;font-size:12px;color:var(--accent)}
.legal-body p{margin:0 0 13px;font-size:15px;line-height:1.68;color:var(--ink-70);font-weight:500;max-width:78ch}
.legal-body ul,.legal-body ol{margin:0 0 13px;padding-left:20px;display:grid;gap:8px;max-width:76ch}
.legal-body li{font-size:15px;line-height:1.6;color:var(--ink-70);font-weight:500}
.legal-body li::marker{color:var(--accent)}
.legal-note{
  background:rgba(59,130,246,.08);border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;padding:12px 16px;color:var(--ink)!important;
}
.legal-dl{margin:0 0 13px;display:grid;gap:1px;border-radius:14px;overflow:hidden;border:1px solid var(--glass-line-soft)}
.legal-dl > div{display:grid;grid-template-columns:minmax(130px,200px) 1fr;gap:14px;padding:12px 16px;background:rgba(255,255,255,.04)}
.legal-dl dt{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;font-weight:700;color:var(--ink-55)}
.legal-dl dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:600;word-break:break-word}
.legal-contact{margin-top:6px}

/* --- Enquiry modal ------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(3,7,18,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.modal.is-open{opacity:1;pointer-events:auto}
.modal-card{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,36px);
  background:
    radial-gradient(90% 60% at 90% 0%, rgba(59,130,246,.16), transparent 62%),
    rgba(17,28,49,.92);
  border:1px solid var(--glass-line);
  box-shadow:0 40px 90px rgba(3,7,18,.7), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(18px) scale(.97);transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.modal.is-open .modal-card{transform:none}
.modal-close{
  position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--ink);
  font:700 22px 'Space Mono',monospace;line-height:1;
  transition:background .18s,transform .18s;
}
.modal-close:hover{background:rgba(255,255,255,.13);transform:scale(1.06)}
.modal-kicker{margin:0 0 10px;font-size:11px;color:var(--accent-soft)}
.modal-card h2{margin:0 0 12px;font-size:clamp(26px,3.6vw,40px);line-height:1.02;color:var(--ink)}
.modal-sub{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--ink-70);font-weight:500}
.modal-form .field{margin-bottom:13px}
.modal-form .check{margin-top:14px;font-size:12.5px}
.modal-errors{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;font-weight:600;
  background:rgba(244,63,94,.13);border:1px solid rgba(244,63,94,.42);color:#ffd7dd;
}
.modal-errors ul{margin:0;padding-left:18px;display:grid;gap:5px}
.modal-submit{width:100%;margin-top:16px}
.modal-note{margin:13px 0 0;font-size:12px;line-height:1.6;color:var(--ink-40);text-align:center}
.modal-note a{color:var(--ink-55);text-decoration:underline;text-underline-offset:3px}
.modal-done{text-align:center}
.modal-done .btn{width:100%;margin-top:6px}
/* Freeze the page behind the modal. overflow:hidden on <body> alone is not
   enough — iOS Safari keeps scrolling the document — so the body is also pinned
   at its current offset by the script, and the gap left by the hidden scrollbar
   is padded back in to stop the layout jumping sideways. */
html.modal-open{overflow:hidden}
body.modal-open{
  position:fixed;inset-inline:0;width:100%;overflow:hidden;
  padding-right:var(--scrollbar-width,0px);
}
.modal{overscroll-behavior:contain}
.modal-card{overscroll-behavior:contain}

@media(max-width:520px){
  .modal{padding:12px}
  .modal-card{padding:22px 18px;border-radius:22px}
  .modal-form .field-row{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  .modal,.modal-card{transition:none}
}

/* --- CTA + footer -------------------------------------------------------- */
.cta{padding:clamp(60px,9vw,96px) 0;text-align:center}
.cta h2{font-size:clamp(48px,11vw,180px);margin:0 0 14px;line-height:.9}
.cta p{max-width:560px;margin:0 auto 28px;font-size:15px;line-height:1.6;color:var(--ink-70);font-weight:500}
.footer{border-top:1px solid rgba(255,255,255,.12);margin-top:20px;padding:clamp(38px,5vw,56px) 0 26px}
/* Four aligned columns instead of one wrapping line of links: with eleven
   destinations, an inline list collapsed into ragged rows on every width. */
.footer-grid{
  display:grid;grid-template-columns:1.4fr .8fr 1fr 1.1fr;gap:clamp(24px,3vw,44px);
  align-items:start;padding-bottom:clamp(28px,3.4vw,40px);
}
.footer-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(147,180,251,.3)}
.footer-name{margin:12px 0 8px;font-size:13px;color:var(--ink)}
.footer-blurb{margin:0;font-size:13px;line-height:1.6;color:var(--ink-55);max-width:34ch}
.footer-col h2{
  margin:0 0 14px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-40);text-transform:uppercase;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-col li{font-size:13.5px;line-height:1.45;color:var(--ink-55)}
.footer-col a{color:var(--ink-70);transition:color .18s}
.footer-col a:hover{color:var(--accent-soft)}
.footer-contact li{max-width:30ch}

.footer-base{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.09);
  font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--ink-40);
}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:1100px){
  .card-grid,.card-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .container,.hero-inner{width:min(100% - 28px,1440px)}
  .site-header{top:0;padding:10px 0}
  .nav-pill,.nav-cta{display:none}
  .menu-toggle,.menu-close{display:flex}
  /* Fills the phone screen and centres the block. Every gap is expressed in svh
     as well as px, so the same hero stays comfortable on a short iPhone SE and
     on a tall Android without ever overflowing or stranding the copy mid-screen. */
  .hero{
    min-height:100svh;
    padding-top:clamp(82px,12svh,116px);
    padding-bottom:clamp(24px,5svh,48px);
    align-items:stretch;
  }
  .hero-inner{
    min-height:auto;padding-bottom:0;
    justify-content:center;
    gap:clamp(13px,2.3svh,24px);
  }
  .hero-kicker{margin:0;font-size:10px;padding:8px 13px}
  .hero-title{margin:0;font-size:clamp(30px,9.4vw,54px);line-height:1.04;letter-spacing:-.03em}
  .hero-sub{margin:0;font-size:clamp(14px,3.9vw,16.5px);line-height:1.55}
  /* Stacked full-width, with real space between them — side-by-side buttons on a
     phone give two cramped targets and a ragged right edge. */
  .hero-actions{width:100%;flex-direction:column;gap:11px;margin-top:clamp(2px,1.2svh,10px)}
  .hero-actions .btn{width:100%;min-height:58px}
  /* A 2deg skew reads as a deliberate angle on a wide screen and as a crooked
     band on a 375px one, so the phone gets a flat strip. */
  .marquee-section{margin:40px 0;padding:26px 0;transform:none}
  .marquee-inner{transform:none}
  .marquee span{font-size:clamp(34px,11.5vw,72px)}
  .marquee.row2 span{-webkit-text-stroke-width:1.1px}
  .split{grid-template-columns:1fr;gap:24px;padding:48px 0}
  /* Display headings were staying near their desktop minimum on phones, so a
     line like "NO TEMPLATES." broke after the first word and left a ragged,
     misaligned block. These sizes keep each line whole. */
  .split h2,.section-title,.sec-head h2,.statement-panel h2{font-size:clamp(30px,9.2vw,56px);line-height:1.04}
  .cta h2{font-size:clamp(38px,11.5vw,68px);line-height:1}
  .page-hero h1{font-size:clamp(40px,12.5vw,72px)}
  .lede{font-size:clamp(17px,4.9vw,23px);line-height:1.14}
  .metrics{grid-template-columns:1fr}
  .services{padding:56px 0}
  .service-item{grid-template-columns:44px 1fr 30px;padding:24px 0;gap:12px}
  .arrow{opacity:1;font-size:32px}
  .card-grid,.card-grid.cols-4,.card-grid.cols-2,.industry-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-kicker{padding-bottom:0}
  .page-hero{padding-top:108px}
  .step{grid-template-columns:1fr;gap:10px;padding:20px}
  .contact-layout{grid-template-columns:1fr;padding-top:32px}
  .field-row{grid-template-columns:1fr}
  /* Brand block spans the width, then the three link columns sit two-up. */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .footer-brand{grid-column:1 / -1}
  .footer-base{flex-direction:column;gap:8px}
  /* A 17px line of text is not a tap target. Padding turns each footer and
     contents link into a ~38px row without changing how it looks. */
  .footer-col ul{gap:0}
  .footer-col li{padding:0}
  .footer-col a{display:block;padding:9px 0}
  .footer-contact li{padding:9px 0}
  .legal-toc ol{gap:0}
  .legal-toc a{display:block;padding:10px 0}
  /* The contents list stops being a sidebar and becomes an intro block. */
  .legal-layout{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .legal-side{position:static}
  .legal-dl > div{grid-template-columns:1fr;gap:5px;padding:12px 14px}
}
@media(max-width:520px){
  .container,.hero-inner{width:min(100% - 24px,1440px)}
  .hero-title{font-size:clamp(27px,8.9vw,42px);line-height:1.06;letter-spacing:-.022em}
  .hero-sub{font-size:14.5px}
  .hero-actions .btn{width:100%;min-height:56px}
  .brand-name small{display:none}
  .card{padding:18px 18px 14px;border-radius:20px}
  .card h3{font-size:clamp(19px,6vw,24px)}
  .num-badge{width:38px;height:38px}
  .faq-item summary i{width:28px;height:28px}
  .btn{width:100%}
  .contact-side .btn,.form-card .btn{width:100%}
  /* Heavy blur on many stacked panels is expensive on low-end phones; the
     surfaces still read as glass with a lighter radius. */
  .card,.industry,.step,.faq-item,.panel{backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}
}

/* Long display words must never spill past a card edge — Archivo Black is very
   wide and has no natural break opportunities. */
.display,.hero-title span,.card h3,.step h3,.service-title,.page-hero h1,.cta h2{max-width:100%;overflow-wrap:break-word}

@media(prefers-reduced-motion:reduce){
  .waves-canvas{display:none}
  .marquee span{animation:none}
  /* Hold on the first screen rather than cycling. */
  .mock-track{animation:none}
  .btn:hover,.card:hover,.industry:hover,.step:hover,.industry:hover i,.service-item:hover .service-title{transform:none}
  .faq-item,.faq-item summary i::before,.faq-item summary i::after{transition:none}
}

/* ===== Phone performance ==================================================
   Two things make a page stutter on a phone, and this design had both:
   a fixed background (the browser repaints it every scroll frame) and twenty
   backdrop-filters — each one a separate
   blurred snapshot of whatever is behind it, recomputed as you scroll.
   Below 900px the surfaces keep their look through slightly higher background
   alpha instead, and the effects that cost the most are simply turned off. */
@media(max-width:900px){
  /* What actually costs frames is anything FIXED: a fixed background image, a
     fixed blended overlay, a fixed blurred element — each is recomputed against
     new content on every scroll frame. Effects that scroll with the page are
     composited once, so the colour work below stays exactly as it is on desktop. */
  body{background-attachment:scroll}
  .waves-canvas{mix-blend-mode:screen;opacity:.46}

  .btn,.btn.glass,.mobile-menu,
  .panel,.metric,.card,.industry,.step,.faq-item,.marquee-section,.services,
  .field input,.field select,.field textarea,.modal,.modal-card,.scr-tag,
  .hero-kicker,.tag,.build-stages span{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* The header is the one place real blur is worth its cost: three small
     capsules, and it is the first thing anyone sees. A tighter radius and no
     saturate keeps it affordable even though they are fixed. */
  .brand,.nav-pill,.menu-toggle,.menu-close{
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  /* Glass without the blur. What actually reads as "frosted" is the lit top
     edge, the gradient falling away from it and the shadow underneath — the
     blur is only part of it. All of this is plain paint, so it costs nothing
     while scrolling. */
  .brand,.nav-pill,.menu-toggle,.menu-close{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.2);
    box-shadow:0 14px 30px rgba(3,7,18,.5), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .panel,.card{
    background:linear-gradient(158deg,rgba(255,255,255,.15),rgba(255,255,255,.05) 58%);
    border-color:rgba(255,255,255,.19);
    box-shadow:0 18px 40px rgba(3,7,18,.5), inset 0 1px 0 rgba(255,255,255,.3);
  }
  .metric,.industry,.step,.faq-item{
    background:linear-gradient(158deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 58%);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 14px 30px rgba(3,7,18,.42), inset 0 1px 0 rgba(255,255,255,.24);
  }
  .hero-kicker,.btn.glass{
    background:linear-gradient(158deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    border-color:rgba(255,255,255,.27);
    box-shadow:0 12px 26px rgba(3,7,18,.45), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .btn{background:linear-gradient(158deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
  .btn.ink{background:var(--accent-strong)}
  .field input,.field select,.field textarea{
    background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  }
  .marquee-section{background:rgba(255,255,255,.05)}
  .services{background:rgba(255,255,255,.04)}
  .modal{background:rgba(3,7,18,.94)}
  .modal-card{
    background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 55%),rgba(17,28,49,.96);
    box-shadow:0 40px 90px rgba(3,7,18,.7), inset 0 1px 0 rgba(255,255,255,.28);
  }


}