/* Drukkie — pioneertechgames.co.za/drukkie/
   Deliberately plainer than the game site. The audience skews older, so the
   priorities here are contrast, generous type and short line lengths rather
   than atmosphere. */

:root{
  --green:#2b6b4f;
  --green-dark:#1f5039;
  --green-tint:#e6efe8;
  --bg:#f2efe8;
  --card:#fffdf9;
  --ink:#17181a;
  --ink-soft:#5d574e;
  --line:#ddd7ca;
  --sand:#c99f4f;
  --radius:18px;
  --shadow:0 2px 14px rgba(30,28,24,.09);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{width:min(1060px,92vw);margin:0 auto;}
a{color:var(--green-dark);}
img{max-width:100%;display:block;}

h1,h2,h3{font-family:"Poppins","Nunito Sans",system-ui,sans-serif;line-height:1.18;margin:0 0 .5em;}
h1{font-size:clamp(34px,5.4vw,54px);font-weight:700;letter-spacing:-.01em;}
h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;}
h3{font-size:21px;font-weight:600;}
p{margin:0 0 1em;max-width:62ch;}

.eyebrow{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-bottom:.7em;
}

/* ---------------------------------------------------------------- nav */
.site-nav{
  background:var(--green);color:#fff;position:sticky;top:0;z-index:40;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.site-nav .wrap{display:flex;align-items:center;gap:18px;padding:12px 0;}
.site-nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-right:auto;}
.site-nav .brand img{width:42px;height:42px;border-radius:11px;}
.brand-name{font-family:"Poppins",sans-serif;font-weight:700;font-size:20px;line-height:1.05;}
.brand-name small{display:block;font-weight:500;font-size:11.5px;opacity:.75;letter-spacing:.06em;text-transform:uppercase;}
.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.nav-links a{
  color:#fff;text-decoration:none;font-size:15.5px;font-weight:600;
  padding:9px 13px;border-radius:10px;display:block;
}
.nav-links a:hover{background:rgba(255,255,255,.14);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;}
.nav-toggle i{display:block;width:24px;height:2.5px;background:#fff;margin:5px 0;border-radius:2px;}

@media(max-width:820px){
  .nav-toggle{display:block;}
  .nav-links{
    display:none;width:100%;flex-direction:column;gap:2px;
    padding:8px 0 4px;order:3;
  }
  .site-nav.open .nav-links{display:flex;}
}

/* --------------------------------------------------------------- hero */
.hero{background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;padding:60px 0 56px;}
.hero .eyebrow{color:rgba(255,255,255,.72);}
.hero h1{color:#fff;}
.hero .lead{font-size:20.5px;color:rgba(255,255,255,.9);max-width:56ch;}
.hero-grid{display:grid;grid-template-columns:1fr 260px;gap:36px;align-items:center;}
.hero-grid img{filter:drop-shadow(0 8px 24px rgba(0,0,0,.28));}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-grid .art{max-width:200px;margin:6px auto 0;}
}

.btn{
  display:inline-block;padding:14px 24px;border-radius:13px;text-decoration:none;
  font-weight:700;font-size:17px;border:2px solid transparent;
}
.btn-primary{background:#fff;color:var(--green-dark);}
.btn-primary:hover{background:var(--green-tint);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-solid{background:var(--green);color:#fff;}
.btn-solid:hover{background:var(--green-dark);}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}

/* ------------------------------------------------------------ content */
section{padding:58px 0;}
.section-head{margin-bottom:34px;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.card h3{margin-bottom:.35em;}
.card p{margin-bottom:0;color:var(--ink-soft);font-size:17px;}
.card .pip{
  width:44px;height:44px;border-radius:12px;background:var(--green-tint);
  color:var(--green-dark);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:19px;margin-bottom:14px;
}

.band{background:var(--green-tint);}
.band .card{background:var(--card);}

.promise{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.promise b{display:block;font-size:18px;}
.promise span{color:var(--ink-soft);font-size:17px;}
.tick{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;margin-top:3px;
}

/* -------------------------------------------------------- legal pages */
.doc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,4vw,46px);box-shadow:var(--shadow);max-width:820px;
}
.doc h2{font-size:24px;margin-top:1.7em;}
.doc h2:first-of-type{margin-top:.3em;}
.doc ul{max-width:62ch;padding-left:1.2em;}
.doc li{margin-bottom:.5em;}
.doc .updated{
  font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:8px;
}
.langbar{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
.langbar a{
  text-decoration:none;font-weight:700;font-size:15px;padding:9px 16px;
  border-radius:10px;background:var(--green-tint);color:var(--green-dark);
}
.langbar a:hover{background:var(--green);color:#fff;}
.note{
  background:var(--green-tint);border-left:4px solid var(--green);
  padding:16px 20px;border-radius:0 12px 12px 0;margin:22px 0;
}
.note p{margin:0;}

/* ------------------------------------------------------------- footer */
footer{background:var(--green-dark);color:rgba(255,255,255,.82);padding:44px 0 30px;margin-top:10px;}
footer .wrap{display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between;}
footer a{color:#fff;}
footer .brand{display:flex;align-items:center;gap:12px;}
footer .brand img{width:40px;height:40px;border-radius:11px;}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.foot-links a{text-decoration:none;font-weight:600;font-size:16px;}
.foot-links a:hover{text-decoration:underline;}
.fsmall{font-size:15px;opacity:.75;}