:root{
  --bg:#050816;
  --bg-soft:#0b1224;
  --bg-elev:#0f172d;
  --panel:#0d1529cc;
  --border:#1c2d52;
  --border-soft:#1a2745;
  --text:#f5f9ff;
  --text-soft:#aab9d6;
  --text-muted:#7080a0;
  --blue:#2e6bff;
  --blue-strong:#0d54ff;
  --blue-soft:#7fb0ff;
  --glow:rgba(46,107,255,.32);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --container:min(1180px, calc(100% - 48px));
  --font:Inter,system-ui,-apple-system,sans-serif;
  --display:Manrope,Inter,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top right, rgba(21,85,255,.22), transparent 25%),
    radial-gradient(circle at 20% 10%, rgba(46,107,255,.12), transparent 28%),
    linear-gradient(180deg,#050816 0%,#03050e 100%);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-shell,
.grid-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.site-shell{
  background:
    radial-gradient(circle at 85% 12%, rgba(46,107,255,.15), transparent 20%),
    radial-gradient(circle at 12% 35%, rgba(17,36,78,.8), transparent 24%);
}
.grid-overlay{
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.28), transparent 78%);
}
.container{width:var(--container);margin:0 auto}
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(20px);
  background:linear-gradient(180deg, rgba(5,8,22,.88), rgba(5,8,22,.55));
  border-bottom:1px solid rgba(120,150,220,.08);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:82px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(46,107,255,.24), rgba(8,12,25,.95));
  border:1px solid rgba(82,129,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 6px rgba(46,107,255,.04);
  font:800 14px var(--display);
  letter-spacing:.16em;
}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-copy strong{font-size:14px;letter-spacing:.02em}
.brand-copy small{color:var(--text-muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:var(--text-soft);font-size:14px;transition:color .25s ease}
.nav a:hover{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:14px}
.mini-badge{
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(96,130,220,.2);
  background:rgba(13,21,41,.72);
  color:var(--text-soft);font-size:12px;font-weight:600;
}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
.menu-btn span+span{margin-top:6px}
.hero{padding:82px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:28px;align-items:stretch}
.hero-copy,.hero-panel,.trust-grid,.info-card,.project-card,.cta-box{
  border:1px solid rgba(87,122,212,.16);
  box-shadow:var(--shadow);
}
.hero-copy{
  background:linear-gradient(180deg, rgba(13,21,41,.9), rgba(9,15,29,.92));
  border-radius:32px;padding:44px;
}
.eyebrow-row{display:flex;flex-wrap:wrap;gap:12px 18px;margin-bottom:24px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:600 11px var(--mono);letter-spacing:.14em;color:var(--blue-soft);
  text-transform:uppercase;
}
.eyebrow.muted{color:#7f91ba}
.hero h1{
  margin:0 0 20px;
  font:800 clamp(2.8rem,5.6vw,4.85rem)/1.02 var(--display);
  letter-spacing:-.06em;
  max-width:13ch;
}
.hero h1 span{color:#90b8ff;text-shadow:0 0 18px rgba(86,137,255,.14)}
.hero-text{
  margin:0;max-width:640px;color:var(--text-soft);
  font-size:1.06rem;line-height:1.9;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 38px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:168px;padding:15px 22px;border-radius:14px;
  font-weight:700;letter-spacing:.01em;border:1px solid transparent;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg, var(--blue) 0%, var(--blue-strong) 100%); color:#fff; box-shadow:0 10px 30px var(--glow)}
.btn-secondary{background:rgba(13,21,41,.78);color:var(--text);border-color:rgba(96,130,220,.22)}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero-metrics article{
  min-height:120px;border-radius:20px;padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(7,11,22,.74), rgba(10,16,31,.9));
  border:1px solid rgba(91,118,182,.16);
}
.hero-metrics strong{display:block;font-size:14px;margin-bottom:8px}
.hero-metrics span{display:block;color:var(--text-muted);font-size:13px;line-height:1.7}
.hero-panel{
  border-radius:32px;padding:24px;
  background:linear-gradient(180deg, rgba(14,23,44,.94), rgba(8,12,24,.95));
  display:flex;flex-direction:column;
}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--text-muted);font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(7,12,24,.9);border:1px solid rgba(79,112,196,.22)}
.status-pill i{width:8px;height:8px;border-radius:50%;background:#54e38e;box-shadow:0 0 12px rgba(84,227,142,.65)}
.panel-main{display:grid;gap:14px;flex:1}
.panel-card,.code-card{
  background:linear-gradient(180deg, rgba(7,12,24,.82), rgba(10,16,30,.92));
  border:1px solid rgba(85,117,198,.18);
  border-radius:24px;
}
.panel-card{padding:22px}
.panel-card-large{padding:28px;min-height:180px}
.label{color:#86a7f2;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.panel-card-large h2{margin:0 0 10px;font:800 clamp(1.8rem,3vw,2.4rem)/1.08 var(--display);letter-spacing:-.05em}
.panel-card-large p{margin:0;color:var(--text-soft);line-height:1.8}
.panel-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel-row strong{font-size:1.05rem}
.code-card{padding:0;overflow:hidden}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(96,125,201,.14);font:500 12px var(--mono);color:var(--text-muted)}
.code-card pre{margin:0;padding:18px;overflow:auto;color:#dbe7ff;font:500 13px/1.8 var(--mono)}
.trust-strip{padding:10px 0 0}
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:18px 24px;border-radius:22px;
  background:linear-gradient(180deg, rgba(10,16,31,.84), rgba(7,11,21,.92));
}
.strip-label{display:block;color:#82a0e5;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.trust-grid strong{font-size:14px;line-height:1.7;color:var(--text-soft)}
.section{padding:94px 0}
.section-dark{background:linear-gradient(180deg, rgba(7,11,22,.54), rgba(4,7,15,.1))}
.section-head{max-width:760px;margin-bottom:34px}
.section-kicker{display:inline-block;margin-bottom:12px;color:#86a7f2;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.section-head h2{margin:0 0 14px;font:800 clamp(2.2rem,4vw,3.5rem)/1.08 var(--display);letter-spacing:-.05em}
.section-head p{margin:0;color:var(--text-soft);line-height:1.9;font-size:1rem}
.specialties-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{
  border-radius:28px;padding:28px;
  background:linear-gradient(180deg, rgba(12,19,38,.9), rgba(8,13,25,.95));
}
.card-number{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(46,107,255,.12);border:1px solid rgba(80,126,236,.26);font:700 12px var(--mono);color:#8fb5ff}
.info-card h3{margin:22px 0 10px;font-size:1.35rem;letter-spacing:-.03em}
.info-card p{margin:0 0 20px;color:var(--text-soft);line-height:1.85;font-size:.98rem}
.info-card ul{margin:0;padding-left:18px;color:var(--text-muted);display:grid;gap:10px}
.project-stack{display:grid;gap:22px}
.project-card{
  display:grid;grid-template-columns:1.02fr .98fr;gap:0;
  border-radius:30px;overflow:hidden;
  background:linear-gradient(180deg, rgba(9,15,29,.95), rgba(8,13,24,.98));
}
.project-card.reverse{grid-template-columns:.98fr 1.02fr}
.project-card.reverse .project-preview{order:2}
.project-preview{min-height:350px;padding:34px;display:grid;place-items:center}
.project-content{padding:38px 36px 36px;display:flex;flex-direction:column;justify-content:center}
.project-tag{display:inline-block;color:#8eb4ff;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.project-content h3{margin:0 0 14px;font:800 clamp(1.9rem,3.3vw,2.9rem)/1.04 var(--display);letter-spacing:-.05em}
.project-content h3 span{color:#89a6dd}
.project-content p{margin:0 0 24px;color:var(--text-soft);line-height:1.9;font-size:1rem}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip-row span{padding:10px 14px;border-radius:999px;background:rgba(46,107,255,.08);border:1px solid rgba(83,124,226,.18);color:#b5c8ef;font-size:12px;font-weight:600}
.project-preview-pos{background:radial-gradient(circle at 20% 20%, rgba(46,107,255,.28), transparent 38%), linear-gradient(135deg, #0c142a, #08101f)}
.project-preview-bw{background:radial-gradient(circle at 80% 10%, rgba(112,142,255,.2), transparent 28%), linear-gradient(135deg, #0f1530, #0a0f1a)}
.project-preview-vps{background:radial-gradient(circle at 15% 15%, rgba(46,107,255,.22), transparent 30%), linear-gradient(135deg, #081321, #070d19)}
.browser-frame,.store-mock,.terminal-mock{
  width:min(100%, 500px);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.36);
}
.browser-frame{background:#0e1730;border:1px solid rgba(83,121,221,.2)}
.browser-bar,.terminal-top{
  height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-bottom:1px solid rgba(112,135,197,.12);background:rgba(8,13,24,.9);
}
.browser-bar i,.terminal-top i{width:8px;height:8px;border-radius:50%;background:#86a7f2}
.browser-bar span,.terminal-top span{margin-left:auto;color:#8797ba;font:500 11px var(--mono)}
.preview-dashboard{display:grid;grid-template-columns:72px 1fr;min-height:248px}
.preview-dashboard aside{border-right:1px solid rgba(112,135,197,.12);display:grid;align-content:start;gap:12px;padding:20px 16px;background:#0a1022}
.preview-dashboard aside span{display:block;height:10px;border-radius:999px;background:#15306a}
.dashboard-body{padding:24px}
.db-line{height:12px;border-radius:999px;background:linear-gradient(90deg,#628df6,#243d7a)}
.db-line.large{width:46%;margin-bottom:24px}
.db-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.db-cards i{display:block;height:78px;border-radius:18px;background:linear-gradient(180deg,#173066,#112548)}
.db-chart{display:flex;gap:12px;align-items:flex-end;height:96px;padding:12px;border-radius:18px;background:#0a1123}
.db-chart b{display:block;flex:1;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#77a0ff,#20489f)}
.db-chart b:nth-child(1){height:42%}.db-chart b:nth-child(2){height:76%}.db-chart b:nth-child(3){height:54%}.db-chart b:nth-child(4){height:88%}.db-chart b:nth-child(5){height:62%}.db-chart b:nth-child(6){height:94%}
.store-mock{background:linear-gradient(180deg,#e9eef8,#f7f9fc);padding:18px;color:#08101d;border:1px solid rgba(108,133,193,.22)}
.store-header,.store-footer{display:flex;justify-content:space-between;align-items:center}
.store-header strong{font:800 1.15rem var(--display)}
.store-header span,.store-footer span{color:#445067;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.store-grid i{display:block;aspect-ratio:3/4;border-radius:18px;background:linear-gradient(180deg,#a8b8d2,#4b5669)}
.store-grid i:nth-child(2){background:linear-gradient(180deg,#ccd7ea,#7c8798)}
.store-grid i:nth-child(3){background:linear-gradient(180deg,#6b778c,#232d3b)}
.terminal-mock{background:#09111c;border:1px solid rgba(83,121,221,.22)}
.terminal-body{padding:22px 18px 24px;font:500 14px/1.9 var(--mono);color:#bcd0f5}
.terminal-body p{margin:0 0 8px}
.terminal-body span{color:#87adff}
.terminal-body small{float:right;color:#83efad;text-transform:uppercase;font-size:11px}
.process-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:start}
.timeline{display:grid;gap:16px}
.timeline-item{
  display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;
  padding:22px;border-radius:24px;
  background:linear-gradient(180deg, rgba(12,19,38,.88), rgba(8,13,25,.96));
  border:1px solid rgba(87,122,212,.16);
  box-shadow:var(--shadow);
}
.timeline-item>span{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:rgba(46,107,255,.12);border:1px solid rgba(83,124,226,.22);
  color:#93b6ff;font:700 13px var(--mono)
}
.timeline-item h3{margin:2px 0 8px;font-size:1.1rem}
.timeline-item p{margin:0;color:var(--text-soft);line-height:1.85}
.cta-section{padding-top:78px}
.cta-box{
  text-align:center;border-radius:34px;padding:48px 34px;
  background:
    radial-gradient(circle at top, rgba(46,107,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(13,21,41,.96), rgba(7,11,21,.98));
}
.cta-box h2{margin:0 auto 14px;max-width:820px;font:800 clamp(2rem,4vw,3.4rem)/1.08 var(--display);letter-spacing:-.05em}
.cta-box p{max-width:740px;margin:0 auto;color:var(--text-soft);line-height:1.9;font-size:1rem}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.footer{padding:22px 0 34px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid rgba(95,122,190,.12)}
.footer-row strong{display:block;font-size:15px}
.footer-row p{margin:6px 0 0;color:var(--text-muted);font-size:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;color:var(--text-soft);font-size:14px}
.footer-note{color:var(--text-muted);font:500 12px var(--mono)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media (max-width:1024px){
  .hero-grid,.process-layout,.project-card,.project-card.reverse,.specialties-grid,.hero-metrics,.trust-grid{grid-template-columns:1fr}
  .project-card.reverse .project-preview{order:0}
  .hero h1{max-width:15ch}
}
@media (max-width:768px){
  :root{--container:min(100%, calc(100% - 32px))}
  .header-row{min-height:74px}
  .menu-btn{display:block}
  .mini-badge{display:none}
  .nav{
    position:absolute;left:16px;right:16px;top:76px;
    display:none;flex-direction:column;align-items:flex-start;gap:14px;
    padding:18px;border-radius:18px;
    background:rgba(8,12,24,.96);border:1px solid rgba(95,122,190,.16)
  }
  .nav.open{display:flex}
  .hero{padding-top:44px}
  .hero-copy,.hero-panel,.cta-box{padding:26px}
  .hero h1{font-size:clamp(2.3rem,12vw,3.5rem)}
  .project-preview{min-height:280px;padding:20px}
  .project-content{padding:28px 24px}
  .panel-row,.preview-dashboard,.db-cards,.store-grid{grid-template-columns:1fr}
  .preview-dashboard{grid-template-columns:1fr}
  .preview-dashboard aside{grid-template-columns:repeat(4,1fr);border-right:0;border-bottom:1px solid rgba(112,135,197,.12)}
  .timeline-item{grid-template-columns:1fr}
  .footer-row{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}