/* 7kh5og.fun — spice bazaar palette. prefix .spice- */

:root{
  --spice-bg:#1b1410;
  --spice-bg2:#241b15;
  --spice-bg3:#2f231b;
  --spice-line:#4a3527;
  --spice-saffron:#f0a828;
  --spice-mint:#4fbf9a;
  --spice-text:#f3e7d8;
  --spice-mute:#b39d86;
  --spice-cut:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(240,168,40,.13), transparent 62%),
    radial-gradient(760px 480px at 4% 24%, rgba(79,191,154,.09), transparent 60%),
    var(--spice-bg);
  color:var(--spice-text);
  font-family:'Mulish',-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.68;
  overflow-x:hidden;
}

h1,h2,h3,h4,.spice-num,.spice-logo__t{
  font-family:'Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.005em;
}

a{color:var(--spice-mint);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- skip ---------- */
.spice-skip{
  position:absolute;left:-9999px;top:0;background:var(--spice-saffron);
  color:#1b1410;padding:14px 22px;z-index:99;min-height:44px
}
.spice-skip:focus{left:8px;top:8px}

/* ---------- shell ---------- */
.spice-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
.spice-bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:12px 22px;
  background:rgba(27,20,16,.94);
  border-bottom:1px solid var(--spice-line);
  backdrop-filter:blur(9px);
}
.spice-logo{display:flex;align-items:center;gap:11px;color:var(--spice-text);min-height:44px}
.spice-logo:hover{text-decoration:none}
.spice-logo__svg{width:36px;height:36px;flex:0 0 36px}
.spice-logo__t{font-size:20px;letter-spacing:.02em;display:flex;flex-direction:column}
.spice-logo__sub{
  font-family:'Mulish',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--spice-saffron)
}
.spice-nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.spice-nav a{
  color:var(--spice-mute);font-size:14px;font-weight:600;
  padding:11px 12px;min-height:44px;display:flex;align-items:center;border-radius:3px
}
.spice-nav a:hover{color:var(--spice-saffron);background:var(--spice-bg3);text-decoration:none}

/* ---------- CTA ---------- */
.spice-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 30px;
  background:linear-gradient(103deg,var(--spice-saffron),#ffc861);
  color:#1b1410;font-weight:800;font-size:16px;letter-spacing:.01em;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  transition:filter .18s ease,transform .18s ease;
}
.spice-cta:hover{filter:brightness(1.09);transform:translateY(-1px);text-decoration:none}
.spice-cta--ghost{
  background:transparent;color:var(--spice-mint);
  box-shadow:inset 0 0 0 1.6px var(--spice-mint);font-weight:700
}
.spice-cta--ghost:hover{background:rgba(79,191,154,.1)}
.spice-cta--sm{min-height:44px;padding:10px 18px;font-size:14px;flex:0 0 auto}

/* ---------- sections ---------- */
.spice-sec{padding:62px 0;border-top:1px solid var(--spice-line)}
.spice-over{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--spice-saffron);margin-bottom:12px
}
.spice-sec h2{font-size:clamp(23px,3.1vw,33px);margin-bottom:14px;max-width:26ch}
.spice-lead{color:var(--spice-mute);max-width:74ch;margin-bottom:26px}

.spice-rule{
  height:9px;margin:0;border:0;
  background-image:radial-gradient(circle,var(--spice-saffron) 1.7px,transparent 1.9px);
  background-size:15px 9px;opacity:.42
}

/* ---------- hero ---------- */
.spice-hero{padding:56px 0 66px}
.spice-hero__grid{display:grid;grid-template-columns:1.42fr .88fr;gap:44px;align-items:start}
.spice-hero h1{font-size:clamp(28px,4.3vw,45px);margin:10px 0 18px}
.spice-hero__lead{font-size:17.5px;color:var(--spice-mute);margin-bottom:26px;max-width:60ch}
.spice-hero__btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}

.spice-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spice-kpi div{
  background:var(--spice-bg2);border-left:3px solid var(--spice-saffron);
  padding:14px 15px;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)
}
.spice-kpi .spice-num{display:block;font-size:20px;color:var(--spice-saffron)}
.spice-kpi span{font-size:12.5px;color:var(--spice-mute);display:block;margin-top:3px}

.spice-jar{
  background:var(--spice-bg2);border:1px solid var(--spice-line);
  padding:26px 24px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))
}
.spice-jar h3{font-size:19px;margin-bottom:14px;color:var(--spice-saffron)}
.spice-jar dl{display:grid;grid-template-columns:1fr auto;gap:9px 14px;font-size:14.5px}
.spice-jar dt{color:var(--spice-mute)}
.spice-jar dd{text-align:right;color:var(--spice-text);font-weight:700}
.spice-jar p{font-size:13px;color:var(--spice-mute);margin-top:16px}

/* ---------- card grids ---------- */
.spice-grid{display:grid;gap:16px}
.spice-grid--2{grid-template-columns:repeat(2,1fr)}
.spice-grid--3{grid-template-columns:repeat(3,1fr)}
.spice-grid--4{grid-template-columns:repeat(4,1fr)}

