:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#60a5fa;
  --accent-2:#93c5fd;
  --border:#1f2937;
  --success:#34d399;
  --danger:#f87171;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}

.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--accent);
  color:#fff;
  padding:8px 16px;
  text-decoration:none;
  z-index:100;
}

.skip-link:focus{top:0}

main{padding-top:0}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{text-decoration:underline}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
}

@media (max-width: 480px){
  .container{
    padding:0 16px;
  }
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,18,32,.85);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}

.logo-dot{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px rgba(96,165,250,.6);
}

.brand-text{letter-spacing:.2px}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.site-nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav-link{
  padding:10px 12px;
  border-radius:10px;
  color:#cbd5e1;
  transition:all .2s;
}

.nav-link:hover{
  background:rgba(148,163,184,.1);
  text-decoration:none;
}

.nav-link.active{
  background:rgba(96,165,250,.15);
  color:#fff;
  border:1px solid rgba(96,165,250,.35);
}

.hero{
  padding:80px 0;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(96,165,250,.15),transparent) no-repeat;
  position:relative;
  overflow:hidden;
}

.hero-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}

.hero-copy h1{
  font-size:2.5rem;
  font-weight:700;
  line-height:1.2;
  margin:0 0 20px 0;
  color:#fff;
}

.lead{
  font-size:1.15rem;
  color:#d1d5db;
  margin:0 0 24px 0;
  line-height:1.6;
}

.cred{
  color:var(--muted);
  font-size:.95rem;
  margin-top:16px;
  line-height:1.5;
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:12px;
  border:1px solid var(--border);
  color:#e5e7eb;
  background:transparent;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  transition:all .2s;
  cursor:pointer;
}

.btn:hover{
  text-decoration:none;
  border-color:#334155;
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg,var(--accent),#3b82f6);
  border-color:transparent;
  box-shadow:var(--shadow);
  color:#fff;
}

.btn-primary:hover{
  filter:brightness(1.1);
  box-shadow:0 15px 40px rgba(96,165,250,.4);
}

.btn-secondary{
  background:rgba(96,165,250,.1);
  border-color:rgba(96,165,250,.4);
}

.btn-secondary:hover{
  background:rgba(96,165,250,.2);
}

.section{
  padding:80px 0;
}

.section h2{
  font-size:2rem;
  font-weight:700;
  margin:0 0 20px 0;
  color:#fff;
  line-height:1.2;
}

.section.alt{
  background:linear-gradient(180deg,rgba(15,23,42,.6),rgba(15,23,42,.3));
}

.cards-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  padding:28px;
  border-radius:16px;
  box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  border-color:rgba(96,165,250,.3);
}

.card h3{
  margin:0 0 12px 0;
  font-size:1.3rem;
  font-weight:600;
  color:#fff;
}

.card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  flex:1;
}

.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:start;
}

.split h2{
  font-size:2rem;
  font-weight:700;
  margin:0 0 20px 0;
  color:#fff;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.steps{
  counter-reset:step;
  list-style:none;
  padding-left:0;
  margin:0;
}

.steps li{
  position:relative;
  padding-left:36px;
  margin-bottom:12px;
  color:var(--muted);
}

.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:2px;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(96,165,250,.15);
  border:1px solid rgba(96,165,250,.4);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:.9rem;
}

.tick{
  list-style:none;
  padding-left:0;
  margin:0;
}

.tick li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  color:var(--muted);
  line-height:1.6;
}

.tick li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--success);
  font-weight:700;
}

.case-highlight{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  align-items:start;
}

.case-highlight h2{
  font-size:2rem;
  font-weight:700;
  margin:0 0 16px 0;
  color:#fff;
}

.case-highlight .accent{
  color:var(--accent);
}

.case-highlight p{
  margin:0 0 24px 0;
  color:var(--muted);
  line-height:1.7;
}

.pricing-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}

.price{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.price:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  border-color:rgba(96,165,250,.3);
}

