/* Xuan Media landing: styles.css. Every value reads from theme.css. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--space-4));scroll-padding-bottom:calc(var(--sticky-bar-height) + var(--space-6))}
body{margin:0;background:var(--color-surface-page);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
::selection{background:var(--color-selection)}
img,svg{display:block;max-inline-size:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
:where(ul[role="list"],ol[role="list"]){list-style:none;padding:0;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
strong{font-weight:var(--weight-semibold)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}
.is-inverse :focus-visible{box-shadow:var(--shadow-focus-inverse)}
.icon{inline-size:var(--size-icon-md);block-size:var(--size-icon-md);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{inline-size:var(--size-icon-sm);block-size:var(--size-icon-sm)}
.icon--lg{inline-size:var(--size-icon-lg);block-size:var(--size-icon-lg)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:var(--space-4);inset-block-start:var(--space-2);z-index:var(--z-sticky);padding:var(--space-2) var(--space-4);background:var(--color-action-primary);color:var(--color-text-on-action);border-radius:var(--radius-sm);transform:translateY(-200%);transition:transform var(--duration-fast) var(--ease-out)}
.skip-link:focus-visible{transform:none}

/* ---------- layout ---------- */
.container{position:relative;inline-size:100%;max-inline-size:var(--container-max);margin-inline:auto;padding-inline:var(--space-gutter)}
.section{position:relative;padding-block:var(--space-section)}
.section--raised{background:var(--color-surface-raised)}
.theme-dark{background:var(--color-surface-page);color:var(--color-text-primary)}
.is-inverse{background:var(--color-surface-inverse);color:var(--color-text-inverse)}
.stack > * + *{margin-block-start:var(--space-6)}
.split{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr)}
.split > *{min-inline-size:0}
@media (min-width:60em){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
  .split--own{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
  .split--why{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split--final{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .sticky{position:sticky;inset-block-start:calc(var(--header-height) + var(--space-8))}
}

/* ---------- type ---------- */
.display{font-size:var(--text-display);font-weight:var(--weight-semibold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);max-inline-size:16ch;text-wrap:balance}
.display__accent,.accent{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular);letter-spacing:-0.01em;color:var(--color-text-brand)}
.is-inverse .display__accent,.is-inverse .accent{color:var(--color-text-inverse-brand)}
.h2{font-size:var(--text-h2);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-h2);max-inline-size:20ch;text-wrap:balance}
h3{font-size:var(--text-h3);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.lead{font-size:var(--text-lead);line-height:1.55;color:var(--color-text-secondary);max-inline-size:56ch}
.is-inverse .lead,.is-inverse p{color:var(--color-text-inverse-secondary)}
.is-inverse h2,.is-inverse h3,.is-inverse strong,.is-inverse .display{color:var(--color-text-inverse)}
.prose{color:var(--color-text-secondary);max-inline-size:var(--measure-body)}
.fine{font-size:var(--text-sm);color:var(--color-text-secondary)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-inverse-brand);letter-spacing:0}
.eyebrow--muted{color:var(--color-text-brand);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.is-inverse .eyebrow--muted,.is-inverse .eyebrow{color:var(--color-text-inverse-brand)}
.eyebrow__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--color-action-inverse);box-shadow:0 0 0 .25rem var(--color-glow-brand)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);margin-block-end:var(--space-14)}
.section-head > *{min-inline-size:0;max-inline-size:100%}
.section-head--center{justify-items:center;text-align:center}
.section-head--center .h2,.section-head--center .lead{margin-inline:auto}
@media (min-width:60em){.section-head--row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--space-16)}}
.inline-link{color:var(--color-text-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--radius-xs)}
.inline-link:hover{text-decoration-thickness:var(--border-focus)}
.is-inverse .inline-link{color:var(--color-text-inverse-brand)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-control-sm);font-weight:var(--weight-semibold);color:var(--color-text-brand);text-decoration:none;border-radius:var(--radius-xs)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:.25em}
.link-arrow:active{color:var(--color-text-primary)}

