.hero { position:relative; overflow:hidden; width:100%; } .hero *, .hero *::before, .hero *::after { box-sizing:border-box; } .hero-overlay { position:absolute; inset:0; pointer-events:none; z-index:1; } .hero-inner   { position:relative; width:100%; } .hero-left    { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; } .hero-right   { position:relative; z-index:2; } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:18px; padding:5px 12px; border-radius:100px; width:fit-content; } .eyebrow-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.2); animation:edot 2s infinite; } @keyframes edot { 0%,100% { box-shadow:0 0 0 2px rgba(34,197,94,.2); } 50%      { box-shadow:0 0 0 5px rgba(34,197,94,.08); } } .hero-h1 { font-weight:800; line-height:1.08; letter-spacing:-.03em; margin:0 0 clamp(8px,1.5vmin,14px); } .hero-h1 .accent { color:var(--orange); } .hero-sub { font-size:15px; line-height:1.7; margin:0 0 clamp(14px,2.5vmin,28px); max-width:500px; color:var(--wh-muted); } .hero-btns { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:clamp(12px,2vmin,28px); } .hero-btn-p { display:inline-flex; align-items:center; gap:8px; background:var(--orange-bar); color:var(--on-orange-bar); font-weight:700; font-size:14px; padding:13px 26px; border-radius:12px; text-decoration:none; white-space:nowrap; box-shadow:0 6px 20px color-mix(in srgb,var(--orange) 30%,transparent); transition:all .2s; } .hero-btn-p:hover { filter:brightness(1.07); transform:translateY(-2px); color:#fff; text-decoration:none; } .hero-btn-s { display:inline-flex; align-items:center; gap:8px; background:var(--wh-surface); border:2px solid var(--wh-line); color:var(--wh-text); font-weight:700; font-size:14px; padding:11px 22px; border-radius:12px; text-decoration:none; white-space:nowrap; transition:all .2s; } .hero-btn-s:hover { border-color:var(--navy); color:var(--wh-brand-text); text-decoration:none; } .hero-trust-bar { display:flex; align-items:center; gap:0; flex-wrap:nowrap; overflow:hidden; margin-top:4px; padding-top:20px; border-top:1px solid rgba(0,0,0,.08); width:100%; } .htb-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--wh-text); white-space:nowrap; flex-shrink:1; min-width:0; } .htb-item i { color:var(--tone-green-mid); font-size:10px; flex-shrink:0; } .htb-sep { color:var(--wh-ghost); font-size:12px; font-weight:300; padding:0 6px; flex-shrink:0; } @media (max-width:900px) { .hero-trust-bar { gap:0; } .htb-item { font-size:10px; gap:4px; } .htb-sep  { padding:0 4px; font-size:11px; } } .hero-t1 { background:var(--wh-surface); border-bottom:1px solid var(--wh-line); } .hero-t1 .hero-inner { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:580px; max-width:100%; } .hero-t1 .hero-left { padding:clamp(28px,5vmin,64px) 48px; padding-inline-start:40px; } .hero-t1 .hero-eyebrow { background:color-mix(in srgb,var(--orange) 8%,transparent); color:var(--tone-orange-mid); border:1px solid color-mix(in srgb,var(--orange) 20%,transparent); } .hero-t1 .hero-h1 { font-size:clamp(30px,3.5vw,52px); color:var(--wh-brand-text); } .hero-t1 .hero-right { overflow:hidden; padding:24px 0 24px 0; } .hero-t1 .hero-media { height:100%; border-radius:0; border-start-start-radius:24px; border-end-start-radius:24px; overflow:hidden; position:relative; min-height:400px; } .hero-t1 .hero-media img, .hero-t1 .hero-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .hero-t1 .hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(255,255,255,.1) 0%,transparent 25%), linear-gradient(to top,rgba(10,22,40,.15) 0%,transparent 35%); } @media (max-width:900px) { .hero-t1 .hero-inner { grid-template-columns:1fr; min-height:auto; } .hero-t1 .hero-right { display:none; } .hero-t1 .hero-left  { padding:44px 20px; } .hero-t1 .hero-h1    { font-size:clamp(26px,8vw,38px); } } .hero-t2 .hero-overlay { background:linear-gradient( 160deg, rgba(10,22,40,0.82) 0%, rgba(10,22,40,0.65) 40%, rgba(29,108,114,0.45) 100% ); } .hero-t2::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); background-size:200px 200px; mix-blend-mode:overlay; } .hero-t2 { background-color:#0A1628; background-size:cover; background-position:center; position:relative; } .hero-t2 .hero-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; padding:clamp(40px,8vmin,100px) 24px clamp(32px,6vmin,80px); text-align:center; position:relative; z-index:2; } .hero-t2 .hero-left { max-width:700px; width:100%; align-items:center; animation:t2fadeUp .7s ease forwards; } @keyframes t2fadeUp { from { opacity:0; transform:translateY(24px); } to   { opacity:1; transform:translateY(0); } } .hero-t2 .hero-eyebrow { background:rgba(255,255,255,.1); color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); letter-spacing:.1em; } .hero-t2 .eyebrow-dot { background:#22C55E; } .hero-t2 .hero-h1 { font-size:clamp(34px,5.5vw,72px); color:#fff; margin-bottom:20px; text-shadow:0 2px 20px rgba(0,0,0,.3); line-height:1.05; } .hero-t2 .hero-sub { color:rgba(255,255,255,.78); max-width:520px; margin-inline-start:auto; margin-inline-end:auto; font-size:16px; line-height:1.75; text-shadow:0 1px 8px rgba(0,0,0,.2); } .hero-t2 .hero-btns { justify-content:center; margin-bottom:32px; } .hero-t2 .hero-btn-p { box-shadow:0 8px 28px color-mix(in srgb,var(--orange) 45%,transparent); padding:14px 30px; font-size:15px; } .hero-t2 .hero-btn-s { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(8px); } .hero-t2 .hero-btn-s:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); color:#fff; } .hero-t2 .hero-trust-bar { border-top-color:rgba(255,255,255,.12); justify-content:center; padding-top:24px; margin-top:8px; } .hero-t2 .htb-item { color:rgba(255,255,255,.75); } .hero-t2 .htb-sep  { color:rgba(255,255,255,.2); } .hero-t2 .hero-inner::after { content:''; position:absolute; bottom:0; inset-inline-start:0; inset-inline-end:0; height:120px; z-index:0; pointer-events:none; background:linear-gradient(to bottom, transparent, rgba(10,22,40,.15)); } @media (max-width:900px) { .hero-t2 .hero-inner { min-height:520px; padding:80px 20px 60px; } .hero-t2 .hero-h1    { font-size:clamp(28px,9vw,44px); } .hero-t2 .hero-sub   { font-size:14px; } .hero-t2 .hero-btn-p { padding:12px 22px; font-size:14px; } } .hero-t3 { background:linear-gradient(135deg,#0A1628 0%,#0d2a45 55%,#1d6c72 100%); } .hero-t3::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; z-index:0; } .hero-t3 .hero-inner { display:grid; grid-template-columns:1fr 400px; align-items:center; min-height:540px; padding:0 48px; padding-inline-start:40px; gap:48px; position:relative; z-index:1; } .hero-t3 .hero-left { padding:clamp(24px,5vmin,64px) 0; } .hero-t3 .hero-eyebrow { background:color-mix(in srgb,var(--orange) 15%,transparent); color:color-mix(in srgb,var(--orange) 95%,transparent); border:1px solid color-mix(in srgb,var(--orange) 25%,transparent); } .hero-t3 .hero-h1 { font-size:clamp(32px,4vw,58px); color:#fff; } .hero-t3 .hero-sub { color:rgba(255,255,255,.6); } .hero-t3 .hero-btn-s { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; } .hero-t3 .hero-btn-s:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff; } .hero-t3 .hero-trust-bar { border-top-color:rgba(255,255,255,.1); } .hero-t3 .htb-item { color:rgba(255,255,255,.7); } .hero-t3 .htb-sep { color:rgba(255,255,255,.2); } .hero-t3 .hero-panel { background:rgba(255,255,255,.05); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.1); border-radius:20px; overflow:hidden; } .hero-t3 .hp-stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(255,255,255,.08); } .hero-t3 .hp-stat { padding:20px 12px; text-align:center; border-inline-end:1px solid rgba(255,255,255,.08); } .hero-t3 .hp-stat:last-child { border-inline-end:none; } .hero-t3 .hp-stat-num { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.04em; line-height:1; } .hero-t3 .hp-stat-num b { color:var(--orange); } .hero-t3 .hp-stat-label { font-size:9px; font-weight:700; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; } .hero-t3 .hp-features { padding:4px 0; } .hero-t3 .hp-feature { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.05); transition:background .15s; } .hero-t3 .hp-feature:last-child { border-bottom:none; } .hero-t3 .hp-feature:hover { background:rgba(255,255,255,.03); } .hero-t3 .hp-fi { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hero-t3 .hp-ft { font-size:12px; font-weight:700; color:#fff; margin-bottom:2px; } .hero-t3 .hp-fs { font-size:10.5px; color:rgba(255,255,255,.62); line-height:1.4; } @media (max-width:900px) { .hero-t3 .hero-inner { grid-template-columns:1fr; padding:44px 20px; gap:0; min-height:auto; } .hero-t3 .hero-left  { padding:0 0 32px; } .hero-t3 .hero-panel { display:none; } .hero-t3 .hero-h1    { font-size:clamp(26px,9vw,40px); } } .hero-desk-center .hero-left  { align-items:center; text-align:center; } .hero-desk-center .hero-btns  { justify-content:center; } .hero-desk-center .hero-sub   { margin-inline-start:auto; margin-inline-end:auto; text-align:center; } .hero-desk-center .hero-trust-bar { justify-content:center; } @media (max-width:900px)  { .hero-hide-mobile  { display:none !important; } } @media (min-width:901px)  { .hero-hide-desktop { display:none !important; } } @media (max-width:900px) { .hero-mob-center .hero-left      { align-items:center; text-align:center; } .hero-mob-center .hero-btns      { justify-content:center; } .hero-mob-center .hero-sub       { margin-inline-start:auto; margin-inline-end:auto; } .hero-mob-center .hero-trust-bar { justify-content:center; } } @media (max-width:900px) { .hero-mob-bg { background-size:cover !important; background-position:center !important; } .hero-mob-bg .hero-left { padding-top:52px !important; padding-bottom:52px !important; } } .stats-bar { background: linear-gradient(135deg, #0A1628 0%, #0d2a45 50%, #1d6c72 100%); position: relative; overflow: hidden; } .stats-bar::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .stats-bar::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb,var(--orange) 8%,transparent) 0%, transparent 70%); top: -200px; inset-inline-end: -100px; pointer-events: none; } .stats-inner { max-width: 960px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; z-index: 1; } .stat-item { padding: 36px 20px; text-align: center; position: relative; transition: transform .2s; } .stat-item:hover { transform: translateY(-2px); } .stat-item + .stat-item::before { content: ''; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,.1); } .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 18px; } .stat-num { font-size: clamp(24px, 3.5vw, 42px); font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; word-break: break-all; overflow-wrap: break-word; } .stat-num b { color: var(--orange); } .stat-lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.66); margin-top: 6px; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; } .stat-desc { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 4px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) { .stat-item { padding: 20px 8px; } .stat-icon { display: none; } .stat-num  { font-size: clamp(22px, 7vw, 32px); } .stat-desc { display: none; } .stat-lbl  { font-size: 9px; } } .section { padding: 40px 0; } .section-alt { background: var(--wh-surface); } .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media(max-width:1024px){ .section { padding: 32px 0; } } @media(max-width:700px){ .section { padding: 24px 0; } .section-inner { padding: 0 16px; } } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; } .section-title { font-size: clamp(20px, 2.5vw, 28px); font-weight: 800; color:var(--wh-brand-text); letter-spacing: -.03em; line-height: 1.1; position: relative; padding-inline-start: 14px; } .section-title::before { content: ''; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%; width: 4px; border-radius: 4px; background: var(--orange); } .section-link { font-size: 12.5px; font-weight: 700; color: var(--orange-text); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 100px; border: 1.5px solid color-mix(in srgb,var(--orange) 25%,transparent); background: color-mix(in srgb,var(--orange) 5%,transparent); transition: all .18s; } .section-link:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); text-decoration: none; } @media (max-width: 600px) { .section-title { font-size: 18px; padding-inline-start: 12px; } .section-link  { font-size: 11.5px; padding: 6px 11px; } }

.brands-section { background:linear-gradient(180deg,var(--wh-surface) 0%,var(--wh-surface-2) 100%); padding:56px 0 60px; border-top:1px solid var(--wh-line-soft); }
.brands-wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
.brands-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
.brands-head h2 { margin:0; font-size:clamp(24px,2.8vw,32px); font-weight:800; color:var(--wh-brand-text); letter-spacing:-.03em; line-height:1.15; }
.brands-head p { margin:6px 0 0; font-size:14.5px; color:var(--wh-muted); }
.brands-tools { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brands-all { font-size:14px; font-weight:700; color:var(--wh-brand-text); text-decoration:none; white-space:nowrap; }
.brands-all:hover { color:var(--orange-text); }
.brands-arrows { display:flex; gap:8px; }
.brands-arrow { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--wh-line-strong); background:var(--wh-surface); color:var(--wh-text); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(15,23,42,.08); transition:border-color .15s,color .15s,opacity .15s; }
.brands-arrow:hover:not(:disabled) { border-color:var(--orange); color:var(--orange-text); }
.brands-arrow:disabled { opacity:.35; cursor:default; }
.brands-rail { display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:16px 14px 40px; padding-inline-start:8px; margin:-16px -14px -40px; margin-inline-start:-8px; }
.brands-rail::-webkit-scrollbar { display:none; }
.brands-rail.is-short { justify-content:center; }
.brand-tile { flex:0 0 calc((100% - 26px * 4) / 5); min-width:200px; scroll-snap-align:start; display:block; text-decoration:none; }
@media (max-width:640px) { .brands-section { padding:32px 0 30px; } .brands-wrap { padding:0 16px; } .brands-head { margin-bottom:16px; } .brands-head h2 { font-size:22px; } .brands-all { font-size:13px; } .brands-arrows { display:none; } .brands-rail { gap:12px; padding:6px 16px 22px 16px; margin:-6px -16px -22px -16px; scroll-padding-inline:16px; } .brand-tile { flex-basis:46%; min-width:0; } .brand-tile .brand-plate { border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.08), 0 8px 14px -10px rgba(15,23,42,.28); } .brand-tile .brand-name { min-height:38px; font-size:13px; padding:0 10px; } .brand-tile:hover .brand-plate { transform:none; } }

