/* ================================================================
   Butter — homepage recreation
   Clean, modifiable stylesheet. Design tokens live in :root.
   ================================================================ */

/* ---- Fonts: Satoshi (Fontshare) — sostituto free 1:1 di ABC Diatype/Die Grotesk ---- */
/* Loaded via <link> in index.html for preconnect + faster paint. */

/* ---- Design tokens ---- */
:root{
  --bg:#FDFDFD;
  --bg-soft:#E1D8CC;     /* darker paper patch */
  --bg-hi:#F2EBE4;       /* lighter paper patch */
  --ink:#1e1e1e;         /* headings */
  --text:#0f0f0f;        /* body text */
  --muted:#8d8d8d;       /* eyebrows / captions */
  --line:#D8CFC1;        /* hairlines (warm) */
  --dark:#161616;        /* dark pill button */
  --dark-2:#2a2a2a;
  --white:#ffffff;

  --display:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --radius:16px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;background:#0a0a0a;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;}
body{scrollbar-width:none;}
/* Custom scrollbar */
#cscroll{position:fixed;top:0;right:0;width:18px;height:100vh;background:#ffffff;z-index:99999;pointer-events:auto;box-shadow:inset 1px 0 0 rgba(0,0,0,.06);}
#cscroll .thumb{position:absolute;left:2px;right:2px;top:0;min-height:40px;background:#ff69b4;border-radius:10px;transition:background .15s;cursor:grab;}
#cscroll .thumb:hover,#cscroll .thumb.drag{background:#ff2d8a;}
#cscroll .thumb.drag{cursor:grabbing;}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;color:var(--ink);letter-spacing:-0.025em;line-height:1.02;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
em{font-style:normal;}

/* ---- Shared type ---- */
.eyebrow{
  font-family:var(--body);
  font-size:14px;
  letter-spacing:0;
  color:rgba(15,15,15,.4);
}
.eyebrow--center{text-align:center;}

/* Section headings — DieGrotesk, left-aligned by default */
.h-xl{font-size:clamp(38px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;}
.h-lg{font-size:clamp(32px,3.6vw,45px);line-height:1.05;letter-spacing:-.02em;}
.h-md{font-size:clamp(28px,3.4vw,45px);line-height:1.05;letter-spacing:-.02em;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);
  font-size:15px;letter-spacing:.02em;
  border-radius:999px;
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
  cursor:pointer;white-space:nowrap;
}
.btn--dark{background:var(--dark);color:#fff;padding:11px 20px;}
.btn--dark:hover{background:#000;transform:translateY(-1px);}
.btn--lg{padding:14px 26px;font-size:16px;}

/* ================================================================
   NAV — Glass Effect + scroll-driven morph
   Phase 1 (--p, 0→1 over first ~130px scroll):
     full-width transparent bar → centered frosted glass pill
   Phase 2 (--p2, 0→1 at "Tutto in un unico posto"):
     glass pill → compact pill with only Accedi / Provala buttons
   ================================================================ */

/* SVG defs host for the glass displacement filter */
.glass-nav-defs{
  position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;
}

/* ---- Chrome wrapper (fixed, drives --p from glass-nav.js) ---- */
.site-chrome{
  --p:0;--p2:0;
  position:fixed;top:0;left:0;right:0;
  z-index:100;background:transparent;
  will-change:transform;
  display:flex;justify-content:center;
}
/* Phase 2: shift nav towards right.
   .home-nav is centered by the flex parent; at p2=1 its width settles at
   300px (760px - 460px, see width calc below). To land the pill flush
   against the right edge (with the same 24px inset used elsewhere) instead
   of stopping at an arbitrary fixed offset, we translate by exactly the
   distance from centered to right-docked: 50vw - 24px(inset) - 150px(half
   the final 300px width). This scales with viewport width, so on wide
   screens the nav actually reaches the edge instead of stalling early. */
.site-chrome .home-nav{
  transition:none;
  /* Final pill width = 760 - 490 = 270px  ·  half = 135  ·  inset = 24 */
  transform:translateX(calc(var(--p2,0) * (50vw - 159px)));
}

/* ---- Glass pill ---- */
.home-nav{
  box-sizing:border-box;
  /* Phase 1: 100% → 760px  ·  Phase 2: 760px → 270px */
  width:calc(100% - var(--p,0)*(100% - 760px) - var(--p2,0)*490px);
  min-width:260px;
  max-width:calc(100% - 24px);
  margin:calc(var(--p,0)*14px) auto 0;
  padding:calc(22px - var(--p,0)*13px) 0;
  border-radius:calc(var(--p,0)*999px);
  border:1px solid rgba(30,30,30,calc(var(--p,0)*0.08));
  background:rgba(244,244,242,calc(var(--p,0)*0.72));
  box-shadow:
    inset 0 0 2px 1px  rgba(255,255,255,calc(var(--p,0)*0.55)),
    inset 0 0 10px 4px rgba(255,255,255,calc(var(--p,0)*0.22)),
    0 1px 3px  rgba(17,17,26,calc(var(--p,0)*0.04)),
    0 12px 40px rgba(17,17,26,calc(var(--p,0)*0.06*var(--p,0)));
}

/* Transparent at the very top */
.site-chrome:not(.is-condensed) .home-nav{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Frost fading in with --p */
.site-chrome.is-condensed .home-nav{
  -webkit-backdrop-filter:blur(calc(var(--p,0)*9px)) saturate(calc(1 + var(--p,0)*0.45))!important;
  backdrop-filter:blur(calc(var(--p,0)*9px)) saturate(calc(1 + var(--p,0)*0.45))!important;
}

/* Full liquid-glass refraction once scrub is nearly done */
.site-chrome.nav-liquid .home-nav{
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.05)!important;
  backdrop-filter:var(--glass-filter,blur(14px) saturate(1.8) brightness(1.05))!important;
}

/* Accessibility: reduced transparency → solid background */
@media(prefers-reduced-transparency:reduce){
  .home-nav{
    background:var(--bg)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* ---- Inner flex layout ---- */
.nav-inner{
  width:100%;box-sizing:border-box;
  padding:0 calc(12px + var(--p,0)*14px);
  display:flex;align-items:center;
  gap:calc(24px*(1 - var(--p2,0)));
}

/* ---- Brand (logo + dots) ---- */
.nav__brand{
  display:flex;align-items:center;gap:25px;
  /* Phase 2: collapse to 0 */
  max-width:calc(300px*(1 - var(--p2,0)));
  opacity:calc(1 - var(--p2,0)*2);
  overflow:hidden;white-space:nowrap;flex-shrink:0;
}
.nav__logo{
  font-family:var(--display);
  font-style:normal;font-weight:800;
  font-size:calc(28px - var(--p,0)*4px);
  color:#000;letter-spacing:-.02em;line-height:1;
  text-decoration:none;
}
/* ---- Brand word inside nav logo (JustSp[♥]ilMe) ---- */
.nav__logo.brand-word{
  display:inline-flex;align-items:center;gap:.02em;
  letter-spacing:-.03em;
  padding:0;
}
.nav__logo.brand-word .bw-pink{color:#FF69B4;text-shadow:none;}
.nav__logo.brand-word .chip.chip--o-heart{
  display:inline-flex;
  width:.86em;height:.86em;margin:0 .02em;
  border-radius:0;overflow:visible;
  background:transparent;box-shadow:none;
  transform:translateY(.08em) rotate(-6deg);
  transform-origin:50% 60%;
}
.nav__logo.brand-word .chip.chip--o-heart img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 8px rgba(255,105,180,.28));
}
.nav__more{
  display:flex;flex-direction:column;gap:3px;
  width:22px;height:26px;border:none;background:transparent;
  align-items:center;justify-content:center;cursor:pointer;
}
.nav__more span{width:3.5px;height:3.5px;border-radius:50%;background:var(--ink);}

/* ---- Center links ---- */
.nav__links{
  display:flex;gap:calc(25px - var(--p,0)*5px);
  /* Phase 2: collapse to 0 */
  max-width:calc(500px*(1 - var(--p2,0)));
  opacity:calc(1 - var(--p2,0)*2);
  overflow:hidden;white-space:nowrap;flex-shrink:1;
}
.nav__links a{
  font-family:var(--display);
  font-size:calc(18px - var(--p,0)*2px);
  color:var(--ink);transition:opacity .2s ease;
}
.nav__links a:hover{opacity:.6;}

/* ---- Right group (Accedi + CTA) ---- */
.nav__right{
  display:flex;align-items:center;gap:16px;
  /* Phase 2: grey pill fades out, buttons stand alone in glass */
  background:rgba(237,237,237,calc(1 - var(--p2,0)));
  border-radius:calc(16px - var(--p2,0)*4px);
  padding:calc(10px - var(--p2,0)*6px) calc(12px - var(--p2,0)*6px) calc(10px - var(--p2,0)*6px) calc(22px - var(--p2,0)*16px);
  margin-left:auto;flex-shrink:0;
}
.nav__login{
  font-family:var(--display);
  font-size:calc(18px - var(--p,0)*2px);
  color:var(--ink);
}
.nav__login:hover{opacity:.6;}
.nav__right .btn--dark{
  font-size:calc(16px - var(--p,0)*1px);
  padding:10px 18px;border-radius:11px;
}

/* ---- Nav responsive ---- */
@media(max-width:760px){
  .nav__links{display:none;}
}
@media(max-width:480px){
  .nav__brand{display:none;}
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:120px var(--pad) 60px;
  background:var(--bg);
  overflow:hidden;
}
.hero__content{position:relative;z-index:3;margin-top:8vh;}
.hero__title{
  font-size:clamp(46px,8.2vw,120px);
  letter-spacing:-.03em;line-height:.98;color:#1e1e1e;
}
.hero__sub{
  font-family:var(--body);
  font-size:clamp(15px,1.5vw,18px);
  color:#5a5a5a;margin:22px 0 26px;
}

/* ================================================================
   LOGO MARQUEE
   ================================================================ */
.logos{padding:70px 0 90px;}
.logos__label{
  font-family:var(--display);font-size:clamp(17px,1.5vw,21px);
  color:rgba(15,15,15,.3);text-align:center;margin-bottom:46px;letter-spacing:-.01em;
}
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;align-items:center;gap:70px;width:max-content;will-change:transform;}
.logos .marquee__track img{
  height:30px;width:auto;object-fit:contain;
  filter:brightness(0);opacity:.92;
  flex:0 0 auto;
}

/* ================================================================
   STATEMENT (kinetic headline + inline video chips)
   ================================================================ */
.statement{
  padding:clamp(90px,14vh,180px) var(--pad);
  max-width:1180px;margin:0 auto;text-align:center;
}
.statement__text{
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,74px);
  line-height:1.14;letter-spacing:-.02em;color:#1c1c1c;
  display:flex;flex-wrap:wrap;gap:.08em .22em;justify-content:center;align-items:center;
}
.statement__text .w{display:inline-block;position:relative;}

/* ---- Brand word: JustSp[♥]ilMe with the heart standing in for the O ---- */
.statement__text .brand-word{
  display:inline-flex;align-items:baseline;gap:.02em;
  font-weight:800;letter-spacing:-.03em;
  padding:.02em .18em;
}
.statement__text .brand-word .bw-pink{color:#FF69B4;text-shadow:none;}
.statement__text .brand-word .chip--o-heart{
  width:.86em;height:.86em;margin:0 .02em;border-radius:0;overflow:visible;
  background:transparent;box-shadow:none;
  transform:translateY(.12em) rotate(-6deg);
  transform-origin:50% 60%;
}
.statement__text .brand-word .chip--o-heart img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(255,105,180,.28));
}

/* ---- Accent word "migliore" — hand-drawn swash underline in tricolor green ---- */
.statement__text .w--accent{
  color:#1c1c1c;font-style:italic;padding:0 .18em;position:relative;
}
.statement__text .w--posto{position:relative;display:inline-block;}
.statement__text .w--posto .chip.chip--hand{
  position:absolute;
  left:calc(100% - 60px);
  top:auto;bottom:-.1em;
  transform-origin:0 100%;
  transform:rotate(8deg);
  margin:0;
  width:4.3em;height:2.4em;
  overflow:visible;
}
.statement__text .w--posto .chip.chip--hand img{
  position:static;
  width:100%;height:100%;
  object-fit:contain;object-position:left bottom;
  display:block;
  max-width:none;
}
.statement__text .chip{
  display:inline-flex;vertical-align:middle;
  width:1.5em;height:1.02em;border-radius:.28em;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  transform:translateY(.02em);
}
.statement__text .chip img,
.statement__text .chip video{width:100%;height:100%;object-fit:cover;}

/* ---- Chip: torn-paper eyes (transparent, no clean edge) ---- */
.statement__text .chip.chip--torn{
  width:2.2em;height:1.5em;border-radius:0;overflow:visible;
  background:transparent;box-shadow:none;
  transform:translateY(.08em) rotate(-2deg);
  mix-blend-mode:multiply;   /* let the near-white paper blend into page cream */
}
.statement__text .chip.chip--torn img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* soft radial mask blurs the rectangular edges into transparency */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 42%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.35) 82%, transparent 96%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 42%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.35) 82%, transparent 96%);
  filter:blur(.3px);
}
/* ---- Chip: Italian tricolor hand (portrait, transparent) ---- */
.statement__text .chip.chip--hand{
  display:inline-block;
  width:0;height:0;border-radius:0;overflow:visible;
  background:transparent;box-shadow:none;
  transform:rotate(8deg);
  transform-origin:0 100%;
  margin:0 0 0 .08em;
  vertical-align:baseline;
  line-height:0;
  filter:none;
  position:relative;
}
.statement__text .chip.chip--hand img{
  position:absolute;left:0;bottom:-.35em;
  width:auto;height:3.5em;
}
.statement__text .chip.chip--hand img{filter:none;box-shadow:none;}
.statement__text .chip.chip--hand img{object-fit:contain;}




