/* Home page (index.html) — 2026-10-12 brand rebuild. Loaded last on the home page only.
   Section rhythm: ink hero -> heat manifesto -> brand-colour concept bands -> paper value
   list -> ink live work -> paper pricing -> flame closing band. Hard cuts between all of them. */

body.home{ background:var(--ink); color:var(--text); font-family:var(--font-body); }
.home h1, .home h2, .home h3, .heat .m-big{ text-wrap:balance; }
.home h1, .home h2, .home h3{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); }

/* ---------------------------------------------------------------- hero (Supahero "Datalands" structure)
   top bar -> full-width wordmark -> statement row -> large work panels. Static, nothing pinned. */
.home .hero{ position:relative; top:auto; height:auto; overflow:visible; z-index:auto; background:var(--ink); padding:0; } /* layout.css .hero is the old sticky 100svh hero */
/* sticky bar, same layout as before — only the material changed to dark liquid glass (dark tint so the labels read on every section) */
.topbar{
  position:fixed; z-index:60; top:0; left:0; right:0;
  display:flex; align-items:center; gap:2rem; padding:1.1rem var(--edge);
  background:linear-gradient(180deg, rgba(40,40,40,.5), rgba(10,10,10,.34));
  -webkit-backdrop-filter:blur(14px) saturate(1.7); backdrop-filter:blur(14px) saturate(1.7);
  backdrop-filter:url(#liquid-glass) blur(14px) saturate(1.7);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2);
}
.tb-mark{ display:block; color:var(--paper); width:20px; flex:none; }
.tb-mark svg{ display:block; width:100%; height:auto; }
.tb-links{ display:flex; gap:clamp(1rem, .5rem + 1.5vw, 2.25rem); list-style:none; margin:0 auto 0 1rem; padding:0; }
.roll{
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--paper); text-decoration:none; display:inline-flex;
}
.tb-cta{
  position:relative; overflow:hidden; isolation:isolate; flex:none;
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--paper); text-decoration:none; border:1px solid rgba(255,255,255,.55); border-radius:999px;
  padding:.65em 1.15em; transition:color .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo);
}
/* outline wipe (MicroKit outline-wipe-button): flame fills in from the left, text flips to ink */
.tb-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--flame);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out-expo);
}
.tb-cta:hover, .tb-cta:focus-visible{ color:var(--ink); border-color:var(--flame); }
.tb-cta:hover::before, .tb-cta:focus-visible::before{ transform:scaleX(1); }

/* wordmark owns the left 8/12, the statement sits on the right flank at its baseline,
   so the work panels start inside a 900px-tall first screen */
.hero-main{
  display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); column-gap:clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items:end; margin-top:clamp(1.25rem, .5rem + 2.5vw, 3rem);
  padding-bottom:clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-bottom:1px solid var(--divider);
}
.hero-mark{ color:var(--paper); }
.hero-mark .wm{ display:block; width:100%; max-height:42svh; height:auto; }
.hero-title{ font-size:clamp(1.9rem, 1rem + 2.2vw, 3.6rem); line-height:.98; color:var(--paper); }
.hero-aside{ margin:1.25rem 0 0; color:rgba(255,255,255,.72); font-size:clamp(.98rem, .93rem + .2vw, 1.1rem); line-height:1.55; max-width:34ch; }

/* work panels — Flex-Expand Gallery (component hub, prompt-flex-expand-gallery.md):
   inline flex ratios, hovered panel -> data-max, siblings -> data-min over 700ms power3.inOut,
   siblings grayscale(1) brightness(.4) over 400ms (js/home.js). */
.work-grid{ display:flex; gap:12px; margin-top:clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.wp{
  display:block; min-width:0; color:inherit; text-decoration:none;
  filter:grayscale(0) brightness(1);
  transition:filter .4s cubic-bezier(.215,.61,.355,1), flex .7s cubic-bezier(.65,0,.35,1);
}
.work-grid.has-hover .wp:not(.is-hovered){ filter:grayscale(1) brightness(.4); }
.work-grid.settling .wp{ transition:filter .5s cubic-bezier(.215,.61,.355,1), flex .7s cubic-bezier(.65,0,.35,1); }
.wp-img{ display:block; height:clamp(220px, 30vw, 460px); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.wp-img img{ width:100%; height:100%; object-fit:cover; object-position:left center; transition:transform .7s cubic-bezier(.77,0,.175,1); }
.wp:hover .wp-img img{ transform:scale(1.03); }
.wp:nth-child(n+2) .wp-img img{ object-position:left top; } /* live-site screenshots: keep their top-left content */
.wp-cap{ display:flex; justify-content:space-between; gap:1rem; padding-top:.8rem; }
.wp-name{ font-weight:700; font-size:1.05rem; letter-spacing:-.02em; white-space:nowrap; }
.wp-sub{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.work-grid.has-hover .wp:not(.is-hovered) .wp-name{ color:#6b6b6b; transition:color .2s; }

@media (max-width:767px){
  .tb-links{ display:none; }
  .topbar{ justify-content:space-between; }
  .hero-main{ grid-template-columns:1fr; row-gap:1.75rem; }
  .hero-mark .wm{ max-height:none; }
  /* phones: the panels become a swipeable row, each panel ~82vw, no hover mechanics */
  .work-grid{ overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--edge)); padding-inline:var(--edge); scroll-padding-inline:var(--edge); scrollbar-width:none; }
  .work-grid::-webkit-scrollbar{ display:none; }
  .wp{ flex:0 0 82vw !important; scroll-snap-align:start; filter:none !important; }
  .wp-img{ height:auto; aspect-ratio:16/10; }
}

/* ---------------------------------------------------------------- manifesto on the heat field
   brand rule: heat gradient runs sun lower-left -> ember upper-right, always with grain */
#manifesto.heat{ position:relative; background:var(--heat); border-top:0; color:var(--ink); isolation:isolate; }
#manifesto.heat::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:180px; opacity:.5; mix-blend-mode:multiply;
}
.heat .m-big, .heat .m-line{ color:var(--ink); }
.heat .m-big.m-accent, .heat .m-accent{ color:var(--paper); }
.heat u .q-word::after{ background:var(--ink) !important; }
.heat .cs-back{ color:var(--ink); font-family:var(--font-display); font-weight:700; text-transform:none; letter-spacing:-.01em; font-size:1.25rem; border-bottom:1px solid currentColor; padding-bottom:.2rem; }
/* one rhythm token between every statement (judge round 6: gaps were 120/40/40/80px) */
.heat .m-stage{ min-height:0; }
.heat .m-stage + .m-stage{ margin-top:clamp(48px, 6vw, 96px); }
.heat .manifesto-more{ padding-top:clamp(48px, 6vw, 96px); }
.heat .manifesto-list{ padding-block:clamp(5rem, 3rem + 6vw, 9rem); }
#manifesto.heat{ padding-block:0; }
.heat .m-big{ max-width:16ch; }
/* the closing line owns the field at hero scale */
.heat .m-stage:nth-child(4) .m-big{ font-size:clamp(3.2rem, .8rem + 9.5vw, 11.5rem); line-height:.86; max-width:12ch; }
.heat .cs-back:hover{ color:var(--paper); }

/* ---------------------------------------------------------------- konsep head stays on ink */
.konsep-head p{ color:var(--muted); }

/* ---------------------------------------------------------------- nilai: what you get (paper)
   WD Activities Hover List (component hub, prompt-wd-activities-hover-list.md): the row nearest
   the pointer's Y becomes active, the photo card + dashed guide glide to its top with quickTo
   .4s sine.out, the other rows dim to .2. */
.nilai{ background:var(--paper); color:var(--ink); padding-bottom:clamp(5rem, 3rem + 6vw, 10rem); }
.nilai .section-head p{ color:var(--muted-on-paper); }
.nl-desktop{
  position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(2rem, 1rem + 3vw, 5rem);
  padding-inline:var(--edge); margin-top:clamp(2.5rem, 2rem + 2vw, 4rem); align-items:start;
}
.nl-card{ margin:0; grid-column:1; grid-row:1; align-self:stretch; position:relative; z-index:1; }
.nl-guide{
  position:absolute; top:0; left:calc(var(--edge) + 41.67% - 1rem); right:calc(var(--edge) + 58.33% - 2rem);
  height:0; border-top:1px dashed rgba(10,10,10,.35); pointer-events:none; will-change:transform;
}
.nl-guide::before{ content:""; position:absolute; right:100%; top:50%; width:5px; height:5px; border-radius:50%; background:var(--flame); transform:translateY(-50%); }
.nl-list{ grid-column:2; grid-row:1; list-style:none; margin:0; padding:0; border-top:1px solid var(--divider-on-paper); }
.nl-row{ padding:clamp(1rem, .7rem + .8vw, 1.6rem) 0; border-bottom:1px solid var(--divider-on-paper); transition:opacity .3s ease-out; }
.nl-name{ display:block; font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); font-size:clamp(2rem, 1rem + 3.2vw, 4.6rem); line-height:.95; }
.nl-line{ display:block; margin-top:.6rem; max-width:46ch; font-size:1rem; line-height:1.5; color:var(--muted-on-paper); }
.nl-desktop.is-hovering .nl-row{ opacity:.4; }
.nl-desktop.is-hovering .nl-row.is-active{ opacity:1; }
.nl-row.is-active .nl-name{ color:var(--ember); }
.nl-mobile{ display:none; }
@media (max-width:767px){
  .nl-desktop{ display:none; }
  /* phones: a list, small portrait image beside each row (not a stack of image cards) */
  .nl-mobile{ display:block; list-style:none; margin:2rem 0 0; padding:0 var(--edge); border-top:1px solid var(--divider-on-paper); }
  .nl-mob-item{ display:grid; grid-template-columns:28% 1fr; column-gap:1rem; align-items:start; padding:1.1rem 0; border-bottom:1px solid var(--divider-on-paper); }
  .nl-mob-item img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
  .nl-mob-item .nl-name{ font-size:1.55rem; line-height:1; }
  .nl-mob-item .nl-line{ font-size:.95rem; margin-top:.45rem; }
}

/* ---------------------------------------------------------------- live work: large touching screenshots
   (GRNDWRK / Provider Studio work rails on the Minimal Gallery board), 0 radius, no gaps */