.price h3{
  margin:0 0 16px 0;
  font-size:1.3rem;
  font-weight:600;
  color:#fff;
}

.price-num{
  font-size:2rem;
  font-weight:700;
  margin:0 0 12px 0;
  color:#fff;
}

.price-num span{
  font-size:1rem;
  font-weight:400;
  color:var(--muted);
}

.price p{
  margin:0 0 20px 0;
  color:var(--muted);
  line-height:1.6;
  flex:1;
}

.small{font-size:.9rem}
.tiny{font-size:.8rem}
.muted{color:var(--muted)}

.page-hero{
  padding:56px 0 24px;
  border-bottom:1px solid var(--border);
  background:radial-gradient(800px 400px at 100% -20%,rgba(96,165,250,.14),transparent);
}

.form-wrap{max-width:720px;margin:0 auto}

.contact-form{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:var(--shadow);
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:20px;
}

.field label{
  color:#fff;
  font-weight:500;
  font-size:.95rem;
}

input,textarea{
  background:#0a1325;
  border:1px solid #233044;
  color:#e5e7eb;
  border-radius:10px;
  padding:12px;
  font-family:inherit;
  font-size:1rem;
  width:100%;
  transition:all .2s;
}

input:focus,textarea:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}

textarea{
  min-height:120px;
  resize:vertical;
}

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:24px;
}

.form-message{
  margin-bottom:16px;
  padding:12px 16px;
  border-radius:8px;
  font-size:.95rem;
  line-height:1.5;
}

.site-footer{
  padding:48px 0;
  border-top:1px solid var(--border);
  background:#0a1220;
  margin-top:80px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
}

.footer-grid h4{
  margin:0 0 16px 0;
  color:#fff;
  font-size:1.1rem;
}

.list{
  list-style:none;
  padding:0;
  margin:0;
}

.list li{
  margin-bottom:8px;
}

.list a{
  color:var(--muted);
  transition:color .2s;
}

.list a:hover{
  color:var(--accent);
  text-decoration:none;
}

.brand-inline{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

/* Hero Visual */
.hero-visual{
  position:relative;
  height:280px;
  border-radius:16px;
  overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%, rgba(96,165,250,.12), rgba(96,165,250,0) 70%);
  border:1px solid rgba(96,165,250,.2);
}

.hero-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 50%, rgba(96,165,250,.1), transparent 50%);
  animation:pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

.grid-lines{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(148,163,184,.06) 50%, transparent 100%), 
              linear-gradient(0deg, transparent 0%, rgba(148,163,184,.06) 50%, transparent 100%);
  background-size:40px 40px;
  opacity:.5;
}

.data-flow{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.data-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.7;
  animation:slideIn 1.5s ease-out forwards,lineFlow 3s ease-in-out infinite;
}

@keyframes slideIn{
  0%{left:-100%}
  100%{left:20%}
}

@keyframes lineFlow{
  0%,100%{opacity:.5}
  50%{opacity:.9}
}

.line-1{top:20%;left:-100%;width:60%;animation-delay:.2s}
.line-2{top:40%;left:-100%;width:70%;animation-delay:.4s}
.line-3{top:60%;left:-100%;width:55%;animation-delay:.6s}
.line-4{top:80%;left:-100%;width:65%;animation-delay:.8s}

.data-points{
  position:absolute;
  inset:0;
}

.data-point{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px var(--accent);
  opacity:0;
  animation:fadeInSlide 1s ease-out forwards,dataPulse 2.5s ease-in-out infinite;
}

@keyframes fadeInSlide{
  0%{opacity:0;transform:translateY(-10px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dataPulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.4);opacity:1}
}

.point-1{top:15%;left:15%;animation-delay:.3s,.5s}
.point-2{top:35%;left:45%;animation-delay:.5s,.7s}
.point-3{top:55%;left:25%;animation-delay:.7s,.9s}
.point-4{top:75%;left:60%;animation-delay:.9s,1.1s}
.point-5{top:85%;left:35%;animation-delay:1.1s,1.3s}

