@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ============================================================
   TINT BRAND LAYER  — one premium design system for the whole site.
   Loaded AFTER each page's inline <style>, so it standardizes
   fonts, colors, buttons, headers, cards & spacing everywhere.
   Visual-only: never overrides width/grid/display, so it can't
   break a page's existing layout.
   2026-06-23: premium refresh — Inter, blue gradient, dark header.
   ============================================================ */

:root{
  --bg:#ffffff; --bg-soft:#f5f5f7;
  --panel:#0a0a0c; --panel-2:#16181d;
  --ink:#14161b; --ink-2:#3a3d44; --muted:#7c808a;
  --line:#e7e9ee; --line-soft:#eef0f3;
  --silver:#b9bcc2; --silver-deep:#8b8f97;
  --metal:linear-gradient(180deg,#fdfdfe,#e9eaee 60%,#d6d8dd);
  --accent:#14589c; --accent-deep:#0040dd;
  --bluegrad:#14589c;
  --radius:20px;
  --shadow:0 30px 64px rgba(15,20,32,.11);
  --shadow-sm:0 16px 38px rgba(15,20,32,.08);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Typography: one font, premium hierarchy ---- */
body{ font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:radial-gradient(90% 48% at 50% 0%,rgba(10,132,255,.07),transparent 55%),var(--bg-soft); }
h1,h2,h3,h4{ font-family:var(--font); letter-spacing:-.027em; color:var(--ink); }
h1{ font-weight:800; line-height:1.06; }
h2{ font-weight:800; line-height:1.12; }
h3{ font-weight:700; }
/* Larger, calmer section titles on inner/content pages (not the home hero, which has its own rule) */
.wrap > h1, .contain > h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:.4em; }

/* ---- Buttons: the homepage's premium buttons, everywhere ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:800; font-size:.97rem; line-height:1;
  padding:14px 28px; border-radius:999px; cursor:pointer; text-decoration:none;
  border:1.5px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:not(.dark):not(.metal):not(.ghost){ background:var(--bluegrad); color:#fff; border-color:transparent; } /* bare .btn -> blue gradient */
.btn.dark{ background:#0a0a0c; color:#fff; border-color:#0a0a0c; }
.btn.dark:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,10,12,.3); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:#d3d6db; }
.btn.ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.metal{ background:var(--metal); color:var(--ink); border-color:#cfd2d8; }
.btn.metal:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(10,132,255,.32); }
.btn:active{ transform:translateY(0); }
.btn.big{ padding:17px 36px; font-size:1.05rem; }

/* ---- Inner-page header (.top): dark, premium, sticky ---- */
header.top{ position:sticky; top:0; z-index:1000; background:#0a0a0c;
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08); transition:box-shadow .3s ease; }
header.top.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.32); }
header.top .top-in{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:min(1080px,92%); margin:0 auto; padding:14px 0; }
header.top img{ height:28px; width:auto; filter:brightness(0) invert(1); }
header.top .back{ color:#c3c6cf; text-decoration:none; font-weight:600; font-size:.92rem; }
header.top .back:hover{ color:#fff; }

/* ---- Cards & surfaces ---- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); }

/* ---- Links, muted text, inputs ---- */
a{ color:var(--ink); }
.muted{ color:var(--muted); }
input,select,textarea{ font-family:var(--font); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.15); }

/* ---- Footer ---- */
footer{ color:var(--muted); }
footer a{ color:var(--muted); }
footer a:hover{ color:var(--ink); }

/* ============================================================
   TRUST ROW — warranty / shipping / returns, reusable anywhere
   ============================================================ */
.trust-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  width:min(1080px,92%); margin:26px auto; }
.trust-badge{ display:flex; align-items:center; gap:10px; flex:1 1 200px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px;
  box-shadow:var(--shadow-sm); min-width:200px; }
.trust-badge .tb-ic{ font-size:1.3rem; line-height:1; }
.trust-badge b{ display:block; font-size:.95rem; color:var(--ink); }
.trust-badge span{ font-size:.82rem; color:var(--muted); }

/* ============================================================
   STICKY BUY BAR — every page, always one tap from purchase
   ============================================================ */
#buyBar{ position:fixed; left:0; right:0; bottom:0; z-index:9000;
  transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  background:rgba(10,10,12,.94);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -10px 30px rgba(0,0,0,.22); }
#buyBar.show{ transform:translateY(0); }
#buyBar .bb-in{ width:min(1080px,94%); margin:0 auto; padding:11px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
#buyBar .bb-text{ color:#fff; line-height:1.25; }
#buyBar .bb-text b{ font-size:1rem; }
#buyBar .bb-text small{ display:block; color:#b9c0cc; font-size:.78rem; }
#buyBar .bb-btn{ flex:0 0 auto; background:var(--bluegrad); color:#fff;
  font-weight:800; text-decoration:none; padding:14px 30px; border-radius:12px; white-space:nowrap;
  border:0; transition:transform .2s ease, box-shadow .2s ease; }
#buyBar .bb-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,132,255,.4); }
@media (max-width:520px){ #buyBar .bb-text small{ display:none; } #buyBar .bb-btn{ padding:13px 22px; } }

/* ============================================================
   BATCH D — MOBILE-FIRST PASS (site-wide, every page)
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; -webkit-text-size-adjust:100%;
      scroll-padding-top:78px;          /* anchor jumps clear the sticky header */ }
img,video,svg,table,iframe{ max-width:100%; height:auto; }

/* keep page content above the sticky buy bar so nothing hides behind it */
body.has-buybar{ padding-bottom:0; }
@media (max-width:680px){ body.has-buybar{ padding-bottom:74px; } }

@media (max-width:680px){
  body{ font-size:16px; line-height:1.6; }
  /* No iOS zoom-on-tap: form fields must be >=16px */
  input,select,textarea{ font-size:16px; }
  /* Comfortable, thumb-friendly tap targets everywhere */
  .btn{ min-height:50px; padding:15px 22px; font-size:1rem; }
  .btn.big{ width:100%; }
  header.top .top-in{ padding:11px 0; }
  header.top img{ height:24px; }
  /* breathing room + no edge-to-edge cramping on content pages */
  .wrap{ width:min(680px,92%); }
}
@media (max-width:380px){
  .btn{ padding:14px 16px; }
}