.timeline{
  position:relative;
  max-width:960px;
  margin:0 auto;
}

.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:hsl(var(--border) / .9);
}

.timeline-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:28px;
  margin-bottom:28px;
}

.timeline-item.reverse{flex-direction:row-reverse}
.timeline-copy,.timeline-spacer{flex:1}

.timeline-card{
  display:inline-block;
  max-width:380px;
  padding:24px;
  border-radius:24px;
}

.timeline-card .step-tag{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.timeline-card .step-num{
  font-size:12px;
  color:hsl(var(--muted-foreground));
}

.timeline-card h3{
  margin:0 0 10px;
  font-size:22px;
}

.timeline-card p{
  margin:0;
  color:hsl(var(--muted-foreground));
  line-height:1.8;
  font-size:14px;
}

.timeline-dot{
  position:relative;
  z-index:1;
  width:18px;
  height:18px;
  border-radius:50%;
  background:hsl(var(--primary));
  border:4px solid hsl(var(--background));
  flex-shrink:0;
  margin-top:26px;
}

.security-grid,.transparency-grid,.pricing-grid,.testimonial-grid{
  display:grid;
  gap:22px;
}

.security-grid{grid-template-columns:repeat(3,1fr)}
.transparency-grid{grid-template-columns:repeat(3,1fr)}
.pricing-grid{grid-template-columns:repeat(3,1fr);max-width:1080px;margin:0 auto}
.testimonial-grid{grid-template-columns:repeat(3,1fr);max-width:1080px;margin:0 auto 38px}

.security-card,.monitor-card,.admin-card,.price-card,.testimonial{
  padding:28px;
  border-radius:24px;
}

.security-card h3,.monitor-card h3,.admin-card h3,.price-card h3,.testimonial h3{
  margin:18px 0 10px;
  font-size:22px;
}

.security-card p,.monitor-card p,.admin-card p,.testimonial p,.faq-body,.price-card li,.price-desc{
  color:hsl(var(--muted-foreground));
  line-height:1.8;
  font-size:14px;
}

.compare-shell{
  border-radius:28px;
  overflow:hidden;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

th,td{
  padding:18px 20px;
  border-bottom:1px solid hsl(var(--border) / .7);
  text-align:left;
  font-size:14px;
}

th{font-size:13px;color:hsl(var(--muted-foreground))}
tr:nth-child(even) td{background:hsl(var(--muted) / .2)}
td.center,th.center{text-align:center}

.yes{color:hsl(var(--phantom-success));font-weight:700}
.maybe{color:hsl(var(--phantom-warning));font-weight:700}
.no{color:hsl(var(--destructive));font-weight:700}

.monitor-mock{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:hsl(var(--background) / .62);
  border:1px solid hsl(var(--border) / .65);
}

.monitor-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  margin:10px 0;
}

.meter{
  width:100%;
  height:10px;
  border-radius:999px;
  background:hsl(var(--muted) / .7);
  overflow:hidden;
  margin-top:14px;
}

.meter > span{
  display:block;
  width:63%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  max-width:960px;
  margin:0 auto;
}

.admin-preview{
  max-width:820px;
  margin:28px auto 0;
  padding:24px;
  border-radius:24px;
}

.traffic-lights{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}

.traffic-lights span{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}

.traffic-lights .r{background:hsl(var(--destructive))}
.traffic-lights .y{background:hsl(var(--phantom-warning))}
.traffic-lights .g{background:hsl(var(--phantom-success))}

.admin-user{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  background:hsl(var(--background) / .62);
  border:1px solid hsl(var(--border) / .6);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  margin-top:10px;
}

.wizard-preview{
  max-width:640px;
  margin:0 auto;
  padding:24px;
  border-radius:24px;
}

.progress-steps{
  display:flex;
  align-items:center;
  gap:10px;
}

.progress-steps .track{
  flex:1;
  height:2px;
  background:hsl(var(--border) / .8);
}

.progress-steps .track.active{background:hsl(var(--primary))}

.step-ball{
  width:34px;
  height:34px;
  border-radius:50%;
  background:hsl(var(--muted) / .85);
  color:hsl(var(--muted-foreground));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:13px;
}

.step-ball.active{
  background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
}

.wizard-stage{
  min-height:320px;
  padding:30px 12px 16px;
  text-align:center;
}

.wizard-stage h3{
  margin:18px 0 12px;
  font-size:28px;
}

.wizard-stage p{
  margin:0 auto;
  max-width:460px;
  color:hsl(var(--muted-foreground));
  line-height:1.8;
}

.qr-placeholder{
  width:160px;
  height:160px;
  margin:24px auto 0;
  border-radius:20px;
  border:2px dashed hsl(var(--border) / .8);
  display:grid;
  place-items:center;
  background:hsl(var(--background) / .52);
}

.switch-mock{
  width:90px;
  height:46px;
  margin:24px auto 10px;
  border-radius:999px;
  border:2px solid hsl(var(--phantom-success) / .5);
  background:hsl(var(--phantom-success) / .16);
  position:relative;
}

.switch-mock::after{
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:hsl(var(--phantom-success));
}

.price-card{
  display:flex;
  flex-direction:column;
  position:relative;
}

.price-card.popular{
  outline:2px solid hsl(var(--primary) / .28);
  box-shadow:0 0 40px -10px hsl(var(--primary) / .32),0 0 80px -30px hsl(var(--primary) / .18);
}

.popular-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:hsl(var(--primary-foreground));
  background:hsl(var(--primary));
}