.home .index-section{ border-top:0; padding-bottom:0; }
.kr-grid{ display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(2.5rem, 2rem + 2vw, 4rem); border-top:1px solid var(--divider); }
.kr-item{ display:block; color:inherit; text-decoration:none; border-bottom:1px solid var(--divider); }
.kr-item:nth-child(odd){ border-right:1px solid var(--divider); }
.kr-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--panel); }
.kr-img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .9s var(--ease-out-expo); }
.kr-item:hover .kr-img img{ transform:scale(1.04); }
/* second row half height: Greenpact + SAH lead; Iluvatrack / Protocol Profit cropped above their stat strips */
.kr-item:nth-child(n+3) .kr-img{ aspect-ratio:16/6.5; }
.kr-item:nth-child(n+3) .kr-img img{ object-position:50% 52%; }
.kr-item:nth-child(3) .kr-img img{ object-position:50% 39%; } /* Iluvatrack: headline + globe band only */ /* headline band only: below the eyebrow/pill, above the stats strip */
.kr-item:nth-child(n+3) .kr-cap{ padding-block:.9rem 1.2rem; }
.kr-cap{ display:grid; grid-template-columns:1fr auto; column-gap:1rem; row-gap:.35rem; padding:1.25rem var(--edge) 1.75rem; }
.kr-name{ font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; font-size:clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height:1; transition:color .3s ease-out; }
.kr-item:hover .kr-name{ color:var(--flame); }
.kr-status{ grid-column:2; grid-row:1; align-self:center; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.kr-role{ grid-column:1 / -1; color:var(--muted); font-size:1rem; line-height:1.5; }
@media (max-width:767px){
  .kr-grid{ grid-template-columns:1fr; }
  .kr-item:nth-child(odd){ border-right:0; }
}

/* ---------------------------------------------------------------- pricing (paper) */
.home .rows-section{ background:var(--paper); color:var(--ink); border-top:0; }
.home .rows-section .section-head p{ color:var(--muted-on-paper); }
.home .rows-section .ledger-list{ border-top-color:var(--divider-on-paper); }
.home .rows-section .price-row{ border-bottom-color:var(--divider-on-paper); }
.home .rows-section .price-row .line, .home .rows-section .price-row .price-sub, .home .rows-section .price-notes p{ color:var(--muted-on-paper); }
.home .rows-section .price-row .price{ color:var(--ink); }
.home .rows-section .price-row .price.is-accent, .home .rows-section .price-notes .price-notes-lead{ color:var(--ember); }
.home .rows-section .price-row .more{ color:#4a4a4a; }
.home .rows-section .price-trigger:hover, .home .rows-section .price-trigger:focus-visible{ background:rgba(10,10,10,.04); }
.home .rows-section .price-trigger:hover .more{ color:var(--ember); }
.home .rows-section .price-row.is-recommended{ border-left-color:var(--ember); }
.home .rows-section .price-notes .price-offer{
  position:relative; isolation:isolate; color:var(--ink); max-width:none; padding:clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--edge);
  margin:0 calc(-1 * var(--edge)) 1.75rem; background:var(--heat); font-size:clamp(1.3rem, 1rem + 1.4vw, 2.3rem); font-weight:700; letter-spacing:-.02em; line-height:1.25;
}
.home .rows-section .price-notes .price-offer::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:var(--grain); background-size:180px; opacity:.5; mix-blend-mode:multiply; }
.home .rows-section .price-notes .price-offer .price-notes-lead{ color:var(--ink); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:.18em; } /* ink, not white: white on the sun end measured 2.3:1 */

/* ---------------------------------------------------------------- closing band (flame) */
.end{ background:var(--flame); color:var(--ink); padding:clamp(4rem, 3rem + 5vw, 9rem) var(--edge) var(--edge); overflow:hidden; }
.end-top{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:2rem; row-gap:2rem; align-items:start; }
.end-title{ font-size:clamp(3rem, .8rem + 8vw, 9.5rem); line-height:.88; max-width:10ch; color:var(--ink); }
.end-note{ grid-column:1; margin:0; max-width:40ch; font-size:clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height:1.5; }
.end-links{ grid-column:2; grid-row:1 / span 2; align-self:end; list-style:none; margin:0; padding:0; border-top:1px solid rgba(10,10,10,.35); }
.end-link{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.1rem 0;
  border-bottom:1px solid rgba(10,10,10,.35); color:var(--ink); text-decoration:none;
  transition:color .3s ease-out;
}
.end-link .roll{ font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; text-transform:none; font-size:clamp(2rem, 1rem + 2.6vw, 3.6rem); color:inherit; }
.end-sub{ font-size:clamp(1.05rem, .9rem + .5vw, 1.4rem); font-weight:600; letter-spacing:-.01em; }
.end-link:hover, .end-link:focus-visible{ color:var(--paper); }
.end-mark{ margin-top:clamp(4rem, 2rem + 6vw, 8rem); color:var(--ink); }
.end-mark .wm{ display:block; width:100%; height:auto; }
.end-bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(10,10,10,.35);
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
}
.end-bottom p{ margin:0 auto 0 0; }
.end-bottom a{ color:var(--ink); text-decoration:none; }
.end-bottom a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:767px){
  .end-top{ grid-template-columns:1fr; }
  .end-links{ grid-column:1; grid-row:auto; }
}

/* barrel-roll letters (component hub prompt-barrel-roll-link.md): face-0 stays in flow */
.roll .rl{ position:relative; display:inline-block; overflow:hidden; height:1.2em; line-height:1.2em; vertical-align:top; }
.roll .rf{ display:block; height:1.2em; white-space:pre; }
.roll .rf0{ position:relative; }
.roll .rf1{ position:absolute; top:0; left:0; transform:translateY(-100%); opacity:0; }
.end-link .roll .rl, .end-link .roll .rf{ height:1.05em; line-height:1.05em; }

@media (prefers-reduced-motion:reduce){
  .wp, .wp-img img, .tb-cta, .tb-cta::before, .nl-row{ transition:none !important; }
}

/* ---------------------------------------------------------------- hero gallery (3D parallax unfurling, vanilla port)
   Pinned 100svh stage. Gallery starts clipped to the right half, js/hero-gallery.js scrubs it to full screen. */