/* ---------- buttons: default / hover / focus / active / disabled / loading ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:var(--size-control);padding:var(--space-3) var(--space-6);border:var(--border-hairline) solid var(--btn-border);border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:-0.005em;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.btn:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-pill)}
.btn:active{transform:translateY(1px)}
.btn--lg{min-block-size:var(--size-control-lg);padding-inline:var(--space-8);font-size:var(--text-base)}
.btn--sm{min-block-size:var(--size-control-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}
.btn--primary{--btn-bg:var(--color-action-primary);--btn-fg:var(--color-text-on-action);--btn-border:var(--color-action-primary-border)}
.btn--primary:hover{--btn-bg:var(--color-action-primary-hover);--btn-border:var(--color-action-primary-border);box-shadow:0 10px 24px -10px var(--color-glow-brand)}
.btn--primary:active{--btn-bg:var(--color-action-primary-active);--btn-border:var(--color-action-primary-border)}
.btn--secondary:hover{--btn-bg:var(--color-action-secondary-hover)}
.btn--secondary:active{--btn-bg:var(--color-action-secondary-active)}
.is-inverse .btn--primary{--btn-bg:var(--color-action-inverse);--btn-fg:var(--color-text-on-action-inverse);--btn-border:var(--color-action-inverse)}
.is-inverse .btn--primary:hover{--btn-bg:var(--color-action-inverse-hover);--btn-border:var(--color-action-inverse-hover)}
.is-inverse .btn--primary:active{--btn-bg:var(--color-action-inverse-active);--btn-border:var(--color-action-inverse-active)}
.is-inverse .btn--secondary{--btn-fg:var(--color-text-inverse);--btn-border:var(--color-border-inverse-strong)}
.is-inverse .btn--secondary:hover{--btn-bg:var(--color-action-inverse-secondary-hover)}
.is-inverse .btn--secondary:active{--btn-bg:var(--color-action-inverse-secondary-active)}
.is-inverse .btn:focus-visible{box-shadow:var(--shadow-focus-inverse)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:var(--opacity-disabled);pointer-events:none}
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] > *{visibility:hidden}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;inline-size:var(--size-icon-md);block-size:var(--size-icon-md);border:var(--border-focus) solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin var(--duration-slow) linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.icon-btn{display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:50%;background:var(--color-action-inverse);color:var(--color-text-on-action-inverse);transition:background-color var(--duration-fast) var(--ease-out)}
.icon-btn:hover{background:var(--color-action-inverse-hover)}
.icon-btn:active{background:var(--color-action-inverse-active)}
.icon-btn:focus-visible{border-radius:50%}

/* ---------- header ---------- */
.header{position:sticky;inset-block-start:0;z-index:var(--z-header);background:var(--color-surface-header);-webkit-backdrop-filter:saturate(1.6) blur(var(--blur-header));backdrop-filter:saturate(1.6) blur(var(--blur-header));border-block-end:var(--border-hairline) solid var(--color-border-inverse)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-block-size:var(--header-height)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-control-sm);text-decoration:none;color:var(--color-text-inverse);border-radius:var(--radius-xs)}
.nav{display:none}
.nav ul{display:flex;gap:var(--space-1)}
.nav a{display:inline-flex;align-items:center;min-block-size:var(--size-control-sm);padding-inline:var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-inverse-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.nav a:hover{color:var(--color-text-inverse);background:var(--color-action-inverse-secondary-hover)}
.nav a:active{background:var(--color-action-inverse-secondary-active)}
.nav a:focus-visible{border-radius:var(--radius-pill)}
.header__cta{display:none}
@media (min-width:56em){
  .nav{display:block}
  .header__cta{display:inline-flex}
  .header__wa{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;margin-block-start:calc(var(--header-height) * -1);padding-block:calc(var(--header-height) + clamp(2.5rem, 1.5rem + 5vw, 6rem)) clamp(3.5rem, 2rem + 5vw, 6rem)}
.hero__atmos{position:absolute;inset:0;background:var(--gradient-hero);pointer-events:none}
.hero__atmos::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--color-grid-line) 1px, transparent 1px),linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(70% 60% at 70% 35%, #000 20%, transparent 75%);mask-image:radial-gradient(70% 60% at 70% 35%, #000 20%, transparent 75%)} /* ds-allow-hardcode: mask alpha channel, not a colour */
.hero__inner{display:grid;gap:var(--space-16);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:64em){.hero__inner{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:var(--space-12)}}
.hero__copy > * + *{margin-block-start:var(--space-6)}
.hero__sub--short{display:none}
.hero__actions{margin-block-start:var(--space-8)}
.benefits{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);margin-block-start:var(--space-10);padding-block-start:var(--space-8);border-block-start:var(--border-hairline) solid var(--color-border-inverse)}
@media (min-width:36em){.benefits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.benefits li{display:flex;gap:var(--space-3);align-items:flex-start}
.benefits__icon{display:grid;place-items:center;flex:none;inline-size:2rem;block-size:2rem;border-radius:var(--radius-sm);background:var(--color-action-inverse-secondary-hover);border:var(--border-hairline) solid var(--color-border-inverse);color:var(--color-text-inverse-brand)}
.benefits strong{display:flex;align-items:center;min-block-size:2rem;font-size:var(--text-sm);line-height:1.3;color:var(--color-text-inverse)}
.benefits__detail{display:block;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-inverse-secondary)}
.trust-line{font-size:var(--text-sm);color:var(--color-text-inverse-secondary)}

