/* styles.css */
:root{
  /* Ink ramp */
  --bg:#070a12;
  --raised:rgba(26,30,40,0.94);
  --line:rgba(255,255,255,0.12);
  --line-strong:rgba(255,255,255,0.22);

  /* Text on glass. Body copy sits at 86% white: see the contrast note on .glass */
  --text:#ffffff;
  --text-2:rgba(255,255,255,0.86);
  --text-3:rgba(255,255,255,0.72);

  --focus:#adcdff;
  --positive:#6fdca6;
  --negative:#ff9a9c;

  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --spring:cubic-bezier(0.34,1.4,0.64,1);
  --container:1120px;

  /* Radii: large slabs, cards, and pills */
  --r-xl:36px;
  --r-lg:28px;
  --r-field:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
p{margin:0;}
a{color:inherit;}

/* Background image. The scrim keeps the brightest prism highlights below the level where
   86% white text still passes WCAG AA through the glass (see .glass). */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(7,10,18,0.42) 0%,
      rgba(7,10,18,0.55) 55%,
      rgba(7,10,18,0.72) 100%),
    url("background.jpg") center/cover no-repeat;
  transform:translateZ(0);
  z-index:-1;
}

.container{
  width:min(var(--container),calc(100% - 48px));
  margin:0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--raised);
  color:var(--text);
  z-index:1000;
}
.skip-link:focus{left:12px;}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.main:focus{outline:none;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------------------------------------------------------------------------
   Liquid glass
   A clear, barely tinted slab. Three layers:
   1. Material: ~8% white fill over a lightly blurred, saturated backdrop.
      brightness(0.7) dims what is behind the glass, so the brightest part of the
      background (the white prism, top right) stays dark enough for body text:
      bg ≈ 235 → scrim 0.58 → ×0.7 → +8% white ≈ rgb 107, against 86% white text ≈ 4.8:1 (AA).
   2. Refraction (Chromium only): liquid-glass.js builds a per-element SVG filter and sets
      --lg-filter; .lg-refract switches the backdrop chain over to it.
   3. Specular rim: inset highlights (bright top-left, dimmer bottom-right) and a 1px
      gradient border in ::before; a pointer-following highlight in ::after.
   --------------------------------------------------------------------------- */
.glass{
  --lg-fill:rgb(255 255 255 / 0.08);
  --lg-blur:6px;
  --lg-dim:0.7;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(160deg,rgb(255 255 255 / 0.10) 0%,rgb(255 255 255 / 0) 40%,rgb(255 255 255 / 0.02) 100%),
    var(--lg-fill);
  border:0;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 0.55),
    inset -1px -1px 0 rgb(255 255 255 / 0.16),
    inset 0 14px 28px -20px rgb(255 255 255 / 0.30),
    inset 0 -18px 30px -24px rgb(0 0 0 / 0.40),
    0 1px 2px rgb(0 0 0 / 0.16),
    0 18px 44px -12px rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(160%) brightness(var(--lg-dim));
  backdrop-filter:blur(var(--lg-blur)) saturate(160%) brightness(var(--lg-dim));
  text-shadow:0 1px 2px rgb(0 0 0 / 0.30);
  transition:transform .35s var(--spring),box-shadow .35s var(--ease);
}
/* Chromium with SVG backdrop filters: refraction + specular map, then a 2px blur */
.lg-refract .glass[data-refract]{
  backdrop-filter:var(--lg-filter,blur(0px)) blur(2px) saturate(1.15) brightness(var(--lg-dim));
}
/* Low-end devices: plain blur, nothing per-pixel */
.lg-lite .glass{
  --lg-blur:8px;
}

/* Rim: a thin gradient border, brightest on the side facing the light */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(var(--lg-angle,135deg),
    rgb(255 255 255 / 0.65) 0%,
    rgb(255 255 255 / 0.14) 24%,
    rgb(255 255 255 / 0.04) 50%,
    rgb(255 255 255 / 0.12) 76%,
    rgb(255 255 255 / 0.34) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;
  z-index:1;
}
/* Moving highlight: follows the pointer, brighter on hover */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,20%) var(--my,0%),
    rgb(255 255 255 / 0.12),rgb(255 255 255 / 0.03) 42%,transparent 70%);
  opacity:0.55;
  transition:opacity .3s var(--ease);
  pointer-events:none;
  z-index:-1;
}
.glass:hover::after{opacity:1;}

