/* ════════════════════════════════════════════════════════════
   Tapvia — style.css
   ════════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:          #0b0a08;
  --bg-2:        #12100d;
  --bg-3:        #1a1712;
  --line:        rgba(201,168,106,.18);
  --line-strong: rgba(201,168,106,.4);
  --gold:        #c9a86a;
  --gold-bright: #e8cf9a;
  --gold-deep:   #9a7b3f;
  --ink:         #f4efe6;
  --muted:       #a89f8d;
  --red:         #d94040;
  --green:       #4caf50;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'Jost', 'Segoe UI', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html  { scroll-behavior:smooth }
body  { background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.7; overflow-x:hidden }
::selection { background:var(--gold); color:#0b0a08 }
img   { max-width:100%; display:block }
a     { color:inherit; text-decoration:none }
button { font-family:var(--sans) }

/* ── Utilities ── */
.wrap { max-width:1200px; margin:0 auto; padding:0 24px }

.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.eyebrow::before { content:""; width:36px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)) }
.center-eyebrow  { justify-content:center }

h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.15 }

.section { padding:110px 0 }

.section-head { max-width:640px; margin-bottom:64px }
.section-head h2 { font-size:clamp(34px,4.5vw,52px); margin-top:18px }
.section-head h2 em { font-style:italic; color:var(--gold-bright) }
.section-head p { color:var(--muted); margin-top:16px; font-size:16px }
.center-head { text-align:center; margin-left:auto; margin-right:auto }

.section-sub { color:var(--muted); margin-top:16px; font-size:16px }

.gold-text {
  background:linear-gradient(100deg,#9a7b3f,#e8cf9a 45%,#c9a86a 70%,#f5e3b8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold-name { color:var(--gold-bright); font-weight:500 }

/* Reveal animation */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s ease }
.reveal.in { opacity:1; transform:none }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px; font-family:var(--sans); font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  cursor:pointer; transition:.3s; border:1px solid var(--line-strong);
}
.btn-gold { background:linear-gradient(100deg,#9a7b3f,#d8b878,#c9a86a); color:#171207; border:none }
.btn-gold:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(201,168,106,.45) }
.btn-ghost { color:var(--gold-bright); background:transparent }
.btn-ghost:hover { background:rgba(201,168,106,.08); border-color:var(--gold) }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important }

/* ════════ NAV ════════ */
nav { position:fixed; top:0; left:0; right:0; z-index:100; transition:.35s; border-bottom:1px solid transparent }
nav.scrolled { background:rgba(11,10,8,.88); backdrop-filter:blur(14px); border-bottom-color:var(--line) }

.nav-inner { display:flex; align-items:center; justify-content:space-between; height:84px }

.brand { display:flex; align-items:center; gap:14px }
.brand img { width:46px; height:46px; border-radius:10px; border:1px solid var(--line) }
.brand-name { font-family:var(--serif); font-size:26px; letter-spacing:.14em; font-weight:600 }
.brand-name span { color:var(--gold) }
.brand small { display:block; font-family:var(--sans); font-size:9px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin-top:-2px }

.nav-links { display:flex; gap:34px; list-style:none }
.nav-links a { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:.25s; position:relative }
.nav-links a:hover { color:var(--gold-bright) }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:.3s }
.nav-links a:hover::after { width:100% }

.nav-cta { padding:12px 26px }
.burger { display:none; background:none; border:1px solid var(--line); color:var(--gold); width:44px; height:44px; font-size:18px; cursor:pointer }

.mobile-menu { position:fixed; inset:84px 0 auto 0; background:rgba(11,10,8,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); display:none; flex-direction:column; padding:24px; z-index:99 }
.mobile-menu.show { display:flex }
.mobile-menu a { padding:16px 8px; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); transition:.25s }
.mobile-menu a:hover { color:var(--gold-bright) }

/* ════════ HERO ════════ */
header {
  position:relative; min-height:100vh; display:flex; align-items:center; padding:150px 0 80px;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(201,168,106,.09), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(201,168,106,.05), transparent 60%),
    var(--bg);
}
header::before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(201,168,106,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(201,168,106,.04) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; position:relative }

