/* =========================================================================
   Start page (index.html): one phone, real posts, plain scrolling.
   No 3D engine: the phone is ordinary HTML, so text and photos stay sharp.
   ========================================================================= */

.calm main{ position:relative; z-index:1; }
.calm h1, .calm h2{ letter-spacing:-.03em; }

/* ---------- the silk behind everything (silk.js): a canvas at the bottom of the fixed backdrop, fades in ---------- */
.l-silk{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.6s ease; }
.l-silk.is-on{ opacity:1; }

/* ---------- start screen: everything fits on the first screen ---------- */
.l-hero{ --hp:0; position:relative; min-height:100svh; display:flex; align-items:center; padding:5.2rem 0 2.5rem; overflow:clip; }
.l-hero-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); align-items:center; gap:clamp(2rem, 4vw, 4rem); width:100%; }
.l-hero-text{ opacity:calc(1 - var(--hp) * .8); translate:0 calc(var(--hp) * -40px); }
.l-hero h1{
  margin-top:0; max-width:none;
  font-size:var(--fs-display); line-height:1.02; font-weight:600; letter-spacing:-.045em;
  color:var(--ink);
}
.l-hero h1 em{ font-style:normal; position:relative; display:inline-block; color:var(--pers); }
/* a line draws itself under "syns" once the page has loaded */
.l-hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.06em; border-radius:99px; background:var(--pers);
  transform-origin:left; animation:underline .9s .7s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes underline{ from{ transform:scaleX(0); } }
.nowrap{ white-space:nowrap; }
.l-lead{ margin-top:1.2rem; color:var(--ink-soft); font-size:var(--fs-lead); line-height:1.6; max-width:42ch; }
.l-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1.8rem; }
.l-ghost{
  display:inline-flex; align-items:center; gap:.4rem; padding:.85rem 1.3rem; border-radius:99px;
  border:1px solid #CFCAC0; color:var(--ink); text-decoration:none; font-weight:500; font-size:1rem;
  transition:border-color .2s ease-out, background-color .2s ease-out;
}
@media (hover:hover) and (pointer:fine){ .l-ghost:hover{ border-color:var(--ink); background:rgba(22,21,20,.04); } }
.l-ghost:active{ transform:scale(.97); }
.l-proof{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:1rem 2.6rem; margin:2.4rem 0 0; max-width:34rem; }
.l-proof div{ margin:0; }
.l-proof dt{ font-family:'Space Grotesk','Geist',sans-serif; font-size:var(--fs-h3); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.l-proof dd{ margin:.15rem 0 0; color:var(--ink-faint); font-size:var(--fs-small); }

/* ---------- the phone with depth: thickness, a floor shadow, light behind it, a slow float,
   and a lean toward the mouse (--mx/--my from lugn.js) ---------- */
.l-hero-phone{ position:relative; display:flex; flex-direction:column; align-items:center; perspective:1400px; }
.phone-light{ position:absolute; left:50%; top:46%; width:150%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle, rgba(232,93,63,.16), rgba(232,93,63,.04) 40%, transparent 65%); pointer-events:none; }
.phone-float{ transform-style:preserve-3d; animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-12px); } }
.phone-shadow{ width:min(13rem, 24dvh); height:1.4rem; margin-top:1.6rem; border-radius:50%; background:radial-gradient(closest-side, rgba(22,21,20,.38), transparent); animation:shadow 7s ease-in-out infinite; }
@keyframes shadow{ 50%{ transform:scaleX(.86); opacity:.7; } }
.l-hero-phone .phone-holder{ width:min(17.5rem, 31dvh, 70vw); }
.phone-holder[data-tilt]{
  --ry:0deg; --rx:0deg;
  position:relative; transform-style:preserve-3d;
  transform:rotateY(calc(var(--ry) + var(--mx, 0) * 10deg)) rotateX(calc(var(--rx) - var(--my, 0) * 8deg));
}
.l-hero-phone .phone-holder[data-tilt]{ --ry:calc(-20deg * (1 - var(--hp))); --rx:calc(7deg * (1 - var(--hp))); }
/* the frame's thickness: thin metal slices stacked behind the front, made by lugn.js */
.iphone-edge{
  position:absolute; inset:0; border-radius:17cqw; pointer-events:none;
  background:linear-gradient(90deg, #3a3835, #8f8b84 30%, #5a5752 60%, #2c2b29);
  transform:translateZ(calc(var(--z) * -1cqw));
}
.phone-holder[data-tilt] .iphone{ transform:translateZ(.6cqw); }
/* the glare on the glass slides as the phone leans */
.phone-holder[data-tilt] .iphone-screen::after{
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.11) 47%, transparent 60%);
  background-size:260% 100%; background-position:calc(50% - var(--mx, 0) * 60%) 0;
}