/* devices (decorative, aria-hidden) */
.devices{position:relative;padding-block-end:var(--space-10);animation:float var(--duration-float) var(--ease-in-out) infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(calc(var(--space-2) * -1))}}
.laptop{position:relative;inline-size:92%}
.laptop__screen{aspect-ratio:16/10.2;padding:var(--space-2);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-xs);background:var(--ink-800);border:var(--border-hairline) solid var(--color-border-inverse-strong);box-shadow:var(--shadow-device);overflow:hidden}
.laptop__base{position:relative;block-size:.85rem;margin-inline:-6%;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:linear-gradient(var(--ink-600), var(--ink-800));box-shadow:var(--shadow-device)}
.laptop__base::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;margin-inline:auto;inline-size:16%;block-size:.35rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--ink-900)}
/* the mini website inside the frames: intentionally light so it reads as a client site */
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-surface-header);-webkit-backdrop-filter:blur(var(--blur-header));backdrop-filter:blur(var(--blur-header));border:var(--border-hairline) solid var(--color-border-inverse-strong);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-inverse);white-space:nowrap;box-shadow:var(--shadow-md)}
.float-chip .icon{color:var(--color-text-inverse-brand)}
.float-chip--a{inset-block-start:-4%;inset-inline-start:6%}
.float-chip--b{inset-block-end:22%;inset-inline-start:-4%;flex-direction:column;align-items:flex-start;gap:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)}
.float-chip--b span:last-child{font-size:var(--text-xs);color:var(--color-text-inverse-secondary)}
.float-chip__price{font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:-0.03em;line-height:1.1}


@media (max-width:35.99em){
  .hero__sub--full{display:none}
  .hero__sub--short{display:block}
  .hero__actions .btn{inline-size:100%}
  .benefits{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-block-start:var(--space-6);margin-block-start:var(--space-8)}
  .benefits li{gap:var(--space-2);align-items:center;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-inverse)}
  .benefits__icon{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;border:0}
  .benefits__detail{display:none}
  .benefits strong{min-block-size:0}
  .float-chip--b{display:none}
}

/* ---------- problem ---------- */
.quote-card{position:relative;padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);border-radius:var(--radius-xl);background:var(--color-surface-elevated);border:var(--border-hairline) solid var(--color-border-subtle);box-shadow:var(--shadow-lg)}
.quote-card__head{display:grid;gap:var(--space-1);padding-block-end:var(--space-5);border-block-end:var(--border-hairline) dashed var(--color-border-subtle)}
.quote-card__label{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold)}
.quote-card__label .icon{color:var(--color-text-accent)}
.quote-card__sub{font-size:var(--text-sm);color:var(--color-text-secondary)}
.quote-card__rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;padding-block:var(--space-4);border-block-end:var(--border-hairline) solid var(--color-border-subtle)}
.quote-card__x{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--color-mock-warm);color:var(--color-text-accent);margin-block-start:-.1rem}
.quote-card__foot{margin-block-start:var(--space-5);color:var(--color-text-secondary);font-size:var(--text-base)}
.turn{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-block-start:var(--space-20);font-size:clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);font-family:var(--font-serif);font-style:italic;color:var(--color-text-brand);text-align:center}

/* ---------- AI difference ---------- */
.ai{overflow:hidden}
.ai__atmos{position:absolute;inset:0;background:radial-gradient(50% 45% at 85% 10%, var(--color-glow-brand), transparent 70%);opacity:.7;pointer-events:none}
.flow{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr);counter-reset:flow}
@media (min-width:64em){.flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}}
.flow__step{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-inverse-card);border:var(--border-hairline) solid var(--color-border-inverse)}
.flow__step h3{font-size:var(--text-lg)}
.flow__step p{font-size:var(--text-sm);line-height:1.55}
.flow__tag{display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-inverse-strong);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.02em;color:var(--color-text-inverse)}
.flow__tag--ai{border-color:var(--color-text-inverse-accent);color:var(--color-text-inverse-accent)}
.flow__tag--result{background:var(--color-action-inverse);border-color:var(--color-action-inverse);color:var(--color-text-on-action-inverse)}
.flow__step--result{background:var(--color-surface-inverse-raised);border-color:var(--color-text-inverse-brand)}
@media (min-width:64em){
  .flow__step:not(:last-child)::after{content:"";position:absolute;inset-block-start:2.35rem;inset-inline-end:calc(var(--space-3) * -1);inline-size:var(--space-3);block-size:var(--border-hairline);background:var(--color-border-inverse-strong)}
}
.ai__result{display:grid;gap:var(--space-8);margin-block-start:var(--space-16);padding-block-start:var(--space-10);border-block-start:var(--border-hairline) solid var(--color-border-inverse)}
@media (min-width:60em){.ai__result{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-16)}}
.statement{font-size:clamp(1.375rem, 1.1rem + 1.1vw, 2rem);font-weight:var(--weight-medium);line-height:1.3;letter-spacing:-0.02em;max-inline-size:34ch}
.is-inverse .statement{color:var(--color-text-inverse)}
.statement span{color:var(--color-text-inverse-secondary)}

