@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --white:      #FFFFFF;
  --beige:      #F4EFE6;
  --beige-soft: #FAF7F2;
  --beige-deep: #E9E1D2;
  --ink:        #1D1B18;
  --ink-soft:   #68635A;
  --gold:       #B9884A;
  --line:       rgba(29,27,24,0.1);
  --ok:         #4B7A5A;
  --no:         #B5514A;

  --font: 'Inter', sans-serif;

  --fs-hero: clamp(2.6rem, 5.6vw, 4.6rem);
  --fs-h2:   clamp(1.9rem, 3.4vw, 2.7rem);
  --fs-h3:   1.3rem;

  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2.25rem;
  --space-lg: 4.5rem;
  --space-xl: 6.5rem;

  --max-w: 1160px;
  --radius: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.03rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:800; line-height:1.1; margin:0 0 var(--space-sm); letter-spacing:-0.02em; }
p{ margin:0 0 var(--space-sm); }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--space-md); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.legal-content h1{ margin-bottom:var(--space-md); }
.legal-content h2{ font-size:1.25rem; margin-top:var(--space-lg); margin-bottom:var(--space-xs); }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p, .legal-content ul{ color:var(--ink-soft); }
.legal-content ul{ margin:0 0 var(--space-sm); padding-left:1.2rem; }
.legal-content li{ margin-bottom:0.4rem; }
.legal-content a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.legal-content a:hover{ text-decoration-color:var(--gold); }

.eyebrow{
  font-weight:700; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:var(--space-xs);
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--gold); display:inline-block; }

/* -------- buttons -------- */
.btn{
  font-family:var(--font); font-weight:600; font-size:0.92rem;
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.9rem 1.7rem; border-radius:100px; border:1.5px solid transparent; cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ transform:translateY(-2px); background:#000; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.btn-row{ display:flex; gap:var(--space-sm); flex-wrap:wrap; }

/* -------- header -------- */
.site-header{
  background:rgba(255,255,255,0.9); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-xs) 0; position:relative; gap:var(--space-sm); }
.logo{ font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:0.55rem; }
.logo-img{ height:42px; width:auto; display:block; }
.logo-mark-svg{ width:26px; height:26px; flex-shrink:0; color:var(--ink); }
.logo-mark{ width:24px; height:24px; border-radius:6px; background:var(--ink); position:relative; flex-shrink:0; }
.logo-mark::after{ content:""; position:absolute; inset:6px 6px 9px 6px; border:1.5px solid var(--beige); border-radius:2px; }
.nav-links{ display:flex; gap:var(--space-md); list-style:none; margin:0; padding:0; font-size:0.86rem; font-weight:500; }
.nav-links a{ opacity:0.75; transition:opacity 0.2s; } .nav-links a:hover{ opacity:1; }
.nav-cta-item{ display:none; }

/* -------- mobile nav toggle -------- */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:0.4rem;
  width:40px; height:40px; align-items:center; justify-content:center; flex-shrink:0; order:1;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  position:relative; transition:background 0.15s ease; pointer-events:none;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform 0.25s ease, top 0.25s ease;
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* -------- hero -------- */
.hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--beige-soft); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-lg); align-items:start; }
.hero-inner{ max-width:520px; text-align:left; }
.hero h1{ font-size:var(--fs-hero); }
.hero .lede{ font-size:1.15rem; color:var(--ink-soft); max-width:44ch; margin:0 0 var(--space-md); }
.hero .btn-row{ justify-content:flex-start; margin-bottom:0; }

.trust-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-md) var(--space-lg);
  padding-top:var(--space-md); margin-top:var(--space-lg); border-top:1px solid var(--line);
}
.trust-item{ display:flex; align-items:center; gap:0.5rem; font-size:0.86rem; font-weight:600; color:var(--ink-soft); }
.trust-item svg{ width:18px; height:18px; color:var(--ok); flex-shrink:0; }

/* -------- hero phone mockup -------- */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; }
/* perspective wird nur für den Maus-Tilt-Effekt gebraucht (siehe JS, dort auf
   Geräte mit Maus/Zeiger beschränkt). Auf Touch-Geräten sorgt ein aktiver
   perspective-Kontext dafür, dass Browser beim Antippen von Inhalten im
   rotierten Handy-Mockup die Scroll-Position falsch berechnen und weit nach
   unten springen - deshalb hier gezielt nur für Geräte mit echtem Zeiger. */
