/* D&D Servicefix – minimal, performant, no external assets required */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}
:root{
  --bg:#0a0a0a;--bg2:#111111;--card:#1a1a2e;--card2:#16213e;--text:#e9e9ee;--muted:#b6b6c6;
  --primary:#8B00FF;--primary2:#7C3AED;--primary3:#6D28D9;--accent:#A855F7;--accent2:#C026D3;
  --border:rgba(255,255,255,.08);--shadow:0 12px 35px rgba(0,0,0,.45);--shadowSoft:0 10px 30px rgba(124,58,237,.15);
  --wa:#25D366;--ring:0 0 0 3px rgba(168,85,247,.35);
  --radius:18px;--radiusSm:14px;--max:1180px;
  --font: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  --t: all .3s ease;
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg:#f8f9ff;--bg2:#ffffff;--card:#ffffff;--card2:#ffffff;--text:#13131a;--muted:#4b4b59;
  --border:rgba(17,17,17,.10);--shadow:0 12px 35px rgba(17,17,17,.12);--shadowSoft:0 10px 30px rgba(124,58,237,.18);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:radial-gradient(900px 500px at 20% 0%, rgba(124,58,237,.16), transparent 55%),
             radial-gradient(900px 500px at 80% 10%, rgba(192,38,211,.12), transparent 55%),
             linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  transition:var(--t);
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.skip-link{
  position:absolute;left:12px;top:12px;z-index:9999;
  padding:10px 12px;border-radius:12px;background:var(--card);
  border:1px solid var(--border);transform:translateY(-200%);
  transition:var(--t);text-decoration:none
}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:var(--ring)}

/* Navbar */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:2000;
  background:rgba(10,10,10,.75);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
  transition:var(--t);
}
html[data-theme="light"] .nav{background:rgba(248,249,255,.85)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(139,0,255,.22), rgba(192,38,211,.10));
  border:1px solid var(--border);box-shadow:var(--shadowSoft)
}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  padding:10px 10px;border-radius:12px;
  transition:var(--t);
}
.nav-links a:hover,.nav-links a:focus{color:var(--text);background:rgba(124,58,237,.12);outline:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  height:42px;min-width:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  cursor:pointer;
  transition:var(--t);
}
html[data-theme="light"] .icon-btn{background:linear-gradient(180deg, rgba(17,17,17,.04), rgba(17,17,17,.02))}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadowSoft)}
.icon-btn:focus{outline:none;box-shadow:var(--ring)}
.hamburger{display:none}

/* Mobile menu */
.mobile-panel{display:none}
@media (max-width: 860px){
  .nav-links{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .mobile-panel{
    display:none;
    padding:10px 0 16px 0;
  }
  .mobile-panel[aria-hidden="false"]{display:block}
  .mobile-panel a{
    display:block;text-decoration:none;
    padding:14px 12px;border-radius:14px;
    color:var(--muted);
  }
  .mobile-panel a:hover,.mobile-panel a:focus{background:rgba(124,58,237,.12);color:var(--text);outline:none}
}

/* Main */
main{padding-top:92px}
section{padding:54px 0}
.section-title{
  font-size:clamp(30px,4.3vw,54px);
  line-height:1.05;
  margin:0 0 12px 0;
  font-weight:900;
  letter-spacing:-.6px;
  color:var(--accent);
}
.section-lead{margin:0 0 26px 0;color:var(--muted);max-width:65ch}

/* Hero */
.hero{padding:40px 0 58px}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap:26px;
  align-items:center;
}
.hero-grid > *{min-width:0}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(124,58,237,.10);
  color:var(--muted);
  width:fit-content;
}
.hero-title{
  margin:14px 0 12px 0;
  font-size:clamp(36px,5.2vw,66px);
  line-height:1.02;
  letter-spacing:-1px;
  font-weight:950;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.hero-title .accent{color:var(--primary2)}
.hero-slogan{margin:0 0 22px 0;color:var(--muted);font-size:18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:700;
  transition:var(--t);
  cursor:pointer;
}
.btn:focus{outline:none;box-shadow:var(--ring)}
.btn-wa{
  background:linear-gradient(180deg, rgba(37,211,102,.96), rgba(19,170,79,.96));
  border-color:rgba(37,211,102,.38);
  color:#07140b;
}
.btn-wa:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(37,211,102,.18)}
.btn-outline{
  background:transparent;
  border-color:rgba(124,58,237,.55);
  color:var(--text);
}
.btn-outline:hover{transform:translateY(-1px);box-shadow:var(--shadowSoft);background:rgba(124,58,237,.10)}
.hero-card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  padding:18px;
}
html[data-theme="light"] .hero-card{background:linear-gradient(180deg, rgba(17,17,17,.03), rgba(17,17,17,.01))}
.hero-logo{
  width:100%;
  border-radius:16px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  padding:12px;
}
.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pill{
  padding:12px 12px;border-radius:14px;border:1px solid var(--border);
  background:rgba(124,58,237,.08);
}
.pill b{display:block;color:var(--text)}
.pill span{display:block;color:var(--muted);font-size:13px;margin-top:2px}