/* ---------- bento ---------- */
.bento{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:40em){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.bento{grid-template-columns:repeat(12,minmax(0,1fr))}}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-surface-card);border:var(--border-hairline) solid var(--color-border-subtle);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.tile:hover{border-color:var(--color-border-strong)}
.tile p{color:var(--color-text-secondary);font-size:var(--text-base)}
.tile__icon{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:var(--radius-md);background:var(--color-mock-brand-soft);color:var(--color-text-brand);margin-block-end:var(--space-2)}
.tile__note{display:inline-flex;align-self:flex-start;margin-block-start:auto;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-subtle);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.tile__copy{display:flex;flex-direction:column;gap:var(--space-3)}
@media (min-width:64em){
  .tile{grid-column:span 4}
  .tile--design{grid-column:span 7;flex-direction:row;align-items:center;gap:var(--space-8)}
  .tile--mobile{grid-column:span 5}
  .tile--design .tile__copy{flex:1 1 55%}
}
@media (min-width:40em) and (max-width:63.99em){.tile--design,.tile--fast{grid-column:span 2}}
.tile__art--swatches{position:relative;flex:1 1 45%;min-block-size:10rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);align-content:end}
.swatch{aspect-ratio:1/1.5;border-radius:var(--radius-md)}
.swatch--1{background:var(--ink-950);border:var(--border-hairline) solid var(--color-border-strong)}
.swatch--2{background:var(--pine-700)}
.swatch--3{background:var(--lime-400)}
.swatch--4{background:var(--paper-100);border:var(--border-hairline) solid var(--color-border-subtle)}
.type-specimen{position:absolute;inset-block-start:-.5rem;inset-inline-start:0;font-family:var(--font-serif);font-style:italic;font-size:var(--text-5xl);line-height:1;color:var(--color-text-primary)}
.tile__art--sizes{display:flex;align-items:flex-end;gap:var(--space-3);block-size:6rem;margin-block-start:auto;padding-block-start:var(--space-6)}
.tile__art--sizes i{display:block;border-radius:var(--radius-sm);border:var(--border-focus) solid var(--color-text-primary);background:var(--color-mock-brand-soft)}
.tile__art--sizes i:nth-child(1){inline-size:7rem;block-size:100%}
.tile__art--sizes i:nth-child(2){inline-size:3.75rem;block-size:80%}
.tile__art--sizes i:nth-child(3){inline-size:2rem;block-size:64%;border-radius:var(--radius-sm)}
.chat{display:grid;gap:var(--space-2);margin-block-start:auto;padding-block-start:var(--space-4)}
.chat__bubble{justify-self:start;max-inline-size:85%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs);background:var(--color-surface-raised);font-size:var(--text-sm);color:var(--color-text-primary)}
.chat__bubble--me{justify-self:end;border-radius:var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md);background:var(--color-action-primary);color:var(--color-text-on-action)}
.tile--fast{background:var(--color-surface-inverse);border-color:transparent;color:var(--color-text-inverse)}
.tile--fast h3{color:var(--color-text-inverse)}
.tile--fast p{color:var(--color-text-inverse-secondary)}
.tile__big{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-stat);font-weight:var(--weight-semibold);line-height:.9;letter-spacing:-0.05em;color:var(--color-text-inverse)}
.tile__big small{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular);font-size:var(--text-2xl);letter-spacing:0;color:var(--color-text-inverse-brand)}

/* ---------- ownership ---------- */
.vault{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-xl);background:var(--color-surface-inverse);box-shadow:var(--shadow-lg)}
.vault__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4);align-items:center;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface-inverse-card);border:var(--border-hairline) solid var(--color-border-inverse)}
.vault__icon{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-md);background:var(--color-action-inverse-secondary-hover);color:var(--color-text-inverse-brand)}
.vault__text{display:grid;gap:var(--space-1);min-inline-size:0}
.vault__text strong{color:var(--color-text-inverse);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.vault__text small{font-size:var(--text-sm);color:var(--color-text-inverse-secondary)}
.vault__ok{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--color-action-inverse);color:var(--color-text-on-action-inverse)}
.checks{display:grid;gap:var(--space-4)}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start;color:var(--color-text-secondary)}
.checks strong{color:var(--color-text-primary)}
.checks .icon{margin-block-start:.2em;color:var(--color-text-brand)}

