/* Mackey Web Studio — style.css */

:root{
  /* Type scale */
  --text-xs:clamp(0.75rem,0.72rem + 0.15vw,0.8125rem);
  --text-sm:clamp(0.875rem,0.84rem + 0.2vw,0.9375rem);
  --text-base:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  --text-lg:clamp(1.125rem,1.05rem + 0.4vw,1.375rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);
  --text-2xl:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --text-3xl:clamp(2.6rem,1.6rem + 4vw,4.75rem);

  /* Spacing */
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.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;

  /* Warm-neutral palette + cobalt accent */
  --color-bg:#fafaf8;
  --color-surface:#ffffff;
  --color-surface-2:#f4f3ef;
  --color-ink:#0a0a0a;
  --color-text:#1a1a18;
  --color-text-muted:#5c5b56;
  --color-text-faint:#8f8e88;
  --color-border:#e6e4dd;
  --color-border-strong:#d6d3ca;

  --color-primary:#1d4fd8;
  --color-primary-hover:#1740b8;
  --color-primary-soft:#eef2fe;
  --color-primary-tint:#dce6fc;

  --radius-sm:0.5rem;--radius-md:0.75rem;--radius-lg:1.125rem;--radius-xl:1.5rem;--radius-full:9999px;
  --transition:200ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm:0 1px 2px rgba(20,18,12,.05),0 1px 3px rgba(20,18,12,.04);
  --shadow-md:0 6px 18px rgba(20,18,12,.07),0 2px 6px rgba(20,18,12,.04);
  --shadow-lg:0 24px 48px -12px rgba(20,18,12,.16),0 8px 20px rgba(20,18,12,.06);
  --shadow-blue:0 14px 30px -8px rgba(29,79,216,.42);

  --container:1200px;

  --font-display:'Inter Tight','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;
}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-6)}
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--color-primary);border-radius:2px}
.section-head{max-width:680px;margin-bottom:var(--space-12)}
.section-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.025em;margin-top:var(--space-4);color:var(--color-ink)}
.section-head p{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--color-text-muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:650;font-size:var(--text-sm);padding:0.85em 1.5em;border-radius:var(--radius-full);transition:var(--transition);white-space:nowrap;border:1.5px solid transparent;line-height:1}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 18px 36px -8px rgba(29,79,216,.5)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--color-ink);border-color:var(--color-border-strong)}
.btn-ghost:hover{border-color:var(--color-ink);background:var(--color-ink);color:#fff;transform:translateY(-2px)}
.btn-lg{font-size:var(--text-base);padding:1em 1.85em}
.btn-block{width:100%}
.btn-white{background:#fff;color:var(--color-ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,250,248,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition),box-shadow var(--transition)}
.nav.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--space-6)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-ink);font-weight:800;font-family:var(--font-display);letter-spacing:-.02em}
.brand svg{width:34px;height:34px;color:var(--color-primary);flex-shrink:0}
.brand .brand-text{font-size:1.0625rem;line-height:1.05}
.brand .brand-text span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint)}
.nav-links{display:flex;align-items:center;gap:var(--space-2)}
.nav-links a{font-size:var(--text-sm);font-weight:550;color:var(--color-text-muted);padding:.5em .85em;border-radius:var(--radius-full)}
.nav-links a:hover{color:var(--color-ink);background:var(--color-surface-2)}
.nav-cta{display:flex;align-items:center;gap:var(--space-3)}
.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-ink)}
.nav-toggle svg{width:24px;height:24px}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(var(--space-12),7vw,var(--space-24));padding-bottom:clamp(var(--space-16),8vw,var(--space-32));position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(var(--space-8),4vw,var(--space-16));align-items:center}
.hero-pill{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--text-xs);font-weight:700;padding:.5em 1em;border-radius:var(--radius-full);border:1px solid var(--color-primary-tint);margin-bottom:var(--space-6)}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary)}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.03em;color:var(--color-ink);line-height:1.02}
.hero h1 .accent{color:var(--color-primary)}
.hero-sub{margin-top:var(--space-6);font-size:var(--text-lg);color:var(--color-text-muted);max-width:34ch}
.hero-ctas{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-trust{margin-top:var(--space-8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);font-weight:550}
.hero-trust .sep{color:var(--color-border-strong)}
.hero-trust b{color:var(--color-ink);font-weight:700}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%}
.hero-badge{position:absolute;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:.7rem 1rem;display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:var(--text-sm)}
.hero-badge .ico{width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);flex-shrink:0}
.hero-badge .ico svg{width:18px;height:18px}
.hero-badge small{display:block;font-weight:550;font-size:var(--text-xs);color:var(--color-text-faint)}
.hero-badge.b1{bottom:-18px;left:-24px}
.hero-badge.b2{top:24px;right:-20px}

