/* kashtan.network - espresso, chestnut, copper, cream */
:root {
  --bg: #100A07;
  --surface: #1A120D;
  --surface-2: #24180F;
  --line: rgba(246, 235, 221, .09);
  --text: #F6EBDD;
  --muted: #B19A86;
  --accent: #E0893A;
  --accent-2: #F3C77A;
  --chestnut: #6B3418;
  --accent-ink: #160D07;
  --accent-text: #F0A55C;
  --accent-glow: rgba(224, 137, 58, .5);
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;
  --fw-display: 600;
  --radius: 24px;
  color-scheme: dark;
}
h1, h2, h3 { letter-spacing: -0.02em; }
.gold-text { background: linear-gradient(100deg, #F3C77A 0%, #E0893A 35%, #FFE2AE 55%, #C8661F 85%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold 9s ease-in-out infinite; }
@keyframes gold { 50% { background-position: 100% 0; } }
.btn--primary { background: linear-gradient(135deg, #F3C77A, #E0893A 55%, #C8661F); color: var(--accent-ink); }
.eyebrow--center { display: flex; justify-content: center; margin-bottom: 36px; }
.eyebrow--center::before { display: none; }

.logo { font-size: 21px; gap: 10px; }
.logo__mark { width: 30px; height: 30px; }
.logo__net { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
@media (max-width: 999px) { .header__actions .btn--ghost { display: none; } }
@media (max-width: 420px) { .logo__net { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px)); padding-bottom: clamp(48px, 6vw, 80px);
  background: radial-gradient(70% 50% at 50% 0%, rgba(224,137,58,.16), transparent 70%); }
.hero__ribbons { position: absolute; left: 50%; top: -6%; width: min(1500px, 140vw); translate: calc(-50% + var(--mx, 0px)) var(--my, 0); opacity: .75; pointer-events: none; transition: translate .6s var(--ease-out); }
.hero__ribbons img { width: 100%; animation: drift 20s ease-in-out infinite; }
@keyframes drift { 50% { transform: rotate(-3deg) scale(1.04); } }
.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 24px; }
.hero__title { font-size: clamp(42px, 7.4vw, 108px); line-height: .98; font-weight: 600; letter-spacing: -0.035em; }
.hero__inner .lead { margin-inline: auto; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 480px) { .hero__cta .btn { flex: 1 1 100%; } }

/* Dashboard mockup */
.dash { position: relative; z-index: 2; margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: 210px 1fr; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #1D140E, #140D09); border: 1px solid rgba(243,199,122,.18); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 8px rgba(246,235,221,.03); font-size: 14px; }
.dash__glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(243,199,122,.7), transparent) top / 100% 1px no-repeat; }
.dash__side { padding: 22px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; background: rgba(0,0,0,.18); }
.dash__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: 0 8px; }
.dash__brand svg { width: 22px; height: 22px; }
.dash__side ul { display: grid; gap: 2px; }
.dash__side li { padding: 10px 12px; border-radius: 10px; color: var(--muted); }
.dash__side li.on { background: rgba(224,137,58,.14); color: var(--text); font-weight: 700; }
.dash__mgr { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.dash__mgr small { display: block; color: var(--muted); font-size: 12px; }
.dash__ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F3C77A, #C8661F); color: var(--accent-ink); font-weight: 700; }
.dash__main { padding: 22px; display: grid; gap: 16px; min-width: 0; }
.dash__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.dash__bal { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(243,199,122,.1); border: 1px solid rgba(243,199,122,.2); font-family: var(--font-body); }
.dash__bal small { color: var(--muted); font-size: 12px; } .dash__bal b { color: var(--accent-2); font-size: 16px; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash__kpis div { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.dash__kpis small { color: var(--muted); font-size: 12px; }
.dash__kpis b { font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); font-weight: 600; white-space: nowrap; }
.dash__kpis em { font-style: normal; color: #9BD97A; font-size: 12px; font-weight: 700; }
.dash__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.dash__chart, .dash__camps { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; min-width: 0; }
.dash__chart small, .dash__camps small { color: var(--muted); font-size: 12px; }
.bars { height: 150px; display: flex; align-items: flex-end; gap: 6px; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #F3C77A, #B5561C); transform-origin: bottom; transform: scaleY(.08); transition: transform 1.2s var(--ease-out); }
.dash.is-in .bars i, html:not(.js) .bars i { transform: none; }
.bars i:last-child { background: linear-gradient(180deg, #FFE2AE, #E0893A); box-shadow: 0 0 20px rgba(243,199,122,.5); }
.dash__camps ul { display: grid; gap: 8px; }
.dash__camps li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.dash__camps li span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__camps b { color: var(--accent-2); font-weight: 700; }
.brand-chip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, var(--b1), var(--b2)); color: #fff; }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash__side { display: none; }
  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .dash__row { grid-template-columns: 1fr; }
  .bars { height: 110px; }
}
@media (max-width: 480px) { .dash__main { padding: 14px; } .dash__top { font-size: 17px; } }

/* ---------- Achievements ---------- */
.achieve__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; text-align: center; }
@media (min-width: 860px) { .achieve__grid { grid-template-columns: repeat(4, 1fr); } }
.achieve__grid li { display: grid; gap: 8px; position: relative; }
@media (min-width: 860px) { .achieve__grid li + li::before { content: ""; position: absolute; left: -8px; top: 15%; bottom: 15%; width: 1px; background: var(--line); } }
.achieve__grid b { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.achieve__grid li:nth-child(even) b { background: linear-gradient(180deg, #FFE2AE, #E0893A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.achieve__grid span { color: var(--muted); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

/* ---------- Affiliates ---------- */
.aff { overflow: hidden; }
.aff__curves { position: absolute; inset: 0 -10% auto; z-index: -1; opacity: .5; transform: translate3d(0, var(--py, 0), 0); }
.aff__curves img { width: 100%; }
.aff__grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .aff__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aff__grid { grid-template-columns: repeat(3, 1fr); } }
.feat { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 30px; border-radius: var(--radius); background: rgba(26,18,13,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease-out); }
.feat:hover { border-color: rgba(224,137,58,.4); transform: translateY(-4px); }
.feat__n { font-family: var(--font-display); font-size: 15px; color: var(--accent-text); margin-bottom: 18px; }
.feat h3 { font-size: 24px; }
.feat p { color: var(--muted); }
.feat--cta { background: linear-gradient(140deg, #6B3418, #3A1C0C); border-color: rgba(243,199,122,.25); justify-items: start; align-content: center; }
.feat--cta p { color: rgba(246,235,221,.8); }
.feat--cta .btn { margin-top: 8px; }

/* ---------- Advertisers ---------- */
.adv .tabs { display: grid; gap: 24px; }
.adv .tabs__list { justify-content: center; }
.tabs__btn[aria-selected="true"] { background: linear-gradient(135deg, #F3C77A, #E0893A); }
.adv__panel { display: grid; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 32px; background: linear-gradient(135deg, #F6EBDD, #EBD6BB); color: #1A120D; overflow: hidden; position: relative; isolation: isolate; }
@media (min-width: 900px) { .adv__panel { grid-template-columns: 1.1fr .9fr; min-height: 420px; } }
.adv__panel h3 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 14px; }
.adv__panel p { color: #5C4636; font-size: 18px; max-width: 48ch; }
.adv__facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.adv__facts li { display: grid; color: #5C4636; font-size: 14px; }
.adv__facts b { font-family: var(--font-display); font-size: 40px; color: #6B3418; line-height: 1.1; font-weight: 600; }
.adv__img { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #3A2214, #120B07 70%); }
.adv__img img { width: 100%; height: 100%; object-fit: contain; animation: float 9s ease-in-out infinite; }

/* ---------- Brands ---------- */
.brands { border-block: 1px solid var(--line); }
.brands .marquee__track { gap: 64px; padding-right: 64px; }
.brands .marquee span { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 44px); color: rgba(246,235,221,.5); white-space: nowrap; transition: color .3s; }
.brands .marquee span:nth-child(odd) { font-style: italic; font-weight: 500; }
.brands .marquee span:hover { color: var(--accent-2); }
.tracking { margin-top: 44px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.tracking p { color: var(--muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.tracking ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tracking li { padding: 12px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-tabs { display: grid; gap: 24px; max-width: 880px; margin-inline: auto; }
.faq-tabs .tabs__list { justify-content: center; }

/* ---------- Contact ---------- */
.contact__box { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 40px; padding: clamp(24px, 5vw, 72px); border-radius: 40px; border: 1px solid rgba(243,199,122,.18); background: #1A120D; }
@media (min-width: 1000px) { .contact__box { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.contact__bg { position: absolute; inset: 0; z-index: -1; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(16,10,7,.95) 25%, rgba(16,10,7,.55)); }
.contact__copy { display: grid; gap: 20px; align-content: start; }
.contact__links { display: grid; gap: 12px; margin-top: 6px; }
.contact__links a { display: inline-grid; gap: 2px; font-size: 20px; font-weight: 700; }
.contact__links a:hover { color: var(--accent-2); }
.contact__links span { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.contact__form { padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: rgba(16,10,7,.7); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.contact__form .segment { border: 0; margin: 0 0 4px; min-width: 0; }

/* ---------- Footer ---------- */
.footer__about { margin-top: 16px; max-width: 34ch; }
.footer__word { margin-top: clamp(40px, 7vw, 88px); font-size: clamp(72px, 21vw, 320px); letter-spacing: -0.05em; text-align: center; font-weight: 600; }
.hero__inner::before { content: ""; position: absolute; inset: -10% -6% -14%; z-index: -1; background: radial-gradient(50% 50% at 50% 55%, rgba(16,10,7,.82), rgba(16,10,7,.4) 60%, transparent 80%); pointer-events: none; }

/* ---------- v2: readability & logo ---------- */
:root { --muted: #CDB8A2; --text: #FBF3E8; --fs-body: 17.5px; }
body { font-weight: 500; letter-spacing: .005em; }
h1, h2, h3, .h-lg, .h-md { letter-spacing: -0.005em; }
.hero__title { letter-spacing: -0.01em; line-height: 1.04; font-weight: 600; }
.h-lg { line-height: 1.08; }
.lead { color: #E3D2BF; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }
.eyebrow { font-size: 13.5px; letter-spacing: .18em; }
.logo { gap: 11px; }
.logo__mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgba(224,137,58,.35)); }
.logo__net { color: rgba(251,243,232,.82); font-weight: 700; font-size: 12px; letter-spacing: .22em; padding: 4px 8px; margin-left: 4px; border: 1px solid rgba(243,199,122,.35); border-radius: 6px; background: rgba(16,10,7,.55); }
.header:not(.is-scrolled) { background: linear-gradient(rgba(16,10,7,.85), rgba(16,10,7,0)); }
.nav a { color: #E3D2BF; }
.feat p, .adv__panel p, .faq .faq__body, .pcard p { line-height: 1.65; }
.feat h3 { font-size: 25px; }
.feat__n { font-size: 16px; font-weight: 600; }
.achieve__grid span { font-size: 13.5px; color: var(--muted); }
.dash { font-size: 14.5px; }
.dash__kpis small, .dash__chart small, .dash__camps small, .dash__bal small { font-size: 12.5px; color: #C9B39C; }
.dash__side li { color: #C9B39C; }
.tabs__btn { font-size: 15.5px; color: #E3D2BF; }
.tracking p { font-size: 13.5px; }
.brands .marquee span { color: rgba(251,243,232,.62); }
.faq summary { font-size: 17.5px; }
.field label { color: #E3D2BF; }

/* ---------- v3: hero readability ---------- */
.hero__ribbons { opacity: .5; -webkit-mask-image: radial-gradient(ellipse 42% 46% at 50% 36%, transparent 35%, #000 80%); mask-image: radial-gradient(ellipse 42% 46% at 50% 36%, transparent 35%, #000 80%); }
.hero__inner::before { inset: -14% -10% -16%; background: radial-gradient(55% 55% at 50% 50%, rgba(16,10,7,.94), rgba(16,10,7,.7) 55%, transparent 85%); }
.hero__title { word-spacing: .1em; letter-spacing: .005em; text-shadow: 0 2px 30px rgba(16,10,7,.6); }
.hero__title .gold-text { text-shadow: none; filter: drop-shadow(0 2px 20px rgba(16,10,7,.6)); }
.hero .eyebrow { color: #F3C77A; }
.hero .lead { color: #F4E6D4; text-shadow: 0 1px 12px rgba(16,10,7,.8); }
.h-lg, .h-md { word-spacing: .06em; }
.aff__curves { opacity: .28; }
.feat { background: rgba(26,18,13,.92); }
.adv__panel p { color: #4A3527; }

/* ---------- v4: photos, story, decorations ---------- */
:root { --deco-dot: rgba(243,199,122,.2); --glow-1: rgba(224,137,58,.8); --glow-2: rgba(107,52,24,.9); --glow-o: .2; --deco-stroke: rgba(243,199,122,.08); }
.adv__img { background: #120B07; box-shadow: 0 30px 60px -30px rgba(60,30,10,.6); }
.adv__img img { object-fit: cover; animation: none; transition: transform 1.4s var(--ease-out); }
.adv__panel:hover .adv__img img { transform: scale(1.05); }
.story__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .story__grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.story__media { position: relative; padding: 0 12% 14% 0; }
.story__main { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(243,199,122,.16); }
.story__main img { width: 100%; height: 100%; object-fit: cover; }
.story__small { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 6px solid var(--bg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.story__small img { width: 100%; height: 100%; object-fit: cover; }
.story__badge { position: absolute; left: 18px; top: 18px; display: grid; padding: 12px 18px; border-radius: 16px; background: rgba(16,10,7,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(243,199,122,.3); font-size: 13px; color: var(--muted); }
.story__badge b { font-family: var(--font-display); font-size: 22px; color: var(--accent-2); font-weight: 600; }
.story__copy { display: grid; gap: 20px; }
.story__list { display: grid; gap: 4px; margin-top: 8px; }
.story__list li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.story__list b { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--accent-2); }
.story__list span { color: #E3D2BF; }
@media (max-width: 560px) { .story__list li { grid-template-columns: 1fr; gap: 4px; } }
.achieve { background: radial-gradient(60% 80% at 50% 0%, rgba(224,137,58,.08), transparent 70%); }
.feat__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, rgba(243,199,122,.22), rgba(107,52,24,.35)); border: 1px solid rgba(243,199,122,.3); color: var(--accent-2); font-family: var(--font-display); }