/* Home page (v1.10) — blueprint hero, category tiles, tools band, CNC band, QC timeline, club tiers. Loaded only on "/". */
.home{--bp:#0c1a2b;--bp2:#12304d;--bp-ink:#e8f1fa;--bp-mut:#a9c0d6;--bp-line:rgba(205,225,245,.78);--bp-acc:#7cc4ff;--bp-acc2:#5eead4}
.home main{overflow-x:clip}
.h-sec{margin-top:56px}
.h-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--bp-ink);background:rgba(124,196,255,.12);border:1px solid rgba(124,196,255,.28);padding:5px 12px;border-radius:999px}
.h-pill--sm{margin-bottom:10px}
.h-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--bp-acc2);box-shadow:0 0 0 4px rgba(94,234,212,.18)}
.h-more{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap}
.h-more svg{width:16px;height:16px;transition:transform .2s}
.h-more:hover svg{transform:translateX(-3px)}
.h-more--light{color:var(--bp-acc)}.h-more--light:hover{color:#fff}

/* ---- hero ---- */
.h-hero{position:relative;color:var(--bp-ink);background:
  radial-gradient(900px 420px at 18% 30%,rgba(124,196,255,.16),transparent 60%),
  radial-gradient(600px 300px at 90% 100%,rgba(94,234,212,.10),transparent 60%),
  linear-gradient(160deg,var(--bp) 0%,var(--bp2) 62%,#0f2742 100%);
  padding:44px 0 92px;isolation:isolate}
.h-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(205,225,245,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(205,225,245,.05) 1px,transparent 1px),
  linear-gradient(rgba(205,225,245,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(205,225,245,.08) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.h-hero__grid{display:grid;gap:36px;align-items:center}
.h-hero h1{font-size:clamp(28px,4.4vw,50px);line-height:1.35;font-weight:900;margin:18px 0 14px;color:#fff;letter-spacing:-.3px}
.h-hero h1 span{display:block;background:linear-gradient(90deg,var(--bp-acc),var(--bp-acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hero__lead{color:var(--bp-mut);font-size:16px;max-width:560px;margin:0 0 22px}
.h-search{display:flex;align-items:center;gap:6px;background:#fff;border-radius:16px;padding:6px;max-width:560px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 6px rgba(124,196,255,.10)}
.h-search__i{width:22px;height:22px;color:var(--faint);margin:0 10px 0 4px;flex:none}
.h-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:15px;padding:10px 0}
.h-search .btn{border-radius:12px;padding:11px 22px}
.h-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;padding:0;margin:26px 0 0}
.h-stats li{display:flex;flex-direction:column;line-height:1.5;padding-inline-start:14px;border-inline-start:2px solid rgba(124,196,255,.35)}
.h-stats b{font-size:22px;font-weight:900;color:#fff}
.h-stats span{font-size:12.5px;color:var(--bp-mut)}
.h-hero__facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:6px;font-size:13px;color:var(--bp-mut)}
.h-hero__facts li{display:flex;gap:8px;align-items:center}
.h-hero__facts svg{color:var(--bp-acc);flex:none}
.h-hero__art{position:relative;margin:0}
.h-dw{width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.h-dw__frame{fill:rgba(12,26,43,.55);stroke:rgba(205,225,245,.22);stroke-width:1}
.h-dw__ln{fill:rgba(205,225,245,.04);stroke:var(--bp-line);stroke-width:1.8}
.h-dw__ln--thin{stroke-width:1.2;fill:none}
.h-dw__ln--lam{fill:url(#lam)}
.h-dw__lam{stroke:rgba(205,225,245,.16);stroke-width:1}
.h-dw__ac{fill:rgba(124,196,255,.10);stroke:var(--bp-acc);stroke-width:1.8}
.h-dw__teeth{stroke:var(--bp-acc);stroke-width:1;opacity:.75}
.h-dw__cl{fill:none;stroke:rgba(205,225,245,.32);stroke-width:1;stroke-dasharray:8 3 2 3}
.h-dw__dm{fill:none;stroke:rgba(205,225,245,.5);stroke-width:1}
.h-dw__mk{fill:rgba(205,225,245,.75)}
.h-dw__tb{fill:none;stroke:rgba(205,225,245,.22);stroke-width:1}
.h-dw__tx{font-family:var(--mono);font-size:11px;letter-spacing:1px;fill:var(--bp-mut)}
.h-dw__tx--v{font-size:12px;fill:#fff}
.h-dw__tx--acc{font-size:12px;fill:var(--bp-acc)}
.h-dw__tx--sm{font-size:9.5px;fill:rgba(169,192,214,.8)}
.h-tag{position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff;padding:7px 12px;border-radius:999px;
  background:rgba(18,48,77,.72);border:1px solid rgba(124,196,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.h-tag svg{color:var(--bp-acc2)}
.h-tag--a{top:-6px;left:8%}
.h-tag--b{bottom:22%;right:-4px}
@media (prefers-reduced-motion:no-preference){
  .h-dw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:h-draw 1.6s cubic-bezier(.6,.1,.2,1) .15s forwards}
  .h-dw .h-dw__ac[pathLength]{animation-delay:.6s}
  .h-tag{animation:h-float 6s ease-in-out infinite}.h-tag--b{animation-delay:-3s}
}
@keyframes h-draw{to{stroke-dashoffset:0}}
@keyframes h-float{50%{transform:translateY(-6px)}}

/* ---- quick finder (overlaps the hero) ---- */
.h-finder-wrap{position:relative;z-index:2;margin-top:-56px}
.h-finder{display:grid;gap:12px;align-items:end;background:var(--card);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(26,28,31,.05),0 24px 48px -24px rgba(12,26,43,.35);border:1px solid var(--line2)}
.h-finder__t{display:flex;gap:12px;align-items:center}
.h-finder__t svg{width:42px;height:42px;padding:9px;border-radius:12px;color:var(--accent);background:var(--accent-s);flex:none}
.h-finder__t b{display:block;font-size:15.5px}.h-finder__t span{font-size:12.5px;color:var(--muted)}
.h-finder label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.h-finder select,.h-finder input{height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:0 12px;font-size:14px;width:100%}
.h-finder select:focus,.h-finder input:focus{outline:2px solid var(--accent-s);border-color:var(--accent)}
.h-finder .btn{height:44px}

/* ---- categories ---- */
.h-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.h-cat{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.h-cats:has(> :nth-child(7):last-child) .h-cat:first-child{grid-column:span 2}
.h-cat::after{content:"";position:absolute;inset:auto -30% -60% auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--accent-s),transparent 70%);opacity:0;transition:opacity .25s}
.h-cat:hover{transform:translateY(-3px);border-color:rgba(43,92,130,.25);box-shadow:0 2px 4px rgba(26,28,31,.04),0 18px 36px -20px rgba(43,92,130,.45);color:var(--ink)}
.h-cat:hover::after{opacity:1}
.h-cat__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--accent-s),#f3f7fa);color:var(--accent);margin-bottom:8px;transition:background .2s,color .2s}
.h-cat__ic svg{width:26px;height:26px}
.h-cat:hover .h-cat__ic{background:linear-gradient(145deg,var(--accent),var(--accent-d));color:#fff}
.h-cat b{font-size:15px;font-weight:800;line-height:1.6}
.h-cat small{font-size:12px;color:var(--muted);line-height:1.6}
.h-cat__go{position:absolute;top:16px;left:14px;width:18px;height:18px;color:var(--faint);transition:transform .2s,color .2s}
.h-cat:hover .h-cat__go{transform:translateX(-3px);color:var(--accent)}

/* ---- tools band ---- */
.h-tools{margin-top:64px;padding:48px 0 52px;color:var(--bp-ink);background:radial-gradient(700px 300px at 85% 0,rgba(124,196,255,.14),transparent 60%),linear-gradient(170deg,var(--bp),var(--bp2))}
.h-tools .sec__t{color:#fff}
.h-tools__grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.h-tool{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(205,225,245,.12);transition:background .2s,border-color .2s,transform .2s}
.h-tool:hover{background:rgba(124,196,255,.08);border-color:rgba(124,196,255,.4);transform:translateY(-2px);color:#fff}
.h-tool__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgba(124,196,255,.12);color:var(--bp-acc);margin-bottom:4px}
.h-tool__ic svg{width:22px;height:22px}
.h-tool b{color:#fff;font-size:14.5px}
.h-tool span{font-size:12.5px;line-height:1.75;color:var(--bp-mut)}
.h-tool--big{grid-column:1/-1;padding:22px;background:linear-gradient(135deg,rgba(124,196,255,.14),rgba(94,234,212,.06));border-color:rgba(124,196,255,.3)}
.h-tool--big b{font-size:17px}
.h-tool--big span{font-size:13.5px;max-width:460px}
.h-tool--big .h-tool__ic{width:48px;height:48px;background:linear-gradient(145deg,var(--bp-acc),var(--bp-acc2));color:var(--bp)}
.h-tool__go{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:700;font-size:13px;color:var(--bp-acc);margin-top:6px}
.h-tool__go svg{width:16px;height:16px;transition:transform .2s}
.h-tool:hover .h-tool__go svg{transform:translateX(-3px)}

/* ---- CNC band ---- */
.h-cnc{display:grid;gap:12px;align-items:center;padding:26px;border-radius:20px;color:var(--bp-ink);overflow:hidden;position:relative;isolation:isolate;
  background:radial-gradient(500px 260px at 15% 50%,rgba(124,196,255,.18),transparent 65%),linear-gradient(150deg,#123a5c,var(--bp))}
.h-cnc::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(205,225,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(205,225,245,.06) 1px,transparent 1px);background-size:22px 22px}
.h-cnc h2{color:#fff;font-size:clamp(20px,2.6vw,28px);margin:0 0 8px;font-weight:900}
.h-cnc p{color:var(--bp-mut);margin:0 0 18px;max-width:620px}
.h-btn-light{background:#fff;color:var(--bp)}.h-btn-light:hover{background:var(--bp-acc);color:var(--bp)}
.h-cnc__art{width:100%;max-width:420px;justify-self:center}
.h-cg{fill:rgba(205,225,245,.05);stroke:var(--bp-line);stroke-width:1.6;stroke-linejoin:round}
.h-cg__thin{fill:none;stroke-width:1;opacity:.5}
.h-cg__acc{fill:rgba(124,196,255,.14);stroke:var(--bp-acc)}
.h-cg__work{fill:rgba(94,234,212,.10);stroke:var(--bp-acc2)}
.h-cg__path{fill:none;stroke:var(--bp-acc2);stroke-dasharray:4 4;stroke-width:1.4}
.h-cg__tx{font-family:var(--mono);font-size:12px;fill:var(--bp-acc)}
@media (prefers-reduced-motion:no-preference){.h-cg__path{animation:h-march 1.2s linear infinite}}
@keyframes h-march{to{stroke-dashoffset:-16}}

.h-cnc__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.h-queue{margin-top:18px}
.h-queue h3{font-size:15px;margin:0 0 10px}

/* ---- QC timeline ---- */
.h-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:none}
.h-steps li{position:relative;padding:20px 18px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--sh)}
.h-steps__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--accent),var(--accent-d));color:#fff;box-shadow:0 10px 20px -10px rgba(43,92,130,.7)}
.h-steps__ic svg{width:24px;height:24px}
.h-steps i{position:absolute;top:16px;left:18px;font-style:normal;font-weight:900;font-size:30px;line-height:1;color:var(--line)}
.h-steps h3{font-size:15.5px;margin:14px 0 4px}
.h-steps p{margin:0;font-size:13px;color:var(--muted);line-height:1.8}

/* ---- club ---- */
.h-club{display:grid;gap:22px;align-items:center;padding:24px;border-radius:20px;background:linear-gradient(135deg,#fff,var(--paper));border:1px solid var(--line2);box-shadow:var(--sh)}
.h-club h2{font-size:clamp(19px,2.3vw,24px);margin:0 0 8px;font-weight:900}
.h-club .muted{margin:0 0 16px}
.h-tiers{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;align-items:end}
.h-tier{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 8px 14px;border-radius:16px;color:#3b2a14;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 24px -16px rgba(0,0,0,.45)}
.h-tier svg{width:28px;height:28px}
.h-tier b{font-size:15px}
.h-tier small{font-size:11px;line-height:1.6;opacity:.85}
.h-tier--1{min-height:130px;background:linear-gradient(160deg,#f3d2b3,#c98b5a)}
.h-tier--2{min-height:150px;background:linear-gradient(160deg,#f4f6f8,#b9c2cc);color:#2b3440}
.h-tier--3{min-height:170px;background:linear-gradient(160deg,#fbe9a6,#d4a52a)}
.h-tier--4{min-height:190px;background:linear-gradient(160deg,#e5e9ff,#8f9bd6);color:#1d2450}

/* ---- wholesale ---- */
.h-wholesale{background:linear-gradient(120deg,var(--accent-d),#16324a);padding:26px;border-radius:20px}

/* ---- wider screens ---- */
@media (min-width:640px){
  .h-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-cats:has(> :nth-child(7):last-child) .h-cat:first-child{grid-column:auto}
  .h-tools__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-tool--big{grid-column:span 3}
  .h-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-finder{grid-template-columns:1fr 1fr}
  .h-finder__t{grid-column:1/-1}
}
@media (min-width:960px){
  .h-hero{padding:64px 0 120px}
  .h-hero__grid{grid-template-columns:1.05fr .95fr;gap:48px}
  .h-finder{grid-template-columns:1.3fr 1fr 1fr 1fr auto;padding:20px 22px}
  .h-finder__t{grid-column:auto}
  .h-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-cats:has(> :nth-child(7):last-child) .h-cat:first-child{grid-column:span 2}
  .h-cat:first-child{background:linear-gradient(135deg,#fff 40%,var(--accent-s))}
  .h-tools__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .h-tool{grid-column:span 4}
  .h-tool--big{grid-column:span 6}
  .h-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-steps li:not(:last-child)::after{content:"";position:absolute;top:44px;left:-14px;width:16px;border-top:2px dashed rgba(43,92,130,.35)}
  .h-cnc{grid-template-columns:1.2fr 1fr;padding:36px 40px}
  .h-club{grid-template-columns:1.3fr 1fr;padding:32px 36px}
}
