:root{
  --ink:#0f172a;
  --ink-soft:#334155;
  --paper:#f7f7f5;
  --card:#ffffff;
  --line:#e6e6e2;
  --accent:#c98a4b;
  --accent-ink:#7a4a1f;
  --warn-bg:#fdf2e9;
  --warn-line:#f0c896;
  --info-bg:#eef4f3;
  --info-line:#bcd8d2;
  --radius:18px;
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  color:#f4f1ea;
  padding:1.25rem 1.25rem 3.5rem;
  min-height:min(88vh,720px);
  display:flex;
  flex-direction:column;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(201,138,75,.35), transparent 60%),
    radial-gradient(70% 55% at 100% 100%, rgba(56,120,110,.4), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.72) 55%, rgba(15,23,42,.94) 100%),
    url("assets/hero-living.jpg");
  background-size:auto,auto,auto,cover;
  background-position:center,center,center,center 35%;
  background-repeat:no-repeat;
  z-index:0;
}
.hero-top, .hero-content{ position:relative; z-index:1; }
.hero-top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:960px; margin:0 auto; width:100%;
}
.brand{ display:flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:.01em; }
.brand-mark{
  display:inline-grid; place-items:center;
  width:2.1rem; height:2.1rem; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),#e7b57e);
  color:#20130a; font-weight:800; font-size:.85rem;
}
.brand-name{ font-size:1rem; }

.lang-switch{ display:flex; border:1px solid rgba(244,241,234,.3); border-radius:999px; padding:3px; gap:2px; }
.lang-btn{
  border:0; background:transparent; color:#f4f1ea; opacity:.65;
  font:inherit; font-weight:700; font-size:.75rem; letter-spacing:.04em;
  padding:.4rem .7rem; border-radius:999px; cursor:pointer;
}
.lang-btn.is-active{ background:#f4f1ea; color:#111c30; opacity:1; }

.hero-content{
  max-width:640px; margin:auto auto 0; width:100%;
  padding-top:3.5rem;
  text-align:left;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  color:#e7b57e; font-weight:700; margin:0 0 .9rem;
}
.hero-content h1{
  font-size:clamp(2rem,6vw,3rem); line-height:1.12; margin:0 0 1rem; font-weight:800;
}
.hero-content h1 span{ color:#e7b57e; }
.hero-sub{ font-size:1.05rem; color:#d9d5c9; max-width:34rem; margin:0 0 1.75rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-weight:700; font-size:.92rem;
  padding:.85rem 1.4rem; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:#1f1206; }
.btn-primary:hover{ opacity:.92; }
.btn-ghost{ border-color:rgba(244,241,234,.4); color:#f4f1ea; }
.btn-ghost:hover{ background:rgba(244,241,234,.1); }

/* ---------- MAIN / STEPS ---------- */
main{ max-width:720px; margin:0 auto; padding:0 1.25rem; }

/* ---------- ARRIVAL MODE ---------- */
.mode-section{ padding:2.5rem 0 0; text-align:center; }
.mode-question{ font-weight:800; font-size:1.05rem; margin:0 0 1rem; }
.mode-switch{
  display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap;
}
.mode-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
  padding:.8rem 1.3rem; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft); box-shadow:var(--shadow);
}
.mode-btn span:first-child{ font-size:1.1rem; }
.mode-btn.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

body[data-mode="walk"] .car-only{ display:none !important; }
.walk-only{ display:none; }
body[data-mode="walk"] .walk-only{ display:block; }
body[data-mode="walk"] #tab-small{ display:block !important; }

.video-section{
  padding:3rem 0 2.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.video-eyebrow{
  display:inline-block; font-weight:800; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--warn-bg);
  border:1px solid var(--warn-line); padding:.35rem .8rem; border-radius:999px;
  margin:0 0 .9rem;
}
.video-section h2{ margin:0 0 .4rem; font-size:1.4rem; font-weight:800; }
.video-section .step-lead{ max-width:32rem; margin:0 auto 1.5rem; }
.route-video{
  width:100%; max-width:360px; border-radius:var(--radius);
  box-shadow:var(--shadow); background:#000; display:block; margin:0 auto;
}

.step{
  padding:3rem 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{ border-bottom:0; }

.step-head{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.step-num{
  flex:none;
  font-weight:800; font-size:.85rem; color:var(--accent-ink);
  background:var(--warn-bg); border:1px solid var(--warn-line);
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:grid; place-items:center;
}
.step-head h2{ margin:0 0 .3rem; font-size:1.5rem; font-weight:800; }
.step-lead{ margin:0; color:var(--ink-soft); }

.callout{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:1rem 1.1rem; border-radius:14px; margin-bottom:1.5rem;
  font-size:.95rem;
}
.callout p{ margin:0; }
.callout-warn{ background:var(--warn-bg); border:1px solid var(--warn-line); color:#6b4322; }
.callout-info{ background:var(--info-bg); border:1px solid var(--info-line); color:#2c4e48; }
.callout-help{ background:#fff; border:1px dashed var(--line); color:var(--ink-soft); }
.callout-help a{
  display:inline-block; margin-left:.4rem; font-weight:800; color:var(--accent-ink);
  text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.callout-icon{ font-size:1.1rem; line-height:1.4; }

.card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow);
}
.card-badge{ font-weight:800; font-size:1rem; margin-bottom:.5rem; }
.card-text{ color:var(--ink-soft); font-size:.9rem; margin:0 0 .5rem; }
.remote-key{
  display:inline-grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:8px;
  background:var(--ink); color:#fff; font-weight:800; margin-bottom:1rem;
}
.card-link{
  display:block; font-weight:700; font-size:.88rem; color:var(--accent-ink);
  text-decoration:none; border-top:1px dashed var(--line); padding-top:.85rem;
}
.card-link:hover{ text-decoration:underline; }

.inline-link{
  display:inline-block; border-top:0; padding-top:0;
  margin-left:.5rem; font-size:.85rem;
}

.tabs{ display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.tab{
  font:inherit; font-weight:700; font-size:.85rem; cursor:pointer;
  padding:.65rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft);
}
.tab.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

.route-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.9rem;
}
.route-list li{
  position:relative; padding-left:2rem; color:var(--ink-soft); font-size:.98rem;
}
.route-list li::before{
  content:"";
  position:absolute; left:0; top:.35rem;
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--accent);
}
.route-list strong{ color:var(--ink); }

.code-chip{
  display:inline-block; margin-left:.4rem;
  font-family:"SFMono-Regular",Consolas,monospace; font-weight:700; letter-spacing:.08em;
  background:var(--ink); color:#fff; padding:.25rem .6rem; border-radius:8px;
}

.keypad-visual{ display:flex; justify-content:center; margin-bottom:1.75rem; }
.keypad-grid{
  display:grid; grid-template-columns:repeat(3,3rem); gap:.5rem;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1rem; box-shadow:var(--shadow);
}
.keypad-grid span{
  display:grid; place-items:center; height:3rem; border-radius:10px;
  background:var(--paper); font-weight:700; color:var(--ink-soft); font-size:.95rem;
}
.keypad-grid .ok{ background:var(--accent); color:#1f1206; }

/* ---------- FOOTER ---------- */
.site-footer{
  max-width:720px; margin:0 auto; padding:3rem 1.25rem 4rem; text-align:center;
}
.footer-help{ font-weight:700; font-size:1.05rem; margin:0 0 1.1rem; }
.footer-brand{ margin:2rem 0 0; font-size:.82rem; color:#8a8a82; }
.footer-credit{ margin:.4rem 0 0; font-size:.78rem; color:#a3a39a; }
.footer-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:var(--accent-ink); }