/* ============================================================
   SimpleFileKit — Glassmorphism design system
   One source of truth. Every surface (navbar, cards, panels,
   dropzone, buttons) is driven by the tokens below.
   Dark mode is the default; light mode is a full re-theme.
   ============================================================ */

:root{
  /* ---- Blur / shape / spacing ---- */
  --blur:16px;
  --blur-strong:26px;
  --radius:20px;
  --radius-sm:14px;
  --radius-lg:26px;
  --radius-pill:999px;
  --maxw:1140px;

  /* ---- Base surface (dark default) ---- */
  --bg-0:#070a17;                     /* deepest page base            */
  --bg-1:#0b1024;                     /* gradient stop                */

  /* ---- Glass surfaces ---- */
  --glass:rgba(255,255,255,.055);     /* default frosted panel        */
  --glass-2:rgba(255,255,255,.085);   /* raised / hover               */
  --glass-3:rgba(255,255,255,.11);    /* inputs / inner wells         */
  --glass-brd:rgba(255,255,255,.12);  /* translucent hairline border  */
  --glass-brd-2:rgba(255,255,255,.22);/* stronger border (hover/focus)*/
  --glass-hi:rgba(255,255,255,.55);   /* top-edge highlight line      */

  /* ---- Text ---- */
  --text:#eef2fb;
  --text-2:#c3cde1;
  --muted:#8a97b3;

  /* ---- Accent + category hues ---- */
  --accent:#818cf8;
  --accent-2:#a78bfa;
  --accent-ink:#ffffff;
  --grad-accent:linear-gradient(135deg,#6366f1 0%,#8b5cf6 52%,#22d3ee 120%);
  --grad-accent-hover:linear-gradient(135deg,#6d78ff 0%,#9a6bff 52%,#3ddcf0 120%);
  --accent-soft:rgba(129,140,248,.16);

  --pdf:#fb7185;   --pdf-soft:rgba(251,113,133,.15);
  --img:#c084fc;   --img-soft:rgba(192,132,252,.15);
  --data:#34d399;  --data-soft:rgba(52,211,153,.15);

  --green:#34d399; --amber:#fbbf24; --danger:#f87171;

  /* ---- Shadows / glows ---- */
  --shadow:0 10px 30px rgba(2,6,20,.45);
  --shadow-lg:0 24px 60px rgba(2,6,20,.6);
  --glow:0 0 0 1px var(--glass-brd), 0 18px 44px -18px rgba(99,102,241,.55);

  /* ---- Aurora blob colours (dark) ---- */
  --blob-1:rgba(99,102,241,.55);
  --blob-2:rgba(139,92,246,.5);
  --blob-3:rgba(34,211,238,.42);
  --blob-4:rgba(236,72,153,.35);
}

html[data-theme="light"]{
  --bg-0:#eef1fb;
  --bg-1:#e6ecfb;

  --glass:rgba(255,255,255,.6);
  --glass-2:rgba(255,255,255,.78);
  --glass-3:rgba(255,255,255,.9);
  --glass-brd:rgba(255,255,255,.75);
  --glass-brd-2:rgba(99,102,241,.4);
  --glass-hi:rgba(255,255,255,.95);

  --text:#141a2e;
  --text-2:#3a4863;
  --muted:#61708c;

  --accent:#5b56e0;
  --accent-2:#7c3aed;
  --accent-soft:rgba(99,102,241,.12);

  --pdf:#e11d48;   --pdf-soft:rgba(225,29,72,.1);
  --img:#7c3aed;   --img-soft:rgba(124,58,237,.1);
  --data:#0f9d58;  --data-soft:rgba(15,157,88,.12);

  --green:#0f9d58; --amber:#c47d0a; --danger:#dc2626;

  --shadow:0 10px 30px rgba(31,41,84,.12);
  --shadow-lg:0 24px 60px rgba(31,41,84,.16);
  --glow:0 0 0 1px var(--glass-brd), 0 18px 44px -20px rgba(99,102,241,.4);

  --blob-1:rgba(99,102,241,.4);
  --blob-2:rgba(139,92,246,.34);
  --blob-3:rgba(34,211,238,.32);
  --blob-4:rgba(236,72,153,.26);
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, var(--bg-1), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-attachment:fixed;
}

/* ---- Aurora background: soft glowing blobs behind the glass ---- */
.aurora{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.aurora::before,.aurora::after,
.aurora i{content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.9; will-change:transform}
.aurora::before{width:52vw; height:52vw; left:-10vw; top:-14vw; background:radial-gradient(circle at 30% 30%, var(--blob-1), transparent 70%); animation:drift1 26s ease-in-out infinite}
.aurora::after{width:46vw; height:46vw; right:-8vw; top:2vw; background:radial-gradient(circle at 60% 40%, var(--blob-3), transparent 70%); animation:drift2 32s ease-in-out infinite}
.aurora i{width:44vw; height:44vw; left:24vw; bottom:-20vw; background:radial-gradient(circle at 50% 50%, var(--blob-2), transparent 70%); animation:drift3 30s ease-in-out infinite}
.aurora i::after{content:""; position:absolute; width:26vw; height:26vw; right:-30vw; top:-6vw; border-radius:50%; filter:blur(70px); background:radial-gradient(circle, var(--blob-4), transparent 70%)}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vw) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,5vw) scale(1.12)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vw) scale(1.06)}}

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.narrow{max-width:800px; margin-left:auto; margin-right:auto}

