/*
Theme Name: Ginnum QTrax
Theme URI: https://www.ginnum.com/
Author: Ginnum
Author URI: https://www.ginnum.com/
Description: A ready-to-launch, minimal theme for QTrax by Ginnum. Includes Home (landing), QTrax Details, and Contact form. Styled dark UI with blue gradients.
Version: 1.1.0
Text Domain: ginnum-qtrax
*/

:root{
  --primary:#2196f3;
  --primary-dark:#1976d2;
  --bg:#0b0f14;
  --surface:#10151d;
  --text:#e6eef8;
  --muted:#9fb3c8;
  --ring:rgba(255,255,255,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#0b0f14;
  line-height:1.6;
}

a{color:#bcdcff;text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(12,16,24,.85), rgba(12,16,24,.65));
  border-bottom:1px solid rgba(255,255,255,.06);}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:28px;width:auto}
.brand .site-title{font-weight:700;letter-spacing:.4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 6px 16px rgba(25,118,210,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--ring);color:var(--text);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(11,15,20,.65), rgba(11,15,20,.85)),
    url('assets/img/hero-qtrax-1920x1080.png');
  background-size:cover;background-position:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-inner{padding:86px 0 72px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 24px}
.logo-badge{display:flex;align-items:center;gap:12px;margin-bottom:12px;opacity:.95}
.logo-badge img{height:42px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}

/* Feature cards */
.section{padding:56px 0}
.section-title{font-size:26px;margin:0 0 16px}
.section-sub{color:var(--muted);margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,#0f1722, #0c1320);border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:18px;box-shadow:0 4px 18px rgba(0,0,0,.2)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{color:var(--muted);margin:0}
.card .eyebrow{color:#9cc7ff;font-size:12px;letter-spacing:.4px;text-transform:uppercase}

/* Details page layout */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.kv .bullet{margin:0;padding-left:18px}
.kv .bullet li{margin:8px 0;color:var(--muted)}

/* Footer & Contact */
footer{margin-top:48px;border-top:1px solid rgba(255,255,255,.06);background:#0b1018}
.footer-inner{padding:28px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{height:28px}
.footer-contact form{display:grid;gap:10px}
.input,.textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f1622;color:var(--text)}
.textarea{min-height:120px;resize:vertical}
.form-hint{color:var(--muted);font-size:12px}
.success{color:#8ff7b3}.error{color:#ff9ea0}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}