/* ===== Design Tokens ===== */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  --radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-2xl:2rem;--radius-full:9999px;

  /* Motion system — physical, fluid, precise */
  --ease-out:cubic-bezier(.16,1,.3,1);          /* entries, reveals, user-initiated */
  --ease-in:cubic-bezier(.4,0,1,1);             /* exits only */
  --ease-in-out:cubic-bezier(.4,0,.2,1);        /* morphs, layout shifts */
  --transition-interactive:180ms var(--ease-out); /* hover, focus, active */

  --content-narrow:640px;--content-default:1080px;--content-wide:1240px;

  --font-display:'Clash Display','Cabinet Grotesk',sans-serif;
  --font-body:'Satoshi','Inter',sans-serif;
}

/* Mono Titanium palette — pure grayscale surfaces, near-white/near-black accent (ultra-minimal, luxe)
   Layered neutral surfaces, hairline borders, and a soft neutral halo for depth. */
:root,[data-theme='light']{
  --color-bg:#f6f6f7;
  --color-surface:#ffffff;
  --color-surface-2:#efeff0;
  --color-surface-offset:#e6e6e8;
  --color-elevated:#ffffff;
  --color-border:#dcdcde;
  --color-border-strong:#c7c7ca;
  --color-divider:#e8e8ea;
  --color-hairline:oklch(0 0 0/.06);
  --color-text:#141416;
  --color-text-muted:#5f5f63;
  --color-text-faint:#a1a1a5;
  --color-text-inverse:#f6f6f7;
  --color-primary:#1a1a1c;      /* near-black — high-contrast accent on light */
  --color-primary-hover:#2c2c2f;
  --color-primary-active:#000000;
  --color-on-primary:#ffffff;   /* text/icon color placed on primary */
  --color-accent:#3a3a3d;       /* deep graphite */
  --color-accent-soft:#e8e8ea;
  --glow-primary:oklch(0 0 0/.14);
  --glow-soft:oklch(0 0 0/.07);
  --sheen:linear-gradient(180deg,oklch(1 0 0/.9),oklch(1 0 0/0));
  --shadow-sm:0 1px 2px oklch(.2 0 0/.08),0 1px 1px oklch(.2 0 0/.04);
  --shadow-md:0 2px 4px oklch(.2 0 0/.05),0 12px 28px oklch(.2 0 0/.12);
  --shadow-lg:0 4px 8px oklch(.2 0 0/.06),0 30px 70px oklch(.2 0 0/.18);
  --shadow-glow:0 0 0 1px var(--glow-soft),0 20px 50px oklch(.2 0 0/.14),0 0 40px var(--glow-soft);
  --grid-line:oklch(0 0 0/.035);
}
[data-theme='dark']{
  --color-bg:#0b0b0c;
  --color-surface:#161617;
  --color-surface-2:#141415;
  --color-surface-offset:#1e1e20;
  --color-elevated:#1d1d1f;
  --color-border:#282829;
  --color-border-strong:#3a3a3c;
  --color-divider:#1d1d1f;
  --color-hairline:oklch(1 0 0/.06);
  --color-text:#ededee;
  --color-text-muted:#9a9a9d;
  --color-text-faint:#636366;
  --color-text-inverse:#0b0b0c;
  --color-primary:#e8e8ea;      /* near-white — high-contrast accent on dark */
  --color-primary-hover:#f4f4f6;
  --color-primary-active:#ffffff;
  --color-on-primary:#0b0b0c;   /* text/icon color placed on primary */
  --color-accent:#c9c9cc;
  --color-accent-soft:#202022;
  --glow-primary:oklch(1 0 0/.16);
  --glow-soft:oklch(1 0 0/.08);
  --sheen:linear-gradient(180deg,oklch(1 0 0/.06),oklch(1 0 0/0));
  --shadow-sm:0 1px 2px oklch(0 0 0/.5);
  --shadow-md:0 2px 6px oklch(0 0 0/.4),0 14px 34px oklch(0 0 0/.55);
  --shadow-lg:0 4px 10px oklch(0 0 0/.45),0 34px 80px oklch(0 0 0/.65);
  --shadow-glow:0 0 0 1px var(--glow-soft),0 24px 60px oklch(0 0 0/.6),0 0 50px var(--glow-primary);
  --grid-line:oklch(1 0 0/.03);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#0b0b0c;--color-surface:#161617;--color-surface-2:#141415;--color-surface-offset:#1e1e20;
  --color-elevated:#1d1d1f;--color-border:#282829;--color-border-strong:#3a3a3c;--color-divider:#1d1d1f;
  --color-hairline:oklch(1 0 0/.06);--color-text:#ededee;--color-text-muted:#9a9a9d;
  --color-text-faint:#636366;--color-text-inverse:#0b0b0c;--color-primary:#e8e8ea;--color-primary-hover:#f4f4f6;
  --color-primary-active:#ffffff;--color-on-primary:#0b0b0c;--color-accent:#c9c9cc;--color-accent-soft:#202022;
  --glow-primary:oklch(1 0 0/.16);--glow-soft:oklch(1 0 0/.08);
  --sheen:linear-gradient(180deg,oklch(1 0 0/.06),oklch(1 0 0/0));
  --shadow-sm:0 1px 2px oklch(0 0 0/.5);
  --shadow-md:0 2px 6px oklch(0 0 0/.4),0 14px 34px oklch(0 0 0/.55);
  --shadow-lg:0 4px 10px oklch(0 0 0/.45),0 34px 80px oklch(0 0 0/.65);
  --shadow-glow:0 0 0 1px oklch(1 0 0/.08),0 24px 60px oklch(0 0 0/.6),0 0 50px oklch(1 0 0/.16);
  --grid-line:oklch(1 0 0/.03);
}}

