/* Arcane Accountants — minimal, dark, elite */
:root{
  --bg:#0a0e16;
  --bg-2:#0c1324;
  --ink:#d9e7ff;
  --muted:#9fb0c8;
  --brand:#6aa4ff;
  --accent:#7afff0;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.04);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.5; letter-spacing:.2px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1100px, 92vw); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:auto}
.skip:focus{left:16px; top:16px; background:#000; color:#fff; padding:8px 12px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,14,22,.85), rgba(10,14,22,0));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line)
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.6px}
.brand .wordmark{font-size:18px}
.brand .thin{opacity:.65; margin-left:4px; font-weight:400}
.logo{filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}

.nav{display:flex; gap:22px; font-size:14px; opacity:.95}
.nav a{padding:6px 8px; border-radius:10px; transition:transform .2s ease, background .2s}
.nav a:hover{background:var(--glass); transform:translateY(-1px)}

/* Hero */
.hero{position:relative; overflow:hidden; min-height:88vh; display:grid; place-items:center; border-bottom:1px solid var(--line)}
.bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.24; filter:saturate(40%) contrast(110%) brightness(80%); pointer-events:none}
.bg-video.desktop{display:block}
.bg-video.mobile{display:none}
.grain{
  position:absolute; inset:-20%; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%222%22 stitchTiles=%22stitch%22/><feColorMatrix type=%22saturate%22 values=%220%22/><feComponentTransfer><feFuncA type=%22table%22 tableValues=%220 0.10%22/></feComponentTransfer></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 /></svg>');
  mix-blend-mode:soft-light; opacity:.3
}
.hero-inner{padding:18vh 0 14vh; text-align:center}
.headline{font-size: clamp(28px, 4vw, 52px); line-height:1.1; margin:0 0 16px; letter-spacing:.2px}
.tagline{max-width:760px; margin:0 auto 28px; color:var(--muted); font-size: clamp(15px, 2.1vw, 18px)}
.cta-row{display:flex; gap:14px; justify-content:center}
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  border:1px solid var(--line); backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease; font-weight:600
}
.btn-primary{
  background:linear-gradient(180deg, rgba(122,255,240,.12), rgba(122,255,240,.04));
  border-color:rgba(122,255,240,.35)
}
.btn-primary:hover{transform:translateY(-2px); border-color:rgba(122,255,240,.6)}

/* Creds */
.cred{margin-top:24px; display:flex; gap:14px; justify-content:center; color:#c7d7ff85; font-size:13px}

/* Sections / Cards */
.section{padding:66px 0; border-top:1px solid var(--line)}
.section-contrast{background:linear-gradient(180deg, var(--bg), var(--bg-2))}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)
}
.split{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start}
.ticks{list-style:none; padding:0; margin:12px 0 0}
.ticks li{position:relative; padding-left:26px; margin:10px 0}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%)
}

/* Contact */
.contact{text-align:center}
.muted{color:var(--muted)}
.contact-cards{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px; margin-top:14px}
.contact-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  transition:transform .2s ease, border-color .2s ease
}
.contact-card:hover{transform:translateY(-2px); border-color:rgba(122,255,240,.45)}
.contact-card .label{display:block; font-size:13px; color:var(--muted); margin-bottom:2px}
.contact-card .value{font-size:16px; font-weight:600; letter-spacing:.3px}

/* Footer */
.footer-grid{
  display:flex; gap:16px; justify-content:space-between; padding:24px 0;
  color:#a9b9d3; border-top:1px solid var(--line); font-size:13px; flex-wrap:wrap
}

/* Responsiveness */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-inner{padding:18vh 0 12vh}
}
@media (max-width:640px){
  .bg-video.desktop{display:none}
  .bg-video.mobile{display:block}
}
@media (prefers-reduced-motion: reduce){
  .bg-video{ display:none !important; }
}

/* Prevent accidental sideways scrolling on mobile */
html, body { max-width: 100%; overflow-x: hidden; }

/* Mobile nav */
.menu-toggle{
  display:none; appearance:none; border:1px solid var(--line); background:var(--glass); color:var(--ink);
  width:40px; height:40px; border-radius:12px; align-items:center; justify-content:center
}
@media (max-width:640px){
  .site-header .wrap { gap:10px; }
  .brand .wordmark { font-size:16px; }
  .brand .thin { display:none; }

  .menu-toggle { display:inline-flex; }
  .nav{
    position:absolute; right:16px; top:56px; display:none; flex-direction:column; gap:10px;
    padding:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; z-index:60
  }
  .nav.open{ display:flex; }
  .nav a{ padding:10px 12px; border-radius:10px; }
}

/* ---------- Map section ---------- */
.map-head{
  margin-bottom:1rem; display:flex; gap:1rem; align-items:end;
  justify-content:space-between; flex-wrap:wrap
}
.map-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Map buttons — Arcane accent styling */
.btn.btn-ghost{
  background:transparent;
  border:1px solid rgba(122,255,240,.45);
  color:#7afff0;
  padding:.6rem .9rem; border-radius:12px; font-weight:600;
  transition:all .2s ease
}
.btn.btn-ghost:hover{
  border-color:rgba(122,255,240,.75);
  background:rgba(122,255,240,.08);
  transform:translateY(-1px)
}
.btn.btn-faint{
  background:linear-gradient(180deg, rgba(122,255,240,.15), rgba(122,255,240,.06));
  border:1px solid rgba(122,255,240,.35); color:#7afff0;
  padding:.6rem .9rem; border-radius:12px; font-weight:600; transition:all .2s ease
}
.btn.btn-faint:hover{
  background:linear-gradient(180deg, rgba(122,255,240,.25), rgba(122,255,240,.1));
  border-color:rgba(122,255,240,.6);
  transform:translateY(-1px)
}
/* Accent button for mobile chip */
.btn.btn-accent{
  background:linear-gradient(180deg, rgba(122,255,240,.25), rgba(122,255,240,.12));
  border:1px solid rgba(122,255,240,.5); color:#7afff0;
  padding:.4rem .8rem; border-radius:10px; font-weight:600; transition:all .2s ease
}
.btn.btn-accent:hover{
  background:linear-gradient(180deg, rgba(122,255,240,.35), rgba(122,255,240,.18));
  border-color:rgba(122,255,240,.75); transform:translateY(-1px)
}
.btn.small{ padding:.4rem .6rem; font-size:.85rem; border-radius:10px; }

/* Map card / container */
.map-card{
  position:relative; height:380px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  background:#0a0e16
}
@media (min-width:640px){ .map-card{ height:430px; } }

/* If an iframe is ever used again, it will still look fine */
.map-card iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:saturate(.95) contrast(1.02)
}

/* Optional glow/vignette overlay (kept for vibe if you re-enable) */
.map-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(1200px 600px at 20% 120%, rgba(12,229,255,.08), transparent 70%);
  mix-blend-mode:overlay
}

/* Mobile chip overlay */
.map-chip{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(122,255,240,.25);
  box-shadow:0 0 12px rgba(122,255,240,.15)
}
@media (min-width:640px){ .map-chip{ display:none; } }
.small{ font-size:.85rem; }

/* Map render target */
#arcane-map{
  width:100%; height:380px; border-radius:18px
}
@media (min-width:640px){ #arcane-map{ height:430px; } }