/* /css/homepage-v4.css */
/* CSProfile homepage V7 - search-first database dashboard */

:root{
  --home-bg:#050914;
  --home-panel:rgba(13,20,36,.94);
  --home-panel-2:rgba(17,26,45,.90);
  --home-card:rgba(9,14,26,.96);
  --home-line:rgba(255,255,255,.085);
  --home-line-2:rgba(139,92,246,.34);
  --home-text:#f5f7ff;
  --home-muted:#9aa6c3;
  --home-muted-2:#c7d2fe;
  --home-purple:#8b5cf6;
  --home-purple-2:#a78bfa;
  --home-blue:#60a5fa;
  --home-orange:#f59e0b;
  --home-green:#54e38f;
  --home-shadow:0 20px 80px rgba(0,0,0,.38);
}

body.csprofile-homepage{
  margin:0;
  min-height:100vh;
  color:var(--home-text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 12% 0%,rgba(245,158,11,.09),transparent 26%),
    radial-gradient(circle at 88% 0%,rgba(139,92,246,.18),transparent 34%),
    radial-gradient(circle at 56% 0%,rgba(96,165,250,.08),transparent 30%),
    var(--home-bg);
}

body.csprofile-homepage *,
body.csprofile-homepage *::before,
body.csprofile-homepage *::after{box-sizing:border-box}
body.csprofile-homepage a{-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}

.home-shell{width:min(1480px,calc(100% - 36px));margin:0 auto;padding:22px 0 42px}
.home-market-panel,.home-section{border:1px solid var(--home-line);border-radius:14px;background:linear-gradient(180deg,rgba(17,26,44,.96),rgba(9,14,26,.96));box-shadow:var(--home-shadow)}

.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:28px;overflow:hidden;padding:36px;min-height:440px;isolation:isolate;background:linear-gradient(90deg,rgba(12,18,32,.98),rgba(12,18,32,.72)),radial-gradient(circle at 72% 24%,rgba(139,92,246,.25),transparent 35%),radial-gradient(circle at 84% 72%,rgba(96,165,250,.10),transparent 32%),var(--home-panel)}
.home-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 72%);opacity:.65}
.home-hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.75),rgba(96,165,250,.45),transparent);pointer-events:none}
.hero-glow{position:absolute;border-radius:999px;filter:blur(8px);opacity:.7;pointer-events:none}.hero-glow-one{right:210px;top:78px;width:190px;height:190px;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 65%)}.hero-glow-two{right:36px;bottom:30px;width:260px;height:260px;background:radial-gradient(circle,rgba(96,165,250,.12),transparent 68%)}