/* ---------- pricing ---------- */
.anchor-line{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-2);margin-block-start:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-subtle);background:var(--color-surface-card);font-size:var(--text-sm);color:var(--color-text-secondary)}
.anchor-line strong{color:var(--color-text-primary)}
.plans{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr);align-items:stretch}
@media (min-width:60em){.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:center}}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--space-5);padding:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);border-radius:var(--radius-xl);background:var(--color-surface-card);border:var(--border-hairline) solid var(--color-border-subtle)}
.plan__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-secondary)}
.plan__price{display:flex;align-items:flex-start;gap:var(--space-1);margin-block-start:var(--space-3);font-size:var(--text-price);font-weight:var(--weight-semibold);line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.plan__cur{font-size:var(--text-xl);letter-spacing:0;margin-block-start:var(--space-2);color:var(--color-text-secondary)}
.plan__pages{margin-block-start:var(--space-3);font-weight:var(--weight-medium)}
.plan__desc{color:var(--color-text-secondary);font-size:var(--text-base)}
.plan__list{display:grid;gap:var(--space-3);padding-block:var(--space-5);border-block:var(--border-hairline) solid var(--color-border-subtle)}
.plan__list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-base)}
.plan__list .icon{margin-block-start:.2em;color:var(--color-text-brand)}
.plan__best{font-size:var(--text-sm);color:var(--color-text-secondary)}
.plan__best strong{color:var(--color-text-primary)}
.plan__cta{inline-size:100%;margin-block-start:auto}
.plan--featured{border-color:transparent;box-shadow:var(--shadow-lg);background:var(--color-surface-inverse)}
.plan--featured::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 50% at 50% 0%, var(--color-glow-brand), transparent 70%);pointer-events:none}
.plan--featured > *{position:relative}
.plan--featured .plan__name,.plan--featured .plan__cur,.plan--featured .plan__desc,.plan--featured .plan__best{color:var(--color-text-inverse-secondary)}
.plan--featured .plan__price,.plan--featured .plan__pages,.plan--featured .plan__best strong{color:var(--color-text-inverse)}
.plan--featured .plan__list{border-color:var(--color-border-inverse)}
.plan--featured .plan__list li{color:var(--color-text-inverse)}
.plan--featured .plan__list .icon{color:var(--color-text-inverse-brand)}
@media (min-width:60em){.plan--featured{padding-block:calc(clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) + var(--space-6))}}
.plan__badge{position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,-50%);padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--color-badge-bg);color:var(--color-badge-fg);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;white-space:nowrap}
.plans__trust{margin-block-start:var(--space-8);text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary)}

.compare{margin-block-start:var(--space-10);border-radius:var(--radius-xl);background:var(--color-surface-card);border:var(--border-hairline) solid var(--color-border-subtle);overflow:hidden}
.compare summary{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:var(--size-control-lg);padding-inline:var(--space-6);font-weight:var(--weight-semibold);cursor:pointer;list-style:none;transition:background-color var(--duration-fast) var(--ease-out)}
.compare summary::-webkit-details-marker{display:none}
.compare summary:hover{background:var(--color-action-secondary-hover)}
.compare summary:active{background:var(--color-action-secondary-active)}
.compare summary:focus-visible{border-radius:var(--radius-xl)}
.compare__icon{display:grid;transition:transform var(--duration-base) var(--ease-out)}
.compare[open] .compare__icon{transform:rotate(180deg)}
.compare__scroll{position:relative;overflow-x:auto;border-block-start:var(--border-hairline) solid var(--color-border-subtle);
  background:linear-gradient(90deg, var(--color-surface-card) 30%, transparent) left / 2.5rem 100% no-repeat local,
             linear-gradient(270deg, var(--color-surface-card) 30%, transparent) right / 2.5rem 100% no-repeat local,
             linear-gradient(90deg, var(--color-mock-line), transparent) left / 1rem 100% no-repeat scroll,
             linear-gradient(270deg, var(--color-mock-line), transparent) right / 1rem 100% no-repeat scroll}