/* Shared glass recipe: use via .glass or the component classes below */
.glass,
.tool-card,.card,.faq,.related a,.badges span,.step,.foot,.adslot{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:saturate(160%) blur(var(--blur));
  backdrop-filter:saturate(160%) blur(var(--blur));
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
}
/* Fallback when backdrop-filter is unsupported: opaque-ish surface */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--glass:rgba(23,30,54,.92); --glass-2:rgba(30,38,66,.95); --glass-3:rgba(36,45,76,.96)}
  html[data-theme="light"]{--glass:rgba(255,255,255,.96); --glass-2:#fff; --glass-3:#fff}
}

/* ============================================================
   Header / navbar
   ============================================================ */
.site-header{position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg-0) 55%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(var(--blur-strong));
  backdrop-filter:saturate(180%) blur(var(--blur-strong));
  border-bottom:1px solid var(--glass-brd);
}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.14rem; color:var(--text); letter-spacing:-.02em}
.brand:hover{color:var(--text)}
.brand .logo{width:34px; height:34px; flex:0 0 auto; border-radius:11px; box-shadow:0 6px 16px -6px rgba(99,102,241,.8)}
.header-inner .spacer{flex:1}
.mainnav{display:flex; align-items:center; gap:4px}
.mainnav a{color:var(--text-2); font-size:.92rem; font-weight:500; padding:8px 13px; border-radius:11px; transition:.16s}
.mainnav a:hover{color:var(--text); background:var(--glass-2)}
.iconbtn{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--glass-brd); background:var(--glass); color:var(--text-2); cursor:pointer; transition:.16s; -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}
.iconbtn:hover{border-color:var(--glass-brd-2); color:var(--accent); transform:translateY(-1px)}
.iconbtn svg{width:18px; height:18px}
.trust-chip{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--green); background:var(--data-soft); border:1px solid color-mix(in srgb,var(--green) 34%, transparent); padding:6px 12px; border-radius:var(--radius-pill); white-space:nowrap}
.trust-chip svg{width:14px;height:14px}
/* Hamburger (mobile) */
.nav-toggle{display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--glass-brd); background:var(--glass); color:var(--text); cursor:pointer; place-items:center}
.nav-toggle svg{width:20px;height:20px}

/* ============================================================
   Hero
   ============================================================ */
.hero{text-align:center; padding:78px 0 46px; position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--text-2);
  background:var(--glass); border:1px solid var(--glass-brd); padding:7px 15px; border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); box-shadow:inset 0 1px 0 var(--glass-hi)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 25%, transparent)}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem); line-height:1.08; letter-spacing:-.03em; margin:22px 0 18px; font-weight:800}
