:root {
     --bg: #0a0a0a;
     --bg2: #111111;
     --bg3: #161616;
     --border: #222222;
     --text: #e8e8e8;
     --muted: #888;
     --green: #00e67a;
     --green-dim: #00e67a22;
     --green-glow: #00e67a44;
     --card: #141414;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background-color: rgb(9 9 11);
     color: var(--text);
     font-family: 'Sora', sans-serif;
     font-size: 15px;
     line-height: 1.65;
     overflow-x: hidden;
 }

 a {
     color: inherit;
     text-decoration: none;
 }



 /* ── HERO ─────────────────────────────────────── */
 .hero {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 120px 20px 80px;
     position: relative;
     overflow: hidden;
 }

 /* Grid background — pure CSS, no Tailwind needed */
 .hero-grid-bg {
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(to right, #18181b 1px, transparent 1px),
         linear-gradient(to bottom, #18181b 1px, transparent 1px);
     background-size: 4rem 4rem;
     -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
     mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
     pointer-events: none;
     z-index: 0;
 }

 /* Green glow blob */
 .hero-glow-blob {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 800px;
     height: 400px;
     background: rgba(16, 185, 129, 0.10);
     /* emerald-500/10 */
     border-radius: 50%;
     filter: blur(120px);
     pointer-events: none;
     z-index: 0;
 }

 /* keep all hero children above the background layers */
 .hero>*:not(.hero-grid-bg):not(.hero-glow-blob) {
     position: relative;
     z-index: 1;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     border: 1px solid var(--border);
     background: var(--bg2);
     padding: 5px 14px;
     border-radius: 99px;
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 32px;
 }

 .hero-badge .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--green);
 }

 .hero h1 {
     font-family: 'Sora', sans-serif;
     font-size: clamp(36px, 6vw, 72px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.03em;
     max-width: 800px;
     margin-bottom: 20px;
 }

 .hero h1 em {
     font-style: italic;
     color: var(--green);
     font-weight: 700;
 }

 .hero p {
     color: var(--muted);
     max-width: 520px;
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 36px;
 }

 .hero-cta {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .btn-hero {
     background: var(--green);
     color: #000;
     font-family: 'Sora', sans-serif;
     font-weight: 600;
     font-size: 15px;
     padding: 14px 32px;
     border-radius: 10px;
     cursor: pointer;
     border: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: box-shadow .25s, transform .15s;
 }

 .btn-hero:hover {
     box-shadow: 0 0 40px var(--green-glow);
     transform: translateY(-2px);
 }

 .hero-note {
     font-size: 12px;
     color: var(--muted);
 }

 .hero-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 24px;
     justify-content: center;
     margin-top: 52px;
 }

 .pill {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     color: var(--muted);
 }

 .pill svg {
     color: var(--green);
 }

 .pill span {
     color: var(--text);
 }

 /* ── SECTION WRAPPER ─────────────────────────────── */
 section {
     padding: 100px 40px;
 }

 .container {
     max-width: 1100px;
     margin: 0 auto;
 }

 .section-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     border: 1px solid rgba(245, 158, 11, 0.3);
     background: rgba(245, 158, 11, 0.1);
     padding: 4px 12px;
     border-radius: 99px;
     font-size: 11px;
     color: #fbbf24;
     margin-bottom: 24px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }

 .section-badge svg {
     color: rgb(245 158 11);
 }

 .section-title {
     font-family: 'Sora', sans-serif;
     font-size: clamp(24px, 3.5vw, 42px);
     font-weight: 700;
     line-height: 1.15;
     letter-spacing: -0.02em;
     max-width: 720px;
     margin-bottom: 60px;
 }

 .section-title.center {
     text-align: center;
     margin-left: auto;
     margin-right: auto;
 }

 /* ── CARDS ──────────────────────────────────────── */
 .monitoring {
     background: var(--bg);
 }

 .monitoring .header {
     text-align: center;
 }

 .cards-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
 }

 .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 24px;
     transition: border-color .2s, transform .2s;
 }

 .card:hover {
     border-color: #333;
     transform: translateY(-3px);
 }

 .card-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: var(--green-dim);
     border: 1px solid var(--green-glow);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     font-size: 18px;
 }

 .card h3 {
     font-family: 'Sora', sans-serif;
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .card p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.6;
 }

 /* ── ALERTS ──────────────────────────────────────── */
 .alerts {
     background: var(--bg2);
 }

 .alerts .header {
     text-align: center;
 }

 .channels-row {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     justify-content: center;
     margin-bottom: 48px;
 }

 .channel-chip {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 14px 20px;
     font-size: 12px;
     color: var(--muted);
     min-width: 72px;
     transition: border-color .2s;
 }

 .channel-chip:hover {
     border-color: #333;
 }

 .channel-chip .icon {
     font-size: 22px;
 }

 .alert-reasons {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 32px;
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
 }

 .alert-reasons h4 {
     font-family: 'Sora', sans-serif;
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .alert-reasons p {
     font-size: 13px;
     color: var(--muted);
 }

 /* ── MANAGEMENT ──────────────────────────────────── */
 .management {
     background: var(--bg);
 }

 .management .header {
     text-align: center;
 }

 /* ── COMPARISON ──────────────────────────────────── */
 .comparison {
     background: var(--bg2);
 }

 .comparison .header {
     text-align: center;
 }

 .compare-table {
     max-width: 700px;
     margin: 0 auto;
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
 }

 .compare-header {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     background: var(--bg3);
     padding: 14px 20px;
     border-bottom: 1px solid var(--border);
     font-size: 13px;
     font-weight: 600;
 }

 .compare-header .ours {
     color: var(--green);
 }

 .compare-row {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     padding: 12px 20px;
     border-bottom: 1px solid var(--border);
     font-size: 13px;
     transition: background .15s;
 }

 .compare-row:last-child {
     border-bottom: none;
 }

 .compare-row:hover {
     background: rgba(255, 255, 255, 0.02);
 }

 .compare-row .bad {
     color: #666;
     text-decoration: line-through;
 }

 .compare-row .good {
     color: var(--green);
 }

 /* ── CTA ──────────────────────────────────────────── */
 .cta-section {
     background: var(--bg2);
     text-align: center;
     padding: 100px 40px;
 }

 .cta-box {
     background: linear-gradient(135deg, #131a14 0%, #0d130e 100%);
     border: 1px solid rgba(0, 230, 122, 0.2);
     border-radius: 20px;
     padding: 70px 40px;
     max-width: 700px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
 }

 .cta-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--green), transparent);
 }

 .cta-box h2 {
     font-family: 'Sora', sans-serif;
     font-size: clamp(26px, 4vw, 44px);
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -0.02em;
     margin-bottom: 30px;
 }

 .cta-checks {
     display: flex;
     flex-wrap: wrap;
     gap: 16px 32px;
     justify-content: center;
     margin-bottom: 36px;
 }

 .cta-check {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: var(--muted);
 }

 .cta-check svg {
     color: var(--green);
 }

 /* ── FOOTER ──────────────────────────────────────── */
 footer {
     background: var(--bg);
     border-top: 1px solid var(--border);
     padding: 60px 40px 36px;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 32px;
     max-width: 1100px;
     margin: 0 auto 48px;
 }

 .footer-col h5 {
     font-family: 'Sora', sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 16px;
 }

 .footer-col ul {
     list-style: none;
 }

 .footer-col ul li {
     margin-bottom: 10px;
 }

 .footer-col ul li a {
     font-size: 13px;
     color: #666;
     transition: color .2s;
 }

 .footer-col ul li a:hover {
     color: var(--text);
 }

 .footer-bottom {
     max-width: 1100px;
     margin: 0 auto;
     padding-top: 24px;
     border-top: 1px solid var(--border);
     font-size: 12px;
     color: #555;
     text-align: center;
 }

 /* ── ANIMATIONS ──────────────────────────────────── */
 .fade-up {
     opacity: 0;
     transform: translateY(24px);
     animation: fadeUp .7s ease forwards;
 }

 @keyframes fadeUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .delay-1 {
     animation-delay: .1s;
 }

 .delay-2 {
     animation-delay: .2s;
 }

 .delay-3 {
     animation-delay: .3s;
 }

 .delay-4 {
     animation-delay: .4s;
 }

 /* ── RESPONSIVE ──────────────────────────────────── */
 @media (max-width: 900px) {
     nav {
         padding: 0 20px;
     }

     .nav-links {
         display: none;
     }

     section {
         padding: 70px 20px;
     }

     .cards-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .compare-table {
         font-size: 12px;
     }
 }

 @media (max-width: 560px) {
     .cards-grid {
         grid-template-columns: 1fr;
     }

     .footer-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero h1 {
         font-size: 32px;
     }
 }



 /* pricing screen  */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:140px 24px 80px;
  position:relative;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,#18181b 1px,transparent 1px),
    linear-gradient(to bottom,#18181b 1px,transparent 1px);
  background-size:4rem 4rem;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 60%,transparent 100%);
}
.hero-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:900px;height:500px;
  border-radius:50%;filter:blur(130px);pointer-events:none;
}
/* .hero > *:not(.hero-grid):not(.hero-glow){position:relative;z-index:1} */