.price-top{
  display:flex;
  align-items:center;
  gap:14px;
}

.price{
  margin:20px 0 8px;
  font-size:46px;
  font-weight:900;
  letter-spacing:-.05em;
}

.price small{
  font-size:14px;
  font-weight:500;
  color:hsl(var(--muted-foreground));
}

.price-list{
  list-style:none;
  padding:0;
  margin:18px 0 28px;
  display:grid;
  gap:12px;
  flex:1;
}

.price-list li{
  display:flex;
  gap:10px;
}

.price-list li::before{
  content:"+";
  color:hsl(var(--primary));
  font-weight:900;
}

.rating{
  display:flex;
  gap:4px;
  color:hsl(var(--phantom-warning));
  margin-bottom:18px;
}

.trust-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

.trust-badges span{
  padding:12px 18px;
  border-radius:18px;
  font-size:14px;
}

.faq-shell{
  max-width:840px;
  margin:0 auto;
  display:grid;
  gap:14px;
}

.faq-item{
  border-radius:20px;
  overflow:hidden;
}

.faq-btn{
  width:100%;
  padding:22px 24px;
  border:0;
  background:transparent;
  color:hsl(var(--foreground));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  font-weight:700;
}

.faq-btn i{
  transition:transform .2s ease;
  color:hsl(var(--primary));
}

.faq-item.open .faq-btn i{transform:rotate(180deg)}

.faq-body{
  display:none;
  padding:0 24px 24px;
}

.faq-item.open .faq-body{display:block}

.cta-shell{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:54px 28px;
  text-align:center;
}

.cta-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,hsl(var(--primary) / .18),hsl(var(--accent) / .1),hsl(var(--primary) / .04));
}

.cta-shell::after{
  content:"";
  position:absolute;
  top:-20px;
  right:-40px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:hsl(var(--primary) / .1);
  filter:blur(80px);
}

.cta-inner{
  position:relative;
  z-index:1;
}

.cta-inner h2{
  margin:0 0 14px;
  font-size:clamp(34px,5vw,60px);
  font-weight:900;
}

.cta-inner p{
  max-width:700px;
  margin:0 auto;
  color:hsl(var(--muted-foreground));
  line-height:1.8;
}

.cta-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
  margin-top:28px;
  color:hsl(var(--muted-foreground));
  font-size:13px;
}

@media (max-width: 1100px){
  .security-grid,.transparency-grid,.pricing-grid,.testimonial-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 860px){
  .timeline::before{display:none}
  .timeline-item,.timeline-item.reverse{flex-direction:column}
  .timeline-dot{display:none}
  .timeline-card{max-width:none}
  .security-grid,.transparency-grid,.pricing-grid,.testimonial-grid,.admin-grid{grid-template-columns:1fr}
  .admin-user{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .hero-actions,.cta-features{justify-content:center}
  .admin-user{grid-template-columns:1fr}
}