/* ================================================================
   ALL-IN-ONE EDITOR (feature cards)
   ================================================================ */
.editor{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad) 120px;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:44px;flex-wrap:wrap;
}
.section-head .eyebrow{margin-bottom:18px;}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;}
/* media-only card; title + copy sit BELOW on the page, no white box */
.feature-card .media{
  aspect-ratio:1/1.32;border-radius:22px;overflow:hidden;position:relative;
}
.feature-card .media video,.feature-card .media img{width:100%;height:100%;object-fit:cover;}
.feature-card h3{font-family:var(--display);font-size:28px;color:var(--ink);margin:24px 0 12px;letter-spacing:-.02em;}
.feature-card p{font-family:var(--body);font-size:15px;color:#9a9a9a;line-height:1.5;}

/* ================================================================
   TEMPLATES CAROUSEL
   ================================================================ */
.templates{padding:60px 0 120px;}
.templates__head{max-width:var(--maxw);margin:0 auto 46px;padding:0 var(--pad);text-align:center;}
.templates__head .eyebrow{margin-bottom:16px;}
.marquee--cards .marquee__track{gap:20px;}
.tpl-card{
  flex:0 0 auto;width:260px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:#111;position:relative;
}
.tpl-card video,.tpl-card img,.tpl-card .tpl-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tpl-card .tpl-placeholder{background:#fff;}
.tpl-card .meta{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;}
.tpl-card .meta .t{font-family:var(--display);font-size:18px;line-height:1.1;}
.tpl-card .meta .c{font-family:var(--body);font-size:12px;opacity:.8;margin-top:2px;}
.tpl-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5));z-index:1;}
.templates__foot{text-align:center;margin-top:50px;}

