/* ============================================================
   WAYFARE STUDIO
   Expedition ledger aesthetic: warm cream, deep pine ink,
   terracotta stamps, gold foil accents.
   All animation is transform/opacity only, so it stays fast.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --cream:#f7f0dd;
  --sand:#eee1c4;
  --ink:#152220;
  --ink-2:#0e1816;
  --rust:#c2542b;
  --clay:#993e1c;
  --gold:#c0913a;
  --pine:#33544a;
  --mint:#8fd6b0;
  --peach:#f0b48a;
  --body-muted:#4b544f;
  --line:rgba(21,34,32,0.18);
  --line-dark:rgba(247,240,221,0.16);
  --shadow-lg:0 24px 60px -24px rgba(14,24,22,0.45);
  --shadow-sm:0 10px 30px -14px rgba(14,24,22,0.35);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope', 'Segoe UI', sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain. Static texture, no blend mode, so it costs nothing. */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2147483647;
  opacity:0.05;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--rust); color:var(--cream); }

.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

h1,h2,h3{
  font-family:'Unbounded', 'Arial Black', sans-serif;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-0.01em;
}
.accent-i{
  font-weight:800;
  color:var(--rust);
}
.on-dark .accent-i{ color:var(--peach); }

/* ---------- Section labels ---------- */
.label{
  display:flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:1.4rem;
}
.label .num{
  border:1px solid currentColor;
  border-radius:999px;
  padding:3px 10px;
  font-size:0.65rem;
  letter-spacing:0.1em;
}
.label::after{
  content:"";
  flex:0 0 46px;
  height:1px;
  background:currentColor;
  opacity:0.6;
}
.on-dark .label{ color:var(--peach); }
.label.center{ justify-content:center; }
.label.center::after{ display:none; }

/* ============================================================
   PALM OVERLAYS
   Real cutout fronds hanging over the page edges. Decorative
   only: no pointer events, hidden on smaller screens.
   ============================================================ */
.palm{
  position:fixed;
  z-index:850;              /* under the nav, over the sections */
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 24px 26px rgba(14,24,22,0.35));
  will-change:transform;
}
.palm-tr{
  top:-50px; right:-70px;
  width:min(26vw, 400px);
  transform-origin:top right;
  animation:swayTR 9s ease-in-out infinite;
}
@keyframes swayTR{
  0%,100%{ transform:rotate(-2.5deg); }
  50%{ transform:rotate(1.5deg); }
}
.palm-bl{
  bottom:-70px; left:-80px;
  width:min(22vw, 340px);
  transform-origin:bottom left;
  animation:swayBL 11s ease-in-out infinite;
}
@keyframes swayBL{
  0%,100%{ transform:rotate(181deg); }
  50%{ transform:rotate(177deg); }
}
@media (max-width:1100px){
  .palm{ display:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nav.scrolled{
  background:rgba(247,240,221,0.95);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(14,24,22,0.4);
}
.nav-inner{
  max-width:1160px; margin:0 auto;
  padding:0 32px;
  height:74px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}

/* Logo */
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{ width:42px; height:42px; flex-shrink:0; }
.logo-mark .ring{
  transform-origin:50% 50%;
  transition:transform .8s var(--ease-out);
}
.logo:hover .ring{ transform:rotate(120deg); }
.logo-word{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:0.92rem;
  letter-spacing:0.01em;
  line-height:1;
}
.logo-word small{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-weight:400;
  font-size:0.56rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--rust);
  margin-top:4px;
}
.nav-on-hero .logo-word{ color:var(--cream); }
.nav-on-hero .logo-word small{ color:var(--peach); }
.nav.scrolled .logo-word{ color:var(--ink); }
.nav.scrolled .logo-word small{ color:var(--rust); }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a:not(.btn){
  font-family:'JetBrains Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  position:relative;
  padding:6px 0;
  color:var(--cream);
  transition:color .3s ease;
}
.nav.scrolled .nav-links a:not(.btn){ color:var(--ink); }
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1.5px;
  background:var(--rust);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.current::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-toggle{
  display:none;
  background:none; border:none;
  cursor:pointer;
  width:40px; height:40px;
  position:relative;
  z-index:20;
}
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background:var(--cream);
  margin:5px auto;
  transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.nav.scrolled .nav-toggle span{ background:var(--ink); }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   BUTTONS  (sweep fill + sliding arrow, stamp press on click)
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:3px;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn .arr{
  display:inline-block;
  transition:transform .3s var(--ease-out);
}
.btn:hover .arr{ transform:translateX(5px); }

/* sweep layer */
.btn::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .38s var(--ease-out);
}
.btn:hover::before{ transform:scaleX(1); }