/* gentle entrance on load */
.l-in{ animation:lIn .9s cubic-bezier(.22,1,.36,1) backwards; }
.l-hero-text .l-in:nth-child(2){ animation-delay:.06s; }
.l-hero-text .l-in:nth-child(3){ animation-delay:.12s; }
.l-hero-text .l-in:nth-child(4){ animation-delay:.18s; }
.l-hero-text .l-in:nth-child(5){ animation-delay:.24s; }
.l-hero-phone.l-in{ animation-duration:1.4s; animation-delay:.15s; }
@keyframes lIn{ from{ opacity:0; translate:0 16px; } }

/* ---------- the phone (plain HTML/CSS, scales with its holder) ---------- */
.phone-holder{ container-type:inline-size; }
.iphone{
  /* one unit = 1/600 of the screen width, so the screen layout scales with the phone */
  --u:calc(90.8cqw / 600);
  position:relative; width:100cqw; aspect-ratio:70.6 / 146.6;
  border-radius:17cqw; padding:1.4cqw;
  background:linear-gradient(135deg, #a6a29b 0%, #4a4845 18%, #8e8a83 42%, #3d3b39 70%, #9d9992 100%);
  box-shadow:
    inset 0 0 0 .3cqw rgba(255,255,255,.28),
    inset 0 0 1.2cqw rgba(0,0,0,.55),
    0 4cqw 8cqw -2cqw rgba(22,21,20,.35),
    0 18cqw 30cqw -10cqw rgba(22,21,20,.45);
}
/* side buttons */
.iphone::before, .iphone::after{ content:""; position:absolute; width:.9cqw; border-radius:.6cqw; background:linear-gradient(90deg, #5d5a56, #9a968f); }
.iphone::before{ left:-.7cqw; top:26%; height:12%; box-shadow:0 -9cqw 0 -.05cqw #6f6c67; }
.iphone::after{ right:-.7cqw; top:31%; height:16%; }
.iphone-bezel{ height:100%; border-radius:15.6cqw; background:#030303; padding:3.2cqw; }
.iphone-screen{
  position:relative; height:100%; border-radius:12.6cqw; overflow:hidden;
  background:#0b0b0c; color:#f4f4f5; font-family:Geist, -apple-system, "Segoe UI", sans-serif;
  font-size:calc(var(--u) * 22); line-height:1.25;
}
/* a faint glare across the glass */
.iphone-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.07) 46%, transparent 58%);
}
.iphone-island{ position:absolute; z-index:6; left:50%; top:calc(var(--u) * 22); translate:-50% 0; width:calc(var(--u) * 190); height:calc(var(--u) * 56); border-radius:99px; background:#000; }
.iphone-home{ position:absolute; z-index:6; left:50%; bottom:calc(var(--u) * 14); translate:-50% 0; width:calc(var(--u) * 210); height:calc(var(--u) * 9); border-radius:99px; background:rgba(244,244,245,.9); }

.iphone-screen p{ margin:0; }
.ig-view{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.ig-view.is-on{ opacity:1; }
.ig-status{ height:calc(var(--u) * 100); display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u) * 46) 0 calc(var(--u) * 62); font-weight:600; font-size:calc(var(--u) * 26); }
.ig-status svg{ width:calc(var(--u) * 92); fill:currentColor; }
.ig-handle{ font-weight:700; font-size:calc(var(--u) * 30); padding:0 calc(var(--u) * 36); }
.ig-profile{ display:flex; align-items:center; gap:calc(var(--u) * 24); padding:calc(var(--u) * 28) calc(var(--u) * 36) 0; }
.ig-avatar{ width:calc(var(--u) * 116); height:calc(var(--u) * 116); flex:none; }
.ig-name{ font-weight:700; font-size:calc(var(--u) * 26); }
.ig-bio{ color:#a1a1aa; margin-top:calc(var(--u) * 6) !important; }
.ig-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u) * 12); padding:calc(var(--u) * 30) calc(var(--u) * 36) 0; }
.ig-buttons span{ display:grid; place-items:center; height:calc(var(--u) * 56); border-radius:calc(var(--u) * 14); background:#26262a; font-weight:600; }
.ig-highlights{ list-style:none; margin:0; padding:calc(var(--u) * 30) calc(var(--u) * 30) 0; display:flex; justify-content:space-between; }
.ig-highlights li{ display:flex; flex-direction:column; align-items:center; gap:calc(var(--u) * 10); width:calc(var(--u) * 110); font-size:calc(var(--u) * 18); color:#d4d4d8; }
.ig-highlights img{ width:calc(var(--u) * 92); height:calc(var(--u) * 92); border-radius:50%; object-fit:cover; box-shadow:0 0 0 calc(var(--u) * 5) #0b0b0c, 0 0 0 calc(var(--u) * 8) #3a3a40; }
.ig-tabs{ margin-top:calc(var(--u) * 28); height:calc(var(--u) * 3); }
.ig-tabs span{ display:block; width:50%; height:100%; background:#f4f4f5; }
.ig-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(var(--u) * 4); margin-top:calc(var(--u) * 6); }
.ig-grid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }

/* single post view */
.ig-post-head{ display:flex; align-items:center; gap:calc(var(--u) * 16); padding:calc(var(--u) * 6) calc(var(--u) * 32) calc(var(--u) * 20); font-weight:700; font-size:calc(var(--u) * 25); }
.ig-post-head .ig-avatar{ width:calc(var(--u) * 60); height:calc(var(--u) * 60); }
.ig-photo{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.ig-actions{ display:flex; gap:calc(var(--u) * 26); padding:calc(var(--u) * 24) calc(var(--u) * 30) calc(var(--u) * 14); }
.ig-actions svg{ width:calc(var(--u) * 42); height:calc(var(--u) * 42); }
.ig-likes{ font-weight:700; font-size:calc(var(--u) * 25); padding:0 calc(var(--u) * 32); }
.ig-caption{ padding:calc(var(--u) * 14) calc(var(--u) * 32) 0; font-size:calc(var(--u) * 23); }
.ig-caption b{ margin-right:.35em; }
.ig-sub{ padding:calc(var(--u) * 12) calc(var(--u) * 32) 0; color:#a1a1aa; font-size:calc(var(--u) * 21); }
.ig-date{ color:#71717a; }

/* ---------- sections ---------- */
.l-sec{ padding:clamp(3.5rem, 8vh, 6rem) 0; }
.l-head{ max-width:44rem; margin-bottom:clamp(2.2rem, 5vh, 3.4rem); }
.l-head h2{ font-size:var(--fs-h2); line-height:1.05; }
.l-head .eyebrow{ color:var(--ink-faint); }

/* the posts: a wall of real posts around one phone (idea from the Figma template).
   The wall is held still for a few screens of scrolling; --wp (0..1) is how far through it you are. */
.l-head-center{ margin-inline:auto; text-align:center; }
.l-head-center .eyebrow{ justify-content:center; }
.l-head-center .l-lead{ margin-inline:auto; }
.l-wall{ --wp:0; --pw:min(18rem, 34dvh); position:relative; height:220dvh; margin-top:clamp(1rem, 4vh, 3rem); }
.l-wall-sticky{ position:sticky; top:0; height:100dvh; overflow:hidden; }
/* the wall fades out at its edges (a mask, not a painted colour), so it melts into whatever is behind it */
.l-wall-cols{
  position:absolute; inset:0; display:grid; gap:14px; padding:0 14px;
  grid-template-columns:1fr 1fr calc(var(--pw) + 4rem) 1fr 1fr;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%), radial-gradient(75% 85% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%), radial-gradient(75% 85% at 50% 50%, #000 55%, transparent 100%);
  mask-composite:intersect;
}
.l-wall-col{
  display:flex; flex-direction:column; gap:14px; margin-top:-22dvh;
  /* outer and inner columns drift in opposite directions as you scroll */
  transform:translate3d(0, calc((var(--wp) - .5) * var(--dir) * -34dvh), 0);
  will-change:transform;
}
.l-wall-col img{ display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:18px; opacity:.55; filter:saturate(.85); }
.l-wall-phone{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; }
.l-wall-phone .phone-holder{ width:var(--pw); }

/* the text for the post on screen, on a white card bottom left */
.l-wall-captions{
  position:absolute; z-index:3; left:clamp(1rem, 4vw, 3rem); bottom:clamp(1rem, 6dvh, 3.5rem);
  display:grid; width:min(21rem, calc(50vw - var(--pw) / 2 - 5rem));
}
.l-step{
  grid-area:1 / 1; padding:1.2rem 1.3rem; border-radius:18px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  box-shadow:0 20px 40px -24px var(--shadow-strong);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; translate:0 10px; transition:opacity .45s ease, translate .45s cubic-bezier(.22,1,.36,1);
}
.l-step.is-on{ opacity:1; translate:0 0; }
.l-step h3{ font-size:var(--fs-lead); line-height:1.2; margin:.45rem 0 .5rem; letter-spacing:-.01em; }
.l-step p{ margin:0; color:var(--ink-soft); line-height:1.55; font-size:var(--fs-body); }
.l-step .l-meta{ color:var(--ink-faint); font-size:var(--fs-small); }
.l-step-img{ display:none; }
.l-wall-dots{ position:absolute; z-index:3; right:clamp(1rem, 4vw, 3rem); bottom:clamp(1.6rem, 7dvh, 4rem); list-style:none; margin:0; padding:0; display:flex; gap:.45rem; }
.l-wall-dots li{ width:.5rem; height:.5rem; border-radius:99px; background:#CFCAC0; transition:width .35s ease, background .35s ease; }
.l-wall-dots li.is-on{ width:1.6rem; background:var(--pers); }

/* numbers */
.calm .stat{ border-left-color:var(--line); }
.calm .stat-main .stat-num b{ color:var(--pers); }
.l-stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2.4rem 0 2rem; }
.l-stats .real-note{ margin-top:2rem; color:var(--ink-faint); font-size:var(--fs-small); line-height:1.55; max-width:70ch; }

/* the numbers open with one big statement (idea from the template's banner) */
.l-banner{ max-width:58rem; margin-bottom:clamp(2.4rem, 6vh, 4rem); }
.l-banner h2{ font-size:var(--fs-h2); line-height:1.04; font-weight:600; }
.l-banner h2 span{ color:#857F75; }
.l-banner .eyebrow{ color:var(--ink-faint); }

/* what we do: three tall cards (idea from the template's service cards). They stay dark on purpose:
   white text over the photos needs it, and they read as picture tiles on the cream page. */
.l-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.l-card{
  position:relative; display:flex; flex-direction:column; min-height:34rem; overflow:hidden;
  border-radius:20px; border:0; background:#1C1B19; color:#F0EEE9; padding:1.6rem;
}
.l-card h3{ position:relative; z-index:2; font-size:var(--fs-h3); line-height:1.02; font-weight:300; text-transform:uppercase; letter-spacing:-.01em; max-width:10ch; }
.l-card-art{ position:absolute; inset:0; z-index:0; }
.l-card-art img{ width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.l-card-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,27,25,.85) 0%, rgba(28,27,25,.1) 35%, rgba(28,27,25,.2) 55%, #1C1B19 88%); }
@media (hover:hover) and (pointer:fine){ .l-card:hover .l-card-art img{ transform:scale(1.04); opacity:.7; } }
.l-card-foot{ position:relative; z-index:2; margin-top:auto; }
.l-card-foot p{ margin:0; color:#D6D1C7; font-size:var(--fs-body); line-height:1.55; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.14); }
.l-card-foot ul{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.l-card-foot li{ padding:.25rem .7rem; border-radius:99px; background:rgba(255,255,255,.1); font-size:var(--fs-small); color:#e4e4e7; }
/* the analysis card draws the real before/after average as two bars */
.l-bars{ display:flex; align-items:flex-end; justify-content:center; gap:2.2rem; padding:6.5rem 2rem 14rem; }
.l-bars::after{ display:none; }
.l-bars div{ display:flex; flex-direction:column; align-items:center; gap:.4rem; height:100%; justify-content:flex-end; }
.l-bars span{ display:block; width:3.4rem; height:calc(var(--h) * 100%); border-radius:12px 12px 4px 4px; background:linear-gradient(180deg, #F4A08C, var(--pers)); }
.l-bars div:first-child span{ background:#3A3834; }
.l-bars small{ font-variant-numeric:tabular-nums; font-size:var(--fs-small); color:#f4f4f5; order:-1; }
.l-bars em{ font-style:normal; font-size:var(--fs-small); color:#A8A297; }

/* how it works */
.l-steps h3{ font-size:var(--fs-h3); margin:.9rem 0 .5rem; }
.l-steps p{ margin:0; color:var(--ink-soft); line-height:1.6; }
.l-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.l-steps li{ padding:1.5rem; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.l-steps .mono{ display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--ink); color:var(--paper); font-size:var(--fs-small); }

/* platforms + price */
.l-chips{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.l-chips li{ padding:.55rem 1.05rem; border:1px solid var(--line); border-radius:99px; background:var(--panel); color:var(--ink-soft); font-size:var(--fs-body); }
.l-price{ background:var(--panel); border-color:var(--line); }
.calm .contact-card{ background:var(--panel); border-color:var(--line); }
.calm .contact-card::before{ background:radial-gradient(ellipse 620px 300px at 90% -20%, rgba(232,93,63,.12), transparent 65%); }

/* the plain fade-up from site.js, a little slower and softer here */
.calm .reveal.in{ animation-duration:.8s; }

@media (max-width:900px){
  .l-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .l-hero{ padding-top:5.5rem; }
  .l-hero-grid{ grid-template-columns:1fr; text-align:left; }
  .l-hero-phone .phone-holder{ width:min(14rem, 58vw); }
  /* phone: no sticky phone, each post shows its own picture instead */
  /* phone: three columns, phone a little higher, caption across the bottom */
  .l-wall{ --pw:min(12.5rem, 46vw, 29dvh); height:200dvh; }
  /* the side columns run past the screen edges, so they are wide enough to fill it top to bottom */
  .l-wall-cols{ inset:0 -32vw; grid-template-columns:1fr calc(var(--pw) + 1.4rem) 1fr; gap:10px; padding:0; }
  .l-wall-col:first-child, .l-wall-col:last-child{ display:none; }
  .l-wall-col{ gap:10px; }
  .l-wall-phone{ top:39%; }
  .l-wall-captions{ left:1rem; right:1rem; bottom:1rem; width:auto; }
  .l-step{ padding:.9rem 1rem; }
  .l-step h3{ font-size:1.05rem; margin:.3rem 0 .3rem; }
  .l-step p{ font-size:.84rem; }
  .l-wall-dots{ right:auto; left:50%; translate:-50% 0; bottom:auto; top:calc(39% + var(--pw) * 1.04 + .9rem); }
  .l-cards{ grid-template-columns:1fr; }
  .l-card{ min-height:26rem; }
}
@media (max-width:520px){
  .l-steps{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .l-in{ animation:none; }
  .phone-float, .phone-shadow, .l-aura{ animation:none; }
  .l-wall-col{ transform:none; }
  .ig-view{ transition:none; }
}

/* ---------- polish pass: numbers, price, small screens ---------- */
.calm .stat-main .stat-num{ font-size:var(--fs-display); }
.calm .stat-num{ font-size:var(--fs-h2); }
.calm .stat-label{ font-size:var(--fs-body); }
.calm .stat-base{ font-size:var(--fs-small); }
.calm .price-figure .amount{ font-size:var(--fs-h2); }
.calm .price-figure .from{ font-size:var(--fs-small); }
.calm .price-perks .perk{ font-size:var(--fs-body); }
@media (max-width:820px){
  /* three small columns for the three facts, and the two buttons side by side */
  .l-proof{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.8rem; margin-top:1.8rem; }
  .l-proof dt{ font-size:1.25rem; }
  .l-ctas{ flex-wrap:nowrap; gap:.6rem; }
  .l-ctas .btn-primary, .l-ctas .l-ghost{ padding:.8rem 1.05rem; font-size:.95rem; white-space:nowrap; }
}