.home-hero-copy{position:relative;z-index:1;align-self:center;max-width:850px}.home-kicker,.home-section-kicker{margin:0 0 10px;color:#c084fc;font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.home-hero h1{margin:0;max-width:880px;color:#fff;font-size:64px;line-height:.96;letter-spacing:-.06em;font-weight:950}.home-lead{margin:18px 0 0;max-width:680px;color:var(--home-muted-2);font-size:17px;line-height:1.55}

.home-search{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 128px;align-items:center;width:min(760px,100%);height:66px;margin-top:26px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(6,11,20,.82);box-shadow:0 18px 60px rgba(0,0,0,.32),0 0 0 1px rgba(139,92,246,.12);overflow:hidden}.home-search:focus-within{border-color:rgba(139,92,246,.62);box-shadow:0 18px 60px rgba(0,0,0,.36),0 0 0 4px rgba(139,92,246,.13)}.home-search-icon{display:grid;place-items:center;color:#c084fc;font-size:24px}.home-search input{height:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.home-search input::placeholder{color:#78849f}.home-search button{height:calc(100% - 12px);margin-right:6px;border:0;border-radius:10px;background:linear-gradient(135deg,#6d3df2,#8b5cf6 55%,#60a5fa);color:#fff;font-weight:950;cursor:pointer}.home-search button:hover{filter:brightness(1.08)}

.home-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.home-chip{height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--home-line);border-radius:999px;background:rgba(13,20,34,.72);color:#dbe3f7;font-size:13px;font-weight:850;white-space:nowrap;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease}.home-chip:hover,.home-chip.active{border-color:rgba(139,92,246,.70);background:rgba(139,92,246,.18);color:#d8b4fe;transform:translateY(-1px)}

.home-market-console{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;min-width:0}.console-topline{height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px solid var(--home-line);border-radius:12px;background:rgba(6,11,20,.72);font-size:12px;color:var(--home-muted)}.console-topline span{display:flex;align-items:center;gap:8px}.console-topline span::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--home-green);box-shadow:0 0 18px rgba(84,227,143,.8)}.console-topline b{color:#fff;font-size:13px}
.console-feature-card{position:relative;min-height:172px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:18px;border:1px solid rgba(139,92,246,.28);border-radius:14px;background:linear-gradient(180deg,rgba(18,27,46,.86),rgba(7,12,22,.96));transition:transform .15s ease,border-color .15s ease}.console-feature-card:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.48)}.console-feature-card::before{content:"";position:absolute;inset:0;background-image:var(--item);background-size:300px auto;background-position:96% 24%;background-repeat:no-repeat;opacity:.72;filter:drop-shadow(0 24px 22px rgba(0,0,0,.55));transform:rotate(-8deg)}.console-feature-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,11,20,.98) 0%,rgba(6,11,20,.84) 46%,rgba(6,11,20,.38) 100%)}.console-feature-card span,.console-feature-card strong,.console-feature-card small{position:relative;z-index:1}.console-feature-card span{color:#c084fc;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.console-feature-card strong{display:block;margin-top:7px;color:#fff;font-size:24px;font-weight:950;letter-spacing:-.03em}.console-feature-card small{display:block;margin-top:6px;color:var(--home-muted-2);font-size:12px}
.console-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.console-stats a{min-height:78px;padding:14px;border:1px solid var(--home-line);border-radius:12px;background:rgba(13,20,34,.78);transition:transform .15s ease,border-color .15s ease}.console-stats a:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.48)}.console-stats strong{display:block;color:#fff;font-size:26px;font-weight:950;letter-spacing:-.04em}.console-stats span{display:block;margin-top:4px;color:var(--home-muted);font-size:12px}
.console-list{border:1px solid var(--home-line);border-radius:14px;background:rgba(6,11,20,.58);overflow:hidden}.console-list-head,.console-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}.console-list a:last-child{border-bottom:0}.console-list-head{color:var(--home-muted);font-size:12px}.console-list-head a{display:inline;padding:0;border:0;color:#c084fc;font-weight:850}.console-list b{color:#fff;font-size:13px}.console-list em{font-style:normal;color:var(--home-muted);font-size:12px;text-align:right}.console-list a:hover{background:rgba(139,92,246,.10)}

.home-section{margin-top:16px;padding:24px;background:radial-gradient(circle at 0% 0%,rgba(139,92,246,.08),transparent 26%),linear-gradient(180deg,rgba(15,22,38,.93),rgba(8,13,24,.96))}.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.home-section-head.compact{margin-bottom:14px}.home-section h2{margin:0;color:#fff;font-size:28px;line-height:1.06;font-weight:950;letter-spacing:-.035em}.home-section-head p:not(.home-section-kicker){margin:7px 0 0;color:var(--home-muted);font-size:13px;line-height:1.45}.home-link{color:#c084fc;text-decoration:none;font-weight:950;font-size:13px;white-space:nowrap}.home-link:hover{color:#fff}

.tool-dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tool-row{position:relative;min-height:104px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--home-line);border-radius:12px;background:linear-gradient(180deg,rgba(17,26,44,.90),rgba(9,14,26,.96));overflow:hidden;transition:transform .15s ease,border-color .15s ease,background .15s ease}.tool-row:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.42);background:linear-gradient(180deg,rgba(24,36,58,.98),rgba(9,14,26,.98))}.tool-row-featured{border-color:rgba(139,92,246,.44)}.tool-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(96,165,250,.12));color:#d8b4fe;font-size:20px}.tool-row strong{display:block;color:#fff;font-size:16px;font-weight:950}.tool-row small{display:block;margin-top:5px;color:var(--home-muted-2);font-size:12px;line-height:1.35}.tool-row em{align-self:start;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#a78bfa;font-style:normal;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}