.btn-primary{
  background:var(--rust);
  color:var(--cream);
  box-shadow:0 14px 30px -14px rgba(194,84,43,0.55);
}
.btn-primary::before{ background:var(--clay); }
.btn-primary:hover{ box-shadow:0 18px 36px -14px rgba(194,84,43,0.7); }

.btn-ink{
  background:var(--ink);
  color:var(--cream);
}
.btn-ink::before{ background:var(--rust); }

.btn-ghost{
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover{ color:var(--cream); }

.btn-ghost-light{
  border:1.5px solid rgba(247,240,221,0.75);
  color:var(--cream);
  background:transparent;
}
.btn-ghost-light::before{ background:var(--cream); }
.btn-ghost-light:hover{ color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-2);
  perspective:1100px;   /* gives the tilt real 3D depth */
}
/* wrapper takes the 3D tilt + parallax; the img inside keeps the slow drift.
   Oversized bleed so edges never show while rotating. */
.hero-media-wrap{
  position:absolute; inset:-70px;
  will-change:transform;
  transform-style:preserve-3d;
}
.hero-media{
  width:100%; height:100%;
  object-fit:cover;
  animation:heroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{ transform:scale(1.04) translateX(0); }
  to{ transform:scale(1.12) translateX(-1.5%); }
}
.hero-route, .hero-content{ will-change:transform; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(14,24,22,0.9) 0%, rgba(14,24,22,0) 34%),
    linear-gradient(97deg, rgba(14,24,22,0.9) 0%, rgba(14,24,22,0.62) 42%, rgba(14,24,22,0.08) 78%);
}

/* animated flight path across the hero */
.hero-route{
  position:absolute;
  left:0; right:0; bottom:8%;
  width:100%;
  height:120px;
  opacity:0.5;
  pointer-events:none;
}
.hero-route path{
  stroke:var(--peach);
  stroke-width:1.6;
  fill:none;
  stroke-dasharray:6 10;
  animation:routeFlow 2.6s linear infinite;
}
@keyframes routeFlow{ to{ stroke-dashoffset:-64; } }

.hero-content{
  position:relative;
  z-index:2;
  padding-top:150px;    /* top/bottom only, so .wrap's side padding survives */
  padding-bottom:120px;
  max-width:780px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cream);
  border:1px solid rgba(247,240,221,0.4);
  border-radius:999px;
  padding:9px 18px;
  margin-bottom:30px;
  opacity:0;
  animation:riseIn .8s var(--ease-out) forwards .15s;
}
.hero-badge .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--mint);
  position:relative;
}
.hero-badge .dot::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid var(--mint);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  from{ transform:scale(0.6); opacity:1; }
  to{ transform:scale(1.8); opacity:0; }
}

.hero h1{
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  color:var(--cream);
  opacity:0;
  animation:riseIn .9s var(--ease-out) forwards .3s;
}
.hero .lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:#ddd5c0;
  max-width:560px;
  margin:26px 0 38px;
  opacity:0;
  animation:riseIn .9s var(--ease-out) forwards .48s;
}
.hero-ctas{
  display:flex; gap:16px; flex-wrap:wrap;
  opacity:0;
  animation:riseIn .9s var(--ease-out) forwards .64s;
}
.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:52px;
  opacity:0;
  animation:riseIn .9s var(--ease-out) forwards .8s;
}
.chip{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#e6dfca;
  border:1px solid rgba(247,240,221,0.35);
  border-radius:999px;
  padding:8px 16px;
  transition:border-color .3s ease, background .3s ease;
}
.chip:hover{ border-color:var(--peach); background:rgba(240,180,138,0.12); }