/* badge */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border2);background:var(--bg2);
  padding:5px 14px;border-radius:99px;
  font-size:12px;color:var(--muted);margin-bottom:28px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.badge.amber{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.08);color:var(--amber)}
.badge.amber .dot{background:var(--amber)}
.badge.red{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.08);color:#f87171}
.badge.red .dot{background:var(--red)}
.badge.purple{border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.08);color:#c084fc}
.badge.purple .dot{background:var(--purple)}

/* ── BUTTONS ────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:14px;
  padding:12px 24px;border-radius:10px;cursor:pointer;border:none;
  transition:all .2s;white-space:nowrap;
}
.btn-green{background:var(--green);color:#000}
.btn-green:hover{box-shadow:0 0 32px var(--green-glow);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-outline:hover{border-color:var(--border2);background:var(--bg3)}
.btn-lg{padding:14px 32px;font-size:15px}
.btn-sm{padding:8px 16px;font-size:13px}

/* ── SECTION LABELS ─────────────────── */
.section-label{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(245,158,11,.3);
  background:rgba(245,158,11,.08);
  color:#fbbf24;
  padding:4px 12px;border-radius:99px;
  font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:20px;
}
.section-label.green{
  border-color:var(--green-glow);background:var(--green-dim);color:var(--green);
}
.section-label.purple{
  border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.08);color:#c084fc;
}
.section-label.red{
  border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.08);color:#f87171;
}

