/* ============ BITQUILA — SKEUOMORPHIC THEME ============ */
:root{
  --gold:#d4a017; --gold-hi:#f6d365; --gold-lo:#8a5c00;
  --leather:#2b2118; --panel:#f4ead2; --ink:#2a2118;
  --green:#1e7a4c; --red:#a83232;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Georgia,'Times New Roman',serif;color:var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, #4a3a26 0%, transparent 60%),
    repeating-linear-gradient(45deg,#241c12 0 3px,#2b2118 3px 6px);
  min-height:100vh;
}
/* ---- brushed metal top bar ---- */
.topbar{
  background:linear-gradient(180deg,#e8e2d4 0%,#c9c0a8 40%,#a89e83 60%,#cfc7b2 100%);
  border-bottom:3px solid #6e6350;
  box-shadow:0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 #fff8;
  position:sticky;top:0;z-index:50;
}
.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 20px}
.logo-img{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.brand{font-size:24px;font-weight:bold;letter-spacing:1px;color:#3a2f1d;text-shadow:0 1px 0 #fff9}
.brand small{display:block;font-size:11px;letter-spacing:3px;color:#6e5f42;font-family:Arial,sans-serif}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{
  font-family:Arial,sans-serif;font-size:13px;font-weight:bold;color:#3a2f1d;text-decoration:none;
  padding:9px 16px;border-radius:10px;
  background:linear-gradient(180deg,#f4efe0,#d8cfb6);
  border:1px solid #8a7d5f;box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 #fff;
  text-shadow:0 1px 0 #fffc;
}
nav a:hover{background:linear-gradient(180deg,#fff8e2,#e8d9ae)}
nav a.active{background:linear-gradient(180deg,#c8a24a,#9a7420);color:#fff8e6;text-shadow:0 -1px 0 #0007}
/* ---- hero: dark mine shaft ---- */
.hero{
  max-width:1100px;margin:34px auto;padding:56px 40px;text-align:center;
  background:
    radial-gradient(ellipse at 50% 120%, #6b4e1f55 0%, transparent 60%),
    linear-gradient(180deg,#33291c,#1d150c);
  border-radius:22px;border:2px solid #6e5a34;
  box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 1px 0 #ffffff22;
  position:relative;overflow:hidden;
}
.hero h1{
  font-size:46px;color:#f6d365;letter-spacing:1px;
  text-shadow:0 2px 0 #000, 0 0 26px #d4a01788;margin-bottom:10px;
}
.hero p.tag{color:#e8d9ae;font-size:18px;font-style:italic;margin-bottom:26px}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.badge{
  font-family:Arial,sans-serif;font-size:12px;font-weight:bold;color:#ffe9a8;
  background:linear-gradient(180deg,#5a4a28,#3a2f1c);border:1px solid #8a6f3a;
  padding:8px 16px;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff22, 0 2px 6px #0008;
}
/* ---- realistic 3D button ---- */
.btn3d{
  display:inline-block;font-family:Arial,sans-serif;font-weight:bold;font-size:17px;
  color:#3a2500;text-decoration:none;padding:16px 44px;border-radius:14px;cursor:pointer;border:none;
  background:linear-gradient(180deg,#ffe9a8 0%, var(--gold-hi) 30%, var(--gold) 65%, #a87600 100%);
  box-shadow:0 6px 0 #6e4d00, 0 10px 22px rgba(0,0,0,.55), inset 0 2px 2px #fffb, inset 0 -3px 6px #0004;
  text-shadow:0 1px 0 #ffeeaa;
}
.btn3d:active{transform:translateY(5px);box-shadow:0 1px 0 #6e4d00, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 6px #0005}
.btn3d.ghost{
  background:linear-gradient(180deg,#5c5c5c,#333);color:#f0e6cc;
  box-shadow:0 6px 0 #161616, 0 10px 22px rgba(0,0,0,.55), inset 0 2px 2px #fff3;
  text-shadow:0 -1px 0 #000;
}
.btn3d.ghost:active{box-shadow:0 1px 0 #161616, inset 0 2px 6px #0008}
/* ---- parchment content panels ---- */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.panel{
  background:
    radial-gradient(ellipse at 20% 0%, #fffdf4 0%, transparent 50%),
    linear-gradient(180deg,#f7efdb,#efe2c2);
  border-radius:18px;border:1px solid #b89b5e;
  box-shadow:0 8px 26px rgba(0,0,0,.5), inset 0 2px 0 #fff, inset 0 -3px 8px #b89b5e44;
  padding:38px 36px;margin:30px 0;
}
.panel h2{
  font-size:30px;color:#5c3d00;margin-bottom:6px;
  text-shadow:0 1px 0 #fff;border-bottom:3px double #b89b5e;padding-bottom:12px;
}
.panel h2 .ico{margin-right:10px}
.panel p.lead{font-style:italic;color:#6e5a34;margin-bottom:20px}
/* ---- feature cards: brass plates ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.card{
  background:linear-gradient(180deg,#fbf5e3,#ecd9a8);
  border:2px solid #a8842f;border-radius:14px;padding:22px 18px;
  box-shadow:0 5px 14px rgba(0,0,0,.35), inset 0 2px 0 #fff, inset 0 -4px 8px #a8842f33;
  position:relative;
}
.card::before{ /* screws */
  content:"";position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eee,#888 60%,#444);
  box-shadow:calc(100% + 196px) 0 0 -0px #0000;
}
.card h3{font-size:17px;color:#5c3d00;margin-bottom:8px}
.card h3 .e{font-size:24px;margin-right:8px;vertical-align:middle}
.card p{font-family:Arial,sans-serif;font-size:13.5px;line-height:1.65;color:#4a3d28}
/* ---- steps: numbered brass tokens ---- */
.steps{counter-reset:st;margin-top:20px}
.step{
  display:flex;gap:18px;align-items:flex-start;margin:16px 0;padding:18px;
  background:linear-gradient(180deg,#fffdf4,#f2e5c4);border:1px solid #c2a15c;border-radius:12px;
  box-shadow:inset 0 2px 6px #0002, 0 3px 8px rgba(0,0,0,.2);
}
.step::before{
  counter-increment:st;content:counter(st);flex:0 0 46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 60%,var(--gold-lo));
  border:2px solid #8a5c00;color:#4a2f00;font-weight:bold;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 6px rgba(0,0,0,.4), inset 0 1px 2px #fff9;
}
.step h4{font-size:16px;color:#5c3d00;margin-bottom:4px}
.step p{font-family:Arial,sans-serif;font-size:13.5px;color:#4a3d28;line-height:1.6}
/* ---- pricing: wooden crates ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:24px}
.plan{
  border-radius:16px;padding:28px 22px;text-align:center;position:relative;
  background:
    repeating-linear-gradient(90deg,#6e4f2a 0 14px,#644625 14px 28px),
    #6e4f2a;
  border:3px solid #3f2c14;
  box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 2px 0 #ffffff33, inset 0 -6px 12px #0007;
  color:#f4e8c8;
}
.plan.featured{transform:scale(1.05);border-color:var(--gold-hi);box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 30px #d4a01755, inset 0 2px 0 #ffffff44}
.plan .ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#c83232,#7a1a1a);color:#ffe;padding:5px 18px;border-radius:12px;
  font-family:Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;
  box-shadow:0 3px 8px rgba(0,0,0,.5);border:1px solid #ffb3b3;
}
.plan h3{font-size:22px;color:#ffe9a8;text-shadow:0 2px 0 #000;margin-bottom:6px}
.plan .price{font-size:38px;font-weight:bold;color:#fff;text-shadow:0 2px 0 #000;margin:8px 0}
.plan .per{font-family:Arial,sans-serif;font-size:12px;color:#d8c491}
.plan ul{list-style:none;margin:18px 0;font-family:Arial,sans-serif;font-size:13px;line-height:2}
.plan ul li::before{content:"✔ ";color:#9fe6a0}
/* ---- stitched disclosure plate ---- */
.disclosure{
  background:#3a2c1c;color:#e8d5a8;border-radius:14px;padding:26px 28px;margin-top:26px;
  border:2px dashed #8a6f3a;box-shadow:inset 0 0 30px #0009;
}
.disclosure h3{color:#f6d365;margin-bottom:12px;font-size:18px}
.disclosure ul{font-family:Arial,sans-serif;font-size:13.5px;line-height:1.9;padding-left:20px}
/* ---- FAQ: file cards ---- */
.faq{margin-top:18px}
.faq details{
  background:linear-gradient(180deg,#fffdf4,#f0e2c0);border:1px solid #b89b5e;border-radius:10px;
  margin:10px 0;padding:16px 20px;box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.faq summary{font-weight:bold;color:#5c3d00;cursor:pointer;font-size:16px}
.faq p{font-family:Arial,sans-serif;font-size:13.5px;color:#4a3d28;margin-top:10px;line-height:1.7}
/* ---- footer: dark metal plate ---- */
footer{
  background:linear-gradient(180deg,#3a3a3a,#1c1c1c);border-top:3px solid #6e6350;
  box-shadow:inset 0 2px 0 #ffffff22;color:#c9bfa8;padding:36px 20px;text-align:center;
  font-family:Arial,sans-serif;font-size:13px;
}
footer a{color:#f6d365;text-decoration:none;margin:0 12px}
footer a:hover{text-decoration:underline}
footer .fine{margin-top:14px;font-size:11.5px;color:#8a8272}
/* policy doc */
.doc{max-width:780px;margin:34px auto;background:#fffdf4;border-radius:16px;padding:40px 38px;
  border:1px solid #b89b5e;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.doc h1{font-size:28px;color:#5c3d00;margin-bottom:4px}
.doc .updated{font-family:Arial,sans-serif;font-size:12px;color:#8a7a5c;margin-bottom:24px}
.doc h2{font-size:19px;color:#0B7A55;margin:26px 0 10px}
.doc p,.doc li{font-family:Arial,sans-serif;font-size:14px;color:#333;line-height:1.75;margin-bottom:10px}
.doc ul{padding-left:22px}
.doc a{color:#0E9F6E}
.doc .hl{background:#FFF9E8;border:1px solid #f0d98a;border-radius:10px;padding:14px 16px;margin:14px 0}
/* ============ MOBILE RESPONSIVE ============ */
@media(max-width:640px){
  .topbar-inner{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .logo-img{width:44px;height:44px;flex-basis:44px}
  .brand{font-size:20px}
  nav{margin-left:0;width:100%;justify-content:flex-start}
  nav a{font-size:12px;padding:8px 12px}
  .hero{margin:20px 12px;padding:36px 20px;border-radius:16px}
  .hero h1{font-size:30px;line-height:1.25}
  .hero p.tag{font-size:15px}
  .btn3d{font-size:15px;padding:14px 28px;width:100%;max-width:340px}
  .panel{padding:26px 18px;margin:20px 0}
  .panel h2{font-size:23px}
  .cards{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan.featured{transform:none}
  .step{padding:14px;gap:12px}
  .doc{margin:20px 12px;padding:28px 20px}
  .doc h1{font-size:23px}
  footer a{display:inline-block;margin:6px 10px}
}
@media(max-width:380px){
  .hero h1{font-size:25px}
  .brand{font-size:17px}
  .brand small{font-size:9px;letter-spacing:2px}
}