/* Hover and press on cards: a gentle lift */
.card:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 0.65),
    inset -1px -1px 0 rgb(255 255 255 / 0.20),
    inset 0 14px 28px -20px rgb(255 255 255 / 0.36),
    inset 0 -18px 30px -24px rgb(0 0 0 / 0.40),
    0 2px 4px rgb(0 0 0 / 0.18),
    0 26px 56px -14px rgb(0 0 0 / 0.50);
}
.card:active{transform:translateY(-1px) scale(0.995);}

/* No backdrop-filter at all: an opaque-enough slab */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgb(20 24 36 / 0.86);}
}
/* Reduced transparency: solid surfaces, no refraction (liquid-glass.js also skips it) */
@media (prefers-reduced-transparency:reduce){
  .glass,
  .lg-refract .glass[data-refract]{
    background:rgb(20 24 36 / 0.96);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    text-shadow:none;
  }
  .glass::after{display:none;}
  input,textarea{background:rgb(255 255 255 / 0.08);}
}

/* ---------------------------------------------------------------------------
   Buttons and chips: all pills
   --------------------------------------------------------------------------- */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 22px;
  border:0;
  border-radius:999px;
  background:#f4f6fb;
  color:#0b0d14;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 6px 18px -6px rgb(0 0 0 / 0.45);
  text-shadow:none;
  font:inherit;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .3s var(--spring),background-color .2s var(--ease),box-shadow .3s var(--ease),opacity .2s var(--ease);
}
/* Moving highlight: a soft sheen that sweeps across on hover */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 0.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.btn:hover{background:#ffffff;transform:translateY(-1px);}
.btn:hover::after{transform:translateX(120%);}
.btn:active{transform:translateY(0) scale(0.97);transition-duration:.12s;}
.btn[disabled]{opacity:0.6;cursor:progress;transform:none;}

/* Secondary action: a quiet text link, same height as the pill beside it */
.btn-link{
  appearance:none;
  display:inline-flex;
  align-items:center;
  height:46px;
  padding:0 8px;
  border:0;
  border-radius:10px;
  background:none;
  color:var(--text-2);
  font:inherit;
  font-size:15px;
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:4px;
  white-space:nowrap;
  cursor:pointer;
  transition:color .15s var(--ease),text-decoration-color .15s var(--ease);
}
.btn-link:hover{color:var(--text);text-decoration-color:var(--text-2);}

.chip{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 14px 0 11px;
  border:0;
  border-radius:999px;
  background:rgb(255 255 255 / 0.08);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 0.22),inset 1px 1px 0 rgb(255 255 255 / 0.26);
  color:var(--text-2);
  text-shadow:none;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  transition:color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease),transform .25s var(--spring);
}
.chip:hover{color:var(--text);background:rgb(255 255 255 / 0.14);}
.chip:active{transform:scale(0.95);}
.chip-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.chip .icon-check{display:none;}
.chip.is-copied{
  color:var(--positive);
  background:rgb(111 220 166 / 0.12);
  box-shadow:inset 0 0 0 1px rgb(111 220 166 / 0.45);
}
.chip.is-copied .icon-copy{display:none;}
.chip.is-copied .icon-check{display:inline;}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header{padding:46px 0 22px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{
  position:relative;
  display:block;
  flex:none;
  width:clamp(198px,24.9vw,275px);
  aspect-ratio:864 / 240;
}
.brand-wordmark{position:absolute;inset:0;width:100%;height:100%;}
.brand-mascot{
  position:absolute;
  left:0.6%;
  top:1.64%;
  width:26.77%;
  height:96.39%;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero{padding:8px 0 0;}
.hero-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
/* Shares its top and bottom edges with the service stack: the cube area takes the space above,
   the text sits at the bottom left */
.hero-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:28px;
  border-radius:var(--r-xl);
}

/* Hero system
   One wide SVG built by hero-cube.js (timeline and layouts are at the top of that file). The viewBox
   is the artwork's own coordinate system (1200×300 wide, 700×260 on phones); CSS only sets the
   rendered width and the height follows the viewBox, so modules are never stretched.
   Glass cubes in isometric: faint fills, 1px edges that stay 1px at any size. Inputs are dimmer;
   locked modules get stronger edges and an icy top face. Blue is kept for the wave, the lock-in
   and the connectors. */
.hero-cube{
  --art-width:90%;    /* share of the panel width the artwork spans */
  position:relative;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  pointer-events:none;
}
.hero-art{display:block;width:var(--art-width);height:auto;overflow:visible;}
.hs-top  {fill:rgb(255 255 255 / 0.09);}
.hs-left {fill:rgb(205 215 240 / 0.035);}
.hs-right{fill:rgb(140 166 228 / 0.07);}
.hs-edges,.hs-lock-edges,.hs-link line{
  fill:none;
  stroke-width:1;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.hs-edges{stroke:rgb(255 255 255 / 0.42);}
.hs-lock-edges{stroke:rgb(226 236 255 / 0.85);}
.hs-lock-top{fill:rgb(173 205 255 / 0.10);}
.hs-lock.is-accent .hs-lock-top{fill:rgb(112 146 236 / 0.34);}
.hs-link-line{stroke:rgb(173 205 255 / 0.55);}
.hs-link .hs-link-pulse{stroke:rgb(230 240 255 / 0.95);stroke-width:1.5;}
.hs-wave{fill:url(#hero-wave);}

.hero-copy{max-width:40rem;}
.hero-title{
  margin:0;
  max-width:22ch;
  font-size:clamp(36px,4vw,50px);
  line-height:1.05;
  font-weight:500;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
.hero-sub{
  margin-top:14px;
  max-width:40rem;
  color:var(--text-2);
  font-size:18px;
  line-height:1.55;
}

/* Capability cards */
.capabilities{display:grid;gap:12px;scroll-margin-top:88px;}
.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px 24px 24px;
  border-radius:var(--r-lg);
}
.card-title{
  margin:0 0 6px;
  font-size:18px;
  font-weight:500;
  line-height:1.3;
}
.card-text{color:var(--text-2);font-size:15px;line-height:1.55;}

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */
.section{padding:30px 0 64px;}
.contact-section{scroll-margin-top:72px;}
.section-title{
  margin:0;
  font-size:clamp(28px,3vw,36px);
  line-height:1.15;
  font-weight:500;
  letter-spacing:-0.02em;
}

/* Each card is as tall as its own content */
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
.contact-info,.contact-form{
  display:flex;
  flex-direction:column;
  padding:28px;
  border-radius:var(--r-xl);
}
.contact-info{gap:24px;}
.contact-text{margin-top:12px;max-width:28rem;color:var(--text-2);font-size:16px;}
.contact-line{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:16px;
  align-items:center;
  min-height:56px;
  border-top:1px solid var(--line);
}
.contact-label{color:var(--text-3);font-size:14px;}
.email-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.contact-email{
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:border-color .15s var(--ease);
}
.contact-email:hover{border-bottom-color:var(--text-2);}

/* Form */
.field-row{display:grid;grid-template-columns:1fr;gap:0 16px;}
.field{margin-bottom:18px;}
label{
  display:block;
  margin-bottom:8px;
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
}
input,textarea{
  width:100%;
  color:var(--text);
  background:rgb(255 255 255 / 0.10);
  border:1px solid rgb(255 255 255 / 0.30);
  box-shadow:inset 0 1px 2px rgb(0 0 0 / 0.25);
  text-shadow:none;
  border-radius:var(--r-field);
  padding:11px 14px;
  outline:none;
  font:inherit;
  font-size:16px; /* 16px stops iOS zooming on focus */
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease);
}
input::placeholder,textarea::placeholder{color:rgb(255 255 255 / 0.58);opacity:1;}
input{height:46px;}
textarea{resize:vertical;min-height:150px;}
input:hover,textarea:hover{border-color:rgb(255 255 255 / 0.42);}
input:focus,textarea:focus{
  background:rgb(255 255 255 / 0.13);
  border-color:var(--focus);
  box-shadow:inset 0 1px 2px rgb(0 0 0 / 0.25),0 0 0 3px rgb(173 205 255 / 0.35);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--negative);}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgb(255 154 156 / 0.30);}
.field-error{margin-top:6px;color:var(--negative);font-size:14px;}

/* Spam trap, hidden from people */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}

