/* ─────────────────────────────────────────────────────────────────────────
   FINO Wholesale — public marketing site.
   Extracted verbatim from the design package's FINO Wholesale.html <style>
   block. Trimmed to remove gated-only rules (catalog grid, MOQ bar, invoice).
   Keep this 1:1 with the design unless you have a specific reason to drift.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#ffffff; --fg:#000000; --muted:#6b6b6b;
  --line:#e6e6e6; --card:#fafafa;
  --btn-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --btn-tracking: -0.06em;     /* user spec: -60 character spacing */
  -webkit-font-smoothing: antialiased;
}
html.dark{ --bg:#000; --fg:#fff; --muted:#9b9b9b; --line:#1c1c1c; --card:#0c0c0c; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:"Inter",system-ui,sans-serif;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:#000;color:#fff} html.dark ::selection{background:#fff;color:#000}

/* Universal button text style — Helvetica, tight tracking */
.btn-text, button, .pill-btn, .btn-solid, .btn-ghost, .news button, .ch-btn {
  font-family: var(--btn-font);
  letter-spacing: var(--btn-tracking);
}

/* ───── nav: logo CENTERED with subtle glow loop ───── */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);
     display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;gap:24px;}
.nav-l,.nav-r{display:flex;align-items:center;gap:24px;font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.nav-r{justify-content:flex-end}
.nav a.lnk{padding:6px 0;border-bottom:1px solid transparent;transition:.15s}
.nav a.lnk:hover, .nav a.lnk.active{border-bottom-color:var(--fg)}

.logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 12px;cursor:pointer}
.logo-wrap img{height:30px;width:auto;display:block;position:relative;z-index:1;filter:drop-shadow(0 0 0 transparent)}
html.dark .logo-wrap img{filter:invert(1) drop-shadow(0 0 0 transparent)}
.logo-wrap::before{content:"";position:absolute;inset:-12px -28px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.22), rgba(0,0,0,0) 65%);
  filter:blur(14px);animation:glow 3.4s ease-in-out infinite;z-index:0;pointer-events:none}
html.dark .logo-wrap::before{background:radial-gradient(ellipse at center, rgba(255,255,255,0.32), rgba(255,255,255,0) 65%)}
@keyframes glow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}

.pill-btn{border:1px solid var(--fg);padding:8px 16px;border-radius:999px;font-size:11px;text-transform:uppercase;transition:.15s;font-weight:500}
.pill-btn:hover{background:var(--fg);color:var(--bg)}
.toggle{width:36px;height:18px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;border:1px solid var(--line)}
.toggle::after{content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:999px;background:var(--fg);transition:.2s}
html.dark .toggle::after{left:19px}

/* ───── HOME — Tapstitch-style: white hero, catalog forward ───── */
.hero2{padding:80px 56px 64px;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;border-bottom:1px solid var(--line);background:var(--bg)}
.hero2 .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:600;display:flex;align-items:center;gap:10px}
.hero2 .eyb::before{content:"";width:28px;height:1px;background:var(--muted)}
.hero2 h1{font-family:"Inter";font-weight:800;font-size:clamp(48px,6.4vw,96px);letter-spacing:-0.04em;line-height:.95;margin:0 0 24px;text-wrap:balance}
.hero2 h1 em{font-style:normal;color:var(--muted)}
.hero2 p.lead{font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 32px;max-width:48ch}
.hero2-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.btn-solid{background:var(--fg);color:var(--bg);padding:15px 28px;font-size:12px;text-transform:uppercase;transition:.15s;border:1px solid var(--fg);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-solid:hover{background:transparent;color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg);padding:15px 28px;font-size:12px;text-transform:uppercase;transition:.15s;border:1px solid var(--fg);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.hero2 .trust{display:flex;gap:32px;flex-wrap:wrap}
.hero2 .trust .ti{display:flex;flex-direction:column;gap:2px}
.hero2 .trust .ti b{font-family:"Inter";font-size:22px;font-weight:800;letter-spacing:-0.02em}
.hero2 .trust .ti span{font-family:var(--btn-font);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hero2-imgwrap{position:relative;aspect-ratio:5/6;background:var(--card);overflow:hidden;border:1px solid var(--line)}
.hero2-imgwrap .stack{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--line)}
.hero2-imgwrap .stack .cell{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.hero2-imgwrap .stack .cell img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) opacity(.4)}
.hero2-imgwrap .badge{position:absolute;bottom:18px;left:18px;background:var(--fg);color:var(--bg);padding:8px 14px;font-family:var(--btn-font);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;z-index:2}
/* Public-only tweak: on the unauth home, even the hero stack is silhouetted
   with grayscale + opacity so we don't reveal the gated catalog product.
   The original design used full-color photos in the hero; this is the only
   intentional deviation, called out in HANDOFF.md. */