.chart-bars{
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:90px;
  opacity:0;
  animation:fadeInUp .8s ease-out .4s forwards;
}

@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0)}
}

.bar{
  flex:1;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:4px 4px 0 0;
  min-height:20px;
  animation:growBar .8s ease-out forwards,barGlow 3s ease-in-out infinite;
  transform-origin:bottom;
  box-shadow:0 -2px 10px rgba(96,165,250,.4);
}

@keyframes growBar{
  0%{transform:scaleY(0)}
  100%{transform:scaleY(1)}
}

@keyframes barGlow{
  0%,100%{box-shadow:0 -2px 10px rgba(96,165,250,.4)}
  50%{box-shadow:0 -4px 20px rgba(96,165,250,.6)}
}

.bar-1{height:45%;animation-delay:.6s,1.2s}
.bar-2{height:70%;animation-delay:.7s,1.4s}
.bar-3{height:55%;animation-delay:.8s,1.6s}
.bar-4{height:85%;animation-delay:.9s,1.8s}
.bar-5{height:60%;animation-delay:1s,2s}

/* Card Visuals - Contained within cards */
.card-visual{
  position:relative;
  height:120px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%, rgba(96,165,250,.08), transparent 70%);
  margin-bottom:20px;
  border:1px solid rgba(96,165,250,.1);
}

.card-animation{
  position:relative;
  width:100%;
  height:100%;
}

/* Card 1: Data Collection - Table/Spreadsheet visual */
.visual-1 .dashboard-grid{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(148,163,184,.06) 50%, transparent 100%), 
              linear-gradient(0deg, transparent 0%, rgba(148,163,184,.06) 50%, transparent 100%);
  background-size:20px 20px;
  opacity:.4;
}

.visual-1 .data-table{
  position:absolute;
  bottom:12px;
  left:8px;
  right:8px;
  height:60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  opacity:0;
  animation:fadeInUp .8s ease-out .3s forwards;
}

.visual-1 .table-cell{
  background:linear-gradient(135deg, rgba(96,165,250,.2), rgba(96,165,250,.1));
  border:1px solid rgba(96,165,250,.3);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}

.visual-1 .table-cell::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(96,165,250,.4), transparent);
  animation:cellFill 2s ease-in-out infinite;
}

.table-cell-1{animation-delay:.4s}
.table-cell-2{animation-delay:.5s}
.table-cell-3{animation-delay:.6s}
.table-cell-4{animation-delay:.7s}

@keyframes cellFill{
  0%,100%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
}

.visual-1 .data-row{
  position:absolute;
  top:20px;
  left:8px;
  right:8px;
  height:3px;
  background:linear-gradient(90deg, rgba(96,165,250,.3), rgba(96,165,250,.1));
  border-radius:2px;
  opacity:0;
  animation:rowAppear 1.5s ease-out forwards;
}

.row-1{top:20px;animation-delay:.2s}
.row-2{top:36px;animation-delay:.4s}
.row-3{top:52px;animation-delay:.6s}

@keyframes rowAppear{
  0%{width:0;opacity:0}
  100%{width:100%;opacity:.6}
}

/* Card 2: Dashboard - Chart bars visual */
.visual-2 .dashboard-grid{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(148,163,184,.04) 50%, transparent 100%), 
              linear-gradient(0deg, transparent 0%, rgba(148,163,184,.04) 50%, transparent 100%);
  background-size:20px 20px;
  opacity:.3;
}

.visual-2 .chart-container{
  position:absolute;
  bottom:16px;
  left:12px;
  right:12px;
  height:70px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  opacity:0;
  animation:fadeInUp .8s ease-out .2s forwards;
}

.visual-2 .chart-bar{
  flex:1;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:3px 3px 0 0;
  min-height:8px;
  opacity:0;
  animation:barGrow 1s ease-out forwards,barPulse 2.5s ease-in-out infinite;
  transform-origin:bottom;
  box-shadow:0 -2px 8px rgba(96,165,250,.4);
}

