/* Hallmark · check · built: the project · redesign: polish · genre: modern-minimal · theme: brand (the SiteHelp.bg logo: navy ink, one orange signal)
 * hero: Stage, a 3D stack of three client sites that tilts toward the pointer (asked for by the owner); the education offers get their own dark band after the services · nav: kept, wordmark replaced by the logo, two mega menus · footer: a navy band with the logo in colour, four link columns · imagery: the product built, client sites in 3D and two education screens shown flat and cropped like real screenshots · signature: three finished client sites stacked in 3D
 * axes: light/grotesk-heavy/warm · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R4 V3 · weakest: V, the layout is the owner's and stays; the polish spends itself on tokens, states, the hero's one entrance and the tells */
/* Hallmark · dismissed 49 · the growth tabs and the questions are buttons whose label is a sentence; they wrap inside their own column by design */
/* Hallmark · the pointer tilt is the owner's request for a 3D moment: at most 8 degrees, desktop pointers only, still under reduced motion; the cards fly in once */
/* Hallmark · dropped the ads service (Google, Facebook, Instagram) · the owner no longer offers it */
/* Hallmark · the owner asked for 3D motion across the page: scroll-linked reveals (CSS view timelines, visible without support), a pointer tilt on cards, two tilted ribbons moving in opposite directions (the owner asked for both), pausing on hover or focus, all still under reduced motion */
/* Hallmark · the 45% figure is BrightLocal's Local Consumer Review Survey 2026 (1002 US adults), cited on the page */
/* Hallmark · answered F8 · the owner asked for 3D motion all over the page; each pattern is short, scroll-linked and still under reduced motion */
/* Hallmark · shapes, at the owner's request no pills anywhere: cards 22 to 30px, buttons 12px, small controls 10px, tags 8px; icons are Phosphor (regular, bold for checks) */
/* Hallmark · taste review, the day strip leads each panel with one word (Google, AI, Доверие, 24/7): the education header stacks, the reasons became one customer's day, dawn to night, in the brand's own tint, white, orange and navy, one label per intent */
/* Hallmark · answered F15 · the hero and the why split take a wider gap; menus, tabs and cards keep their own tighter ones */
/* Hallmark · the checklist and the before and after slider were removed at the owner's request; the band for schools and online courses took their place, sold under SiteHelp */
/* Hallmark · waive 39b · each question row in the FAQ is a whole card, the question and its toggle in one tap target · "Въпроси" rows are cards, not a row of buttons */
/* Hallmark · the request form is one short step (name, phone, a service to tap, an optional note) on the orange panel; it posts nowhere until data-endpoint is set and says so */
/* Hallmark · waive 80 · a drawn robot, asked for by the owner · the "Автоматизация" tab shows a robot asking what should happen on its own, question marks bobbing, still under reduced motion */
/* Hallmark · the services bento keeps still; each card leads with a Phosphor icon tile and ends on icon-led facts, the logo watermark dropped at the owner's request */
/* Geologica, self-hosted (SIL OFL 1.1, see fonts/OFL.txt). One variable file per script covers weights 400-800. */
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/geologica-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/geologica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/geologica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font-sans: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-20: 20px; --space-lg: 24px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-xl: 40px; --space-48: 48px; --space-56: 56px; --space-2xl: 64px; --space-3xl: 96px; --space-112: 112px; --space-120: 120px; --space-4xl: 144px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-rise: 800ms; --dur-marquee: 48s;
  --c-paper: #F5F6F8; --c-sheet: #FDFDFC; --c-ink: #0B1124; --c-ink-2: #474D63; --c-on-ink: #F5F6F8; --c-on-ink-2: #C3C7D4;
  --c-line: #DCDFE6; --c-line-2: #B4B9C8; --c-field: #7A8094; --c-hover: #E9EBF0; --c-hover-2: #EEF0F4; --c-header: #F5F6F8;
  --c-accent: #FD6A12; --c-accent-deep: #C24A06; --c-accent-ink: #0B1124; --c-accent-tint: #F6E0D3; --c-error: #B42318; --c-open: #157A3E; --c-serp: #1A3FB5;
  --c-skel: #E3E6EC; --c-skel-2: #EDEFF3; --c-map: #E7ECE3; --c-map-road: #F4F1E4;
  --shadow-hero: 0 40px 70px -40px rgba(11, 17, 36, 0.45); --shadow-menu: 0 30px 50px -30px rgba(11, 17, 36, 0.28); --shadow-pin: 0 6px 14px -4px rgba(11, 17, 36, 0.4);
  --bk-paper: #F4F7FA; --bk-ink: #13202E; --bk-ink-2: #4B5A69; --bk-green: #1E4E8C; --bk-soft: #E2ECF7; --bk-line: #DAE2EB;
  --bk-wheat: #E3ECF6; --bk-cream: #EDF1F5; --bk-crust: #F2C14E; --bk-gold: #F2C14E;
  --sl-paper: #F8EEF2; --sl-ink: #3B1530; --sl-plum: #6B2457; --sl-soft: #EFD9E3;
  --rs-paper: #FFF7EC; --rs-ink: #2B1410; --rs-wine: #6E1E1E; --rs-line: #EADCC8;
  --shadow-3d: 0 60px 90px -45px rgba(11, 17, 36, 0.5), 0 14px 28px -14px rgba(11, 17, 36, 0.2); --shadow-chip: 0 30px 50px -18px rgba(11, 17, 36, 0.38), 0 4px 10px -4px rgba(11, 17, 36, 0.15);
  --dur-fly: 1100ms;
  --c-plan: #172039; --c-plan-box: #212A47; --c-plan-tile: #2C3659;
  --c-bot-face: #1E2742; --c-foot-line: #232C4A; --c-foot-mark: #1A2340;
  --c-edu: #FDF2EA; --c-edu-line: #F0DCCD; --c-tint-line: #E8C6B1;
  --shadow-shot: 0 30px 60px -34px rgba(11, 17, 36, 0.38), 0 2px 6px rgba(11, 17, 36, 0.06);
  --lm-stage: #E2EEE6; --lm-bg: #F6F7F6; --lm-card: #FCFCFB; --lm-ink: #1A1D1B; --lm-ink-2: #59615C; --lm-line: #E3E6E4; --lm-green: #157A43; --lm-soft: #E2F1E7;
  --lm-cover: #CBE3D3; --lm-cover-2: #EEF6F1; --lm-star: #E3A008; --lm-sale: #B3261E; --lm-scrim: #1B1F1D; --lm-on-scrim: #FAFAF9;
  --uc-stage: #E4EBF7; --uc-bg: #F7F9FC; --uc-card: #FCFDFE; --uc-ink: #141B2E; --uc-ink-2: #566077; --uc-line: #E1E6EF; --uc-blue: #1F5BC9; --uc-blue-soft: #E3ECFC;
  --uc-red: #B23D2A; --uc-red-soft: #FBE6E1; --uc-green: #1D7149; --uc-green-soft: #E1F2E8; --uc-amber: #855700; --uc-amber-soft: #FBEFD3; --uc-yellow: #F6C343;
  --header-h: 80px;
  --r-btn: 12px; --r-ctl: 10px; --r-tag: 8px;
  --d-1: 0.6cqw; --d-2: 1cqw; --d-3: 1.4cqw; --d-4: 2cqw; --d-5: 2.6cqw; --d-6: 3.4cqw; --d-7: 4cqw;
}
html, body { overflow-x: clip; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--c-ink); text-decoration: none; }
h1, h2, h3 { overflow-wrap: break-word; min-width: 0; text-wrap: balance; font-synthesis: none; }
p { text-wrap: pretty; }
button, input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--c-ink-2); }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-sheet); }
.on-dark :focus-visible { outline-color: var(--c-on-ink); box-shadow: 0 0 0 5px var(--c-ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-lg); box-sizing: border-box; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.press { transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.press:hover { transform: translateY(-1px); }
.press:active { transform: translateY(1px); }
.press:disabled, .press[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.navbtn { transition: background-color var(--dur-micro) var(--ease-out); }
.navbtn:hover { background: var(--c-hover); }
.navbtn:active { transform: translateY(1px); }
.navbtn:disabled { opacity: 0.55; cursor: not-allowed; }
.navbtn svg { transition: transform var(--dur-short) var(--ease-out); }
.navbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.megalink { transition: background-color var(--dur-micro) var(--ease-out); }
.megalink:hover { background: var(--c-hover-2); }
.mob { display: none; }
.logo { display: block; height: 48px; width: auto; transform-origin: left center; }
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-56); align-items: center; }
.stage { position: relative; margin: 0; height: clamp(400px, 38vw, 560px); perspective: 1600px; perspective-origin: 50% 35%; --px: 0; --py: 0; }
.rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-16deg) rotateZ(2deg); transition: transform var(--dur-long) var(--ease-out); }
.card3d { position: absolute; border-radius: 16px; overflow: hidden; container-type: inline-size; box-shadow: var(--shadow-3d); }
.c-back-l { left: -4%; top: 0; width: 50%; transform: translateZ(-120px); --i: 0; }
.c-back-r { right: -1%; top: 5%; width: 46%; transform: translateZ(-80px); --i: 2; }
.c-main { left: 8%; top: 40%; width: 82%; transform: translateZ(60px); --i: 1; }
.chip3d { position: absolute; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: 16px; background: var(--c-sheet); color: var(--c-ink); box-shadow: var(--shadow-chip); font-size: 14px; line-height: 1.35; white-space: nowrap; }
.chip3d b { display: block; font-weight: 700; }
.chip3d small { display: block; font-size: 13px; color: var(--c-ink-2); }
.chip3d__ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--c-accent); color: var(--c-accent-ink); display: flex; align-items: center; justify-content: center; }
.chip-a { right: -2%; bottom: 0; transform: translateZ(170px); --i: 3; }
.chip-b { left: -8%; top: 31%; transform: translateZ(140px); --i: 4; }
.sl, .rs { padding: var(--d-5) var(--d-6) var(--d-6); display: flex; flex-direction: column; gap: var(--d-4); }
.sl { background: var(--sl-paper); color: var(--sl-ink); }
.rs { background: var(--rs-paper); color: var(--rs-ink); }
.sl__nav, .rs__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--d-3); font-size: 4cqw; }
.sl__nav b, .rs__nav b { font-weight: 800; letter-spacing: -0.03em; }
.sl__pill, .rs__pill { padding: var(--d-2) var(--d-4); border-radius: 1cqw; font-size: 3.4cqw; font-weight: 700; white-space: nowrap; }
.sl__pill { background: var(--sl-plum); color: var(--sl-paper); }
.rs__pill { background: var(--rs-wine); color: var(--rs-paper); }
.sl__h, .rs__h { font-weight: 800; font-size: 9cqw; line-height: 1; letter-spacing: -0.045em; }
.rs__h { color: var(--rs-wine); }
.sl__days, .sl__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-2); font-size: 3.4cqw; font-weight: 700; text-align: center; }
.sl__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl__days span, .sl__times span { padding: var(--d-2) 0; border-radius: var(--d-2); background: var(--sl-soft); }
.sl__days span small { display: block; font-size: 2.8cqw; font-weight: 400; }
.sl__days span.on, .sl__times span.on { background: var(--sl-plum); color: var(--sl-paper); }
.rs__rows { display: flex; flex-direction: column; gap: var(--d-2); }
.rs__row { display: flex; justify-content: space-between; gap: var(--d-3); font-size: 3.8cqw; padding-bottom: var(--d-2); border-bottom: 1px solid var(--rs-line); font-variant-numeric: tabular-nums; }
.rs__row span:last-child { font-weight: 700; }
.hb { background: var(--bk-paper); color: var(--bk-ink); padding: var(--d-4) var(--d-5) var(--d-5); display: flex; flex-direction: column; gap: var(--d-4); }
.hb__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--d-3); font-size: 2.2cqw; color: var(--bk-ink-2); }
.hb__nav b { font-size: 2.8cqw; font-weight: 800; letter-spacing: -0.03em; color: var(--bk-ink); }
.hb__links { display: flex; align-items: center; gap: var(--d-4); }
.hb__pill { padding: var(--d-1) var(--d-3); border-radius: 1cqw; background: var(--bk-green); color: var(--bk-paper); font-weight: 700; }
.hb__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--d-5); align-items: start; }
.hb__copy { display: flex; flex-direction: column; gap: var(--d-3); padding-top: var(--d-2); }
.hb__open { align-self: flex-start; padding: var(--d-1) var(--d-3); border-radius: 1cqw; background: var(--bk-soft); color: var(--bk-green); font-size: 1.9cqw; font-weight: 700; }
.hb__h { font-weight: 800; font-size: 6.4cqw; line-height: 1; letter-spacing: -0.045em; }
.hb__p { font-size: 2.2cqw; line-height: 1.45; color: var(--bk-ink-2); }
.hb__ctas { display: flex; gap: var(--d-2); font-size: 2.2cqw; font-weight: 700; }
.hb__ctas span { padding: var(--d-2) var(--d-4); border-radius: 1cqw; border: 0.25cqw solid var(--bk-green); color: var(--bk-green); }
.hb__ctas span:first-child { background: var(--bk-green); color: var(--bk-paper); }
.hb__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-2); }
.hb__tile { aspect-ratio: 5 / 4; border-radius: var(--d-3); padding: var(--d-3); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.hb__tile b { font-weight: 800; font-size: 2.5cqw; letter-spacing: -0.03em; line-height: 1.05; }
.hb__tile span { font-size: 2cqw; font-variant-numeric: tabular-nums; }
.hb__strip { display: flex; justify-content: space-between; gap: var(--d-3); padding-top: var(--d-3); border-top: 1px solid var(--bk-line); font-size: 2cqw; color: var(--bk-ink-2); }
.rise { display: block; }
.mega { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
.c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c9 { grid-column: span 9; }
.ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); }
.bento6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.s3 { grid-column: span 3; } .s2 { grid-column: span 2; }
.tabsgrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg); align-items: start; }
.panel2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); align-items: center; }
.price3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--r-ctl); border: 1.5px solid var(--c-line-2); background: var(--c-sheet); color: var(--c-ink); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--c-ink); }
.chip:active { transform: translateY(1px); }
.chip:disabled { opacity: 0.55; cursor: not-allowed; }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.field { height: 52px; padding: 0 var(--space-md); border-radius: 14px; border: 1.5px solid var(--c-field); background: var(--c-sheet); color: var(--c-ink); font-size: 16px; box-sizing: border-box; outline: 2px solid transparent; outline-offset: -3px; }
.field:focus-visible { outline-color: var(--c-ink); box-shadow: none; }
.field[aria-invalid="true"] { border-color: var(--c-error); }
.field:disabled { opacity: 0.55; cursor: not-allowed; }
.marquee { display: flex; width: max-content; }
.mset { display: flex; }
.marquee-wrap:hover .marquee, .marquee-wrap:focus-within .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fly { from { opacity: 0; transform: translate3d(0, 90px, -280px) rotateX(16deg); } }
@media (prefers-reduced-motion: no-preference) {
  .marquee { animation: marquee var(--dur-marquee) linear infinite; }
  .rise { animation: rise var(--dur-rise) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .enter { animation: enter var(--dur-long) var(--ease-out); }
  .card3d, .chip3d { animation: fly var(--dur-fly) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .rig { transform: rotateX(calc(12deg - var(--py) * 10deg)) rotateY(calc(-18deg + var(--px) * 16deg)) rotateZ(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { width: auto; } .mset { flex-wrap: wrap; } .dupe { display: none !important; }
  .press, .navbtn, .chip, .megalink, .navbtn svg, .foot__cols a, .foot__bar a, .qa, .qa__sign, .qa__sign svg, .seg__btn { transition: none; }
  .press:hover, .press:active, .chip:active, .navbtn:active { transform: none; }
  .rig { transition: none; }
}

.tilt { transform: perspective(1000px) rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 9deg)); transition: transform var(--dur-short) var(--ease-out); }
.ribbons { position: relative; height: 210px; overflow: clip; display: grid; place-items: center; }
.ribbon { position: absolute; left: -4%; right: -4%; padding: var(--space-md) 0; }
.ribbon--back { background: var(--c-accent); color: var(--c-accent-ink); transform: rotate(3deg); }
.ribbon--front { background: var(--c-ink); color: var(--c-on-ink); transform: rotate(-2.5deg); box-shadow: var(--shadow-3d); }
.ribbon .item { display: inline-flex; align-items: center; gap: var(--space-36); padding-right: var(--space-36); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; white-space: nowrap; }
.ribbon .sep { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); }
.ribbon--front .sep { background: var(--c-accent); }
.ribbon--back .sep { background: var(--c-ink); }
.marquee.rev { animation-direction: reverse; }
.why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-56); align-items: center; }
.stat { display: flex; align-items: flex-end; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--c-line); }
.stat__n { font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: 0.85; letter-spacing: -0.06em; color: var(--c-accent-deep); font-variant-numeric: tabular-nums; }
.stat p { margin: 0; max-width: 300px; font-size: 17px; line-height: 1.45; }
.stat small { display: block; margin-top: var(--space-xs); font-size: 13px; color: var(--c-ink-2); }
.stat small a { text-decoration: underline; text-underline-offset: 2px; color: var(--c-ink-2); }
/* Growth chart under the 45% stat: 2025 in gray for context, 2026 in the accent; bar length is the share (45% fills 60% of the track) */
.trend { margin: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.trend__title { font-size: 16px; font-weight: 700; }
.trend__rows { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.trend__rows::before { content: ""; position: absolute; left: calc(44px + var(--space-sm)); top: calc(var(--space-2xs) * -1); bottom: calc(var(--space-2xs) * -1); width: 1px; background: var(--c-line-2); }
.trend__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--space-sm); --i: 0; }
.trend__row--now { --i: 1; }
.trend__year { font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.trend__track { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.trend__bar { flex: 0 0 auto; width: calc(var(--v) * 1.3333%); height: 24px; border-radius: 0 4px 4px 0; background: var(--c-field); transform-origin: left center; }
.trend__row--now .trend__bar { background: var(--c-accent); }
.trend__val { font-size: 16px; font-weight: 800; }
.trend__row--now .trend__val { font-size: 20px; letter-spacing: -0.02em; }
.trend__next { display: flex; align-items: flex-start; gap: var(--space-xs); margin: 0; max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--c-ink-2); }
.trend__next b { color: var(--c-ink); }
.trend__next svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-accent-deep); }
/* js/main.js arms these once, outside reduced motion, then grows the bars when the chart comes into view */
.trend.is-armed .trend__bar { transform: scaleX(0); }
.trend.is-armed .trend__val { opacity: 0; }
.trend.is-armed .trend__next { opacity: 0; transform: translateY(8px); }
.trend.is-in .trend__bar { transform: none; transition: transform var(--dur-rise) var(--ease-out) calc(var(--i) * 120ms); }
.trend.is-in .trend__val { opacity: 1; transition: opacity var(--dur-short) var(--ease-out) calc(var(--i) * 120ms + 450ms); }
.trend.is-in .trend__next { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out) 700ms, transform var(--dur-long) var(--ease-out) 700ms; }
.day { margin-top: var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.day__h { margin: 0; font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.day__strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 28px; overflow: hidden; border: 1px solid var(--c-line); }
.day__slot { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-32) var(--space-28); box-sizing: border-box; }
.day__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.day__time { font-weight: 800; font-size: clamp(34px, 3.1vw, 46px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.day__top svg { flex: 0 0 auto; width: 26px; height: 26px; }
.day__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.day__text { font-size: 15px; line-height: 1.55; }
.fan { position: relative; margin: 0; height: 580px; perspective: 1400px; --px: 0; --py: 0; }
.fan__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(14deg); transition: transform var(--dur-long) var(--ease-out); }
.demo { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.demo__bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.seg { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 14px; background: var(--c-sheet); border: 1px solid var(--c-line); }
.seg__btn { min-height: 44px; padding: 0 var(--space-20); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--c-ink-2); font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg__btn:hover { color: var(--c-ink); background: var(--c-hover-2); }
.seg__btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }
.demo__verdict { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: 17px; font-weight: 700; }
.demo__verdict svg { flex: 0 0 auto; width: 22px; height: 22px; }
.fcard__body { display: flex; flex-direction: column; gap: var(--space-sm); }
.fcard { position: absolute; width: 54%; padding: var(--space-lg); border-radius: 22px; background: var(--c-sheet); box-shadow: var(--shadow-3d); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-sm); font-size: 15px; }
.f-maps { left: 0; top: 0; transform: translateZ(-140px) rotateZ(-6deg); --i: 0; }
.f-serp { right: 0; top: 7%; transform: translateZ(-50px) rotateZ(-2deg); --i: 1; }
.f-ai { width: 64%; left: 18%; top: 47%; transform: translateZ(90px) rotateZ(2deg); --i: 2; }
.fcard__label { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.fcard__q { align-self: flex-end; max-width: 85%; padding: var(--space-xs) var(--space-sm); border-radius: 16px 16px 4px 16px; background: var(--c-ink); color: var(--c-on-ink); }
.fcard__a { padding: var(--space-sm); border-radius: 16px 16px 16px 4px; background: var(--c-hover-2); line-height: 1.5; }
.fcard__src { align-self: flex-start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-tag); border: 1px solid var(--c-line-2); font-size: 13px; color: var(--c-ink-2); }
.fcard__search { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--r-ctl); border: 1px solid var(--c-line); }
.fcard__hit { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm); border-radius: 14px; border: 1.5px solid var(--c-accent); background: var(--c-accent-tint); }
.fcard__hit b { color: var(--c-serp); }
.fcard__hit small { color: var(--c-ink-2); font-size: 13px; }
.fcard__hit.fcard__hit--other { border-color: var(--c-line); background: var(--c-sheet); }
.fcard__acts { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.fcard__acts span { padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-tag); border: 1.5px solid var(--c-ink); font-size: 13px; font-weight: 700; }
.fcard__acts span:first-child { background: var(--c-ink); color: var(--c-on-ink); }
.edu { margin: 0 var(--space-20); padding: var(--space-4xl) 0; border-radius: 40px; background: var(--c-edu); color: var(--c-ink); }
.edu-head { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 760px; }
.edu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.edu-card { display: flex; flex-direction: column; gap: var(--space-32); padding: var(--space-md) var(--space-md) var(--space-32); border-radius: 30px; background: var(--c-sheet); color: var(--c-ink); border: 1px solid var(--c-edu-line); }
.edu-stage { position: relative; margin: 0; height: 400px; border-radius: 22px; overflow: hidden; }
.edu-stage--lm { background: var(--lm-stage); }
.edu-stage--uc { background: var(--uc-stage); }
.edu-shot { position: absolute; left: 7%; right: 7%; top: 9%; height: 118%; border-radius: 12px; overflow: hidden; container-type: inline-size; box-shadow: var(--shadow-shot); }
.edu-text { display: flex; flex-direction: column; gap: var(--space-md); padding: 0 var(--space-md); flex: 1 1 auto; }
.edu-text h3 { margin: 0; font-weight: 800; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.edu-text p { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--c-ink-2); }
.edu-list { margin: var(--space-2xs) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); font-size: 16px; line-height: 1.45; }
.edu-list li { display: flex; align-items: center; gap: var(--space-sm); }
.edu-list svg { flex: 0 0 auto; width: 22px; height: 22px; }
.edu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: auto; padding-top: var(--space-xs); }
.edu-note { display: flex; align-items: center; gap: var(--space-xs); font-size: 15px; color: var(--c-ink-2); }
.edu-note b { color: var(--c-ink); font-weight: 700; }
.lm { background: var(--lm-card); color: var(--lm-ink); display: flex; flex-direction: column; font-size: 1.8cqw; line-height: 1.35; }
.lm svg { flex: 0 0 auto; }
.lm__av { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--lm-soft); color: var(--lm-green); display: flex; align-items: center; justify-content: center; font-size: 1.5cqw; font-weight: 800; }
.lm__site { display: flex; align-items: center; gap: var(--d-4); padding: var(--d-2) var(--d-4); border-bottom: 1px solid var(--lm-line); }
.lm__brand { display: flex; align-items: center; gap: var(--d-2); margin-right: var(--d-3); font-weight: 800; font-size: 2.6cqw; letter-spacing: -0.03em; }
.lm__brand i { width: 4.4cqw; height: 4.4cqw; border-radius: 1cqw; background: var(--lm-green); color: var(--lm-card); font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 2.2cqw; }
.lm__nav { display: flex; align-items: center; gap: var(--d-4); margin-right: auto; font-size: 1.75cqw; color: var(--lm-ink-2); white-space: nowrap; }
.lm__nav span { display: inline-flex; align-items: center; gap: 0.5cqw; }
.lm__nav span.on { color: var(--lm-ink); font-weight: 700; }
.lm__nav svg { width: 1.4cqw; height: 1.4cqw; }
.lm__search { width: 2.4cqw; height: 2.4cqw; color: var(--lm-ink-2); }
.lm__start { padding: var(--d-1) var(--d-3); border-radius: 1cqw; background: var(--lm-green); color: var(--lm-card); font-size: 1.6cqw; font-weight: 700; white-space: nowrap; }
.lm__login { display: flex; align-items: center; gap: var(--d-1); font-size: 1.6cqw; font-weight: 700; }
.lm__head { display: flex; flex-direction: column; gap: var(--d-1); padding: var(--d-3) var(--d-4) var(--d-2); }
.lm__rate { display: flex; align-items: center; gap: 0.3cqw; font-size: 1.6cqw; color: var(--lm-ink-2); }
.lm__rate svg { width: 1.9cqw; height: 1.9cqw; color: var(--lm-star); }
.lm__rate b { margin: 0 0.4cqw 0 var(--d-1); color: var(--lm-ink); }
.lm__title { font-size: 3.6cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.lm__meta { display: flex; align-items: center; gap: var(--d-4); font-size: 1.6cqw; color: var(--lm-ink-2); white-space: nowrap; }
.lm__meta b { color: var(--lm-ink); font-weight: 700; }
.lm__by { display: flex; align-items: center; gap: var(--d-1); }
.lm__head .lm__av { width: 3.4cqw; height: 3.4cqw; font-size: 1.3cqw; }
.lm__acts { display: flex; gap: var(--d-3); margin-left: auto; }
.lm__acts span { display: flex; align-items: center; gap: 0.5cqw; }
.lm__acts svg { width: 1.8cqw; height: 1.8cqw; }
.lm__body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--d-4); align-items: start; padding: var(--d-2) var(--d-4) var(--d-4); }
.lm__main, .lm__side { display: flex; flex-direction: column; gap: var(--d-3); min-width: 0; }
.lm__cover { position: relative; aspect-ratio: 2 / 1; box-sizing: border-box; padding: var(--d-3) var(--d-4); border-radius: 1.2cqw; overflow: hidden; background: radial-gradient(circle at 80% 46%, var(--lm-cover-2) 0 21%, transparent 21.5%), linear-gradient(135deg, var(--lm-cover-2), var(--lm-cover)); }
.lm__ctext { position: relative; display: flex; flex-direction: column; width: 58%; }
.lm__kick { margin-bottom: var(--d-1); font-size: 1.3cqw; font-weight: 700; color: var(--lm-ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.lm__ct1 { font-size: 3.8cqw; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--lm-green); }
.lm__ct2 { font-size: 3cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.lm__topics { margin: var(--d-3) 0 0; padding: var(--d-1) var(--d-2); list-style: none; border-radius: 1cqw; background: var(--lm-card); box-shadow: 0 0.6cqw 1.6cqw -0.8cqw rgba(26, 29, 27, 0.25); }
.lm__topics li { display: flex; align-items: center; gap: var(--d-1); padding: 0.7cqw 0; font-size: 1.45cqw; font-weight: 700; }
.lm__topics li + li { border-top: 1px solid var(--lm-line); }
.lm__topics svg { width: 1.8cqw; height: 1.8cqw; color: var(--lm-green); }
.lm__bubble { position: absolute; right: 4%; top: 9%; max-width: 30%; padding: var(--d-1) var(--d-2); border-radius: 1.2cqw 1.2cqw 0.3cqw 1.2cqw; background: var(--lm-card); font-size: 1.3cqw; font-weight: 700; line-height: 1.3; box-shadow: 0 0.6cqw 1.6cqw -0.8cqw rgba(26, 29, 27, 0.25); }
.lm__play { position: absolute; left: 80%; top: 52%; width: 8cqw; height: 8cqw; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lm-green); color: var(--lm-card); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.4cqw rgba(21, 122, 67, 0.16); }
.lm__play svg { width: 3.6cqw; height: 3.6cqw; margin-left: 0.4cqw; }
.lm__trial { position: absolute; left: 80%; bottom: 8%; transform: translateX(-50%); padding: 0.5cqw var(--d-2); border-radius: 0.8cqw; background: var(--lm-scrim); color: var(--lm-on-scrim); font-size: 1.3cqw; font-weight: 700; white-space: nowrap; }
.lm__tabs { display: flex; gap: var(--d-4); border-bottom: 1px solid var(--lm-line); font-size: 1.6cqw; font-weight: 700; color: var(--lm-ink-2); text-transform: uppercase; letter-spacing: 0.03em; }
.lm__tabs span { padding-bottom: var(--d-2); }
.lm__tabs span.on { color: var(--lm-green); box-shadow: inset 0 -0.5cqw 0 var(--lm-green); }
.lm__toch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--d-2); }
.lm__toch b { font-size: 2.1cqw; font-weight: 800; letter-spacing: -0.02em; }
.lm__toch small { font-size: 1.4cqw; color: var(--lm-ink-2); white-space: nowrap; }
.lm__toc { border: 1px solid var(--lm-line); border-radius: 1cqw; overflow: hidden; }
.lm__mod { display: flex; align-items: center; justify-content: space-between; gap: var(--d-2); padding: var(--d-2) var(--d-3); background: var(--lm-soft); color: var(--lm-green); font-size: 1.7cqw; font-weight: 700; }
.lm__mod svg { width: 1.6cqw; height: 1.6cqw; transform: rotate(180deg); }
.lm__les { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 5.6cqw; align-items: center; gap: var(--d-2); padding: 1.1cqw var(--d-3); border-top: 1px solid var(--lm-line); font-size: 1.6cqw; }
.lm__les span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm__les em { font-style: normal; color: var(--lm-ink-2); font-variant-numeric: tabular-nums; }
.lm__type { width: 2.2cqw; height: 2.2cqw; color: var(--lm-ink-2); }
.lm__les.is-free .lm__type { color: var(--lm-green); }
.lm__lock { justify-self: end; width: 1.8cqw; height: 1.8cqw; color: var(--lm-ink-2); }
.lm__free { justify-self: end; padding: 0.3cqw 0.8cqw; border-radius: 0.6cqw; background: var(--lm-soft); color: var(--lm-green); font-size: 1.25cqw; font-style: normal; font-weight: 700; }
.lm__buy { display: flex; flex-direction: column; gap: var(--d-2); padding: var(--d-3); border: 1px solid var(--lm-line); border-radius: 1.2cqw; background: var(--lm-card); box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(26, 29, 27, 0.3); }
.lm__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--d-1); }
.lm__price b { font-size: 4.4cqw; font-weight: 800; letter-spacing: -0.04em; }
.lm__price s { font-size: 1.8cqw; color: var(--lm-ink-2); }
.lm__off { margin-left: auto; align-self: center; padding: 0.3cqw 0.8cqw; border-radius: 0.6cqw; background: var(--lm-sale); color: var(--lm-card); font-size: 1.3cqw; font-weight: 700; }
.lm__cta, .lm__cart { display: flex; align-items: center; justify-content: center; padding: 1.2cqw var(--d-2); border-radius: 1cqw; font-size: 1.7cqw; font-weight: 700; white-space: nowrap; }
.lm__cta { background: var(--lm-green); color: var(--lm-card); }
.lm__cart { border: 0.25cqw solid var(--lm-green); color: var(--lm-green); }
.lm__safe { display: flex; align-items: center; justify-content: center; gap: 0.6cqw; font-size: 1.25cqw; color: var(--lm-ink-2); }
.lm__safe svg { width: 1.4cqw; height: 1.4cqw; }
.lm__facts { margin: 0; padding: var(--d-2) 0 0; list-style: none; display: flex; flex-direction: column; gap: 1.1cqw; border-top: 1px solid var(--lm-line); font-size: 1.45cqw; }
.lm__facts li { display: flex; align-items: center; gap: var(--d-1); }
.lm__facts svg { width: 1.9cqw; height: 1.9cqw; color: var(--lm-green); }
.lm__teacher { display: flex; flex-direction: column; gap: var(--d-1); padding: var(--d-3); border: 1px solid var(--lm-line); border-radius: 1.2cqw; font-size: 1.4cqw; }
.lm__teacher > small { font-size: 1.3cqw; color: var(--lm-ink-2); }
.lm__teacher b { display: block; font-size: 1.6cqw; }
.lm__teacher .lm__by small { display: block; font-size: 1.25cqw; color: var(--lm-ink-2); }
.uc { background: var(--uc-bg); color: var(--uc-ink); display: flex; flex-direction: column; font-size: 1.7cqw; line-height: 1.35; }
.uc svg { flex: 0 0 auto; }
.uc__bar { padding: 0.9cqw var(--d-4); background: var(--uc-ink); color: var(--uc-card); font-size: 1.35cqw; font-weight: 700; text-align: center; white-space: nowrap; }
.uc__top { display: flex; align-items: center; gap: var(--d-3); padding: var(--d-2) var(--d-4); background: var(--uc-card); border-bottom: 1px solid var(--uc-line); }
.uc__logo { display: flex; align-items: center; gap: var(--d-2); margin-right: var(--d-2); font-weight: 800; font-size: 2.7cqw; letter-spacing: -0.03em; }
.uc__logo i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--uc-blue); color: var(--uc-card); font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 2.3cqw; }
.uc__nav { display: flex; align-items: center; gap: var(--d-3); margin-right: auto; font-size: 1.6cqw; color: var(--uc-ink-2); white-space: nowrap; }
.uc__nav span { display: inline-flex; align-items: center; gap: 0.4cqw; }
.uc__nav span.on { color: var(--uc-ink); font-weight: 700; box-shadow: inset 0 -0.4cqw 0 var(--uc-blue); }
.uc__nav svg { width: 1.3cqw; height: 1.3cqw; }
.uc__cta { padding: var(--d-1) var(--d-3); border-radius: 1cqw; background: var(--uc-blue); color: var(--uc-card); font-weight: 700; font-size: 1.6cqw; white-space: nowrap; }
.uc__cart { position: relative; display: flex; }
.uc__cart svg, .uc__user { width: 2.4cqw; height: 2.4cqw; }
.uc__cart b { position: absolute; top: -0.9cqw; right: -1cqw; min-width: 1.9cqw; height: 1.9cqw; border-radius: 1cqw; background: var(--uc-red); color: var(--uc-card); font-size: 1.1cqw; display: flex; align-items: center; justify-content: center; }
.uc__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--d-5); align-items: center; padding: var(--d-4) var(--d-4) var(--d-7); background: var(--uc-blue); color: var(--uc-card); }
.uc__kick { font-size: 1.25cqw; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--uc-blue-soft); }
.uc__h { margin: var(--d-1) 0; font-size: 3.4cqw; font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
.uc__p { font-size: 1.6cqw; line-height: 1.45; color: var(--uc-blue-soft); }
.uc__btns { display: flex; gap: var(--d-2); margin-top: var(--d-3); }
.uc__go, .uc__see { padding: 1cqw var(--d-3); border-radius: 1cqw; font-size: 1.55cqw; font-weight: 700; white-space: nowrap; }
.uc__go { background: var(--uc-yellow); color: var(--uc-ink); }
.uc__see { box-shadow: inset 0 0 0 0.25cqw var(--uc-card); }
.uc__book { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--d-2); padding: var(--d-3); border-radius: 1.4cqw; background: var(--uc-card); color: var(--uc-ink); box-shadow: 0 1.2cqw 2.8cqw -1.4cqw rgba(20, 27, 46, 0.45); }
.uc__bhead { display: flex; align-items: center; gap: var(--d-1); font-size: 1.7cqw; font-weight: 800; }
.uc__bhead svg { width: 2cqw; height: 2cqw; color: var(--uc-blue); }
.uc__bhead small { margin-left: auto; font-size: 1.3cqw; font-weight: 400; color: var(--uc-ink-2); }
.uc__blabel { font-size: 1.3cqw; color: var(--uc-ink-2); }
.uc__days, .uc__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-1); text-align: center; font-size: 1.4cqw; font-weight: 700; }
.uc__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uc__days span, .uc__times span { padding: 0.8cqw 0; border-radius: 0.8cqw; border: 1px solid var(--uc-line); }
.uc__days small { display: block; font-size: 1.1cqw; font-weight: 400; color: var(--uc-ink-2); }
.uc__days .on, .uc__times .on { background: var(--uc-blue); border-color: var(--uc-blue); color: var(--uc-card); }
.uc__days .on small { color: var(--uc-blue-soft); }
.uc__bgo { padding: 1cqw; border-radius: 1cqw; background: var(--uc-blue); color: var(--uc-card); font-size: 1.5cqw; font-weight: 700; text-align: center; }
.uc__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3cqw; color: var(--uc-bg); }
.uc__sec { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; padding: var(--d-3) var(--d-4) var(--d-3); text-align: center; }
.uc__sec b { font-size: 2.6cqw; font-weight: 800; letter-spacing: -0.03em; }
.uc__sec small { font-size: 1.4cqw; color: var(--uc-ink-2); }
.uc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-2); padding: 0 var(--d-4); }
.uc__prod { display: flex; flex-direction: column; gap: var(--d-1); padding: var(--d-1) var(--d-1) var(--d-2); border-radius: 1.2cqw; background: var(--uc-card); border: 1px solid var(--uc-line); }
.uc__img { position: relative; aspect-ratio: 16 / 11; border-radius: 0.8cqw; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 4.2cqw; font-weight: 800; letter-spacing: -0.04em; }
.uc__img::after { content: ""; position: absolute; right: -22%; bottom: -34%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: 0.08; }
.uc__off { position: absolute; left: 0.8cqw; top: 0.8cqw; padding: 0.3cqw 0.7cqw; border-radius: 0.5cqw; background: var(--uc-red); color: var(--uc-card); font-size: 1.15cqw; font-style: normal; font-weight: 700; letter-spacing: 0; }
.uc__prod b { padding: 0 0.4cqw; font-size: 1.5cqw; font-weight: 800; line-height: 1.25; }
.uc__price { padding: 0 0.4cqw; font-size: 1.45cqw; font-weight: 700; color: var(--uc-blue); }
.uc__btn { margin: 0.4cqw 0.4cqw 0; padding: 0.7cqw; border-radius: 0.8cqw; border: 1px solid var(--uc-blue); color: var(--uc-blue); font-size: 1.3cqw; font-weight: 700; text-align: center; }
.uc-chat { position: absolute; right: 9%; bottom: var(--space-lg); display: flex; align-items: flex-end; gap: var(--space-xs); }
.uc-chat__msg { padding: var(--space-xs) var(--space-sm); border-radius: 14px 14px 4px 14px; background: var(--uc-card); color: var(--uc-ink); font-size: 13px; line-height: 1.35; box-shadow: var(--shadow-shot); }
.uc-chat__msg small { display: block; font-size: 11px; color: var(--uc-ink-2); }
.uc-chat__btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--uc-blue); color: var(--uc-card); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-shot); }
.svc { display: flex; flex-direction: column; gap: var(--space-lg); min-height: 260px; padding: var(--space-32); border-radius: 26px; box-sizing: border-box; }
.svc--lg { min-height: 320px; padding: var(--space-36); }
.svc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.svc__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.svc__ico svg { width: 28px; height: 28px; }
.svc__body { display: flex; flex-direction: column; gap: var(--space-sm); }
.svc h3 { margin: 0; font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; }
.svc--lg h3 { font-size: 34px; }
.svc p { margin: 0; font-size: 16px; line-height: 1.6; }
.svc--lg p { max-width: 460px; font-size: 17px; }
.svc__feats { margin: auto 0 0; padding: var(--space-xs) 0 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); font-size: 15px; font-weight: 700; }
.svc--lg .svc__feats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-md) var(--space-xl); }
.svc--lg .svc__feats li { flex-direction: column; align-items: flex-start; gap: var(--space-xs); line-height: 1.3; }
.svc--lg .svc__feats svg { width: 24px; height: 24px; }
.svc__feats li { display: flex; align-items: center; gap: var(--space-xs); }
.svc__feats svg { flex: 0 0 auto; width: 20px; height: 20px; }
.svc__cta { align-self: flex-start; margin-top: auto; }
.svc__years { display: flex; align-items: center; gap: var(--space-xs); font-size: 15px; font-weight: 700; }
.svc__years span { padding: var(--space-xs) var(--space-sm); border-radius: var(--r-tag); }
.svc__years svg { width: 20px; height: 20px; }
.robo-card { padding: 0; }
.robo { display: block; width: 100%; height: auto; overflow: visible; }
.robo__q { transform-box: fill-box; transform-origin: center; }
@keyframes bob { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) {
  .robo__q { animation: bob 3.6s var(--ease-in-out) infinite; }
  .robo__q--a { animation-delay: -1.2s; } .robo__q--b { animation-delay: -2.1s; } .robo__q--c { animation-delay: -0.6s; }
}
.cta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-56); align-items: start; padding: var(--space-2xl); border-radius: 32px; background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--c-accent) 24%, transparent), transparent 70%), radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 70%), var(--c-plan); color: var(--c-on-ink); }
.cta__pitch { display: flex; flex-direction: column; gap: var(--space-lg); }
.cta__pitch h2 { margin: 0; font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.04em; }
.cta__pitch h2 span { color: var(--c-accent); }
.cta__lede { margin: 0; max-width: 420px; font-size: 19px; line-height: 1.55; color: var(--c-on-ink-2); }
.cta__perks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: 15px; font-weight: 700; }
.cta__perks li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--r-tag); background: var(--c-plan-tile); }
.cta__perks svg { width: 16px; height: 16px; color: var(--c-accent); }
.cta__label { margin: 0 0 var(--space-md); font-size: 14px; font-weight: 700; color: var(--c-on-ink-2); }
.cta__nextwrap { margin-top: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--c-foot-line); }
.cta__next { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-20); }
.cta__next li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.cta__next li > span { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent); color: var(--c-accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.cta__next li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: calc((var(--space-20) - 4px) * -1); width: 2px; border-radius: 1px; background: var(--c-plan-tile); }
.cta__next b { display: block; font-size: 16px; }
.cta__next small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--c-on-ink-2); }
.cta__direct { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--c-foot-line); }
.cta__direct .cta__label { margin-bottom: var(--space-2xs); }
.cta__direct a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: 16px; background: var(--c-plan-box); color: var(--c-on-ink); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; transition: background-color var(--dur-micro) var(--ease-out); }
.cta__direct a small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--c-on-ink-2); }
.cta__dico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--c-accent); color: var(--c-accent-ink); display: flex; align-items: center; justify-content: center; }
.cta__dico svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .cta__direct a:hover { background: var(--c-plan-tile); } }
.cta__stack { position: relative; }
.cta__form { position: relative; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-32); border-radius: 26px; background: var(--c-sheet); color: var(--c-ink); box-shadow: var(--shadow-hero); box-sizing: border-box; }
.cta__set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.cta__q { padding: 0; margin: 0 0 var(--space-xs); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; }
.cta__hint { margin: 0; font-size: 15px; color: var(--c-ink-2); }
.cta__sub { padding: 0; margin: 0 0 var(--space-xs); font-size: 15px; font-weight: 700; }
.cta__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cta__chips .chip { gap: var(--space-xs); }
.cta__chips .chip svg { width: 18px; height: 18px; }
.cta__field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.cta__field label { font-size: 15px; font-weight: 700; }
.cta__field label small { font-weight: 400; color: var(--c-ink-2); }
.cta__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field--area { height: auto; min-height: 92px; padding: var(--space-sm) var(--space-md); line-height: 1.5; resize: vertical; }
.cta__go { width: 100%; min-height: 56px; padding: 0 var(--space-32); border: 0; border-radius: var(--r-btn); background: var(--c-accent); color: var(--c-accent-ink); font-size: 17px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cta__foot { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: calc(var(--space-xs) * -1); }
.cta__help { margin: 0; font-size: 14px; line-height: 1.45; }
.cta__legal { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: 13px; color: var(--c-ink-2); }
.cta__legal svg { flex: 0 0 auto; width: 16px; height: 16px; }
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding: var(--space-xl); border-radius: 30px; background: var(--c-plan); color: var(--c-on-ink); }
.plan__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-xs); }
.plan__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.plan__badge { padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-tag); background: var(--c-accent); color: var(--c-accent-ink); font-size: 13px; font-weight: 700; }
.plan h3 { margin: 0; font-weight: 800; font-size: 34px; letter-spacing: -0.03em; }
.plan__lead { margin: 0; max-width: 380px; font-size: 17px; line-height: 1.55; color: var(--c-on-ink-2); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-sm); margin: var(--space-xs) 0 0; }
.plan__price b { font-weight: 800; font-size: clamp(64px, 7vw, 104px); line-height: 0.9; letter-spacing: -0.06em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.plan__price span { font-size: 20px; font-weight: 700; }
.plan__fine { margin: 0; font-size: 14px; color: var(--c-on-ink-2); }
.plan__cta { display: inline-flex; align-items: center; min-height: 54px; margin-top: var(--space-xs); padding: 0 var(--space-32); border-radius: var(--r-btn); background: var(--c-accent); color: var(--c-accent-ink); font-weight: 700; font-size: 17px; white-space: nowrap; }
.plan__box { padding: var(--space-32); border-radius: 22px; background: var(--c-plan-box); }
.plan__label { margin: 0 0 var(--space-20); font-size: 14px; font-weight: 700; color: var(--c-on-ink-2); }
.plan__inc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-lg); }
.plan__inc li { display: flex; align-items: center; gap: var(--space-sm); font-size: 16px; font-weight: 700; line-height: 1.35; }
.plan__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--c-plan-tile); display: flex; align-items: center; justify-content: center; color: var(--c-on-ink); }
.plan__ico svg { width: 24px; height: 24px; }
.plan__bonus { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-md) var(--space-20); border-radius: 16px; border: 1.5px dashed var(--c-accent); background: var(--c-plan-tile); }
.plan__ico--bonus { background: var(--c-accent); color: var(--c-accent-ink); }
.plan__ico--bonus svg path:first-child { fill: var(--c-sheet) !important; }
.plan__btxt { display: flex; flex-direction: column; gap: var(--space-3xs); margin-right: auto; }
.plan__btxt b { font-size: 16px; font-weight: 800; }
.plan__btxt small { font-size: 14px; line-height: 1.45; color: var(--c-on-ink-2); }
.plan__btag { flex: 0 0 auto; padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-tag); background: var(--c-accent); color: var(--c-accent-ink); font-size: 13px; font-weight: 700; }
.others__h { margin: var(--space-md) 0 calc(var(--space-md) * -1); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.others { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.other { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); border-radius: 22px; background: var(--c-sheet); border: 1px solid var(--c-line); }
.other__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--c-accent-tint); color: var(--c-ink); display: flex; align-items: center; justify-content: center; }
.other__ico svg { width: 22px; height: 22px; }
.other__top { display: flex; flex-direction: column; gap: var(--space-sm); }
.other__head { display: flex; align-items: center; gap: var(--space-sm); }
.other h3 { margin: 0; font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
.other p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink-2); }
.other__cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: 0 var(--space-md); border-radius: var(--r-btn); border: 1.5px solid var(--c-ink); color: var(--c-ink); font-weight: 700; font-size: 15px; white-space: nowrap; }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; grid-template-areas: "head list" "help list"; gap: var(--space-xl) var(--space-56); }
.faq__head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-sm); }
.faq__head p { margin: 0; max-width: 340px; font-size: 18px; line-height: 1.55; color: var(--c-ink-2); }
.faq__list { grid-area: list; display: flex; flex-direction: column; gap: var(--space-sm); }
.qa { border-radius: 20px; background: var(--c-sheet); border: 1px solid var(--c-line); color: var(--c-ink); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.qa:hover { border-color: var(--c-line-2); }
.qa[data-open="true"] { background: var(--c-plan); border-color: var(--c-plan); color: var(--c-on-ink); }
.qa h3 { margin: 0; max-width: none; }
.qa__btn { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border: 0; border-radius: 20px; background: transparent; color: inherit; font: inherit; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-align: left; cursor: pointer; }
.qa[data-open="true"] .qa__btn:focus-visible { outline-color: var(--c-on-ink); box-shadow: 0 0 0 5px var(--c-plan); }
.qa__sign { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-ctl); background: var(--c-accent-tint); color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-short) var(--ease-out); }
.qa__sign svg { width: 18px; height: 18px; transition: transform var(--dur-short) var(--ease-out); }
.qa__btn[aria-expanded="true"] .qa__sign { background: var(--c-accent); color: var(--c-accent-ink); }
.qa__btn[aria-expanded="true"] .qa__sign svg { transform: rotate(45deg); }
.qa__a { padding: 0 var(--space-3xl) var(--space-lg) var(--space-lg); }
.qa__a p { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.65; color: var(--c-on-ink-2); }
.faq__help { grid-area: help; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg); border-radius: 22px; background: var(--c-edu); border: 1px solid var(--c-edu-line); }
.faq__ico { width: 52px; height: 52px; margin-bottom: var(--space-2xs); border-radius: 14px; background: var(--c-sheet); color: var(--c-ink); display: flex; align-items: center; justify-content: center; }
.faq__ico svg { width: 28px; height: 28px; }
.faq__help h3 { margin: 0; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.faq__help p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-2); }
.faq__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xs); }
.faq__cta { display: inline-flex; align-items: center; min-height: 50px; padding: 0 var(--space-lg); border-radius: var(--r-btn); background: var(--c-accent); color: var(--c-accent-ink); font-weight: 700; font-size: 16px; white-space: nowrap; }
.faq__tel { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; font-size: 16px; white-space: nowrap; }
.faq__tel svg { width: 20px; height: 20px; color: var(--c-accent-deep); }
.foot { margin: 0 var(--space-20); border-radius: 40px 40px 0 0; background: var(--c-ink); color: var(--c-on-ink); overflow: hidden; }
.foot a { color: var(--c-on-ink); }
.foot__in { display: flex; flex-direction: column; gap: var(--space-2xl); padding-top: var(--space-3xl); padding-bottom: var(--space-xl); }
.foot__top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-56); }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.foot__logo { display: block; width: 220px; height: auto; }
.foot__brand p { margin: 0; max-width: 320px; font-size: 16px; line-height: 1.6; color: var(--c-on-ink-2); }
.foot__cols { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--space-lg); }
.foot__cols a { white-space: nowrap; }
.foot__h { margin: 0 0 var(--space-md); font-size: 14px; color: var(--c-on-ink-2); }
.foot__cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); font-size: 15px; line-height: 1.4; }
.foot__cols a { transition: color var(--dur-micro) var(--ease-out); }
.foot__cols a:hover, .foot__bar a:hover { color: var(--c-accent); }
.foot__contact li { display: flex; align-items: center; gap: var(--space-xs); }
.foot__contact svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-accent); }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--c-foot-line); font-size: 14px; color: var(--c-on-ink-2); }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__bar a { color: var(--c-on-ink-2); transition: color var(--dur-micro) var(--ease-out); }
@keyframes rv { from { opacity: 0; transform: perspective(1000px) translateY(56px) rotateX(22deg); } }
@keyframes shrink { to { transform: scale(0.82); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .tilt:hover { transition: transform var(--dur-micro) linear; }
  .fan__rig { transform: rotateX(calc(8deg - var(--py) * 8deg)) rotateY(calc(14deg + var(--px) * 14deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none; transition: none; }
  .ribbons { height: auto; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) 0; }
  .ribbon { position: static; transform: none; padding: var(--space-md) var(--space-lg); }
  .fan__rig { transition: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 8%) entry calc(85% + var(--i, 0) * 8%); }
    .fcard { animation: fly linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 10%) entry calc(70% + var(--i, 0) * 10%); }
    .logo { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 240px; }
  }
}
@media (max-width: 1200px) { .foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
@media (max-width: 1060px) { .day__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .desk { display: none !important; }
  .mob { display: inline-flex !important; }
  .hero, .tabsgrid, .panel2, .price3, .duo, .bento6, .why, .edu-head, .edu-grid { grid-template-columns: minmax(0, 1fr); }
  .edu { border-radius: 28px; padding: var(--space-3xl) 0; }
  .plan { grid-template-columns: minmax(0, 1fr); }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "list" "help"; gap: var(--space-lg); }
  .cta { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-xl); }
  .cta__pitch { display: contents; }
  .cta__stack { order: 4; margin-bottom: var(--space-lg); }
  .cta__nextwrap { order: 5; }
  .cta__direct { order: 6; }
  .cta__form { min-height: 0; }
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: var(--space-xl) var(--space-lg); }
  .edu-stage { height: clamp(300px, 64vw, 420px); }
  .ribbon .item { font-size: 22px; }
  .stage { height: clamp(320px, 92vw, 460px); }
  .rig { inset: 2% 6% 2% 4%; }
  .chip-a { right: 0; bottom: 0; transform: translateZ(70px); }
  .chip-b { left: 0; top: 30%; transform: translateZ(70px); }
  .s3, .s2 { grid-column: auto; }
  .mega { grid-template-columns: minmax(0, 1fr); }
  .c4, .c3, .c9 { grid-column: auto; }
}
@media (max-width: 600px) {
  .ind, .day__strip { grid-template-columns: minmax(0, 1fr); }
  .hidesm { display: none !important; }
  .wrap { padding: 0 var(--space-md); }
  .logo { height: 38px; }
  .chip3d { font-size: 12px; padding: var(--space-xs) var(--space-sm); }
  .chip3d small { font-size: 11px; }
  .chip3d__ico { width: 26px; height: 26px; }
  .edu { margin: 0 var(--space-xs); }
  .foot { margin: 0 var(--space-xs); border-radius: 28px 28px 0 0; }
  .plan { padding: var(--space-lg); }
  .plan__box { padding: var(--space-lg); }
  .plan__inc, .others { grid-template-columns: minmax(0, 1fr); }
  .qa__btn { min-height: 64px; padding-left: var(--space-md); font-size: 17px; }
  .qa__a { padding: 0 var(--space-md) var(--space-md); }
  .plan__bonus { flex-wrap: wrap; }
  .plan__btxt { order: 3; flex-basis: 100%; margin-right: 0; }
  .plan__btag { margin-left: auto; }
  .cta__row { grid-template-columns: minmax(0, 1fr); }
  .cta { padding: var(--space-lg); }
  .cta__form { padding: var(--space-lg); }
  .cta__chips { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fan { height: auto; perspective: none; }
  .fan__rig { position: static; transform: none; display: flex; flex-direction: column; gap: var(--space-sm); }
  .fcard, .f-ai { position: relative; left: auto; right: auto; top: auto; width: 100%; transform: none; box-shadow: var(--shadow-shot); }
  .cta__go { padding: 0 var(--space-lg); }
  .foot__in { padding-top: var(--space-2xl); }
  .edu-shot { right: auto; width: 150%; left: 6%; }
  .uc-chat__msg { display: none; }
  .svc--lg .svc__feats { display: flex; flex-direction: column; gap: var(--space-sm); }
  .svc--lg .svc__feats li { flex-direction: row; align-items: center; }
  .svc--lg .svc__feats svg { width: 20px; height: 20px; }
  .svc__years span { padding: var(--space-2xs) var(--space-xs); }
  .edu-text { padding: 0 var(--space-xs); }
}
@media (max-width: 480px) {
  .foot__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* States driven by js/main.js (they used to be inline styles the canvas runtime rewrote) */
[hidden] { display: none !important; }
button.navbtn { background: transparent; }
.navbtn[aria-expanded="true"] { background: var(--c-hover); }
.gtab { border: 1.5px solid var(--c-line); background: transparent; }
.gtab[aria-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-tint); }
.gtab__ico { background: var(--c-hover-2); }
.gtab[aria-selected="true"] .gtab__ico { background: var(--c-sheet); }
.demo[data-state="none"] [data-when="site"], .demo[data-state="site"] [data-when="none"] { display: none; }
.demo[data-state="none"] .demo__verdict { color: var(--c-error); }
.demo[data-state="site"] .demo__verdict { color: var(--c-open); }
.cta__help { color: var(--c-ink-2); }
.cta__help.is-error { color: var(--c-error); }
.foot__contact a { display: inline-flex; align-items: center; gap: var(--space-xs); }