:root {
  --bg: #010b12;
  --bg-2: #061726;
  --text: #d9f7ff;
  --muted: #8fb8c6;
  --accent: #00ffa6;
  --accent-2: #00e1ff;
  --danger: #ff0066;
  --card: #0a1f31cc;
  --card-opaque: #0a1f31;
  --border: #0f2b42;
  --glow: 0 0 20px rgba(0, 255, 166, 0.25), 0 0 60px rgba(0, 255, 230, 0.15);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(0, 225, 255, 0.15), transparent 60%),
              radial-gradient(1000px 700px at -10% 20%, rgba(0, 255, 166, 0.12), transparent 60%),
              var(--bg);
  line-height: 1.6;
}

/* Background layers */
.background { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bg-gradient { position: absolute; inset: 0; background: var(--bg); }
.bg-grid { position: absolute; inset: 0; --grid: rgba(0, 255, 166, 0.10); --grid-strong: rgba(0, 255, 166, 0.18); background:
    /* base grid */
    linear-gradient(transparent calc(100% - 1px), var(--grid) 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--grid) 1px) 0 0 / 40px 40px,
    /* emphasized every 5th line */
    repeating-linear-gradient(0deg, transparent, transparent 199px, var(--grid-strong) 199px 200px) 0 0 / 200px 200px,
    repeating-linear-gradient(90deg, transparent, transparent 199px, var(--grid-strong) 199px 200px) 0 0 / 200px 200px; opacity: 0.28; animation: gridDrift 120s linear infinite; }
@keyframes gridDrift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: -300px 220px, -300px 220px, 200px -200px, 200px -200px; } }

/* Animated light blobs (pure CSS) */
.light { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(80px); opacity: 0.3; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.light-a { background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); left: -18vmax; top: -14vmax; animation: moveA 22s ease-in-out infinite alternate; }
.light-b { background: radial-gradient(circle at 70% 40%, var(--accent-2), transparent 60%); right: -20vmax; top: -10vmax; animation: moveB 26s ease-in-out infinite alternate-reverse; }
.light-c { background: radial-gradient(circle at 40% 70%, var(--accent-2), transparent 60%); left: 6vmax; bottom: -24vmax; animation: moveC 30s ease-in-out infinite alternate; }
@keyframes moveA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(12vmax, 6vmax) scale(1.08); } }
@keyframes moveB { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(14vmax, -10vmax) scale(1.06); } }
@keyframes moveC { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-12vmax, 8vmax) scale(1.04); } }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%); pointer-events: none; }
.bg-noise { position: absolute; inset: -50%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>'); opacity: 0.35; mix-blend-mode: soft-light; animation: noisePan 10s linear infinite; }
@keyframes noisePan { from { transform: translate3d(0,0,0); } to { transform: translate3d(-10%, -10%, 0); } }
.scanline { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.08) 3px); animation: scan 9s linear infinite; opacity: 0.2; }
@keyframes scan { from { transform: translateY(-10%); } to { transform: translateY(10%); } }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(1, 11, 18, 0.85), rgba(1, 11, 18, 0.35));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 12px;
}
.site-header:has(.nav-toggle) { -webkit-tap-highlight-color: transparent; }
.logo { display: grid; text-decoration: none; color: var(--text); }
.logo-text { font-family: Orbitron, Inter, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; position: relative; }
.logo-text.small { font-size: 16px; }
.logo-sub { font-size: 12px; color: var(--muted); margin-top: -2px; }
.logo-text::after { content: attr(data-glitch); position: absolute; left: 0; top: 0; text-shadow: -1px 0 var(--accent-2), 1px 0 var(--danger); clip-path: inset(0 0 50% 0); opacity: 0; animation: glitch 3s infinite; }
@keyframes glitch { 0%, 95% { opacity: 0; transform: translate(0,0); } 96% { opacity: 1; transform: translate(-1px, 1px); } 98% { transform: translate(1px, -1px); } 100% { opacity: 0; transform: translate(0,0); } }

/* Hero title glitch */
.hero .glitch { position: relative; display: inline-block; }
.hero .glitch::before, .hero .glitch::after {
  content: attr(data-glitch);
  position: absolute; left: 0; top: 0;
  width: 100%;
  color: var(--text);
  mix-blend-mode: screen;
}
.hero .glitch::before, .hero .glitch::after { opacity: 0; }
.hero .glitch.glitch-active::before { text-shadow: -2px 0 var(--accent-2); animation: glitchSlices 260ms steps(1) 1; opacity: 1; }
.hero .glitch.glitch-active::after { text-shadow: 2px 0 var(--danger); animation: glitchSlices 260ms steps(1) 1 reverse; opacity: 1; }
@keyframes glitchSlices {
  0% { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 0.3; }
  8% { clip-path: inset(var(--g1,3%) 0 var(--g2,82%) 0); transform: translate(-2px, 0); opacity: 0.85; }
  16% { clip-path: inset(var(--g3,68%) 0 var(--g4,10%) 0); transform: translate(2px, 0); }
  24% { clip-path: inset(var(--g5,30%) 0 var(--g6,40%) 0); transform: translate(-1px, 0); }
  32% { clip-path: inset(var(--g7,55%) 0 var(--g8,24%) 0); transform: translate(1px, 0); }
  40% { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 0.35; }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .glitch::before, .hero .glitch::after { animation: none !important; opacity: 0 !important; }
}

