/* ============================================================================
   FRNDS24 — "the softest thing in the room."
   Centered manifesto/poster (archetype #5) · floating pill nav · warm/human.
   Palette from the brand pack: petal blush ground, plum-navy ink, FRNDS pink,
   anion mint. Dark theme = the pack's own night-plum panel, given equal care.
   Display: Baloo 2 (chunky-rounded, Ek Type, India) · Body: Nunito. Embedded.
   ============================================================================ */

@font-face{
  font-family:"Baloo2";
  src:url("fonts/baloo2.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("fonts/nunito.woff2") format("woff2");
  font-weight:200 1000; font-style:normal; font-display:swap;
}

:root{
  color-scheme:light;
  --blush:  #FBEDF1;
  --rose:   #F5D9E2;
  --card:   #FFFFFF;
  --plum:   #241F55;   /* ink — the pack's navy */
  --plum-2: #3A3277;
  --pink:   #E9346F;   /* the brand pink */
  --pink-2: #C92259;   /* AA-safe on blush for small text */
  --pink-soft:#F7B9CE;
  --mint:   #8FDCC0;   /* the anion strip */
  --mint-2: #256B4F;
  --dim:    #7D6F86;
  --line:   rgba(36,31,85,.12);
  --shadow: 0 24px 70px rgba(36,31,85,.13);

  --disp:"Baloo2","Arial Rounded MT Bold","Hiragino Maru Gothic ProN",Arial,sans-serif;
  --body:"Nunito","Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --blush:#191540; --rose:#241E52; --card:#241E52;
    --plum:#F7ECF1; --plum-2:#D9CDE8;
    --pink:#FF6E9F; --pink-2:#FF87AF; --pink-soft:#7A3A57;
    --mint:#7FD8BB; --mint-2:#9BE8CF;
    --dim:#A99BBE; --line:rgba(247,236,241,.14);
    --shadow:0 24px 70px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --blush:#191540; --rose:#241E52; --card:#241E52;
  --plum:#F7ECF1; --plum-2:#D9CDE8;
  --pink:#FF6E9F; --pink-2:#FF87AF; --pink-soft:#7A3A57;
  --mint:#7FD8BB; --mint-2:#9BE8CF;
  --dim:#A99BBE; --line:rgba(247,236,241,.14);
  --shadow:0 24px 70px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  color-scheme:light;
  --blush:#FBEDF1; --rose:#F5D9E2; --card:#FFFFFF;
  --plum:#241F55; --plum-2:#3A3277;
  --pink:#E9346F; --pink-2:#C92259; --pink-soft:#F7B9CE;
  --mint:#8FDCC0; --mint-2:#256B4F;
  --dim:#7D6F86; --line:rgba(36,31,85,.12);
  --shadow:0 24px 70px rgba(36,31,85,.13);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--blush); color:var(--plum);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  text-align:center;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--pink); color:#fff; }
:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; border-radius:6px; }
h1,h2{ font-family:var(--disp); font-weight:800; line-height:1.04; letter-spacing:-.015em; margin:0; }
.mono-caps{ font-family:var(--body); font-weight:800; letter-spacing:.18em; text-transform:uppercase; }

