/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Tokens ── */
:root {
  --bg:          #09090B;
  --surface:     #0F0F12;
  --surface2:    #18181B;
  --glass:       rgba(255,255,255,.04);
  --glass-hover: rgba(255,255,255,.07);
  --glass-bd:    rgba(255,255,255,.09);
  --accent:      #4A90D9;
  --accent-2:    #6AAEE8;
  --accent-dim:  rgba(74,144,217,.12);
  --accent-bd:   rgba(74,144,217,.28);
  --accent-glow: rgba(74,144,217,.18);
  --text:        #FAFAFA;
  --muted:       #A1A1AA;
  --subtle:      #71717A;
  --border:      rgba(255,255,255,.08);
  --radius:      14px;
  --radius-lg:   20px;
  --max:         1240px;
  --font:        -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

html { scroll-behavior:smooth }
body {
  font-family:var(--font);
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.site-header{position:sticky;top:0;z-index:100}
.skip {
  position:absolute;top:-100%;left:1rem;background:var(--accent);color:#fff;
  padding:.5rem 1rem;border-radius:0 0 8px 8px;font-weight:700;font-size:.875rem;
  text-decoration:none;z-index:200;transition:top .2s;
}
.skip:focus { top:0 }
:focus-visible { outline:2px solid var(--accent);outline-offset:3px;border-radius:3px }
h1,h2,h3,h4 { line-height:1.12;letter-spacing:-.025em;font-weight:800 }
a { color:inherit }

/* ── Layout helpers ── */
.wrap { max-width:var(--max);margin:0 auto;padding:0 40px }
.pad  { padding:7rem 0 }
.eye {
  display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;
}
.eye::before { content:'';display:block;width:24px;height:2px;background:var(--accent);border-radius:2px }

/* ── Buttons ── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:10px;font-size:.95rem;font-weight:600;
  text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-family:inherit;min-height:48px;
}
.btn-p { background:var(--accent);color:#fff }
.btn-p:hover { background:var(--accent-2);transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-glow) }
.btn-g { background:var(--glass);color:var(--text);border:1.5px solid var(--glass-bd) }
.btn-g:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-dim) }

/* ─────────────────────────────────────────────  NAV  ───────────────────────────────────────────── */
.nav {
  z-index:100;background:rgba(9,9,11,.78);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-bd);
}
.nav-in { max-width:var(--max);margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between }
.logo { font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--text);letter-spacing:-.02em }
.logo span { color:var(--accent) }
.nav-links { display:flex;align-items:center;gap:.25rem;list-style:none }
.nav-links a {
  color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:.5rem .9rem;border-radius:8px;transition:color .15s,background .15s;
}
.nav-links a:hover { color:var(--text);background:var(--glass) }
.nav-cta { background:var(--accent)!important;color:#fff!important;font-weight:700!important }
.nav-cta:hover { background:var(--accent-2)!important }
.nav-burger { display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:none;cursor:pointer;border-radius:8px }
.nav-burger span { display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s,width .25s }
.nav-burger span:nth-child(2){width:70%}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer { display:none }

/* ─────────────────────────────────────────────  HERO  ───────────────────────────────────────────── */
.hero { position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;padding:6rem 0 4rem }
.hero::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:30px 30px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 25%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 25%, transparent 100%);pointer-events:none;
}
.hero::after {
  content:'';position:absolute;width:800px;height:800px;
  background:radial-gradient(circle, rgba(74,144,217,.07) 0%, transparent 60%);
  top:45%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.hero-grid { position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:center;width:100% }
.hero-tag {
  display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-bd);
  padding:.4rem .9rem;border-radius:100px;margin-bottom:1.75rem;
}
.hero-tag::before { content:'';display:block;width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px var(--accent-dim) }
.hero h1 { font-size:clamp(2.75rem,4.4vw,4.25rem);max-width:680px;margin-bottom:1.5rem }
.hero h1 em { font-style:normal;color:var(--accent) }
.hero-sub { font-size:1.2rem;color:var(--muted);max-width:540px;margin-bottom:2.5rem;line-height:1.65 }
.hero-ctas { display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.75rem }
.hero-proof { display:flex;gap:2.5rem;flex-wrap:wrap }
.hero-proof div { display:flex;flex-direction:column }
.hero-proof b { font-size:1.6rem;font-weight:800;color:var(--text);line-height:1 }
.hero-proof span { font-size:.8rem;color:var(--subtle);margin-top:.4rem;letter-spacing:.02em }

