:root {
  color-scheme: light dark;
  font-family: Manrope, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
mark { padding: 0; background: none; color: var(--accent); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 3px; }

body[data-variant="relationship-01"] { --bg:#160e12; --surface:#25171d; --surface2:#321e25; --text:#fff4ec; --muted:#d9c3bc; --accent:#ff684d; --accentText:#25100b; --line:#553640; --radius:4px; }
body[data-variant="relationship-02"] { --bg:#f5efe4; --surface:#fffaf2; --surface2:#e8decf; --text:#202830; --muted:#565d62; --accent:#b52f22; --accentText:#fff7ec; --line:#b9ad9b; --radius:20px; }
body[data-variant="relationship-03"] { --bg:#d8ff35; --surface:#edff97; --surface2:#17243d; --text:#17243d; --muted:#34415a; --accent:#a72f23; --accentText:#fff6df; --line:#17243d; --radius:0px; }
body[data-variant="relationship-04"] { --bg:#102d75; --surface:#173b8d; --surface2:#09245f; --text:#fff7e8; --muted:#cfdbf6; --accent:#ff806b; --accentText:#23100d; --line:#6683c1; --radius:12px; }
body[data-variant="relationship-05"] { --bg:#f1e3d1; --surface:#f9efe2; --surface2:#e0cbb3; --text:#30241e; --muted:#65584f; --accent:#a62842; --accentText:#fff7ee; --line:#9c806c; --radius:6px; }
body[data-variant="relationship-06"] { --bg:#111b2a; --surface:#182639; --surface2:#0c1521; --text:#f4ffdd; --muted:#bdc9ad; --accent:#c9ef25; --accentText:#12200b; --line:#53664b; --radius:2px; }
body[data-variant="relationship-07"] { --bg:#221015; --surface:#351a21; --surface2:#180b0f; --text:#fff3eb; --muted:#d8c1bd; --accent:#ff674d; --accentText:#27100b; --line:#633641; --radius:14px; }
body[data-variant="relationship-08"] { --bg:#281830; --surface:#3b2446; --surface2:#1c1023; --text:#fff7ed; --muted:#d9cada; --accent:#d9ff4f; --accentText:#1c1224; --line:#73587a; --radius:10px; }
body[data-variant="telegram-01"] { --bg:#071f2a; --surface:#0d303c; --surface2:#061820; --text:#eafcf7; --muted:#afd5ce; --accent:#58dfb8; --accentText:#052219; --line:#3e6d70; --radius:16px; }
body[data-variant="telegram-02"] { --bg:#e5f5f7; --surface:#f5fcfb; --surface2:#cce7ea; --text:#142532; --muted:#526872; --accent:#b63829; --accentText:#fff7ec; --line:#87abb2; --radius:999px; }
body[data-variant="telegram-03"] { --bg:#f1eadc; --surface:#faf6ed; --surface2:#d7e4dc; --text:#1c302d; --muted:#536762; --accent:#267563; --accentText:#f8fff9; --line:#91a89f; --radius:4px; }
body[data-variant="telegram-04"] { --bg:#28132f; --surface:#3c1d46; --surface2:#1d0d24; --text:#fff2e8; --muted:#ddc7df; --accent:#ff7a3e; --accentText:#271019; --line:#76507d; --radius:18px; }
body[data-variant="telegram-05"] { --bg:#0d211d; --surface:#17312b; --surface2:#071612; --text:#ecf7ef; --muted:#b6cec1; --accent:#f0ba3a; --accentText:#291b08; --line:#46685e; --radius:8px; }
body[data-variant="telegram-06"] { --bg:#f5d72d; --surface:#fff1a3; --surface2:#142047; --text:#142047; --muted:#37456b; --accent:#2348b4; --accentText:#fff8df; --line:#142047; --radius:2px; }
body[data-variant="telegram-07"] { --bg:#202653; --surface:#2e376e; --surface2:#151a3d; --text:#f8f0e4; --muted:#c8c8df; --accent:#ff6a4d; --accentText:#25100c; --line:#686fa4; --radius:22px; }
body[data-variant="telegram-08"] { --bg:#f4f0e7; --surface:#fffdf7; --surface2:#dfdbd2; --text:#131722; --muted:#565b63; --accent:#aa2b21; --accentText:#fff9ee; --line:#898983; --radius:0px; }

.page-shell { min-height: 100dvh; background: var(--bg); }
.hero { min-height: 100dvh; display: grid; grid-template-areas: "header" "copy" "media" "trust"; align-content: start; gap: 12px; padding: 0 14px 82px; overflow: hidden; position: relative; isolation: isolate; }
.site-header { grid-area: header; min-height: 54px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-block-end:1px solid var(--line); font-size:.72rem; font-weight:750; }
.site-header > span { max-inline-size:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.brand { min-height:44px; display:inline-flex; align-items:center; font-size:1.05rem; font-weight:950; letter-spacing:-.055em; text-decoration:none; }
.hero-copy { grid-area:copy; min-width:0; position:relative; z-index:2; }
.hero-kicker, .section-label { margin-block-end:7px; color:var(--accent); font-size:.69rem; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }
.hero h1 { max-inline-size:820px; font-size:clamp(1.9rem,8.7vw,5.8rem); line-height:.94; letter-spacing:-.055em; text-wrap:balance; overflow-wrap:normal; word-break:normal; hyphens:none; }
.hero h1 mark { white-space:normal; }
.hero-lead { max-inline-size:590px; margin-block-start:9px; color:var(--muted); font-size:clamp(.92rem,3.7vw,1.15rem); line-height:1.36; text-wrap:pretty; }
.hero-action { margin-block-start:12px; }
.primary-cta, .handle-control button, .section-copy > a, .section-cta, .sticky-cta {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:0;
  border-radius:var(--radius);
  background:var(--accent);
  color:var(--accentText);
  font-weight:900;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.primary-cta:hover, .handle-control button:hover, .section-copy > a:hover, .section-cta:hover, .sticky-cta:hover { filter:brightness(1.06); transform:translateY(-1px); }
.primary-cta:active, .handle-control button:active, .section-copy > a:active, .section-cta:active, .sticky-cta:active { transform:scale(.98); }
.hero-action .primary-cta { inline-size:100%; }
.hero-action p, .field-message { margin-block-start:7px; color:var(--muted); font-size:.69rem; line-height:1.35; }
.hero-media { grid-area:media; min-width:0; position:relative; z-index:1; }
.visual { position:relative; min-height:182px; max-height:270px; block-size:31vh; overflow:hidden; border-radius:var(--radius); background:var(--surface); }
.visual-link { display:block; color:inherit; text-decoration:none; }
.visual-link img, .visual > img { inline-size:100%; block-size:100%; object-fit:cover; }
.hero-trust { grid-area:trust; display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.65rem; line-height:1.25; }
.hero-trust span:last-child { text-align:end; }
.enter { opacity:0; transform:translateY(18px); }
.ready .enter { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.ready .hero-media { transition-delay:.08s; }

.handle-form { margin-block-start:12px; }
.handle-form > label { display:block; margin-block-end:6px; font-size:.72rem; font-weight:850; }
.handle-control { min-height:52px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.handle-control > span { padding-inline-start:13px; color:var(--accent); font-size:1.18rem; font-weight:950; }
.handle-control input { min-width:0; min-height:50px; border:0; outline:0; padding:0 8px; background:transparent; color:var(--text); font-size:1rem; font-weight:800; }
.handle-control input::placeholder { color:var(--muted); opacity:.72; }
.handle-control button { align-self:stretch; min-height:50px; padding-inline:12px; }
.field-message.error { color:#ff8d76; font-weight:800; }

.content-section, .final-section, .site-footer { inline-size:min(100% - 28px,1120px); margin-inline:auto; }
.content-section { padding-block:64px; }
.section-copy h2, .final-section h2 { max-inline-size:820px; font-size:clamp(2rem,8vw,4.6rem); line-height:.96; letter-spacing:-.058em; text-wrap:balance; }
.section-copy > p:not(.section-label) { max-inline-size:650px; margin-block-start:14px; color:var(--muted); font-size:1rem; line-height:1.55; }
.section-copy > a { margin-block-start:20px; }
.truth-visual { min-height:230px; margin-block-start:28px; display:grid; place-items:center; align-content:center; gap:10px; padding:24px; overflow:hidden; border-radius:var(--radius); background:var(--surface); position:relative; }
.truth-visual::before { content:""; position:absolute; inline-size:210px; block-size:210px; border:1px solid var(--line); border-radius:50%; opacity:.72; }
.truth-visual strong { z-index:1; max-inline-size:15ch; color:var(--accent); font-size:clamp(2rem,10vw,4rem); line-height:.92; text-align:center; letter-spacing:-.06em; }
.truth-visual span { z-index:1; font-size:.74rem; font-weight:850; text-transform:uppercase; }
.report-section { position:relative; }
.outcome-grid { margin-block-start:26px; display:grid; gap:10px; }
.outcome-grid article { min-height:116px; display:grid; align-content:end; gap:5px; padding:18px; border-radius:var(--radius); background:var(--surface); position:relative; overflow:hidden; }
.outcome-grid article::before { content:""; position:absolute; inset:0 auto auto 0; inline-size:calc((var(--i) + 1) * 19%); block-size:3px; background:var(--accent); }
.outcome-grid b { font-size:1.05rem; }
.outcome-grid p { color:var(--muted); font-size:.82rem; line-height:1.4; }
.section-cta { inline-size:100%; margin-block-start:14px; }
.steps-section ol { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; }
.steps-section li { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; padding:16px 0; border-block-end:1px solid var(--line); }
.steps-section li > span { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:var(--radius); background:var(--accent); color:var(--accentText); font-weight:950; }
.steps-section li b { font-size:1rem; }
.steps-section li p { margin-block-start:4px; color:var(--muted); font-size:.83rem; line-height:1.45; }
.faq-list { margin-block-start:24px; display:grid; gap:8px; }
.faq-list details { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.faq-list summary { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; font-weight:850; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; color:var(--accent); font-size:1.3rem; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { padding:0 15px 16px; color:var(--muted); font-size:.84rem; line-height:1.5; }
.final-section { padding-block:72px 104px; text-align:center; }
.final-section h2 { margin-inline:auto; }
.final-section .primary-cta { inline-size:100%; max-inline-size:520px; margin-block-start:24px; }
.final-section > p:last-child { max-inline-size:560px; margin:12px auto 0; color:var(--muted); font-size:.72rem; line-height:1.4; }
.site-footer { padding-block:28px 100px; display:grid; gap:20px; border-block-start:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.site-footer .brand { color:var(--text); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:14px; }
.site-footer nav a { min-height:44px; display:inline-flex; align-items:center; }
.sticky-cta { position:fixed; z-index:15; inset:auto 10px 10px; min-height:54px; box-shadow:0 14px 38px rgb(0 0 0 / .26); }
.reveal { opacity:0; transform:translateY(24px); }
.reveal.visible { opacity:1; transform:none; transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }

/* Relationship 01: cinematic full bleed */
.layout-cinema .hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,transparent 30%,var(--bg) 78%),url("./hero.webp") center 54%/cover no-repeat; opacity:.3; }
.layout-cinema .visual { border:1px solid var(--line); box-shadow:0 24px 70px rgb(0 0 0 / .28); }
.layout-cinema .cinema-image { block-size:100%; }
.layout-cinema .cinema-image img { filter:saturate(.78) contrast(1.08); }
.cinema-stamp { position:absolute; inset:auto 10px 10px auto; padding:6px 8px; border:1px solid var(--accent); background:var(--bg); color:var(--accent); font-size:.63rem; font-weight:900; text-transform:uppercase; }
.layout-cinema .truth-section { display:grid; gap:28px; }

/* Relationship 02: orbit on warm paper */
.layout-orbit .hero { background:radial-gradient(circle at 100% 40%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 44%); }
.visual-orbit { overflow:visible; background:transparent; }
.orbit-image { position:absolute; inset:12% 22%; z-index:2; border-radius:50%; overflow:hidden; box-shadow:0 12px 40px color-mix(in srgb,var(--accent) 20%,transparent); }
.orbit-image img { aspect-ratio:1; object-position:center 30%; }
.orbit-ring { position:absolute; inset:5%; border:1px solid var(--line); border-radius:50%; }
.ring-b { inset:22%; }
.orbit-note { position:absolute; z-index:3; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:.6rem; }
.note-a { inset:4% auto auto 4%; }
.note-b { inset:40% 0 auto auto; }
.note-c { inset:auto auto 3% 16%; }
.layout-orbit .outcome-grid { grid-template-columns:1.2fr .8fr; }
.layout-orbit .outcome-grid article:first-child { grid-row:span 2; min-height:242px; }

/* Relationship 03: acid contact sheet */
.layout-contact .site-header, .layout-contact .steps-section li { border-color:var(--text); }
.layout-contact .hero { background:linear-gradient(145deg,transparent 62%,var(--accent) 62%); }
.layout-contact .steps-section .section-label { color:var(--bg); }
.visual-contact { overflow:visible; background:transparent; }
.contact-frame { position:absolute; overflow:hidden; border:4px solid var(--surface); box-shadow:5px 7px 0 var(--text); color:inherit; text-decoration:none; }
.contact-frame img { inline-size:100%; block-size:100%; object-fit:cover; }
.frame-1 { inset:2% 43% 26% 1%; transform:rotate(-5deg); }
.frame-2 { inset:8% 2% 18% 48%; transform:rotate(4deg); }
.frame-3 { inset:46% 24% 0 24%; transform:rotate(-1deg); }
.contact-thread { position:absolute; inset:52% 4% auto; block-size:3px; background:var(--accent); transform:rotate(-7deg); box-shadow:0 0 0 1px var(--text); }
.layout-contact .truth-visual { border:2px solid var(--text); box-shadow:8px 8px 0 var(--text); }
.layout-contact .outcome-grid article { border:2px solid var(--text); }

/* Relationship 04: magazine cover */
.layout-cover .hero { background:linear-gradient(90deg,transparent 0 78%,var(--accent) 78%); }
.visual-cover { overflow:visible; background:transparent; }
.cover-main { position:absolute; z-index:3; inset:0 14% 0 6%; overflow:hidden; border-radius:var(--radius); }
.cover-stack { position:absolute; inset:5% 3% 5% 20%; }
.cover-stack img { position:absolute; inline-size:100%; block-size:100%; object-fit:cover; border:3px solid var(--surface); border-radius:var(--radius); }
.cover-stack img:first-child { transform:translate(13px,4px) rotate(5deg); opacity:.72; }
.cover-stack img:last-child { transform:translate(25px,12px) rotate(9deg); opacity:.42; }
.layout-cover .report-section { background:var(--surface2); inline-size:100%; padding-inline:max(14px,calc((100vw - 1120px)/2)); }
.layout-cover .outcome-grid { grid-template-columns:repeat(2,1fr); }

/* Relationship 05: intimate polaroids */
.layout-polaroid .hero { background:radial-gradient(circle at 10% 70%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%); }
.visual-polaroid { overflow:visible; background:transparent; }
.polaroid-main { position:absolute; z-index:3; inset:3% 22% 4% 15%; overflow:hidden; border:7px solid var(--surface); box-shadow:0 16px 30px rgb(49 36 30 / .22); transform:rotate(-2deg); }
.polaroid-copy { position:absolute; inline-size:48%; block-size:76%; object-fit:cover; border:6px solid var(--surface); box-shadow:0 12px 24px rgb(49 36 30 / .18); }
.polaroid-copy.one { inset:8% 2% auto auto; transform:rotate(8deg); }
.polaroid-copy.two { inset:auto auto 0 0; transform:rotate(-9deg); }
.layout-polaroid .steps-section ol { counter-reset:none; }
.layout-polaroid .steps-section li { background:var(--surface); padding:16px; border:0; border-radius:var(--radius); }

/* Relationship 06: scan lens */
.layout-lens .hero { background:linear-gradient(135deg,var(--surface2),var(--bg)); }
.visual-lens { border:1px solid var(--line); }
.lens-main { block-size:100%; }
.lens-main img { filter:saturate(.74) brightness(.8); }
.moving-lens { position:absolute; z-index:3; inline-size:92px; block-size:92px; inset:25% auto auto 15%; border:4px solid var(--accent); border-radius:50%; box-shadow:0 0 0 999px rgb(7 15 24 / .18),inset 0 0 0 1px var(--bg); animation:lensMove 4.5s ease-in-out infinite alternate; }
.visual-lens > p { position:absolute; z-index:4; inset:auto 10px 10px; padding:7px; background:var(--surface2); color:var(--accent); font-size:.67rem; font-weight:900; text-transform:uppercase; }
@keyframes lensMove { to { transform:translate(132px,36px); } }
.layout-lens .outcome-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
.layout-lens .outcome-grid article { flex:0 0 76%; scroll-snap-align:start; }

/* Relationship 07: draggable comparison */
.visual-compare { --cut:52%; border:1px solid var(--line); }
.visual-compare > img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.compare-base { filter:grayscale(1) brightness(.62); }
.compare-top { clip-path:inset(0 0 0 var(--cut)); }
.compare-line { position:absolute; z-index:3; inset-block:0; inset-inline-start:var(--cut); inline-size:2px; background:var(--text); transform:translateX(-1px); }
.compare-line::after { content:""; position:absolute; inset:50% auto auto 50%; inline-size:42px; block-size:42px; border-radius:50%; background:var(--text); transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgb(34 16 21 / .35); }
.visual-compare input { position:absolute; z-index:4; inset:0; inline-size:100%; block-size:100%; opacity:.001; cursor:ew-resize; }
.compare-captions { position:absolute; z-index:3; inset:10px 11px auto; display:flex; justify-content:space-between; font-size:.62rem; text-transform:uppercase; }
.compare-captions b { padding:5px 7px; background:var(--surface2); }
.layout-compare .report-section { display:grid; gap:24px; }

/* Relationship 08: choose the pain */
.layout-choice .hero { background:radial-gradient(circle at 75% 62%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%); }
.visual-choice { min-height:210px; }
.choice-image { position:absolute; inset:0; }
.choice-image img { filter:brightness(.56) saturate(.8); }
.choice-panel { position:absolute; z-index:3; inset:10px; display:grid; grid-template-columns:repeat(2,1fr); gap:7px; align-content:end; }
.choice-panel button { min-height:44px; padding:7px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface2); color:var(--text); font-size:.72rem; font-weight:850; cursor:pointer; }
.choice-panel button[aria-pressed="true"] { background:var(--accent); color:var(--accentText); }
.choice-panel p { grid-column:1/-1; padding:7px; background:var(--surface); color:var(--muted); font-size:.68rem; text-align:center; }
.layout-choice .truth-section { display:grid; gap:24px; }

/* Telegram 02: signal */
.layout-signal .hero { background:radial-gradient(circle at 50% 68%,var(--surface2),transparent 38%); }
.layout-signal .hero-copy { text-align:center; }
.layout-signal .hero-lead { margin-inline:auto; }
.visual-signal { border-radius:999px 999px var(--radius) var(--radius); }
.signal-image { block-size:100%; }
.signal-image img { filter:saturate(.72) contrast(1.08); }
.visual-signal > strong { position:absolute; z-index:3; inset:50% auto auto 50%; max-inline-size:70%; overflow:hidden; padding:7px 12px; border-radius:999px; background:var(--surface); color:var(--text); text-overflow:ellipsis; transform:translate(-50%,-50%); }
.signal-wave { position:absolute; inset:50% auto auto 50%; }
.signal-wave i { position:absolute; inline-size:80px; block-size:80px; border:2px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%); animation:signalWave 2.8s ease-out infinite; }
.signal-wave i:nth-child(2) { animation-delay:.8s; }
.signal-wave i:nth-child(3) { animation-delay:1.6s; }
@keyframes signalWave { from { opacity:.75; transform:translate(-50%,-50%) scale(.5); } to { opacity:0; transform:translate(-50%,-50%) scale(2.4); } }

/* Telegram 04 and 06: cable network */
.visual-wire { overflow:visible; background:transparent; }
.wire-image { position:absolute; inset:0 7%; overflow:hidden; border-radius:var(--radius); }
.wire-path { position:absolute; z-index:2; inset:18% 3% auto; block-size:3px; background:var(--accent); transform:rotate(18deg); }
.wire-node { position:absolute; z-index:3; min-height:38px; display:flex; align-items:center; padding:5px 8px; border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:.63rem; }
.wire-node.node-a { inset:8% auto auto 0; }
.wire-node.node-b { inset:44% 0 auto auto; }
.wire-node.node-c { inset:auto auto 3% 13%; }
.layout-bridge .wire-path { transform:rotate(-14deg); background:var(--accent); }
.layout-bridge .outcome-grid { grid-template-columns:1fr 1fr; }
.layout-bridge .outcome-grid article:nth-child(2) { transform:translateY(18px); }

/* Telegram 05: public pulse */
.visual-pulse { border:1px solid var(--line); }
.pulse-image { block-size:100%; }
.pulse-image img { filter:brightness(.5) saturate(.7); }
.pulse-bars { position:absolute; z-index:2; inset:22% 9% 28%; display:flex; align-items:center; justify-content:center; gap:8px; }
.pulse-bars i { inline-size:8px; block-size:44%; background:var(--accent); border-radius:2px; animation:pulseBar 1.3s ease-in-out infinite alternate; transform-origin:center; }
.pulse-bars i:nth-child(2) { animation-delay:.18s; }
.pulse-bars i:nth-child(3) { animation-delay:.36s; }
.pulse-bars i:nth-child(4) { animation-delay:.54s; }
.pulse-bars i:nth-child(5) { animation-delay:.72s; }
@keyframes pulseBar { to { transform:scaleY(2); } }
.visual-pulse > p { position:absolute; inset:auto 10px 10px; padding:6px 8px; background:var(--surface2); color:var(--accent); font-size:.66rem; font-weight:850; }
.layout-pulse .report-section { display:grid; gap:24px; }

/* Telegram 07: spotlight compare */
.visual-spotlight { overflow:hidden; }
.spotlight-image { block-size:100%; }
.spotlight-image img { filter:brightness(.58) saturate(.72); }
.spotlight-beam { position:absolute; z-index:2; inset:-15% -5%; background:conic-gradient(from 212deg at 50% 0,transparent 0 34deg,rgb(255 106 77 / .46) 35deg 56deg,transparent 57deg); animation:spotlight 4.8s ease-in-out infinite alternate; }
@keyframes spotlight { to { transform:translateX(12%) rotate(7deg); } }
.visual-spotlight > div { position:absolute; z-index:3; inset:auto 10px 10px; display:flex; justify-content:space-between; gap:10px; }
.visual-spotlight b { padding:6px 8px; border-radius:var(--radius); background:var(--surface2); font-size:.63rem; text-transform:uppercase; }

/* Telegram 08: input-first command */
.layout-command .hero-copy { text-align:start; }
.layout-command .visual { border:2px solid var(--text); box-shadow:8px 8px 0 var(--text); }
.visual-command { background:var(--surface); }
.command-image { position:absolute; inset:0; }
.command-image img { opacity:.4; filter:grayscale(.4); }
.command-chip { position:absolute; z-index:3; inset:18px 14px auto; padding:9px 11px; overflow:hidden; border:2px solid var(--text); background:var(--surface); color:var(--text); font-weight:900; text-overflow:ellipsis; }
.command-result { position:absolute; z-index:3; inset:auto 14px 14px; display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--text); background:var(--surface); }
.command-result b { min-height:48px; display:grid; place-items:center; padding:5px; border-inline-end:2px solid var(--text); font-size:.62rem; }
.command-result b:last-child { border:0; }
.layout-command .outcome-grid article { border:2px solid var(--text); }

/* Shared variations that make long pages distinct */
.layout-cinema .outcome-grid, .layout-lens .outcome-grid, .layout-pulse .outcome-grid { grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; }
.layout-cinema .outcome-grid article, .layout-lens .outcome-grid article, .layout-pulse .outcome-grid article { scroll-snap-align:start; }
.layout-contact .steps-section, .layout-wire .steps-section, .layout-command .steps-section { background:var(--surface2); inline-size:100%; padding-inline:max(14px,calc((100vw - 1120px)/2)); }
.layout-orbit .faq-section, .layout-polaroid .faq-section, .layout-bridge .faq-section { display:grid; gap:26px; }
.layout-archive .report-section .outcome-grid, .layout-spotlight .report-section .outcome-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
.layout-archive .report-section article, .layout-spotlight .report-section article { flex:0 0 74%; scroll-snap-align:start; }

@media (min-width:760px) {
  .hero { grid-template-areas:"header header" "copy media" "trust media"; grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr); grid-template-rows:auto 1fr auto; align-items:center; column-gap:50px; padding-inline:max(20px,calc((100vw - 1180px)/2)); padding-block-end:34px; }
  .site-header { min-height:68px; }
  .hero h1 { font-size:clamp(3.8rem,6vw,6.5rem); }
  .hero-media { align-self:stretch; display:grid; place-items:center; }
  .visual { inline-size:100%; block-size:auto; min-height:560px; max-height:720px; }
  .hero-action .primary-cta { inline-size:auto; min-inline-size:270px; }
  .handle-control { max-inline-size:540px; }
  .sticky-cta { display:none; }
  .content-section { padding-block:110px; }
  .truth-section { grid-template-columns:minmax(0,1fr) minmax(380px,.8fr); align-items:center; gap:70px; }
  .truth-visual { margin:0; min-height:420px; }
  .outcome-grid { grid-template-columns:repeat(2,1fr); }
  .outcome-grid article { min-height:180px; }
  .steps-section ol { grid-template-columns:repeat(3,1fr); gap:28px; }
  .steps-section li { grid-template-columns:1fr; border:0; align-content:start; }
  .faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
  .faq-list { margin:0; }
  .site-footer { grid-template-columns:1fr auto; align-items:end; padding-block-end:34px; }
  .layout-signal .hero { grid-template-areas:"header header" "copy copy" "media media" "trust trust"; grid-template-columns:1fr; }
  .layout-signal .hero-copy { max-inline-size:900px; margin-inline:auto; }
  .layout-signal .visual { min-height:420px; max-inline-size:820px; }
  .layout-cover .report-section, .layout-contact .steps-section, .layout-wire .steps-section, .layout-command .steps-section { padding-inline:max(20px,calc((100vw - 1120px)/2)); }
  .layout-cover .outcome-grid { grid-template-columns:repeat(4,1fr); }
  .layout-choice .hero { grid-template-columns:1fr 1fr; }
  .layout-command .hero { grid-template-columns:1.05fr .95fr; }
}

@media (max-width:359px) {
  .hero { padding-inline:10px; gap:9px; }
  .site-header { min-height:48px; font-size:.65rem; }
  .hero h1 { font-size:1.86rem; }
  .hero-lead { font-size:.84rem; line-height:1.3; }
  .hero-kicker { margin-block-end:5px; font-size:.62rem; }
  .visual { min-height:158px; block-size:27vh; max-height:190px; }
  .hero-action { margin-block-start:9px; }
  .hero-action p, .field-message { margin-block-start:5px; font-size:.61rem; }
  .primary-cta, .handle-control button { min-height:46px; }
  .handle-form { margin-block-start:8px; }
  .handle-control { min-height:48px; }
  .handle-control input { min-height:46px; font-size:.88rem; }
  .handle-control button { padding-inline:9px; font-size:.74rem; }
  .hero-trust { font-size:.57rem; }
  .content-section, .final-section, .site-footer { inline-size:calc(100% - 20px); }
  .contact-frame { border-width:3px; }
  .choice-panel button { font-size:.64rem; }
}

@media (prefers-color-scheme:dark) {
  body[data-variant="relationship-02"], body[data-variant="relationship-05"], body[data-variant="telegram-02"], body[data-variant="telegram-03"], body[data-variant="telegram-08"] {
    --bg:#17191d; --surface:#24272c; --surface2:#30343a; --text:#f5f1e9; --muted:#c9c5bd; --line:#66665f;
  }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .enter, .reveal { opacity:1; transform:none; }
}