/* SW33P v2 — refined readability, premium dark feel, monotype only for data. */

:root{
  --bg:#050507;
  --bg-soft:#0A0A10;
  --bg-2:#0E0E15;
  --panel:#0B0B12;
  --panel-2:#101019;
  --line:rgba(245,245,247,0.07);
  --line-2:rgba(245,245,247,0.14);
  --line-3:rgba(245,245,247,0.22);
  --fg:#F5F5F7;
  --fg-soft:#D6D6DE;
  --fg-dim:#A6A6B3;
  --fg-mute:#7B7B86;
  --fg-mute-2:#54545E;

  /* SW33P brand — restrained */
  --purple:#C12BFF;
  --violet:#7B3CFF;
  --blue:#3B82FF;
  --cyan:#16D9FF;
  --warn:#FFB02E;
  --good:#27E3A0;

  --grad: linear-gradient(90deg,#C12BFF 0%,#7B3CFF 38%,#3B82FF 68%,#16D9FF 100%);
  --grad-d: linear-gradient(135deg,#C12BFF 0%,#7B3CFF 40%,#3B82FF 70%,#16D9FF 100%);
  --grad-soft: linear-gradient(135deg,rgba(193,43,255,.14),rgba(22,217,255,.14));

  /* Typography */
  --display:'Audiowide','Arial Black',sans-serif;     /* used very sparingly */
  --serif:'Instrument Serif',Georgia,serif;            /* readable hero accents */
  --ui:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --maxw:1280px;
  --radius:14px;
  --radius-lg:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1.55}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet);color:#fff}
img{max-width:100%;display:block}

/* ============ ATMOSPHERE ============ */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(160px);opacity:.28}
.ambient::before{width:60vw;height:60vw;left:-18vw;top:-12vw;background:radial-gradient(closest-side,#7B3CFF,transparent)}
.ambient::after{width:55vw;height:55vw;right:-18vw;top:38vh;background:radial-gradient(closest-side,#16D9FF,transparent);opacity:.18}

/* film grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ============ PREVIEW MODE BANNER ============ */
.pre-bar{position:relative;z-index:3;background:linear-gradient(90deg,rgba(255,176,46,.06),rgba(255,176,46,.03),rgba(255,176,46,.06));border-bottom:1px solid rgba(255,176,46,.22);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;flex-wrap:wrap;text-align:center}
.pre-bar .pill{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border:1px solid rgba(255,176,46,.40);background:rgba(255,176,46,.08);border-radius:999px;color:#fff;font-weight:500}
.pre-bar .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn);animation:pulse 1.6s ease-in-out infinite}
.pre-bar .dim{color:rgba(255,176,46,.7)}
.pre-bar b{color:#fff;font-weight:500}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ NAV ============ */
nav.bar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,5,7,.7);border-bottom:1px solid var(--line)}
nav.bar .wrap{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
nav.bar .brand{display:flex;align-items:center;gap:12px}
nav.bar .brand img.wordmark{height:34px;width:auto;display:block}
nav.bar .brand .ver{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--fg-mute);text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);border-radius:4px}
nav.bar ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;font-family:var(--ui);font-size:14px;color:var(--fg-dim)}
nav.bar ul a{padding:9px 12px;border-radius:8px;transition:.2s;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
nav.bar ul a:hover{color:#fff;background:rgba(245,245,247,.04);border-color:var(--line)}
nav.bar ul a.active{color:#fff;background:rgba(123,60,255,.10);border-color:rgba(123,60,255,.30)}
nav.bar .right{display:flex;align-items:center;gap:10px}
.btn-nav-toggle{display:none;background:transparent;border:1px solid var(--line-2);color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer;font-size:18px;line-height:1}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:13px 18px;border-radius:10px;font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:.2s;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--grad);color:#0A0A12;font-weight:600;box-shadow:0 10px 32px -10px rgba(123,60,255,.5)}
.btn.primary:hover{box-shadow:0 16px 44px -10px rgba(123,60,255,.7);transform:translateY(-1px)}
.btn.ghost{background:rgba(245,245,247,.03);border-color:var(--line-2);color:#fff}
.btn.ghost:hover{border-color:rgba(22,217,255,.5);background:rgba(22,217,255,.05)}
.btn.outline{background:transparent;border-color:rgba(123,60,255,.40);color:#fff}
.btn.outline:hover{border-color:var(--cyan);background:rgba(22,217,255,.05)}
.btn.link{background:transparent;color:var(--fg-dim);border:0;padding:13px 6px;font-weight:500}
.btn.link:hover{color:#fff}
.btn.link::after{content:" →";opacity:.6;transition:.15s}
.btn.link:hover::after{opacity:1;transform:translateX(2px)}
.btn.sm{padding:9px 13px;font-size:12px}

/* ============ TYPOGRAPHY HELPERS ============ */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";display:inline-block;width:24px;height:1px;background:var(--cyan);opacity:.7}
.eyebrow.mute{color:var(--fg-mute)}
.eyebrow.mute::before{background:var(--fg-mute);opacity:.5}

h1,h2,h3,h4,h5{margin:0;font-weight:500;color:#fff}

.mono{font-family:var(--mono);letter-spacing:.04em}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute)}
.tick3t{font-family:var(--mono);letter-spacing:.02em;color:var(--cyan)}

/* Gradient text */
.gtxt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Soft italic flourish */
.flourish{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}

/* ============ LAYOUT PRIMITIVES ============ */
main{position:relative;z-index:2}
.section{max-width:var(--maxw);margin:0 auto;padding:88px 28px;position:relative}
.section + .section{padding-top:0}
.section.tight{padding:48px 28px}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:48px}
.section-head h2{font-family:var(--ui);font-weight:500;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.015em;color:#fff}
.section-head h2 .em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--fg-soft)}
.section-head h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{margin:0;font-size:17px;color:var(--fg-dim);line-height:1.6;max-width:62ch}
.section-head p strong{color:#fff;font-weight:500}

/* ============ PILLS / CHIPS ============ */
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);background:rgba(245,245,247,.02)}
.chip.cy{color:var(--cyan);border-color:rgba(22,217,255,.32);background:rgba(22,217,255,.06)}
.chip.vi{color:#D4B3FF;border-color:rgba(123,60,255,.35);background:rgba(123,60,255,.10)}
.chip.gd{color:var(--good);border-color:rgba(39,227,160,.32);background:rgba(39,227,160,.06)}
.chip.warn{color:var(--warn);border-color:rgba(255,176,46,.32);background:rgba(255,176,46,.06)}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;animation:pulse 1.6s ease-in-out infinite}

/* ============ CARDS ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.card.glow{background:linear-gradient(180deg,var(--panel-2),var(--panel));border-color:var(--line-2)}
.card .accent-bar{position:absolute;left:0;top:0;width:36%;height:2px;background:var(--grad);border-radius:0 2px 2px 0}

/* ============ FOOTER ============ */
footer.site{border-top:1px solid var(--line);margin-top:80px;background:linear-gradient(180deg,transparent,rgba(123,60,255,.03))}
footer.site .wrap{max-width:var(--maxw);margin:0 auto;padding:56px 28px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px}
footer.site .brand-block{display:flex;flex-direction:column;gap:14px;max-width:300px}
footer.site .brand-block .b-top{display:flex;align-items:center;gap:12px}
footer.site .brand-block .b-top img{height:28px;width:auto}
footer.site .brand-block p{margin:0;color:var(--fg-dim);font-size:14px;line-height:1.55}
footer.site .col h5{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px;font-weight:500}
footer.site .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--fg-dim)}
footer.site .col li a{transition:.15s}
footer.site .col li a:hover{color:#fff}
footer.site .legal{grid-column:1/-1;border-top:1px solid var(--line);margin-top:18px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);gap:24px;flex-wrap:wrap}
footer.site .legal .l-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer.site .legal .l-right{display:flex;gap:18px;align-items:center}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  nav.bar ul{display:none}
  nav.bar.menu-open ul{display:flex;position:absolute;top:100%;left:0;right:0;background:rgba(5,5,7,.96);backdrop-filter:blur(14px);flex-direction:column;padding:14px;gap:6px;border-bottom:1px solid var(--line)}
  nav.bar.menu-open ul a{padding:12px 14px}
  .btn-nav-toggle{display:inline-flex}
  footer.site .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .section{padding:64px 22px}
  footer.site .wrap{grid-template-columns:1fr;gap:32px}
  .section-head{margin-bottom:32px}
  .section-head h2{font-size:clamp(28px,7vw,40px)}
  .section-head p{font-size:15px}
  body{font-size:15px}
}