/* Blueye Simulations, Restyle 2026 */
/* Fonts via Bunny Fonts - GDPR-compliant drop-in for Google Fonts.
   Servers in the EU, no IP logging, no cookies. */
@import url('https://fonts.bunny.net/css?family=instrument-serif:400i|inter:300,400,500,600,700|jetbrains-mono:300,400,500,700|space-grotesk:400,500,600,700|chivo-mono:400,500,600,700&display=swap');

:root{
  --ink:#0A0A12;
  --ink-2:#11111C;
  --ink-3:#181826;
  --paper:#F5F2EA;
  --paper-dim:#A8A6A0;
  --paper-mute:#6B6B7A;
  --line:rgba(245,242,234,0.08);
  --line-2:rgba(245,242,234,0.16);
  --teal:#00C9A7;
  --teal-2:#00A589;
  --teal-glow:rgba(0,201,167,0.18);
  --lav:#B8B0E8;
  --red:#FF5A5F;
  --amber:#F5C16C;
  --font-display:"Instrument Serif", ui-serif, Georgia, serif;
  --font-head:"Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-ui:"Chivo Mono", ui-monospace, "SFMono-Regular", monospace;
  --pad-x:clamp(20px, 4vw, 64px);
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  cursor:default;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
::selection{background:var(--teal);color:var(--ink)}

/* ── grain noise overlay ── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:overlay;
}

/* ── Type primitives ── */
.serif{font-family:var(--font-display);font-weight:400;font-style:italic;letter-spacing:-0.02em}
.mono{font-family:var(--font-mono)}
.upper{text-transform:uppercase;letter-spacing:.18em}
.micro{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute)}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px var(--teal-glow);animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.h-display{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(56px, 11vw, 200px);
  line-height:.92;
  letter-spacing:-0.04em;
}
.h-display .it{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:-0.025em}
.h-1{font-family:var(--font-head);font-weight:600;font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-0.035em}
.h-1 .it{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:-0.02em}

/* Modifier: makes italic word look "opaque" — used on "opaco" / "opaque" in the problem section */
.it.blur{
  filter:blur(4px);
  opacity:.85;
  transition:filter .5s ease, opacity .5s ease;
}
.it.blur:hover{filter:blur(0);opacity:1}

/* Respect users who asked for reduced motion */
@media (prefers-reduced-motion: reduce){
  .it.blur{filter:blur(2px)}
}

/* ─────────────── Product name effects (products.html) ─────────────── */

/* HOTELLO — gentle wave, like water/hospitality.
   Each letter gets a sin offset via inline --i set by app.js. */
@keyframes prod-wave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.prod-name[data-wave] .wave-letter{
  display:inline-block;
  animation:prod-wave 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.08s);
  will-change:transform;
}

/* MACHIAVELLI — duplicitous echo, a double-faced shadow.
   The original letterform sits in place; a faint, blurred duplicate trails
   behind it. Hover snaps the duplicate back into alignment, "unmasking" the
   single face — a small metaphor for political duplicity. */
.prod-name.echo{
  position:relative;
  isolation:isolate;
}
.prod-name.echo::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:inherit;
  opacity:.35;
  transform:translate(8px,5px);
  filter:blur(1.5px);
  pointer-events:none;
  z-index:-1;
  transition:transform .65s cubic-bezier(.2,.7,.2,1), opacity .65s ease, filter .65s ease;
  /* Inherit font sizing/weight/spacing from parent */
  font:inherit;
  letter-spacing:inherit;
}
.prod-name.echo:hover::after{
  transform:translate(0,0);
  opacity:0;
  filter:blur(0);
}

/* SIBILLA — pure CSS doesn't help here; the scramble is JS-driven (TextScramble
   in app.js, triggered by IntersectionObserver). Nothing to style. */

@media (prefers-reduced-motion: reduce){
  .prod-name[data-wave] .wave-letter{animation:none}
  .prod-name.echo::after{transform:translate(4px,3px);transition:none}
}

/* ─────────────── Method page word effects ─────────────── */

/* "un pomeriggio" / "an afternoon" — typewriter via clip-path with steps()
   Reveals left-to-right in discrete jumps that mimic a typewriter. */
.it.typewriter{
  display:inline-block;
  vertical-align:baseline;
  clip-path:inset(-15% 100% -15% -3%);
  -webkit-clip-path:inset(-15% 100% -15% -3%);
  transition:clip-path 1.4s steps(14, end) 0.5s,
             -webkit-clip-path 1.4s steps(14, end) 0.5s;
}
.reveal.in .it.typewriter{
  clip-path:inset(-15% -3% -15% -3%);
  -webkit-clip-path:inset(-15% -3% -15% -3%);
}

@media (prefers-reduced-motion: reduce){
  .it.typewriter{transition-duration:.2s;clip-path:inset(-15% -3%);-webkit-clip-path:inset(-15% -3%)}
}
.h-2{font-family:var(--font-head);font-weight:600;font-size:clamp(28px,3.6vw,52px);line-height:1.05;letter-spacing:-0.03em}
.h-2 .it{font-family:var(--font-display);font-style:italic;font-weight:400}
.lead{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--paper);font-weight:300;letter-spacing:-.005em;max-width:50ch}
.body{color:var(--paper-dim);font-size:15px;line-height:1.65;font-weight:400;max-width:62ch}

/* ── Layout shell ── */
.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);position:relative;z-index:2}