/* Hero visual — stacked product frames */
.hero-stack { position:relative;height:440px }
.frame {
  position:absolute;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);background:#111;
}
.frame-a { width:340px;top:0;right:0;z-index:3 }
.frame-b { width:300px;bottom:0;left:0;z-index:2;opacity:.92 }
.frame-bar { background:#1C1C1C;padding:9px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.05) }
.frame-bar .dot { width:8px;height:8px;border-radius:50% }
.frame-ttl { font-size:10px;font-weight:700;color:#fff;margin-left:4px }
.frame-img { width:100%;display:block;height:240px;object-fit:cover;object-position:top center }

/* ─────────────────────────────────────────────  STRIP  ───────────────────────────────────────────── */
.trust-strip { border-top:1px solid var(--glass-bd);border-bottom:1px solid var(--glass-bd);background:var(--surface) }
.strip-in { display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.75rem 0;flex-wrap:wrap }
.strip-label { font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);white-space:nowrap }
.strip-names { display:flex;gap:2.5rem;flex-wrap:wrap }
.strip-names span { font-weight:700;font-size:1rem;color:var(--muted);letter-spacing:.01em }

/* ─────────────────────────────────────────────  OFFER  ───────────────────────────────────────────── */
.sh { max-width:680px }
.sh h2 { font-size:clamp(2rem,3.4vw,3rem);margin-bottom:1rem }
.sh p { font-size:1.1rem;color:var(--muted);line-height:1.7 }

.offer-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem }
.offer {
  background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius-lg);
  padding:2.25rem 2rem;transition:border-color .2s,background .2s,transform .2s;
}
.offer:hover { border-color:var(--accent-bd);background:var(--glass-hover);transform:translateY(-3px) }
.offer-icon {
  width:48px;height:48px;background:var(--accent-dim);border:1px solid var(--accent-bd);border-radius:11px;
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:var(--accent);
}
.offer h3 { font-size:1.2rem;margin-bottom:.6rem }
.offer p { font-size:.95rem;color:var(--muted);line-height:1.65 }