/* ---------- Why-local band ---------- */
.why{background:var(--color-ink);color:#fff}
.why .section-head h2{color:#fff}
.why .pull{font-family:var(--font-serif);font-size:clamp(1.5rem,1rem + 2.2vw,2.4rem);font-weight:400;line-height:1.22;letter-spacing:-.01em;max-width:22ch;color:#fff}
.why .pull b{color:#9db8ff;font-weight:500}
.why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.stat-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:var(--space-6);transition:var(--transition)}
.stat-card:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.stat-card .si{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;background:rgba(29,79,216,.22);color:#9db8ff;margin-bottom:var(--space-4)}
.stat-card .si svg{width:21px;height:21px}
.stat-card h3{font-size:var(--text-base);font-weight:700;color:#fff}
.stat-card p{font-size:var(--text-sm);color:rgba(255,255,255,.62);margin-top:var(--space-1)}

/* ---------- Portfolio ---------- */
.feature-card{display:grid;grid-template-columns:1.25fr 1fr;gap:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:var(--space-8)}
.feature-shot{position:relative;display:block;background:var(--color-surface-2);min-height:340px;overflow:hidden}
.feature-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform var(--transition)}
.feature-shot:hover img{transform:scale(1.03)}
.feature-shot .shot-tag{position:absolute;top:var(--space-4);left:var(--space-4);z-index:2;background:var(--color-ink);color:#fff;font-size:var(--text-xs);font-weight:700;padding:.4em .85em;border-radius:var(--radius-full)}
.feature-shot .shot-tag--preview{background:var(--color-primary)}
.feature-body{padding:clamp(var(--space-6),3vw,var(--space-12));display:flex;flex-direction:column;justify-content:center}
.feature-body .meta{font-size:var(--text-sm);color:var(--color-primary);font-weight:700}
.feature-body h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em;margin:var(--space-2) 0 var(--space-4);color:var(--color-ink)}
.feature-body p{color:var(--color-text-muted);margin-bottom:var(--space-4)}
.feature-body .btn{align-self:flex-start;margin-top:var(--space-2)}
.coming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.coming-card{border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3)}
.coming-card .ph{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);display:grid;place-items:center}
.coming-card .ph svg{width:24px;height:24px}
.coming-card h4{font-size:var(--text-base);font-weight:700;color:var(--color-text)}
.coming-card p{font-size:var(--text-sm);color:var(--color-text-faint)}

/* ---------- Process ---------- */
.process{background:var(--color-surface-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);position:relative}
.step{position:relative}
.step .num{width:52px;height:52px;border-radius:var(--radius-md);background:var(--color-ink);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin-bottom:var(--space-5);position:relative;z-index:2}
.step:nth-child(2) .num,.step:nth-child(3) .num,.step:nth-child(4) .num{background:var(--color-primary)}
.step .sline{position:absolute;top:26px;left:52px;right:-24px;height:2px;background:var(--color-border-strong);z-index:1}
.step:last-child .sline{display:none}
.step .sico{display:inline-grid;place-items:center;width:36px;height:36px;color:var(--color-primary);margin-bottom:var(--space-3)}
.step .sico svg{width:28px;height:28px}
.step h3{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em;color:var(--color-ink)}
.step .when{display:inline-block;font-size:var(--text-xs);font-weight:700;color:var(--color-primary);background:var(--color-primary-soft);padding:.2em .65em;border-radius:var(--radius-full);margin:var(--space-2) 0}
.step p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:stretch}
.price-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-6),2.4vw,var(--space-8));display:flex;flex-direction:column;transition:var(--transition);position:relative}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-card.featured{border:2px solid var(--color-primary);box-shadow:var(--shadow-lg);transform:scale(1.035)}
.price-card.featured:hover{transform:scale(1.035) translateY(-4px)}
.price-badge{position:absolute;top:0;left:50%;transform:transl(-50%,-50%);transform:translate(-50%,-50%);background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.45em 1.1em;border-radius:var(--radius-full);white-space:nowrap;box-shadow:var(--shadow-blue)}
.price-card .tier{font-size:var(--text-base);font-weight:700;color:var(--color-ink)}
.price-card .tier-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}
.price-card .price{margin:var(--space-5) 0 var(--space-1);display:flex;align-items:baseline;gap:.35rem}
.price-card .price .amt{font-family:var(--font-display);font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--color-ink)}
.price-card .price .per{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600}
.price-card .build{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600;margin-bottom:var(--space-6)}
.price-card .build b{color:var(--color-ink);font-weight:700}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8);flex:1}
.price-card li{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text);align-items:flex-start}
.price-card li svg{width:18px;height:18px;color:var(--color-primary);flex-shrink:0;margin-top:2px}
.price-card li.head{font-weight:700;color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--color-border);padding-top:var(--space-3);margin-top:var(--space-1)}
.price-card li.head svg{display:none}
.price-note{text-align:center;margin-top:var(--space-10);font-size:var(--text-sm);color:var(--color-text-muted);max-width:70ch;margin-inline:auto}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(var(--space-8),4vw,var(--space-16));align-items:center}
.about-photo{position:relative}
.about-photo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.about-photo .sig{position:absolute;bottom:-16px;right:-16px;background:var(--color-primary);color:#fff;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);box-shadow:var(--shadow-blue)}
.about-photo .sig b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base)}
.about-photo .sig small{font-size:var(--text-xs);opacity:.85}
.about-body h2{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:500;letter-spacing:-.01em;color:var(--color-ink);line-height:1.1}
.about-body p{margin-top:var(--space-5);color:var(--color-text-muted);font-size:var(--text-base)}
.about-body p strong{color:var(--color-ink);font-weight:650}
.about-diff{margin-top:var(--space-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.about-diff .d{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm)}
.about-diff .d svg{width:20px;height:20px;color:var(--color-primary);flex-shrink:0;margin-top:1px}
.about-diff .d b{color:var(--color-ink);font-weight:700;display:block}
.about-diff .d span{color:var(--color-text-muted)}

/* ---------- Intake form ---------- */
.intake{background:var(--color-surface-2)}
.intake-head{text-align:center;max-width:620px;margin:0 auto var(--space-12)}
.intake-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.025em;color:var(--color-ink)}
.intake-head p{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--color-text-muted)}
.form-shell{max-width:820px;margin:0 auto}
.form-progress{display:flex;gap:var(--space-2);margin-bottom:var(--space-8)}
.form-progress .pseg{flex:1;height:5px;border-radius:var(--radius-full);background:var(--color-border-strong);transition:var(--transition)}
.form-progress .pseg.active{background:var(--color-primary)}
.form-progress .pseg.done{background:var(--color-primary);opacity:.55}
.form-step{display:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));box-shadow:var(--shadow-sm)}
.form-step.active{display:block;animation:fade-up .4s var(--transition) both}
.form-step .step-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary)}
.form-step h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em;color:var(--color-ink);margin:var(--space-2) 0 var(--space-6)}
.field{margin-bottom:var(--space-5)}
.field>label{display:block;font-weight:650;font-size:var(--text-sm);color:var(--color-ink);margin-bottom:var(--space-2)}
.field .opt{color:var(--color-text-faint);font-weight:500}
.req{color:var(--color-primary)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:.8em 1em;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-base);transition:var(--transition)}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#cc3333;box-shadow:0 0 0 3px rgba(204,51,51,.1)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.choice-list{display:flex;flex-direction:column;gap:var(--space-2)}
.choice-list.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.choice{display:flex;align-items:flex-start;gap:var(--space-3);padding:.8em 1em;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);font-size:var(--text-sm)}
.choice:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}
.choice input{margin-top:2px;accent-color:var(--color-primary);width:18px;height:18px;flex-shrink:0}
.choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-soft);font-weight:600}
.field-error{color:#cc3333;font-size:var(--text-xs);font-weight:600;margin-top:var(--space-2);display:none}
.field-error.show{display:block}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-8)}
.form-nav .stepcount{font-size:var(--text-sm);color:var(--color-text-faint);font-weight:600}
.form-foot-note{text-align:center;margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.form-foot-note a{color:var(--color-primary);font-weight:650}
.form-success{display:none;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-10),5vw,var(--space-20)) var(--space-6);box-shadow:var(--shadow-md)}
.form-success.show{display:block;animation:fade-up .5s var(--transition) both}
.form-success .check{width:72px;height:72px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);display:grid;place-items:center;margin:0 auto var(--space-6)}
.form-success .check svg{width:38px;height:38px}
.form-success h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--color-ink)}
.form-success p{margin-top:var(--space-3);color:var(--color-text-muted);max-width:46ch;margin-inline:auto}
.form-err-banner{display:none;background:#fdecec;border:1px solid #f3c0c0;color:#a02323;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-5)}
.form-err-banner.show{display:block}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:0 auto;border-top:1px solid var(--color-border)}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) 0;text-align:left;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-ink)}
.faq-q .pm{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--color-border-strong);display:grid;place-items:center;color:var(--color-primary);transition:var(--transition)}
.faq-q .pm svg{width:16px;height:16px;transition:transform var(--transition)}
.faq-item.open .pm{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.faq-item.open .pm svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--transition)}
.faq-a p{padding-bottom:var(--space-6);color:var(--color-text-muted);max-width:64ch}