.form-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px;margin-top:4px;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px;}
.form-status{flex:1 1 220px;color:var(--text-2);font-size:14px;}
.form-status:empty{display:none;}
.form-status.success,.form-status.error{
  flex-basis:100%;
  order:-1;
  padding:12px 16px;
  border-radius:var(--r-field);
}
.form-status.success{color:var(--positive);background:rgb(111 220 166 / 0.10);box-shadow:inset 0 0 0 1px rgb(111 220 166 / 0.35);}
.form-status.error{color:var(--negative);background:rgb(255 154 156 / 0.10);box-shadow:inset 0 0 0 1px rgb(255 154 156 / 0.35);}
.noscript{margin-top:12px;color:var(--text-2);font-size:14px;}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer{padding:0 0 28px;}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;}
.footer-logo{display:block;width:128px;height:auto;margin-bottom:6px;opacity:0.9;}
.footer-text{color:var(--text-3);font-size:14px;line-height:20px;}
.footer-links{display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:20px;}
.footer-links a{color:var(--text-3);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s var(--ease),text-decoration-color .15s var(--ease);}
.footer-links a:hover{color:var(--text);text-decoration-color:var(--line-strong);}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero-panel,.capabilities{animation:rise .5s var(--ease) both;}
  .capabilities{animation-delay:.06s;}
  @keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  /* Hero system motion is driven by hero-cube.js, which also handles reduced motion */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .card:hover,.card:active,.btn:hover,.btn:active,.chip:active{transform:none;}
  .btn::after{display:none;}
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */
@media (min-width:720px){
  .field-row{grid-template-columns:1fr 1fr;}
}