@keyframes riseIn{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  bottom:34px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:rgba(247,240,221,0.7);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue::after{
  content:"";
  width:1px; height:38px;
  background:linear-gradient(to bottom, var(--peach), transparent);
  animation:cueDrop 1.8s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cueDrop{
  0%{ transform:scaleY(0); }
  55%{ transform:scaleY(1); }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ============================================================
   MARQUEE BAND
   ============================================================ */
.marquee{
  background:var(--rust);
  color:var(--cream);
  overflow:hidden;
  transform:rotate(-1.2deg) scale(1.02);
  margin:-26px 0;
  position:relative;
  z-index:5;
  box-shadow:var(--shadow-sm);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee span{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:16px 0;
  white-space:nowrap;
}
.marquee .sep{ padding:16px 26px; color:var(--peach); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ position:relative; padding:130px 0; }
.on-dark{ background:var(--ink); color:var(--cream); }
.on-sand{ background:var(--sand); }

/* faint concentric compass rings in cream sections */
.ring-deco{
  position:absolute;
  right:-180px; top:60px;
  width:520px; height:520px;
  pointer-events:none;
  opacity:0.12;
}
.ring-deco circle{
  fill:none;
  stroke:var(--pine);
  stroke-width:1;
  stroke-dasharray:3 8;
}
.ring-deco .spin{
  transform-origin:50% 50%;
  animation:slowSpin 80s linear infinite;
}
@keyframes slowSpin{ to{ transform:rotate(360deg); } }

.section-head{ max-width:660px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(1.5rem, 2.9vw, 2.3rem); }
.section-head .sub{
  margin-top:18px;
  color:var(--body-muted);
  font-size:1.08rem;
  max-width:540px;
}
.on-dark .section-head .sub{ color:#b6c1ba; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-group > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-group.is-visible > *{ opacity:1; transform:none; }
.reveal-group.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-group.is-visible > *:nth-child(2){ transition-delay:.16s; }
.reveal-group.is-visible > *:nth-child(3){ transition-delay:.27s; }
.reveal-group.is-visible > *:nth-child(4){ transition-delay:.38s; }

/* ============================================================
   WORK SHOWCASE  (live demo frame)
   ============================================================ */
.work-frame{
  display:block;
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:12px 12px 0 var(--rust);
  transform:rotate(-.6deg);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.work-frame:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:14px 16px 0 var(--ink);
}
.wf-bar{
  display:flex; align-items:center; gap:7px;
  background:var(--ink);
  padding:13px 18px;
}
.wf-dot{ width:10px; height:10px; border-radius:50%; }
.wf-dot:nth-child(1){ background:#e3705a; }
.wf-dot:nth-child(2){ background:#e8b64c; }
.wf-dot:nth-child(3){ background:#7cc08f; }
.wf-url{
  flex:1; min-width:0;
  margin-left:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.04em;
  color:#b9c3bd;
  background:rgba(247,240,221,.08);
  border-radius:999px;
  padding:5px 14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wf-live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint);
}
.wf-pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--mint);
  animation:blink 1.4s ease-in-out infinite;
}
.work-frame img{ width:100%; height:auto; display:block; }
.work-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-top:34px;
}
.work-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip-ink{
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 15px;
}

/* ============================================================
   SLIDESHOW  (what we create for you)
   ============================================================ */
.slider{ overflow:hidden; }
.slider-track{
  display:flex;
  transition:transform .65s var(--ease-out);
  will-change:transform;
}
.slide{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:56px;
  align-items:center;
  padding:8px 4px;
}
.slide-info .m-tag{ margin-bottom:18px; }
.slide-info h3{ font-size:1.45rem; margin-bottom:14px; }
.slide-info p{ color:var(--body-muted); font-size:1.05rem; max-width:420px; margin-bottom:22px; }
.m-points{ list-style:none; max-width:420px; }
.m-points li{
  padding:11px 0 11px 30px;
  border-bottom:1px dashed var(--line);
  position:relative;
  color:#39423d;
  font-size:0.98rem;
}
.m-points li:last-child{ border-bottom:none; }
.m-points li::before{
  content:"✓";
  position:absolute; left:2px;
  color:var(--rust);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
}

.slider-nav{
  display:flex; align-items:center; justify-content:center;
  gap:26px;
  margin-top:40px;
}
.s-arrow{
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-size:1.05rem;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.s-arrow:hover{ background:var(--ink); color:var(--cream); }
.s-arrow:active{ transform:scale(0.92); }
.s-dots{ display:flex; gap:10px; }
.s-dot{
  width:10px; height:10px;
  border-radius:999px;
  border:none;
  background:rgba(21,34,32,0.25);
  cursor:pointer;
  padding:0;
  transition:width .3s var(--ease-out), background .3s ease;
}
.s-dot.active{ width:30px; background:var(--rust); }

/* browser mockup */
.mock-browser{
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  box-shadow:10px 10px 0 rgba(21,34,32,0.12);
  transform:rotate(-1deg);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.mock-browser:hover{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:12px 14px 0 rgba(194,84,43,0.25);
}
.mock-bar{
  display:flex; align-items:center; gap:6px;
  background:var(--ink);
  padding:11px 16px;
}
.m-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(247,240,221,0.35);
}
.m-dot:nth-child(1){ background:#e3705a; }
.m-dot:nth-child(2){ background:#e8b64c; }
.m-dot:nth-child(3){ background:#7cc08f; }
.mock-url{
  flex:1;
  min-width:0;
  margin-left:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.04em;
  color:#9aa69f;
  background:rgba(247,240,221,0.08);
  border-radius:999px;
  padding:4px 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mock-body{ padding:26px 28px 30px; }
.m-tag{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
  border:1px solid var(--rust);
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:14px;
}
.m-title{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:0.95rem;
  line-height:1.3;
  margin-bottom:16px;
}
.m-line{
  height:8px;
  border-radius:4px;
  background:rgba(21,34,32,0.12);
  margin-bottom:9px;
}
.m-toc{
  margin-top:18px;
  border:1px dashed var(--line);
  border-radius:8px;
  padding:14px 16px;
}
.m-toc span{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--body-muted);
  margin-bottom:10px;
}
.m-product{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:10px;
}
.m-thumb{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sand);
  border-radius:8px;
  font-size:1.1rem;
  flex-shrink:0;
}
.m-pinfo{ flex:1; min-width:0; }
.m-pinfo .m-line{ margin-bottom:6px; }
.m-stars{ color:var(--gold); font-size:0.72rem; letter-spacing:2px; }
.m-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:0.58rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--rust);
  color:var(--cream);
  border-radius:5px;
  padding:8px 12px;
  white-space:nowrap;
}
.m-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:4px;
}
.m-col{
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.m-col-head{
  font-family:'JetBrains Mono', monospace;
  font-size:0.58rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:8px;
}
.m-link{
  font-size:0.82rem;
  color:#39423d;
  padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.m-link:last-child{ border-bottom:none; }

.m-list{ list-style:none; margin-bottom:16px; }
.m-list li{
  font-size:0.85rem;
  color:#39423d;
  padding:8px 0 8px 24px;
  border-bottom:1px dashed var(--line);
  position:relative;
}
.m-list li::before{
  content:"✓";
  position:absolute; left:2px;
  color:var(--pine);
  font-family:'JetBrains Mono', monospace;
}
.m-chart{
  display:flex; align-items:flex-end; gap:8px;
  height:64px;
  margin-top:6px;
}
.m-chart span{
  flex:1;
  background:linear-gradient(to top, var(--rust), var(--peach));
  border-radius:4px 4px 0 0;
  transform-origin:bottom;
  animation:chartGrow .8s var(--ease-out) backwards;
}
.m-chart span:nth-child(2){ animation-delay:.1s; }
.m-chart span:nth-child(3){ animation-delay:.2s; }
.m-chart span:nth-child(4){ animation-delay:.3s; }
.m-chart span:nth-child(5){ animation-delay:.4s; }
@keyframes chartGrow{ from{ transform:scaleY(0); } }

/* ============================================================
   TICKET  (the problem)
   ============================================================ */
.ticket{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:10px;
  position:relative;
  box-shadow:8px 8px 0 var(--rust);
}
.ticket-half{ padding:52px 50px; position:relative; }
.ticket-half + .ticket-half{ border-left:2px dashed var(--line); }
/* punch notches */
.ticket::before,.ticket::after{
  content:"";
  position:absolute;
  left:50%;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--sand);
  border:1.5px solid var(--ink);
  transform:translateX(-50%);
}
.ticket::before{ top:-16px; border-top-color:transparent; }
.ticket::after{ bottom:-16px; border-bottom-color:transparent; }

.ticket-half h3{
  font-size:1.05rem;
  margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.ticket-half h3 .tick-ico{
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  width:32px; height:32px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.have .tick-ico{ background:var(--pine); color:var(--cream); }
.miss .tick-ico{ background:var(--rust); color:var(--cream); }
.ticket-half ul{ list-style:none; }
.ticket-half li{
  padding:12px 0 12px 28px;
  position:relative;
  border-bottom:1px dashed var(--line);
  color:#39423d;
}
.ticket-half li:last-child{ border-bottom:none; }
.have li::before{
  content:"✓";
  position:absolute; left:0;
  color:var(--pine);
  font-family:'JetBrains Mono', monospace;
}
.miss li::before{
  content:"+";
  position:absolute; left:0;
  color:var(--rust);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
}

/* ============================================================
   STAMP CARDS  (what I build)
   ============================================================ */
.stamp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.stamp-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  padding:42px 34px;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s ease;
  will-change:transform;
}
.stamp-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--rust);
}
.stamp-card .big-num{
  position:absolute;
  top:-26px; right:-6px;
  font-family:'Unbounded', sans-serif;
  font-size:4.6rem;
  font-weight:800;
  color:var(--sand);
  z-index:0;
  transition:color .4s ease, transform .5s var(--ease-out);
}
.stamp-card:hover .big-num{
  color:rgba(194,84,43,0.16);
  transform:translateY(6px);
}
.stamp-card .stamp-ico{
  width:52px; height:52px;
  border:1.5px dashed var(--rust);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--rust);
  font-size:1.2rem;
  margin-bottom:24px;
  transform:rotate(-5deg);
  transition:transform .4s var(--ease-out), background .3s ease;
  position:relative; z-index:1;
}
.stamp-card:hover .stamp-ico{
  transform:rotate(8deg) scale(1.08);
  background:rgba(194,84,43,0.08);
}
.stamp-card h3{ font-size:1.02rem; margin-bottom:12px; position:relative; z-index:1; }
.stamp-card p{ color:var(--body-muted); font-size:0.98rem; position:relative; z-index:1; }

/* ============================================================
   STATUS BOARD  (departures style)
   ============================================================ */
.board{
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-radius:10px;
  padding:14px 40px;
  font-family:'JetBrains Mono', monospace;
  overflow:hidden;
}
.board-row{
  display:grid;
  grid-template-columns:1.4fr 2.2fr 1fr;
  gap:20px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px dashed var(--line-dark);
  font-size:0.85rem;
}
.board-row:last-child{ border-bottom:none; }
.board-row.head{
  font-size:0.64rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#7d8a83;
  border-bottom:1px solid rgba(247,240,221,0.25);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px;
  border-radius:999px;
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.badge::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
}
.badge.progress{ background:rgba(240,180,138,0.14); color:var(--peach); }
.badge.progress::before{ animation:blink 1.4s ease-in-out infinite; }
.badge.open{ background:rgba(143,214,176,0.12); color:var(--mint); }
@keyframes blink{ 50%{ opacity:0.25; } }

/* ============================================================
   PRICING
   ============================================================ */
.price-wrap{
  max-width:560px;
  margin:0 auto;
}
.price-card{
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:12px;
  padding:54px 52px 46px;
  position:relative;
  box-shadow:10px 10px 0 var(--ink);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.price-card:hover{
  transform:translate(-4px,-4px);
  box-shadow:14px 14px 0 var(--rust);
}
.price-flag{
  position:absolute;
  top:-15px; left:50px;
  background:var(--rust);
  color:var(--cream);
  font-family:'JetBrains Mono', monospace;
  font-size:0.64rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:3px;
  box-shadow:0 6px 16px -6px rgba(194,84,43,0.6);
}
.price-name{
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:10px;
}
.price-amount{
  font-family:'Unbounded', sans-serif;
  font-size:3rem;
  font-weight:600;
  line-height:1;
  display:flex; align-items:baseline; gap:10px;
}
.price-amount span{
  font-family:'JetBrains Mono', monospace;
  font-size:0.95rem;
  color:var(--body-muted);
  font-weight:400;
}
.price-list{
  list-style:none;
  margin:34px 0 8px;
}
.price-list li{
  padding:13px 0 13px 32px;
  border-bottom:1px dashed var(--line);
  position:relative;
  color:#39423d;
}
.price-list li::before{
  content:"✓";
  position:absolute; left:2px;
  color:var(--pine);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
}
.price-note{
  font-style:italic;
  font-size:0.92rem;
  color:var(--body-muted);
  margin-top:20px;
}
.price-cta{ margin-top:30px; }
.price-cta .btn{ width:100%; justify-content:center; }
.price-under{
  text-align:center;
  margin-top:22px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--body-muted);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:64px;
  align-items:center;
}
.avatar-frame{
  position:relative;
  width:250px; height:250px;
  border-radius:10px;
  overflow:hidden;
  border:8px solid var(--cream);
  outline:1.5px dashed rgba(247,240,221,0.5);
  outline-offset:8px;
  transform:rotate(-2.5deg);
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease-out);
}
.avatar-frame:hover{ transform:rotate(0deg) scale(1.03); }
.avatar-frame img{ width:100%; height:100%; object-fit:cover; }
.about-copy p{ color:#cfd8d2; margin-bottom:16px; max-width:560px; }
.about-copy .sig{
  font-family:'Manrope', sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:1.15rem;
  color:var(--cream);
  margin-top:26px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--ink-2);
  color:var(--cream);
  padding:130px 0 46px;
  position:relative;
  overflow:hidden;
}
/* Pixel trail canvas: cursor paints fading pixels behind the footer CTA */
.pixel-trail{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}
footer .wrap{ position:relative; z-index:1; }
.footer-cta{
  text-align:center;
  max-width:760px;
  margin:0 auto 90px;
}
.footer-cta h2{ font-size:clamp(1.6rem, 3.4vw, 2.5rem); }
.footer-cta .sub{
  color:#b6c1ba;
  margin:20px auto 40px;
  max-width:480px;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  border-top:1px solid var(--line-dark);
  padding-top:34px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:#7d8a83;
}
.footer-bottom .foot-logo{
  display:flex; align-items:center; gap:10px;
  color:var(--cream);
}
.footer-bottom .foot-logo svg{ width:26px; height:26px; }

/* ============================================================
   WORK PAGE
   ============================================================ */
.page-hero{
  background:var(--ink);
  color:var(--cream);
  padding:190px 0 100px;
  position:relative;
  overflow:hidden;
}
.page-hero h1{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); }
.page-hero .sub{
  color:#b6c1ba;
  max-width:560px;
  margin-top:22px;
  font-size:1.1rem;
}
.coming-card{
  margin-top:44px;
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:12px;
  padding:64px 48px;
  text-align:center;
  box-shadow:8px 8px 0 var(--gold);
}
.coming-card .stamp-ico{
  width:56px; height:56px;
  border:1.5px dashed var(--rust);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--rust);
  font-family:'JetBrains Mono', monospace;
  margin:0 auto 26px;
  transform:rotate(-5deg);
}
.coming-card h3{ font-size:1.3rem; margin-bottom:14px; }
.coming-card p{ max-width:480px; margin:0 auto; color:var(--body-muted); }