.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); padding:9px 20px; border-radius:100px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); background:rgba(201,168,106,.05);
}
.hero-badge i { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); animation:pulse 2s infinite }
@keyframes pulse { 50% { opacity:.4 } }

h1 { font-size:clamp(44px,6vw,76px); margin:28px 0 24px }
h1 em { font-style:italic }
.hero-sub { color:var(--muted); font-size:17px; max-width:520px }
.hero-ctas { display:flex; gap:18px; margin-top:42px; flex-wrap:wrap }

.hero-stats { display:flex; gap:48px; margin-top:56px; padding-top:32px; border-top:1px solid var(--line) }
.stat b    { font-family:var(--serif); font-size:34px; font-weight:600; color:var(--gold-bright); display:block; line-height:1 }
.stat span { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:block; margin-top:8px }

.hero-visual { position:relative }
.hero-frame { position:relative; border:1px solid var(--line); padding:14px; background:rgba(201,168,106,.03) }
.hero-frame::before, .hero-frame::after { content:""; position:absolute; width:26px; height:26px; border:1px solid var(--gold) }
.hero-frame::before { top:-1px; left:-1px; border-right:none; border-bottom:none }
.hero-frame::after  { bottom:-1px; right:-1px; border-left:none; border-top:none }
.hero-frame img { width:100%; height:520px; object-fit:cover; filter:saturate(.92) }

.float-chip { position:absolute; background:rgba(15,13,10,.9); backdrop-filter:blur(10px); border:1px solid var(--line-strong); padding:14px 22px; display:flex; align-items:center; gap:12px; animation:floaty 5s ease-in-out infinite }
.float-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px var(--gold) }
.float-chip b     { font-size:13px; letter-spacing:.08em; font-weight:500; display:block }
.float-chip small { font-size:11px; color:var(--muted) }
.chip-1 { top:36px; left:-38px }
.chip-2 { bottom:44px; right:-30px; animation-delay:2.5s }
@keyframes floaty { 50% { transform:translateY(-12px) } }

/* ════════ MARQUEE ════════ */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:20px 0 }
.marquee-track { display:flex; white-space:nowrap; animation:scroll 30s linear infinite; width:max-content }
.marquee span { font-family:var(--serif); font-size:19px; letter-spacing:.12em; color:var(--muted); padding:0 34px; font-style:italic }
.marquee span::after { content:"✦"; color:var(--gold); margin-left:64px; font-style:normal; font-size:13px }
@keyframes scroll { to { transform:translateX(-50%) } }

/* ════════ TAP EXPERIENCE ════════ */
.tap-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.tap-title { font-size:clamp(34px,4.5vw,50px); margin-top:18px }
.phone-col { position:relative }