.nav-toggle { display: none; width: 42px; height: 36px; border: 1px solid var(--border); background: #091b2a; border-radius: 8px; align-items: center; justify-content: center; gap: 5px; flex-direction: column; }
.nav-toggle .bar { width: 22px; height: 2px; background: var(--text); display: block; border-radius: 2px; }
.nav ul, .nav #nav-links { list-style: none; display: flex; gap: 18px; align-items: center; margin: 0; padding: 0; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--text); }
.nav .cta-header { color: #000; background: var(--accent); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: var(--glow); }

/* Hero */
.site-main { padding-top: 72px; }
.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; justify-items: center; padding: 110px 24px 90px; max-width: 750px; margin: 0 auto; text-align: center; }
.hero .badge { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 8px 12px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0, 255, 166, 0.08); box-shadow: var(--glow); }
.hero h1 { font-family: Orbitron, Inter, sans-serif; font-size: clamp(36px, 6.8vw, 78px); line-height: 1.07; letter-spacing: 0.01em; margin: 10px 0 6px; }
.glow { text-shadow: 0 0 12px rgba(0, 255, 166, 0.15), 0 0 42px rgba(0, 225, 255, 0.15); }
.subtitle { color: var(--muted); font-size: 16px; max-width: 550px; margin: 1em auto; }
.actions { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.hero .actions { justify-content: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 12px; text-decoration: none; font-weight: 700; border: 1px solid var(--border); color: var(--text); background: #0a1f31; }
.button.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #001018; border: none; box-shadow: var(--glow); }
.button.ghost { background: transparent; color: var(--text); }
.button.xl { padding: 16px 22px; font-size: 18px; }
.button:active { transform: translateY(1px); }
.trust { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 8px 18px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--muted); }

/* removed hero side art when centered */

/* Sections */
.section { padding: 70px 24px; max-width: 1200px; margin: 0 auto; }
.section-title { font-family: Orbitron, Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 18px; color: var(--accent); margin-bottom: 24px; }

.benefits .grid, .services .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: linear-gradient(180deg, rgba(10, 31, 49, 0.8), rgba(10, 31, 49, 0.5)); border: 1px solid var(--border); border-radius: 16px; padding: 18px; min-height: 150px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.card h3 { margin: 6px 0 8px; }
.card p { color: var(--muted); }

/* Comparison */
.comparison .compare-table { display: grid; gap: 10px; }
.comparison .row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1.2fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #081a2a; }
.comparison .head { background: #0b2338; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.comparison .note { color: var(--muted); margin-top: 12px; }

/* Pricing */
.pricing .price-card { background: linear-gradient(180deg, rgba(10, 31, 49, 0.85), rgba(10, 31, 49, 0.6)); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: grid; gap: 16px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.pricing .price { display: flex; align-items: baseline; gap: 6px; font-family: Orbitron, Inter, sans-serif; }
.pricing .currency { color: var(--accent); font-size: 22px; }
.pricing .amount { font-size: clamp(34px, 8vw, 64px); font-weight: 800; letter-spacing: 0.04em; }
.pricing .per { color: var(--muted); }
.pricing .bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); }
.pricing .guarantee { color: var(--muted); font-size: 14px; }

/* Process */
.process .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.process .step { background: #081a2a; border: 1px solid var(--border); border-radius: 14px; padding: 16px; position: relative; }
.process .step-num { position: absolute; top: 10px; right: 14px; color: var(--accent-2); font-family: Orbitron, Inter, sans-serif; font-size: 14px; letter-spacing: 0.08em; }

/* Services chips */
.chip { background: #0a1f31; border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; display: inline-flex; width: fit-content; color: var(--muted); }

/* FAQ */
.faq details { background: #081a2a; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--muted); margin: 8px 0 0; }

/* Showcase images */
.show-grid { display: none; }

/* Clients list */
.work-list { display: grid; gap: 14px; }
.work-item { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: center; background: rgba(10,31,49,0.55); border: 1px solid var(--border); border-radius: 14px; padding: 10px; }
.work-img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; display: block; }
.work-content { display: grid; gap: 6px; }
.work-title { margin: 0; font-weight: 800; font-family: Orbitron, Inter, sans-serif; letter-spacing: .04em; }
.work-summary { color: var(--muted); margin: 0; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work-tags .tag { background: #0a1f31; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: 12px; }

@media (max-width: 860px) {
  .work-item { grid-template-columns: 1fr; }
  .work-img { height: 200px; }
}

/* Footer */
.site-footer { padding: 28px 24px 60px; border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(1, 11, 18, 0.2), rgba(1, 11, 18, 0.8)); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; color: var(--muted); }
.footer-inner .brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.footer-inner .sep { color: var(--accent-2); }
.footer-inner .links { display: flex; gap: 14px; }
.footer-inner .links a { color: var(--muted); text-decoration: none; }
.footer-inner .legal { grid-column: 1 / -1; color: var(--muted); opacity: 0.8; }

/* Responsive */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .benefits .grid, .services .grid, .process .steps { grid-template-columns: 1fr 1fr; }
  .comparison .row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .nav #nav-links { display: none; position: absolute; right: 12px; left: 12px; top: 72px; background: #081a2a; border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 25px; width: auto; flex-direction: column; z-index: 25; }
  .nav #nav-links.open { display: flex; }
  .nav #nav-links a { padding: 10px 12px; border-radius: 8px; }
  .nav #nav-links a:active { background: rgba(255,255,255,0.04); }
  .section, .hero { scroll-margin-top: 72px; }
  .show-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .benefits .grid, .services .grid, .process .steps { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .show-grid { grid-template-columns: 1fr; }
  .hero { padding: 92px 16px 72px; }
  .subtitle { font-size: 15px; }
  .actions { width: 100%; }
  .actions .button { flex: 1 1 100%; width: 100%; }
  .work-img { height: 160px; }
  /* Reduce background effect cost on small devices */
  .bg-noise, .scanline { display: none; }
  .light { animation: none; opacity: 0.22; filter: blur(60px); }
}