.browse-grid{display:grid;grid-template-columns:1.2fr repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:12px}.browse-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:18px;border:1px solid var(--home-line);border-radius:12px;background:rgba(13,20,34,.92);transition:transform .15s ease,border-color .15s ease}.browse-card.big{grid-row:span 2}.browse-card::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:contain;background-position:right center;background-repeat:no-repeat;opacity:.38;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));transform:scale(1.08)}.browse-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,14,26,.99) 0%,rgba(9,14,26,.86) 46%,rgba(9,14,26,.32) 100%)}.browse-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.58)}.browse-card span,.browse-card strong{position:relative;z-index:1}.browse-card span{color:#c084fc;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.browse-card strong{display:block;margin-top:7px;max-width:72%;color:#fff;font-size:18px;font-weight:950;line-height:1.12}.browse-card.big strong{font-size:28px;max-width:60%}

.home-split-section{display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-mini-panel{min-width:0}.home-collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.collection-card,.guide-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--home-line);border-radius:12px;color:#fff;background:rgba(13,20,34,.90);transition:transform .15s ease,border-color .15s ease}.collection-card:hover,.guide-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.58)}.collection-card::before,.guide-card::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg);background-size:contain;background-position:right center;background-repeat:no-repeat;opacity:.34;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));transform:scale(1.08)}.collection-card::after,.guide-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,14,26,.99) 0%,rgba(9,14,26,.90) 52%,rgba(9,14,26,.50) 100%),radial-gradient(circle at 88% 50%,rgba(139,92,246,.13),transparent 45%)}.collection-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;padding:15px}.collection-card::before{background-size:135px auto;opacity:.28}.collection-card strong{display:block;font-size:16px;font-weight:950;line-height:1.12;max-width:70%}.collection-card span{display:block;margin-top:6px;color:var(--home-muted-2);font-size:12px;line-height:1.35;max-width:70%}.guide-card-list{display:grid;gap:10px}.guide-card{display:block;min-height:118px;padding:15px 170px 15px 15px}.guide-card::before{background-size:178px 100%;background-position:right center;opacity:.42;transform:none}.guide-card span{color:#c084fc;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.075em}.guide-card strong{display:block;margin-top:7px;font-size:16px;font-weight:950;line-height:1.16}.guide-card small{display:block;margin-top:6px;color:var(--home-muted-2);font-size:12px;line-height:1.35}

.home-footer{border-top:1px solid rgba(255,255,255,.08);background:#050914;padding:34px 18px 24px}.home-footer-grid{width:min(1480px,100%);margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px}.home-footer p{color:var(--home-muted);font-size:13px;line-height:1.5}.home-footer h4{margin:0 0 10px;color:#c084fc;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.home-footer a{display:block;color:var(--home-muted-2);text-decoration:none;font-size:13px;margin:7px 0}.home-footer a:hover{color:#fff}.footer-brand{display:block;color:#fff;font-size:18px;letter-spacing:.08em}.footer-brand span{color:#c084fc}.home-disclaimer{width:min(1480px,100%);margin:28px auto 0!important;color:#6f7b91!important;font-size:12px!important}

body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav a,body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav a:link,body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav a:visited,body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav a:hover,body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav a:active,body.csprofile-homepage .topbar.csprofile-header .cs-mega-nav .nav-item{text-decoration:none!important;-webkit-text-decoration-line:none!important;text-decoration-line:none!important}

@media(max-width:1180px){.home-hero{grid-template-columns:1fr}.home-market-console{display:grid;grid-template-columns:1fr 1fr}.console-topline,.console-list{grid-column:1/-1}.tool-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.browse-grid{grid-template-columns:1fr 1fr}.browse-card.big{grid-row:auto}.home-split-section{grid-template-columns:1fr}.home-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.home-shell{width:calc(100% - 24px);padding:16px 0 30px}.home-hero{padding:24px 18px;min-height:0}.home-hero h1{font-size:42px}.home-lead{font-size:15px}.home-search{grid-template-columns:46px minmax(0,1fr);height:auto;min-height:60px;overflow:visible}.home-search button{grid-column:1/-1;width:calc(100% - 12px);height:44px;margin:0 6px 6px}.home-chipbar{flex-wrap:nowrap;overflow-x:auto;margin-left:-18px;margin-right:-18px;padding:0 18px 10px;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.85) rgba(255,255,255,.06)}.home-chip{flex:0 0 auto;height:36px;font-size:13px;padding:0 13px}.home-market-console{display:grid;grid-template-columns:1fr}.console-feature-card{min-height:150px}.console-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.home-section{padding:18px}.home-section-head{align-items:flex-start;flex-direction:column;gap:8px}.home-section h2{font-size:24px}.tool-dashboard,.browse-grid,.home-collection-grid,.home-footer-grid{grid-template-columns:1fr}.browse-grid{grid-auto-rows:132px}.browse-card.big strong,.browse-card strong{font-size:18px;max-width:74%}.guide-card{padding-right:120px;min-height:112px}.guide-card::before{background-size:132px 100%}}
@media(max-width:520px){.home-hero h1{font-size:36px}.console-stats{grid-template-columns:1fr}.tool-row{grid-template-columns:40px minmax(0,1fr);align-items:start}.tool-row em{grid-column:2}.browse-card::before,.collection-card::before,.guide-card::before{opacity:.20}.guide-card{padding:15px;min-height:112px}.guide-card::after{background:rgba(9,14,26,.88)}}

/* =========================================================
   Homepage V8 tidy pass
   Adds real tool imagery back, tightens spacing and removes the last
   placeholder/icon-only feeling from the tool dashboard.
   ========================================================= */
.home-hero{
  min-height:520px;
  align-items:center;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 18% 28%,rgba(139,92,246,.16),transparent 30%),
    radial-gradient(circle at 76% 42%,rgba(96,165,250,.10),transparent 32%),
    linear-gradient(90deg,rgba(12,18,32,.98),rgba(12,18,32,.82));
  background-size:32px 32px,32px 32px,auto,auto,auto;
}
.home-hero h1{
  max-width:850px;
  font-size:clamp(44px,5vw,72px);
  letter-spacing:-.055em;
  text-shadow:0 4px 0 rgba(0,0,0,.28);
}
.home-lead{
  max-width:720px;
  color:#dce7ff;
}
.home-search{
  max-width:760px;
  border-radius:16px;
  background:rgba(4,8,17,.78);
  box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035);
}
.home-chipbar{max-width:820px}
.home-market-console{align-self:center}
.console-feature-card{min-height:170px}
.console-feature-card::before{opacity:.34;background-size:82% auto;background-position:118% 48%}