.hero-pin{ position:relative; height:100svh; overflow:hidden; background:var(--ink); }
.hero-gallery{ position:absolute; inset:0; z-index:1; }
.hg-stage{ position:absolute; inset:0; perspective:1000px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hg-matrix{
  display:flex; gap:clamp(12px, 1.6vw, 24px); justify-content:center; align-items:center; flex:none;
  width:125vw; height:300vh; transform-style:preserve-3d; will-change:transform;
}
.hg-col{ display:flex; flex-direction:column; gap:clamp(12px, 1.6vw, 24px); width:17vw; min-width:120px; flex:none; will-change:transform; }
.hg-col img{ display:block; width:100%; height:auto; aspect-ratio:5/8; object-fit:cover; object-position:top; border-radius:22px; opacity:.95; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
/* left stack: wordmark high, a short statement under it (no card) */
.hero-left{ position:absolute; z-index:2; left:var(--edge); top:calc(var(--bar-h, 4.7rem) + 2rem + clamp(1.25rem, 3.5vh, 2.75rem)); width:calc(50% - var(--edge) - 1.5rem); color:var(--paper); }
.hero-mark{ color:var(--paper); }
.hero-mark .wm{ display:block; width:100%; height:auto; }
.hero-side{ margin-top:clamp(1.25rem, 2.6vh, 2rem); }
.hero-title{ font-size:clamp(1rem, .86rem + .45vw, 1.3rem); line-height:1.2; font-weight:600; letter-spacing:-.015em; max-width:26ch; color:var(--paper); }
.hero-aside{ margin:.7rem 0 0; color:rgba(255,255,255,.58); font-size:clamp(.82rem, .78rem + .12vw, .9rem); line-height:1.5; max-width:40ch; text-wrap:balance; }
.hero-center{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:min(34rem, 80vw); text-align:center; opacity:0; pointer-events:none; }
.hero-center-title{ font-size:clamp(2rem, 1.2rem + 2.6vw, 4rem); line-height:.98; color:var(--paper); }
.hero-center-text{ margin:1.25rem auto 0; color:rgba(255,255,255,.72); font-size:clamp(.98rem, .93rem + .2vw, 1.1rem); line-height:1.55; max-width:36ch; }
.work-section{ background:var(--ink); padding:clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--edge) clamp(2.5rem, 2rem + 3vw, 5rem); }
.work-section .work-grid{ margin-top:0; }
@media (max-width:767px){
  .hero-left{ width:calc(72% - var(--edge)); }
  .hero-mark{ width:70%; }
  .hg-matrix{ height:170vh; }
  .hero-center{ width:62vw; }
}

/* Sticky bottom edge blur. Six stacked backdrop-filter layers, each masked in and out so blur ramps up smoothly (no hard edge). */
.edge-blur{ position:fixed; left:0; right:0; bottom:0; height:max(19svh, 120px); z-index:50; pointer-events:none; }
.edge-blur i{ position:absolute; inset:0; }
.edge-blur i:nth-child(1){ backdrop-filter:blur(.5px); -webkit-backdrop-filter:blur(.5px); mask-image:linear-gradient(to bottom, transparent 0%, #000 14.3%, #000 28.6%, transparent 42.9%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14.3%, #000 28.6%, transparent 42.9%); }
.edge-blur i:nth-child(2){ backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); mask-image:linear-gradient(to bottom, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); -webkit-mask-image:linear-gradient(to bottom, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); }
.edge-blur i:nth-child(3){ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); mask-image:linear-gradient(to bottom, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); -webkit-mask-image:linear-gradient(to bottom, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); }
.edge-blur i:nth-child(4){ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); mask-image:linear-gradient(to bottom, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); -webkit-mask-image:linear-gradient(to bottom, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); }
.edge-blur i:nth-child(5){ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); mask-image:linear-gradient(to bottom, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100%); }
.edge-blur i:nth-child(6){ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); mask-image:linear-gradient(to bottom, transparent 71.4%, #000 85.7%, #000 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 71.4%, #000 85.7%, #000 100%); }

/* Loader: the bq mark spins in on paper, lands, an ink circle grows out of its bowl and flips the colours,
   then the screen splits along the mark's own 45deg cut (svg x+y=771, through the mark's centre) and the
   two halves slide apart. js/loader.js drives it; the failsafe hides it if JS never runs. */
.loader{ position:fixed; inset:0; z-index:var(--z-boot-cover); pointer-events:none; animation:ld-failsafe 0s 4s forwards; --L:calc(100vw + 100vh); }
.ld-light, .ld-half, .ld-dark{ position:absolute; inset:0; }
.ld-light{ background:var(--paper); color:var(--ink); }
.ld-dark{ background:var(--ink); color:var(--paper); clip-path:circle(0px at 50% 50%); }
.ld-half{ will-change:transform; }
.ld-half--a{ clip-path:polygon(calc(50% - var(--L)) calc(50% - var(--L)), calc(50% + var(--L) + 2px) calc(50% - var(--L) + 2px), calc(50% - var(--L) + 2px) calc(50% + var(--L) + 2px)); } /* +2px tucks under half b so no anti-aliased seam shows before the split */
.ld-half--b{ clip-path:polygon(calc(50% + var(--L)) calc(50% - var(--L)), calc(50% + var(--L)) calc(50% + var(--L)), calc(50% - var(--L)) calc(50% + var(--L))); }
.ld-logo{ position:absolute; left:50%; top:50%; height:clamp(150px, 30svh, 320px); width:auto; aspect-ratio:600/944; translate:-50% -50%; opacity:0; }
@keyframes ld-failsafe{ to{ visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .loader{ display:none; } }

/* goo text reveal (js/goo-reveal.js): hidden until JS takes over, only when scripting runs */
@media (scripting:enabled){ [data-goo]{ visibility:hidden; } }

/* marquee under the sticky bar (lives inside the pinned hero, so it scrolls away with it): black with white type, hover freezes it and flips it to white.
   Alternate items are outlined so the strip reads like a limited-edition label. */
.marquee{
  --mq-fg:#fff; --mq-bg:#0a0a0a;
  position:absolute; z-index:3; left:0; right:0; top:var(--bar-h, 4.7rem); height:2rem; overflow:hidden;
  background:var(--mq-bg); color:var(--mq-fg); border-bottom:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; transition:background-color .25s ease, color .25s ease;
}
.marquee:hover{ --mq-fg:#0a0a0a; --mq-bg:#fff; border-bottom-color:rgba(0,0,0,.14); }
.mq-track{ display:flex; width:max-content; animation:mq-run 38s linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-group{ display:flex; flex:none; align-items:center; }
.mq-i{ display:inline-flex; align-items:center; flex:none; font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--mq-fg); }
.mq-i::after{ content:""; width:6px; height:6px; margin-inline:1.6rem; background:var(--mq-fg); transform:rotate(45deg); flex:none; }
.mq-o{ color:transparent; -webkit-text-stroke:1px var(--mq-fg); font-weight:800; }
@keyframes mq-run{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mq-track{ animation:none; } }

/* ---------------------------------------------------------------- showcase: exactly one screen
   Heading + four panels + captions always add up to 100svh, never more. */
.karya-screen{
  height:100svh; min-height:30rem; display:flex; flex-direction:column; background:var(--ink);
  padding:calc(var(--bar-h, 4.7rem) + 1.25rem) var(--edge) var(--edge); overflow:hidden;
}
.karya-screen h2{ font-size:clamp(1.8rem, 1rem + 2.4vw, 3.2rem); line-height:1; margin:0 0 clamp(.9rem, 2vh, 1.5rem); }
.karya-screen .work-grid{ flex:1; min-height:0; margin:0; }
.karya-screen .wp{ display:flex; flex-direction:column; }
.karya-screen .wp-img{ flex:1; min-height:0; height:auto; aspect-ratio:auto; }
.karya-screen .wp-cap{ flex:none; }
@media (max-width:767px){ .karya-screen .wp-img{ aspect-ratio:auto; } }

/* ---------------------------------------------------------------- pricing cards (paper) */
.pc-grid{ display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:clamp(.75rem, 1.5vw, 1.25rem); margin-top:clamp(2rem, 4vw, 3rem); align-items:stretch; }
.home .rows-section .pc-card{
  display:flex; flex-direction:column; gap:1.25rem; border:1px solid var(--divider-on-paper); border-radius:var(--radius);
  padding:clamp(1.25rem, 1rem + 1vw, 2rem); background:transparent; color:var(--ink);
  transition:transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo);
}
.home .rows-section .pc-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(10,10,10,.35); }
.home .rows-section .pc-card.is-recommended{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pc-head{ display:grid; gap:.5rem; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pc-head:hover, .pc-head:focus-visible{ background:transparent; }
.home .rows-section .pc-head:hover{ background:transparent; }
.pc-card .name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.home .rows-section .pc-card .price{ justify-self:start; text-align:left; font-weight:800; letter-spacing:-.045em; font-size:clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem); line-height:1; white-space:normal; color:inherit; }
.home .rows-section .pc-card .price.is-accent{ color:var(--sun, #FF8A1F); }
.home .rows-section .pc-card .price-sub{ margin-top:.5rem; font-size:.85rem; letter-spacing:0; font-weight:500; color:inherit; opacity:.7; }
.home .rows-section .pc-card .line{ margin:0; font-size:.95rem; color:inherit; opacity:.72; }
.pc-points{ list-style:none; margin:0; padding:1.1rem 0 0; border-top:1px solid currentColor; border-top-color:color-mix(in srgb, currentColor 22%, transparent); display:grid; gap:.7rem; flex:1; }
.pc-points li{ position:relative; padding-left:1.35rem; font-size:.95rem; line-height:1.45; }
.pc-points li::before{ content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; border-radius:50%; background:currentColor; opacity:.9; }
.pc-card.is-recommended .pc-points li::before{ background:var(--sun, #FF8A1F); }
.pc-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; }
.pc-more{ padding:0; border:0; background:transparent; color:inherit; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; opacity:.65; cursor:pointer; text-decoration:underline; text-underline-offset:.3em; }
.pc-more:hover, .pc-more:focus-visible{ opacity:1; background:transparent !important; }
.pc-wa{ display:inline-flex; align-items:center; padding:.75em 1.25em; border-radius:999px; border:1px solid currentColor; color:inherit; text-decoration:none; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; transition:background-color .3s ease, color .3s ease; }
.home .rows-section .pc-wa:hover{ background:var(--ink); color:var(--paper); }
.home .rows-section .pc-card.is-recommended .pc-wa{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.home .rows-section .pc-card.is-recommended .pc-wa:hover{ background:var(--sun, #FF8A1F); border-color:var(--sun, #FF8A1F); }
.pc-addons-title{ margin:clamp(2.5rem, 4vw, 4rem) 0 0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.home .rows-section .price-list--addons{ margin-top:.75rem; border-top:1px solid var(--divider-on-paper); }
@media (max-width:900px){ .pc-grid{ grid-template-columns:1fr; } }

/* footer: the fixed edge blur would smear the footer text, so it is hidden while the footer is on screen */
.edge-blur.is-off{ visibility:hidden; }

/* ---------------------------------------------------------------- hero: offer + two actions */
.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.hero-btn{
  display:inline-flex; align-items:center; padding:.8em 1.35em; border-radius:999px; border:1px solid rgba(255,255,255,.5); color:var(--paper);
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transition:background-color .3s var(--ease-out-expo), color .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}
.hero-btn:hover, .hero-btn:focus-visible{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-btn--main{ background:var(--flame); border-color:var(--flame); color:var(--ink); font-weight:600; }
.hero-btn--main:hover, .hero-btn--main:focus-visible{ background:var(--paper); border-color:var(--paper); }

/* ---------------------------------------------------------------- concept viewer: one screen, three tabs */
.kv-screen{ height:100svh; min-height:32rem; display:flex; flex-direction:column; background:var(--ink); padding:calc(var(--bar-h, 4.7rem) + 1.25rem) var(--edge) var(--edge); overflow:hidden; }
.kv-head h2{ font-size:clamp(1.8rem, 1rem + 2.4vw, 3.2rem); line-height:1; margin:0; }
.kv-head p{ margin:.7rem 0 0; max-width:62ch; color:var(--muted); font-size:.9rem; line-height:1.5; }
.kv{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(16rem, 4fr) 8fr; gap:clamp(1rem, 2.5vw, 2.5rem); margin-top:clamp(1rem, 2.5vh, 2rem); }
.kv-side{ display:flex; flex-direction:column; justify-content:flex-start; min-height:0; gap:1.75rem; }
.kv-tabs{ display:flex; flex-direction:column; border-top:1px solid var(--divider); }
.kv-tab{
  display:grid; gap:.35rem; text-align:left; padding:1.1rem 0; border:0; border-bottom:1px solid var(--divider); background:transparent; color:var(--muted); font:inherit; cursor:pointer;
  transition:color .3s var(--ease-out-expo);
}
.kv-tab .kv-name{ font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; font-size:clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height:1; }
.kv-tab .kv-line{ font-size:.92rem; line-height:1.5; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--ease-out-expo), opacity .3s ease; }
.kv-tab:hover, .kv-tab:focus-visible{ color:var(--paper); }
.kv-tab[aria-selected="true"]{ color:var(--paper); }
.kv-tab[aria-selected="true"] .kv-line{ max-height:8em; opacity:1; color:rgba(255,255,255,.7); }
.kv-tab:focus-visible{ outline:1px solid var(--flame); outline-offset:2px; }
.kv-cta{
  align-self:flex-start; display:inline-flex; padding:.9em 1.5em; border-radius:999px; background:var(--flame); color:var(--ink); text-decoration:none;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; transition:background-color .3s var(--ease-out-expo);
}
.kv-cta:hover, .kv-cta:focus-visible{ background:var(--paper); }
.kv-stage{ position:relative; min-height:0; }
.kv-slide{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; }
.kv-slide[hidden]{ display:none; }
.kv-desk{ display:block; max-width:92%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius); }
.kv-phone{ position:absolute; right:0; bottom:0; height:min(78%, 34rem); width:auto; border-radius:22px; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 24px 50px -20px rgba(0,0,0,.8); }
@media (max-width:767px){
  .kv-screen{ min-height:0; }
  .kv{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:1rem; }
  .kv-side{ flex-direction:column; }
  .kv-tabs{ flex-direction:row; border-top:0; gap:.5rem; }
  .kv-tab{ flex:1; padding:.7rem .6rem; border:1px solid var(--divider); border-radius:12px; }
  .kv-tab .kv-name{ font-size:1.05rem; letter-spacing:-.02em; }
  .kv-tab[aria-selected="true"]{ border-color:var(--paper); }
  .kv-tab .kv-line{ display:none; }
  .kv-cta{ order:3; align-self:stretch; justify-content:center; }
  .kv-desk{ display:none; }
  .kv-phone{ position:static; height:100%; max-height:100%; }
  .kv-slide{ padding-bottom:.25rem; }
}

/* ---------------------------------------------------------------- how to start */
.steps{ list-style:none; margin:clamp(2rem, 4vw, 3.5rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--divider-on-paper); }
.steps li{ display:grid; gap:.4rem; padding:1.25rem clamp(.75rem, 2vw, 1.75rem) 0 0; }
.steps li + li{ padding-left:clamp(.75rem, 2vw, 1.75rem); border-left:1px solid var(--divider-on-paper); }
.st-t{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.2rem, 1rem + .8vw, 1.8rem); line-height:1.1; }
.st-d{ color:var(--muted-on-paper); font-size:.95rem; line-height:1.5; }
@media (max-width:767px){ .steps{ grid-template-columns:1fr; } .steps li + li{ padding-left:0; border-left:0; border-top:1px solid var(--divider-on-paper); margin-top:1.25rem; padding-top:1.25rem; } }

/* manifesto: one tight screen instead of four */
.heat .manifesto-list{ padding-block:clamp(3rem, 2rem + 4vw, 6rem); }
.heat .m-stage{ min-height:0; }
.heat .m-stage + .m-stage{ margin-top:clamp(28px, 4vw, 56px); }
.heat .m-stage:nth-child(3) .m-big{ font-size:clamp(3rem, .8rem + 6.5vw, 8rem); line-height:.9; max-width:14ch; }

/* one-screen sections keep their last row above the fixed bottom blur */
.karya-screen, .kv-screen{ padding-bottom:clamp(3rem, 10svh, 6rem); }

/* pricing: two cards only */
.pc-grid{ grid-template-columns:1fr 1fr; max-width:62rem; }
.pc-more-note{ margin:clamp(1.5rem, 3vw, 2.5rem) 0 0; color:var(--muted-on-paper); font-size:.95rem; }
.pc-more-note a{ color:inherit; text-underline-offset:.25em; }
@media (max-width:900px){ .pc-grid{ grid-template-columns:1fr; } }

/* ================================================================ round 12 */
/* ---- hero: offer first, wordmark underneath */
.hero-left{ display:flex; flex-direction:column; width:calc(52% - var(--edge)); }
.hero-side{ margin:0; order:1; }
.hero-mark{ order:2; width:min(58%, 48svh); margin-top:clamp(1.5rem, 4svh, 3rem); }
.hero-title{ font-size:clamp(2.1rem, .9rem + 3.1vw, 4.2rem); line-height:.98; letter-spacing:-.04em; font-weight:800; max-width:15ch; }
.hero-aside{ font-size:clamp(.98rem, .9rem + .3vw, 1.2rem); max-width:36ch; margin-top:1rem; color:rgba(255,255,255,.72); }
.hero-actions{ margin-top:1.4rem; }
@media (max-width:767px){
  .hero-left{ width:calc(70% - var(--edge)); }
  .hero-title{ font-size:clamp(1.55rem, 1rem + 2.6vw, 2.1rem); max-width:12ch; }
  .hero-aside{ font-size:.86rem; }
  .hero-mark{ width:78%; margin-top:1.25rem; }
}

/* ---- hero end state: phone, then a quiet card with the words */
.hero-center{
  top:calc(var(--bar-h, 4.7rem) + 2.75rem); translate:-50% 0; width:min(34rem, 80vw);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1rem, 3svh, 1.75rem);
}
.phone{
  position:relative; height:min(44svh, 25rem); aspect-ratio:9 / 19; border-radius:2.1rem; padding:.5rem; background:#161616;
  box-shadow:0 0 0 1.5px #2c2c2c, 0 0 0 5px #0d0d0d, 0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone-island{ position:absolute; z-index:2; top:.85rem; left:50%; translate:-50% 0; width:28%; height:.8rem; border-radius:999px; background:#000; }
.phone-screen{ display:block; width:100%; height:100%; border-radius:1.65rem; object-fit:cover; object-position:top; }
.hero-center-card{
  text-align:center; padding:clamp(1rem, 2.4svh, 1.6rem) clamp(1.1rem, 2.4vw, 1.9rem); border-radius:20px;
  background:rgba(10,10,10,.34); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.035);
}
.hero-center-title{ font-size:clamp(1.7rem, 1rem + 2.1vw, 3.1rem); }
.hero-center-text{ margin-top:.8rem; font-size:clamp(.9rem, .85rem + .2vw, 1.05rem); }
@media (max-width:767px){ .hero-center{ width:62vw; } .phone{ height:min(34svh, 15rem); border-radius:1.6rem; } .phone-screen{ border-radius:1.2rem; } }

/* ---- concept slider */
.kv-stage{ container-type:size; }
.kv-slide{ align-items:center; justify-content:center; }
.ba{ --p:50%; position:relative; width:min(100cqw, 159.8cqh); aspect-ratio:1600 / 1001; border-radius:var(--radius); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize; background:#111; }
.ba-after, .ba-before{ position:absolute; inset:0; }
.ba-before{ clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.ba picture, .ba-img{ display:block; width:100%; height:100%; }
.ba-img{ object-fit:cover; object-position:left top; pointer-events:none; -webkit-user-drag:none; }
.ba-phone{ position:absolute; right:3%; bottom:5%; height:64%; width:auto; border-radius:22px; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 24px 50px -18px rgba(0,0,0,.85); pointer-events:none; }
.ba-handle{ position:absolute; z-index:4; top:0; bottom:0; left:var(--p); width:48px; translate:-50% 0; display:grid; place-items:center; cursor:ew-resize; outline:none; }
.ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; translate:-50% 0; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.ba-grip{
  position:relative; width:46px; height:46px; border-radius:50%; background:rgba(10,10,10,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.4); transition:transform .3s var(--ease-out-expo);
}
.ba-grip::before, .ba-grip::after{ content:""; position:absolute; top:50%; width:7px; height:7px; border:solid #fff; border-width:2px 0 0 2px; }
.ba-grip::before{ left:12px; rotate:-45deg; translate:0 -50%; }
.ba-grip::after{ right:12px; rotate:135deg; translate:0 -50%; }
.ba:hover .ba-grip, .ba-handle:focus-visible .ba-grip{ transform:scale(1.12); }
.ba-handle:focus-visible .ba-grip{ box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 3px var(--flame); }
.ba-tag{
  position:absolute; z-index:3; top:1rem; padding:.55em 1em; border-radius:999px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(10,10,10,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); pointer-events:none;
}
.ba-tag--before{ left:1rem; visibility:hidden; }
.ba-tag--after{ right:1rem; visibility:hidden; }
.ba-tag--before.is-off{ visibility:hidden; }
@media (max-width:767px){
  .ba{ width:min(100cqw, 46.2cqh); aspect-ratio:375 / 812; }
  .ba-phone{ display:none; }
  .ba-img{ object-position:top; }
}

/* ---- pricing: two strong offers (Osmo-style dark + hot), big numbers, one action each */
.pc-grid{ grid-template-columns:1fr 1fr; max-width:none; gap:clamp(.75rem, 1.6vw, 1.25rem); align-items:stretch; }
.home .rows-section .pc-card{ border:0; border-radius:28px; padding:clamp(1.5rem, 1rem + 2vw, 3rem); gap:1.4rem; min-height:clamp(30rem, 48vw, 40rem); }
.home .rows-section .pc-card.pc-dark{ background:var(--ink); color:var(--paper); }
.home .rows-section .pc-card.pc-hot{ background:var(--flame); color:var(--ink); }
.pc-top{ display:grid; gap:.3rem; }
.pc-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.25rem, 1rem + .8vw, 1.8rem); letter-spacing:-.03em; margin:0; }
.pc-who{ margin:0; font-size:.95rem; opacity:.7; }
.pc-price{ margin:.4rem 0 0; display:grid; gap:.4rem; }
.pc-amount{ font-family:var(--font-display); font-weight:800; letter-spacing:-.055em; line-height:.88; font-size:clamp(3.6rem, 1.8rem + 6vw, 8rem); }
.pc-dark .pc-amount{ color:var(--sun); }
.pc-price .price-sub{ font-size:1rem; font-weight:600; opacity:.85; margin:0; }
.pc-line{ margin:0; font-size:1.05rem; opacity:.8; }
.pc-card .pc-points{ margin-top:auto; padding-top:1.4rem; border-top:1px solid color-mix(in srgb, currentColor 25%, transparent); gap:.8rem; }
.pc-card .pc-points li{ font-size:1rem; }
.pc-card .pc-points li::before{ width:.5rem; height:.5rem; top:.55em; background:currentColor; }
.pc-dark .pc-points li::before{ background:var(--sun); }
.pc-wa{ display:flex; justify-content:space-between; align-items:center; padding:1.15em 1.5em; border-radius:999px; text-decoration:none; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600; border:0; transition:background-color .3s var(--ease-out-expo), color .3s var(--ease-out-expo), gap .3s; }
.home .rows-section .pc-dark .pc-wa{ background:var(--paper); color:var(--ink); }
.home .rows-section .pc-dark .pc-wa:hover{ background:var(--sun); color:var(--ink); }
.home .rows-section .pc-hot .pc-wa{ background:var(--ink); color:var(--paper); }
.home .rows-section .pc-hot .pc-wa:hover{ background:var(--paper); color:var(--ink); }
.pc-trust{ margin:1.25rem 0 0; color:var(--muted-on-paper); font-size:.95rem; }
@media (max-width:900px){ .pc-grid{ grid-template-columns:1fr; } .home .rows-section .pc-card{ min-height:0; } }

/* pricing blocks sit inside the page gutter */
.home .rows-section .pc-grid, .home .rows-section .steps{ margin-inline:var(--edge); }
.home .rows-section .pc-trust, .home .rows-section .pc-more-note{ margin-inline:var(--edge); }

@media (max-width:767px){
  .ba-tag{ top:.55rem; font-size:.6rem; padding:.45em .75em; letter-spacing:.08em; }
  .ba-tag--before{ left:.55rem; } .ba-tag--after{ right:.55rem; }
}

/* slop-judge round fixes: solid-enough bar over light sections, legible marquee, full-width slider on phones */
.topbar{ background:linear-gradient(180deg, rgba(14,14,14,.9), rgba(10,10,10,.82)); }
.mq-o{ color:var(--flame); -webkit-text-stroke:0; font-weight:500; }
.marquee:hover .mq-o{ color:var(--ember); }

/* ---- hero, premium version: small statement, big wordmark at the bottom, lots of black */
.hero-left{ top:auto; bottom:clamp(1.25rem, 4svh, 3rem); width:calc(56% - var(--edge)); justify-content:flex-end; }
.hero-side{ order:1; margin:0; }
.hero-title{ font-size:clamp(1rem, .9rem + .4vw, 1.3rem); line-height:1.25; font-weight:600; letter-spacing:-.015em; max-width:30ch; }
.hero-aside{ font-size:clamp(.85rem, .8rem + .15vw, .95rem); line-height:1.55; max-width:44ch; margin-top:.6rem; color:rgba(255,255,255,.6); }
.hero-mark{ order:2; width:100%; margin-top:clamp(2.5rem, 9svh, 6rem); }
@media (max-width:767px){
  .hero-left{ width:calc(70% - var(--edge)); }
  .hero-title{ font-size:1.05rem; }
  .hero-aside{ font-size:.82rem; }
  .hero-mark{ width:100%; margin-top:2rem; }
}
/* keep the wordmark clear of the bottom blur */
.hero-left{ bottom:calc(max(19svh, 120px) + .75rem); }
@media (max-width:767px){ .hero-left{ bottom:calc(max(19svh, 120px) + .5rem); } }

/* the hero carries its own bottom blur (inside the pinned stage, under the words), so the cards soften where they end
   while the centre text stays crisp; the page-level blur is off while the hero is on screen (js/marquee.js) */
.edge-blur--hero{ position:absolute; z-index:2; }

/* ---- hero round 14: wordmark sits low, carousel passes OVER it (z 3), wordmark blurs out instead of fading */
.hero-gallery{ z-index:3; }
.hero-left{ z-index:2; bottom:clamp(1rem, 3svh, 2rem); }
.hero-mark{ width:min(100%, 88svh); margin-top:clamp(1.5rem, 5svh, 3.5rem); will-change:filter; }
.edge-blur--hero{ z-index:4; }
.hero-center{ z-index:5; }
@media (max-width:767px){
  .hero-left{ bottom:calc(max(19svh, 120px) * .6); }
  .hero-mark{ width:min(100%, 70svh); margin-top:1.5rem; }
}
@media (min-width:768px) and (max-width:1100px){ .hero-left{ width:calc(48% - var(--edge)); bottom:calc(max(19svh, 120px) * .6); } }

/* ---- nilai round 15: one sticky stage, whole visual always in view; rows 2-4 share one phone, only the spotlight moves */
.nl-card{ align-self:start; position:sticky; top:calc(var(--bar-h, 4.7rem) + 1.25rem); }
.nl-stage{ position:relative; overflow:hidden; border-radius:20px; background:#0b0b0b; aspect-ratio:6 / 5; width:min(100%, calc((100svh - var(--bar-h, 4.7rem) - 3rem) * 1.2)); }
.nl-guide{ display:none; }
.nl-scene{ position:absolute; inset:0; display:grid; place-items:center; clip-path:inset(0 0 100% 0); }
.nl-scene.is-on{ clip-path:inset(0); }
.nl-s-brand{ background:#f2f0eb; display:block; }
.nl-bp{ position:absolute; display:block; width:72%; height:auto; border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.35); }
.nl-bp-a{ left:5%; top:6%; } .nl-bp-b{ right:5%; bottom:6%; }
.nl-s-phone{ background:radial-gradient(70% 60% at 50% 45%, #1b1b1b, #0b0b0b); }
.nl-stage{ container-type:size; }
.nl-phone{ height:92cqh; width:auto; aspect-ratio:9 / 19; flex:none; }
.nl-phone .phone-screen{ display:block; width:100%; height:100%; object-fit:cover; }
.nl-s-online{ background:#0b0b0b; }
.nl-s-online img{ display:block; width:88%; height:auto; border-radius:10px; box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.nl-dim{ z-index:100; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) var(--sr, 40%), rgba(6,6,6,.6) calc(var(--sr, 40%) + 18%)); }
.nl-ring{ z-index:101; position:absolute; left:0; top:0; border:2px solid var(--flame); border-radius:999px; opacity:0; pointer-events:none; }
.nl-ring.is-pulse{ animation:nlPulse 1.6s ease-out infinite; }
@keyframes nlPulse{ 0%{ box-shadow:0 0 0 0 rgba(250,82,10,.55); } 100%{ box-shadow:0 0 0 14px rgba(250,82,10,0); } }
@media (prefers-reduced-motion: reduce){ .nl-ring.is-pulse{ animation:none; } }

/* ---- round 16: marquee above the carousel, shorter hero blur so the wordmark stays sharp, end-card link */
.marquee{ z-index:6; }
.edge-blur--hero{ height:max(11svh, 90px); }
.hero-left{ bottom:calc(max(11svh, 90px) * .95); }
.hero-center-link{ display:inline-block; margin-top:1rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--flame); }
.hero-center-link:hover{ color:var(--ember); }
@media (max-width:767px){
  .hero-left{ bottom:calc(max(11svh, 90px) * .95); }
}
@media (min-width:768px) and (max-width:1100px){ .hero-left{ bottom:calc(max(11svh, 90px) * .95); } }
.hero-center.is-live .hero-center-link{ pointer-events:auto; }

/* ---- pricing as a ledger: two full-width rows split by hairlines, no cards */
.pl-list{ margin:clamp(2rem, 4vw, 3rem) var(--edge) 0; border-top:1px solid var(--ink); }
.pl-row{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.2fr); column-gap:clamp(1.5rem, 3vw, 3.5rem); align-items:start; padding:clamp(1.75rem, 1.2rem + 2vw, 3rem) 0; border-bottom:1px solid var(--divider-on-paper); }
.pl-name{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.7rem, 1.1rem + 2vw, 2.8rem); line-height:1; }
.pl-who{ margin:.75rem 0 0; max-width:30ch; color:var(--muted-on-paper); line-height:1.5; }
.pl-points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem clamp(1rem, 2vw, 2rem); font-size:.95rem; line-height:1.45; }
.pl-row--brand .pl-points{ grid-template-columns:1fr; }
.pl-points li{ padding-top:.7rem; border-top:1px solid var(--divider-on-paper); }
.pl-buy{ text-align:right; display:grid; justify-items:end; gap:.35rem; }
.pl-price{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.05em; line-height:.9; font-size:clamp(2.8rem, 1.5rem + 4.2vw, 6.2rem); white-space:nowrap; }
.pl-row--brand .pl-price{ color:var(--ember); }
.pl-save{ margin:0; font-size:1rem; color:var(--muted-on-paper); }
.pl-cta{ margin-top:1rem; display:inline-flex; gap:.75rem; align-items:center; padding:.8em 1.4em; border-radius:999px; background:var(--ink); color:var(--paper); font-weight:600; transition:background-color .25s ease, color .25s ease; }
.pl-cta:hover{ background:var(--ember); }
@media (max-width:900px){
  .pl-row{ grid-template-columns:1fr; row-gap:1.25rem; }
  .pl-points{ grid-template-columns:1fr; }
  .pl-buy{ text-align:left; justify-items:start; }
}

/* karya tiles are 4:5 reflowed mobile captures, so no word is cut at the edge */
.wp-img img, .wp:nth-child(n+2) .wp-img img{ object-position:center top; }
@media (max-width:767px){ .karya-screen .wp-img{ aspect-ratio:4 / 5; } }
@media (min-width:768px){ .karya-screen .wp-img{ flex:none; height:min(calc((100vw - 2 * var(--edge) - 36px) / 4 * 1.25), calc(100svh - 14rem)); } }

/* konsep on phones: stage tall enough for a whole phone-shaped comparison, framed at the images' own ratio */
@media (max-width:767px){
  .kv-screen{ height:auto; min-height:100svh; }
  .kv-stage{ flex:none; height:min(72svh, 600px); margin-top:1.25rem; }
  .ba{ width:min(100cqw, 46.2cqh); aspect-ratio:375 / 812; height:auto; }
}

/* hero end card: no box, just the words */
.hero-center-card{ background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; }
.hero-center-text{ max-width:30ch; margin-inline:auto; }
/* faq */
.faq{ margin:clamp(2.5rem, 4vw, 4rem) var(--edge) 0; border-top:1px solid var(--ink); }
.faq-h{ margin:1.25rem 0 .75rem; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.faq details{ border-top:1px solid var(--divider-on-paper); padding:1rem 0; }
.faq summary{ cursor:pointer; list-style:none; font-weight:600; font-size:1.05rem; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; transition:rotate .25s ease; }
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ margin:.75rem 0 0; max-width:64ch; color:var(--muted-on-paper); line-height:1.6; }

/* ---- karya round 17: five whole desktop screenshots, 3 + 2, nothing zoomed or cropped */
@media (min-width:768px){
  .karya-screen{ height:auto; min-height:100svh; }
  .karya-screen .work-grid{ flex:none; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:clamp(1rem, 1.6vw, 1.5rem); margin-top:clamp(1.25rem, 3svh, 2rem); }
  .karya-screen .wp{ flex:0 0 calc((100% - 2 * clamp(1rem, 1.6vw, 1.5rem)) / 3); }
  .karya-screen .wp-img{ flex:none; height:auto; aspect-ratio:16 / 10; }
  .karya-screen .wp-img img{ object-fit:cover; object-position:center top; }
}
@media (max-width:767px){ .karya-screen .wp-img{ aspect-ratio:16 / 10; } }

/* ---- pricing, Osmo pattern: two big colour blocks, mono tag, huge name, price, full-width button, checklist */
.os-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem, 1.4vw, 1.25rem); margin:clamp(2rem, 4vw, 3rem) var(--edge) 0; }
.os-card{ position:relative; display:flex; flex-direction:column; gap:1.1rem; padding:clamp(1.5rem, 1rem + 1.6vw, 2.5rem); border-radius:20px; }
.os-card--a{ background:var(--flame); color:var(--ink); }
.os-card--b{ background:var(--ink); color:var(--paper); }
.os-tag{ align-self:flex-start; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.3em .6em; border-radius:4px; background:rgba(10,10,10,.14); }
.os-card--b .os-tag{ background:rgba(255,255,255,.14); }
.os-note{ position:absolute; top:clamp(1.5rem, 1rem + 1.6vw, 2.5rem); right:clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-family:var(--font-mono); font-size:.78rem; color:var(--sun, #FF8A1F); }
.os-name{ margin:clamp(1rem, 3svh, 2.2rem) 0 0; font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; font-size:clamp(2.6rem, 1.6rem + 3.6vw, 5rem); line-height:.95; }
.os-price{ margin:0; display:flex; align-items:baseline; gap:.6rem; }
.os-amount{ font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; font-size:clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); }
.os-cur{ opacity:.6; font-size:1rem; }
.os-bill{ margin:0; max-width:34ch; font-size:.95rem; line-height:1.45; opacity:.75; }
.os-cta{ display:block; text-align:center; padding:.95em 1em; border-radius:4px; font-weight:600; background:var(--ink); color:var(--paper); transition:background-color .25s ease, color .25s ease; }
.os-card--b .os-cta{ background:var(--flame); color:var(--ink); }
.os-cta:hover{ background:var(--paper); color:var(--ink); }
.os-points{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.7rem; font-size:.97rem; line-height:1.4; }
.os-points li{ position:relative; padding-left:1.6rem; }
.os-points li::before{ content:""; position:absolute; left:0; top:.28em; width:.9rem; height:.5rem; border-left:2px solid currentColor; border-bottom:2px solid currentColor; rotate:-45deg; }
@media (max-width:900px){ .os-grid{ grid-template-columns:1fr; } .os-note{ position:static; align-self:flex-start; } }
.faq-h{ font-size:clamp(2rem, 1.2rem + 3vw, 4rem); letter-spacing:-.04em; font-weight:700; margin:1.5rem 0 1.25rem; }
.os-cta{ text-decoration:none; }

/* subtle concept note + free-demo line */
.hero-note{ position:absolute; z-index:7; right:var(--edge); bottom:.7rem; margin:0; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.32); pointer-events:none; }
.end-free{ margin:1.1rem 0 0; font-size:1.1rem; max-width:44ch; }
.end-free strong{ color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:2px; }

/* ---- promo: 50% off Landing Page for the first 5 clients */
.os-price{ flex-wrap:wrap; align-items:baseline; }
.os-was{ position:relative; font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; font-size:clamp(1.4rem, 1rem + 1vw, 2rem); }
.os-was::after{ content:""; position:absolute; left:-4%; right:-4%; top:54%; height:.12em; background:currentColor; transform-origin:left center; transition:transform .28s cubic-bezier(.77,0,.175,1); }
.os-was.is-pre::after{ transform:scaleX(0); }
.os-amount--promo{ font-size:clamp(3rem, 1.8rem + 4vw, 5.6rem); line-height:.9; display:inline-block; }
.os-badge{ align-self:flex-start; padding:.4em .8em; border-radius:999px; background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
.os-flash{ position:absolute; inset:0; z-index:3; border-radius:inherit; background:#fff; opacity:0; pointer-events:none; }

/* free demo, hero + pricing */
.hero-free{ display:inline-block; margin-top:.9rem; font-weight:700; font-size:clamp(.95rem, .9rem + .25vw, 1.1rem); color:var(--flame); text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:2px; }
.hero-free:hover{ color:var(--sun, #FF8A1F); }
.pc-free{ margin:clamp(1.5rem, 3vw, 2.5rem) var(--edge) 0; font-size:1.15rem; font-weight:600; }
.pc-free strong{ color:var(--ember); font-weight:800; }
.pc-free a{ text-underline-offset:.25em; }


/* ================================================================ round 18: neutomni principles
   one calm system after the hero + karya: big sections of air, mixed sans + serif-italic emphasis,
   text blocks pushed off the left edge, stepped cards. */
.it{ font-style:normal; }

/* manifesto: paper, not the heat field */
#manifesto.heat{ background:var(--ink); }
#manifesto.heat::before{ display:none; }
.heat .m-big, .heat .m-line{ color:var(--paper); }
.heat .m-big.m-accent, .heat .m-accent{ color:var(--flame); }
.heat u .q-word::after{ background:var(--flame) !important; }
.heat .cs-back{ color:var(--paper); }
.heat .cs-back:hover{ color:var(--flame); }
.heat .manifesto-list{ padding-block:clamp(7rem, 22svh, 16rem); }
.heat .m-stage + .m-stage{ margin-top:clamp(5rem, 16svh, 11rem); }
.heat .m-stage:nth-child(2) .m-block{ margin-left:clamp(0px, 28vw, 34rem); max-width:36rem; }
.heat .m-stage:nth-child(3) .m-block{ margin-left:clamp(0px, 8vw, 10rem); }
.heat .manifesto-more{ padding-top:clamp(4rem, 12svh, 8rem); margin-left:clamp(0px, 28vw, 34rem); }
@media (max-width:767px){ .heat .m-stage:nth-child(n) .m-block, .heat .manifesto-more{ margin-left:0; } }

/* konsep, nilai, harga: air above, calmer headings */
.nilai .section-head, #harga .section-head{ padding-top:clamp(8rem, 24svh, 16rem); }
.nilai .section-head h2, #harga .section-head h2, .kv-head h2{ font-size:clamp(2.6rem, 1.2rem + 5vw, 6.4rem); line-height:.95; letter-spacing:-.045em; }
.nilai .section-head p, #harga .section-head p{ margin-top:2rem; }
.nl-desktop{ margin-top:clamp(4rem, 10svh, 8rem); }
.os-grid{ margin-top:clamp(4rem, 10svh, 8rem); }
.faq{ margin-top:clamp(6rem, 16svh, 11rem); }

/* steps: three stepped flame blocks (heights descend), text sits at the bottom */
.steps{ margin:clamp(6rem, 16svh, 11rem) var(--edge) 0; border:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(.75rem, 1.4vw, 1.25rem); align-items:end; }
.steps li, .steps li + li{ border:0; padding:1.6rem; background:var(--flame); color:var(--ink); border-radius:6px; align-content:end; }
.steps li:nth-child(1){ min-height:clamp(15rem, 34svh, 26rem); }
.steps li:nth-child(2){ min-height:clamp(12rem, 26svh, 20rem); }
.steps li:nth-child(3){ min-height:clamp(9rem, 18svh, 14rem); }
.st-t{ font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem); }
.st-d{ color:rgba(10,10,10,.75); }
.pc-trust{ margin:2rem var(--edge) 0; }
@media (max-width:767px){ .steps{ grid-template-columns:1fr; } .steps li, .steps li + li{ min-height:0 !important; padding:1.4rem; margin:0; } }

/* footer */
.end-title{ max-width:11ch; letter-spacing:-.05em; }

/* the hero gallery is decoration: never let it swallow clicks meant for the text under it */
.hero-gallery{ pointer-events:none; }
.hero-free{ position:relative; z-index:5; }
.hero-mark{ margin-block-end:0; font-size:inherit; font-weight:inherit; }

/* ---- faq (Osmo pattern: heading + category pills left, big accordion rows right) */
.faq2{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(2rem, 6vw, 7rem); margin:clamp(6rem, 16svh, 11rem) var(--edge) 0; align-items:start; }
.faq2-side{ position:sticky; top:calc(var(--bar-h, 4.7rem) + 2rem); }
.faq2 .faq-h{ margin:0; font-size:clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height:.98; letter-spacing:-.045em; font-weight:700; max-width:11ch; }
.faq2-sub{ margin:1.5rem 0 0; max-width:30ch; color:var(--muted-on-paper); line-height:1.5; }
.faq2-sub a{ color:var(--ink); text-underline-offset:.25em; }
.faq2-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.faq2-tabs button{ padding:.55em 1.1em; border-radius:999px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; transition:background-color .2s, color .2s; }
.faq2-tabs button:hover{ background:rgba(10,10,10,.08); }
.faq2-tabs button.is-on{ background:var(--ink); color:var(--paper); }
.faq2-list{ border-top:1px solid var(--ink); }
.faq2-item{ border-bottom:1px solid var(--divider-on-paper); }
.faq2-item[hidden]{ display:none; }
.faq2-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; font-size:clamp(1.15rem, 1rem + .7vw, 1.7rem); line-height:1.2; }
.faq2-item summary::-webkit-details-marker{ display:none; }
.faq2-item summary i{ flex:none; position:relative; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--ink); transition:background-color .25s, rotate .3s; }
.faq2-item summary i::before, .faq2-item summary i::after{ content:""; position:absolute; left:50%; top:50%; width:.9rem; height:2px; background:var(--ink); translate:-50% -50%; transition:background-color .25s; }
.faq2-item summary i::after{ rotate:90deg; }
.faq2-item[open] summary i{ rotate:45deg; background:var(--flame); border-color:var(--flame); }
.faq2-item summary:hover i{ background:rgba(10,10,10,.08); }
.faq2-item[open] summary:hover i{ background:var(--flame); }
.faq2-item p{ margin:0; padding:0 4rem 1.8rem 0; max-width:60ch; color:var(--muted-on-paper); line-height:1.65; font-size:1.05rem; }
@media (max-width:900px){ .faq2{ grid-template-columns:1fr; } .faq2-side{ position:static; } .faq2-item p{ padding-right:0; } }

/* ---- steps: three stacking cards that slide over each other */
.stk-list{ display:block !important; margin:clamp(6rem, 16svh, 11rem) var(--edge) 0 !important; padding:0; }
.stk{ position:sticky; display:grid !important; grid-template-columns:auto 1fr; gap:clamp(1.5rem, 5vw, 6rem); align-items:end; min-height:clamp(22rem, 62svh, 36rem) !important; padding:clamp(1.5rem, 1rem + 2vw, 3rem) !important; border-radius:20px !important; margin:0 0 1.25rem !important; overflow:hidden; }
.stk-1{ top:calc(var(--bar-h, 4.7rem) + 1rem); background:var(--ink) !important; color:var(--paper) !important; }
.stk-2{ top:calc(var(--bar-h, 4.7rem) + 2.5rem); background:var(--flame) !important; color:var(--ink) !important; }
.stk-3{ top:calc(var(--bar-h, 4.7rem) + 4rem); background:#EFEAE0 !important; color:var(--ink) !important; border:1px solid var(--ink); }
.stk-n{ align-self:start; font-family:var(--font-display); font-weight:800; letter-spacing:-.06em; line-height:.8; font-size:clamp(7rem, 3rem + 14vw, 17rem); }
.stk-b{ max-width:40rem; justify-self:end; }
.stk-t{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; line-height:1; font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3.8rem); }
.stk-s{ margin:1rem 0 0; font-weight:600; font-size:1.1rem; opacity:.85; }
.stk-d{ margin:.8rem 0 0; line-height:1.6; opacity:.7; max-width:46ch; }
@media (max-width:767px){ .stk{ grid-template-columns:1fr; min-height:0 !important; } .stk-b{ justify-self:start; } .stk-n{ font-size:6rem; } }

.no-loader .loader{ display:none !important; }

/* signature */
.end-sign{ margin-top:clamp(1.5rem, 4svh, 2.5rem); }
.sig{ width:clamp(6rem, 5rem + 4vw, 9rem); height:auto; overflow:visible; }
.sig-p{ stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:var(--ink); }

/* ================================================================ round 20: dark all the way down, more motion
   hero copy, curved reel, spiral gallery, dark nilai/harga/faq, Twohands-style CTA band */

/* ---- hero copy: lighter weight, tighter, one refined call */
.hero-title{ font-weight:500; font-size:clamp(1.3rem, .95rem + .9vw, 1.85rem); letter-spacing:-.035em; line-height:1.08; max-width:24ch; text-wrap:balance; color:#fff; }
.hero-aside{ font-size:clamp(.88rem, .84rem + .12vw, .98rem); color:rgba(255,255,255,.5); max-width:36ch; margin-top:.9rem; line-height:1.55; }
.hero-free{ display:inline-flex; align-items:center; gap:.85rem; margin-top:1.5rem; text-decoration:none; color:#fff; font-weight:500; font-size:clamp(.95rem, .9rem + .15vw, 1.05rem); letter-spacing:-.01em; }
.hf-t{ padding-bottom:.2em; background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition:background-size .5s cubic-bezier(.65,0,.35,1); }
.hero-free:hover .hf-t{ background-size:0% 1px; background-position:100% 100%; }
.hf-i{ display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; background:var(--flame); color:var(--ink); font-size:1rem; transition:transform .45s cubic-bezier(.65,0,.35,1), background-color .3s; }
.hero-free:hover .hf-i{ transform:rotate(-45deg) scale(1.12); background:#fff; }
.hero-free:hover{ color:#fff; }

/* ---- curved reel inside the manifesto */
.reel{ position:relative; height:clamp(17rem, 58svh, 38rem); container-type:size; margin:clamp(3rem, 8svh, 6rem) calc(-1 * var(--edge)); }
.reel-band{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s ease; }
.reel.is-ready .reel-band{ opacity:1; }
.reel-tile{ position:absolute; transform-style:preserve-3d; }
.reel.is-paused .reel-tile{ animation-play-state:paused !important; }
.reel-slice{ position:absolute; top:0; overflow:hidden; background:#151515; }
.reel-slice.is-first{ border-radius:10px 0 0 10px; } .reel-slice.is-last{ border-radius:0 10px 10px 0; }
.reel-slice img{ position:absolute; top:0; max-width:none; object-fit:cover; object-position:top; }
@media (prefers-reduced-motion: reduce){ .reel-tile{ animation-play-state:paused !important; } }
.heat .manifesto-list{ padding-block:clamp(6rem, 16svh, 11rem); }
.heat .m-stage + .reel, .heat .reel + .m-stage{ margin-top:0; }

/* ---- dark nilai */
.nilai{ background:var(--ink); color:var(--paper); }
.nilai .section-head p{ color:var(--muted); }
.nl-list{ border-top-color:var(--divider); }
.nl-row{ border-bottom-color:var(--divider); }
.nl-line{ color:var(--muted); }
.nl-desktop.is-hovering .nl-row{ opacity:.3; }
.nl-row.is-active .nl-name{ color:var(--flame); }
.nl-stage{ background:#111; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(250,82,10,.35); }
.nl-mobile{ border-top-color:var(--divider); } .nl-mob-item{ border-bottom-color:var(--divider); }

/* ---- spiral gallery */
.spiral{ background:var(--ink); color:var(--paper); }
.spiral-stage{ position:relative; height:100svh; overflow:hidden; }
.spiral-view{ position:absolute; inset:0; perspective:1500px; perspective-origin:50% 50%; }
.spiral-helix{ position:absolute; left:58%; top:50%; transform-style:preserve-3d; }
.sp-card{ position:absolute; left:0; top:0; margin:0; will-change:transform, opacity; transform-style:preserve-3d; }
.sp-card img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:16px; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.9); }
.spiral-copy{ position:absolute; z-index:2; left:var(--edge); bottom:clamp(2rem, 8svh, 5rem); max-width:min(34rem, 42vw); }
.spiral-copy h2{ margin:0; font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.8rem); line-height:.95; letter-spacing:-.05em; font-weight:800; }
.spiral-copy p{ margin:1.25rem 0 0; color:var(--muted); max-width:34ch; line-height:1.55; }
@media (max-width:767px){
  .spiral-helix{ left:50%; top:42%; }
  .spiral-copy{ max-width:none; right:var(--edge); bottom:1.5rem; }
  .spiral-copy h2{ font-size:2.3rem; }
}

/* ---- dark harga, steps, faq */
.home .rows-section{ background:var(--ink); color:var(--paper); }
.home .rows-section .section-head p, .pc-trust, .pc-more-note{ color:var(--muted); }
.pc-more-note a{ color:var(--paper); }
.pc-free{ color:var(--paper); }
.pc-free strong{ color:var(--flame); }
.pc-free a{ color:var(--paper); }
.os-card{ isolation:isolate; overflow:hidden; will-change:transform; }
.os-card::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 45%); }
.os-card:hover::after{ opacity:1; }
.os-card--b{ background:rgba(255,255,255,.035); color:var(--paper); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); }
.os-card--b::after{ background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(250,82,10,.22), transparent 45%); }
.os-grid{ position:relative; }
.os-grid::before{ content:""; position:absolute; z-index:-1; right:6%; top:10%; width:42%; height:80%; border-radius:50%; background:radial-gradient(closest-side, rgba(250,82,10,.28), transparent); filter:blur(30px); pointer-events:none; }
.stk-1{ background:#151515 !important; color:var(--paper) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.stk-3{ background:var(--paper) !important; color:var(--ink) !important; border:0 !important; }
.stk{ transform-origin:50% 0; will-change:transform, filter; }
.faq2-list{ border-top-color:var(--paper); }
.faq2-item{ border-bottom-color:var(--divider); }
.faq2-sub, .faq2-item p{ color:var(--muted); }
.faq2-sub a{ color:var(--paper); }
.faq2-item summary i{ border-color:rgba(255,255,255,.5); }
.faq2-item summary i::before, .faq2-item summary i::after{ background:var(--paper); }
.faq2-item summary:hover i{ background:rgba(255,255,255,.08); }
.faq2-item[open] summary i{ background:var(--flame); border-color:var(--flame); }
.faq2-item[open] summary i::before, .faq2-item[open] summary i::after{ background:var(--ink); }
.faq2-tabs button{ border-color:rgba(255,255,255,.4); color:var(--paper); }
.faq2-tabs button:hover{ background:rgba(255,255,255,.08); }
.faq2-tabs button.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ---- CTA band (Twohands pattern) */
.cta{ background:var(--ink); padding:clamp(5rem, 14svh, 10rem) var(--edge); }
.cta-box{ position:relative; overflow:hidden; border-radius:28px; background:#0e0e0e; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); min-height:min(78svh, 46rem); display:flex; flex-direction:column; justify-content:center; }
.cta-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size:48px 48px; }
.cta-title, .cta-meta{ position:relative; }
/* soft frosted pool behind the words: the blur layer is masked by a radial gradient, so it has no edge */
.cta-title::before, .cta-meta::before{ content:""; position:absolute; inset:-3.5rem -4.5rem; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); background:rgba(14,14,14,.35);
  -webkit-mask-image:radial-gradient(closest-side, #000 35%, transparent); mask-image:radial-gradient(closest-side, #000 35%, transparent); }
.cta-px{ position:absolute; width:48px; height:48px; background-size:420% auto; background-repeat:no-repeat; }
.cta-inner{ position:relative; z-index:2; width:min(100%, 62rem); margin:0 auto; padding:clamp(3rem, 8svh, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 12svh, 7rem); }
.cta-top{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:2rem; align-items:end; }
.cta-title{ margin:0; color:var(--paper); font-size:clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); line-height:1; letter-spacing:-.05em; font-weight:700; }
.cta-meta{ margin:0; justify-self:end; text-align:right; color:var(--muted); font-size:.95rem; max-width:22ch; }
.cta-meta strong{ color:var(--paper); }
.cta-actions{ display:grid; grid-template-columns:1.4fr 1fr; gap:.6rem; margin-top:clamp(2rem, 5svh, 3rem); }
.cta-btn{ display:flex; align-items:center; justify-content:space-between; padding:1.15rem 1.5rem; border-radius:999px; font-weight:600; font-size:1.05rem; text-decoration:none; transition:transform .4s cubic-bezier(.65,0,.35,1), background-color .3s, color .3s; }
.cta-btn--main{ background:var(--paper); color:var(--ink); }
.cta-btn--main i{ font-style:normal; font-size:1.25rem; transition:transform .4s cubic-bezier(.65,0,.35,1); }
.cta-btn--main:hover{ background:var(--flame); }
.cta-btn--main:hover i{ transform:translateX(6px); }
.cta-btn--alt{ background:#262626; color:var(--paper); }
.cta-btn--alt:hover{ background:#333; }
.cta-btn:active{ transform:scale(.98); }
.cta-trust{ list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; color:var(--muted); font-size:.82rem; }
.cta-trust li{ display:inline-flex; align-items:center; gap:.5rem; }
.cta-trust svg{ width:14px; height:14px; color:var(--flame); }
.cta-strip{ position:absolute; left:0; right:0; bottom:0; height:48px; display:flex; overflow:hidden; z-index:1; }
.cta-strip i{ flex:none; width:48px; height:48px; background-repeat:no-repeat; }
@media (max-width:767px){
  .cta-top{ grid-template-columns:1fr; } .cta-meta{ justify-self:start; text-align:left; }
  .cta-actions{ grid-template-columns:1fr; }
}
.mline{ padding-bottom:.06em; }
.spiral-view{ z-index:1; }
.spiral-copy{ z-index:3; transform:translateZ(0); }
@media (min-width:768px){ .spiral-helix{ left:64%; } .spiral-copy{ max-width:min(30rem, 34vw); } }
.cta-top{ grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr); }
.cta-title{ font-size:clamp(2rem, 1rem + 3vw, 3.9rem); max-width:16ch; }
/* the reel's far tiles sit thousands of px off screen; clip sideways overflow at the page, because clipping any
   closer ancestor stops Chromium painting the 3D band at all */
html, body{ overflow-x:clip; }

/* ---- round 21: lag pass. No SVG displacement on the fixed bar (it re-filtered the whole strip every scroll frame),
   no backdrop blur on the pricing card, CTA trust row gets air */
.topbar{ -webkit-backdrop-filter:blur(14px) saturate(1.4) !important; backdrop-filter:blur(14px) saturate(1.4) !important; }
.os-card--b{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#141414; }
.cta-trust{ margin-top:2.4rem; }
.cta-inner{ padding-bottom:clamp(3rem, 8svh, 5rem); }
.sp-card{ will-change:auto; }

/* ---- round 22: hover-roll fix, phone menu, mobile visuals */
.roll .rf1{ transform:none; }

.tb-menu, .tb-panel{ display:none; }
@media (max-width:767px){
  .tb-menu{ display:inline-flex; align-items:center; gap:.6rem; margin-left:auto; margin-right:.6rem; padding:.55em .9em; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:transparent; color:var(--paper); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
  .tb-menu i{ position:relative; width:14px; height:8px; }
  .tb-menu i::before, .tb-menu i::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .3s, top .3s; }
  .tb-menu i::before{ top:0; } .tb-menu i::after{ top:6px; }
  .topbar.is-open .tb-menu i::before{ top:3px; transform:rotate(45deg); }
  .topbar.is-open .tb-menu i::after{ top:3px; transform:rotate(-45deg); }
  .tb-panel{ position:absolute; left:0; right:0; top:100%; display:flex; flex-direction:column; padding:.5rem var(--edge) 1.25rem; background:rgba(10,10,10,.97); border-bottom:1px solid var(--divider); }
  .tb-panel[hidden]{ display:none; }
  .tb-panel a{ padding:.85rem 0; border-bottom:1px solid var(--divider); color:var(--paper); font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-.03em; text-decoration:none; }
  .tb-panel a:last-child{ border-bottom:0; color:var(--flame); }
  .tb-cta{ padding:.55em .9em; font-size:.68rem; }
}

/* nilai on phones: the same visuals as the desktop stage, as small static frames */
.nl-mob-item{ grid-template-columns:38% 1fr !important; align-items:center !important; }
.nlm-vis{ display:grid; place-items:center; aspect-ratio:4 / 5; border-radius:12px; overflow:hidden; background:#111; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.nlm-vis img{ display:block; }
.nlm-brand{ background:#f2f0eb; }
.nlm-brand img{ width:180%; max-width:none; height:auto; }
.nlm-site img{ width:170%; max-width:none; height:auto; }
.nlm-ph{ position:relative; height:88%; aspect-ratio:9 / 19; padding:3px; border-radius:12px; background:#1c1c1c; box-shadow:0 0 0 1px #2c2c2c; overflow:hidden; }
.nlm-ph img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:9px; }
.nlm-spot .nlm-ph i{ position:absolute; inset:3px; border-radius:9px; background:radial-gradient(circle at var(--sx) var(--sy), transparent 0, transparent var(--sr), rgba(6,6,6,.78) calc(var(--sr) + 10%)); }

/* karya on phones: the 4:5 phone captures, whole */
@media (max-width:767px){
  .karya-screen .wp-img{ height:auto !important; aspect-ratio:4 / 5 !important; flex:none !important; }
  .karya-screen .wp-img img{ width:100%; height:100%; object-fit:cover; object-position:top; }
}

/* spiral on phones: words on top, helix below them, nothing under the text */
@media (max-width:767px){
  .spiral-copy{ top:calc(var(--bar-h, 4.7rem) + 1.25rem); bottom:auto; }
  .spiral-copy h2{ font-size:2.1rem; }
  .spiral-copy p{ font-size:.9rem; margin-top:.75rem; }
  .spiral-helix{ top:62%; left:50%; }
}
.wp-img picture{ display:block; width:100%; height:100%; }

/* ---- karya: laptop carousel */
.lp{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:center; margin-top:clamp(1.5rem, 4svh, 3rem); outline:none; }
.lp-device{ position:relative; width:100%; max-width:min(100%, calc((100svh - 15rem) * 1.5)); justify-self:center; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.lp-device:active{ cursor:grabbing; }
.lp-lid{ position:relative; margin:0 6%; padding:2.2% 2.2% 2.6%; border-radius:18px 18px 6px 6px; background:#1b1b1d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -40px rgba(var(--glow, 250,82,10),.45); transition:box-shadow .8s ease; }
.lp-cam{ position:absolute; left:50%; top:.9%; width:6px; height:6px; translate:-50% 0; border-radius:50%; background:#2f2f33; }
.lp-screen{ position:relative; aspect-ratio:16 / 10; overflow:hidden; border-radius:4px; background:#000; }
.lp-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; visibility:hidden; pointer-events:none; -webkit-user-drag:none; }
.lp-shot.is-on{ visibility:visible; }
.lp-base{ position:relative; height:clamp(10px, 1.4vw, 20px); border-radius:2px 2px 14px 14px; background:linear-gradient(#2a2a2d, #141416); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.lp-base i{ position:absolute; left:50%; top:0; width:14%; height:45%; translate:-50% 0; border-radius:0 0 8px 8px; background:#0e0e10; }
.lp-text{ min-height:13rem; }
.lp-name{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.045em; line-height:1; font-size:clamp(2rem, 1.2rem + 2.4vw, 3.6rem); color:var(--paper); }
.lp-status{ margin:.9rem 0 0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--flame); }
.lp-line{ margin:1rem 0 0; color:var(--muted); line-height:1.55; max-width:34ch; }
.lp-link{ display:inline-block; margin-top:1.4rem; color:var(--paper); font-weight:600; text-decoration:none; padding-bottom:.2em; background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition:background-size .45s cubic-bezier(.65,0,.35,1); }
.lp-link:hover{ background-size:0% 1px; background-position:100% 100%; }
.lp-nav{ display:flex; align-items:center; gap:1rem; margin-top:2rem; }
.lp-btn{ width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--paper); font-size:1.1rem; cursor:pointer; transition:background-color .25s, color .25s, border-color .25s; }
.lp-btn:hover{ background:var(--flame); border-color:var(--flame); color:var(--ink); }
.lp-count{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); letter-spacing:.06em; }
.lp-count b{ color:var(--paper); font-weight:500; }
@media (max-width:767px){
  .lp{ grid-template-columns:1fr; gap:1.5rem; }
  .lp-device{ max-width:none; }
  .lp-lid{ margin:0 4%; border-radius:12px 12px 4px 4px; }
  .lp-text{ min-height:11rem; }
}
.sp-card{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }

/* ---- signature quote (white-desert pattern: centred quote, then the hand-drawn signature) */
.sig-quote{ background:var(--ink); color:var(--paper); padding:clamp(7rem, 22svh, 14rem) var(--edge); display:grid; place-items:center; }
.sq{ margin:0; max-width:46rem; text-align:center; }
.sq-text{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-.035em; line-height:1.18; font-size:clamp(1.6rem, 1.05rem + 1.9vw, 2.9rem); text-wrap:balance; }
.sq-by{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:clamp(2.5rem, 6svh, 4rem); }
.sq-sign .sig{ width:clamp(8rem, 6rem + 6vw, 12rem); height:auto; overflow:visible; }
.sq-sign .sig-p{ stroke:var(--paper); fill:var(--paper); stroke-width:1.4; }
.sq-name{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---- lag pass 2: the three faintest hero blur layers cost a full backdrop pass each for almost no visible change */
.edge-blur--hero i:nth-child(-n+3){ display:none; }
.marquee.is-paused .mq-track{ animation-play-state:paused; }
.topbar{ -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important; }

/* ---- hero wall drifts on its own; one set per loop, columns alternate direction */
.hg-run{ display:flex; flex-direction:column; gap:inherit; will-change:transform; animation:hgRun 46s linear infinite; }
.hg-col:nth-child(even) .hg-run{ animation-direction:reverse; animation-duration:54s; }
.hg-col:nth-child(3n) .hg-run{ animation-duration:62s; }
@keyframes hgRun{ from{ transform:translate3d(0, calc(var(--set-h, 0px) / 2), 0); } to{ transform:translate3d(0, calc(var(--set-h, 0px) / -2), 0); } }
.is-idle-off .hg-run{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .hg-run{ animation:none; } }

/* laptop: one honest perspective on the device, lid hinged at its bottom edge */
.lp-device{ perspective:2600px; perspective-origin:50% 0%; transform-style:preserve-3d; }
.lp-lid{ transform-origin:50% 100%; backface-visibility:hidden; }
.lp-hint{ display:none; }
@media (max-width:767px){
  .lp-hint{ display:flex; align-items:center; gap:.6rem; margin:1rem 0 0; color:var(--muted); font-size:.85rem; }
  .lp-hint svg{ flex:none; color:var(--flame); animation:lpSwipe 1.8s ease-in-out infinite; }
  @keyframes lpSwipe{ 0%,100%{ transform:translateX(-4px); } 50%{ transform:translateX(6px); } }
}

/* hero: the statement sits closer to the wordmark, so the whole block starts lower */
.hero-mark{ margin-top:clamp(.9rem, 2.6svh, 1.8rem) !important; width:min(100%, 80svh); }

/* ---- case pages: laptop hero, phone frame, next-project link */
.cs-lp-wrap{ padding:clamp(2rem, 6svh, 4rem) var(--edge) 0; display:grid; place-items:center; }
.cs-lp{ width:min(100%, 72rem); max-width:none; cursor:default; }
.cs-lp .lp-screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.cs-phone-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; padding:clamp(4rem, 12svh, 8rem) var(--edge) 0; }
.cs-phone{ height:min(78svh, 44rem); }
.cs-phone .phone-screen{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.cs-phone-cap{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cs-next{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 22rem); gap:2rem; align-items:center; margin:clamp(5rem, 14svh, 9rem) var(--edge) 0; padding:clamp(1.5rem, 3vw, 2.5rem) 0; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); color:var(--paper); text-decoration:none; }
.cs-next-t{ font-family:var(--font-display); font-weight:700; letter-spacing:-.045em; line-height:1; font-size:clamp(1.8rem, 1rem + 3vw, 4rem); transition:color .3s; }
.cs-next img{ width:100%; height:auto; border-radius:10px; box-shadow:0 0 0 1px rgba(255,255,255,.1); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.cs-next:hover .cs-next-t{ color:var(--flame); }
.cs-next:hover img{ transform:scale(1.04) rotate(-1deg); }
@media (max-width:767px){ .cs-next{ grid-template-columns:1fr; } .cs-phone{ height:min(70svh, 34rem); } }

/* ---- manifesto page: one line in the light at a time. Every statement gets its own screen, centred; a sticky
   vignette darkens the top and bottom of the viewport, so the next line waits in the dark until it is scrolled up */
.manifesto-page #manifesto{ position:relative; }
.manifesto-page .spot-vig{ position:sticky; top:0; z-index:3; height:100svh; margin-bottom:-100svh; pointer-events:none;
  background:linear-gradient(to bottom, var(--ink) 0%, rgba(10,10,10,.85) 14%, rgba(10,10,10,0) 36%, rgba(10,10,10,0) 64%, rgba(10,10,10,.85) 86%, var(--ink) 100%); }
.manifesto-page .m-stage{ min-height:100svh; display:grid; align-items:center; padding-block:0; }
.manifesto-page .m-stage + .m-stage{ margin-top:0; }
.manifesto-page .manifesto-list{ padding-top:0; }

/* backlights: a soft colour pool behind the laptop (follows the site on screen) and behind the curved reel */
.lp-device::before{ content:""; position:absolute; inset:-18% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--glow, 250,82,10), .32), rgba(var(--glow, 250,82,10), .1) 55%, transparent); transition:background .8s ease; }
.reel::before{ content:""; position:absolute; inset:0 -5%; pointer-events:none;
  background:radial-gradient(50% 45% at 50% 50%, rgba(250,82,10,.22), rgba(250,82,10,.06) 60%, transparent); }

/* pricing: each plan shows a real project it buys */
.os-card{ gap:1rem; }
.os-name{ margin-top:.5rem; }
.os-ex{ margin:0; position:relative; }
.os-ex img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:10px; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.os-shots{ position:relative; padding-bottom:14%; }
.os-shots img:first-child{ width:80%; }
.os-shots img:nth-child(2){ position:absolute; right:0; bottom:0; width:50%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -16px rgba(0,0,0,.8); }
.os-ex figcaption{ margin-top:.8rem; font-size:.88rem; opacity:.75; }
.os-ex figcaption a{ color:inherit; text-underline-offset:.2em; }
/* steps: no big numerals, shorter cards, no dead band above */
.stk-list{ margin-top:clamp(3rem, 7svh, 5rem) !important; }
.stk{ grid-template-columns:1fr !important; min-height:clamp(14rem, 34svh, 22rem) !important; }
.stk-b{ justify-self:start; }
/* slop-judge round: bigger hero headline, larger laptop, fuller konsep panel */
.hero-title{ font-size:min(clamp(1.5rem, .9rem + 1.9vw, 3rem), 6.2svh); max-width:20ch; line-height:1.04; }
.hero-aside{ margin-top:.6rem; }
.hero-left{ bottom:max(4.5svh, 34px) !important; }  /* sits just above the blurred lower half of the edge strip, so breq stays sharp */
.edge-blur--hero{ height:max(8svh, 64px); }
@media (min-width:768px){
.lp{ grid-template-columns:minmax(0, 2.6fr) minmax(0, 1fr); margin-top:clamp(.5rem, 2svh, 1.5rem); }
.lp-device{ max-width:min(100%, calc((100svh - 11rem) * 1.6)); }
}
/* radius scale instead of one value everywhere: big cards 28, panels 14 (--radius), images 10, buttons pill/4 */
.os-card, .stk{ border-radius:28px !important; }

/* pricing v3: each plan opens with what the money buys, shown on a real project */
.os-card{ --pad:clamp(1.5rem, 1rem + 1.6vw, 2.5rem); padding:var(--pad); }
.os-vis{ margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) .25rem; padding:var(--pad) var(--pad) 1.1rem; }
.os-vis--a{ background:rgba(10,10,10,.12); }
.os-vis--b{ background:rgba(255,255,255,.04); }
.os-stage{ position:relative; aspect-ratio:16 / 10.5; }
.os-stage img{ display:block; border-radius:10px; object-fit:cover; object-position:top; box-shadow:0 20px 44px -18px rgba(0,0,0,.65); }
.os-desk{ width:80%; aspect-ratio:16 / 10; }
.os-mob{ position:absolute; right:2%; bottom:0; width:23%; aspect-ratio:375 / 812; border-radius:16px !important; border:3px solid #0d0d0d; }
.os-fan img{ position:absolute; width:62%; aspect-ratio:16 / 10; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.os-fan img:nth-child(1){ left:0; top:0; }
.os-fan img:nth-child(2){ left:12.5%; top:13.6%; }
.os-fan img:nth-child(3){ left:25%; top:27.3%; }
.os-fan img:nth-child(4){ left:38%; top:41%; }
.os-card:hover .os-fan img:nth-child(1){ transform:translate(-4%, -4%); }
.os-card:hover .os-fan img:nth-child(2){ transform:translate(-2%, -2%); }
.os-card:hover .os-fan img:nth-child(4){ transform:translate(3%, 3%); }
.os-card:hover .os-mob{ transform:translateY(-4%); }
.os-mob{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.os-vis figcaption{ margin-top:1rem; font-size:.9rem; opacity:.8; }
.os-vis figcaption a{ color:inherit; text-underline-offset:.2em; }
.os-name{ font-size:clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }
/* short laptop windows: keep the whole hero column below the marquee */
@media (min-width:768px) and (max-height:640px){
  .hero-title{ max-width:26ch; }
  .hero-mark{ width:min(100%, 60svh) !important; margin-top:.8rem !important; }
  .hero-free{ margin-top:.9rem; }
  .hero-aside{ display:none; }  /* the marquee already carries the promo line */
}
.os-stage img{ height:auto; }
/* privacy page: one readable column */
.legal-body{ max-width:min(44rem, 65ch); margin:0 var(--edge) clamp(4rem, 10svh, 8rem); color:var(--paper); }
.legal-body h2{ margin:3rem 0 .9rem; font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height:1.1; }
.legal-body p, .legal-body li{ font-size:1.02rem; line-height:1.7; color:rgba(255,255,255,.78); }
.legal-body p{ margin:0 0 1rem; }
.legal-body ul{ margin:0 0 1rem; padding-left:1.2rem; display:grid; gap:.5rem; }
.legal-body a{ color:var(--paper); text-underline-offset:.2em; }
.legal-date{ font-size:.9rem !important; color:rgba(255,255,255,.5) !important; }
.pc-refund{ margin:1rem var(--edge) 0; color:var(--muted); font-size:.9rem; line-height:1.55; }
.pc-refund a{ color:inherit; text-underline-offset:.2em; }
.legal ~ .edge-blur, body:has(main.legal) .edge-blur:not(.edge-blur--hero){ display:none; }  /* reading pages: nothing over the text */

/* Recorded website previews share the existing image frames. */
.hg-col video{ display:block; width:100%; height:auto; aspect-ratio:5/8; object-fit:cover; object-position:top; border-radius:var(--radius); }
.cs-lp .lp-screen video{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.kv-video{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.kv-video video{ display:block; width:100%; height:auto; max-height:100%; border-radius:var(--radius); }
video.lp-shot{ pointer-events:auto; }
@media (max-width:767px){ .kv-video video{ width:auto; height:100%; max-width:100%; object-fit:contain; } }
.sp-card video{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:var(--radius); }

/* Small campaign-service note in the existing pricing flow. */
.campaign-note{ margin:2rem var(--edge) 0; padding-block:1.5rem; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }
.campaign-note h3{ margin:0 0 .65rem; font-family:var(--font-display); font-size:clamp(1.4rem, 1rem + 1vw, 2rem); }
.campaign-note p{ margin:0 0 .8rem; max-width:60ch; color:var(--muted); line-height:1.55; }
.campaign-note a{ color:var(--paper); text-underline-offset:.2em; }
.nl-s-online video{ display:block; width:88%; height:auto; border-radius:var(--radius); }
.nlm-site video{ display:block; width:100%; height:auto; }
.hg-col img.hg-ai{ object-position:center; }
/* konsep: 4 tabs no longer fit a fixed 100svh screen; let the screen grow so the CTA is never clipped */
.kv-screen{ height:auto; min-height:100svh; overflow:visible; }
.kv{ min-height:min(68svh, 44rem); }
@media (max-width:767px){ .kv{ min-height:0; } .kv-stage{ height:min(72svh, 600px); } }
@media (max-height:640px){ .hero-center .phone{ display:none; } }  /* short windows: the card alone fits, the phone pushed the link off screen */
/* language toggle */
.tb-lang{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--paper); text-decoration:none; padding:.6em .8em; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); margin-right:.6rem; transition:background-color .25s ease, color .25s ease; }
.tb-lang:hover, .tb-lang:focus-visible{ background:var(--paper); color:var(--ink); }
.lang-cover{ position:fixed; inset:0; z-index:2147483000; background:var(--paper); opacity:0; transition:opacity .26s ease; pointer-events:none; }
.lang-cover.is-on{ opacity:1; }
.hero-title{ margin-bottom:.35em; }  /* default 1em paragraph margin made the headline gap double the others */
@media (max-width:767px){ .tb-lang{ margin-right:.35rem; padding:.55em .65em; font-size:.66rem; } }