/* logo strip */
.logo-strip{padding:36px 56px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:space-between;background:var(--card)}
.logo-strip .lbl{font-family:var(--btn-font);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;flex-shrink:0}
.logo-strip .marks{display:flex;gap:48px;flex-wrap:wrap;align-items:center;font-family:"Inter";font-weight:700;font-size:18px;letter-spacing:-0.02em;color:var(--muted)}
.logo-strip .marks span{opacity:.7}

/* features 3-up tapstitch-style */
.features{padding:96px 56px;border-bottom:1px solid var(--line);background:var(--bg)}
.features-head{text-align:center;margin-bottom:64px}
.features-head .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.features-head h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,4.4vw,56px);letter-spacing:-0.03em;margin:0;text-wrap:balance;max-width:18ch;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{padding:36px 32px;border:1px solid var(--line);background:var(--bg);transition:.2s;display:flex;flex-direction:column;gap:14px}
.feat:hover{border-color:var(--fg);transform:translateY(-2px)}
.feat .num{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.feat h3{font-family:"Inter";font-weight:700;font-size:24px;letter-spacing:-0.02em;margin:0;line-height:1.15}
.feat p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.feat .ico{width:44px;height:44px;border:1px solid var(--fg);display:flex;align-items:center;justify-content:center;font-family:"Inter";font-weight:800;font-size:18px;margin-bottom:6px}

/* drop sections */
.drops{padding:96px 56px;border-bottom:1px solid var(--line)}
.drops-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.drops-head h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,4.4vw,56px);letter-spacing:-0.03em;margin:0;text-wrap:balance}
.drops-head .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600;display:flex;align-items:center;gap:10px}
.drops-head .eyb .dot{width:8px;height:8px;background:#e5483b;border-radius:50%;display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.drops-head .meta-r{font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:right}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.next-card{aspect-ratio:4/5;background:#0a0a0a;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;border:1px solid var(--line)}
.next-card .blur{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:32px}
.next-card .blur img{width:100%;height:100%;object-fit:contain;filter:blur(38px) brightness(.5) saturate(.6);opacity:.55}
.next-card .num{position:absolute;top:24px;left:28px;font-family:"Inter";font-weight:800;font-size:13px;letter-spacing:.06em;font-feature-settings:"tnum"}
.next-card .tag{position:absolute;top:24px;right:28px;font-family:var(--btn-font);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#aaa;font-weight:600}
.next-card .body{position:relative;z-index:1}
.next-card .body h3{font-family:"Inter";font-weight:800;font-size:32px;letter-spacing:-0.03em;margin:0 0 8px;line-height:1}
.next-card .body p{font-size:13px;color:#aaa;margin:0;line-height:1.5}
.next-card .body .when{font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:14px;display:inline-block;border-top:1px solid #333;padding-top:12px;font-weight:600}

.vault-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vault-card{position:relative;background:var(--card);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid var(--line);overflow:hidden}
.vault-card img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) opacity(.55);transition:.3s}
.vault-card:hover img{filter:grayscale(0) opacity(1)}
.vault-card .so{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-family:var(--btn-font);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;display:flex;justify-content:space-between}
.vault-card .so b{color:#e5483b}
.vault-foot{margin-top:32px;padding:24px;border:1px dashed var(--line);text-align:center;font-size:14px;color:var(--muted)}
.vault-foot b{color:var(--fg);font-weight:700}

/* how it works */
.how{padding:96px 56px;border-bottom:1px solid var(--line);background:var(--card)}
.how-head{text-align:center;margin-bottom:64px}
.how-head h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,4.4vw,56px);letter-spacing:-0.03em;margin:0;text-wrap:balance}
.how-head .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg);padding:48px 36px;display:flex;flex-direction:column;gap:14px;position:relative}
.step .nbr{font-family:"Inter";font-weight:800;font-size:64px;letter-spacing:-0.04em;line-height:1;color:var(--muted);opacity:.4}
.step h4{font-family:"Inter";font-weight:700;font-size:22px;letter-spacing:-0.02em;margin:0}
.step p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}