.home-section{
  border-radius:14px;
}
.home-section-head{
  margin-bottom:20px;
}
.home-section h2{
  text-shadow:0 3px 0 rgba(0,0,0,.24);
}

.tool-dashboard{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.tool-row{
  min-height:118px;
  grid-template-columns:72px minmax(0,1fr) auto;
  padding:16px 14px;
  border-radius:13px;
  background:
    radial-gradient(circle at var(--mx,35%) var(--my,20%),rgba(139,92,246,.12),transparent 36%),
    linear-gradient(180deg,rgba(18,28,48,.92),rgba(8,13,24,.98));
}
.tool-row::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(139,92,246,.08);
  filter:blur(18px);
  pointer-events:none;
}
.tool-row-featured{
  background:
    radial-gradient(circle at 12% 30%,rgba(139,92,246,.22),transparent 34%),
    linear-gradient(180deg,rgba(22,31,55,.98),rgba(9,14,26,.98));
}
.tool-media{
  position:relative;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(96,165,250,.08));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.tool-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.16),transparent 42%);
  pointer-events:none;
}
.tool-media img{
  width:86%;
  height:86%;
  object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.50));
  transform:scale(1.04);
}
.tool-icon{display:none!important}
.tool-row strong{font-size:17px}
.tool-row small{font-size:12px;color:#c6d2ef}
.tool-row em{position:relative;z-index:2}

.browse-grid{
  grid-template-columns:1.05fr repeat(2,minmax(0,1fr));
  grid-auto-rows:142px;
}
.browse-card{
  border-radius:13px;
}
.browse-card::before{opacity:.46}
.browse-card.big::before{background-size:92% auto;background-position:112% center;opacity:.42}
.browse-card strong{max-width:76%}
.browse-card.big strong{max-width:66%}

.home-split-section{
  align-items:start;
}
.guide-card-list,
.home-collection-grid{
  gap:12px;
}
.collection-card,
.guide-card{
  border-radius:13px;
}

@media(max-width:1180px){
  .home-hero{min-height:auto;align-items:stretch}
  .tool-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .home-hero h1{text-shadow:0 3px 0 rgba(0,0,0,.25)}
  .tool-dashboard{grid-template-columns:1fr}
  .tool-row{grid-template-columns:64px minmax(0,1fr) auto;min-height:104px}
  .tool-media{width:64px;height:64px}
  .browse-grid{grid-auto-rows:128px}
}
@media(max-width:520px){
  .tool-row{grid-template-columns:60px minmax(0,1fr);gap:12px}
  .tool-media{width:60px;height:60px}
  .tool-row em{grid-column:2;justify-self:start;margin-top:-2px}
}

/* =========================================================
   Homepage V9 final polish pass
   Browse + collections + guides now carry proper visual weight.
   Tool cards are constrained so text never sits awkwardly over imagery.
   ========================================================= */

/* Tool cards: keep images supportive, not poster-sized */
.tool-row{
  min-height:116px !important;
  grid-template-columns:86px minmax(0,1fr) auto !important;
  align-items:center !important;
  padding:18px !important;
}
.tool-row > div,
.tool-row em{
  position:relative !important;
  z-index:3 !important;
}
.tool-media{
  width:86px !important;
  height:76px !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible !important;
  opacity:.96 !important;
}
.tool-media::after{display:none !important}
.tool-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform:scale(.92) !important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.62)) !important;
}
.tool-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(7,12,22,.86) 0%,rgba(7,12,22,.64) 38%,rgba(7,12,22,.88) 100%),
    radial-gradient(circle at 16% 48%,rgba(139,92,246,.12),transparent 36%);
  pointer-events:none;
}
.tool-row strong{
  font-size:17px !important;
  line-height:1.05 !important;
  text-shadow:0 3px 0 rgba(0,0,0,.30) !important;
}
.tool-row small{
  max-width:360px !important;
  color:#d7e2ff !important;
}