/* ===== Cross-page View Transitions (MPA) ===== */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:no-preference){
  /* Root cross-fade — cinematic but restrained. Exit slightly faster than enter. */
  ::view-transition-old(root){animation:vt-fade-out .22s var(--ease-in) both}
  ::view-transition-new(root){animation:vt-page-in .32s var(--ease-out) both}

  /* Shared elements morph smoothly between routes */
  ::view-transition-group(brand),
  ::view-transition-group(page-title),
  ::view-transition-group(page-eyebrow){animation-duration:.4s;animation-timing-function:var(--ease-out)}
  ::view-transition-old(brand),::view-transition-new(brand){height:100%}

  /* Header stays put (persistent) rather than fading with the page */
  ::view-transition-group(site-header){animation-duration:.32s;animation-timing-function:var(--ease-out)}
}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-page-in{from{opacity:0;transform:translateY(8px) scale(.994)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Shared-element assignments (header brand only — footer brand must NOT share the name) */
.header .brand{view-transition-name:brand}
.header{view-transition-name:site-header}
.page-title{view-transition-name:page-title}
.page-eyebrow{view-transition-name:page-eyebrow}

/* ===== Inner-page header band (routes) ===== */
.page-hero{position:relative;overflow:hidden;padding-block:clamp(var(--space-20),12vw,var(--space-32)) clamp(var(--space-12),8vw,var(--space-20));border-bottom:1px solid var(--color-hairline)}
.page-hero .atmos::after{opacity:.9}
.page-hero-inner{position:relative;z-index:1;max-width:760px}
.page-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin-top:var(--space-5)}
.page-hero h1 em{font-style:normal;color:var(--color-primary);text-shadow:0 0 32px var(--glow-primary)}
.page-hero p{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-5);max-width:60ch}
.page-hero .hero-cta{margin-top:var(--space-8)}

/* Breadcrumb-ish back link on inner pages */
.page-back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;margin-bottom:var(--space-4);transition:color var(--transition-interactive),gap var(--transition-interactive)}
.page-back:hover{color:var(--color-primary);gap:var(--space-3)}
.page-back svg{flex:none}

