/* ============================================================
   TechSparks 2026 · Digital Layer — shared brand system
   Blend × Tessarakt. Official TechSparks 2026 tokens.
   ============================================================ */
:root{
  --black:    #0C0D0A;   /* warm near-black base */
  --black-2:  #14160F;   /* panel black */
  --black-3:  #1B1D15;   /* raised panel */
  --ink:      #050503;   /* deepest */
  --red:      #ED1C24;
  --red-hot:  #FF2630;
  --red-deep: #B0141A;
  --violet:   #6A47F5;   /* 10% accent */
  --violet-2: #5B3FE8;
  --amber:    #F5A623;
  --green:    #2ECC71;
  --white:    #FFFFFF;
  --paper:    #F4F3EC;
  --paper-ink:#111210;
  --mut:      rgba(255,255,255,.62);
  --mut-2:    rgba(255,255,255,.40);
  --mut-3:    rgba(255,255,255,.26);
  --line:     rgba(255,255,255,.12);
  --line-2:   rgba(255,255,255,.07);
  --maxw: 1240px;
  --f-disp: "Chakra Petch", "SF Pro Display", system-ui, sans-serif;
  --f-body: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SF Mono", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--white);
  font-family:var(--f-body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}

/* ---- type helpers ---- */
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.disp{font-family:var(--f-disp);font-weight:600;line-height:1.02;letter-spacing:.005em;text-transform:uppercase}
.red{color:var(--red)}
.vio{color:var(--violet)}
.amber{color:var(--amber)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- noise grain ---- */
.grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.92rem;padding:15px 26px;border-radius:12px;transition:transform .15s,filter .2s;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:linear-gradient(135deg,var(--red-hot),var(--red-deep));color:#fff;box-shadow:0 10px 30px rgba(237,28,36,.3)}
.btn-red:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn .sub{font-family:var(--f-mono);font-weight:400;font-size:.66rem;letter-spacing:.13em;opacity:.85;text-transform:none}