/* FREE-SPACE cards — wider than filled cards (text needs room) but same
   height so they line up in the marquee. Content mirrors free-space-static.html
   with editorial typography (16px scale) close to the reference. */
.tpl-card--free{
  width:400px;aspect-ratio:auto;height:462px;
  background:#FCFCFC;color:#1a1a1a;cursor:default;border-radius:18px;
}
.tpl-card--free::after{display:none;} /* no dark bottom-gradient */
.tpl-card--free .free-inner{
  position:absolute;inset:0;padding:28px 30px 24px;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:#1a1a1a;
}
.tpl-card--free .free-h1{
  font-size:15px;font-weight:600;margin:0 0 18px 0;color:#1a1a1a;letter-spacing:.01em;
}
.tpl-card--free .free-bio{padding-left:26px;margin-bottom:14px;}
.tpl-card--free .free-bio p{font-size:13px;line-height:1.5;margin:0 0 9px 0;color:#1a1a1a;}
.tpl-card--free .free-bio p:last-child{margin-bottom:0;}
.tpl-card--free a{color:#1a1a1a;text-decoration:underline;text-decoration-color:#bbb;text-underline-offset:2px;cursor:pointer;}
.tpl-card--free a:hover{text-decoration-color:#1a1a1a;}
.tpl-card--free .no-underline{text-decoration:none;}
.tpl-card--free .no-underline:hover{text-decoration:none;}
.tpl-card--free .underline-text,
.tpl-card--free .underline-socials{
  text-decoration:underline;text-decoration-color:#bbb;text-underline-offset:2px;
}
.tpl-card--free .free-section{margin-bottom:0;}
.tpl-card--free .free-h2{font-size:15px;font-weight:600;margin:0 0 6px 0;color:#1a1a1a;}
.tpl-card--free .list-item{padding:2px 0 2px 26px;font-size:13px;line-height:1.5;}
.tpl-card--free .final-note{padding-left:26px;font-size:12px;line-height:1.45;margin:8px 0 0 0;color:#1a1a1a;}
.tpl-card--free .hint-wrapper{display:inline;white-space:nowrap;}
.tpl-card--free .hint{display:inline;font-size:12px;font-weight:400;color:#1a1a1a;visibility:hidden;transition:visibility .25s ease;}
.tpl-card--free .hint-wrapper:hover .hint{visibility:visible;}
.tpl-card--free .hint.copied{visibility:visible !important;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .nav__links{display:none;}
}
@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none!important;}
  *{scroll-behavior:auto!important;}
}


/* ================================================================
   JustSpoilMe feature-card animations (ported from the old site)
   ================================================================ */
/* ==================================================================== */
/*  SEZIONE 2 — SFRUTTA IL TUO LINK (inspiration-to-creation)            */
/* ==================================================================== */
.feature-grid--anim{
  --bg-card: #E8E1D6;
  --bg-panel: #F2EBE4;
  --bg-highlight: #E1D8CC;
  --text-primary: #141414;
  --text-secondary: #656565;
  --text-tertiary: #a4a4a4;
  --icon-bg: #f5f3ef;
  --icon-border: #eae6de;
  --pill-bg: #17171a;
  --pill-circle-bg: #3a3a40;
  --toolbar-bg: #17171a;
  --toolbar-btn: #2a2a30;
  --send-blue: #cd950c;
  --caret: #141414;
  --radius-card: 28px;
  --radius-panel: 20px;
  --shadow-panel: 0 24px 40px -12px rgba(20,20,26,0.14), 0 4px 10px -2px rgba(20,20,26,0.05);
  --shadow-float: 0 18px 30px -8px rgba(0,0,0,0.28);
  font-family: 'Hanken Grotesk','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding: 96px 32px 80px;
}
.feature-grid--anim svg { display: block; }

.c1-stage { position: relative; width: 100%; height: 66px; overflow: visible; }
.toolbar { position: absolute; left: 50%; top: 50%; }
.toolbar{
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--toolbar-bg); border-radius: 999px;
  padding: 6px 8px; white-space: nowrap;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.5,0,.15,1), opacity .3s ease;
}
.tb-btn{
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-size: 15px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; max-width: 260px;
  transition: opacity .4s ease, background .4s ease,
              max-width .5s cubic-bezier(.5,0,.15,1),
              padding .5s cubic-bezier(.5,0,.15,1);
}
.tb-btn.save { background: #fff; color: #141414; }
.tb-btn.copy { background: transparent; }
.c1-stage.zoom .toolbar { transform: translate(calc(-50% + var(--shift, 0px)), -50%) scale(1.9); }
.c1-stage.zoom .tb-btn.copy { background: var(--toolbar-btn); }
.c1-stage.zoom .tb-btn:not(.copy) { opacity: .3; }
.copy-text { white-space: pre; }
.copy-ic { display: inline-flex; align-items: center; }
.copy-ic .ic-copy { transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.6,.5,1); transform-origin: center; }
.copy-ic .ic-tick { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .34s ease .08s; }
.copy-ic .ic-ring { stroke-dasharray: 45; stroke-dashoffset: 45; opacity: 0; transition: stroke-dashoffset .5s cubic-bezier(.5,0,.15,1), opacity .2s ease; }
.c1-stage.zoom .copy-ic .ic-copy { opacity: 0; transform: scale(.3); }
.c1-stage.zoom .copy-ic .ic-tick { stroke-dashoffset: 0; }
.c1-stage.done .copy-ic .ic-ring { opacity: 1; stroke-dashoffset: 0; }
.c1-stage.solo .toolbar { gap: 0; transform: translate(-50%, -50%) scale(1); }
.c1-stage.solo .tb-btn.copy { background: transparent; }
.c1-stage.solo .tb-btn:not(.copy) { max-width: 0; padding-left: 0; padding-right: 0; margin: 0; opacity: 0; overflow: hidden; }

.c3s{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#fbfaf8 0%,#efece4 100%);
  --pf-ink:#2C0A46;--pf-accent:#FF2D8C}
.cam{transform:translate(0,0) scale(1);transform-origin:50% 50%;will-change:transform;transition:transform 1.05s cubic-bezier(.5,0,.15,1)}
.c3.push .cam{transform:translate(0,-2px) scale(1.03);transition:transform 3.2s cubic-bezier(.35,0,.4,1)}
.c3.pan .cam{transform:translate(-14px,5px) scale(1.09);transition:transform .9s cubic-bezier(.5,0,.15,1)}
.zoom{transform:scale(1);transform-origin:50% 6.5%;will-change:transform;transition:transform 1.05s cubic-bezier(.5,0,.15,1)}
.c3.zoomurl .zoom{transform:scale(1.85);transform-origin:50% 5%}
.c3.zoomgifts .zoom{transform:scale(1.78);transform-origin:50% 60%}
.c3.giftout .zoom{transform:scale(1);transform-origin:50% 60%}
.phone{position:relative;width:238px;height:485px;transform:scale(.644);transform-origin:50% 50%}
@media (max-width: 900px){ .phone{transform:scale(.644)} }
.phone .bezel{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none;filter:drop-shadow(0 26px 40px rgba(26,10,40,.32))}
.screen{position:absolute;left:3.9%;right:3.9%;top:1.9%;bottom:1.9%;border-radius:26px;overflow:hidden;background:#2C0A46;display:flex;flex-direction:column;z-index:1}
.chrome{padding:34px 12px 8px;position:absolute;top:0;left:0;right:0;z-index:7;background:transparent}
.urlpill{display:flex;align-items:center;gap:5px;height:23px;padding:0 10px;border-radius:999px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 6px 16px rgba(20,4,32,.28);
  transition:background .3s ease,box-shadow .34s cubic-bezier(.5,0,.15,1),transform .26s cubic-bezier(.34,1.6,.5,1)}
.c3.go .urlpill{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 2px rgba(255,45,140,.35),0 6px 16px rgba(20,4,32,.28);transform:scale(.985)}
.urlpill svg{flex-shrink:0}
.urltext{font-size:9px;font-weight:600;color:#fff;white-space:pre;text-shadow:0 1px 3px rgba(20,4,32,.5)}
.urltext.empty{color:rgba(255,255,255,.72);font-weight:500}
.u-caret{display:inline-block;width:1px;height:8px;background:#fff;margin-left:1px;vertical-align:-1px;animation:blink 1.05s steps(1) infinite}
.c3.entered .u-caret{opacity:0;animation:none}
.loadbar{position:absolute;left:0;right:0;bottom:2px;height:2px;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:var(--pf-accent);border-radius:2px}
.c3.go .loadbar{transform:scaleX(.7);opacity:1;transition:transform .5s cubic-bezier(.4,0,.6,1),opacity .1s ease}
.c3.entered .loadbar{transform:scaleX(1);opacity:0;transition:transform .34s cubic-bezier(.5,0,.15,1),opacity .3s ease .22s}
.view{flex:1;position:relative;overflow:hidden;background:var(--pf-ink)}
.pages{display:flex;width:200%;height:100%;transform:translateX(0);transition:transform .84s cubic-bezier(.5,0,.15,1)}
.c3.p2 .pages{transform:translateX(-50%)}
.pg{width:50%;flex-shrink:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.pg1{background:#3a1068}
.pg1 .shot{position:absolute;inset:0;background:url('assets/spoil/hero-dog.png') center 24% / cover no-repeat;transform:scale(1.04);transform-origin:50% 36%;transition:transform 5.2s cubic-bezier(.32,0,.42,1)}
.c3.loaded .pg1 .shot{transform:scale(1.13)}
.pg1 .shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,16,104,0) 30%,rgba(58,16,104,.35) 48%,rgba(58,16,104,.75) 64%,rgba(58,16,104,.95) 78%,#3a1068 90%)}
.pf{position:relative;margin-top:auto;padding:0 14px 22px;text-align:center;z-index:2}
.pf-name{font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.05;text-shadow:0 2px 12px rgba(20,4,32,.5)}
.pf-handle{font-size:10px;font-weight:600;color:rgba(255,255,255,.72);margin-top:3px}
.pf-tot{display:inline-flex;align-items:baseline;gap:4px;margin-top:7px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.pf-tot b{font-size:11px;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pf-tot span{font-size:9px;font-weight:600;color:rgba(255,255,255,.7)}
.socials{display:flex;justify-content:center;gap:7px;margin-top:11px}
.soc{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);box-shadow:0 4px 12px -4px rgba(20,4,32,.6);opacity:0;transform:translateY(9px) scale(.86);transition:opacity .22s ease,transform .5s cubic-bezier(.34,1.62,.5,1)}
.c3.loaded .soc{opacity:1;transform:translateY(0) scale(1)}
.c3.loaded .soc:nth-child(1){transition-delay:.30s}
.c3.loaded .soc:nth-child(2){transition-delay:.37s}
.c3.loaded .soc:nth-child(3){transition-delay:.44s}
.c3.loaded .soc:nth-child(4){transition-delay:.51s}
.c3.loaded .soc:nth-child(5){transition-delay:.58s}
.soc img{width:19px;height:19px;border-radius:5px;display:block}
.soc svg{width:16px;height:16px;display:block}
.fade{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .56s cubic-bezier(.34,1.45,.5,1)}
.c3.loaded .fade{opacity:1;transform:translateY(0)}
.c3.loaded .fade.d1{transition-delay:.06s}
.c3.loaded .fade.d2{transition-delay:.14s}
.c3.loaded .fade.d3{transition-delay:.22s}
.pg2{background:linear-gradient(180deg,#4A1470 0%,#2C0A46 100%);padding:60px 13px 0}
.pg2 .wgrid{padding-bottom:16px}
.pg2 h4{font-size:13px;font-weight:800;letter-spacing:-.02em;color:#fff}
.pg2 p{font-size:9px;font-weight:500;color:rgba(255,255,255,.6);margin-top:2px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px auto 0;max-width:200px}
.wcard{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 22px -12px rgba(10,2,18,.7);opacity:0;transform:translateY(14px) scale(.94);transition:opacity .24s ease,transform .54s cubic-bezier(.34,1.5,.5,1),box-shadow .3s ease}
.c3.p2 .wcard{opacity:1;transform:translateY(0) scale(1)}
.c3.p2 .wcard:nth-child(1){transition-delay:.16s}
.c3.p2 .wcard:nth-child(2){transition-delay:.23s}
.c3.p2 .wcard:nth-child(3){transition-delay:.30s}
.c3.p2 .wcard:nth-child(4){transition-delay:.37s}
.c3.giftout .wcard{opacity:1;transform:translateY(0) scale(1)}
.wshot{position:relative;padding-top:76%;background:repeating-linear-gradient(135deg,#e9e9ef 0 6px,#f3f3f7 6px 12px)}
.wshot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 30%,rgba(0,0,0,.22) 100%)}
.wbody{padding:6px 8px 8px}
.wname{font-size:9px;font-weight:700;color:#1C1B1F;letter-spacing:-.01em}
.wprice{font-size:9px;font-weight:600;color:#8A8A8E;margin-top:1px;font-variant-numeric:tabular-nums}
.wdot{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.62);backdrop-filter:blur(8px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 2px 6px rgba(10,2,18,.22);transition:background .3s cubic-bezier(.5,0,.15,1),box-shadow .36s ease,transform .34s cubic-bezier(.34,1.62,.5,1)}
.wdot .plus{transform-origin:center;transition:opacity .16s ease,transform .3s cubic-bezier(.34,1.6,.5,1)}
.wdot .tick{stroke-dasharray:13;stroke-dashoffset:13;transition:stroke-dashoffset .4s cubic-bezier(.5,0,.15,1) .06s}
.c3.pick .wcard.sel{box-shadow:0 0 0 1.5px var(--pf-accent),0 10px 26px -12px rgba(255,45,140,.6)}
.c3.pick .wcard.sel .wdot{background:var(--pf-accent);transform:scale(1.12);box-shadow:0 0 12px rgba(255,45,140,.5)}
.c3.pick .wcard.sel .wdot .plus{opacity:0;transform:scale(.35) rotate(-90deg)}
.c3.pick .wcard.sel .wdot .tick{stroke-dashoffset:0}
.drawer{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 16px 22px;background:linear-gradient(180deg,rgba(44,10,70,0) 0%,rgba(44,10,70,.85) 55%,#2C0A46 100%);transform:translateY(110%);transition:transform .5s cubic-bezier(.34,1.42,.5,1)}
.c3.pick .drawer{transform:translateY(0)}
.dpill{height:40px;border-radius:999px;background:linear-gradient(180deg,#FF4D9E 0%,#FF2D8C 100%);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px -4px rgba(255,45,140,.75)}
.dots{position:absolute;left:0;right:0;bottom:7px;z-index:3;display:flex;gap:5px;justify-content:center;align-items:center}
.dots u{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.34);text-decoration:none;width:16px;transform:scaleX(.3);transform-origin:center;transition:transform .5s cubic-bezier(.34,1.5,.5,1),background .3s ease}
.dots u.on{transform:scaleX(1);background:#fff}
.c3.p2 .dots u:first-child{transform:scaleX(.3);background:rgba(255,255,255,.34)}
.c3.p2 .dots u:last-child{transform:scaleX(1);background:#fff}
.swipe{position:absolute;right:16px;bottom:52px;width:22px;height:22px;border-radius:50%;z-index:5;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:0;transform:translateX(10px)}
.c3.hint .swipe{opacity:1;transform:translateX(0);transition:opacity .22s ease,transform .38s cubic-bezier(.34,1.5,.5,1)}
.c3.hint.p2 .swipe{opacity:0;transform:translateX(-58px);transition:opacity .34s ease .18s,transform .6s cubic-bezier(.5,0,.15,1)}
@media (prefers-reduced-motion: reduce){
  .c3s *{transition:none !important;animation:none !important}
  .swipe,.loadbar{display:none}
}
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

.c2s { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.c2-card { position: relative; background: transparent; border-radius: 0; width: 100%; max-width: none; padding: 20px 22px; box-shadow: none; overflow: hidden; }
.c2-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.c2-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #e4e4e4; }
.c2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c2-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
.c2-handle { font-size: 13px; font-weight: 500; color: var(--text-tertiary); margin-top: 1px; }
.c2-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px; }
.c2-field { position: relative; display: flex; align-items: center; gap: 9px; background: var(--bg-card); border-radius: 12px; padding: 12px 12px 12px 13px; min-height: 48px; box-shadow: inset 0 0 0 1.5px rgba(205,149,12,0); transition: box-shadow .45s cubic-bezier(.5,0,.15,1), background .4s ease; }
.c2.commit .c2-field { box-shadow: inset 0 0 0 1.5px rgba(205,149,12,.5); transition: box-shadow .55s cubic-bezier(.5,0,.15,1) .5s, background .4s ease; }
.c2-link-ic { flex-shrink: 0; display: inline-flex; color: var(--text-tertiary); transition: color .45s ease; }
.c2.commit .c2-link-ic { color: var(--send-blue); transition: color .45s ease .5s; }
.c2-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.c2-text.empty { color: var(--text-tertiary); font-weight: 500; }
.c2-caret { display: inline-block; width: 2px; height: 16px; background: var(--caret); margin-left: 1px; vertical-align: -2px; border-radius: 1px; animation: blink 1.05s steps(1) infinite; }
.c2.commit .c2-caret { opacity: 0; animation: none; }
.c2-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--send-blue); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .22s ease, transform .34s cubic-bezier(.34,1.6,.5,1); }
.c2.commit .c2-check { opacity: 1; transform: scale(1); }
.c2-check .tk { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .38s cubic-bezier(.5,0,.15,1) .12s; }
.c2.commit .c2-check .tk { stroke-dashoffset: 0; }
.c2-share { margin-top: 18px; opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .52s cubic-bezier(.34,1.42,.5,1); }
.c2.share .c2-share { opacity: 1; transform: translateY(0); }
.c2-share-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; background: var(--bg-card); border-radius: 16px; padding: 14px 12px; }
.c2-app { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.c2-app .ic { position: relative; width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 8px 18px -8px rgba(20,20,26,.3), inset 0 0 0 1px var(--icon-border); opacity: 0; transform: translateY(14px) scale(.66); transition: opacity .22s ease, transform .55s cubic-bezier(.34,1.62,.5,1); }
.c2.share .c2-app .ic { opacity: 1; transform: translateY(0) scale(1); }
.c2.share .c2-app:nth-child(1) .ic { transition-delay: .05s; }
.c2.share .c2-app:nth-child(2) .ic { transition-delay: .12s; }
.c2.share .c2-app:nth-child(3) .ic { transition-delay: .19s; }
.c2.share .c2-app:nth-child(4) .ic { transition-delay: .26s; }
.c2-app .ic.ic-kick { background: #0e0e10; }
.c2-app .ic.ic-kick svg { width: 22px; height: 22px; }
.c2-app .ic img { width: 27px; height: 27px; border-radius: 7px; display: block; }
.c2-app .ic svg { width: 25px; height: 25px; display: block; }
.c2-app span { font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.c2-badge { position: absolute; top: -5px; right: -5px; width: 19px; height: 19px; border-radius: 50%; background: #10B981; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 7px rgba(16,185,129,.5), 0 0 0 2px var(--bg-panel); opacity: 0; transform: scale(.2); transition: opacity .2s ease, transform .36s cubic-bezier(.34,1.65,.5,1); }
.c2.sent .c2-app .c2-badge { opacity: 1; transform: scale(1); }
.c2.sent .c2-app:nth-child(1) .c2-badge { transition-delay: .02s; }
.c2.sent .c2-app:nth-child(2) .c2-badge { transition-delay: .11s; }
.c2.sent .c2-app:nth-child(3) .c2-badge { transition-delay: .20s; }
.c2.sent .c2-app:nth-child(4) .c2-badge { transition-delay: .29s; }
.c2.sent .c2-app .ic { transform: translateY(-5px) scale(1.02); box-shadow: 0 13px 24px -8px rgba(20,20,26,.36), inset 0 0 0 1px var(--icon-border); }
.c2.sent .c2-app:nth-child(1) .ic { transition-delay: .02s; }
.c2.sent .c2-app:nth-child(2) .ic { transition-delay: .11s; }
.c2.sent .c2-app:nth-child(3) .ic { transition-delay: .20s; }
.c2.sent .c2-app:nth-child(4) .ic { transition-delay: .29s; }
/* ================================================================
   JustSpoilMe — overrides on top of the ported animation styles
   ================================================================ */

/* Hero rotator — kinetic per-letter (wabi-style)
   Old letters lift + fade UP with stagger; new letters rise + fade IN from below. */
/* wrap — inline-flex baseline, animates its own width smoothly (wabi parity) */
.hero__title .rotator--kinetic{
  position:relative;display:inline-flex;align-items:baseline;
  vertical-align:baseline;overflow:visible;
  color:#FF69B4;font-style:italic;white-space:nowrap;line-height:1.05;
  padding-inline:.05em;
}
.hero__title .rotator--kinetic .rot-measure{
  position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;
  white-space:nowrap;
}
/* current flows in the wrap so baseline stays anchored */
.hero__title .rotator--kinetic .rot-current{
  display:inline-flex;align-items:baseline;white-space:nowrap;
}
/* previous is layered on top, doesn't affect layout */
.hero__title .rotator--kinetic .rot-previous{
  position:absolute;left:0;top:0;display:inline-flex;align-items:baseline;
  white-space:nowrap;pointer-events:none;
}
.hero__title .rotator--kinetic .rot-letter{
  display:inline-block;white-space:pre;
  will-change:transform,opacity,filter;
  margin-right:.06em;
}
.hero__title .rotator--kinetic .rot-letter:last-child{margin-right:0;}
.hero__title .rotator--kinetic .rot-current .rot-letter{
  animation:jsmLetterIn .36s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(60ms + var(--i,0) * 35ms);
}
.hero__title .rotator--kinetic .rot-previous .rot-letter{
  animation:jsmLetterOut .36s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 35ms);
}
@keyframes jsmLetterIn{
  0%  {opacity:0;filter:blur(4px);transform:translateY(.35em);}
  60% {opacity:1;filter:blur(.6px);}
  100%{opacity:1;filter:blur(0);transform:translateY(0);}
}
@keyframes jsmLetterOut{
  0%  {opacity:1;filter:blur(0);transform:translateY(0);}
  100%{opacity:0;filter:blur(4px);transform:translateY(-.35em);}
}
@media(prefers-reduced-motion:reduce){
  .hero__title .rotator--kinetic .rot-current .rot-letter,
  .hero__title .rotator--kinetic .rot-previous .rot-letter{animation:none;}
}

/* Logo marquee — inline-SVG brand logos, pure CSS infinite scroll */
@keyframes logoSlide{0%{transform:translate3d(0%,0,0);}100%{transform:translate3d(-100%,0,0);}}
.marquee--logos .marquee__track{gap:0;align-items:center;}
.logos .logos-track{display:flex;width:max-content;}
.logos .all-logos{display:flex;align-items:center;will-change:transform;animation:logoSlide 40s linear infinite;}
.logos .logo-lockup{display:inline-flex;align-items:center;justify-content:center;
  gap:5px;margin:0 44px;opacity:.8;flex-shrink:0;white-space:nowrap;}
.logos .logo-mark{height:38px;width:auto;display:block;flex-shrink:0;}
.logos .figma-icon{height:32px;}
@media(prefers-reduced-motion:reduce){.logos .all-logos{animation:none;}}

/* Feature cards now host the three inline animations (3-up grid) */
.feature-grid--anim{grid-template-columns:repeat(3,1fr);padding:0;font-family:var(--body);}
.feature-grid--anim svg{display:block;}
.feature-card.is-anim .media{aspect-ratio:1/1.28;display:flex;align-items:center;
  justify-content:center;background:var(--bg-card,#f1efe9);}
@media (max-width:900px){
  .feature-grid--anim{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
}

/* ================================================================
   DIAGONAL SCROLL. One fixed world; the point of view follows a
   zig-zag DIAGONAL path as you scroll — both axes move together:
     P1 (the circle / start)
        ↘  down-and-right   → P2  "C'è un blocco per tutto"
        ↙  down-and-left    → P3  "Personalizzabile all'infinito"
   The section pins; GSAP translates .diag__world on x AND y.
   ================================================================ */
.diag{position:relative;background:#0a0a0a;overflow:hidden;}
.diag__viewport{position:relative;height:100vh;overflow:hidden;background:var(--bg);}
.diag__world{position:absolute;inset:0;will-change:transform;}
/* each stop is centred in the viewport, then pushed to its spot on
   the diagonal path via --px/--py (the world transform slides the
   whole path so each stop lands dead-centre in turn). */
.diag__panel{
  position:absolute;left:50%;top:50%;
  width:min(620px,88vw);
  transform:translate(-50%,-50%) translate(var(--px,0),var(--py,0));
  display:flex;align-items:center;justify-content:center;
}
.panel--center{--px:0;     --py:0;width:min(1180px,88vw);}  /* P0: centre — statement */
.panel--first{--px:70vw;   --py:96vh;width:min(1100px,88vw);}       /* P1: ↘ down-right — "C'è un blocco"       */
.panel--bl   {--px:-40vw;  --py:192vh;width:min(1100px,88vw);}      /* P2: ↙ down-left  — "Personalizzabile"    */
.panel--br2  {--px:60vw;   --py:288vh;width:min(1100px,88vw);}      /* P3: ↘ down-right — "Tutto in un unico posto" */

.panel-inner{
  width:100%;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:22px;
}
.panel-inner .eyebrow{margin:0;}
.col-heading{max-width:18ch;}
.panel-body{
  font-family:var(--body);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.5;color:#5a5a5a;max-width:46ch;
}
.col-media{width:100%;display:flex;justify-content:center;}
.col-media .app-window{width:min(460px,86vw);}
.panel--br2 .col-media .app-window.zoom-preview{width:min(730px,104%);}
.app-window.zoom-preview{border-radius:20px;overflow:hidden;}
.app-window.zoom-preview .zoom-preview__body{border-radius:20px;overflow:hidden;}


/* Reversed split: media on left, text on right (P1). */
.panel-inner--split-rev{flex-direction:row-reverse;}
.panel-inner--split-rev .panel-inner__copy{align-items:flex-start;text-align:left;}


/* P4 toolkit — split layout: text left, video right */
.panel-inner--split{
  flex-direction:row;text-align:left;align-items:center;gap:40px;
}
.panel-inner__copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.panel-inner--split .col-heading{max-width:none;}
.panel-inner--split .col-media{flex:1.2;}
.panel--br2 .panel-inner--split .col-media{align-self:flex-start;}
.panel--br2 .app-window video{
  width:100%;display:block;aspect-ratio:16/10;object-fit:cover;border-radius:12px;
}
.panel--br2{width:min(1100px,88vw);}

/* ================================================================
   ZOOM PREVIEW (P3 miniature) — live clone of #product section
   ================================================================ */

.zoom-preview__body{
  padding:0;
  background:var(--bg);
  overflow:hidden;
  position:relative;
}
/* Compact overrides for elements inside the preview clone */
.zp-live .feature-grid--anim{
  --bg-card:#1a1a1a;--bg-panel:#1a1a1a;--bg-highlight:#222;
  --text-primary:#fff;--text-secondary:#999;--text-tertiary:#666;
  --icon-bg:#2a2a2a;--icon-border:#333;--caret:#fff;
}
.zp-live .feature-card.is-anim .media{aspect-ratio:1/1.28;
  background:radial-gradient(120% 90% at 50% 0%,#fbfaf8 0%,#efece4 100%);}
/* Card 2: light bg matching the other cards */
.zp-live .feature-card.is-anim:nth-child(2) .media{
  background:radial-gradient(120% 90% at 50% 0%,#fbfaf8 0%,#efece4 100%);border-radius:22px;}
/* Keep card 3 media transparent so the .c3s gradient shows through */
.zp-live .feature-card.is-anim:nth-child(3) .media{background:transparent;}
/* Force equal columns — prevent content from stretching grid tracks */
.zp-live .feature-grid--anim{align-items:start;}
.zp-live .feature-card.is-anim{min-width:0;overflow:hidden;}
.zp-live .feature-card h3{font-size:20px;margin:14px 0 6px;}
.zp-live .feature-card p{font-size:12px;line-height:1.35;}
.zp-live .section-head{margin-bottom:8px;}
.zp-live .section-head .h-lg{font-size:clamp(18px,2.2vw,26px);}
.zp-live .section-head .eyebrow{font-size:10px;margin-bottom:2px;}
.zp-live .feature-grid--anim{gap:16px;}

/* Live miniature — the real #product section scaled down to fit */
.zp-live{
  width:100%;
  overflow:hidden;
  position:relative;
  /* height set by JS */
}
.zp-live__section{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  /* width & scale set by JS */
  padding:80px clamp(40px,5vw,100px) 120px;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}

/* ================================================================
   DARK ZONE — from #product section onwards, dark background
   ================================================================ */
/* The product section inside the preview */
.zp-live__section{background:#0a0a0a;color:#f5f5f5;
  --bg-card:#1a1a1a;--bg-soft:#1a1a1a;--bg:#0a0a0a;--ink:#fff;--line:#333;
  --bg-panel:#1a1a1a;--shadow-panel:0 24px 40px -12px rgba(0,0,0,.4);}
.zp-live__section .eyebrow{color:#999;}
.zp-live__section .h-lg{color:#fff;}
.zp-live__section .feature-card h3{color:#fff;}
.zp-live__section .feature-card p{color:#777;}
.zoom-preview__body{background:#0a0a0a;}
/* Override hardcoded white backgrounds inside the dark preview */
.zp-live .tb-btn.save{background:#2a2a2a;color:#fff;}
.zp-live .c2-app .ic{background:#f5f3ef;}
.zp-live .c2-avatar{background:#ece9e2;}
.zp-live .c2-card .c2-name{color:#141414;}
.zp-live .c2-card .c2-label{color:#777;}
.zp-live .c2-card .c2-handle{color:#999;}
.zp-live .c2-text{color:#141414;}
.zp-live .c2-field{background:#ece9e2;}
.zp-live .c2-share-row{background:#ece9e2;}
.zp-live .c2-link-ic{color:#999;}
.zp-live .c2-app span{color:#555;}
.zp-live .c2-badge{box-shadow:0 3px 7px rgba(16,185,129,.5), 0 0 0 2px #fff;}
.zp-live .wcard{background:#1a1a1a;}
.zp-live .wname,.zp-live .wprice{color:#ccc;}

/* All sections after the diagonal scroll: dark bg */
.templates{position:relative;z-index:2;margin-top:-2px;}
.templates,.footer{background:#0a0a0a;color:#f5f5f5;
  --bg-card:#1a1a1a;--bg-soft:#1a1a1a;--bg:#0a0a0a;--ink:#fff;--line:#333;}
.templates .eyebrow{color:#999;}
.templates .h-xl,.templates .h-lg{color:#fff;}

/* Buttons: invert from dark to white */
.templates .btn--dark{
  background:#fff;color:#0a0a0a;
}
.templates .btn--dark:hover{
  background:#e5e5e5;
}


/* Touch / small screens: no pin — three calm stacked panels */
@media (max-width:900px){
  .diag__viewport{height:auto;overflow:visible;}
  .diag__world{position:static;transform:none!important;}
  .diag__panel{position:static;width:auto;transform:none;padding:80px var(--pad);}
  .col-media--video video,.col-media .app-window{width:100%;max-height:none;}
  .panel--br2 .app-window video{width:100%;}
  .panel-inner--split{flex-direction:column;text-align:center;align-items:center;}
  .panel-inner__copy{align-items:center;}
  .panel--br2{width:auto;}
  .zoom-preview{width:100%;}
}
/* Micro-shadow effect for big titles on light backgrounds (from quarto.html) */
.hero__title,
.h-lg.col-heading,
.statement__text{
  text-shadow:
    -1px -1px 1px rgba(255,255,255,0.6),
    1px 1px 1px rgba(0,0,0,0.4),
    2px 2px 2px rgba(0,0,0,0.3),
    4px 4px 4px rgba(0,0,0,0.2),
    8px 8px 12px rgba(0,0,0,0.15);
}

/* ================================================================
   SOCIAL CTA — big centered "ready to win the socials?" block
   Sits between the templates carousel and the footer (dark zone).
   ================================================================ */
.social-cta{
  position:relative;z-index:2;
  background:#0a0a0a;color:#f5f5f5;
  padding:clamp(120px,18vh,220px) var(--pad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:34px;
}
.social-cta__title{
  font-family:var(--display);
  font-size:clamp(48px,8vw,120px);
  line-height:1.02;letter-spacing:-.02em;
  color:#ff69b4;margin:0;
  text-shadow:
    -1px -1px 1px rgba(0,0,0,0.35),
    1px 1px 1px rgba(255,255,255,0.55),
    2px 2px 2px rgba(255,255,255,0.45),
    4px 4px 4px rgba(255,255,255,0.32),
    8px 8px 12px rgba(255,255,255,0.22);
  max-width:14ch;
}
.social-cta__btn{margin-top:8px;}
@media (max-width:640px){
  .social-cta{padding:110px var(--pad);gap:24px;}
  .social-cta__title br{display:none;}
}

/* ================================================================
   FOOTER v2 — inline links + social icons (wabi-style)
   ================================================================ */
.footer{
  background:#0a0a0a;color:#f5f5f5;border-top:1px solid #1a1a1a;
  padding:40px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;
}
.footer__links{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;
  font-family:var(--body);font-size:14px;color:#8a8a8a;
}
.footer__links a{
  color:#8a8a8a;text-decoration:none;
  transition:color .2s ease;
}
.footer__links a:hover{color:#fff;}
.footer__dot{color:#4a4a4a;user-select:none;}
.footer__socials{display:flex;align-items:center;gap:6px;}
.footer__soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:#c9c9c9;
  transition:background .2s ease,color .2s ease;
}
.footer__soc:hover{background:rgba(255,255,255,.08);color:#fff;}
@media (max-width:720px){
  .footer{flex-direction:column;align-items:center;text-align:center;padding:48px var(--pad) 40px;}
  .footer__links{justify-content:center;font-size:13px;gap:10px;}
}