/* testimonial cards */
.testi{padding:96px 56px;border-bottom:1px solid var(--line)}
.testi-head{margin-bottom:48px}
.testi-head h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,4.4vw,56px);letter-spacing:-0.03em;margin:0;text-wrap:balance;max-width:20ch}
.testi-head .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{padding:32px;border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;background:var(--bg)}
.quote .stars{font-family:"Inter";font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--fg)}
.quote p{font-size:16px;line-height:1.55;margin:0;flex:1}
.quote .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.quote .who .av{width:40px;height:40px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.quote .who .nm{font-weight:700;font-size:14px}
.quote .who .ro{font-family:var(--btn-font);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px;font-weight:500}

/* faq */
.faq{padding:96px 56px;border-bottom:1px solid var(--line);background:var(--card)}
.faq-wrap{max-width:780px;margin:0 auto}
.faq-head{text-align:center;margin-bottom:48px}
.faq-head h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,4.4vw,56px);letter-spacing:-0.03em;margin:0}
.faq-head .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.faq-item{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.faq-item .q{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;font-family:"Inter";font-weight:700;font-size:18px;letter-spacing:-0.015em;line-height:1.3}
.faq-item .q .plus{flex-shrink:0;width:28px;height:28px;border:1px solid var(--fg);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.2s}
.faq-item.open .q .plus{transform:rotate(45deg);background:var(--fg);color:var(--bg)}
.faq-item .a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s,opacity .2s;color:var(--muted);font-size:15px;line-height:1.55;opacity:0}
.faq-item.open .a{max-height:240px;padding-top:14px;opacity:1}