/* Entrance for inner-page content (respects reduced motion via keyframe guard below) */
@media (prefers-reduced-motion:no-preference){
  .page-hero-inner > *{opacity:0;transform:translateY(14px);animation:hero-rise .8s var(--ease-out) forwards}
  .page-hero-inner > *:nth-child(1){animation-delay:.04s}
  .page-hero-inner > *:nth-child(2){animation-delay:.11s}
  .page-hero-inner > *:nth-child(3){animation-delay:.18s}
  .page-hero-inner > *:nth-child(4){animation-delay:.25s}
}

/* ===== Layout ===== */
.wrap{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6)}
.wrap-wide{max-width:var(--content-wide)}
section{padding-block:clamp(var(--space-16),9vw,var(--space-32));position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--color-primary)}
.eyebrow::before{content:'';width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary))}

/* Ambient depth: subtle grid + glow atmosphere behind sections */
.atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 75%)}
.atmos::after{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:min(760px,90%);height:520px;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow-primary),transparent 70%);filter:blur(30px);opacity:.7}
section > .wrap{position:relative;z-index:1}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:60;background:oklch(from var(--color-bg) l c h/.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive),background var(--transition-interactive)}
.header.scrolled{border-color:var(--color-hairline);box-shadow:0 1px 0 var(--color-hairline),0 8px 30px oklch(0 0 0/.06);background:oklch(from var(--color-bg) l c h/.85)}
[data-theme='dark'] .header.scrolled{box-shadow:0 1px 0 var(--color-hairline),0 8px 30px oklch(0 0 0/.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.01em;color:var(--color-text);text-decoration:none}
.brand svg{color:var(--color-primary);flex:none;filter:drop-shadow(0 0 8px var(--glow-soft))}

/* Nav links with animated active/hover indicator */
.nav-links{display:flex;align-items:center;gap:var(--space-2);list-style:none;position:relative}
.nav-links a{position:relative;font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);transition:color var(--transition-interactive)}
.nav-links a::after{content:'';position:absolute;left:var(--space-3);right:var(--space-3);bottom:6px;height:1.5px;background:var(--color-primary);border-radius:2px;transform:scaleX(0);transform-origin:center;opacity:0;transition:transform 220ms var(--ease-out),opacity var(--transition-interactive)}
.nav-links a:hover{color:var(--color-text)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1);opacity:1}
.nav-links a.is-active{color:var(--color-text)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface);transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),transform var(--transition-interactive)}
.theme-toggle:hover{color:var(--color-primary);background:var(--color-surface-2);border-color:var(--color-border-strong)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{transition:transform 400ms var(--ease-out)}
.theme-toggle:hover svg{transform:rotate(20deg)}
.nav-toggle{display:none;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text);border:1px solid var(--color-border);background:var(--color-surface)}
.nav-toggle:active{transform:scale(.94)}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav-actions .btn-primary{display:none}
}

/* ===== Buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);text-decoration:none;line-height:1;white-space:nowrap;
  transition:background var(--transition-interactive),color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive),border-color var(--transition-interactive)}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary);box-shadow:0 1px 2px oklch(0 0 0/.15),inset 0 1px 0 oklch(1 0 0/.08)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 10px 26px var(--glow-primary),inset 0 1px 0 oklch(1 0 0/.2)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px var(--glow-soft),inset 0 1px 0 oklch(1 0 0/.12)}
.btn-ghost{color:var(--color-text);border:1px solid var(--color-border);background:oklch(from var(--color-surface) l c h/.6);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--color-border-strong);background:var(--color-surface-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost:active{transform:translateY(0)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.6s var(--ease-in-out),transform 8s ease}
.hero-slide.is-active{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:opacity .4s ease;transform:none}.hero-slide.is-active{transform:none}}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 10%,transparent 0%,oklch(from var(--color-bg) l c h/.4) 60%),
  linear-gradient(180deg,oklch(from var(--color-bg) l c h/.55) 0%,oklch(from var(--color-bg) l c h/.82) 55%,var(--color-bg) 100%)}
.hero-inner{position:relative;z-index:1;padding-block:clamp(var(--space-24),16vw,var(--space-32));max-width:840px}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;line-height:1.02;letter-spacing:-.025em;margin-top:var(--space-5)}
.hero h1 em{font-style:normal;color:var(--color-primary);text-shadow:0 0 32px var(--glow-primary)}
.hero p{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-6);max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-10);font-size:var(--text-sm);color:var(--color-text-muted)}
.hero-meta span{display:flex;align-items:center;gap:var(--space-2)}
.hero-meta svg{color:var(--color-primary);flex:none}

/* Hero staggered entrance (page load) */
@media (prefers-reduced-motion:no-preference){
  .hero-inner > *{opacity:0;transform:translateY(16px);animation:hero-rise .9s var(--ease-out) forwards}
  .hero-inner > *:nth-child(1){animation-delay:.05s}
  .hero-inner > *:nth-child(2){animation-delay:.14s}
  .hero-inner > *:nth-child(3){animation-delay:.23s}
  .hero-inner > *:nth-child(4){animation-delay:.32s}
  .hero-inner > *:nth-child(5){animation-delay:.41s}
}
@keyframes hero-rise{to{opacity:1;transform:none}}