.spice-card{
  background:var(--spice-bg2);
  border:1px solid var(--spice-line);
  border-left:3px solid var(--spice-mint);
  padding:20px 20px 22px;
  clip-path:polygon(0 0,calc(100% - var(--spice-cut)) 0,100% var(--spice-cut),100% 100%,0 100%)
}
.spice-card h3{font-size:17.5px;margin-bottom:8px}
.spice-card p{font-size:14.5px;color:var(--spice-mute)}
.spice-card--saffron{border-left-color:var(--spice-saffron)}
.spice-card__tag{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--spice-saffron);display:block;margin-bottom:9px
}
.spice-card__val{font-family:'Frank Ruhl Libre',serif;font-size:26px;color:var(--spice-saffron);display:block}

.spice-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spice-chip{
  background:linear-gradient(160deg,var(--spice-bg3),var(--spice-bg2));
  border-bottom:2px solid var(--spice-saffron);padding:15px 16px
}
.spice-chip h3{font-size:15.5px;margin-bottom:4px}
.spice-chip span{font-size:12.5px;color:var(--spice-mute);display:block}

.spice-steps{counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.spice-steps > div{position:relative;padding:26px 20px 22px;background:var(--spice-bg2);border-top:2px solid var(--spice-saffron)}
.spice-steps > div::before{
  counter-increment:st;content:counter(st);
  position:absolute;top:-18px;right:14px;
  font-family:'Frank Ruhl Libre',serif;font-size:52px;color:rgba(240,168,40,.2)
}
.spice-steps h3{font-size:17px;margin-bottom:7px}
.spice-steps p{font-size:14.5px;color:var(--spice-mute)}

/* tables */
.spice-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--spice-line)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--spice-line)}
th{background:var(--spice-bg3);color:var(--spice-saffron);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
td:first-child{color:var(--spice-text);font-weight:700}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(47,35,27,.42)}

.spice-access{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px}
.spice-access section{padding-left:20px;border-left:2px solid var(--spice-line)}
.spice-access h3{font-size:17px;margin-bottom:7px;color:var(--spice-text)}
.spice-access p{font-size:14.5px;color:var(--spice-mute)}

.spice-rev{
  background:var(--spice-bg2);padding:22px 22px 20px;
  border:1px solid var(--spice-line);
  clip-path:polygon(0 22px,22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)
}
.spice-rev p{font-size:14.5px;margin-bottom:14px}
.spice-rev footer{font-size:12.5px;color:var(--spice-mute);border-top:1px solid var(--spice-line);padding-top:11px}
.spice-rev footer span{color:var(--spice-saffron);font-weight:700}

.spice-final{
  background:linear-gradient(126deg,var(--spice-bg3),rgba(240,168,40,.09));
  border:1px solid var(--spice-line);
  padding:44px 38px;text-align:center;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))
}
.spice-final h2{margin:0 auto 14px;max-width:30ch}
.spice-final .spice-lead{margin:0 auto 26px}

details{
  background:var(--spice-bg2);border:1px solid var(--spice-line);
  margin-bottom:10px;padding:0 20px
}
summary{
  cursor:pointer;list-style:none;padding:16px 0;min-height:52px;
  display:flex;align-items:center;gap:12px;
  font-family:'Frank Ruhl Libre',Georgia,serif;font-size:16.5px;font-weight:600
}
summary::-webkit-details-marker{display:none}
summary::before{content:'+';color:var(--spice-saffron);font-size:21px;flex:0 0 16px}
details[open] summary::before{content:'\2212'}
details p{padding:0 0 18px 28px;font-size:14.5px;color:var(--spice-mute)}

.spice-author{background:var(--spice-bg2);border-left:3px solid var(--spice-mint);padding:30px 30px 26px}
.spice-author p{font-size:14.5px;color:var(--spice-mute);margin-bottom:12px;max-width:88ch}

.spice-foot{border-top:1px solid var(--spice-line);padding:36px 0 46px;font-size:13.5px;color:var(--spice-mute)}
.spice-foot p{margin-bottom:11px;max-width:92ch}
.spice-foot__age{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:2px solid var(--spice-saffron);color:var(--spice-saffron);
  font-weight:800;font-size:14px;margin-right:14px;float:left
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .spice-hero__grid{grid-template-columns:1fr;gap:30px}
  .spice-grid--4,.spice-shelf{grid-template-columns:repeat(2,1fr)}
  .spice-grid--3,.spice-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .spice-nav{display:none}
  .spice-kpi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{font-size:16px}
  .spice-wrap{padding:0 16px}
  .spice-bar{padding:10px 16px}
  .spice-sec{padding:44px 0}
  .spice-hero{padding:36px 0 46px}
  .spice-grid--2,.spice-grid--3,.spice-grid--4,
  .spice-shelf,.spice-steps,.spice-access,.spice-kpi{grid-template-columns:1fr}
  .spice-access section{padding-left:14px}
  .spice-final{padding:30px 20px}
  .spice-author{padding:22px 18px}
  .spice-cta{width:100%}
  .spice-jar{clip-path:none}
}