/* big cta strip */
.cta-strip{padding:96px 56px;text-align:center;background:var(--fg);color:var(--bg)}
.cta-strip h2{font-family:"Inter";font-weight:800;font-size:clamp(40px,5.4vw,80px);letter-spacing:-0.04em;line-height:.95;margin:0 0 24px;text-wrap:balance}
.cta-strip p{font-size:18px;line-height:1.5;opacity:.7;margin:0 auto 36px;max-width:54ch}
.cta-strip .btn-solid{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.cta-strip .btn-solid:hover{background:transparent;color:var(--bg)}

/* footer */
footer{padding:64px 48px 28px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.foot-grid h4{font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px;color:var(--muted);font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-grid li a:hover{text-decoration:underline}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-family:var(--btn-font);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.news{display:flex;gap:8px;margin-top:14px}
.news input{flex:1;padding:10px 12px;background:transparent;border:1px solid var(--line);outline:none}
.news input:focus{border-color:var(--fg)}
.news button{padding:10px 16px;background:var(--fg);color:var(--bg);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ───── ABOUT — emphasize sales ───── */
.about-hero{padding:96px 56px 64px;border-bottom:1px solid var(--line)}
.about-hero .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 24px;font-weight:500}
.about-hero h1{font-family:"Inter";font-weight:800;font-size:clamp(48px,7vw,120px);letter-spacing:-0.04em;line-height:.95;margin:0 0 32px;max-width:14ch;text-wrap:balance}
.about-hero p.lead{font-size:20px;max-width:54ch;line-height:1.5;color:var(--muted)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat-row .s{background:var(--bg);padding:48px 32px}
.stat-row .num{font-family:"Inter";font-weight:800;font-size:clamp(48px,5.4vw,88px);letter-spacing:-0.045em;line-height:.95}
.stat-row .num small{font-size:.4em;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-left:6px}
.stat-row .lbl{font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:500}

.pitch{padding:96px 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;border-bottom:1px solid var(--line)}
.pitch h2{font-family:"Inter";font-weight:800;font-size:clamp(36px,5vw,64px);letter-spacing:-0.03em;line-height:1;margin:0 0 24px;text-wrap:balance}
.pitch p{font-size:18px;line-height:1.55;margin:0 0 16px;color:var(--muted);max-width:54ch}
.pitch .why{display:flex;flex-direction:column;gap:18px}
.pitch .why-item{padding:24px 28px;border:1px solid var(--line);background:var(--card)}
.pitch .why-item h3{font-family:var(--btn-font);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:500}
.pitch .why-item p{font-size:16px;color:var(--fg);margin:0}

/* ───── CONTACT ───── */
.contact-wrap{padding:64px 56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;border-bottom:1px solid var(--line);min-height:80vh}
.contact-side{padding:0}
.contact-side h1{font-family:"Inter";font-weight:800;font-size:clamp(40px,5vw,72px);letter-spacing:-0.03em;line-height:.98;margin:0 0 20px;text-wrap:balance}
.contact-side .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.contact-side p.lead{font-size:17px;line-height:1.5;color:var(--muted);max-width:46ch;margin:0 0 32px}
.contact-channels{display:flex;flex-direction:column;gap:10px}
.ch-btn{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);transition:.15s;background:var(--bg);text-align:left;cursor:pointer;width:100%}
.ch-btn:hover{border-color:var(--fg);transform:translateX(4px)}
.ch-btn .ic{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.ch-btn.wa .ic{background:#25d366}
.ch-btn.im .ic{background:#0a84ff}
.ch-btn.em .ic{background:var(--fg);color:var(--bg)}
.ch-btn .ic svg{width:22px;height:22px}
.ch-btn .ttl{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.ch-btn .sub{font-family:var(--btn-font);font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.04em}

/* contact form (lead capture, server-less — POSTs to portal /api/lead later) */
.lead-form{background:var(--card);border:1px solid var(--line);padding:32px}
.lead-form h2{font-family:"Inter";font-weight:800;font-size:28px;letter-spacing:-0.025em;margin:0 0 6px}
.lead-form .eyb{font-family:var(--btn-font);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 24px;font-weight:500}
.lead-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form label{display:block;font-family:var(--btn-font);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
.lead-form input, .lead-form textarea{width:100%;padding:12px 14px;background:transparent;border:1px solid var(--line);outline:none;font-size:14px;border-radius:0;font-family:inherit}
.lead-form input:focus, .lead-form textarea:focus{border-color:var(--fg)}
.lead-form textarea{min-height:120px;resize:vertical}
.lead-form .field{margin-bottom:14px}
.lead-form .submit{width:100%;background:var(--fg);color:var(--bg);padding:14px;font-size:12px;letter-spacing:-0.04em;text-transform:uppercase;cursor:pointer;border:1px solid var(--fg);margin-top:8px;font-weight:600;font-family:var(--btn-font)}
.lead-form .submit:hover{background:transparent;color:var(--fg)}
.lead-form .ok{margin-top:14px;padding:14px 16px;border:1px solid #00b260;color:#00b260;font-size:13px;display:none}
.lead-form .ok.show{display:block}

/* mobile */
@media (max-width: 900px){
  .pitch,.contact-wrap{grid-template-columns:1fr;gap:32px}
  .stat-row{grid-template-columns:1fr 1fr}
  .nav{grid-template-columns:auto auto;padding:14px 18px}
  .nav-l{display:none}
  .hero2{grid-template-columns:1fr;padding:48px 24px;gap:40px}
  .features,.drops,.how,.testi,.faq,.cta-strip{padding:64px 24px}
  .features-grid,.next-grid,.how-grid,.testi-grid{grid-template-columns:1fr;gap:16px}
  .vault-grid{grid-template-columns:repeat(2,1fr)}
  .about-hero,.pitch,.contact-wrap,.logo-strip{padding-left:20px;padding-right:20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .lead-form .grid{grid-template-columns:1fr}
}