@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
}

/* Cards / grids */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadowSoft);
  padding:18px;
  transition:var(--t);
}
html[data-theme="light"] .card{background:linear-gradient(180deg, rgba(17,17,17,.03), rgba(17,17,17,.01))}
.card:hover{transform:translateY(-2px);z-index:2}
.badge{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(139,0,255,.28), rgba(192,38,211,.14));
  border:1px solid rgba(168,85,247,.35);
  margin-bottom:12px;
}
.card h3{margin:0 0 6px 0;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.price{margin-top:12px;color:var(--accent);font-weight:800}
.note{margin-top:10px;color:var(--muted);font-size:13px}

/* About */
.about{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}
.about .card{height:100%}
@media (max-width: 900px){.about{grid-template-columns:1fr}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width: 900px){.contact-grid{grid-template-columns:1fr}}
.card .cta-row{margin-top:14px}
.map-link{display:inline-flex;align-items:center;gap:10px}
.form{
  margin-top:14px;
  border-top:1px dashed var(--border);
  padding-top:18px;
}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 680px){.fields{grid-template-columns:1fr}}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 0}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  transition:var(--t);
}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:rgba(17,17,17,.02)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:rgba(168,85,247,.45)}
.field{margin-bottom:10px}
.field .error{margin-top:6px;color:#ff98b4;font-size:12px;display:none}
.field[data-invalid="true"] .error{display:block}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:rgba(255,152,180,.65)}
.checkbox{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.checkbox input{width:18px;height:18px;margin-top:2px}
.muted{color:var(--muted)}
.success{
  display:none;
  margin-top:12px;
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(37,211,102,.35);
  background:rgba(37,211,102,.12);
  color:var(--text);
}
.success[aria-hidden="false"]{display:block}
.btn-submit{width:100%;margin-top:10px;background:linear-gradient(180deg, rgba(124,58,237,.95), rgba(109,40,217,.95));border-color:rgba(124,58,237,.45)}
.btn-submit:hover{transform:translateY(-1px)}
.btn-submit[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Footer */
.footer{padding:34px 0;border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
html[data-theme="light"] .footer{background:rgba(17,17,17,.02)}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}
.footer h4{margin:0 0 10px 0;color:var(--accent);letter-spacing:-.2px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover,.footer a:focus{color:var(--text);outline:none}
.fineprint{margin-top:18px;color:var(--muted);font-size:12px}

/* WhatsApp floating button */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:2500;
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(37,211,102,.98), rgba(19,170,79,.98));
  border:1px solid rgba(37,211,102,.35);
  box-shadow:0 14px 36px rgba(37,211,102,.18);
  transition:var(--t);
}
.wa-float:hover{transform:translateY(-2px)}
.wa-float:focus{outline:none;box-shadow:var(--ring)}

/* Utility */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}