/* ============================================================
   Hultora — shared design system.
   Every page links this. Tokens, chrome and controls live here
   so the pages cannot drift apart again. Page-specific layout
   stays inline in the page that needs it.
   ============================================================ */

:root{
  --bg:oklch(97.2% 0.016 62);
  --surface:oklch(99.5% 0.008 62);
  --sunk:oklch(94.5% 0.024 60);
  --ink:oklch(19% 0.040 45);
  --soft:oklch(45.5% 0.038 50);
  --faint:oklch(50.5% 0.032 52);   /* 4.5:1 on --bg; the uppercase labels are small */
  --rule:oklch(89% 0.026 58);

  /* two ambers on purpose:
     --amber fills shapes, --amber-ink is the only one allowed to be letters.
     the bright fill measures 2.03:1 on this ground, which fails AA. */
  --amber:oklch(76% 0.160 68);
  --amber-ink:oklch(52% 0.150 55);
  --on-amber:oklch(19% 0.040 45);

  --gut:clamp(1.25rem,2.6vw,2.5rem);
  --r:2px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:oklch(17% 0.028 45);
    --surface:oklch(21% 0.030 45);
    --sunk:oklch(23% 0.032 45);
    --ink:oklch(97% 0.012 62);
    --soft:oklch(72% 0.024 58);
    --faint:oklch(63% 0.026 58);
    --rule:oklch(30.5% 0.036 48);
    --amber-ink:oklch(82% 0.145 72);
  }
}
:root[data-theme="dark"]{
  --bg:oklch(17% 0.028 45);
  --surface:oklch(21% 0.030 45);
  --sunk:oklch(23% 0.032 45);
  --ink:oklch(97% 0.012 62);
  --soft:oklch(72% 0.024 58);
  --faint:oklch(63% 0.026 58);
  --rule:oklch(30.5% 0.036 48);
  --amber-ink:oklch(82% 0.145 72);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background 200ms ease,color 200ms ease;
}
h1,h2,h3,.bd,.big{font-family:'Bricolage Grotesque',system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;background:var(--ink);color:var(--bg);padding:.7rem 1rem;z-index:99}

.wrap{max-width:76rem;margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.sec{padding-block:clamp(3.5rem,8vw,7rem)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
.amb{color:var(--amber-ink)}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;background:var(--bg)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:4.6rem}
.bd{font-weight:800;font-size:1.5rem;letter-spacing:-.04em;text-decoration:none}
.nl{margin-left:auto;display:none;gap:1.7rem}
.nl a{color:var(--soft);text-decoration:none;font-size:.92rem}
.nl a:hover,.nl a[aria-current]{color:var(--ink)}
.na{display:flex;gap:.5rem;align-items:center;margin-left:auto}
/* the mobile menu already carries Log in, so the nav copy only shows once the
   menu button is gone. without this, signing in is unreachable on desktop. */
.na .login{display:none}
@media(min-width:56rem){.na .login{display:inline-block}}
.nl+.na{margin-left:0}
@media(min-width:56rem){.nl{display:flex}}

.btn{
  font:inherit;font-weight:600;font-size:.92rem;padding:.7rem 1.2rem;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent;cursor:pointer;display:inline-block;
  transition:transform 90ms ease,background 150ms ease;
}
.btn-a{background:var(--amber);color:var(--on-amber);white-space:nowrap}
.btn-a:hover{transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{transform:translateY(-1px)}
@media(max-width:30rem){.nav .btn-a{font-size:.82rem;padding:.6rem .75rem}.nav-in{gap:.6rem}}

.icon-btn{background:transparent;border:1px solid var(--rule);color:var(--soft);border-radius:var(--r);
  width:2.4rem;height:2.4rem;display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn:hover{color:var(--ink);border-color:var(--ink)}
.ic-moon{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ic-moon{display:block}
  :root:not([data-theme="light"]) .ic-sun{display:none}
}
[data-theme="light"] .ic-sun{display:block}[data-theme="light"] .ic-moon{display:none}
[data-theme="dark"] .ic-moon{display:block}[data-theme="dark"] .ic-sun{display:none}
.menu-btn{display:grid}
@media(min-width:56rem){.menu-btn{display:none}}
.mob{display:none;border-bottom:1px solid var(--rule);background:var(--bg)}
.mob.open{display:block}
@media(min-width:56rem){.mob{display:none !important}}
.mob a{display:block;padding:.9rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
.mob a:last-child{border-bottom:0}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--rule);padding-block:2.6rem;color:var(--soft);font-size:.92rem}
.ft-in{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.ft a{color:var(--soft);text-decoration:none}
.ft a:hover{color:var(--ink)}
.ft .r{margin-left:auto}

/* ---------- page head, for the pages that are not the landing page ---------- */
.head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--rule)}
.head h1{font-weight:800;font-size:clamp(2.2rem,5.4vw,4rem);line-height:.98;letter-spacing:-.045em;margin:1rem 0 0}
.head p{color:var(--soft);max-width:46ch;margin-top:1.1rem;font-size:clamp(1.02rem,1.5vw,1.16rem)}

/* ---------- forms ---------- */
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.field label .req{color:var(--amber-ink)}
.field input,.field textarea,.field select{
  font:inherit;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r);padding:.75rem .85rem;width:100%;
}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field input[type=file]{padding:.6rem;background:var(--sunk);cursor:pointer}
.field .hint{font-size:.82rem;color:var(--faint)}
.grid2{display:grid;gap:0 1.4rem}
@media(min-width:38rem){.grid2{grid-template-columns:1fr 1fr}}
fieldset{border:0;margin-bottom:1.6rem}
legend{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-bottom:.8rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--rule);width:100%}
.note{color:var(--soft);font-size:.9rem}
.msg{padding:.85rem 1rem;border-radius:var(--r);margin-bottom:1.2rem;font-size:.94rem;display:none}
.msg.on{display:block}
.msg.ok{background:var(--sunk);border-left:3px solid var(--amber)}
.msg.err{background:var(--sunk);border-left:3px solid oklch(55% 0.19 25);color:var(--ink)}

