/* =========================================================
   Κανέλα — theme
   Άλλαξε χρώματα / γραμματοσειρές εδώ.
   ========================================================= */
:root {
  /* Παλέτα από το logo «Πλατής» */
  --cream: #f7f1e7;
  --white: #ffffff;
  --ink: #2a1d14;      /* σκούρο καφέ */
  --accent: #f0c98e;   /* χρυσό σιταριού (κουμπιά, tags) */
  --deep: #7b5b40;     /* καφέ του logo (τίτλοι, κάρτες) */
  --gold: #ffd9a8;

  --title-font: "Commissioner", system-ui, sans-serif;
  --text-font: "Manrope", system-ui, sans-serif;

  --menu-color: var(--cream);
  --ease: cubic-bezier(.28, .71, 0, .98);       /* signature curve (fills, reveals) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* UI feedback */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* drawers */
  --gutter: 4vw;
}

*, *::before, *::after { box-sizing: border-box; }
* { line-height: .95; }
::selection { background: var(--accent); color: var(--ink); }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button, a, [role="button"] { touch-action: manipulation; }
button, .tab, .qty-btn, .hero-float-inner, .cta-button a {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text-font);
  font-size: 1.1rem;
  overflow-x: hidden;
}
main { position: relative; z-index: 3; background: var(--cream); }
a { color: inherit; text-decoration: none; }
p { line-height: 1.4; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; user-select: none; }
button { font: inherit; color: inherit; }
.padded { padding: 50px var(--gutter); }

.section-title {
  font-family: var(--title-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: .9;
  margin: 0;
}

/* ---------- Text split helpers (JS) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .1em; margin: -.06em .25em -.1em 0; }
.w > span { display: inline-block; transform-origin: top left; }
.line { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.line > span { display: inline-block; transform-origin: top left; }

/* Letters grow on hover */
.grow { display: inline-block; transition: transform .1s ease-out, color .1s; }
.grow .word { display: inline-block; white-space: nowrap; }
.grow .letter { display: inline-block; transition: transform 3s var(--ease-out), color .1s; }
@media (hover: hover) and (pointer: fine) {
  .grow:hover { color: var(--accent); transform: scale(.95); }
  /* fast in, slow 3s settle back = the "trail" effect */
  .grow .letter:hover { transform: scale(1.25); transition-duration: .15s; }
}

/* ---------- Curtains ---------- */
.curtain { position: fixed; left: 0; width: 100%; height: 100lvh; z-index: 30000; pointer-events: none; overflow: visible; fill: var(--deep); }
.curtain-load { top: 0; }
.curtain-hide { bottom: 0; }

#crumbs { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25000; }

.overlay { position: fixed; inset: 0; background: #0008; z-index: 19000; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.overlay.open { opacity: 1; pointer-events: all; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; background: var(--white); z-index: -1;
  transform: translateY(-101%); transition: transform .8s var(--ease);
}
.site-header.filled::before { transform: none; }

/* Two logo versions slide past each other (light over dark hero, colour over white header) */
.logo { position: relative; display: block; width: 58px; height: 61px; overflow: hidden; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .5s var(--ease), opacity .3s ease; }
.logo-dark { transform: translateY(-110%); opacity: 0; }
.logo-light { transform: translateY(110%); opacity: 0; }
.logo .shown { transform: none; opacity: 1; }
.drawer-logo { width: 58px; height: auto; }
.footer-logo { width: 130px; height: auto; margin: .5rem 0 1rem; }

nav { display: flex; align-items: center; }
.main-menu { display: flex; }
.main-menu li { margin: .3rem 1.6rem 0; }
.main-menu a { text-transform: uppercase; font-weight: 700; font-size: 1.05rem; color: var(--menu-color); transition: color .2s ease; }
.menu-icons { display: flex; gap: 1.2rem; margin-left: 2rem; }
/* 1.6rem icon + padding = 44px tap target */
.icon-btn { position: relative; width: 2.75rem; height: 2.75rem; margin: -.6rem; padding: .6rem; border: 0; background: none; cursor: pointer; color: var(--menu-color); transition: color .2s ease, transform .16s var(--ease-out); }
.icon-btn svg { width: 100%; height: 100%; }
.icon-btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .main-menu a:hover { color: var(--accent); }
  .icon-btn:hover { color: var(--accent); }
}
.cart-dot { position: absolute; top: .5rem; right: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: none; }
.cart-dot.visible { display: block; }
.burger { display: none; }