.compare__scroll:focus-visible{border-radius:0}
.compare__table{inline-size:100%;min-inline-size:40rem;border-collapse:collapse;font-size:var(--text-sm)}
.compare__table th,.compare__table td{position:relative;padding:var(--space-4) var(--space-5);border-block-end:var(--border-hairline) solid var(--color-border-subtle);text-align:center;vertical-align:middle}
.compare__table th[scope="row"]{text-align:start;font-weight:var(--weight-medium);color:var(--color-text-primary)}
.compare__table thead th{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-secondary)}
.compare__table thead th:first-child{text-align:start}
.compare__table tbody tr:last-child > *{border-block-end:0}
.compare__table td .icon{margin-inline:auto;color:var(--color-text-brand)}
.compare__table .is-featured{background:var(--color-mock-brand-soft)}
.cell-no{display:inline-grid;color:var(--color-text-secondary)}
.cell-note{display:block;margin-block-start:var(--space-1);font-size:var(--text-xs);color:var(--color-text-secondary)}
.pricing__notes{display:grid;gap:var(--space-2);max-inline-size:60ch;margin:var(--space-8) auto 0;text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* ---------- work ---------- */
.work{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:48em){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
.work__card{display:grid;gap:var(--space-4)}
.work__frame{border-radius:var(--radius-lg);background:var(--color-surface-elevated);border:var(--border-hairline) solid var(--color-border-subtle);box-shadow:var(--shadow-md);overflow:hidden;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.work__card:hover .work__frame{transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-lg)}
.work__bar{display:flex;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-block-end:var(--border-hairline) solid var(--color-border-subtle)}
.work__bar i{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--color-mock-line)}
.work__shot{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden}
.work__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.work__type{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-subtle);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.work__cta{justify-content:center;margin-block-start:var(--space-12)}

/* ---------- process ---------- */
.timeline{position:relative}
.timeline__track{display:none}
@media (min-width:56em){
  .timeline__track{display:flex;align-items:center;justify-content:center;position:relative;block-size:var(--space-8);margin-block-end:var(--space-8)}
  .timeline__track::before{content:"";position:absolute;inset-inline:0;inset-block-start:50%;block-size:var(--border-focus);border-radius:var(--radius-pill);background:linear-gradient(90deg, var(--color-border-subtle), var(--color-action-primary))}
  .timeline__label{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--color-surface-page);border:var(--border-hairline) solid var(--color-border-subtle);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-brand)}
}
.steps{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:40em){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:56em){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-card);border:var(--border-hairline) solid var(--color-border-subtle)}
.step__num{font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-accent)}
.step p{color:var(--color-text-secondary);font-size:var(--text-base)}
.step--live{background:var(--color-surface-inverse);border-color:transparent}
.step--live h3{color:var(--color-text-inverse)}
.step--live p{color:var(--color-text-inverse-secondary)}
.step--live .step__num{color:var(--color-text-inverse-brand)}
.note{display:grid;gap:var(--space-4);grid-template-columns:auto minmax(0,1fr);align-items:start;margin-block-start:var(--space-8);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.note__icon{color:var(--color-text-brand);margin-block-start:.15em}
.note p{color:var(--color-text-secondary);max-inline-size:70ch}
.note p strong{color:var(--color-text-primary)}
.note .btn{grid-column:1 / -1;justify-self:start}
@media (min-width:56em){.note{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.note .btn{grid-column:auto}}

/* ---------- why ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-block-start:var(--space-10)}
.stats div{display:grid;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-inverse-card);border:var(--border-hairline) solid var(--color-border-inverse)}
.stats strong{font-size:var(--text-stat);line-height:.9;letter-spacing:-0.05em;font-weight:var(--weight-semibold)}
.stats span{font-size:var(--text-sm);color:var(--color-text-inverse-secondary)}
.reasons{counter-reset:reason;border-block-start:var(--border-hairline) solid var(--color-border-inverse)}
.reasons li{counter-increment:reason;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-1) var(--space-4);padding-block:var(--space-6);border-block-end:var(--border-hairline) solid var(--color-border-inverse)}
.reasons li::before{content:counter(reason, decimal-leading-zero);grid-row:span 2;font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-inverse-accent);padding-block-start:.2rem}
.reasons h3{font-size:var(--text-xl)}

/* ---------- FAQ ---------- */
.faq{border-block-start:var(--border-hairline) solid var(--color-border-subtle)}
.faq__item{border-block-end:var(--border-hairline) solid var(--color-border-subtle)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-block-size:var(--size-control);padding-block:var(--space-5);cursor:pointer;list-style:none;font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:-0.01em;line-height:1.4;border-radius:var(--radius-xs);transition:color var(--duration-fast) var(--ease-out)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--color-text-brand)}
.faq__item summary:active{color:var(--color-text-primary)}
.faq__icon{display:grid;place-items:center;flex:none;inline-size:var(--size-control-sm);block-size:var(--size-control-sm);border-radius:50%;border:var(--border-hairline) solid var(--color-border-subtle);transition:transform var(--duration-base) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.faq__item summary:hover .faq__icon{border-color:var(--color-border-strong);background:var(--color-action-secondary-hover)}
.faq__item[open] .faq__icon{transform:rotate(45deg);background:var(--color-action-primary);border-color:var(--color-action-primary);color:var(--color-text-on-action)}
.faq__body{padding-block-end:var(--space-6);color:var(--color-text-secondary);max-inline-size:var(--measure-body)}
.help{display:grid;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-card);border:var(--border-hairline) solid var(--color-border-subtle)}
.help p{color:var(--color-text-secondary)}
.help strong{color:var(--color-text-primary)}

/* ---------- final CTA + form ---------- */
.final{overflow:hidden}
.final__atmos{position:absolute;inset:0;background:radial-gradient(55% 60% at 15% 100%, var(--color-glow-brand), transparent 70%),radial-gradient(40% 40% at 95% 0%, var(--color-glow-warm), transparent 70%);pointer-events:none}
.display--final{font-size:clamp(1.875rem, 1.2rem + 3vw, 3.75rem);max-inline-size:18ch}
.final__list{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:36em){.final__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.final__list li{display:flex;gap:var(--space-3);align-items:center;color:var(--color-text-inverse)}
.final__list .icon{color:var(--color-text-inverse-brand)}
.fine--inverse{color:var(--color-text-inverse-secondary);max-inline-size:58ch}
.form-wrap{color:var(--color-text-primary)}
.form,.thanks{display:grid;gap:var(--space-5);padding:clamp(1.5rem, 1rem + 2vw, 2.25rem);border-radius:var(--radius-xl);background:var(--color-surface-elevated);box-shadow:var(--shadow-lg)}
.form *:focus-visible{box-shadow:var(--shadow-focus)}
.form__title{font-size:var(--text-xl);color:var(--color-text-primary)}
.field{display:grid;gap:var(--space-2);min-inline-size:0}
.field label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary)}
.req{margin-inline-start:var(--space-1);color:var(--color-text-error)}
.opt{margin-inline-start:var(--space-1);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.input{inline-size:100%;min-inline-size:0;min-block-size:var(--size-control);padding:var(--space-3) var(--space-4);border:var(--border-hairline) solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-surface-page);color:var(--color-text-primary);font-size:var(--text-base);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.input:hover{border-color:var(--color-text-primary)}
.input:focus-visible{border-color:var(--color-focus-ring);border-radius:var(--radius-md)}
.input:disabled{opacity:var(--opacity-disabled);pointer-events:none}
.select{appearance:none;-webkit-appearance:none;padding-inline-end:var(--space-10);cursor:pointer}
.select-wrap{position:relative}
.select-wrap .icon{position:absolute;inset-inline-end:var(--space-4);inset-block:0;margin-block:auto;pointer-events:none;color:var(--color-text-secondary)}
.field[data-invalid] .input{border-color:var(--color-border-error);border-width:var(--border-focus)}
.field__error{display:none;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-error)}
.field__error .icon{margin-block-start:.1em}
.field[data-invalid] .field__error{display:flex}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start;cursor:pointer;font-weight:var(--weight-regular) !important;color:var(--color-text-secondary) !important}
.check input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;margin:.1em 0 0;inline-size:var(--size-check);block-size:var(--size-check);border:var(--border-hairline) solid var(--color-border-input);border-radius:var(--radius-xs);background:var(--color-surface-page);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.check input::after{content:"";inline-size:.35rem;block-size:.65rem;border:solid var(--color-text-on-action);border-width:0 var(--border-focus) var(--border-focus) 0;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform var(--duration-fast) var(--ease-out)}
.check input:hover{border-color:var(--color-text-primary)}
.check input:checked{background:var(--color-action-primary);border-color:var(--color-action-primary)}
.check input:checked::after{transform:translateY(-1px) rotate(45deg) scale(1)}
.check input:active{background:var(--color-action-secondary-active)}
.check input:focus-visible{border-radius:var(--radius-xs)}
.field[data-invalid] .check input{border-color:var(--color-border-error);border-width:var(--border-focus)}
.form__submit{inline-size:100%}
.form-summary{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--border-hairline) solid var(--color-border-error);color:var(--color-text-error);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.form-summary[hidden],.thanks[hidden]{display:none}
.thanks{justify-items:start}
.thanks__icon{display:grid;place-items:center;inline-size:3.5rem;block-size:3.5rem;border-radius:50%;background:var(--color-mock-brand-soft);color:var(--color-text-success)}
.thanks h3{font-size:var(--text-2xl);color:var(--color-text-primary);letter-spacing:-0.02em}