@media (hover:hover) and (pointer:fine){
  .hero-visual{ perspective:1200px; }
}
.phone-mock{
  width:222px; height:451px; background:var(--white);
  border:5px solid var(--ink); border-radius:32px;
  box-shadow:0 44px 70px -32px rgba(29,27,24,0.5);
  transform:rotate(-4deg); position:relative; z-index:2;
  overflow:hidden;
  outline:1px solid var(--ink); outline-offset:-1px;
  /* Safari/WebKit hat einen bekannten Bug: overflow:hidden + border-radius
     clippt einen verschachtelten, transformierten Nachfahren (hier die
     skalierte Vorschau) manchmal nicht zuverlässig - dadurch kann Inhalt
     unten über den abgerundeten Rahmen hinausragen. Der mask-image-Trick
     zwingt WebKit, echtes Compositing-Clipping statt des fehlerhaften
     Pfads zu benutzen. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}
/* Auf Touch-Geräten ohne echten Maus-Zeiger die schräge Drehung entfernen:
   ein gedrehtes, teils außerhalb des Viewports liegendes Element kann beim
   Scrollen abgeschnitten/verzerrt wirken - auf Mobilgeräten steht das
   Mockup deshalb gerade. */
@media not all and (hover:hover), not all and (pointer:fine){
  .phone-mock{ transform:none; }
}
.phone-shine{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.45), rgba(255,255,255,0) 50%);
  opacity:0; transition:opacity 0.35s ease; mix-blend-mode:soft-light;
}
.phone-mock.is-tilting .phone-shine{ opacity:1; }
.phone-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:70px; height:18px; background:var(--ink); border-radius:100px; z-index:5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.phone-notch::after{
  content:""; position:absolute; top:50%; right:7px; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #3a4a55, var(--ink) 70%);
}
.phone-screen{
  width:100%; height:100%; background:var(--white); position:relative;
}
.phone-statusbar{
  position:absolute; top:0; left:0; right:0; height:38px; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; color:var(--ink); background:#EFE9DC;
  font-family:-apple-system, BlinkMacSystemFont, var(--font); font-size:0.72rem; font-weight:600; letter-spacing:0.01em;
  pointer-events:none; transition:color 0.3s ease, background 0.3s ease;
}
.phone-mock[data-active-site="cafe"] .phone-statusbar{ background:#EFE9DC; color:var(--ink); }
.phone-mock[data-active-site="quelle"] .phone-statusbar{ background:#F2F7F9; color:var(--ink); }
.phone-mock[data-active-site="friseur"] .phone-statusbar{ background:var(--ink); color:var(--white); }
.phone-statusbar .ps-icons{ display:flex; align-items:center; gap:5px; line-height:0; }
.phone-statusbar svg{ display:block; }
.phone-statusbar .ps-wifi{ width:14px; height:11px; }
.phone-statusbar .ps-battery{ width:22px; height:11px; }
.mini-site{
  position:absolute; top:38px; left:-2px; right:-2px; bottom:-2px; opacity:0; pointer-events:none;
  transition:opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1); overflow:hidden; background:var(--white);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  z-index:1;
}
/* aktive Vorschau liegt beim Übergang oben, damit sie sauber über die
   ausblendende darunter aufgeht (weicher Crossfade statt hartem Wechsel) */
.mini-site.active{ opacity:1; pointer-events:auto; z-index:2; }
/* Echte Live-Vorschau: die Demo-Seite wird bei Mobil-Breite gerendert (löst ihr eigenes
   Smartphone-Layout aus) und per JS auf die Telefon-Mockup-Breite herunterskaliert. */
.mini-site-scale{ position:absolute; top:0; left:0; width:380px; transform-origin:top left; }
/* Iframe wird auf normaler Smartphone-Viewport-Höhe gerendert, damit die
   eingebettete Seite ihr echtes Mobil-Layout zeigt (Hero-Höhen mit vh o. ä.
   bleiben korrekt). Das sanfte "Durchscrollen" übernimmt die eingebettete
   Seite selbst per postMessage-Steuerung (siehe JS in den Demo-Seiten). */
.mini-site-scale iframe{
  display:block; width:380px; height:800px; border:none; pointer-events:none;
  overflow:hidden; scrollbar-width:none;
}
.mini-site-scale iframe::-webkit-scrollbar{ display:none; }

.phone-tabs{ display:flex; gap:0.5rem; justify-content:center; margin-top:var(--space-sm); position:relative; z-index:2; }
.phone-tabs button{
  font-family:var(--font); font-size:0.78rem; font-weight:600; padding:0.45rem 1rem;
  border-radius:100px; border:1.5px solid var(--line); background:var(--white); cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.phone-tabs button.active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.floating-badge{
  position:absolute; background:var(--white); border:1.5px solid var(--line); border-radius:100px;
  padding:0.55rem 1.1rem; font-size:0.78rem; font-weight:700; white-space:nowrap;
  box-shadow:0 14px 26px -16px rgba(29,27,24,0.35);
  display:flex; align-items:center; gap:0.4rem; z-index:3;
  animation:float 4.5s ease-in-out infinite;
}
.badge-1{ top:6%; left:-4%; animation-delay:0s; }
.badge-2{ bottom:8%; right:-6%; animation-delay:1.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

@media (max-width:900px){
  .floating-badge{ display:none; }
}


/* -------- sections -------- */
section{ padding:var(--space-lg) 0; }
.section-alt{ background:var(--beige-soft); }
.section-dark{ background:var(--ink); color:var(--white); }
.section-dark h2{ color:var(--white); }
.section-dark .eyebrow{ color:#D9B77C; }
.section-head{ max-width:60ch; }
.section-head.center{ margin:0 auto var(--space-lg); text-align:center; }

/* -------- beispiele / portfolio -------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.example-card{
  border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  display:block; cursor:pointer;
}
.example-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -22px rgba(29,27,24,0.35); }
.example-link{
  display:inline-flex; align-items:center; gap:0.3rem;
  font-size:0.82rem; font-weight:700; color:var(--gold);
  margin-top:0.6rem;
}
.browser-frame{ aspect-ratio:16/10; background:var(--beige); position:relative; overflow:hidden; }
.browser-bar{ height:24px; background:var(--white); display:flex; align-items:center; gap:5px; padding:0 10px; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.browser-bar span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.frame-viewport{ position:relative; overflow:hidden; height:calc(100% - 24px); background:var(--white); }
.frame-viewport iframe{
  position:absolute; top:0; left:0;
  width:1400px; border:none;
  transform-origin:top left;
  pointer-events:none;
}
.example-card .body{ padding:var(--space-sm) var(--space-md) var(--space-md); }

/* Farbwelt-Umschalter auf der Vorschaukarte */
.preview-themes{
  display:flex; align-items:center; gap:0.5rem;
  margin:0.85rem 0 0.2rem;
}
.preview-themes-label{
  font-size:0.72rem; color:var(--ink-soft); margin-right:0.15rem;
}
.preview-dot{
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(29,27,24,0.15);
  cursor:pointer; padding:0;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.preview-dot:hover{ transform:scale(1.18); }
.preview-dot[aria-pressed="true"]{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--white), 0 0 0 3px rgba(29,27,24,0.3);
}
.example-tag{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:0.3rem; }
.example-card h3{ font-size:1.1rem; margin-bottom:0.3rem; }
.example-card p{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:0; }

/* -------- value cards -------- */
.value-card{ padding:var(--space-md); border:1.5px solid var(--line); border-radius:var(--radius); }
.value-card .num{ font-weight:800; font-size:1.6rem; color:var(--gold); display:block; margin-bottom:var(--space-xs); }
.value-card h3{ font-size:var(--fs-h3); margin-bottom:0.3rem; }
.value-card p{ font-size:0.94rem; color:var(--ink-soft); margin-bottom:0; }

/* -------- pricing table -------- */
.price-table{ width:100%; border-collapse:collapse; max-width:760px; margin:0 auto; }
.price-table th, .price-table td{ padding:1rem 0.75rem; border-bottom:1px solid var(--line); text-align:center; }
.price-table th:first-child, .price-table td:first-child{ text-align:left; }
.price-table thead th{ font-size:1.05rem; padding-top:0; }
.price-table thead .plan-price{ display:block; font-size:0.85rem; font-weight:500; color:var(--ink-soft); margin-top:0.2rem; }
.price-table .feature-name{ font-weight:600; font-size:0.95rem; }
.price-table .plus-col{ background:var(--beige-soft); border-radius:var(--radius); }
.check{ color:var(--ok); font-weight:800; }
.cross{ color:var(--no); font-weight:800; }
.badge-express{ font-size:0.82rem; font-weight:600; color:var(--gold); }

.addon-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); max-width:760px; margin:var(--space-lg) auto 0; }
.addon-card{ padding:var(--space-md); border:1.5px dashed var(--line); border-radius:var(--radius); }
.addon-card .eyebrow{ margin-bottom:0.4rem; }
.addon-card h3{ font-size:1.15rem; margin-bottom:0.3rem; }
.addon-price{ font-weight:800; font-size:1.3rem; margin-bottom:0.3rem; }
.addon-card p{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:0; }

/* -------- ablauf -------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); counter-reset:step; }
.step{ position:relative; padding-top:var(--space-md); }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.95rem;
}
.step h3{ font-size:1.05rem; margin:var(--space-md) 0 0.3rem; }
.step p{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:0; }

/* -------- faq -------- */
.faq-list{ max-width:720px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); padding:var(--space-sm) 0; }
.faq-item summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-sm); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-weight:400; font-size:1.4rem; color:var(--gold); flex-shrink:0; transition:transform 0.2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:var(--space-xs) 0 0; color:var(--ink-soft); font-size:0.95rem; }