/* ---------- prose, for privacy and other documents ---------- */
.doc{max-width:44rem}
.doc h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:2.6rem 0 .7rem;
  padding-top:1.4rem;border-top:1px solid var(--rule)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:1.6rem}
.doc p{color:var(--soft);margin-bottom:.9rem}
.doc ul{color:var(--soft);margin:0 0 1rem 1.1rem}
.doc li{margin-bottom:.45rem}
.doc strong{color:var(--ink);font-weight:600}
.doc code{font-family:'IBM Plex Mono',monospace;font-size:.86em;background:var(--sunk);
  border:1px solid var(--rule);border-radius:var(--r);padding:.1rem .35rem;word-break:break-all}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}


/* ============================================================
   Polish pass, 2026-08-27. Everything here is switched off by
   prefers-reduced-motion or by a coarse pointer, at the bottom.
   ============================================================ */

/* film grain: a living texture, not a filter over the design */
.grain{
  position:fixed;inset:-90px;z-index:200;pointer-events:none;opacity:.038;
  /* promoted to its own layer: without this the browser repaints a full-screen
     noise bitmap on every animation step, which is felt as heavy scrolling. */
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;contain:strict;
  /* feTurbulence emits COLOURED noise. Without the saturate matrix this layer
     tinted the whole site warm: the page rendered rgb(252,243,233) instead of
     rgb(246,243,245) — i.e. it turned the design cream, which is the exact
     default design.md bans. Desaturated, it darkens and lightens only. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)}      12%{transform:translate3d(-3%,-2%,0)}
  25%{transform:translate3d(2%,-4%,0)}       37%{transform:translate3d(-4%,3%,0)}
  50%{transform:translate3d(3%,2%,0)}        62%{transform:translate3d(-2%,-3%,0)}
  75%{transform:translate3d(4%,1%,0)}        87%{transform:translate3d(-1%,4%,0)}
}

/* The custom cursor was built and then removed on purpose, 2026-08-27.
   Three reasons: a trailing ring is the single most recognisable AI-portfolio
   affectation of the moment; hiding the native pointer with cursor:none costs
   real usability on an eleven-field registration form; and it told the reader
   nothing. The page did not feel less finished without it. */

/* the nav settles once you are past the hero. opaque, not frosted. */
.nav{transition:box-shadow 240ms ease,border-color 240ms ease}
.nav.settled{border-bottom-color:transparent;
  box-shadow:0 1px 0 var(--rule),0 14px 34px -28px oklch(19% 0.04 340 / .55)}

/* micro-interactions, the same everywhere */
.item,.plan,.step,.lane,.tg,.line{transition:background-color 120ms ease}
.item:hover,.plan:hover,.step:hover,.tg:hover,.line:hover{background:var(--sunk)}
.nl a{transition:color 120ms ease}

@media(prefers-reduced-motion:reduce){
  .grain{animation:none;opacity:.03}
}