/* ===========================================================
   TOP-WORKSHOP.RU — Design Foundation
   Dark premium gaming + violet neon. Business-clean money blocks.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* surfaces */
  --bg:        #07070b;
  --bg-2:      #0b0b12;
  --bg-3:      #0f0f18;
  --panel:     #11111c;
  --panel-2:   #161624;
  --surface:   rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.045);
  --glass:     rgba(20,18,34,0.55);

  /* violet accent system */
  --violet:        #a78bfa;
  --violet-bright: #c4b1ff;
  --violet-deep:   #7c5cff;
  --violet-ink:    #5b3ee6;
  --violet-glow:   rgba(124,92,255,0.45);
  --violet-soft:   rgba(167,139,250,0.12);

  /* secondary accents */
  --lime:   #b6ff3c;   /* money / auto / success */
  --lime-deep:#8de01a;
  --cyan:   #5ad7ff;
  --amber:  #ffb43c;
  --rose:   #ff5d7a;

  /* text */
  --text:      #edecf5;
  --text-2:    #b9b7cc;
  --text-3:    #84829a;
  --text-4:    #56556b;

  /* borders */
  --border:    rgba(167,139,250,0.14);
  --border-2:  rgba(255,255,255,0.07);
  --border-3:  rgba(255,255,255,0.04);

  /* radii — sharpened, tactical */
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  --r-xl: 5px;

  /* fonts */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow:    0 12px 40px rgba(0,0,0,0.5);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.6);
  --glow:      0 0 0 1px rgba(167,139,250,0.25), 0 8px 40px rgba(124,92,255,0.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
#root{ min-height:100vh; }

::selection{ background:var(--violet-deep); color:#fff; }

/* scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(167,139,250,0.18); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(167,139,250,0.35); background-clip:padding-box; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }

/* ---------- typography helpers ---------- */
.font-display{ font-family:var(--font-display); }
.font-mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; line-height:1.04; }
p{ margin:0; }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--violet);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:linear-gradient(90deg,transparent,var(--violet)); }

/* gradient text */
.grad-violet{
  background:linear-gradient(105deg,#fff 0%, #cdbcff 40%, var(--violet) 70%, var(--violet-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.grad-lime{
  background:linear-gradient(100deg,#eaffc0, var(--lime));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- layout ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
.wrap-wide{ max-width:1480px; margin:0 auto; padding:0 32px; }
.section{ position:relative; }

/* ---------- background ornaments ---------- */
.bg-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(167,139,250,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.bg-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(80px); opacity:0.5;
}

/* ---------- buttons — tactical, cut-corner, uppercase ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:13px; line-height:1;
  text-transform:uppercase; letter-spacing:0.055em;
  padding:14px 22px; border-radius:0;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
  white-space:nowrap; user-select:none; border:1px solid transparent; position:relative;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--violet-deep); color:#fff;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.btn-primary:hover{ background:#8e72ff; }
.btn-lime{
  background:var(--lime); color:#0e1700;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.btn-lime:hover{ background:#c6ff63; }
.btn-ghost{
  background:var(--surface-2); color:var(--text); border:1px solid var(--border-2);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:var(--border); }
.btn-outline{
  background:transparent; color:var(--text); border:1px solid var(--border-2);
}
.btn-outline:hover{ border-color:var(--violet); color:var(--violet-bright); }
.btn-sm{ padding:10px 15px; font-size:11px; }
.btn-lg{ padding:16px 26px; font-size:14px; letter-spacing:0.06em; }
.btn-block{ width:100%; }

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--border-2);
  border-radius:4px;
  position:relative;
}
.card-glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:4px;
  backdrop-filter:blur(18px);
  position:relative;
}
/* HUD corner ticks — tactical frame */
.hud::before, .hud::after{
  content:''; position:absolute; width:11px; height:11px; pointer-events:none;
  border-color:var(--violet); border-style:solid; opacity:0.7; z-index:2;
}
.hud::before{ top:7px; left:7px; border-width:1.5px 0 0 1.5px; }
.hud::after{ bottom:7px; right:7px; border-width:0 1.5px 1.5px 0; }

/* chips / badges — sharp tactical tags */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; padding:6px 11px; border-radius:2px;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text-2);
  letter-spacing:0.01em;
}
.chip-violet{ background:var(--violet-soft); border-color:rgba(167,139,250,0.3); color:var(--violet-bright); }
.chip-lime{ background:rgba(141,224,26,0.12); border-color:rgba(141,224,26,0.3); color:var(--lime); }
.chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }

/* ---------- tooltip ---------- */
.tip-wrap{ position:relative; display:inline-flex; }
.tip-bubble{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:280px;
  background:#1a1828; border:1px solid var(--border); border-radius:4px;
  padding:12px 14px; font-size:13px; line-height:1.5; color:var(--text-2);
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:60;
}
.tip-wrap:hover .tip-bubble{ opacity:1; transform:translateX(-50%) translateY(0); }
.tip-bubble strong{ color:var(--violet-bright); font-weight:700; }
.tip-bubble::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#1a1828;
}

/* ---------- utility ---------- */
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }
.glow-line{ height:1px; background:linear-gradient(90deg,transparent,var(--violet-deep),transparent); box-shadow:0 0 12px var(--violet-glow); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes pulseGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
@keyframes scan{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(400%); } }
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@keyframes blink{ 0%,49%{ opacity:1;} 50%,100%{ opacity:0; } }

.cursor-blink::after{ content:'▌'; color:var(--violet); animation:blink 1s steps(1) infinite; margin-left:2px; }

/* number ticker mono */
.stat-num{ font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }

/* focus ring */
.focusable:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

/* hide scrollbar utility */
.no-sb::-webkit-scrollbar{ display:none; }
.no-sb{ scrollbar-width:none; }

/* burger — hidden on desktop, shown via media query */
.nav-burger{ display:none; align-items:center; justify-content:center; }

/* ===========================================================
   RESPONSIVE — tablets & phones
   =========================================================== */
@media (max-width: 980px){
  .wrap, .wrap-wide{ padding-left:20px; padding-right:20px; }
}

@media (max-width: 760px){
  .wrap, .wrap-wide{ padding-left:16px; padding-right:16px; }

  /* collapse every inline grid to a single column */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* keep compact stat tiles 2-up for density */
  .stat-grid{ grid-template-columns:1fr 1fr !important; }

  /* dense flex rows wrap instead of squeezing */
  .rowwrap{ flex-wrap:wrap !important; }
  /* let the primary (title) column claim the first line so meta wraps below */
  .rw-main{ min-width:58% !important; }
  /* saas configurator header stacks above its billing toggle */
  .saas-cfg-head{ flex-direction:column; align-items:flex-start !important; }

  /* buttons: allow wrap, tighten large size */
  .btn{ white-space:normal; text-align:center; }
  .btn-lg{ padding:14px 18px; font-size:12.5px; }

  /* hero decorative orbit — hidden on phones */
  .hero-orb{ display:none !important; }

  /* top nav → burger */
  .nav-desktop{ display:none !important; }
  .nav-actions{ display:none !important; }
  .nav-burger{ display:inline-flex !important; margin-left:auto; }

  /* dashboard shell → stacked, sidebar becomes top tab bar */
  .dash-shell{ flex-direction:column !important; min-height:0 !important; }
  .dash-aside{
    width:100% !important; height:auto !important;
    position:sticky; top:0; z-index:60;
    flex-direction:row !important; align-items:center; gap:10px;
    padding:10px 14px !important;
    border-right:none !important; border-bottom:1px solid var(--border-2);
    overflow-x:auto;
  }
  .dash-aside-logo{ margin:0 !important; flex-shrink:0; }
  .dash-aside-extra{ display:none !important; }
  .dash-nav{ flex-direction:row !important; gap:6px !important; margin-left:auto; }
  .dash-nav-item{ flex-shrink:0; }
  .dash-nav-desc{ display:none !important; }
  .dash-topbar{ display:none !important; }
  .dash-main-pad{ padding:20px 16px 48px !important; }
}