@font-face{font-family:'Nexa Bold'; font-style:normal; font-weight:700; src:local('Nexa Bold'), url('assets/fonts/NexaBold.woff') format('woff'); font-display:swap}
@font-face{font-family:'Nexa Light'; font-style:normal; font-weight:300; src:local('Nexa Light'), url('assets/fonts/NexaLight.woff') format('woff'); font-display:swap}

:root{
  --bg:#FAFAFA;
  --panel:#FFFFFF;
  --muted:#6B7280;
  --text:#1F2937;
  --brand:#F7941D;
  --brand-2:#E8522E;
  --accent:#D4621A;
  --ok:#059669; --warn:#d97706; --danger:#dc2626;
  --ring: 0 0 0 .15rem color-mix(in oklab, var(--brand) 25%, transparent);
  --radius: 18px;
  --shadow: 0 4px 24px rgba(0,0,0,.06);
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --grid: conic-gradient(from 90deg at 1px 1px, #0000 90deg, rgba(0,0,0,.03) 0) 0 0/22px 22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}
h1, h2, h3, .hero-title, .stat-number, .price b, .cta.primary, .step-number{
  font-family:'Nexa Bold', Inter, system-ui, sans-serif;
  font-weight:700;
}

/* Animated bubble background */
.bubbles{
  position:fixed;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.bubble{
  position:absolute;
  border-radius:50%;
  opacity:0;
  animation:float-up 18s infinite;
}
.bubble:nth-child(1){width:80px; height:80px; left:10%; background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.15), rgba(247,148,29,.03)); animation-delay:0s}
.bubble:nth-child(2){width:120px; height:120px; left:20%; background:radial-gradient(circle at 30% 30%, rgba(232,82,46,.12), rgba(232,82,46,.02)); animation-delay:2s}
.bubble:nth-child(3){width:60px; height:60px; left:35%; background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.18), rgba(247,148,29,.03)); animation-delay:4s}
.bubble:nth-child(4){width:100px; height:100px; left:50%; background:radial-gradient(circle at 30% 30%, rgba(232,82,46,.1), rgba(232,82,46,.01)); animation-delay:1s}
.bubble:nth-child(5){width:70px; height:70px; left:65%; background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.14), rgba(247,148,29,.02)); animation-delay:3s}
.bubble:nth-child(6){width:140px; height:140px; left:75%; background:radial-gradient(circle at 30% 30%, rgba(232,82,46,.08), rgba(232,82,46,.01)); animation-delay:5s}
.bubble:nth-child(7){width:90px; height:90px; left:85%; background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.12), rgba(247,148,29,.02)); animation-delay:2.5s}
.bubble:nth-child(8){width:50px; height:50px; left:5%; background:radial-gradient(circle at 30% 30%, rgba(232,82,46,.16), rgba(232,82,46,.03)); animation-delay:6s}
.bubble:nth-child(9){width:110px; height:110px; left:45%; background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.1), rgba(247,148,29,.01)); animation-delay:7s}
.bubble:nth-child(10){width:65px; height:65px; left:90%; background:radial-gradient(circle at 30% 30%, rgba(232,82,46,.13), rgba(232,82,46,.02)); animation-delay:4.5s}

@keyframes float-up{
  0%{transform:translateY(100vh) scale(0.5) rotate(0deg); opacity:0}
  10%{opacity:1}
  50%{transform:translateY(0vh) scale(0.9) rotate(180deg); opacity:0.6}
  90%{opacity:1}
  100%{transform:translateY(-100vh) scale(1.2) rotate(360deg); opacity:0}
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .bubble{animation:none; opacity:0.15}
  .bubble:nth-child(odd){top:20%}
  .bubble:nth-child(even){top:60%}
}

/* Main content wrapper */
main{position:relative; z-index:1}
header{position:relative; z-index:40}
a{color:var(--text); text-decoration:none}
.container{width:min(1200px, 92vw); margin-inline:auto}

/* Header */
header{
  position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(14px);
  background:linear-gradient(135deg, rgba(247,148,29,.95), rgba(232,82,46,.95));
  border-bottom:none;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0; min-height:80px; flex-wrap:nowrap}