/* ---------- Menu drawer (circle reveal) ---------- */
.menu-drawer {
  position: fixed; inset: 0; z-index: 20000;
  padding: calc(26px + env(safe-area-inset-top, 0px)) var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  pointer-events: none; overflow: hidden; color: var(--cream);
}
.menu-drawer::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: -1;
  min-width: 150vmax; aspect-ratio: 1; border-radius: 50%; background: var(--ink);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .8s var(--ease) .4s;
}
.menu-drawer.open { pointer-events: all; }
.menu-drawer.open::before { transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.menu-drawer > * { opacity: 0; transition: opacity .4s var(--ease); }
.menu-drawer.open > * { opacity: 1; transition-delay: .6s; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-top .icon-btn { color: var(--cream); }
.drawer-links { display: flex; flex-direction: column; gap: 1.6rem; }
.drawer-links a { font-family: var(--title-font); font-weight: 800; font-size: 5vh; text-transform: uppercase; }
.drawer-images { height: 180px; border-radius: 1.5rem; overflow: hidden; }
.drawer-strip { display: flex; height: 100%; }
.drawer-strip img { min-width: 100%; height: 100%; object-fit: cover; animation: strip 15s infinite var(--ease); }
@keyframes strip {
  0%, 33% { transform: translateX(0); }
  36%, 66% { transform: translateX(-100%); }
  69%, 97% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

/* ---------- Cart drawer ---------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 20000; width: min(480px, 92vw); height: 100%;
  background: var(--white); display: flex; flex-direction: column;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  /* close fast, open a bit slower */
  transform: translateX(100%); transition: transform .35s var(--ease-drawer);
}
.cart-drawer.open { transform: none; transition-duration: .6s; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--deep); }
.drawer-head h2 { margin: 0; font-family: var(--title-font); text-transform: uppercase; }
.drawer-head .icon-btn { color: var(--ink); }
.cart-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
/* new rows fade/slide in (no JS needed) */
.cart-item { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
@starting-style { .cart-item { opacity: 0; transform: translateY(8px); } }
.cart-empty { opacity: .6; }
.cart-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; }
.cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 1rem; }
.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.cart-item-info strong { font-family: var(--title-font); text-transform: uppercase; font-size: 1.05rem; }
.cart-item-info button { align-self: flex-start; border: 0; background: none; padding: 0; text-decoration: underline; cursor: pointer; font-family: var(--title-font); }
.cart-foot .fill-btn { margin-top: 1rem; }