@media (min-width:980px){
  .hero-layout{grid-template-columns:minmax(0,1.75fr) minmax(0,0.85fr);gap:16px;}
  /* ~30px taller than its content; the service stack stretches to match */
  .hero-panel{min-height:500px;padding:36px 40px 40px;}
  .contact-grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);}
  .contact-info,.contact-form{padding:32px;}
}

@media (max-width:719px){
  .container{width:calc(100% - 32px);}
  .site-header{padding:28px 0 14px;}
  .brand{width:163px;}
  .hero-panel{padding:22px 20px 24px;gap:12px;border-radius:30px;}
  .hero-cube{--art-width:100%;min-height:96px;}
  .hero-title{font-size:30px;}
  .hero-sub{font-size:16px;margin-top:10px;}
  .card{padding:18px 20px 20px;border-radius:24px;}
  .contact-info,.contact-form{padding:22px;border-radius:30px;}
  .form-actions{width:100%;}
  .form-actions .btn{flex:1 1 auto;}
  .form-actions .btn-link{padding:0 4px;}
}
@media (max-width:360px){
  .brand{width:136px;}
}

/* ---------------------------------------------------------------------------
   Legal pages
   --------------------------------------------------------------------------- */
.legal{padding:8px 0 48px;}
.legal-card{
  max-width:760px;
  padding:40px 44px 44px;
  border-radius:var(--r-xl);
}
.legal-meta{margin-top:8px;color:var(--text-3);font-size:14px;}
.legal-card h2{margin:32px 0 8px;font-size:18px;font-weight:500;}
.legal-card p{color:var(--text-2);font-size:16px;line-height:1.6;}
.legal-card p + p{margin-top:10px;}
.legal-card a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);}
.footer-links a[aria-current="page"]{color:var(--text);}
@media (max-width:719px){
  .legal-card{width:calc(100% - 32px);padding:28px 22px 32px;border-radius:30px;}
}