/* ==================================================================
   QONDUIT LIMITED
   ==================================================================
   The company that builds Haivian.

   Deliberately NOT the Haivian visual language. Haivian is a forge:
   near black, molten orange, heat. Qonduit is the parent company and
   takes the cool spectrum already in its own logo mark, cyan through
   blue to violet. A parent that looked identical to its product line
   would erase the distinction the two sites exist to make.

   Same production standards as Haivian though: self-hosted fonts, no
   third-party requests, nothing loaded from anywhere but this origin.
   ================================================================== */

/* ---------- 0. SELF HOSTED FONTS -------------------------------- *
   No Google Fonts request is made anywhere. Latin subsets, served
   from this origin. All SIL Open Font License 1.1. Inter is variable,
   so one 48KB file covers 400 to 700.                                */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/space-mono-700.woff2") format("woff2");
}

/* ---------- 1. TOKENS ------------------------------------------- */

:root {
  --ink:      #05070c;
  --ink-2:    #080b12;
  --panel:    #0d1119;
  --panel-2:  #111725;
  --line:     #1b2230;
  --line-2:   #26303f;
  --line-3:   #364355;

  --text:     #f2f5f9;
  --text-2:   #b4becd;
  --text-3:   #8f9aac;
  --text-4:   #667287;

  /* Straight from the company mark: cyan, through blue, to violet. */
  --cyan:     #4ee0c8;
  --cyan-hi:  #8df3e2;
  --blue:     #5a9be0;
  --violet:   #a78bfa;
  --violet-hi:#c9b2ff;

  --accent:      var(--cyan);
  --accent-hi:   var(--cyan-hi);
  --accent-deep: #1f8f7e;

  --radius: 6px;
  --radius-lg: 14px;

  --display: "Instrument Serif", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 64px);
  --page: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. RESET AND GROUND --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
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 {
  margin: 0; min-width: 320px;
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  color: var(--text); background: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* The atmosphere: the mark's own spectrum, bled across the ground. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90vw 70vh at 50% -18%, rgba(78,224,200,.13) 0%, transparent 60%),
    radial-gradient(70vw 60vh at 88% 12%, rgba(167,139,250,.10) 0%, transparent 58%),
    radial-gradient(70vw 60vh at 6% 30%, rgba(90,155,224,.08) 0%, transparent 55%),
    linear-gradient(180deg, #070a11 0%, var(--ink) 45%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--cyan); color: #04120f; }
:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 3px; border-radius: 3px; }

.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; }
.skip { position:fixed; z-index:200; left:12px; top:-70px; padding:14px 18px; background:var(--cyan); color:#04120f; font-weight:700; transition:top .18s var(--ease); }
.skip:focus { top:12px; }

/* ---------- 3. LAYOUT ------------------------------------------- */

.wrap { width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.narrow { max-width: 840px; }
section { position: relative; }
.band { padding-block: clamp(68px, 9vw, 128px); }
.band-tight { padding-block: clamp(44px, 6vw, 80px); }
.rule { height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }
.seam { height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--cyan) 26%, var(--violet) 50%, var(--cyan) 74%, transparent);
  opacity:.5; box-shadow:0 0 22px rgba(78,224,200,.3); }

.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }

/* ---------- 4. TYPE --------------------------------------------- */

.display    { font-family:var(--display); line-height:1.02; letter-spacing:-.025em; font-size:clamp(44px, 7.4vw, 96px); }
.display-sm { font-family:var(--display); line-height:1.07; letter-spacing:-.02em;  font-size:clamp(31px, 4.4vw, 56px); }
.h3 { font-size:clamp(19px,1.9vw,24px); line-height:1.28; font-weight:600; letter-spacing:-.01em; }

.lede { font-size:clamp(17px,1.75vw,21px); line-height:1.56; color:var(--text-2); max-width:var(--measure); }
.body { max-width:var(--measure); color:var(--text-2); }
.small { font-size:14.5px; line-height:1.6; color:var(--text-3); }
.mono { font-family:var(--mono); }
.tint { color: var(--cyan-hi); }

