:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#666; --border:#eaeaea; --brand:#111;
  --accent:#d71f1f; --card:#fafafa; --shadow:0 10px 30px rgba(0,0,0,.06); --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0b0c; --fg:#f5f7fa; --muted:#a5acb8; --border:#1c1e22; --brand:#fafafa; --card:#111214; --shadow:0 10px 30px rgba(0,0,0,.3); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}

.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px);
     background: var(--glassbg); border-bottom:1px solid var(--border);}
.nav .inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px;}
.logo img{width:28px; height:28px}
.nav a.btn{padding:.6rem .9rem; border:1px solid var(--border); border-radius:12px; font-weight:600; transition:transform .15s, background .15s}
.nav a.btn:hover{transform:translateY(-1px)}
.hero{padding:72px 0 40px}
.hero h1{font-size: clamp(28px, 5vw, 54px); line-height:1.05; margin:0 0 16px; letter-spacing:-.5px; font-weight:800;}
.grad{background: linear-gradient(90deg, var(--fg), var(--accent) 60%, var(--fg)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{max-width:820px; color:var(--muted); font-size:18px; margin:0 0 24px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.badge{font-size:13px; padding:.4rem .7rem; border:1px solid var(--border); border-radius:999px; color:var(--muted);
  background: var(--badgebg);}
.cta{display:flex; gap:12px; margin-top:8px}
.btn{padding:.9rem 1.1rem; border-radius:14px; font-weight:700; border:1px solid var(--border);
  background:var(--fg); color:var(--bg); box-shadow:var(--shadow); transition: transform .15s ease, opacity .2s ease;}
.btn.secondary{background:transparent; color:var(--fg)}
.btn[aria-disabled="true"]{opacity:.6; cursor:not-allowed}
.btn:hover{transform:translateY(-1px)}
.section{padding:60px 0}
.section h2{font-size: clamp(22px, 3vw, 34px); margin:0 0 10px}
.section p.lead{color:var(--muted); margin:0 0 30px; max-width:900px}
.grid{display:grid; gap:16px; grid-template-columns: repeat(12, 1fr);}
.card{grid-column: span 12; border:1px solid var(--border); border-radius:var(--radius); background:var(--card);
  padding:20px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease;}
.card:hover{transform: translateY(-2px)}
.card small{color:var(--muted)}
.chip{font-size:12px; padding:.25rem .55rem; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.ghost-link{position:absolute; inset:0; pointer-events:none;}
@media(min-width:720px){ .col-6{grid-column: span 6} .col-4{grid-column: span 4} }
@media(min-width:1024px){ .col-3{grid-column: span 3} }
.story{border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:24px; box-shadow:var(--shadow)}
.quote{font-size:18px; font-weight:600; margin:0 0 8px;}
.muted{color:var(--muted)}
footer{border-top:1px solid var(--border); padding:24px 0; color:var(--muted); font-size:14px}
.links{display:flex; gap:18px; flex-wrap:wrap}
.cookie{position:fixed; inset:auto 16px 16px auto; max-width:420px; z-index:80;
  border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow);
  padding:14px 16px; font-size:14px; display:flex; gap:12px; align-items:flex-start;}
.cookie .actions{display:flex; gap:8px; margin-left:auto}


/* --- Form Styling --- */
.form{
  display:grid; gap:14px;
}
.input, .select, .textarea, .checkbox{
  width:100%; padding:.8rem .9rem; border:1px solid var(--border);
  border-radius:12px; background:var(--bg); color:var(--fg);
}
.textarea{ min-height:140px; }
label.form-label{ font-weight:600; font-size:14px; }
.hint{ font-size:12px; color:var(--muted); }
.row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:720px){
  .row-2{ grid-template-columns:1fr 1fr; }
  .row-3{ grid-template-columns:1fr 1fr 1fr; }
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.helper{ font-size:13px; color:var(--muted); margin-top:6px; }
button.btn.small{ padding:.6rem .9rem; border-radius:10px; }
    
/* iPhone/Safari fixes */
html, body { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
:root{ --glassbg: rgba(255,255,255,0.85); --badgebg: var(--card); }
@media (prefers-color-scheme: dark){
  :root{ --glassbg: rgba(11,11,12,0.8); --badgebg: #151618; }
}
.cta{ flex-wrap: wrap; }
input, select, textarea { font-size: 16px; } /* prevent iOS zoom */


/* --- Header polish & mobile nav --- */
.nav{
  background: var(--glassbg);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.nav .links{ display:flex; gap:12px; align-items:center; }
@media (max-width: 680px){
  .nav .inner{ height:56px; }
  .logo span{ font-size:14px; white-space:nowrap; }
  .nav .links{
    gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 0;
    scrollbar-width:none;
  }
  .nav .links::-webkit-scrollbar{ display:none; }
  .nav a.btn{ padding:.5rem .75rem; border-radius:999px; box-shadow:none; background:transparent; }
}
/* Ensure "secondary" style for header links */
header.nav .btn{ background:transparent; color:var(--fg); }
header.nav .btn:hover{ background:var(--card); }


/* === iPhone header/nav hardening === */
header.nav{ background: var(--glassbg); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
header.nav .btn{ background: transparent !important; color: var(--fg) !important; box-shadow: none !important; }
header.nav .btn:hover{ background: var(--card) !important; transform:none !important; }
header.nav .links{ display:flex; gap:12px; align-items:center; }

@media (max-width: 740px){
  .nav .inner{ height:56px; padding: 0 10px; gap:10px; }
  .logo img{ width:24px; height:24px; }
  .logo span{ display:none; }
  .logo::after{ content:'3KDU'; font-weight:700; font-size:14px; }
  .nav .links{ gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding:8px 0; scrollbar-width:none; }
  .nav .links::-webkit-scrollbar{ display:none; }
  .nav a.btn{ padding:.5rem .75rem; border-radius:999px; border:1px solid var(--border); }
  .hero{ padding-top: 76px; } /* ensure no overlap under sticky header */
}