.hero h1 .grad{background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero .lead{color:var(--text-2); max-width:640px; margin:0 auto; font-size:1.14rem}
.hero-cta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.badges{margin-top:30px; display:flex; gap:11px; justify-content:center; flex-wrap:wrap}
.badges span{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500; color:var(--text-2); padding:9px 15px; border-radius:var(--radius-pill)}
.badges svg{width:15px;height:15px;color:var(--accent)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex; align-items:center; gap:9px; font-size:1rem; font-weight:650; padding:13px 26px; border-radius:14px; cursor:pointer; border:1px solid transparent; transition:.18s; letter-spacing:-.01em}
.btn svg{width:18px;height:18px}
.btn-primary{color:var(--accent-ink); background:var(--grad-accent); box-shadow:0 12px 30px -10px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{color:var(--accent-ink); background:var(--grad-accent-hover); transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(99,102,241,.85), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{color:var(--text); background:var(--glass); border-color:var(--glass-brd); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); box-shadow:inset 0 1px 0 var(--glass-hi)}
.btn-ghost:hover{color:var(--text); border-color:var(--glass-brd-2); transform:translateY(-2px)}

/* Primary action button used inside tool builders (app.js) */
button.primary{color:var(--accent-ink); background:var(--grad-accent); border:1px solid transparent; padding:13px 28px; border-radius:14px; font-size:1rem; font-weight:650; cursor:pointer; transition:.18s; box-shadow:0 12px 30px -10px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.35)}
button.primary:hover:not(:disabled){background:var(--grad-accent-hover); transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(99,102,241,.85), inset 0 1px 0 rgba(255,255,255,.4)}
button.primary:disabled{opacity:.5; cursor:not-allowed}
button.primary:focus-visible,.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ============================================================
   Tools grid
   ============================================================ */
.cat-head{display:flex; align-items:baseline; gap:11px; margin:42px 0 16px}
.cat-head h2{font-size:1.22rem; font-weight:750; margin:0; letter-spacing:-.02em}
.cat-head .count{font-size:.82rem; color:var(--muted); font-weight:500}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.tool-card{display:flex; gap:14px; align-items:flex-start; border-radius:var(--radius); padding:18px; position:relative; transition:transform .18s, border-color .18s, box-shadow .18s; overflow:hidden}
.tool-card::after{content:""; position:absolute; inset:0; background:radial-gradient(320px 120px at 20% -10%, var(--accent-soft), transparent 70%); opacity:0; transition:.18s; pointer-events:none}
.tool-card:hover{border-color:var(--glass-brd-2); transform:translateY(-4px); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-hi); color:inherit}
.tool-card:hover::after{opacity:1}
.tool-card h3{margin:0 0 3px; font-size:1rem; font-weight:700; color:var(--text)}
.tool-card p{margin:0; font-size:.85rem; color:var(--muted); line-height:1.45}
.ic-tile{width:48px; height:48px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; border:1px solid var(--glass-brd)}
.ic-tile svg{width:24px; height:24px; stroke-width:1.9}
.ic-tile.cat-pdf{background:var(--pdf-soft); color:var(--pdf)}
.ic-tile.cat-img{background:var(--img-soft); color:var(--img)}
.ic-tile.cat-data{background:var(--data-soft); color:var(--data)}
.ic-lg.ic-tile{width:60px; height:60px; border-radius:16px}
.ic-lg.ic-tile svg{width:30px; height:30px}
.beta{position:absolute; top:13px; right:13px; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 44%, transparent); background:color-mix(in srgb,var(--amber) 14%, transparent); padding:2px 8px; border-radius:var(--radius-pill)}

/* ============================================================
   Sections (home): How it works + Why + FAQ
   ============================================================ */