.section-title{font-size:clamp(26px,3.5vw,42px);font-weight:700;letter-spacing:-0.025em;line-height:1.2;margin-bottom:14px}
.section-sub{color:var(--muted);font-size:15px;line-height:1.7;max-width:560px}
.section-header{text-align:center;margin-bottom:56px}
.section-header .section-sub{margin:0 auto}

/* ── CARDS ──────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.card-icon{
  width:42px;height:42px;border-radius:11px;
  background:var(--green-dim);border:1px solid var(--green-glow);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:16px;flex-shrink:0;
}
.card-icon.amber{background:var(--amber-dim);border-color:rgba(245,158,11,.3)}
.card-icon.purple{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.3)}
.card-icon.blue{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3)}
.card-icon.red{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.card h3{font-size:14px;font-weight:700;margin-bottom:8px}
.card p{font-size:13px;color:var(--muted);line-height:1.65}

/* grid layouts */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── CODE BLOCK ─────────────────────── */
.code-block{
  background:#0c0c0e;border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 24px;
  font-family:'Courier New',monospace;font-size:12.5px;line-height:1.85;
  overflow-x:auto;position:relative;
}
.code-block::before{
  content:'';display:block;
  width:10px;height:10px;border-radius:50%;
  background:#ef4444;
  box-shadow:16px 0 0 #f59e0b,32px 0 0 #22c55e;
  margin-bottom:16px;
}
.kw{color:var(--green)} .str{color:#f9c858} .cm{color:#4b4b55} .purple-c{color:#c084fc} .blue-c{color:#60a5fa}

/* ai agent title */
.aisection-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* max-width: 720px; */
    margin-bottom: 60px;
    font-size: clamp(26px, 3.5vw, 42px);
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.2;
        margin-bottom: 14px
}

/* apititle */
.apisection-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* max-width: 720px; */
    margin-bottom: 60px;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 14px
}

/* corntitle */
.cornsection-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* max-width: 720px; */
    margin-bottom: 60px;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 14px
}

/* internal title */
.internalsection-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* max-width: 720px; */
    margin-bottom: 60px;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 14px
}
/* ecommerce title */
.ecomsection-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* max-width: 720px; */
    margin-bottom: 60px;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 14px
}