@keyframes barGrow{
  0%{transform:scaleY(0);opacity:0}
  100%{transform:scaleY(1);opacity:1}
}

@keyframes barPulse{
  0%,100%{box-shadow:0 -2px 8px rgba(96,165,250,.4)}
  50%{box-shadow:0 -4px 16px rgba(96,165,250,.6)}
}

.chart-bar-1{height:45%;animation-delay:.4s,1s}
.chart-bar-2{height:70%;animation-delay:.5s,1.2s}
.chart-bar-3{height:55%;animation-delay:.6s,1.4s}
.chart-bar-4{height:85%;animation-delay:.7s,1.6s}
.chart-bar-5{height:60%;animation-delay:.8s,1.8s}

.visual-2 .chart-label{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:3px;
  background:var(--accent);
  border-radius:50%;
  opacity:.6;
}

/* Card 3: Success/Results - Centered checkmark */
.visual-3{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.success-ring{
  position:absolute;
  width:70px;
  height:70px;
  border:2px solid var(--success);
  border-radius:50%;
  top:50%;
  left:50%;
  margin-top:-35px;
  margin-left:-35px;
  opacity:0;
  animation:ringExpand 3s ease-out infinite;
}

@keyframes ringExpand{
  0%{transform:scale(.5);opacity:.8}
  100%{transform:scale(2);opacity:0}
}

.ring-1{animation-delay:0s}
.ring-2{animation-delay:1.5s}

.success-icon{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-28px;
  margin-left:-28px;
  font-size:36px;
  color:var(--success);
  font-weight:900;
  opacity:0;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:2px solid var(--success);
  border-radius:50%;
  animation:fadeInSlide .8s ease-out .4s forwards;
}

/* Process Visual */
.process-visual{
  position:relative;
  height:200px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%, rgba(96,165,250,.1), transparent 70%);
  margin-bottom:20px;
  border:1px solid rgba(96,165,250,.15);
}

.process-grid{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(148,163,184,.04) 50%, transparent 100%), 
              linear-gradient(0deg, transparent 0%, rgba(148,163,184,.04) 50%, transparent 100%);
  background-size:32px 32px;
  opacity:.4;
}

.process-flow{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0 28px;
}

.flow-node{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 24px rgba(96,165,250,.6);
  position:relative;
  opacity:0;
  animation:fadeInSlide .7s ease-out forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  color:#0a0f1f;
  flex-shrink:0;
}

.node-1{animation-delay:.1s}
.node-2{animation-delay:.3s}
.node-3{animation-delay:.5s}
.node-4{animation-delay:.7s}
.node-5{animation-delay:.9s}

.flow-connector{
  width:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), rgba(96,165,250,.4));
  opacity:0;
  animation:expandConnector 1s ease-out forwards;
  border-radius:2px;
  flex-shrink:0;
}

.conn-1{animation-delay:.5s}
.conn-2{animation-delay:.7s}
.conn-3{animation-delay:.9s}
.conn-4{animation-delay:1.1s}

@keyframes expandConnector{
  0%{width:0;opacity:0}
  50%{opacity:.8}
  100%{width:calc((100% - 200px) / 4);opacity:.6}
}

/* Price Visuals */
.price-visual{
  position:relative;
  height:100px;
  border-radius:10px;
  overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%, rgba(96,165,250,.08), transparent 70%);
  margin-bottom:16px;
  border:1px solid rgba(96,165,250,.1);
}

/* Essentials: Simple data sources */
.visual-essentials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  height:100%;
}

.visual-essentials .price-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity:0;
  animation:iconFloat 3s ease-in-out infinite;
  box-shadow:0 4px 12px rgba(96,165,250,.5);
}

.icon-1{animation-delay:0s}
.icon-2{animation-delay:1.5s}

@keyframes iconFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.7}
  50%{transform:translateY(-12px) scale(1.2);opacity:1}
}