/* ── Top nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(to bottom, rgba(10,10,18,.85), rgba(10,10,18,0));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--paper)}
.nav-logo .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal-glow);position:relative}
.nav-logo .dot::after{content:"";position:absolute;inset:-6px;border:1px solid var(--teal);border-radius:50%;opacity:.4;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.4);opacity:0}}
.nav-logo b{font-weight:700;letter-spacing:.16em}
.nav-logo .sub{color:var(--paper-mute);letter-spacing:.32em;font-weight:400}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;color:var(--paper-dim);transition:color .2s}
.nav-links a:hover, .nav-links a.active{color:var(--paper)}
.nav-links a.active::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;box-shadow:0 0 10px var(--teal-glow)}
.nav-right{display:flex;align-items:center;gap:18px}
.lang-toggle{display:flex;border:1px solid var(--line-2);border-radius:99px;overflow:hidden}
.lang-toggle button{padding:6px 12px;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;color:var(--paper-mute);transition:all .2s}
.lang-toggle button.on{background:var(--paper);color:var(--ink)}

@media (max-width:840px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* Hide CTA on small phones to avoid crowding — accessible via mobile menu */
  @media (max-width:520px){
    .nav-right .btn{display:none}
  }
}

/* ── Mobile nav: hamburger + overlay menu ── */
.nav-burger{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:border-color .2s, background .2s;
}
.nav-burger:hover{border-color:var(--paper)}
.nav-burger .bar{
  position:absolute;
  left:11px;right:11px;height:1.5px;
  background:var(--paper);
  border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-burger .bar:nth-child(1){top:14px}
.nav-burger .bar:nth-child(2){top:19px}
.nav-burger .bar:nth-child(3){top:24px}
.nav-burger.open .bar:nth-child(1){top:19px;transform:rotate(45deg)}
.nav-burger.open .bar:nth-child(2){opacity:0}
.nav-burger.open .bar:nth-child(3){top:19px;transform:rotate(-45deg)}

.nav-mobile-menu{
  position:fixed;inset:0;
  z-index:90;
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:96px 32px 48px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.nav-mobile-menu.open{opacity:1;pointer-events:auto}
.nav-mobile-menu a{
  display:block;
  padding:18px 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:34px;
  letter-spacing:-.02em;
  color:var(--paper);
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease, color .2s ease;
}
.nav-mobile-menu.open a{opacity:1;transform:translateY(0)}
.nav-mobile-menu.open a:nth-child(1){transition-delay:.08s}
.nav-mobile-menu.open a:nth-child(2){transition-delay:.14s}
.nav-mobile-menu.open a:nth-child(3){transition-delay:.20s}
.nav-mobile-menu.open a:nth-child(4){transition-delay:.26s}
.nav-mobile-menu.open a:nth-child(5){transition-delay:.32s}
.nav-mobile-menu.open a:nth-child(6){transition-delay:.38s}
.nav-mobile-menu a:hover{color:var(--teal)}
.nav-mobile-menu a.active{color:var(--teal)}
.nav-mobile-menu a.active::before{
  content:"→ ";color:var(--teal);
}
.nav-mobile-menu .mm-cta{
  margin-top:auto;
  padding-top:32px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.nav-mobile-menu .mm-cta .btn{align-self:flex-start}
.nav-mobile-menu .mm-mail{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-mute);
}
body.menu-open{overflow:hidden}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:all .25s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--teal);color:var(--ink);font-weight:500}
.btn-primary:hover{background:var(--paper);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(245,242,234,.04)}
.btn .arr{display:inline-block;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}

/* ── Section wrappers ── */
section{position:relative;padding:clamp(80px, 12vh, 160px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.section-head{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-bottom:64px}
.section-head .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--paper-mute);text-transform:uppercase;border-top:1px solid var(--line-2);padding-top:8px;align-self:start}
@media(max-width:780px){.section-head{grid-template-columns:1fr;gap:8px}}

/* ── Reveal on scroll ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* ── Marquee / status bar ── */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  border-top:1px solid var(--line);
  background:rgba(10,10,18,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-mute);
  padding:8px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.statusbar .group{display:flex;align-items:center;gap:14px}
.statusbar .pip{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal-glow)}
.statusbar .v{color:var(--paper)}
@media(max-width:780px){.statusbar .hide-sm{display:none}}

/* ── Grid utilities ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Cards / tiles ── */
.tile{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(245,242,234,.02), transparent);
  padding:32px;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.tile:hover{border-color:var(--line-2);background:linear-gradient(180deg, rgba(245,242,234,.04), transparent)}
.tile .num{position:absolute;top:14px;right:18px;font-family:var(--font-mono);font-size:11px;color:var(--paper-mute);letter-spacing:.18em}

/* ── Stats / data ── */
.stat-num{font-family:var(--font-sans);font-weight:300;font-size:clamp(56px,8vw,140px);line-height:.95;letter-spacing:-.04em}
.stat-num .it{font-family:var(--font-display);font-style:italic;font-weight:400}

/* ── Accents ── */
.kbd{display:inline-block;border:1px solid var(--line-2);padding:1px 8px;border-radius:4px;font-family:var(--font-mono);font-size:11px;color:var(--paper)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.tag .d{width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* ── Footer ── */
footer{padding:80px 0 60px;border-top:1px solid var(--line);position:relative;z-index:2}
footer .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){footer .ft-grid{grid-template-columns:1fr 1fr;gap:40px}}
footer h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-mute);margin:0 0 16px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer ul a{color:var(--paper-dim);font-size:14px}
footer ul a:hover{color:var(--paper)}
.ft-bottom{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute)}
@media(max-width:780px){.ft-bottom{flex-direction:column;gap:10px}}

/* ── Cursor follower ── */
.cursor-glow{
  position:fixed;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle, var(--teal-glow), transparent 60%);  pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s ease;
  mix-blend-mode:screen;
}
body:hover .cursor-glow{opacity:.7}
@media(hover:none){.cursor-glow{display:none}}

/* ── Ambient network background (site-wide) ── */
.ambient-net{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  opacity:.85;
}
@media(hover:none){.ambient-net{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-net{display:none}}