/* ─────────────────────────────────────────────  FINISH-IT (conversion)  ───────────────────────────────────────────── */
.finish { background:linear-gradient(180deg,var(--surface) 0%,#0c0c0f 100%);border-top:1px solid var(--glass-bd) }
.finish-card {
  display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center;
  background:var(--glass);border:1px solid var(--accent-bd);border-radius:var(--radius-lg);
  padding:3.5rem;position:relative;overflow:hidden;
}
.finish-card::after {
  content:'';position:absolute;width:400px;height:400px;top:-100px;right:-100px;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none;
}
.finish-card h2 { font-size:clamp(1.8rem,2.8vw,2.5rem);margin-bottom:1.25rem;position:relative;z-index:1 }
.finish-card p { color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:1rem;position:relative;z-index:1 }
.finish-list { list-style:none;margin:1.5rem 0 2rem;position:relative;z-index:1 }
.finish-list li { display:flex;gap:.75rem;align-items:flex-start;padding:.5rem 0;color:var(--text);font-size:1rem }
.finish-list svg { flex-shrink:0;margin-top:3px;color:var(--accent) }
.finish-cta { position:relative;z-index:1 }
.finish-aside { position:relative;z-index:1;text-align:center;border-left:1px solid var(--glass-bd);padding-left:3rem }
.finish-aside .big { font-size:3.5rem;font-weight:800;color:var(--accent);line-height:1 }
.finish-aside .lbl { font-size:.95rem;color:var(--muted);margin-top:.75rem }
.finish-aside .sub { font-size:.85rem;color:var(--subtle);margin-top:1.5rem;line-height:1.6 }

/* ─────────────────────────────────────────────  WORK  ───────────────────────────────────────────── */
.work-section { background:var(--bg) }
.work-intro { margin-bottom:4rem }
.work-intro h2 { font-size:clamp(2rem,3.4vw,3rem);margin-bottom:1rem }
.work-intro p { font-size:1.1rem;color:var(--muted);line-height:1.7;max-width:620px }
.project { padding:4rem 0;border-top:1px solid var(--glass-bd) }
.project:last-child { border-bottom:1px solid var(--glass-bd) }
.project-in { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center }
.project-in.flip { direction:rtl }
.project-in.flip > * { direction:ltr }
.proj-tag { font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem }
.proj-copy h3 { font-size:clamp(1.6rem,2.6vw,2.25rem);margin-bottom:1rem }
.proj-copy p { font-size:1rem;color:var(--muted);line-height:1.75;margin-bottom:1rem }
.proj-copy p:last-of-type { margin-bottom:1.5rem }
.pills { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem }
.pill { font-size:.82rem;font-weight:600;padding:.32rem .75rem;border-radius:100px;background:var(--accent-dim);border:1px solid var(--accent-bd);color:var(--accent) }
.proj-actions { display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap }
.proj-link { display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;font-weight:600;color:var(--accent);text-decoration:none;transition:gap .2s }
.proj-link:hover { gap:.7rem }
.proj-link.ghost { color:var(--muted) }
.proj-link.ghost:hover { color:var(--text) }
.mock-wrap { width:100% }
.shot-img { width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.55) }

/* ── shared mock chrome ── */
.dot { width:9px;height:9px;border-radius:50%;flex-shrink:0 }

/* OnlineMenu mock */
.mock { background:#111;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.65);width:100% }
.mock-bar { background:#1C1C1C;padding:11px 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.05) }
.mock-title { font-size:11px;font-weight:700;color:#fff;margin-left:4px }
.mock-title em { font-style:normal;color:#E85428 }
.mock-bd { padding:14px }
.badge-new { display:inline-block;background:#E85428;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;margin-bottom:10px }
.order { background:#1A1A1A;border-radius:7px;padding:10px 12px;margin-bottom:7px;border-left:3px solid transparent;position:relative }
.order.o-new{border-left-color:#E85428}.order.o-ready{border-left-color:#2E7D32;opacity:.75}.order.o-done{border-left-color:#333;opacity:.4}
.o-ref{font-size:12px;font-weight:700;color:#fff}.o-meta{font-size:10px;color:#666;margin-top:2px}
.o-status{position:absolute;top:10px;right:10px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.s-new{background:#E85428;color:#fff}.s-ready{background:#2E7D32;color:#fff}.s-done{background:#222;color:#555}

/* TrustPoint mock */
.tp-mock { background:#0A1F2C;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.65);width:100% }
.tp-bar { background:#08161f;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07) }
.tp-bar-left { display:flex;align-items:center;gap:7px }
.tp-title { font-size:11px;font-weight:700;color:#fff;margin-left:4px }
.tp-title em { font-style:normal;color:#E8551F }
.tp-body { padding:14px;display:flex;flex-direction:column;gap:8px }
.tp-row { background:#0E2A3A;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px }
.tp-co { font-size:12px;font-weight:700;color:#fff }
.tp-co small { display:block;font-size:9px;color:#7891a0;font-weight:500;margin-top:2px }
.tp-state { font-size:9px;font-weight:700;padding:3px 8px;border-radius:5px;white-space:nowrap }
.st-ready{background:rgba(46,160,67,.16);border:1px solid rgba(46,160,67,.4);color:#3fb950}
.st-risk{background:rgba(232,160,32,.16);border:1px solid rgba(232,160,32,.4);color:#e3a72c}
.st-blocked{background:rgba(248,81,73,.16);border:1px solid rgba(248,81,73,.4);color:#f85149}

/* Habitat colour mock */
.colour-mock { background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.55);width:100% }
.colour-bar { background:#1a1a1a;padding:11px 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.05) }
.colour-bar-title { font-size:11px;font-weight:700;color:#fff;margin-left:4px;letter-spacing:.04em;text-transform:uppercase }
.colour-body { padding:14px }
.colour-label { font-size:10px;font-weight:600;color:#888;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px }
.swatch-row { display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap }
.swatch { width:34px;height:34px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:transform .15s }
.swatch.active { border-color:#1a1a1a;transform:scale(1.1) }
.cabinet-wrap { background:#F8F6F2;border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:center;gap:6px }
.cabinet-door { width:52px;height:70px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.1);transition:background .3s }
.colour-finish-name { font-size:11px;font-weight:700;color:#1a1a1a;text-align:center;margin-top:8px;letter-spacing:.03em }

/* Handyman estimator mock */
.calc-mock { background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.55);width:100% }
.calc-bar { background:#4E2F0E;padding:11px 14px;display:flex;align-items:center;gap:7px }
.calc-bar-title { font-size:11px;font-weight:700;color:#C8924A;margin-left:4px;letter-spacing:.04em;text-transform:uppercase }
.calc-body { padding:16px }
.calc-row { display:flex;flex-direction:column;gap:4px;margin-bottom:12px }
.calc-row label { font-size:10px;font-weight:600;color:#888;letter-spacing:.06em;text-transform:uppercase }
.calc-sel { background:#F5F5F5;border:1.5px solid #E0E0E0;border-radius:7px;padding:8px 10px;font-size:12px;font-weight:600;color:#1a1a1a;display:flex;justify-content:space-between;align-items:center }
.calc-sel span { color:#999;font-size:10px }
.calc-divider { height:1px;background:#F0F0F0;margin:4px 0 12px }
.calc-result { background:#FDF6EC;border:1.5px solid #E8C98A;border-radius:8px;padding:12px }
.calc-result-label { font-size:10px;font-weight:600;color:#A07030;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px }
.calc-result-price { font-size:1.375rem;font-weight:800;color:#4E2F0E }
.calc-result-note { font-size:10px;color:#A07030;margin-top:3px }

/* OpenSpace mock */
.os-mock { background:#0D1117;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.65);width:100% }
.os-bar { background:#161B22;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07) }
.os-bar-left { display:flex;align-items:center;gap:7px }
.os-title { font-size:11px;font-weight:700;color:#fff;margin-left:4px }
.os-title em { font-style:normal;color:#F97316 }
.os-badge { font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);color:#F97316 }
.os-body { padding:14px;display:flex;flex-direction:column;gap:8px }
.os-job { background:#1C2128;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 12px }
.os-job-head { display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:5px }
.os-job-title { font-size:12px;font-weight:700;color:#fff;line-height:1.3 }
.os-job-budget { font-size:10px;font-weight:700;color:#F97316;white-space:nowrap }
.os-job-meta { display:flex;gap:6px;flex-wrap:wrap }
.os-tag { font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:#F97316 }
.os-tag-grey { font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#8B949E }
.os-interested { font-size:9px;color:#8B949E;margin-top:5px }
.os-interested strong { color:#00D4B4 }

/* ─────────────────────────────────────────────  ABOUT  ───────────────────────────────────────────── */
.about-grid { display:grid;grid-template-columns:1.3fr .7fr;gap:5rem;align-items:start;margin-top:2.5rem }
.about-copy h2 { font-size:clamp(2rem,3.4vw,3rem);margin-bottom:1.5rem }
.about-copy p { font-size:1.05rem;color:var(--muted);line-height:1.8;margin-bottom:1.1rem }
.stats { display:grid;grid-template-columns:1fr 1fr;gap:1rem }
.stat { background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius);padding:1.5rem 1.4rem;transition:border-color .2s,background .2s }
.stat:hover { border-color:var(--accent-bd);background:var(--glass-hover) }
.stat-n { font-size:2.2rem;font-weight:800;color:var(--accent);line-height:1;margin-bottom:.4rem }
.stat-l { font-size:.9rem;color:var(--muted) }

/* ─────────────────────────────────────────────  CONTACT  ───────────────────────────────────────────── */
.contact-section { background:var(--surface);border-top:1px solid var(--glass-bd) }
.contact-in { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start }
.contact-copy h2 { font-size:clamp(2rem,3.4vw,3rem);margin-bottom:1.25rem }
.contact-copy p { color:var(--muted);line-height:1.7;margin-bottom:1.5rem;font-size:1.05rem }
.c-detail { display:flex;align-items:center;gap:.85rem;padding:1rem 0;border-bottom:1px solid var(--glass-bd);text-decoration:none;color:var(--text);font-size:1rem;transition:color .15s }
.c-detail:hover { color:var(--accent) }
.c-detail:last-child { border-bottom:none }
.c-icon { width:40px;height:40px;flex-shrink:0;background:var(--accent-dim);border:1px solid var(--accent-bd);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent) }
.form-glass { background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius-lg);padding:2.25rem }
.form { display:flex;flex-direction:column;gap:1.1rem }
.fg { display:flex;flex-direction:column;gap:.4rem }
.fg label { font-size:.9rem;font-weight:600;color:var(--muted) }
.fg input,.fg textarea,.fg select {
  background:rgba(255,255,255,.06);border:1.5px solid var(--glass-bd);border-radius:9px;
  padding:.8rem 1rem;font-size:.95rem;color:var(--text);font-family:inherit;transition:border-color .2s,background .2s;
  width:100%;-webkit-appearance:none;min-height:48px;
}
.fg input:focus,.fg textarea:focus,.fg select:focus { outline:none;border-color:var(--accent);background:rgba(74,144,217,.05) }
.fg select { background-image:url("/assets/select.svg");background-repeat:no-repeat;background-position:right 14px center;padding-right:2.75rem;color-scheme:dark }
.fg select option { background:#27272A;color:var(--text) }
.fg textarea { resize:vertical;min-height:130px }

/* ─────────────────────────────────────────────  FOOTER  ───────────────────────────────────────────── */
footer { border-top:1px solid var(--glass-bd);padding:2.5rem 0;background:rgba(9,9,11,.85) }
.foot-in { display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap }
.foot-logo { font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none }
.foot-logo span { color:var(--accent) }
footer p { font-size:.85rem;color:var(--subtle) }
.foot-links { display:flex;gap:1.5rem;flex-wrap:wrap;list-style:none }
.foot-links a { font-size:.85rem;color:var(--subtle);text-decoration:none;transition:color .15s }
.foot-links a:hover { color:var(--muted) }

/* ─────────────────────────────────────────────  RESPONSIVE (mobile-aware)  ───────────────────────────────────────────── */
@media(max-width:1024px){
  .wrap,.nav-in { padding:0 28px }
  .hero-grid { gap:3rem }
  .offer-grid { gap:1rem }
  .pad { padding:5rem 0 }
}
@media(max-width:900px){
  .nav-links { display:none }
  .nav-burger { display:flex }
  .nav-drawer {
    display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:99;
    background:rgba(9,9,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:1.5rem 28px;flex-direction:column;gap:.5rem;border-top:1px solid var(--glass-bd);
  }
  .nav-drawer.open { display:flex }
  .nav-drawer a { color:var(--text);text-decoration:none;font-size:1.1rem;font-weight:600;padding:1rem 1.25rem;border-radius:12px }
  .nav-drawer a:hover { background:var(--glass);color:var(--accent) }
  .nav-drawer .cta-link { margin-top:.5rem;background:var(--accent);color:#fff!important;font-weight:700;justify-content:center }
  .hero { min-height:auto;padding:4rem 0 3rem }
  .hero-grid { grid-template-columns:1fr;gap:3.5rem }
  .hero-stack { height:380px;max-width:420px }
  .hero h1,.hero-sub { max-width:none }
  .offer-grid { grid-template-columns:1fr;gap:1rem }
  .finish-card { grid-template-columns:1fr;gap:2.5rem;padding:2.5rem }
  .finish-aside { border-left:none;border-top:1px solid var(--glass-bd);padding-left:0;padding-top:2.5rem }
  .project-in { grid-template-columns:1fr;gap:2.5rem }
  .project-in.flip { direction:ltr }
  .mock-wrap { max-width:460px;margin:0 auto }
  .about-grid { grid-template-columns:1fr;gap:2.5rem }
  .contact-in { grid-template-columns:1fr;gap:2.5rem }
}
@media(max-width:640px){
  .wrap,.nav-in { padding:0 20px }
  .strip-in { flex-direction:column;align-items:flex-start;gap:1rem }
  .strip-names { gap:1.25rem }
  .hero-ctas .btn { flex:1 1 auto }
  .stats { grid-template-columns:1fr 1fr }
  .foot-in { flex-direction:column;text-align:center }
}

/* ── Under-the-hood dropdown ── */
.has-menu{position:relative}
.nav-menu-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font:inherit;color:var(--muted);font-size:.9rem;font-weight:500;padding:.5rem .9rem;border-radius:8px;transition:color .15s,background .15s}
.nav-menu-btn:hover{color:var(--text);background:var(--glass)}
.nav-menu-btn svg{transition:transform .2s}
.has-menu:hover .nav-menu-btn svg,.nav-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:316px;background:#0c0c0f;border:1px solid var(--glass-bd);border-radius:14px;padding:8px;box-shadow:0 22px 50px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:120}
.submenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.has-menu:hover .submenu,.nav-menu-btn[aria-expanded="true"] + .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:11px 13px;border-radius:10px;text-decoration:none;transition:background .15s}
.submenu a:hover{background:var(--glass)}
.submenu a strong{display:block;color:var(--text);font-size:.92rem;font-weight:600;margin-bottom:3px}
.submenu a span{display:block;color:var(--subtle);font-size:.8rem;line-height:1.45}
/* mobile drawer group */
.drawer-group{display:flex;flex-direction:column;border-top:1px solid var(--glass-bd);border-bottom:1px solid var(--glass-bd);margin:.4rem 0;padding:.4rem 0}
.drawer-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);font-weight:700;padding:.5rem 1.25rem .35rem}

/* ───────────────────────────  CASE STUDY PAGES (body.case)  ─────────────────────────── */
.case .eye{color:var(--accent-c,var(--accent))}
.case .eye::before{background:var(--accent-c,var(--accent))}
.case .btn-p{background:var(--accent-c,var(--accent))}
.case .btn-p:hover{background:var(--accent-c,var(--accent));filter:brightness(1.1)}
.case .btn-g:hover{border-color:var(--accent-c,var(--accent));color:var(--accent-c,var(--accent))}
.case .chero{position:relative;padding:5.5rem 0 4rem;overflow:hidden;border-bottom:1px solid var(--glass-bd)}
.case .chero::after{content:'';position:absolute;width:720px;height:720px;top:-30%;right:-10%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 62%);pointer-events:none}
.case .chero-in{position:relative;z-index:1;max-width:820px}
.case .chero h1{font-size:clamp(2.5rem,4.6vw,4rem);margin-bottom:1.25rem}
.case .chero h1 em{font-style:normal;color:var(--accent-c,var(--accent))}
.case .chero .lede{font-size:1.25rem;color:var(--muted);max-width:680px;margin-bottom:2rem;line-height:1.6}
.case .chero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.case .chero-meta{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--glass-bd)}
.case .chero-meta div b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--subtle);font-weight:700;margin-bottom:.3rem}
.case .chero-meta div span{font-size:1rem;color:var(--text);font-weight:600}
.case .sec{padding:5.5rem 0}
.case .sec-alt{background:var(--surface);border-top:1px solid var(--glass-bd);border-bottom:1px solid var(--glass-bd)}
.case .sh{max-width:720px;margin-bottom:3rem}
.case .sh h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1rem}
.case .sh p{font-size:1.1rem;color:var(--muted);line-height:1.7}
.case .prose{max-width:760px}
.case .prose p{font-size:1.08rem;color:var(--muted);line-height:1.8;margin-bottom:1.2rem}
.case .prose p:last-child{margin-bottom:0}
.case .prose strong{color:var(--text);font-weight:700}
.case .split{display:grid;grid-template-columns:.82fr 1.18fr;gap:4.5rem;align-items:start}
.case .split .sh{margin-bottom:0;position:sticky;top:90px}
.case .split .sh,.case .split .prose{max-width:none}
.case .clever{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.case .cv{background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius-lg);padding:2rem;transition:.2s}
.case .cv:hover{border-color:var(--accent-bd);background:var(--glass-hover);transform:translateY(-3px)}
.case .cv-n{font-size:.8rem;font-weight:800;color:var(--accent-c,var(--accent));letter-spacing:.08em;margin-bottom:.9rem}
.case .cv h3{font-size:1.2rem;margin-bottom:.6rem}
.case .cv p{font-size:.96rem;color:var(--muted);line-height:1.7}
.case .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1rem}
.case .shot{background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius-lg);overflow:hidden}
.case .shot img{display:block;width:100%;height:auto}
.case .shot-cap{padding:1rem 1.25rem;font-size:.9rem;color:var(--muted);border-top:1px solid var(--glass-bd)}
.case .shot-cap b{color:var(--text);font-weight:700;display:block;margin-bottom:.15rem}
.case .shot.wide{grid-column:1/-1}
.case .shot-ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--subtle);font-size:.85rem;background:repeating-linear-gradient(45deg,rgba(255,255,255,.015),rgba(255,255,255,.015) 12px,transparent 12px,transparent 24px)}
.case .stack{display:flex;gap:.6rem;flex-wrap:wrap}
.case .spill{font-size:.85rem;font-weight:600;padding:.4rem .85rem;border-radius:100px;background:var(--glass);border:1px solid var(--glass-bd);color:var(--muted)}
.case .flist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.3rem 4.5rem;max-width:none}
.case .flist li{display:flex;gap:.7rem;align-items:center;padding:.75rem 0;color:var(--text);font-size:1.02rem;line-height:1.4;border-bottom:1px solid var(--glass-bd)}
.case .flist svg{flex-shrink:0;margin-top:4px;color:var(--accent-c,var(--accent))}
.case .cta{background:linear-gradient(180deg,var(--surface) 0%,#0c0c0f 100%);border-top:1px solid var(--glass-bd)}
.case .cta-in{text-align:center;max-width:680px;margin:0 auto}
.case .cta-in h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1rem}
.case .cta-in p{color:var(--muted);font-size:1.1rem;margin-bottom:2rem;line-height:1.7}
@media(max-width:1024px){.case .sec{padding:4rem 0}.case .chero{padding:4rem 0 3rem}}
@media(max-width:760px){
  .case .clever,.case .shots,.case .flist{grid-template-columns:1fr}
  .case .split{grid-template-columns:1fr;gap:1.5rem}
  .case .split .sh{position:static}
  .case .shot.wide{grid-column:auto}
  .case .chero .lede{font-size:1.1rem}
}

/* ───────────────────────────  ARTICLE / EXPLAINER PAGES  ─────────────────────────── */
.hero-spam{padding:72px 0 32px;text-align:center}
.hero-spam .eye{display:inline-flex;align-items:center;justify-content:center}
.hero-spam h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1.1rem}
.doc .lede{max-width:820px;margin:0 auto;color:var(--muted);font-size:1.12rem}
.doc .sec{padding:52px 0}
.doc .sec h2{font-size:clamp(1.5rem,3.5vw,2.1rem);letter-spacing:-.01em;margin-bottom:.6rem;text-align:center}
.doc .sec .sub{text-align:center;color:var(--subtle);max-width:780px;margin:0 auto 40px}
.analogy{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:940px;margin:0 auto}
@media(max-width:680px){.analogy{grid-template-columns:1fr}}
.acard{background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius);padding:26px 24px}
.acard .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--accent-bd);color:var(--accent-2);margin-bottom:16px}
.acard h3{font-size:1.05rem;margin-bottom:8px}
.acard p{color:var(--muted);font-size:.94rem}
.callout{max-width:920px;margin:0 auto;background:var(--accent-dim);border:1px solid var(--accent-bd);border-radius:var(--radius);padding:28px 30px}
.callout strong{display:block;color:var(--text);font-size:1.1rem;margin-bottom:10px}
.callout p{color:var(--muted);font-size:.96rem;margin:0;line-height:1.72}
.callout p + p{margin-top:14px}
.spec{max-width:920px;margin:0 auto;border:1px solid var(--glass-bd);border-radius:var(--radius);overflow:hidden}
.srow{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:18px 28px;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:none}
.srow:nth-child(odd){background:var(--glass)}
.sk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;color:var(--accent-2);font-weight:600;letter-spacing:.02em;padding-top:3px}
.sv{color:var(--muted);font-size:.92rem;line-height:1.62}
.sv code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;color:var(--text);background:var(--surface2);padding:1px 5px;border-radius:5px}
@media(max-width:600px){.srow{grid-template-columns:1fr;gap:6px;padding:16px 20px}}
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:840px){.layers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.layers{grid-template-columns:1fr}}
.layer{background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius);padding:24px 20px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s,border-color .4s,box-shadow .4s}
.layer.in{opacity:1;transform:none}
.layer.in:hover{border-color:var(--accent-bd);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.layer .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--accent-bd);color:var(--accent-2);margin-bottom:16px}
.layer h3{font-size:1.02rem;margin-bottom:7px}.layer p{font-size:.9rem;color:var(--muted)}
.layer .step{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);font-weight:700;margin-bottom:14px}
.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 40px;max-width:840px;margin:0 auto}
.drow{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.drow:last-of-type{border-bottom:none}
.drow .who{flex:0 0 120px;font-size:.94rem;color:var(--text);font-weight:600}
.drow .track{flex:1;height:10px;background:var(--surface2);border-radius:6px;overflow:hidden}
.drow .track i{display:block;height:100%;width:0;border-radius:6px}
.drow .stat{flex:0 0 auto;min-width:170px;text-align:right;font-size:.84rem;font-weight:700}
.stat.ok{color:#34c759}.stat.bad{color:#ff7a7a}
.demo.in .plain .track i{background:linear-gradient(90deg,#ff8a8a,#ff5a5a);animation:fillFlood 1.6s ease-out .2s forwards}
.demo .ours .track i{background:#34c759;width:0}
.demo.in .ours .track i{width:2%}
@keyframes fillFlood{to{width:100%}}
.demo .cap{margin:26px auto 0;font-size:.92rem;color:var(--subtle);text-align:center;line-height:1.65;max-width:700px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.why{grid-template-columns:1fr}}
.why .card{background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius);padding:24px}
.why .card h3{font-size:1rem;margin-bottom:8px}.why .card p{font-size:.9rem;color:var(--muted)}
.cta-band{margin:30px auto 80px;max-width:840px;text-align:center;background:linear-gradient(160deg,var(--accent-dim),transparent);border:1px solid var(--accent-bd);border-radius:var(--radius-lg);padding:48px 32px}
.cta-band h2{margin-bottom:.7rem}.cta-band p{color:var(--muted);max-width:580px;margin:0 auto 26px}
/* contact form widget */
.powguard{display:flex;align-items:flex-start;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:4px}
.pg-ring{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--accent-dim);border:1px solid var(--accent-bd);color:var(--accent-2);transition:background .5s,border-color .5s,color .5s}
.pg-shield,.pg-check{width:18px;height:18px;position:absolute;transition:opacity .45s ease,transform .45s ease}
.pg-check{opacity:0;transform:scale(.4)}
.powguard[data-state="checking"] .pg-ring{animation:pgpulse 1.2s ease-in-out infinite}
.powguard[data-state="verified"] .pg-ring{background:rgba(52,199,89,.14);border-color:rgba(52,199,89,.55);color:#34c759;animation:none}
.powguard[data-state="verified"] .pg-shield{opacity:0;transform:scale(.4)}
.powguard[data-state="verified"] .pg-check{opacity:1;transform:scale(1)}
@keyframes pgpulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 8px transparent}}
.pg-body{display:flex;flex-direction:column;gap:3px;min-height:34px;justify-content:center}
.pg-title{font-size:13.5px;font-weight:600;color:var(--text);transition:opacity .3s}
.pg-sub{font-size:12px;color:var(--subtle);line-height:1.5;min-height:36px;transition:opacity .3s}
.pg-sub a{color:var(--accent-2);border-bottom:1px solid var(--accent-bd);white-space:nowrap}
.pg-sub a:hover{color:var(--accent)}
.powguard.swap .pg-title,.powguard.swap .pg-sub{opacity:0}
.pg-track{height:3px;border-radius:3px;background:var(--glass);overflow:hidden;margin:0 0 8px;transition:opacity .6s .4s}
.pg-track i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.powguard[data-state="checking"] ~ .pg-track i{animation:pgfill 5s ease-out forwards}
.powguard[data-state="verified"] ~ .pg-track i{width:100%;background:#34c759;transition:width .3s,background .4s}
.powguard[data-state="verified"] ~ .pg-track{opacity:0}
@keyframes pgfill{0%{width:0}85%{width:90%}100%{width:95%}}
.gt-detail{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);text-decoration:none;padding:.6rem 0}
.gt-detail:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.layer,.demo .track i,.pg-ring,.pg-track i{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}.demo .plain .track i{width:100%!important}}

/* ── Security proof band ── */
.secband { background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border) }
.grade-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:2.5rem }
.grade { display:flex;align-items:center;gap:24px;padding:28px 30px;background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius-lg);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s }
.grade:hover { border-color:var(--accent-bd);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3) }
.grade-badge { flex:none;width:84px;height:84px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;font-weight:800;letter-spacing:-.02em;color:#fff;background:linear-gradient(140deg,#1f9d55,#27c26b);border-radius:18px;box-shadow:0 8px 24px rgba(39,194,107,.28) }
.grade-body { display:flex;flex-direction:column;gap:.3rem }
.grade-body strong { font-size:1.18rem;color:var(--text) }
.grade-meta { font-size:.95rem;color:var(--muted) }
.grade-link { display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.92rem;font-weight:600;color:var(--accent-2) }
@media(max-width:680px){
  .grade-grid { grid-template-columns:1fr }
  .grade { gap:18px;padding:22px 22px }
  .grade-badge { width:68px;height:68px;font-size:2.1rem }
}
/* contact hero: keep promoted <h1> visually identical to the prior <h2> */
.contact-copy h1{font-size:clamp(2rem,3.4vw,3rem);max-width:none;margin-bottom:1rem}