/* ============================================================
   RESPONSIVE + MOTION SAFETY
   ============================================================ */
@media (max-width:900px){
  section{ padding:90px 0; }
  .slide{ grid-template-columns:1fr; gap:28px; }
  .slide-info{ text-align:center; }
  .slide-info p{ margin-inline:auto; }
  .stamp-grid{ grid-template-columns:1fr; }
  .ticket{ grid-template-columns:1fr; }
  .ticket-half + .ticket-half{ border-left:none; border-top:2px dashed var(--line); }
  .ticket::before,.ticket::after{ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .board{ padding:6px 22px; }
  .board-row{ grid-template-columns:1fr; gap:8px; padding:16px 0; }
  .board-row.head{ display:none; }
  .ring-deco{ display:none; }
  .price-card{ padding:44px 30px 38px; }

  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0;
    background:var(--ink-2);
    flex-direction:column;
    justify-content:center;
    gap:34px;
    transform:translateY(-100%);
    transition:transform .45s var(--ease-out);
    z-index:10;
  }
  .nav.open .nav-links{ transform:translateY(0); }
  .nav-links a:not(.btn){ color:var(--cream) !important; font-size:1rem; }
  .nav.open .nav-toggle span{ background:var(--cream); }
}

@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .nav-inner{ padding:0 20px; }
  .btn{ padding:13px 20px; font-size:0.72rem; }
  .hero-content{ padding-top:130px; padding-bottom:100px; }
  .hero h1{ font-size:1.55rem; }
  .hero h1 br{ display:none; }
  .hero-chips{ gap:8px; }
  .chip{ padding:7px 12px; font-size:0.62rem; }
  .m-cols{ grid-template-columns:1fr; }
  .m-product{ flex-wrap:wrap; }
  .m-btn{ margin-left:52px; }
  .mock-body{ padding:20px 18px 24px; }
  .price-amount{ font-size:2.5rem; }
  .marquee span{ font-size:0.66rem; padding:13px 0; }
  .marquee .sep{ padding:13px 16px; }
  .slider-nav{ gap:16px; margin-top:30px; }
  .s-arrow{ width:40px; height:40px; }
  .footer-cta .btn{ font-size:0.66rem; padding:13px 16px; }
}

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