/* Insights: Real-time data waves */
.visual-insights{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  height:100%;
  padding-bottom:16px;
}

.insight-wave{
  width:8px;
  height:35px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:4px 4px 0 0;
  opacity:0;
  animation:waveRise 2.2s ease-in-out infinite;
  box-shadow:0 -3px 10px rgba(96,165,250,.4);
}

.wave-1{height:40px;animation-delay:0s}
.wave-2{height:60px;animation-delay:.5s}
.wave-3{height:50px;animation-delay:1s}

@keyframes waveRise{
  0%,100%{transform:scaleY(.2);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}

/* Enterprise: Multiple connected systems */
.visual-enterprise{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding:16px;
  position:relative;
  height:100%;
}

.enterprise-grid-elem{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:8px;
  opacity:0;
  animation:gridPulse 3s ease-in-out infinite;
  box-shadow:0 3px 10px rgba(96,165,250,.4);
}

.elem-1{animation-delay:0s}
.elem-2{animation-delay:.5s}
.elem-3{animation-delay:1s}
.elem-4{animation-delay:1.5s}

@keyframes gridPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

.enterprise-pulse{
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 0 24px var(--accent);
  animation:pulseExpand 3s ease-out infinite;
}

@keyframes pulseExpand{
  0%{transform:translate(-50%, -50%) scale(1);opacity:1}
  100%{transform:translate(-50%, -50%) scale(5);opacity:0}
}

/* FAQ Section */
.faq-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-bottom:32px;
}

.faq-header h2{
  margin:0;
  font-size:2rem;
  font-weight:700;
  color:#fff;
  flex:1;
}

.faq-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
  flex-shrink:0;
}

.faq-animation{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.question-mark{
  position:absolute;
  font-size:36px;
  font-weight:900;
  color:var(--accent);
  opacity:0;
  animation:questionPop 3s ease-in-out infinite;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.mark-1{animation-delay:0s}
.mark-2{animation-delay:1s}
.mark-3{animation-delay:2s}

@keyframes questionPop{
  0%,100%{transform:translate(-50%, -50%) scale(0) rotate(-15deg);opacity:0}
  50%{transform:translate(-50%, -50%) scale(1.2) rotate(5deg);opacity:1}
}

.question-circle{
  position:absolute;
  top:50%;
  left:50%;
  width:75px;
  height:75px;
  border:2px dashed var(--accent);
  border-radius:50%;
  transform:translate(-50%, -50%);
  opacity:.3;
  animation:circleRotate 6s linear infinite;
}

@keyframes circleRotate{
  0%{transform:translate(-50%, -50%) rotate(0deg)}
  100%{transform:translate(-50%, -50%) rotate(360deg)}
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:32px;
}

.faq-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  transition:all .2s;
}

.faq-item:hover{
  border-color:rgba(96,165,250,.3);
  transform:translateY(-2px);
}

.faq-item h3{
  margin:0 0 12px 0;
  font-size:1.15rem;
  color:#fff;
  font-weight:600;
}

.faq-item p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.cookie-banner{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:520px;
  width:90%;
  background:rgba(15,23,42,0.98);
  border:1px solid rgba(148,163,184,0.3);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:1000;
}

.cookie-banner h3{
  margin:0;
  font-size:1.1rem;
  color:#fff;
}

.cookie-banner p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.6;
}

.cookie-banner .cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.cookie-banner .btn{
  flex:1;
  min-width:140px;
}

.cookie-banner .btn-tertiary{
  background:transparent;
  border:1px solid rgba(148,163,184,0.4);
  color:var(--muted);
}

.cookie-banner .btn-tertiary:hover{
  border-color:rgba(96,165,250,0.6);
  color:#fff;
}

@media(max-width:600px){
  .cookie-banner{
    bottom:16px;
    padding:16px 18px;
    gap:12px;
  }
  .cookie-banner .cookie-actions{
    flex-direction:column;
  }
}