/* Browse section: denser, intentional dashboard layout */
.home-browse-section{
  background:
    radial-gradient(circle at 10% 0%,rgba(139,92,246,.10),transparent 30%),
    radial-gradient(circle at 86% 16%,rgba(96,165,250,.07),transparent 34%),
    linear-gradient(180deg,rgba(15,22,38,.96),rgba(7,12,22,.98)) !important;
}
.browse-grid{
  grid-template-columns:1.08fr .92fr .92fr !important;
  grid-auto-rows:156px !important;
  gap:14px !important;
}
.browse-card{
  padding:20px !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 84% 42%,rgba(139,92,246,.08),transparent 38%),
    linear-gradient(180deg,rgba(14,22,39,.96),rgba(6,11,20,.98)) !important;
  border-color:rgba(255,255,255,.095) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.browse-card::before{
  inset:-20px -28px -18px 20px !important;
  background-size:230px auto !important;
  background-position:right 52% !important;
  opacity:.30 !important;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.66)) saturate(1.08) !important;
  transform:none !important;
}
.browse-card::after{
  background:
    linear-gradient(90deg,rgba(6,11,20,.98) 0%,rgba(6,11,20,.78) 48%,rgba(6,11,20,.42) 100%),
    linear-gradient(0deg,rgba(6,11,20,.90) 0%,transparent 62%) !important;
}
.browse-card:hover{
  border-color:rgba(139,92,246,.52) !important;
  box-shadow:0 16px 46px rgba(0,0,0,.26),0 0 0 1px rgba(139,92,246,.11) !important;
}
.browse-card.big{
  grid-row:span 2 !important;
}
.browse-card.big::before{
  background-size:560px auto !important;
  background-position:120% 35% !important;
  opacity:.36 !important;
}
.browse-card span{
  color:#d58cff !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
}
.browse-card strong{
  max-width:78% !important;
  font-size:20px !important;
  line-height:1.08 !important;
  text-shadow:0 3px 0 rgba(0,0,0,.34) !important;
}
.browse-card.big strong{
  max-width:72% !important;
  font-size:31px !important;
}
.browse-knife::before{background-size:250px auto !important;background-position:108% 48% !important;opacity:.34 !important}
.browse-gloves::before{background-size:265px auto !important;background-position:112% 44% !important;opacity:.22 !important}
.browse-stickers::before{background-size:210px auto !important;background-position:100% 50% !important;opacity:.28 !important}
.browse-cases::before{background-size:210px auto !important;background-position:104% 52% !important;opacity:.24 !important}
.browse-collections::before{background-size:230px auto !important;background-position:110% 54% !important;opacity:.24 !important}