/* ---------- footer ---------- */
.footer{background:var(--color-surface-inverse-deep);padding-block:var(--space-12)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-8)}
.footer p{font-size:var(--text-sm)}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.footer__links a{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-control-sm);font-size:var(--text-sm);color:var(--color-text-inverse-secondary);text-decoration:none;border-radius:var(--radius-xs);overflow-wrap:anywhere}
.footer__links a:hover{color:var(--color-text-inverse);text-decoration:underline;text-underline-offset:.25em}
.footer__legal{inline-size:100%;padding-block-start:var(--space-6);border-block-start:var(--border-hairline) solid var(--color-border-inverse)}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-sticky);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-2);padding:var(--space-2) var(--space-gutter) calc(var(--space-2) + env(safe-area-inset-bottom));background:var(--color-surface-header);-webkit-backdrop-filter:saturate(1.6) blur(var(--blur-header));backdrop-filter:saturate(1.6) blur(var(--blur-header));border-block-start:var(--border-hairline) solid var(--color-border-inverse)}
.sticky-bar .btn{min-block-size:var(--sticky-bar-height);padding-inline:var(--space-3)}
.sticky-bar .btn--primary{--btn-bg:var(--color-action-inverse);--btn-fg:var(--color-text-on-action-inverse);--btn-border:var(--color-action-inverse)}
.sticky-bar .btn--primary:hover{--btn-bg:var(--color-action-inverse-hover)}
.sticky-bar .btn--primary:active{--btn-bg:var(--color-action-inverse-active)}
.sticky-bar .btn--secondary{--btn-fg:var(--color-text-inverse);--btn-border:var(--color-border-inverse-strong)}
.sticky-bar .btn--secondary:hover{--btn-bg:var(--color-action-inverse-secondary-hover)}
.sticky-bar .btn--secondary:active{--btn-bg:var(--color-action-inverse-secondary-active)}
.sticky-bar .btn:focus-visible{box-shadow:var(--shadow-focus-inverse)}
body{padding-block-end:calc(var(--sticky-bar-height) + var(--space-4) + env(safe-area-inset-bottom))}
@media (min-width:56em){.sticky-bar{display:none}body{padding-block-end:0}html{scroll-padding-bottom:0}}