.tap-steps { display:flex; flex-direction:column; margin-top:40px }
.tap-step { display:flex; gap:26px; padding:28px 0; border-bottom:1px solid var(--line) }
.tap-step:first-child { border-top:1px solid var(--line) }
.tap-step .num { font-family:var(--serif); font-size:22px; color:var(--gold); min-width:46px; height:46px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.tap-step h3 { font-size:22px; margin-bottom:6px }
.tap-step p  { color:var(--muted); font-size:15px }

.phone-mock {
  position:relative; margin:0 auto; width:300px;
  border:1px solid var(--line-strong); border-radius:44px; padding:12px;
  background:linear-gradient(160deg,#171410,#0d0c09);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 80px -40px rgba(201,168,106,.35);
}
.phone-screen { border-radius:34px; background:linear-gradient(180deg,#141109,#0b0a08); overflow:hidden; border:1px solid var(--line) }
.profile-cover { height:110px; background:radial-gradient(220px 120px at 50% 0, rgba(201,168,106,.35), transparent), linear-gradient(120deg,#1c160c,#0f0d08) }
.profile-body { padding:0 22px 26px; text-align:center; margin-top:-42px }
.avatar { width:84px; height:84px; border-radius:50%; margin:0 auto; border:2px solid var(--gold); background:url('/assets/logo-mark.png') center/cover; box-shadow:0 10px 30px rgba(0,0,0,.6) }
.profile-body h4 { font-family:var(--serif); font-size:22px; margin-top:14px; font-weight:600 }
.profile-body p  { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:2px }
.profile-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px }
.pa { border:1px solid var(--line); padding:12px 6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.pa.gold { background:linear-gradient(100deg,#9a7b3f,#d8b878); color:#171207; border:none; font-weight:500 }

.tap-ring { position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; background:rgba(11,10,8,.85); backdrop-filter:blur(6px) }
.tap-ring::before { content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(201,168,106,.25); animation:ring 2.4s infinite }
@keyframes ring { from { transform:scale(.8); opacity:1 } to { transform:scale(1.35); opacity:0 } }
.tap-ring span { font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:15px; text-align:center; line-height:1.3 }

/* ════════ ABOUT ════════ */
#about { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center }

.founder-frame { position:relative; border:1px solid var(--line-strong); padding:16px; background:rgba(201,168,106,.03); max-width:420px; margin:0 auto }
.founder-frame::before, .founder-frame::after { content:""; position:absolute; width:28px; height:28px; border:1px solid var(--gold) }
.founder-frame::before { top:-1px; left:-1px; border-right:none; border-bottom:none }
.founder-frame::after  { bottom:-1px; right:-1px; border-left:none; border-top:none }
.founder-photo { width:100%; aspect-ratio:4/5; background:linear-gradient(160deg,#1c160c,#0d0c09); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:120px; color:var(--gold); font-style:italic; border:1px solid var(--line); overflow:hidden }

.founder-caption { text-align:center; margin-top:22px }
.founder-caption b     { font-family:var(--serif); font-size:22px; color:var(--gold-bright); display:block; letter-spacing:.04em }
.founder-caption small { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); display:block; margin-top:6px }

.about-text h2    { font-size:clamp(34px,4.5vw,52px); margin-top:18px }
.about-text h2 em { font-style:italic; color:var(--gold-bright) }
.about-text p     { color:var(--muted); margin-top:20px; font-size:16px }
.about-quote { border-left:2px solid var(--gold); padding:14px 0 14px 24px; margin-top:32px; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); line-height:1.5 }
.about-signature { font-family:var(--serif); font-style:italic; color:var(--gold-bright); margin-top:14px; font-size:16px }

/* ════════ COLLECTION ════════ */
#collection { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }

.prod-featured { display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line-strong); background:var(--bg); margin-bottom:56px; position:relative; overflow:hidden }
.prod-featured::after { content:""; position:absolute; top:0; right:0; width:340px; height:340px; background:radial-gradient(closest-side, rgba(201,168,106,.12), transparent); pointer-events:none }
.prod-featured .img { min-height:420px; background:#000 }
.prod-featured .img img { width:100%; height:100%; object-fit:cover }
.prod-featured .info { padding:56px 54px; display:flex; flex-direction:column; justify-content:center }

.tag { display:inline-block; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#171207; background:linear-gradient(100deg,#c9a86a,#e8cf9a); padding:7px 16px; font-weight:600; width:max-content }
.prod-featured h3 { font-size:38px; margin:22px 0 14px }
.prod-featured .info p { color:var(--muted); font-size:15px }

.price-row { display:flex; align-items:baseline; gap:16px; margin:28px 0 30px }
.price     { font-family:var(--serif); font-size:40px; color:var(--gold-bright); font-weight:600 }
.price-old { color:var(--muted); text-decoration:line-through; font-size:18px }
.off       { font-size:11px; letter-spacing:.2em; color:var(--gold); border:1px solid var(--line-strong); padding:5px 12px; text-transform:uppercase }
.btn-row   { display:flex; gap:14px; flex-wrap:wrap }

.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px }
.prod-card { border:1px solid var(--line); background:var(--bg); transition:.35s; position:relative; display:flex; flex-direction:column }
.prod-card:hover { border-color:var(--gold); transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(0,0,0,.9) }
.prod-card .img { overflow:hidden; aspect-ratio:4/3; background:#000 }
.prod-card .img img { width:100%; height:100%; object-fit:cover; transition:.6s }
.prod-card:hover .img img { transform:scale(1.06) }
.prod-card .badge { position:absolute; top:16px; left:16px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; background:rgba(11,10,8,.85); border:1px solid var(--line-strong); color:var(--gold-bright); padding:6px 14px; backdrop-filter:blur(6px) }
.prod-card .body { padding:26px 24px 28px; display:flex; flex-direction:column; flex:1 }
.prod-card h3    { font-size:23px }
.prod-card .desc { color:var(--muted); font-size:13.5px; margin:8px 0 18px; flex:1 }
.prod-card .p-row { display:flex; align-items:baseline; gap:10px; margin-bottom:18px }
.prod-card .p    { font-family:var(--serif); font-size:26px; color:var(--gold-bright); font-weight:600 }
.prod-card .p-old { font-size:14px; color:var(--muted); text-decoration:line-through }
.prod-card .p-unit { font-size:13px; color:var(--muted) }
.prod-card .btn  { width:100%; padding:13px }

/* ════════ SERVICES ════════ */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.svc { border:1px solid var(--line); padding:44px 38px; background:linear-gradient(170deg,rgba(201,168,106,.04),transparent 40%); transition:.35s; position:relative }
.svc:hover { border-color:var(--gold); transform:translateY(-6px) }
.svc .glyph { font-family:var(--serif); font-size:44px; color:var(--gold); font-style:italic; line-height:1 }
.svc h3 { font-size:24px; margin:22px 0 12px }
.svc p  { color:var(--muted); font-size:14.5px }
.svc .idx { position:absolute; top:30px; right:32px; font-family:var(--serif); font-size:15px; color:var(--muted); letter-spacing:.2em }

/* ════════ USE CASES ════════ */
#usecases { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.uc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.uc { border:1px solid var(--line); padding:40px 36px; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; background:var(--bg); transition:.3s }
.uc:hover { border-color:var(--gold) }
.uc small { font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold) }
.uc h3 { font-size:25px; margin:10px 0 8px }
.uc p  { color:var(--muted); font-size:14px }
.uc .big { position:absolute; top:22px; right:28px; font-family:var(--serif); font-size:54px; color:rgba(201,168,106,.14); font-style:italic }

/* ════════ HOW IT WORKS ════════ */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line) }
.step { padding:46px 34px; border-right:1px solid var(--line); transition:.3s; position:relative }
.step:last-child { border-right:none }
.step:hover { background:rgba(201,168,106,.04) }
.step .n { font-family:var(--serif); font-size:52px; color:transparent; -webkit-text-stroke:1px var(--gold); line-height:1 }
.step h3 { font-size:21px; margin:20px 0 10px }
.step p  { color:var(--muted); font-size:14px }

/* ════════ REVIEWS ════════ */
#reviews { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.rev-top { display:flex; align-items:center; gap:40px; margin-bottom:56px; flex-wrap:wrap }
.rev-score { font-family:var(--serif); font-size:96px; font-weight:600; line-height:1 }
.stars { color:var(--gold); letter-spacing:6px; font-size:19px }
.rev-top p { color:var(--muted); font-size:14px; margin-top:6px }
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.rev { border:1px solid var(--line); padding:36px 32px; background:var(--bg); transition:.3s }
.rev:hover { border-color:var(--line-strong) }
.rev .stars { font-size:14px; letter-spacing:4px }
.rev p { font-family:var(--serif); font-size:19px; font-style:italic; margin:18px 0 24px; line-height:1.5; color:var(--ink) }
.rev .who { display:flex; align-items:center; gap:14px }
.rev .who .av { width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--gold); font-size:19px; background:rgba(201,168,106,.06); flex-shrink:0 }
.rev .who b     { font-weight:500; font-size:14px; letter-spacing:.06em; display:block }
.rev .who small { color:var(--muted); font-size:12px }

/* ════════ FAQ ════════ */
.faq-wrap { max-width:820px; margin:0 auto }
.faq { border-bottom:1px solid var(--line) }
.faq:first-of-type { border-top:1px solid var(--line) }
.faq button { width:100%; background:none; border:none; color:var(--ink); font-family:var(--serif); font-size:23px; text-align:left; padding:30px 60px 30px 4px; cursor:pointer; position:relative; font-weight:500 }
.faq button::after { content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-weight:300; font-size:30px; color:var(--gold); transition:.3s }
.faq.open button::after { transform:translateY(-50%) rotate(45deg) }
.faq .ans { max-height:0; overflow:hidden; transition:max-height .45s ease }
.faq .ans p { color:var(--muted); padding:0 4px 30px; font-size:15.5px; max-width:700px }

/* ════════ CTA + CONTACT ════════ */
.cta {
  position:relative; text-align:center; padding:130px 24px; overflow:hidden;
  background:radial-gradient(700px 340px at 50% 0, rgba(201,168,106,.13), transparent 70%), var(--bg);
}
.cta h2    { font-size:clamp(36px,5vw,60px); max-width:760px; margin:26px auto 20px }
.cta-sub   { color:var(--muted); max-width:520px; margin:0 auto 44px; font-size:16px }
.cta .btns { display:flex; gap:18px; justify-content:center; flex-wrap:wrap }

/* Contact form */
.contact-form-wrap { max-width:640px; margin:48px auto 0; text-align:left }
.contact-form { display:flex; flex-direction:column; gap:20px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.form-group { display:flex; flex-direction:column; gap:8px }
.form-full { grid-column:1 / -1 }
.form-group label { font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); font-weight:400 }
.req { color:var(--gold) }
.opt { color:var(--muted); font-size:9px; letter-spacing:.2em }

.form-group input,
.form-group select,
.form-group textarea {
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:300;
  padding:14px 18px; transition:.3s; outline:none;
  -webkit-appearance:none; border-radius:0; width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--gold); background:var(--bg-3) }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--muted); opacity:.6 }
.form-group select { cursor:pointer; color:var(--ink) }
.form-group select option { background:var(--bg-2) }
.form-group textarea { resize:vertical; min-height:80px }
.form-group input.error,
.form-group select.error { border-color:var(--red) }

.form-actions { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.form-status { text-align:center; margin-top:16px; font-size:14px; letter-spacing:.08em; min-height:24px }
.form-status.success { color:var(--green) }
.form-status.error   { color:var(--red) }

/* ════════ FOOTER ════════ */
footer { border-top:1px solid var(--line); background:var(--bg-2); padding:80px 0 0 }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:56px; padding-bottom:64px }
.foot-grid p  { color:var(--muted); font-size:14px; margin-top:18px; max-width:300px }
.foot-grid h4 { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-family:var(--sans); font-weight:500; margin-bottom:22px }
.foot-grid ul { list-style:none }
.foot-grid li { margin-bottom:12px }
.foot-grid ul a { color:var(--muted); font-size:14px; transition:.25s }
.foot-grid ul a:hover { color:var(--gold-bright) }
.foot-bottom { border-top:1px solid var(--line); padding:26px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.foot-bottom small { color:var(--muted); font-size:12.5px; letter-spacing:.08em }

/* ════════ WhatsApp FAB ════════ */
.wa-fab { position:fixed; bottom:28px; right:28px; z-index:90; width:58px; height:58px; border-radius:50%; background:linear-gradient(120deg,#9a7b3f,#d8b878); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 40px -8px rgba(201,168,106,.5); transition:.3s }
.wa-fab:hover { transform:scale(1.08) }
.wa-fab svg { width:28px; height:28px; fill:#171207 }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
  .hero-grid, .tap-grid, .about-grid { grid-template-columns:1fr; gap:56px }
  .prod-grid { grid-template-columns:repeat(2,1fr) }
  .svc-grid, .uc-grid, .rev-grid { grid-template-columns:1fr 1fr }
  .steps-grid { grid-template-columns:1fr 1fr }
  .step { border-bottom:1px solid var(--line) }
  .foot-grid { grid-template-columns:1fr 1fr }
  .prod-featured { grid-template-columns:1fr }
  .chip-1 { left:0 }
  .chip-2 { right:0 }
}
@media (max-width: 680px) {
  .nav-links, .nav-cta { display:none }
  .burger { display:block }
  .prod-grid, .svc-grid, .uc-grid, .rev-grid, .steps-grid { grid-template-columns:1fr }
  .hero-frame img { height:360px }
  .hero-stats { gap:28px; flex-wrap:wrap }
  .section { padding:80px 0 }
  .prod-featured .info { padding:36px 24px }
  .rev-score { font-size:70px }
  .founder-photo { font-size:80px }
  .form-row { grid-template-columns:1fr }
  .cta { padding:80px 24px }
  .foot-grid { grid-template-columns:1fr }
}