.brand{display:flex; gap:12px; align-items:center}
.brand-logo{height:72px; width:auto}
.logo{width:34px; height:34px; border-radius:10px; background:var(--grad); box-shadow:0 4px 12px rgba(232,82,46,.25)}
.brand h1{font-size:18px; letter-spacing:.2px; margin:0; font-weight:700; color:#fff}
.brand small{display:block; font-weight:500; color:rgba(255,255,255,.8); margin-top:-2px}
nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center; flex-shrink:0}
nav ul li a{color:rgba(255,255,255,.85); font-weight:500; transition:color .2s}
nav ul li a:hover{color:#fff}
header a{color:rgba(255,255,255,.85)}
header .cta{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; box-shadow:none}
header .cta:hover{background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.4); box-shadow:none}
header .cta.primary{background:#fff; color:var(--brand-2); font-weight:700; border:none; box-shadow:0 4px 16px rgba(0,0,0,.15)}
header .cta.primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border-radius:12px; background:var(--panel); border:1px solid rgba(0,0,0,.1); text-decoration:none; font-weight:500; color:var(--text); transition:all 0.2s; white-space:nowrap; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cta:hover{transform:translateY(-1px); border-color:rgba(0,0,0,.15); background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cta.primary{background:var(--grad); color:#fff; font-weight:700; border:none; box-shadow:0 6px 20px rgba(232,82,46,.3)}
.cta.primary:hover{transform:translateY(-2px); box-shadow:0 10px 32px rgba(232,82,46,.4)}

/* Mobile nav (checkbox hack) */
#menu-toggle{display:none}
.hamburger{display:none; width:40px; height:40px; place-items:center; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.15); cursor:pointer; color:#fff}
.mobile-menu{display:none}
@media (max-width: 900px){
  nav{flex-direction:row; justify-content:space-between}
  nav ul{display:none}
  nav .cta.primary{display:none}
  .hamburger{display:grid}
  #menu-toggle:checked ~ .mobile-menu{display:block}
  .mobile-menu{position:absolute; inset:60px 0 auto 0; padding:16px; background:linear-gradient(135deg, rgba(247,148,29,.98), rgba(232,82,46,.98)); border-bottom:none; backdrop-filter:blur(20px)}
  .mobile-menu a{display:block; padding:12px 10px; border-radius:10px; margin-bottom:8px; color:#fff}
  .mobile-menu a:hover{background:rgba(255,255,255,.12)}
  .mobile-menu .cta{width:100%; justify-content:center}
}

/* Hero */
.hero{padding:80px 0 0; position:relative; background:linear-gradient(160deg, #F7941D 0%, #E8522E 60%, #C4391E 100%); color:#fff; margin-top:-1px}
.hero .wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:48px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.85); padding:6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.1)}
h2.big{font-size: clamp(34px, 4vw, 50px); line-height:1.1; margin:14px 0 12px; color:#fff}
.subtitle{color:rgba(255,255,255,.85); font-size:18px}
.hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; align-items:center}
.trust{display:flex; gap:26px; align-items:center; margin-top:26px; color:rgba(255,255,255,.8); font-size:14px; flex-wrap:wrap}
.trust-badge{padding:8px 16px; border-radius:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font-size:13px; color:rgba(255,255,255,.85)}
.panel{
  background:var(--panel);
  border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero .card{padding:22px}
.hero .panel{background:#fff; border-color:rgba(255,255,255,.3); box-shadow:0 8px 32px rgba(0,0,0,.12)}
.metric{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.metric .kpi{padding:16px; border-radius:14px; background:rgba(0,0,0,.04); border:1px dashed rgba(0,0,0,.08)}
.kpi b{display:block; font-size:22px}

@media (max-width: 1000px){
  .hero .wrap{grid-template-columns: 1fr}
}
@media (max-width: 768px){
  .trust{gap:12px}
  .trust-badge{font-size:12px; padding:6px 12px}
}

/* Feature grid */
section{padding:60px 0}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px}
.section-title h3{margin:0; font-size:24px}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.tile{padding:18px; border-radius:16px; border:1px solid rgba(0,0,0,.08); background:var(--panel); transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tile:hover{border-color:rgba(232,82,46,.3); background:#fff; box-shadow:0 4px 16px rgba(232,82,46,.08)}
.tile h4{margin:6px 0 6px}
.tile p{color:var(--muted); margin:0}
.badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.12); color:var(--muted); background:rgba(0,0,0,.02)}
.icon{width:28px; height:28px; border-radius:8px; background:var(--grad); display:grid; place-items:center; box-shadow:0 4px 12px rgba(232,82,46,.3)}
.icon svg{width:16px; height:16px; color:#fff}
@media (max-width: 900px){.grid{grid-template-columns: 1fr}}

/* Plans */
.plans{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.plan{padding:22px; border-radius:18px; border:1px solid rgba(0,0,0,.08); background:var(--panel); position:relative; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.plan:hover{border-color:rgba(0,0,0,.15); background:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08)}
.plan.popular{background:linear-gradient(180deg, rgba(247,148,29,.08), #fff); border-color:rgba(232,82,46,.4); box-shadow:0 8px 32px rgba(232,82,46,.12)}
.price{display:flex; align-items:flex-end; gap:8px; margin:12px 0}
.price b{font-size:34px}
.price small{color:var(--muted)}
.features{display:grid; gap:10px; margin:12px 0}
.features li{list-style:none; display:flex; gap:10px; align-items:flex-start}
.tick{width:18px; height:18px; border-radius:5px; background:rgba(5,150,105,.15); display:grid; place-items:center}
.tick svg{width:12px; height:12px}
.plan .cta{width:100%; justify-content:center; margin-top:12px}
@media (max-width: 1000px){.plans{grid-template-columns: 1fr}}

/* Logos row */
.logos{display:grid; grid-template-columns: repeat(6,1fr); gap:18px; opacity:.85}
.logos .logo-box{padding:14px; border-radius:14px; border:1px solid rgba(0,0,0,.06); background:var(--panel); display:grid; place-items:center}
@media (max-width: 900px){.logos{grid-template-columns: repeat(3,1fr)}}

/* CTA band */
.cta-band{padding:28px; border-radius:18px; display:grid; grid-template-columns: 1.4fr .6fr; gap:18px; align-items:center; background:var(--grid), linear-gradient(180deg, rgba(247,148,29,.08), rgba(255,255,255,.8)); border:1px solid rgba(232,82,46,.2)}
.cta-band p{margin:8px 0 0; color:var(--muted)}
.cta-band .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
@media (max-width: 900px){.cta-band{grid-template-columns: 1fr}}

/* Footer */
footer{padding:40px 0; color:var(--muted); position:relative; z-index:1; border-top:1px solid rgba(0,0,0,.08); background:var(--panel)}
.cols{display:grid; grid-template-columns: 1.2fr .8fr .8fr .8fr; gap:18px}
.cols h5{margin:0 0 10px; color:var(--text)}
.cols a{display:block; color:var(--muted); padding:6px 0; transition:color .2s}
.cols a:hover{color:var(--text)}
.social-links{display:flex; gap:12px; margin-top:16px}
.social-links a{display:flex !important; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(0,0,0,.05); color:var(--muted); transition:all .2s}
.social-links a:hover{background:var(--grad); color:#fff}
.legal{margin-top:30px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px}

/* Page hero styles */
.page-hero{text-align:center; max-width:800px; margin:0 auto; padding-bottom:60px}
.page-hero h1, .page-hero h2{color:#fff}
.page-hero p{color:rgba(255,255,255,.85)}
.page-hero .section-badge{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.25)}

/* Status page styles */
.status-operational{background:rgba(5,150,105,.12); color:var(--ok); border-color:var(--ok)}
.status-grid{display:grid; gap:16px}
.status-item{display:flex; align-items:center; gap:16px; padding:20px; border-radius:12px; border:1px solid rgba(0,0,0,.08); background:var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.04)}
.status-item.operational .status-indicator{background:var(--ok)}
.status-indicator{width:12px; height:12px; border-radius:50%; flex-shrink:0}
.status-details{flex-grow:1}
.status-details h4{margin:0 0 4px; font-size:16px}
.status-details p{margin:0; color:var(--muted); font-size:14px}
.status-badge{padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; background:rgba(5,150,105,.12); color:var(--ok)}
.regions-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px}
.region-item h4{margin:0 0 16px; font-size:18px}
.region-pops{display:flex; flex-wrap:wrap; gap:8px}
.pop{padding:6px 12px; border-radius:6px; font-size:13px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08)}
.pop.operational{background:rgba(5,150,105,.12); color:var(--ok); border-color:var(--ok)}
.uptime-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px; text-align:center}
.uptime-metric{padding:24px; border-radius:12px; background:var(--panel); border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.04)}
.metric-value{font-size:32px; font-weight:700; color:var(--text); margin-bottom:8px}
.metric-label{color:var(--muted); font-size:14px}
.incidents-list{display:grid; gap:16px}
.incident{display:flex; gap:16px; padding:20px; border-radius:12px; border:1px solid rgba(0,0,0,.08); background:var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.04)}
.incident.resolved .incident-status{background:rgba(5,150,105,.12); color:var(--ok)}
.incident-status{padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; height:fit-content}
.incident-details h4{margin:0 0 8px; font-size:16px}
.incident-details p{margin:0 0 8px; color:var(--muted)}
.incident-meta{font-size:12px; color:var(--muted)}

/* Feature list styles */
.feature-list{list-style:none; margin:0; padding:0}
.feature-list li{padding:6px 0; color:var(--muted); font-size:14px}
.feature-list li:before{content:"\2022"; color:var(--accent); margin-right:8px; font-weight:bold}

/* Contact page styles */
.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.contact-methods{display:grid; gap:24px; margin-bottom:32px}
.contact-method{display:flex; gap:16px; align-items:flex-start}
.contact-icon{font-size:24px; flex-shrink:0}
.contact-method h4{margin:0 0 4px; font-size:16px}
.contact-method p{margin:0; font-size:14px}
.contact-method a{color:var(--accent); text-decoration:none}
.contact-method a:hover{text-decoration:underline}
.response-times{padding:24px; border-radius:12px; background:rgba(0,0,0,.02); border:1px solid rgba(0,0,0,.08)}
.response-times h4{margin:0 0 16px; font-size:16px}
.contact-form-container{position:sticky; top:100px}
.contact-form{padding:32px; max-width:500px; background:#fff; border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,.12)}
.contact-form h3{margin:0 0 8px; font-size:20px; color:var(--text)}
.contact-form > p{margin:0 0 24px; color:var(--muted)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:24px}
.faq-item{padding:24px; border-radius:12px; background:var(--panel); border:1px solid rgba(0,0,0,.08); transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.faq-item:hover{border-color:rgba(0,0,0,.15); box-shadow:0 4px 16px rgba(0,0,0,.06)}
.faq-item h4{margin:0 0 12px; font-size:16px}
.faq-item p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}
@media (max-width: 1000px){.contact-layout{grid-template-columns:1fr; gap:32px} .form-row{grid-template-columns:1fr}}

/* Demo page styles */
.demo-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start}
.demo-benefits{display:grid; gap:20px; margin-top:32px}
.benefit{display:flex; gap:16px; align-items:flex-start}
.benefit-icon{font-size:24px; flex-shrink:0}
.benefit h4{margin:0 0 4px; font-size:16px; color:#fff}
.benefit p{margin:0; color:rgba(255,255,255,.8); font-size:14px}
.demo-form-container{position:sticky; top:100px}
.demo-form{padding:32px; max-width:400px; background:#fff; border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,.12)}
.demo-form h3{margin:0 0 8px; font-size:20px; color:var(--text)}
.demo-form > p{margin:0 0 24px; color:var(--muted)}
.form-group{margin-bottom:20px}
.form-group label{display:block; margin-bottom:6px; font-weight:500; font-size:14px; color:#374151}
.form-group input, .form-group select, .form-group textarea{width:100%; padding:12px 14px; border-radius:12px; background:#f9fafb; color:#1F2937; border:1px solid rgba(0,0,0,.15); font-family:inherit; font-size:14px; transition:all .2s}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(247,148,29,.12)}
.form-group textarea{resize:vertical; min-height:80px}
.full-width{width:100%}
.form-note{font-size:12px; margin-top:16px; text-align:center}
.demo-step{width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px}
@media (max-width: 1000px){.demo-hero{grid-template-columns:1fr; gap:32px}}

/* Utility */
.muted{color:var(--muted)}
.center{text-align:center}
.chip{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.08)}
.hero .chip{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff}

/* New Hero Styles */
.hero-center{text-align:center; max-width:800px; margin:0 auto; position:relative; padding-bottom:80px}
.hero-center::before{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; height:400px; background:radial-gradient(ellipse, rgba(255,255,255,.08) 0%, transparent 70%); pointer-events:none; z-index:-1}
.hero-title{font-size:clamp(40px, 6vw, 72px); line-height:1.05; margin:20px 0 24px; font-weight:800; letter-spacing:-1px; color:#fff}
.gradient-text{background:none; -webkit-background-clip:unset; -webkit-text-fill-color:#fff; background-clip:unset; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:6px; text-decoration-thickness:3px}
.hero-subtitle{font-size:20px; color:rgba(255,255,255,.85); max-width:600px; margin:0 auto 32px; line-height:1.6}
.hero-note{font-size:14px; color:rgba(255,255,255,.7); margin-top:16px}
.hero-cta{justify-content:center}
.hero .cta.primary{background:#fff; color:var(--brand-2); border:none; box-shadow:0 6px 24px rgba(0,0,0,.15)}
.hero .cta.primary:hover{transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.2)}
.hero .cta:not(.primary){background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none}
.hero .cta:not(.primary):hover{background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.5)}

/* Stats Bar */
.stats-bar{padding:40px 0; border-top:none; border-bottom:1px solid rgba(0,0,0,.06); background:var(--panel)}
.stats-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; text-align:center}
.stat-number{display:block; font-size:42px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stat-label{font-size:14px; color:var(--muted); margin-top:4px}
@media (max-width: 768px){.stats-grid{grid-template-columns:repeat(2, 1fr); gap:24px} .stat-number{font-size:32px}}

/* Trusted By / Logo Strip */
.trusted-by{padding:48px 0}
.trusted-label{text-align:center; font-size:14px; color:var(--muted); margin-bottom:24px; text-transform:uppercase; letter-spacing:1px}
.logo-strip{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px}
.client-logo{padding:20px 16px; border-radius:12px; background:var(--panel); border:1px solid rgba(0,0,0,.08); text-align:center; font-size:13px; color:var(--muted); font-weight:500; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.client-logo:hover{background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 4px 12px rgba(0,0,0,.06)}
@media (max-width: 900px){.logo-strip{grid-template-columns:repeat(3, 1fr)}}
@media (max-width: 500px){.logo-strip{grid-template-columns:repeat(2, 1fr)}}

/* Section Headers */
.section-header{margin-bottom:48px}
.section-header h2{font-size:clamp(28px, 4vw, 42px); margin:12px 0; font-weight:700}
.section-header.center{text-align:center}
.section-badge{display:inline-block; font-size:12px; padding:6px 12px; border-radius:999px; background:rgba(247,148,29,.12); color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.5px; border:1px solid rgba(247,148,29,.2)}
.section-subtitle{font-size:18px; color:var(--muted); max-width:600px}
.section-header.center .section-subtitle{margin:0 auto}

/* How It Works / Steps */
.how-it-works{background:var(--panel)}
.steps-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px}
.step{text-align:center; padding:32px 24px; border-radius:16px; transition:all .2s}
.step:hover{background:rgba(0,0,0,.02)}
.step-number{width:56px; height:56px; border-radius:50%; background:var(--grad); color:#fff; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 6px 20px rgba(232,82,46,.3)}
.step h3{font-size:20px; margin:0 0 12px}
.step p{color:var(--muted); margin:0; font-size:15px}
@media (max-width: 768px){.steps-grid{grid-template-columns:1fr; gap:24px}}

/* Feature Categories */
.feature-categories{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
.feature-category{padding:28px; border-radius:16px; background:var(--panel); border:1px solid rgba(0,0,0,.08); transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.feature-category:hover{border-color:rgba(232,82,46,.3); background:#fff; transform:translateY(-3px); box-shadow:0 8px 24px rgba(232,82,46,.08)}
.category-header{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.category-icon{width:44px; height:44px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(232,82,46,.3)}
.category-icon svg{width:22px; height:22px}
.category-header h3{font-size:18px; margin:0}
.category-features{list-style:none; padding:0; margin:0}
.category-features li{padding:8px 0; color:var(--muted); font-size:14px; border-bottom:1px solid rgba(0,0,0,.05)}
.category-features li:last-child{border-bottom:none}
@media (max-width: 1000px){.feature-categories{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 600px){.feature-categories{grid-template-columns:1fr}}

/* Testimonials */
.testimonials{background:var(--panel)}
.testimonials-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.testimonial{padding:28px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.08); transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.testimonial:hover{border-color:rgba(0,0,0,.15); box-shadow:0 8px 24px rgba(0,0,0,.06)}
.testimonial-stars{color:var(--brand); font-size:18px; margin-bottom:16px; letter-spacing:2px}
.testimonial-quote{font-size:15px; line-height:1.7; margin:0 0 20px; color:var(--text)}
.testimonial-author{display:flex; align-items:center; gap:12px}
.author-avatar{width:44px; height:44px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff}
.testimonial-author strong{display:block; font-size:14px}
.testimonial-author span{font-size:13px; color:var(--muted)}
@media (max-width: 900px){.testimonials-grid{grid-template-columns:1fr}}

/* Plans note */
.plans-note{margin-top:24px; font-size:14px}

/* Use Cases */
.use-cases-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px}
.use-case{padding:24px 16px; border-radius:14px; background:var(--panel); border:1px solid rgba(0,0,0,.08); text-align:center; transition:all .2s; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.use-case:hover{border-color:rgba(232,82,46,.3); background:#fff; transform:translateY(-3px); box-shadow:0 8px 24px rgba(232,82,46,.08)}
.use-case-icon{font-size:32px; display:block; margin-bottom:12px}
.use-case h4{font-size:15px; margin:0 0 8px; color:var(--text)}
.use-case p{font-size:13px; color:var(--muted); margin:0; line-height:1.5}
@media (max-width: 900px){.use-cases-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width: 500px){.use-cases-grid{grid-template-columns:repeat(2, 1fr)}}

/* Final CTA */
.final-cta{padding:80px 0}
.cta-card{text-align:center; padding:64px 32px; border-radius:24px; background:var(--grad); color:#fff; box-shadow:0 16px 48px rgba(232,82,46,.2)}
.cta-card h2{font-size:clamp(28px, 4vw, 40px); margin:0 0 16px; color:#fff}
.cta-card p{font-size:18px; color:rgba(255,255,255,.85); margin:0 0 32px}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.cta-card .cta{background:#fff; color:var(--text); border:none; box-shadow:0 4px 16px rgba(0,0,0,.15)}
.cta-card .cta:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cta-card .cta.primary{background:#fff; color:var(--brand-2); font-weight:700}
.cta.large{padding:16px 32px; font-size:16px}
.cta-note{font-size:14px; color:rgba(255,255,255,.7); margin-top:20px}

/* Tick styling update */
.tick{width:18px; height:18px; border-radius:5px; background:rgba(5,150,105,.12); color:var(--ok); display:grid; place-items:center; font-size:12px; flex-shrink:0}

/* 4-column plans */
.plans-4{grid-template-columns:repeat(4, 1fr)}
.plan-desc{font-size:14px; color:var(--muted); margin:0 0 16px}
@media (max-width: 1100px){.plans-4{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 600px){.plans-4{grid-template-columns:1fr}}

/* Comparison table */
.comparison{background:var(--panel)}
.comparison-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1px solid rgba(0,0,0,.08)}
.comparison-table{width:100%; border-collapse:collapse; min-width:700px}
.comparison-table th, .comparison-table td{padding:16px; text-align:left; border-bottom:1px solid rgba(0,0,0,.06)}
.comparison-table th{font-weight:600; font-size:14px; color:var(--text); background:rgba(0,0,0,.02)}
.comparison-table th:first-child{border-radius:8px 0 0 0}
.comparison-table th:last-child{border-radius:0 8px 0 0}
.comparison-table td{font-size:14px; color:var(--muted)}
.comparison-table td:first-child{color:var(--text); font-weight:500}
.comparison-table tr:hover td{background:rgba(0,0,0,.02)}
.comparison-table tbody tr:last-child td{border-bottom:none}

/* Currency Toggle */
.currency-toggle{display:flex; gap:8px; justify-content:center; margin-top:24px}
.currency-btn{padding:10px 20px; border-radius:8px; border:1px solid rgba(0,0,0,.12); background:var(--panel); color:var(--muted); font-size:14px; font-weight:500; cursor:pointer; transition:all .2s; font-family:inherit}
.currency-btn:hover{border-color:rgba(0,0,0,.2); color:var(--text); background:#fff}
.currency-btn.active{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(232,82,46,.3)}

/* Plan tagline */
.plan-tagline{font-size:14px; color:var(--brand-2); margin:0 0 8px; font-weight:500}

/* Price annual */
.price-annual{font-size:13px; margin:-8px 0 16px}

/* Enterprise CTA */
.enterprise-cta{padding:48px; border-radius:20px; background:linear-gradient(135deg, rgba(247,148,29,.08), rgba(255,255,255,.9)); border:1px solid rgba(232,82,46,.2); text-align:center}
.enterprise-content{max-width:600px; margin:0 auto}
.enterprise-cta h2{font-size:32px; margin:16px 0}
.enterprise-cta p{color:var(--muted); margin:0 0 24px}