/* ---------- entrance motion (content is visible without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(var(--space-5));transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .devices{animation:none}
}
@media (forced-colors: active){
  .btn,.input,.check input,.faq__icon,.tile,.plan,.step{border:1px solid CanvasText}
  :focus-visible{outline:var(--border-focus) solid Highlight;outline-offset:var(--border-focus)}
}

/* ---------- narrow-width defences (280px, enlarged text) ---------- */
.stats div{min-inline-size:0}
@media (max-width:22.5em){
  .stats{grid-template-columns:minmax(0,1fr)}
  .h2,.display{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .float-chip--a{inset-inline-start:0;max-inline-size:calc(100vw - var(--space-gutter) * 2)}
}

/* ---------- light card inside a dark section: restore light-surface roles (keep last) ---------- */
.is-inverse .form-wrap h3,.is-inverse .form-wrap strong{color:var(--color-text-primary)}
.is-inverse .form-wrap p{color:var(--color-text-secondary)}
.is-inverse .form-wrap .field__error,.is-inverse .form-wrap .form-summary{color:var(--color-text-error)}
.is-inverse .form-wrap .btn--primary{--btn-bg:var(--color-action-primary);--btn-fg:var(--color-text-on-action);--btn-border:var(--color-action-primary-border)}
.is-inverse .form-wrap .btn--primary:hover{--btn-bg:var(--color-action-primary-hover);--btn-border:var(--color-action-primary-border)}
.is-inverse .form-wrap .btn--primary:active{--btn-bg:var(--color-action-primary-active);--btn-border:var(--color-action-primary-border)}
.is-inverse .form-wrap :focus-visible{box-shadow:var(--shadow-focus)}


/* ---------- real project screenshots ---------- */
.laptop__screen{padding:var(--space-2)}
.laptop__img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top center;border-radius:var(--radius-sm);background:var(--paper-100)}
.mini-browser{position:absolute;inset-inline-end:0;inset-block-end:0;inline-size:46%;border-radius:var(--radius-md);overflow:hidden;background:var(--paper-50);border:var(--border-hairline) solid var(--color-border-inverse-strong);box-shadow:var(--shadow-device)}
.mini-browser img{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.mini-browser__bar,.work__bar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--paper-50);border-block-end:var(--border-hairline) solid var(--paper-300)}
.mini-browser__bar i,.work__bar i{inline-size:.45rem;block-size:.45rem;border-radius:50%;background:var(--paper-300)}
.mini-browser__bar span,.work__bar span{flex:1;margin-inline-start:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--paper-200);font-size:var(--text-2xs);color:var(--stone-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
.devices{margin:0}
@media (max-width:35.99em){.mini-browser{inline-size:56%}}

.work{display:grid;gap:var(--space-8) var(--space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:48em){.work{grid-template-columns:repeat(2,minmax(0,1fr))}.work__card--lead{grid-column:1 / -1}}
@media (min-width:64em){
  .work{grid-template-columns:repeat(12,minmax(0,1fr))}
  .work__card{grid-column:span 4}
  .work__card--lead{grid-column:1 / -1}
  .work__card--lead .work__shot{aspect-ratio:2.4/1}
  .work__card:nth-child(2),.work__card:nth-child(3){grid-column:span 6}
}
.work__card{display:flex;flex-direction:column;gap:var(--space-3)}
.work__frame{background:var(--paper-50)}
.work__shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-100)}
.work__shot img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:top center;transition:transform var(--duration-slow) var(--ease-out)}
.work__card:hover .work__shot img{transform:scale(1.02)}
.work__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-block-start:var(--space-2)}
.work__title{display:grid;gap:var(--space-1);min-inline-size:0}
.work__title h3{font-size:var(--text-lg)}
.work__industry{font-size:var(--text-sm);color:var(--color-text-secondary)}
.work__note{font-size:var(--text-sm);color:var(--color-text-secondary);max-inline-size:52ch}
.work__link{display:inline-flex;align-items:center;gap:var(--space-1);flex:none;min-block-size:var(--size-control-sm);padding-inline:var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--color-border-subtle);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);text-decoration:none;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.work__link:hover{border-color:var(--color-border-strong);background:var(--color-action-secondary-hover)}
.work__link:active{background:var(--color-action-secondary-active)}
.work__link:focus-visible{border-radius:var(--radius-pill)}
@media (prefers-reduced-motion: reduce){.work__card:hover .work__shot img{transform:none}}

/* ---------- brand: logo mark + wordmark (logo art sits on black, screen-blended onto dark surfaces) ---------- */
.brand{gap:var(--space-3)}
.brand__logo{block-size:2.25rem;inline-size:auto;max-inline-size:min(14rem, 55vw);object-fit:contain}
.brand__name{display:grid;line-height:1;text-align:center}
.brand__name b{font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:.24em;margin-inline-end:-.24em;color:var(--color-text-inverse-accent)}
.brand__name small{margin-block-start:var(--space-1);font-size:var(--text-2xs);font-weight:var(--weight-regular);letter-spacing:.42em;margin-inline-end:-.42em;color:var(--color-text-inverse-secondary)}
.footer__logo{display:inline-block;border-radius:var(--radius-sm)}
.footer__logo img{inline-size:min(18rem, 100%);block-size:auto}