/* Checkout steps inside the drawer: cart → details → done */
[hidden] { display: none !important; }
.step { display: none; flex: 1; min-height: 0; flex-direction: column; }
.cart-drawer[data-step="cart"] .step-cart,
.cart-drawer[data-step="details"] .step-details,
.cart-drawer[data-step="done"] .step-done { display: flex; }
.step-cart .cart-items { flex: 1; }
.pay-note { margin: 0; font-size: .95rem; opacity: .75; }
.step-details { gap: .9rem; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1rem; }
.step-details label { display: flex; flex-direction: column; gap: .35rem; font-family: var(--title-font); font-weight: 700; font-size: .95rem; }
.step-details small { font-weight: 400; opacity: .6; }
.step-details input, .step-details textarea {
  font: inherit; font-family: var(--text-font); font-weight: 400; font-size: 16px;
  padding: .8rem 1rem; border: 2px solid #e6dccd; border-radius: 14px; background: var(--cream); color: var(--ink);
}
.step-details input:focus, .step-details textarea:focus { outline: none; border-color: var(--deep); }
.back-to-cart { align-self: flex-start; border: 0; background: none; padding: .4rem 0; font-family: var(--title-font); font-weight: 700; cursor: pointer; }
.checkout-error { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #fbe3dd; color: #8a2b1d; font-weight: 600; line-height: 1.3; }
.checkout-sum { font-family: var(--title-font); font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.step-done { align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.done-logo { width: 140px; }
.step-done h3 { font-family: var(--title-font); font-size: 2rem; margin: 0; }
.step-done p { line-height: 1.5; }
.step-done .fill-btn { width: 100%; }

/* Sold out / closed */
.fill-btn.disabled { background: #e9e1d4; border-color: #e9e1d4; cursor: not-allowed; }
.fill-btn.disabled::before { display: none; }
.fill-btn.disabled button { cursor: not-allowed; opacity: .7; }
.sold-out .product-img img { filter: grayscale(.7); opacity: .75; }
.sold-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3; padding: .45rem .8rem; border-radius: 100px;
  background: var(--ink); color: var(--cream); font-family: var(--title-font); font-weight: 700; font-size: .85rem; text-transform: uppercase;
}
.closed-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translateX(-50%); width: min(640px, calc(100% - 32px));
  padding: 1rem 1.4rem; border-radius: 18px; background: var(--ink); color: var(--cream);
  font-family: var(--title-font); font-weight: 600; text-align: center; line-height: 1.3;
  box-shadow: 0 10px 30px #0003;
}
.checkout .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 .8rem .2rem; }

/* ---------- Mouse-follow fill button ---------- */
.fill-btn { position: relative; overflow: hidden; border-radius: 100px; background: var(--accent); border: 2px solid var(--accent); cursor: pointer; }
.fill-btn::before {
  content: ""; position: absolute; z-index: 1; width: 200%; aspect-ratio: 1; border-radius: 50%;
  top: var(--my, 50%); left: var(--mx, 50%); background: var(--cream);
  transform: translate(-50%, -50%) scale(0); transition: transform 1.2s var(--ease);
}
.fill-btn button {
  position: relative; z-index: 2; width: 100%; border: 0; background: none; cursor: pointer;
  font-family: var(--title-font); font-weight: 700; text-transform: uppercase; font-size: 1.3rem;
  padding: 1.1rem 1rem 1rem; color: var(--ink); transition: transform .8s var(--ease), color .4s ease;
}
.fill-btn { transition: transform .16s var(--ease-out); }
.fill-btn:active { transform: scale(.97); }
.fill-btn.dark { background: var(--ink); border-color: var(--ink); }
.fill-btn.dark button { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .fill-btn:hover::before { transform: translate(-50%, -50%) scale(1.05); }
  .fill-btn:hover button { transform: scale(.9); }
  .fill-btn.dark:hover button { color: var(--ink); }
}

/* ---------- Bite mask hover ---------- */
.bite { transition: transform .4s var(--ease); }
.bite:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .bite:hover {
    -webkit-mask-image: radial-gradient(circle at 98% 32%, #0000 15%, #000 15.5%), radial-gradient(circle at 72% 2%, #0000 17%, #000 17.5%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle at 98% 32%, #0000 15%, #000 15.5%), radial-gradient(circle at 72% 2%, #0000 17%, #000 17.5%);
    mask-composite: intersect;
  }
}

/* ---------- Hero ---------- */
.hero-wrap {
  position: relative; display: flex; align-items: flex-end; width: 100%;
  height: 100vh; height: 100svh; overflow: hidden; padding: var(--gutter); isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.hero-content { width: 100%; }
.hero-heading-wrap { position: relative; width: 85%; }
.hero-heading {
  margin: 0; color: var(--cream); font-family: var(--title-font); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.03em; font-size: 11vw; line-height: .82;
}
.hero-float { position: absolute; bottom: 20%; left: 100%; }
.hero-float-inner {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; width: fit-content;
  padding: 3rem 2.4rem; border-radius: 50%; background: var(--accent); color: var(--ink);
  font-family: var(--title-font); font-weight: 700; font-size: 1.8rem; text-transform: uppercase;
  transform: rotate(30deg); cursor: pointer;
}
.hero-float-inner:active { transform: rotate(10deg) scale(.86); }
@media (hover: hover) and (pointer: fine) {
  .hero-float-inner:hover { transform: rotate(10deg) scale(.9); }
}

/* ---------- Intro ---------- */
.intro { position: relative; display: flex; gap: 2rem; justify-content: space-between; padding-top: 8rem; padding-bottom: 8rem; }
.intro-heading { width: 60%; color: var(--deep); }
.intro-heading .section-title { font-size: clamp(2rem, 4.4vw, 4.4rem); }
.intro-text { width: 36%; }
.intro-text p { font-size: 1.5rem; color: var(--deep); margin-top: .5rem; }
.intro-icon { position: absolute; width: 150px; top: 72%; left: 8%; }

/* ---------- Product card ---------- */
.product { width: 100%; }
.product-img { position: relative; display: block; aspect-ratio: 1; border-radius: 1.5rem; overflow: hidden; margin-bottom: 1.5rem; background: #e9dfcf; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease); }
.product-img-2 { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
/* Tags burst out from the centre (small absolute elements, so top/left is cheap) */
.tag {
  position: absolute; top: 50%; left: 50%; z-index: 2; padding: 8px 12px; border-radius: 200px;
  background: var(--accent); color: var(--ink); font-size: .9rem; font-weight: 700; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) scale(.4);
  transition: top .8s var(--ease), left .8s var(--ease), transform .8s var(--ease), opacity .25s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .product-img:hover > img { opacity: 0; }
  .product-img:hover .product-img-2 { opacity: 1; }
  .product-img:hover .tag { opacity: 1; top: var(--top); left: var(--left); transform: translate(-50%, -50%) scale(1) rotate(var(--rot)); }
  .product-img:hover .tag:nth-of-type(2) { transition-delay: 40ms; }
  .product-img:hover .tag:nth-of-type(3) { transition-delay: 80ms; }
}
.product-title { font-family: var(--title-font); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; margin: 0 0 .6rem; }
.meta { font-size: .9rem; }
.sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); margin: 0 .5rem .2rem; vertical-align: middle; }
.product-row { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }
.price { font-weight: 700; font-size: 1.3rem; }
.qty { display: flex; align-items: center; }
.qty input { width: 3.4rem; border: 0; background: none; text-align: center; font-family: var(--title-font); font-weight: 600; font-size: 1.6rem; pointer-events: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-btn { width: 2.8rem; aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.qty-btn.minus { background: var(--deep); color: var(--cream); }
.qty-btn.plus { background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .qty-btn:hover { transform: rotate(15deg); }
  .qty-btn:hover:active { transform: rotate(15deg) scale(.9); }
}

/* ---------- Bestsellers ---------- */
.bestsellers { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 132vh; overflow: hidden; }
.bestsellers-grid { display: flex; justify-content: space-between; gap: 2rem; width: 100%; }
.arch-card { flex-basis: 31%; padding: 3rem 2.5rem 2.5rem; border: 4px solid var(--deep); border-radius: 500px 500px 5rem 5rem; background: var(--cream); }
.bestsellers-back { position: absolute; z-index: -1; top: 50%; left: 50%; width: 130%; transform: translate(-50%, -50%) rotate(-10deg); }

/* ---------- Marquee ---------- */
.marquee { margin: 2rem 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 20s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 34s; }
.marquee-track span { font-family: var(--title-font); font-weight: 900; text-transform: uppercase; font-size: 8rem; margin: 1rem; color: var(--deep); }
.marquee-track .outline { color: transparent; -webkit-text-stroke: 2px var(--deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Window image (arched reveal) ---------- */
/* The arch "opens" from a small window at the bottom-centre.
   Done with clip-path (no layout per frame) instead of animating width/height. */
.win { --win-w: 30vw; width: var(--win-w); }
.win-limit {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 500px 500px 5rem 5rem;
  clip-path: inset(60% 40% 0% 40% round 500px 500px 80px 80px);
}
.win.static .win-limit { clip-path: none; }
.win-img { position: absolute; inset: 0; }
.win-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.win.static .win-img img { transform: none; }

/* ---------- Arches ---------- */
.arches { padding: 20px 0; margin: 3rem 0; text-align: center; }
.arches-heading { padding: 0 1rem; margin-bottom: 3rem; position: relative; z-index: 1; }
.arches-container { overflow: hidden; }
.arches-track { display: flex; align-items: flex-end; gap: 1.5rem; width: max-content; animation: marquee 40s linear infinite; }
.arches-track .win { --win-w: 20vw; height: calc(20vw + var(--r, 0) * 5vw); }
.arch-icon { width: 120px; align-self: center; }

/* ---------- Tabs browser ---------- */
.browser { padding-top: 6rem; }
.tabs { display: flex; gap: 1rem; }
.tab { position: relative; overflow: hidden; border: 0; padding: 0; background: none; border-radius: 100px; cursor: pointer; isolation: isolate; }
.tab-label { display: block; padding: 1rem 2rem; border: 2px solid var(--ink); border-radius: 100px; font-family: var(--title-font); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; transition: color .8s var(--ease); }
.tab-back { position: absolute; top: 50%; left: 50%; z-index: -1; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform-origin: top left; transform: scale(1.05) translate(75%, 50%) rotate(15deg); transition: transform .8s var(--ease); }
.tab { transition: transform .16s var(--ease-out); }
.tab:active { transform: scale(.97); }
.tab.selected .tab-back { transform: scale(1.05) translate(-50%, -50%); }
.tab.selected .tab-label { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover .tab-back { transform: scale(1.05) translate(-50%, -50%); }
  .tab:hover .tab-label { color: var(--cream); }
}
.tab-panel { display: none; }
.tab-panel.open { display: block; }
.browser-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8%; row-gap: 3rem; margin: 4rem 0; }
.browser-item { overflow: hidden; padding-bottom: 4px; }

/* ---------- Testimonials ---------- */
.testimonials-scroller { overflow: hidden; margin: 6rem 0; }
.testimonials-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.testimonial { width: 480px; margin-right: 4vw; padding: 3rem; border-radius: 3rem; background: var(--deep); color: var(--cream); }
.testimonial:nth-child(2n) { background: var(--ink); }
.quote-mark { font-family: var(--title-font); font-size: 6rem; margin: 0 0 -2.5rem; color: var(--accent); }
.testimonial p { font-size: 1.15rem; }
.source { font-family: var(--title-font); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- CTA ---------- */
.cta { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.cta-image { position: relative; margin: 8rem 0 10rem; }
.cta-image .win { aspect-ratio: .75; }
.cta-button {
  position: absolute; z-index: 2; bottom: 0; left: 50%;
  border-radius: 50%; overflow: hidden; background: var(--accent);
  outline: 8px solid var(--cream); border: 5px solid transparent; transition: border-color .8s var(--ease);
}
.cta-button::before {
  content: ""; position: absolute; width: 200%; aspect-ratio: 1; border-radius: 50%; background: var(--cream);
  top: var(--my, 50%); left: var(--mx, 50%); transform: translate(-50%, -50%) scale(0); transition: transform 1.2s var(--ease);
}
.cta-button a:active { transform: scale(.9); transition-duration: .16s; }
.cta-button a {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  padding: 2rem; font-family: var(--title-font); font-weight: 800; font-size: 1.6rem; text-transform: uppercase;
  transition: transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cta-button:hover { border-color: var(--accent); }
  .cta-button:hover::before { transform: translate(-50%, -50%) scale(1.5); }
  .cta-button:hover a { transform: scale(.9); }
}
.cta-path { position: absolute; bottom: 0; left: 50%; width: 110%; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.cta-path text { font-family: var(--title-font); font-weight: 800; font-size: 20px; text-transform: uppercase; fill: var(--deep); }
.cta-text { width: 42%; text-align: center; }

/* ---------- Newsletter ---------- */
.newsletter { padding-bottom: 8rem; border-radius: 0 0 2rem 2rem; background: var(--cream); }
.newsletter-card { position: relative; width: 60%; min-width: 600px; margin: 0 auto; padding: 3rem 4rem; border-radius: 2rem; background: var(--deep); color: var(--cream); display: flex; flex-direction: column; align-items: center; text-align: center; }
.newsletter-card h2 { font-family: var(--title-font); font-weight: 800; text-transform: uppercase; font-size: 3.6rem; margin: 0 0 1rem; }
.news-form { display: flex; gap: 6px; width: 70%; min-width: 320px; margin: 1rem 0; }
.news-form input { flex: 1; border: 0; outline: 0; border-radius: 100px; padding: 1rem 1.3rem .9rem; background: var(--accent); color: var(--ink); font-family: var(--title-font); font-size: 16px; /* <16px zooms the page on iOS */ text-transform: uppercase; }
.news-form input::placeholder { color: var(--ink); opacity: .7; }
.news-form .fill-btn button { font-size: 1rem; padding: 1rem 1.6rem .9rem; }
.float-img { position: absolute; width: 140px; transform: translate(-50%, -50%); }
.float-img.left { left: 0; top: 20px; }
.float-img.right { left: 100%; top: 75%; }

/* ---------- Footer (reveal) ---------- */
.footer-space { pointer-events: none; }
.footer-wrap { pointer-events: all; }
.footer-wrap.fixed { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1; }
footer { background: var(--ink); color: var(--cream); padding-top: 4rem !important; padding-bottom: 1rem !important; }
footer a { transition: color .6s var(--ease); }
footer a:hover { color: var(--accent); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; font-family: var(--title-font); }
.footer-top > div a { display: block; margin-top: .5rem; }
.footer-menu li { margin-top: 1rem; }
.footer-menu a { font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.footer-big { container-type: inline-size; padding-top: 2rem; }
.footer-big span { display: block; font-family: var(--title-font); font-weight: 900; text-transform: uppercase; font-size: 23cqw; letter-spacing: -.04em; line-height: .85; margin-left: -.5cqw; }
.footer-bottom { display: flex; justify-content: space-between; font-family: var(--title-font); padding-top: 1rem; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root { font-size: 14px; }
  .main-menu { display: none; }
  .burger { display: block; }
  .curtain { display: none; }
  .hero-wrap { height: 80vh; height: 80svh; padding-bottom: 6rem; }
  .hero-heading-wrap { width: 100%; display: flex; flex-direction: column-reverse; gap: 1rem; }
  .hero-heading { font-size: 16vw; }
  .hero-float { position: static; display: flex; justify-content: flex-end; }
  .hero-float-inner { font-size: 1.3rem; padding: 1.6rem 1.3rem; }
  .intro { flex-direction: column; gap: 0; padding-top: 5rem; padding-bottom: 6rem; }
  .intro-heading, .intro-text { width: 100%; }
  .intro-icon { width: 80px; top: auto; bottom: 0; left: auto; right: var(--gutter); }
  .bestsellers { min-height: 0; padding-top: 4rem; padding-bottom: 4rem; }
  .bestsellers-grid { flex-direction: column; gap: 2rem; }
  .arch-card { padding: 2.5rem 1.6rem 1.6rem; }
  .bestsellers-back { width: 160%; }
  .marquee-track span { font-size: 5rem; }
  .arches-track .win { --win-w: 60vw; height: calc(60vw + var(--r, 0) * 15vw); }
  .arch-icon { width: 80px; }
  .browser-grid { grid-template-columns: 1fr; }
  .tab-label { padding: .8rem 1.2rem; font-size: 1.2rem; }
  .testimonial { width: 320px; padding: 2rem; }
  .cta-image .win { --win-w: 65vw; }
  .cta-text { width: 100%; }
  .newsletter-card { min-width: 0; width: 100%; padding: 2rem; }
  .newsletter-card h2 { font-size: 2rem; }
  .news-form { width: 100%; min-width: 0; flex-direction: column; }
  .float-img { display: none; }
  .footer-top, .footer-bottom { flex-direction: column; }
  .footer-bottom { gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .arches-track, .testimonials-track, .drawer-strip img { animation: none; }
  .curtain { display: none; }
}