/* ===== Offer band ===== */
.offer{position:relative;overflow:hidden;background:var(--color-primary);color:var(--color-on-primary);isolation:isolate}
.offer::before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(80% 140% at 15% 0%,oklch(from var(--color-primary) calc(l + .08) c h) 0%,transparent 55%),
  radial-gradient(90% 120% at 100% 100%,oklch(from var(--color-primary) calc(l - .1) c h) 0%,transparent 50%),
  var(--color-primary)}
.offer::after{content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(oklch(from var(--color-on-primary) l c h/.05) 1px,transparent 1px),linear-gradient(90deg,oklch(from var(--color-on-primary) l c h/.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(90% 100% at 80% 50%,#000,transparent 70%);mask-image:radial-gradient(90% 100% at 80% 50%,#000,transparent 70%)}
.offer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8);padding-block:var(--space-12)}
.offer-copy{max-width:60ch}
.offer-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:oklch(from var(--color-on-primary) l c h/.9);padding:var(--space-1) var(--space-3);border:1px solid oklch(from var(--color-on-primary) l c h/.25);border-radius:var(--radius-full);background:oklch(from var(--color-on-primary) l c h/.1)}
.offer h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin-top:var(--space-4);color:var(--color-on-primary)}
.offer p{font-size:var(--text-base);color:oklch(from var(--color-on-primary) l c h/.88);margin-top:var(--space-3)}
.offer .btn-primary{background:var(--color-on-primary);color:var(--color-primary);flex:none;box-shadow:0 10px 30px oklch(0 0 0/.2)}
.offer .btn-primary:hover{background:oklch(from var(--color-on-primary) l c h/.9);color:var(--color-primary);transform:translateY(-2px);box-shadow:0 16px 40px oklch(0 0 0/.28)}

/* ===== Card foundations (shared depth + sheen) ===== */
.problem-card,.svc-card,.step,.why-item{position:relative;isolation:isolate}
.problem-card::before,.svc-card::before,.step::before{}

/* ===== Problem ===== */
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);margin-top:var(--space-12)}
.problem-card{background:linear-gradient(180deg,var(--color-elevated),var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color var(--transition-interactive)}
.problem-card::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:var(--sheen)}
.problem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.problem-card h3{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-3)}
.problem-card p{font-size:var(--text-base);color:var(--color-text-muted)}
.problem-card .ico{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent);margin-bottom:var(--space-5);border:1px solid var(--color-hairline)}

.section-head{max-width:660px}
.section-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin-top:var(--space-4)}
.section-head p{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-4)}