/* Split lower section: make collection cards feel finished */
.home-split-section{
  gap:22px !important;
  background:
    radial-gradient(circle at 20% 6%,rgba(139,92,246,.10),transparent 30%),
    radial-gradient(circle at 85% 16%,rgba(96,165,250,.08),transparent 32%),
    linear-gradient(180deg,rgba(15,22,38,.96),rgba(7,12,22,.98)) !important;
}
.home-collection-grid{
  gap:12px !important;
}
.collection-card{
  min-height:128px !important;
  padding:18px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(18,27,48,.94),rgba(8,13,24,.98)) !important;
}
.collection-card::before{
  inset:-18px -24px -16px 18px !important;
  background-size:190px auto !important;
  background-position:112% 48% !important;
  opacity:.26 !important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.62)) !important;
  transform:none !important;
}
.collection-card::after{
  background:
    linear-gradient(90deg,rgba(6,11,20,.98) 0%,rgba(6,11,20,.78) 52%,rgba(6,11,20,.42) 100%),
    radial-gradient(circle at 90% 50%,rgba(139,92,246,.16),transparent 46%) !important;
}
.collection-card strong{
  max-width:82% !important;
  font-size:18px !important;
  text-shadow:0 3px 0 rgba(0,0,0,.30) !important;
}
.collection-card span{
  max-width:82% !important;
  color:#d5def6 !important;
}

/* Guides: more image presence while still readable */
.guide-card-list{
  gap:12px !important;
}
.guide-card{
  min-height:128px !important;
  padding:18px 240px 18px 18px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(18,27,48,.94),rgba(8,13,24,.98)) !important;
}
.guide-card::before{
  width:245px !important;
  left:auto !important;
  right:0 !important;
  background-size:cover !important;
  background-position:center !important;
  opacity:.52 !important;
  transform:none !important;
  filter:saturate(1.06) contrast(1.04) !important;
}
.guide-card::after{
  background:
    linear-gradient(90deg,rgba(6,11,20,.99) 0%,rgba(6,11,20,.93) 50%,rgba(6,11,20,.58) 76%,rgba(6,11,20,.26) 100%),
    radial-gradient(circle at 88% 50%,rgba(139,92,246,.18),transparent 45%) !important;
}
.guide-card span,
.guide-card strong,
.guide-card small{
  position:relative !important;
  z-index:2 !important;
}
.guide-card strong{
  font-size:18px !important;
  text-shadow:0 3px 0 rgba(0,0,0,.30) !important;
}
.guide-card small{
  color:#d5def6 !important;
}

@media(max-width:1180px){
  .browse-grid{grid-template-columns:1fr 1fr !important;grid-auto-rows:146px !important}
  .browse-card.big{grid-row:auto !important}
  .browse-card.big strong{font-size:24px !important}
}
@media(max-width:820px){
  .tool-row{grid-template-columns:72px minmax(0,1fr) auto !important;padding:16px !important}
  .tool-media{width:72px !important;height:66px !important}
  .browse-grid{grid-template-columns:1fr !important;grid-auto-rows:132px !important}
  .browse-card.big strong,.browse-card strong{font-size:19px !important;max-width:78% !important}
  .collection-card{min-height:118px !important}
  .guide-card{padding:16px 150px 16px 16px !important;min-height:118px !important}
  .guide-card::before{width:160px !important;opacity:.42 !important}
}
@media(max-width:520px){
  .tool-row{grid-template-columns:64px minmax(0,1fr) !important}
  .tool-media{width:64px !important;height:58px !important}
  .tool-row em{grid-column:2 !important;justify-self:start !important}
  .browse-card::before,.collection-card::before{opacity:.18 !important}
  .guide-card{padding:16px !important}
  .guide-card::before{opacity:.20 !important;width:100% !important}
  .guide-card::after{background:rgba(6,11,20,.86) !important}
}