.hiw2{position:relative;overflow:hidden;color:#fff;padding:76px 24px;background:linear-gradient(160deg,var(--navy) 0%,color-mix(in srgb,var(--navy) 62%,#000) 100%)}
.hiw2::before,.hiw2::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.hiw2::before{width:520px;height:520px;inset-inline-end:-160px;top:-200px;background:radial-gradient(circle,color-mix(in srgb,var(--orange) 26%,transparent),transparent 68%)}
.hiw2::after{width:420px;height:420px;inset-inline-start:-140px;bottom:-200px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%)}
.hiw2-inner{position:relative;z-index:1;max-width:1040px;margin:0 auto}
.hiw2-head{text-align:center;margin-bottom:48px}
.hiw2-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.hiw2-title{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.18;font-weight:800;letter-spacing:-.03em;color:#fff}
.hiw2-title span{color:var(--orange)}
.hiw2-steps{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.hiw2-steps::before{content:'';position:absolute;top:58px;inset-inline-start:16.6%;inset-inline-end:16.6%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px)}
.hiw2-step{position:relative;text-align:center;padding:30px 24px 28px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);transition:transform .2s,background .2s}
.hiw2-step:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.hiw2-icon{position:relative;width:60px;height:60px;border-radius:18px;margin:0 auto 18px;display:grid;place-items:center;background:var(--wh-surface);color:var(--wh-brand-text);font-size:22px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.hiw2-icon b{position:absolute;top:-8px;inset-inline-end:-8px;width:24px;height:24px;border-radius:50%;background:var(--orange-bar);color:var(--on-orange-bar);font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid var(--navy)}
.hiw2-step h3{margin:0 0 8px;font-size:17px;font-weight:800;color:#fff}
.hiw2-step p{margin:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.72)}
.hiw2-cta{text-align:center}
.hiw2-btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange-bar);color:var(--on-orange-bar);text-decoration:none;font-weight:800;font-size:15px;padding:15px 34px;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .15s,filter .15s}
.hiw2-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.hiw2-note{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6)}
@media(max-width:820px){.hiw2{padding:56px 18px}.hiw2-steps{grid-template-columns:1fr;gap:12px}.hiw2-steps::before{display:none}.hiw2-step{display:grid;grid-template-columns:60px 1fr;column-gap:16px;text-align:start;padding:20px}.hiw2-icon{margin:0;grid-row:1 / span 2}.hiw2-step h3{margin:2px 0 4px}.hiw2-head{margin-bottom:30px}}