/* ===== Services ===== */
.services{background:var(--color-surface-2);position:relative}
.services::before{content:'';position:absolute;inset:0;border-block:1px solid var(--color-hairline);pointer-events:none}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);margin-top:var(--space-12)}
.svc-card{position:relative;background:linear-gradient(180deg,var(--color-elevated),var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-10);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out),border-color 300ms var(--ease-out)}
.svc-card::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:var(--sheen)}
.svc-card:hover{border-color:oklch(from var(--color-primary) l c h/.5);transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.svc-tag{align-self:flex-start;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-accent-soft);color:var(--color-accent);border:1px solid var(--color-hairline)}
.svc-card h3{font-size:var(--text-lg);font-weight:600}
.svc-card p{font-size:var(--text-base);color:var(--color-text-muted)}
.svc-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.svc-card li{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.svc-card li svg{color:var(--color-primary);flex:none;margin-top:3px}

/* ===== Showcase (Instagram) ===== */
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-24));align-items:center;margin-top:var(--space-8)}
.showcase-img{position:relative;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}
.showcase-img::after{content:'';position:absolute;inset:0;box-shadow:inset 0 1px 0 oklch(1 0 0/.15);border-radius:inherit;pointer-events:none}
.showcase-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-8)}
.showcase-list li{display:flex;gap:var(--space-4)}
.showcase-list .num{flex:none;width:34px;height:34px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);display:grid;place-items:center;font-weight:700;font-size:var(--text-sm);box-shadow:0 4px 14px var(--glow-primary),inset 0 1px 0 oklch(1 0 0/.08)}
.showcase-list h4{font-size:var(--text-base);font-weight:600}
.showcase-list p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
@media (max-width:820px){.showcase-grid{grid-template-columns:1fr}.showcase-img{max-width:380px;margin-inline:auto}}

/* ===== Why / process ===== */
.why{background:var(--color-surface-2);position:relative}
.why::before{content:'';position:absolute;inset:0;border-block:1px solid var(--color-hairline);pointer-events:none}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);margin-top:var(--space-12);counter-reset:step}
.step{position:relative;padding:var(--space-8);background:linear-gradient(180deg,var(--color-elevated),var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color var(--transition-interactive)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-primary);display:block;margin-bottom:var(--space-3);text-shadow:0 0 20px var(--glow-soft)}
.step h3{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2)}
.step p{font-size:var(--text-base);color:var(--color-text-muted)}

.why-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);margin-top:var(--space-12)}
.why-item{display:flex;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);transition:background var(--transition-interactive)}
.why-item:hover{background:oklch(from var(--color-surface) l c h/.6)}
.why-item .ico{flex:none;width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;background:linear-gradient(180deg,var(--color-primary-hover),var(--color-primary));color:var(--color-on-primary);box-shadow:0 6px 18px var(--glow-primary),inset 0 1px 0 oklch(1 0 0/.08)}
.why-item h3{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-1)}
.why-item p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ===== CTA / Contact ===== */
.contact{position:relative}
.contact-card{position:relative;overflow:hidden;background:var(--color-text);color:var(--color-text-inverse);border-radius:var(--radius-2xl);padding:clamp(var(--space-10),6vw,var(--space-20));display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--space-10),5vw,var(--space-16));align-items:center;box-shadow:var(--shadow-lg)}
[data-theme='dark'] .contact-card{background:linear-gradient(160deg,var(--color-surface-offset),var(--color-surface));border:1px solid var(--color-border)}
.contact-card::before{content:'';position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,var(--glow-primary),transparent 70%);filter:blur(20px);pointer-events:none}
.contact-card > *{position:relative;z-index:1}
.contact-card h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.08}
.contact-card p{color:oklch(from var(--color-text-inverse) l c h/.78);margin-top:var(--space-4);font-size:var(--text-base)}
.contact-form{display:flex;flex-direction:column;gap:var(--space-3)}
.contact-form input,.contact-form textarea{width:100%;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid oklch(from var(--color-text-inverse) l c h/.2);background:oklch(from var(--color-text-inverse) l c h/.06);color:var(--color-text-inverse);font-size:var(--text-sm);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive),background var(--transition-interactive)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:oklch(from var(--color-text-inverse) l c h/.5)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--color-primary);outline:none;background:oklch(from var(--color-text-inverse) l c h/.1);box-shadow:0 0 0 3px var(--glow-soft)}
.contact-form .btn-primary{justify-content:center;margin-top:var(--space-2)}
.form-note{font-size:var(--text-xs);color:oklch(from var(--color-text-inverse) l c h/.55);text-align:center}
@media (max-width:760px){.contact-card{grid-template-columns:1fr}}