/* -------- contact -------- */
.contact-card{
  background:var(--beige-soft); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:var(--space-lg) var(--space-md); max-width:560px; margin:0 auto;
}
.form-field{ margin-bottom:var(--space-sm); display:flex; flex-direction:column; gap:0.4rem; }
.form-field label{ font-size:0.78rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font); font-size:1rem; padding:0.75rem 0.9rem;
  border:1.5px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold); }
.contact-card .btn-primary{ width:100%; justify-content:center; padding:1rem; margin-top:var(--space-xs); }
.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:var(--space-xs); text-align:center; }

/* -------- footer -------- */
.site-footer{ background:var(--ink); color:var(--beige-soft); padding:var(--space-lg) 0 var(--space-md); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-md); padding-bottom:var(--space-md); border-bottom:1px solid rgba(250,247,242,0.15); }
.site-footer h4{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:#D9B77C; margin-bottom:var(--space-sm); font-weight:700; }
.footer-logo{ font-weight:800; font-size:1.2rem; margin-bottom:var(--space-xs); }
.site-footer a{ opacity:0.85; } .site-footer a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-xs); padding-top:var(--space-sm); font-size:0.78rem; opacity:0.7; }

/* -------- reveal / hover -------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* -------- über uns -------- */
.about-hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--beige-soft); }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--space-lg); align-items:center; }
.about-photo{
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--beige-deep); position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo .placeholder{ text-align:center; color:var(--ink-soft); padding:var(--space-md); }
.about-photo .placeholder svg{ width:64px; height:64px; margin:0 auto var(--space-xs); opacity:0.5; }
.about-photo .placeholder p{ font-size:0.82rem; margin:0; }
.about-intro h1{ font-size:var(--fs-hero); }
.about-role{ font-weight:600; color:var(--gold); font-size:0.95rem; margin-bottom:var(--space-sm); }