/* ---------------- pill nav ---------------- */
.pill{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100;
  display:flex; align-items:center; gap:2px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px;
  padding:6px 8px; box-shadow:0 10px 40px rgba(36,31,85,.12);
  max-width:min(94vw, 720px); overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.pill::-webkit-scrollbar{ display:none; }
.pill a{
  font-size:13.5px; font-weight:800; text-decoration:none; color:var(--plum-2);
  padding:8px 13px; border-radius:999px; transition:background .25s, color .25s;
}
.pill a:hover{ background:var(--rose); color:var(--plum); }
.pill .pill-brand{
  font-family:var(--disp); font-weight:800; font-size:16px; color:var(--plum); letter-spacing:0;
}
.pill .pill-brand b{ color:var(--pink); }
.pill button{
  font-size:15px; background:none; border:0; cursor:pointer; color:var(--plum-2);
  padding:8px 12px; border-radius:999px; line-height:1;
}
.pill button:hover{ background:var(--rose); }

/* ---------------- hero ---------------- */
main{ max-width:1160px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.hero{ padding-top:118px; position:relative; }

/* orchestrated load sequence */
.ld{ opacity:0; transform:translateY(26px); animation:rise .9s var(--ease) forwards; }
.ld1{ animation-delay:.05s; } .ld2{ animation-delay:.18s; } .ld3{ animation-delay:.32s; }
.ld4{ animation-delay:.5s; }  .ld5{ animation-delay:.64s; } .ld6{ animation-delay:.8s; }
.ld7{ animation-delay:1.05s; }
h1 .ld{ display:inline-block; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ld{ opacity:1; transform:none; animation:none; } }

/* drifting petals */
.petals{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.petal{
  position:absolute; top:-40px; width:16px; height:22px; opacity:0;
  background:linear-gradient(160deg, var(--pink-soft), var(--rose));
  border-radius:80% 20% 70% 30% / 60% 40% 60% 40%;
  animation:fall 13s linear infinite;
}
.petal.p1{ left:6%;  animation-delay:0s;   transform:scale(.8); }
.petal.p2{ left:22%; animation-delay:4.5s; transform:scale(1.1); }
.petal.p3{ left:41%; animation-delay:8s;   transform:scale(.7); }
.petal.p4{ left:63%; animation-delay:2.5s; transform:scale(.9); }
.petal.p5{ left:80%; animation-delay:6.5s; transform:scale(1.05); }
.petal.p6{ left:93%; animation-delay:10.5s;transform:scale(.75); }
@keyframes fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  6%{ opacity:.75; }
  90%{ opacity:.6; }
  100%{ transform:translateY(110vh) rotate(300deg) translateX(60px); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .petal{ animation:none; opacity:0; } }

/* pulsing primary CTA */
.btn.glow{ animation:pulse 2.6s ease-in-out 1.8s infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 14px 34px rgba(233,52,111,.35); }
  50%{ box-shadow:0 14px 34px rgba(233,52,111,.35), 0 0 0 12px rgba(233,52,111,.09); }
}
@media (prefers-reduced-motion:reduce){ .btn.glow{ animation:none; } }
.chip{
  display:inline-block; font-size:10.5px; color:var(--pink-2);
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; margin:0 0 26px; box-shadow:0 6px 24px rgba(36,31,85,.07);
}
.hero h1{ font-size:clamp(52px,8.2vw,104px); }
.hero h1 em{ font-style:normal; color:var(--pink); }
.hero .lede{
  max-width:54ch; margin:22px auto 30px; font-size:clamp(16px,1.8vw,19.5px); color:var(--plum-2);
}
.hero-cta{ display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap; }
.btn{
  display:inline-block; font-family:var(--disp); font-weight:800; font-size:17px;
  text-decoration:none; background:var(--pink); color:#fff;
  padding:16px 34px; border-radius:999px;
  box-shadow:0 14px 34px rgba(233,52,111,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(233,52,111,.42); }
.btn:active{ transform:translateY(1px); }
.softlink{ font-weight:800; color:var(--pink-2); text-decoration:none; }
.softlink:hover{ text-decoration:underline; }

.hero-img{
  position:relative; margin:44px auto 26px; max-width:860px;
  border-radius:200px 200px 36px 36px; overflow:hidden; box-shadow:var(--shadow);
  isolation:isolate; /* H18 */
}
.hero-img img{ width:100%; }
.spark{
  position:absolute; z-index:2; width:10px; height:10px; border-radius:50%;
  background:var(--mint); opacity:.85; filter:blur(.4px);
  animation:floaty 5.5s ease-in-out infinite;
}
.spark.s1{ left:12%; top:22%; }
.spark.s2{ right:15%; top:32%; width:7px; height:7px; animation-delay:1.4s; background:var(--pink-soft); }
.spark.s3{ left:24%; bottom:20%; width:6px; height:6px; animation-delay:2.6s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@media (prefers-reduced-motion:reduce){ .spark{ animation:none; } }

.trust{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; padding:0 0 30px; }
.trust li{
  font-size:10px; color:var(--plum-2); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px;
}

/* ---------------- brand ribbon ---------------- */
.ribbon{
  margin:26px calc(50% - 50vw) 0; overflow:hidden;
  background:var(--rose); padding:15px 0; transform:rotate(-1.1deg);
}
.ribbon-in{
  display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
  font-size:12px; letter-spacing:.24em; color:var(--pink-2);
  animation:ribbon 32s linear infinite; will-change:transform;
}
.ribbon-in span{ padding:0 4px; }
.ribbon-in b{ color:var(--pink); font-weight:400; }
@keyframes ribbon{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ribbon-in{ animation:none; } }

/* ---------------- sections shared ---------------- */
section{ padding:96px 0 40px; }
section h2{ font-size:clamp(36px,5.2vw,64px); }
.sec-sub{ color:var(--dim); max-width:52ch; margin:16px auto 40px; font-size:17px; }

/* ---------------- feature showcase ---------------- */
.why{ padding-bottom:10px; }
.feat{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,70px); align-items:center; text-align:left;
  padding:34px 0;
}
.feat:nth-child(odd) .feat-img{ order:2; }
.feat:nth-child(odd) .feat-copy{ order:1; text-align:right; }
.feat-img{
  margin:0; border-radius:30px; overflow:hidden; box-shadow:var(--shadow);
  isolation:isolate; will-change:transform;
}
.feat-img img{
  width:100%; aspect-ratio:3/2.1; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.feat:hover .feat-img img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .feat:hover .feat-img img{ transform:none; } }
.feat-k{ font-size:10.5px; color:var(--pink-2); margin:0 0 10px; }
.feat-copy h3{
  font-family:var(--disp); font-weight:800; font-size:clamp(26px,3vw,40px);
  line-height:1.04; margin:0 0 14px; color:var(--plum);
}
.feat-copy p:last-child{ margin:0; color:var(--dim); font-size:16px; max-width:44ch; }
.feat:nth-child(odd) .feat-copy p:last-child{ margin-left:auto; }

/* ---------------- numbers band ---------------- */
.nums{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  background:var(--card); border-radius:30px; padding:38px 26px;
  box-shadow:var(--shadow); margin-top:70px;
}
.num b{
  display:block; font-family:var(--disp); font-weight:800;
  font-size:clamp(34px,4.6vw,58px); color:var(--pink); line-height:1;
  font-variant-numeric:tabular-nums;
}
.num span{ font-size:12.5px; color:var(--dim); font-weight:700; }

/* ---------------- the 8 layers (signature) ---------------- */
.layers{ padding:40px 0 0; }
.layers .sticky{
  position:sticky; top:0; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 0 30px;
}
.layers{ height:480dvh; }  /* scroll runway; JS maps progress */
.stack{ position:relative; width:min(560px,88vw); height:460px; margin-top:8px; }
.layer{ position:absolute; left:50%; top:34px; transform:translateX(-50%); will-change:transform; }
.slab{
  display:block; width:min(330px,62vw); height:34px; border-radius:999px;
  box-shadow:0 10px 24px rgba(36,31,85,.14);
}
.slab-cotton { background:var(--card); border:2px dashed var(--rose); }
.slab-anion  { background:linear-gradient(90deg, var(--mint), #B8F0DC); box-shadow:0 10px 34px rgba(63,190,146,.45); }
.slab-bubble { background:var(--card); background-image:radial-gradient(var(--rose) 2.2px, transparent 2.6px); background-size:14px 14px; }
.slab-channel{ background:var(--card); background-image:repeating-linear-gradient(90deg, transparent 0 18px, var(--rose) 18px 21px); }
.slab-odour  { background:#EDE6FA; }
:root[data-theme="dark"] .slab-odour, :root:not([data-theme="light"]) .dark-odour-probe{ background:#2E2760; }
.slab-core   { background:var(--card); height:44px; }
.slab-barrier{ background:var(--plum); height:20px; }
.slab-base   { background:var(--rose); }
.tag{
  position:absolute; top:50%; width:min(240px,30vw);
  font-size:13px; line-height:1.5; color:var(--dim); text-align:left;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tag b{ display:block; font-family:var(--disp); font-weight:800; font-size:14.5px; color:var(--plum); letter-spacing:.01em; }
.tag.left { right:calc(50% + min(190px,34vw)); text-align:right; }
.tag.right{ left:calc(50% + min(190px,34vw)); }
.tag.left::after, .tag.right::before{
  content:""; position:absolute; top:12px; width:26px; height:1.5px; background:var(--pink-soft);
}
.tag.left::after{ right:-34px; }
.tag.right::before{ left:-34px; }
.layer.lit .tag{ opacity:1; transform:none; }

/* ---------------- real ---------------- */
.real-grid{ display:flex; gap:clamp(20px,3.5vw,48px); justify-content:center; flex-wrap:wrap; }
.polaroid{
  margin:0; background:var(--card); border-radius:26px; padding:14px 14px 18px;
  box-shadow:var(--shadow); max-width:420px; flex:1 1 300px; min-width:0;
}
.polaroid img{ border-radius:16px; aspect-ratio:4/4.6; object-fit:cover; width:100%; }
.polaroid figcaption{ font-size:14px; color:var(--dim); padding:14px 8px 0; }
.tilt-l{ transform:rotate(-1.6deg); }
.tilt-r{ transform:rotate(1.4deg); }

/* ---------------- pack ---------------- */
.pack-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:center; text-align:left;
}
.pack-shot{ margin:0; }
.pack-shot img{
  border-radius:26px; box-shadow:var(--shadow); transform:rotate(-2deg);
  transition:transform .5s var(--ease);
}
.pack-shot:hover img{ transform:rotate(0deg) scale(1.015); }
@media (prefers-reduced-motion:reduce){ .pack-shot:hover img{ transform:rotate(-2deg); } }
.promise{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
.promise li{
  background:var(--card); border-radius:18px; padding:16px 18px;
  box-shadow:0 8px 26px rgba(36,31,85,.07); min-width:0;
}
.promise b{ display:block; font-family:var(--disp); font-weight:800; font-size:19px; color:var(--pink-2); }
.promise span{ font-size:13.5px; color:var(--dim); }
.pack-note{ margin:26px 0 0; color:var(--plum-2); font-style:italic; max-width:46ch; }

/* ---------------- how to use ---------------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.steps li{
  background:var(--card); border-radius:22px; padding:26px 18px 22px;
  box-shadow:0 10px 30px rgba(36,31,85,.08);
}
.steps i{
  font-style:normal; font-family:var(--disp); font-weight:800; font-size:26px;
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--rose); color:var(--pink-2); margin-bottom:12px;
}
.steps b{ display:block; font-size:15.5px; line-height:1.35; }
.steps span{ display:block; margin-top:8px; font-size:13.5px; color:var(--dim); }
.dispose{
  max-width:60ch; margin:36px auto 0; background:var(--card); border-radius:18px;
  padding:18px 26px; font-size:14.5px; color:var(--plum-2);
  border:1.5px dashed var(--pink-soft);
}
.dispose span{ display:block; margin-top:4px; color:var(--dim); font-size:13px; }

/* ---------------- partners ---------------- */
.partners{ padding-bottom:70px; }
.ab-mark{ width:110px; margin:0 auto 8px; }
.partner-cta{ display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap; margin:8px 0 40px; }
.biz{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px;
  max-width:760px; margin:0 auto; text-align:left;
}
.biz > div{ background:var(--card); border-radius:16px; padding:14px 18px; min-width:0; }
.biz dt{ font-size:9.5px; color:var(--pink-2); letter-spacing:.22em; }
.biz dd{ margin:4px 0 0; font-size:14px; font-weight:700; color:var(--plum); font-family:var(--body); letter-spacing:.02em; text-transform:none; }

/* ---------------- footer ---------------- */
.foot{ padding:30px 0 60px; color:var(--dim); font-size:13.5px; }
.foot-brand{ font-family:var(--disp); font-weight:800; font-size:30px; color:var(--plum); margin:0 0 6px; }
.foot-brand b{ color:var(--pink); }
.foot-brand span{ font-size:12px; vertical-align:top; }
.foot .mono-caps{ font-size:10px; letter-spacing:.3em; color:var(--pink-2); margin-top:14px; }

/* ---------------- reveals ---------------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .pack-grid{ grid-template-columns:1fr; text-align:center; }
  .pack-copy h2{ text-align:center; }
  .promise{ text-align:left; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .feat, .feat:nth-child(odd){ grid-template-columns:1fr; text-align:center; }
  .feat:nth-child(odd) .feat-img{ order:1; }
  .feat:nth-child(odd) .feat-copy{ order:2; text-align:center; }
  .feat-copy p:last-child, .feat:nth-child(odd) .feat-copy p:last-child{ margin:0 auto; }
  .nums{ grid-template-columns:1fr 1fr; gap:26px 10px; }
}
@media (max-width:720px){
  .hero{ padding-top:104px; }
  .hero h1{ font-size:clamp(44px,12.8vw,64px); }  /* sized to "understands" (H9) */
  .hero-cta{ flex-direction:column; gap:16px; }   /* H4 */
  .hero-img{ border-radius:110px 110px 24px 24px; }

  /* the stack: static exploded, tags inline under slabs */
  .layers{ height:auto; padding-bottom:0; }
  .layers .sticky{ position:static; min-height:0; padding:40px 0 0; }
  .stack{ height:auto; display:flex; flex-direction:column; gap:18px; align-items:center; width:100%; }
  .layer{ position:static; transform:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .slab{ width:min(320px,80vw); }
  .tag, .tag.left, .tag.right{
    position:static; width:min(340px,86vw); text-align:center; opacity:1; transform:none;
  }
  .tag.left::after, .tag.right::before{ display:none; }

  .steps{ grid-template-columns:1fr; }
  .biz{ grid-template-columns:1fr; }
  .promise{ grid-template-columns:1fr 1fr; }
}