/* ===== Teaser / home CTA helpers ===== */
.teaser-cta{margin-top:var(--space-10);display:flex;justify-content:center}
.teaser-cta .btn svg{transition:transform var(--transition-interactive)}
.teaser-cta .btn:hover svg{transform:translateX(3px)}
.home-cta-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch}
.home-cta-actions .btn{justify-content:center}
[data-theme='dark'] .home-cta-actions .btn-ghost,.contact-card .btn-ghost{color:var(--color-text-inverse);border-color:oklch(from var(--color-text-inverse) l c h/.28);background:oklch(from var(--color-text-inverse) l c h/.06)}
.contact-card .btn-ghost:hover{border-color:oklch(from var(--color-text-inverse) l c h/.5);background:oklch(from var(--color-text-inverse) l c h/.12)}

/* ===== Footer ===== */
.footer{padding-block:var(--space-12);border-top:1px solid var(--color-divider)}
.footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between}
.footer-inner p{font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-contact{display:flex;flex-wrap:wrap;gap:var(--space-6);font-size:var(--text-sm)}
.footer-contact a{color:var(--color-text-muted);text-decoration:none;display:flex;align-items:center;gap:var(--space-2);transition:color var(--transition-interactive)}
.footer-contact a:hover{color:var(--color-primary)}

/* ===== Mobile drawer menu ===== */
.drawer-backdrop{position:fixed;inset:0;z-index:70;background:oklch(0 0 0/.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease-out),visibility .28s}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(340px,86vw);background:var(--color-surface);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);
  transform:translateX(100%);opacity:.6;transition:transform .34s var(--ease-out),opacity .34s var(--ease-out)}
.drawer.open{transform:translateX(0);opacity:1}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.drawer-close{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text);background:var(--color-surface)}
.drawer-close:active{transform:scale(.94)}
.drawer a.drawer-link{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-divider);
  opacity:0;transform:translateX(12px);transition:color var(--transition-interactive)}
.drawer a.drawer-link:hover{color:var(--color-primary)}
.drawer.open a.drawer-link{animation:drawer-item .4s var(--ease-out) forwards}
.drawer.open a.drawer-link:nth-child(1){animation-delay:.08s}
.drawer.open a.drawer-link:nth-child(2){animation-delay:.13s}
.drawer.open a.drawer-link:nth-child(3){animation-delay:.18s}
.drawer.open a.drawer-link:nth-child(4){animation-delay:.23s}
.drawer .btn-primary{margin-top:var(--space-4);justify-content:center;opacity:0;transform:translateX(12px)}
.drawer.open .btn-primary{animation:drawer-item .4s var(--ease-out) .28s forwards}
@keyframes drawer-item{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:opacity .01ms;transform:none;opacity:0;visibility:hidden}
  .drawer.open{opacity:1;visibility:visible}
  .drawer a.drawer-link,.drawer .btn-primary{opacity:1;transform:none;animation:none}
}

/* ===== Reveal animation (JS IntersectionObserver, opacity + clip-path — no layout shift) ===== */
.reveal{opacity:0;clip-path:inset(0 0 8% 0);transition:opacity .8s var(--ease-out),clip-path .8s var(--ease-out);will-change:opacity,clip-path}
.reveal.in{opacity:1;clip-path:inset(0 0 0 0)}
/* Staggered children within a revealed group */
.reveal-group.in > *{animation:stagger-in .7s var(--ease-out) both}
.reveal-group.in > *:nth-child(1){animation-delay:.04s}
.reveal-group.in > *:nth-child(2){animation-delay:.09s}
.reveal-group.in > *:nth-child(3){animation-delay:.14s}
.reveal-group.in > *:nth-child(4){animation-delay:.19s}
.reveal-group > *{opacity:0}
.reveal-group.in > *{opacity:1}
@keyframes stagger-in{from{opacity:0;clip-path:inset(0 0 12% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-group > *{opacity:1;clip-path:none;transform:none;animation:none;transition:opacity .2s ease}
}