/* Slideshow */
.slideshow-container{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.slideshow-wrapper{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  background:var(--bg);
}

.slideshow-wrapper img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--bg);
  opacity:0;
  transition:opacity .5s ease-in-out;
}

.slideshow-wrapper img.active{
  opacity:1;
}

.slideshow-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:16px;
  background:rgba(15,23,42,.8);
  border-top:1px solid var(--border);
}

.slideshow-btn{
  background:rgba(96,165,250,.15);
  border:1px solid rgba(96,165,250,.35);
  color:var(--accent);
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:all .2s;
  font-size:.9rem;
}

.slideshow-btn:hover{
  background:rgba(96,165,250,.25);
  border-color:var(--accent);
}

.slideshow-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.slideshow-dots{
  display:flex;
  gap:8px;
  align-items:center;
}

.slideshow-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(148,163,184,.3);
  border:none;
  cursor:pointer;
  transition:all .2s;
  padding:0;
}

.slideshow-dot.active{
  background:var(--accent);
  width:24px;
  border-radius:4px;
}

.slideshow-counter{
  color:var(--muted);
  font-size:.85rem;
  margin:0 8px;
}

.slideshow-captions{
  padding:12px 16px;
  background:rgba(15,23,42,.6);
  border-top:1px solid var(--border);
  text-align:center;
  position:relative;
  min-height:44px;
}

.slideshow-caption{
  color:var(--muted);
  font-size:.9rem;
  opacity:0;
  transition:opacity .3s ease-in-out;
  position:absolute;
  width:calc(100% - 32px);
  left:16px;
  top:12px;
  padding:0;
}

.slideshow-caption.active{
  opacity:1;
  position:relative;
  top:0;
  left:0;
  width:100%;
}

.screenshot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
  margin-top:32px;
}

.screenshot-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}

.screenshot-item:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(0,0,0,0.4);
}

.screenshot-item img{
  width:100%;
  height:auto;
  display:block;
}

.screenshot-item .caption{
  padding:16px;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}

/* Responsive Design */
@media (max-width: 960px){
  .hero{padding:60px 0}
  
  .hero-inner,.split,.case-highlight{
    grid-template-columns:1fr;
    gap:32px;
  }
  
  .hero-copy h1{
    font-size:2rem;
  }
  
  .pricing-tiles,.cards-3,.footer-grid,.faq-grid,.screenshot-grid{
    grid-template-columns:1fr;
  }
  
  .slideshow-controls{
    flex-wrap:wrap;
    gap:8px;
  }
  
  .slideshow-btn{
    font-size:.8rem;
    padding:6px 12px;
    min-height:36px;
  }
  
  .faq-header{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
  }
  
  .faq-visual{
    width:80px;
    height:80px;
  }
  
  .card-visual{
    height:100px;
  }
  
  .price-visual{
    height:80px;
  }
  
  .process-visual{
    height:160px;
  }
  
  .site-nav{
    display:none;
    position:absolute;
    right:18px;
    top:64px;
    background:#0a1220;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    flex-direction:column;
    gap:8px;
    min-width:220px;
    box-shadow:var(--shadow);
    z-index:100;
  }
  
  .site-nav.open{
    display:flex;
  }
  
  .menu-toggle{
    display:inline-block;
    min-width:44px;
    min-height:44px;
    padding:10px;
  }
  
  .nav-link{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  
  .footer-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  
  .section{
    padding:60px 0;
  }
}

@media (max-width: 640px){
  .container{
    padding:0 16px;
  }
  
  .hero-copy h1{
    font-size:1.75rem;
  }
  
  .lead{
    font-size:1rem;
  }
  
  .btn{
    padding:14px 24px;
    font-size:.95rem;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .cta-row{
    flex-direction:column;
    gap:12px;
  }
  
  .card,.price{
    padding:20px;
  }
  
  .hero-visual{
    height:200px;
  }
  
  .hero{
    padding:40px 0;
  }
  
  .section{
    padding:50px 0;
  }
}