:root{
  --bg:#0b1120;
  --panel:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22d3ee;
  --accent-2:#60a5fa;
  --grid:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1120, #0b1120 40%, #0e152b);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;scroll-behavior:smooth}
.container{width:min(1100px,92%);margin:0 auto}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px),linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,1))}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:sticky;top:0;background:rgba(11,17,32,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.logo{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-weight:700}
.logo svg{width:28px;height:28px;fill:var(--accent)}
.header nav{display:flex;gap:16px;align-items:center}
.header nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.header nav a:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.02)}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#00111a;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;box-shadow:0 8px 30px rgba(34,211,238,.25)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.small{padding:8px 12px;font-size:14px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:44px 0 32px}
.hero h1{font-size:clamp(32px,3.8vw,48px);line-height:1.1;margin:0}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:56ch}
.hero-cta{display:flex;gap:12px;margin:16px 0 6px}
.hero-bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;margin:18px 0 0;list-style:none}
.hero-bullets li{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:10px 12px;border-radius:10px}
.hero-visual{position:relative;min-height:220px}
.formula-card{position:absolute;right:0;transform:translateY(var(--y,0));background:rgba(255,255,255,.03);border:1px solid var(--border);backdrop-filter:blur(6px);padding:14px 16px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.formula-card:nth-child(1){top:0;--y:-8px}
.formula-card:nth-child(2){top:90px;right:40px}
.formula-card:nth-child(3){top:180px;right:10px;--y:8px}
.formula{font-weight:800;letter-spacing:.5px}
.sub{color:var(--muted);font-size:14px;margin-top:4px}
.decor-sine{position:absolute;left:-40px;bottom:-20px;width:60%;height:120px;opacity:.35}
.decor-sine path{stroke:var(--accent-2);fill:none;stroke-width:3}
.section{padding:56px 0}
.section h2{font-size:clamp(24px,3vw,34px);margin:0 0 18px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:18px;border-radius:16px}
.card h3{margin:0 0 8px}
.card p{color:var(--muted)}
.tags{display:flex;gap:8px;list-style:none;padding:0;margin:12px 0 0}
.tags li{border:1px dashed var(--border);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted)}
.highlight{position:relative}
.highlight-inner{background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(96,165,250,.12));border:1px solid var(--border);padding:24px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.prices{grid-template-columns:repeat(3,minmax(0,1fr))}
.price{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:18px}
.price .num{font-size:24px;font-weight:800;margin:6px 0 12px}
.price ul{color:var(--muted);padding-left:18px}
.price .badge{display:inline-block;background:var(--accent);color:#00111a;padding:6px 10px;border-radius:999px;font-weight:800;margin-bottom:8px}
.price.featured{outline:2px solid var(--accent);box-shadow:0 12px 40px rgba(34,211,238,.15)}
.testimonials{grid-template-columns:repeat(3,minmax(0,1fr))}
.tcard{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:18px;border-radius:16px}
.tcard blockquote{margin:0 0 8px}
details{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:14px 16px;border-radius:14px;margin-bottom:10px}
.contact .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
input,select,textarea{width:100%;margin-top:6px;background:#0c152c;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:28px 0;border-top:1px solid var(--border);margin-top:44px;gap:14px}
.footer .brand{display:flex;align-items:center;gap:10px}
.footer .brand svg{width:22px;height:22px;fill:var(--accent)}
.footer-links{display:flex;gap:14px;justify-content:center}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}
.copy{text-align:right;color:var(--muted);font-size:14px}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .hero-visual{height:260px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonials{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .contact .formgrid{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;justify-items:center;text-align:center}
  .copy{text-align:center}
}


/* HERO — големи формули, чисти стрелки, правилни отстояния */
.hero{padding:20px 0 0!important;gap:18px!important}
.math-hero{width:100%;height:auto;overflow:visible}
.math-hero .curve{fill:none}
.math-hero .curve1{stroke:var(--accent-2);stroke-width:4}
.math-hero .curve2{stroke:var(--accent);stroke-width:3}
.math-hero .vector{stroke:var(--text);opacity:.9;stroke-width:2.5;marker-end:url(#tip)}

.math-label rect{fill:rgba(255,255,255,.12);stroke:var(--border)}
.math-label .formula{font:900 30px/1.05 system-ui,-apple-system,Segoe UI,Roboto;fill:#fff}
.math-label .sub{font:700 18px/1.1 system-ui,-apple-system,Segoe UI,Roboto;fill:var(--muted)}
.math-label{filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}