.eyebrow {
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:11px; margin-bottom:20px;
}
.eyebrow::before { content:""; width:22px; height:1px; background:var(--cyan); flex:none; box-shadow:0 0 9px var(--cyan); }
.eyebrow b { color:var(--cyan-hi); font-weight:700; }

/* ---------- 5. HEADER ------------------------------------------- */

.hdr {
  position:sticky; top:0; z-index:100;
  background:rgba(5,7,12,.72);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.hdr.scrolled { background:rgba(5,7,12,.95); border-bottom-color:var(--line); }
.hdr-in { display:flex; align-items:center; gap:24px; min-height:74px; }

.brand { display:flex; align-items:center; gap:12px; flex:none; }
.brand-mark { width:38px; height:38px; flex:none; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font-size:18px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.brand-name b { font-weight:700; background:linear-gradient(90deg,var(--blue),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-sub { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); white-space:nowrap; }

.nav { display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a { font-size:14.5px; color:var(--text-2); padding:9px 13px; border-radius:var(--radius); transition:color .16s, background .16s; white-space:nowrap; }
.nav a:hover { color:var(--text); background:var(--panel-2); }
.nav-toggle { display:none; }

@media (max-width: 860px) {
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:46px; height:46px; background:none; border:1px solid var(--line-2);
    border-radius:var(--radius); color:var(--text); cursor:pointer;
  }
  .nav {
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; margin:0; padding:12px var(--gutter) 24px;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    max-height:calc(100vh - 74px); overflow-y:auto;
  }
  .hdr.open .nav { opacity:1; visibility:visible; transform:none; }
  .nav a { padding:15px 4px; border-bottom:1px solid var(--line); min-height:44px; display:flex; align-items:center; }
  .nav .btn { margin-top:16px; }
}

/* ---------- 6. BUTTONS ------------------------------------------ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  border:1px solid transparent; border-radius:var(--radius);
  font-weight:700; font-size:15.5px; cursor:pointer; white-space:nowrap;
  transition:filter .2s var(--ease), transform .2s var(--ease), border-color .2s, background .2s;
}
.btn-primary {
  color:#04120f; border-color:rgba(141,243,226,.55);
  background:linear-gradient(100deg, var(--blue), var(--cyan));
  box-shadow:0 0 34px rgba(78,224,200,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* Header CTA: same gradient, taken down into its deep register so white sits
   on it cleanly. Specificity here has to clear `.nav a` and `.nav a:hover`. */
.nav .btn-primary {
  color:#ffffff; border-color:rgba(78,224,200,.42);
  background:linear-gradient(100deg, #1b4a7a, #0f5f52);
  box-shadow:0 0 20px rgba(78,224,200,.14), inset 0 1px 0 rgba(255,255,255,.10);
}
.nav .btn-primary:hover {
  color:#ffffff; filter:none; border-color:rgba(141,243,226,.62);
  background:linear-gradient(100deg, #225a92, #147365);
}
.btn-ghost { border-color:var(--line-3); color:var(--text); }
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan-hi); background:rgba(78,224,200,.07); }
.btn-sm { min-height:42px; padding:0 17px; font-size:14px; }
@media (pointer: coarse) { .btn-sm { min-height:44px; } }

/* ---------- 7. HERO AND THE RING -------------------------------- *
   The mark is the company's one real brand asset, so the hero is an
   SVG rebuild of it: a ring of nodes that turns slowly. Vector, so it
   stays sharp at any size, themeable, and about 2KB instead of 500.  */

.hero { padding-block: clamp(60px,9vh,110px) clamp(50px,7vh,92px); }
.hero-in { display:grid; gap:clamp(30px,5vw,64px); grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); align-items:center; }
@media (max-width: 900px) { .hero-in { grid-template-columns:1fr; } .ring-wrap { order:-1; max-width:340px; margin-inline:auto; } }

.hero h1 { max-width: 14ch; }
.hero .lede { margin-top: 24px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.ring-wrap { position:relative; }
.ring { width:100%; height:auto; display:block; overflow:visible; }
.ring-spin { transform-origin:center; animation:ring-turn 46s linear infinite; }
.ring-spin-r { transform-origin:center; animation:ring-turn 62s linear infinite reverse; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring-spin, .ring-spin-r { animation:none; } }

/* ---------- 8. CARDS -------------------------------------------- */

.card {
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.card:hover { border-color:var(--line-3); }

/* Product rows. Each carries the accent of that product on the
   Haivian site, so a reader arriving there recognises them. */
.prod {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:20px 22px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--line); border-left:2px solid var(--pa, var(--cyan));
  transition:border-color .22s var(--ease), transform .22s var(--ease), background .22s;
}
.prod:hover { transform:translateX(3px); background:linear-gradient(180deg, var(--panel-2), var(--ink-2)); }
.prod-mark {
  width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center;
  color:var(--pa, var(--cyan));
  background:color-mix(in srgb, var(--pa, var(--cyan)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--pa, var(--cyan)) 34%, transparent);
}
.prod-name { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.prod-role { font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--pa, var(--cyan)); margin-top:3px; }
.prod-desc { font-size:14.5px; color:var(--text-3); margin-top:7px; line-height:1.5; }
.prod-tag { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); white-space:nowrap; }
@media (max-width: 680px) {
  .prod { grid-template-columns:auto minmax(0,1fr); }
  .prod-tag { grid-column:1 / -1; }
}

/* ---------- 9. FACTS -------------------------------------------- */

.facts { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:30px; }
.fact { display:grid; grid-template-columns:minmax(140px,220px) minmax(0,1fr); gap:20px; padding:16px 22px; background:var(--ink-2); }
.fact dt { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); margin:0; }
.fact dd { margin:0; font-size:15.5px; color:var(--text); }
@media (max-width: 620px) { .fact { grid-template-columns:1fr; gap:5px; } }

/* ---------- 10. FORM -------------------------------------------- */

.form-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.input {
  flex:1; min-width:240px; min-height:52px; padding:0 16px;
  background:#080c14; border:1px solid var(--line-2); border-radius:var(--radius); color:var(--text);
  transition:border-color .18s, box-shadow .18s;
}
.input::placeholder { color:var(--text-4); }
.input:focus { border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(78,224,200,.14); }
/* Honeypot. Kept off-screen rather than display:none, because some bots
   skip hidden fields but will happily fill a positioned one. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.toast { display:none; margin-top:14px; padding:12px 15px; border-radius:var(--radius); font-size:14.5px; border-left:2px solid; }
.toast.ok  { display:block; background:rgba(78,224,200,.08); border-color:var(--cyan); color:var(--cyan-hi); }
.toast.err { display:block; background:rgba(255,120,100,.08); border-color:#ff7864; color:#ffa294; }

/* ---------- 11. FOOTER ------------------------------------------ */

.ftr { border-top:1px solid var(--line); padding-block:44px 26px; background:linear-gradient(180deg, transparent, #04060a); }
.ftr-grid { display:grid; gap:28px 40px;
  grid-template-columns:minmax(0,1.7fr) repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .ftr-grid { grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  /* Brand takes the row, the three link columns share the next one, so
     the footer stays short instead of becoming a long stack. */
  .ftr-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 20px; }
  .ftr-grid > :first-child { grid-column:1 / -1; }
}
@media (max-width: 430px) { .ftr-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ftr h4 { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--text-4); margin:0 0 14px; }
.ftr li { margin-bottom:7px; }
.ftr a { color:var(--text-2); font-size:14.5px; }
.ftr a:hover { color:var(--cyan-hi); }
.ftr-legal { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-4); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 22px; }
@media (pointer: coarse) { .ftr li { margin-bottom:0; } .ftr a { display:inline-block; padding-block:10px; } }

/* ---------- 12. REVEAL ------------------------------------------ */

[data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1; transform:none; } }
.no-js [data-reveal] { opacity:1; transform:none; }