.section{margin:56px 0}
.section-title{text-align:center; margin:0 0 8px}
.section-title h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-.02em; margin:0}
.section-title p{color:var(--text-2); margin:8px auto 0; max-width:560px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
.step{border-radius:var(--radius); padding:24px; position:relative}
.step .num{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-weight:800; color:var(--accent-ink); background:var(--grad-accent); box-shadow:0 8px 20px -8px rgba(99,102,241,.8); margin-bottom:14px}
.step h3{margin:0 0 6px; font-size:1.05rem; font-weight:700}
.step p{margin:0; color:var(--text-2); font-size:.92rem}
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:26px}
.why .step .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--glass-brd);margin-bottom:14px}
.why .step .ic svg{width:22px;height:22px}

/* ============================================================
   FAQ accordion (native <details>)
   ============================================================ */
.faq{border-radius:var(--radius-sm); padding:0; margin-top:12px; overflow:hidden}
.faq>summary{list-style:none; cursor:pointer; padding:16px 20px; font-weight:650; font-size:1rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:14px}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::after{content:""; width:11px; height:11px; flex:0 0 auto; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; margin-top:-4px}
.faq[open]>summary::after{transform:rotate(-135deg); margin-top:2px}
.faq>summary:hover{color:var(--accent)}
.faq p{margin:0; padding:0 20px 18px; color:var(--text-2); font-size:.95rem}

/* ============================================================
   Tool page
   ============================================================ */
.tool-head{display:flex; align-items:center; gap:16px; margin:8px 0 6px}
.tool-head h1{margin:0; font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:800; letter-spacing:-.025em}
.tool-sub{color:var(--text-2); font-size:1.04rem; margin:0 0 24px; max-width:70ch}
.breadcrumb{font-size:.85rem; color:var(--muted); margin:26px 0 14px}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--accent)}
.note-beta{background:color-mix(in srgb,var(--amber) 12%, transparent); border:1px solid color-mix(in srgb,var(--amber) 38%, transparent); color:var(--text-2); padding:13px 16px; border-radius:14px; font-size:.9rem; margin-bottom:20px; -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}

/* ============================================================
   Tool UI: cards, dropzone, options, status
   ============================================================ */
