/* ============================================================
   HUMANCRAFT AI — shared design system
   ============================================================ */
:root{
  --ink: oklch(0.16 0.012 250);
  --ink-2: oklch(0.22 0.014 250);
  --ink-3: oklch(0.30 0.012 250);
  --bone: oklch(0.94 0.012 80);
  --bone-2: oklch(0.88 0.014 80);
  --bone-3: oklch(0.78 0.014 80);
  --warm-white: oklch(0.97 0.008 80);
  --amber: oklch(0.74 0.135 65);
  --amber-soft: oklch(0.82 0.10 70);
  --amber-deep: oklch(0.55 0.13 50);
  --line: color-mix(in oklab, var(--bone) 86%, transparent);
  --line-on-ink: color-mix(in oklab, var(--bone) 18%, transparent);
  --serif: "Instrument Serif", "GT Sectra", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", "Söhne", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Tweakable */
  --motion-mul: 1;
  --img-saturate: 0.85;
  --img-contrast: 1.05;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{overflow-x:hidden;line-height:1.45;font-weight:350}
::selection{background:var(--amber);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.container{max-width:1480px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow,.pre{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);font-weight:400}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.amber{color:var(--amber)}

.grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.35;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);z-index:2}

/* media tonal treatment */
.tinted-img{
  filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.7);
  transition: filter .6s ease;
}
.tinted-img.warm{filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.7) sepia(.18) hue-rotate(-8deg)}
.tinted-img.cool{filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.6) hue-rotate(180deg) saturate(.6)}

/* ---------- Top nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:color-mix(in oklab, var(--ink) 78%, transparent);backdrop-filter:blur(14px);border-bottom-color:var(--line-on-ink)}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.wordmark .glyph{
  width:30px;height:30px;
  background:url("../uploads/logoweb.png") center/contain no-repeat;
  display:inline-block;flex:0 0 auto;
}
.wordmark .glyph::before{content:none}
.nav-links{display:flex;gap:32px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover, .nav-links a.is-active{color:var(--amber)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--amber)}
.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--bone-3);border-radius:999px;color:var(--bone);
  transition:border-color .2s, color .2s, background .2s;
}
.nav-cta:hover{border-color:var(--amber);color:var(--amber)}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- Page transitions ---------- */
.page-transition{position:fixed;inset:0;background:var(--ink);z-index:9999;pointer-events:none;transform:translateY(100%)}
.page-transition.in{transform:translateY(0);transition:transform .6s cubic-bezier(.7,0,.3,1)}
.page-transition.out{transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.3,1)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}

/* ---------- Headlines ---------- */
.h-display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,7.6vw,128px);line-height:.96;letter-spacing:-0.02em;
  color:var(--warm-white);text-wrap:balance;
}
.h-display em{font-style:italic;color:var(--amber-soft)}
.h-1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.6vw,84px);line-height:1.04;letter-spacing:-0.015em;
  color:var(--warm-white);text-wrap:balance;
}
.h-1 em{font-style:italic;color:var(--amber-soft)}
.h-2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.4vw,48px);line-height:1.1;letter-spacing:-0.01em;
  color:var(--warm-white);text-wrap:balance;
}

.lead-serif{font-family:var(--serif);font-size:clamp(20px,1.5vw,26px);line-height:1.5;color:var(--bone);font-style:italic;text-wrap:pretty}

.btn{
  display:inline-flex;align-items:center;gap:14px;padding:16px 22px;
  border:1px solid var(--bone);background:transparent;color:var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  cursor:pointer;
}
.btn:hover{background:var(--bone);color:var(--ink);transform:translateY(-2px)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.primary:hover{background:transparent;color:var(--amber)}
.btn .arrow{font-family:var(--serif);font-size:18px;letter-spacing:0}

/* ---------- Footer ---------- */
footer{position:relative;background:var(--ink);padding:64px 0 36px;border-top:1px solid var(--line-on-ink);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
.footer-grid h6{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:14px;font-weight:400}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:8px;font-family:var(--sans);font-size:14px;color:var(--bone-2)}
.footer-grid li a:hover{color:var(--amber)}
.footer-tag{font-family:var(--serif);font-size:32px;line-height:1.1;color:var(--warm-white);max-width:14ch}
.footer-tag em{font-style:italic;color:var(--amber-soft)}
.footer-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);flex-wrap:wrap;gap:24px;padding-top:24px;border-top:1px solid var(--line-on-ink)}
.footer-row a{color:var(--bone-2)}
.footer-row a:hover{color:var(--amber)}
.footer-links{display:flex;gap:24px}

/* ---------- HUDs ---------- */
.hud{
  background:color-mix(in oklab, var(--ink) 72%, transparent);
  backdrop-filter:blur(12px);
  border:1px solid var(--line-on-ink);
  padding:10px 14px;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--bone);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  min-width:280px;
}
.hud .row{display:flex;justify-content:space-between;gap:18px}
.hud .row span:first-child{color:var(--bone-3)}
.hud .row span:last-child{color:var(--bone)}
.hud .row span:last-child.ok{color:var(--amber)}
.hud .label{display:block;font-size:10px;color:var(--bone-3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}

/* Section helper */
.section{position:relative;padding:clamp(80px,12vh,160px) 0;overflow:hidden}
.section.dark{background:var(--ink)}
.section.bone{background:var(--bone);color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* Honour user-facing motion-intensity tweak */
.motion-low *, .motion-low *::before, .motion-low *::after{animation-duration:calc(var(--anim-d, 1s) * 2) !important}
.motion-off *, .motion-off *::before, .motion-off *::after{animation:none !important}
.motion-off .reveal{opacity:1 !important;transform:none !important}