/* Hero on small screens: background image, overlay, light text and height come from custom properties on the hero */
@media(max-width:900px){ .hero-mob-bg{background-image:var(--mob-bg) !important;} .hero-mob-bg .hero-left::before{content:"";position:absolute;inset:0;background:var(--mob-overlay);z-index:-1;} .hero-mob-bg .hero-left{position:relative;}
.hero-mob-bg.hero-mob-light .hero-h1{color:#fff !important;} .hero-mob-bg.hero-mob-light .hero-sub{color:rgba(255,255,255,.85) !important;} .hero-mob-bg.hero-mob-light .hero-eyebrow{color:rgba(255,255,255,.8) !important;background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.2) !important;} .hero-mob-bg.hero-mob-light .hero-btn-s{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.3) !important;color:#fff !important;} .hero-mob-bg.hero-mob-light .hero-trust-bar{border-top-color:rgba(255,255,255,.15) !important;} .hero-mob-bg.hero-mob-light .htb-item{color:rgba(255,255,255,.8) !important;} .hero-mob-bg.hero-mob-light .htb-sep{color:rgba(255,255,255,.2) !important;}
}
@media(max-width:900px){ .hero-mob-h .hero-inner{min-height:var(--mob-h) !important;} }

.cat-card:nth-child(8n+1) .cat-ico-bg { background:var(--tone-orange-soft); } .cat-card:nth-child(8n+2) .cat-ico-bg { background:var(--tone-violet-soft); } .cat-card:nth-child(8n+3) .cat-ico-bg { background:var(--tone-red-soft); } .cat-card:nth-child(8n+4) .cat-ico-bg { background:var(--tone-blue-soft); } .cat-card:nth-child(8n+5) .cat-ico-bg { background:var(--tone-green-soft); } .cat-card:nth-child(8n+6) .cat-ico-bg { background:var(--tone-amber-soft); } .cat-card:nth-child(8n+7) .cat-ico-bg { background:var(--tone-cyan-soft); } .cat-card:nth-child(8n+8) .cat-ico-bg { background:var(--tone-violet-soft); } .prod-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 16px; align-items: stretch; } @media (max-width: 1200px) { .prod-grid { grid-template-columns: repeat(min(var(--cols, 4), 4), 1fr); } } @media (max-width: 900px)  { .prod-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px)  { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } .pcard-img-wrap { aspect-ratio: 1; background: var(--wh-surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; } .pcard-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; } .pcard:hover .pcard-img-wrap img { transform: scale(1.06); } .pcard { background:var(--wh-surface); border-radius:16px; overflow:hidden; border:1.5px solid var(--wh-line-soft); display:flex; flex-direction:column; transition:border-color .2s,box-shadow .2s,transform .2s; text-decoration:none; } .pcard:hover { border-color:color-mix(in srgb,var(--orange) 55%,var(--wh-surface)); box-shadow:0 8px 24px rgba(0,0,0,.09); transform:translateY(-3px); } .pcard-img-wrap { aspect-ratio:1; background:var(--wh-surface-2); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; } .pcard-img-wrap img { width:100%; height:100%; object-fit:contain; transition:transform .4s ease; } .pcard:hover .pcard-img-wrap img { transform:scale(1.06); }     .pcard-body { padding:10px 11px 0; display:flex; flex-direction:column; flex:1; } .pcard-brand { font-size:10px; font-weight:700; color:var(--wh-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; } .pcard-name { font-size:11.5px; font-weight:600; color:var(--wh-ink); line-height:1.4; height:2.8em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .pcard-foot { padding:8px 11px 11px; border-top:1.5px solid var(--wh-line-soft); display:flex; flex-direction:column; gap:6px; min-height:58px; justify-content:space-between; margin-top:auto; } .pcard-status { display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:600; letter-spacing:.02em; min-height:14px; } .pcard-status-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; display:inline-block; } .pcard-status-dot.green { background:#16A34A; } .pcard-status-dot.amber { background:#D97706; } .pcard-status-text.green { color:var(--tone-green-mid); } .pcard-status-text.amber { color:var(--tone-orange-mid); } .pcard-act { display:flex; align-items:center; justify-content:space-between; gap:6px; } .pcard-price { font-size:13px; font-weight:800; color:var(--wh-brand-text); white-space:nowrap; flex-shrink:0; } .pcc-add { width:30px; height:30px; min-width:30px; border-radius:9px; border:none; cursor:pointer; background:linear-gradient(135deg,var(--orange),color-mix(in srgb,var(--orange) 85%,#000)); color:var(--on-orange); font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px color-mix(in srgb,var(--orange) 45%,transparent); flex-shrink:0; transition:all .15s; } .pcc-add:hover { transform:scale(1.1); box-shadow:0 5px 14px color-mix(in srgb,var(--orange) 55%,transparent); } .pcc-add:disabled { opacity:.7; pointer-events:none; }    .pcard-login-btn { width:100%; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--orange),color-mix(in srgb,var(--orange) 85%,#000)); border:none; cursor:pointer; color:var(--on-orange); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; letter-spacing:.02em; box-shadow:0 3px 10px color-mix(in srgb,var(--orange) 35%,transparent); transition:all .15s; } .pcard-login-btn:hover { box-shadow:0 5px 14px color-mix(in srgb,var(--orange) 50%,transparent); transform:translateY(-1px); } .pcard-login-btn i { color:rgba(255,255,255,.8); }  .pcc-stepper { display:flex; align-items:center; background:var(--navy); border-radius:9px; overflow:hidden; box-shadow:0 2px 8px rgba(10,22,40,.25); height:30px; } .pcc-s-btn { width:28px; height:34px; border:none; background:transparent; color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s; flex-shrink:0; } .pcc-s-btn:hover { background:rgba(255,255,255,.18); } .pcc-qty { min-width:22px; text-align:center; font-size:12px; font-weight:800; color:#fff; padding:0 2px; }       @keyframes marquee { 0%   { transform: translateX(0); } 100% { transform: translateX(-50%); } }            .hiw-title { font-size: 15px; font-weight: 800; color: var(--wh-brand-text); margin-bottom: 8px; }       @keyframes orbDrift{from{transform:translate(0,0)}to{transform:translate(20px,20px)}}     .hiw-title{font-size:clamp(24px,3vw,38px);font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.15;margin:0}                     
.pcard-status-dot.red { background:#DC2626; }
.pcard-status-text.red { color:var(--tone-red-mid); }