.card{border-radius:var(--radius); padding:22px; margin-bottom:18px}
.drop{border:2px dashed var(--glass-brd-2); border-radius:16px; padding:44px 22px; text-align:center; cursor:pointer; transition:.18s; background:var(--glass); position:relative; overflow:hidden}
.drop::before{content:""; position:absolute; inset:0; background:radial-gradient(400px 160px at 50% -20%, var(--accent-soft), transparent 70%); opacity:0; transition:.2s}
.drop:hover,.drop.drag{border-color:var(--accent); background:var(--glass-2)}
.drop:hover::before,.drop.drag::before{opacity:1}
.drop.drag{transform:scale(1.01); box-shadow:0 0 0 4px var(--accent-soft)}
.drop .icon{width:44px;height:44px;margin:0 auto 12px;color:var(--accent); position:relative}
.drop .icon svg{width:44px;height:44px}
.drop .maintext{font-size:1.02rem; color:var(--text); position:relative}
.drop strong{color:var(--accent)}
.drop small{display:block; color:var(--muted); margin-top:8px; font-size:.85rem; position:relative}
.hidden-input{display:none}
.filelist{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.fileitem{display:flex; align-items:center; gap:12px; background:var(--glass-3); border:1px solid var(--glass-brd); border-radius:12px; padding:11px 14px; font-size:.9rem}
.fileitem .fdot{width:9px;height:9px;border-radius:3px;flex:0 0 auto;background:var(--accent)}
.fileitem .fi-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)}
.fileitem .fi-meta{color:var(--muted); font-size:.8rem; white-space:nowrap}
.fileitem .fi-remove{cursor:pointer; color:var(--muted); border:none; background:none; font-size:1.25rem; line-height:1; padding:0 4px; border-radius:6px}
.fileitem .fi-remove:hover{color:var(--danger)}
.fileitem.err{border-color:var(--danger)}
.opts{display:flex; flex-wrap:wrap; gap:18px}
.opt{display:flex; flex-direction:column; gap:7px; font-size:.88rem}
.opt label{color:var(--muted); font-size:.82rem; font-weight:500}
.opt input[type=text],.opt input[type=number],.opt select{background:var(--glass-3); border:1px solid var(--glass-brd); color:var(--text); border-radius:11px; padding:10px 13px; font-size:.92rem; min-width:160px; -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}
.opt select option{color:#141a2e}
.opt input:focus,.opt select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.opt.check{flex-direction:row; align-items:center; gap:10px}
.opt.check input{width:18px; height:18px; accent-color:var(--accent)}
.range-row{display:flex; align-items:center; gap:12px}
input[type=range]{accent-color:var(--accent)}
.actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
.status{margin-top:15px; font-size:.92rem; min-height:20px; color:var(--text-2)}
.status.ok{color:var(--green)} .status.warn{color:var(--amber)} .status.err{color:var(--danger)}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--glass-brd-2); border-top-color:var(--accent); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.preview{margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.preview img{width:100%; border:1px solid var(--glass-brd); border-radius:12px; background:rgba(255,255,255,.06)}

/* ============================================================
   Content / FAQ / related
   ============================================================ */
.content{margin-top:40px}
.content h2{font-size:1.3rem; font-weight:750; margin:32px 0 10px; letter-spacing:-.02em}
.content h3{font-size:1rem; font-weight:650; margin:0 0 4px}
.content p,.content li{color:var(--text-2); font-size:.98rem}
.content ol,.content ul{padding-left:22px}
.content ol li{margin:7px 0}
.related{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px}
.related a{font-size:.86rem; font-weight:500; padding:8px 14px; border-radius:var(--radius-pill); color:var(--text-2)}
.related a:hover{border-color:var(--glass-brd-2); color:var(--accent)}

/* ============================================================
   Ad slots — reserved, unobtrusive placeholders.
   Real AdSense markup is added later (see HTML comments).
   ============================================================ */
.adslot{border-radius:14px; color:var(--muted); text-align:center; padding:18px; font-size:.78rem; margin:30px 0; letter-spacing:.03em; text-transform:uppercase; border-style:dashed}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{margin-top:64px; border-top:1px solid var(--glass-brd);
  background:color-mix(in srgb, var(--bg-0) 60%, transparent);
  -webkit-backdrop-filter:blur(var(--blur-strong)); backdrop-filter:blur(var(--blur-strong))}
.site-footer .container{padding-top:44px; padding-bottom:34px}
.foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{color:var(--muted); font-size:.9rem; max-width:36ch; margin:0}
.foot-col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; font-weight:700}
.foot-col a{display:block; color:var(--text-2); font-size:.9rem; padding:5px 0; font-weight:500}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:34px; padding-top:20px; border-top:1px solid var(--glass-brd); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.84rem}
.fnav{display:flex; gap:16px; flex-wrap:wrap}
.fnav a{color:var(--muted); font-weight:500}
.fnav a:hover{color:var(--accent)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:720px){
  .steps{grid-template-columns:1fr}
  .nav-toggle{display:grid}
  .mainnav{position:absolute; top:64px; right:16px; left:16px; flex-direction:column; align-items:stretch; gap:4px; padding:10px;
    background:color-mix(in srgb, var(--bg-0) 80%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(var(--blur-strong)); backdrop-filter:saturate(180%) blur(var(--blur-strong));
    border:1px solid var(--glass-brd); border-radius:16px; box-shadow:var(--shadow-lg); display:none}
  .mainnav.open{display:flex}
  .mainnav a{padding:11px 14px}
  .trust-chip{display:none}
  .hero{padding:52px 0 34px}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%; justify-content:center}
}

/* ============================================================
   Motion / accessibility
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .aurora::before,.aurora::after,.aurora i{animation:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mainnav a:focus-visible,.foot-col a:focus-visible,.fnav a:focus-visible{outline-offset:-2px}