/* ---------- Final CTA ---------- */
.final{background:var(--color-primary);color:#fff;text-align:center}
.final h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.025em;color:#fff;max-width:18ch;margin:0 auto}
.final p{margin-top:var(--space-4);color:rgba(255,255,255,.85);font-size:var(--text-lg)}
.final p a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.final .btn{margin-top:var(--space-8)}

/* ---------- Footer ---------- */
.footer{background:var(--color-ink);color:rgba(255,255,255,.7);padding-block:var(--space-20) var(--space-10)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.footer .brand{color:#fff;margin-bottom:var(--space-4)}
.footer .brand svg{color:#9db8ff}
.footer .brand .brand-text span{color:rgba(255,255,255,.5)}
.footer-tag{font-size:var(--text-sm);max-width:32ch;margin-bottom:var(--space-5)}
.footer h4{color:#fff;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-4)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer ul a{font-size:var(--text-sm);color:rgba(255,255,255,.7)}
.footer ul a:hover{color:#fff}
.footer-contact{font-size:var(--text-sm);line-height:1.9}
.footer-contact a{color:#9db8ff}
.phone-placeholder{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer-social a{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:rgba(255,255,255,.7)}
.footer-social a:hover{background:#fff;color:var(--color-ink);border-color:#fff}
.footer-social svg{width:19px;height:19px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--space-16);padding-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:var(--text-sm)}
.footer-bottom a{color:#9db8ff;font-weight:600}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Mobile nav menu ---------- */
.mobile-menu{position:fixed;inset:72px 0 auto 0;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-lg);padding:var(--space-4) var(--space-6) var(--space-8);z-index:99;transform:translateY(-120%);transition:transform var(--transition);visibility:hidden}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu a{display:block;padding:var(--space-4) 0;font-size:var(--text-lg);font-weight:600;color:var(--color-ink);border-bottom:1px solid var(--color-border)}
.mobile-menu a.btn-primary{color:#fff;border-bottom:none}
.mobile-menu .btn{width:100%;margin-top:var(--space-5)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-12)}
  .hero-visual{max-width:560px}
  .hero-sub{max-width:48ch}
  .why-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .feature-card{grid-template-columns:1fr}
  .feature-shot{min-height:280px;order:-1}
  .steps{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .step .sline{display:none}
  .about-grid{grid-template-columns:1fr;gap:var(--space-12)}
  .about-photo{max-width:460px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-10)}
}
@media (max-width:768px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:flex}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-4px)}
  .pricing-grid{grid-template-columns:1fr;gap:var(--space-10);margin-top:var(--space-6)}
  .coming-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .stat-cards{grid-template-columns:1fr 1fr}
  .hero-badge.b1{left:-8px;bottom:-12px}
  .hero-badge.b2{right:-4px}
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr}
  .choice-list.cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .about-diff{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,8vw,3rem)}
  .form-nav{flex-wrap:wrap}
  .form-nav .stepcount{order:-1;width:100%;text-align:center}
}