.story-block{ max-width:680px; margin:0 auto; }
.story-block p{ font-size:1.08rem; color:var(--ink-soft); }
.story-block p.lead{ font-size:1.25rem; color:var(--ink); font-weight:600; }

.benefit-list{ list-style:none; margin:0; padding:0; max-width:680px; margin-left:auto; margin-right:auto; display:grid; gap:var(--space-sm); }
.benefit-list li{ display:flex; gap:var(--space-sm); align-items:flex-start; }
.benefit-list svg{ width:22px; height:22px; color:var(--ok); flex-shrink:0; margin-top:3px; }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:320px; margin:0 auto; }
  .about-intro{ text-align:center; }
}

@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .addon-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-md); }
  .hero-inner{ max-width:none; text-align:center; }
  .hero .lede{ margin-left:auto; margin-right:auto; }
  .hero .btn-row{ justify-content:center; }
  .hero-visual{ margin-top:0; }
}
@media (max-width:640px){
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
  .nav-links{
    flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 16px 24px -18px rgba(29,27,24,0.25);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height 0.3s ease, opacity 0.2s ease;
  }
  .nav-links.open{ max-height:420px; opacity:1; visibility:visible; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links li:first-child{ border-top:none; }
  .nav-links a{ display:block; padding:0.9rem var(--space-md); opacity:1; }
  .nav-cta-item{ display:block; padding:var(--space-sm) var(--space-md); }
  .nav-cta-item a.btn{
    display:flex; justify-content:center; padding:0.85rem 1.3rem; opacity:1;
  }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .price-table{ font-size:0.85rem; }
  .price-table th, .price-table td{ padding:0.7rem 0.4rem; }
  .hero{ padding:var(--space-lg) 0 var(--space-md); }
  .phone-mock{ width:210px; height:427px; }
  .phone-notch{ width:66px; height:20px; }
}
@media (max-width:380px){
  .phone-mock{ width:186px; height:378px; }
  .phone-notch{ width:60px; height:18px; }
}