@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');
  :root {
    --bg: #e8edf2;
    --bg-dark: #d1d9e0;
    --shadow-light: #ffffff;
    --shadow-dark: #b8c2cc;
    --primary: #5b6af0;
    --primary-light: #7b8af7;
    --accent: #00d4aa;
    --text: #2d3748;
    --text-muted: #718096;
    --card-bg: #e8edf2;
    --inset-shadow: inset 4px 4px 10px #b8c2cc, inset -4px -4px 10px #ffffff;
    --outset-shadow: 8px 8px 20px #b8c2cc, -8px -8px 20px #ffffff;
    --outset-shadow-sm: 4px 4px 12px #b8c2cc, -4px -4px 12px #ffffff;
    --outset-shadow-lg: 15px 15px 35px #b8c2cc, -15px -15px 35px #ffffff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Baloo 2", sans-serif; }

  html { scroll-behavior: smooth; }

  body {
    font-family: "Baloo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  /* NAVBAR */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 20px 60px;
    background: var(--bg);
    box-shadow: 0 4px 20px rgba(184,194,204,0.5), 0 -2px 0 rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: space-between;
  }

  .logo {
    font-size: 1.6rem; font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
  }
  .logo span { color: var(--accent); }

  .nav-links { display: flex; gap: 36px; list-style: none; }
  .nav-links a {
    text-decoration: none; color: var(--text-muted);
    font-size: 0.9rem; font-weight: 500; transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--primary); }

  .nav-btn {
    padding: 11px 28px;
    border: none; cursor: pointer;
    background: var(--bg);
    text-decoration: none;
    border-radius: 50px;
    box-shadow: var(--outset-shadow-sm);
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.9rem; font-weight: 500;
    color: var(--primary);
    transition: all 0.3s;
  }
  .nav-btn:hover { box-shadow: var(--inset-shadow); }

  /* HERO */
  .hero {
    min-height: 100vh;
    min-width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 60px 80px;
    position: relative; overflow: hidden;
  }

  .hero-bg-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; pointer-events: none;
  }
  .blob1 { width: 500px; height: 500px; background: var(--primary); top: -100px; right: -100px; }
  .blob2 { width: 400px; height: 400px; background: var(--accent); bottom: -80px; left: -80px; }

  .hero-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    max-width: 1200px; width: 100%; position: relative; z-index: 1;
  }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 50px;
    box-shadow: var(--inset-shadow);
    font-size: 0.8rem; font-weight: 500; color: var(--primary);
    margin-bottom: 24px; width: fit-content;
  }
  .badge-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }

  .hero-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800; line-height: 1.1;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -1.5px;
  }
  .hero-title .highlight {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }

  .hero-sub {
    font-size: 1.05rem; line-height: 1.7;
    color: var(--text-muted); margin-bottom: 40px; max-width: 480px;
  }

  .hero-cta { display: flex; gap: 16px; align-items: center; }

  .btn-primary {
    padding: 15px 36px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white; border-radius: 50px;
    font-family: 'Baloo 2', sans-serif; font-size: 1rem; font-weight: 500;
    box-shadow: 8px 8px 20px rgba(91,106,240,0.35), -2px -2px 8px #ffffff;
    transition: all 0.3s; letter-spacing: 0.2px;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 12px 12px 28px rgba(91,106,240,0.4), -2px -2px 8px #ffffff; }

  .btn-ghost {
    padding: 15px 32px; border: none; cursor: pointer;
    background: var(--bg); border-radius: 50px;
    box-shadow: var(--outset-shadow-sm);
    font-family: 'Baloo 2', sans-serif; font-size: 1rem; font-weight: 500;
    color: var(--text-muted); transition: all 0.3s; display: flex; align-items: center; gap: 8px;
  }
  .btn-ghost:hover { box-shadow: var(--inset-shadow); color: var(--primary); }

  /* HERO VISUAL */
  .hero-visual {
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }

  .dashboard-card {
    background: var(--bg);
    border-radius: 28px;
    box-shadow: var(--outset-shadow-lg);
    padding: 30px; width: 100%; max-width: 460px;
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

  .dashboard-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
  }
  .dash-title { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem; color:var(--text); }
  .dash-live { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--accent); font-weight:500; }
  .live-dot { width:7px;height:7px;background:var(--accent);border-radius:50%;animation:pulse 2s infinite; }

  .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }

  .stat-card {
    background: var(--bg); border-radius:16px;
    box-shadow: var(--inset-shadow);
    padding: 16px;
  }
  .stat-label { font-size:0.72rem; color:var(--text-muted); margin-bottom:6px; font-weight:500; }
  .stat-value { font-family:'Baloo 2',sans-serif; font-size:1.4rem; font-weight:700; color:var(--text); }
  .stat-change { font-size:0.72rem; color:var(--accent); font-weight:500; }

  .zed-bar {
    background: var(--bg); border-radius:16px;
    box-shadow: var(--inset-shadow);
    padding: 16px; display:flex; align-items:center; gap:14px;
  }
  .zed-icon {
    width:42px;height:42px; border-radius:12px;
    background: linear-gradient(135deg,var(--primary),var(--accent));
    display:flex;align-items:center;justify-content:center;
    box-shadow: 4px 4px 10px rgba(91,106,240,0.3);
    flex-shrink:0;
  }
  .zed-icon svg { width:22px;height:22px;fill:white; }
  .zed-text { flex:1; }
  .zed-name { font-size:0.8rem; font-weight:600; color:var(--text); }
  .zed-msg { font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
  .zed-platforms { display:flex; gap:6px; }
  .platform-badge {
    padding:3px 10px; border-radius:20px; font-size:0.65rem; font-weight:600;
    box-shadow: 3px 3px 8px #b8c2cc, -3px -3px 8px #ffffff;
  }
  .tg { color:#2aabee; }
  .fb { color:#1877f2; }

  /* Floating mini cards */
  .mini-float {
    position:absolute; background:var(--bg); border-radius:14px;
    box-shadow: var(--outset-shadow-sm);
    padding: 12px 16px; font-size:0.75rem;
    animation: float2 5s ease-in-out infinite;
  }
  @keyframes float2 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
  .mini-float.left { top:20%; left:-50px; animation-delay:-2s; }
  .mini-float.right { bottom:25%; right:-40px; animation-delay:-1s; }
  .mini-label { color:var(--text-muted); font-size:0.65rem; }
  .mini-val { font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--text); font-size:1rem; margin-top:2px; }

  /* STATS STRIP */
  .stats-strip {
    padding: 50px 60px;
    display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
    max-width: 1200px; margin: 0 auto;
  }
  .strip-stat {
    background: var(--bg); border-radius:20px;
    box-shadow: var(--outset-shadow-sm);
    padding: 28px 24px; text-align:center;
    transition: box-shadow 0.3s;
  }
  .strip-stat:hover { box-shadow: var(--inset-shadow); }
  .strip-num { font-family:'Baloo 2',sans-serif; font-size:2.2rem; font-weight:800; color:var(--primary); }
  .strip-desc { font-size:0.85rem; color:var(--text-muted); margin-top:4px; }

  /* SECTION COMMON */
  section { padding: 80px 60px; max-width:1300px; margin:0 auto; }
  .section-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.78rem; font-weight:600; color:var(--primary);
    letter-spacing:2px; text-transform:uppercase; margin-bottom:14px;
  }
  .section-title {
    font-family:'Baloo 2',sans-serif; font-size:clamp(2rem,3.5vw,3rem);
    font-weight:800; color:var(--text); line-height:1.15;
    letter-spacing:-1px; margin-bottom:14px;
  }
  .section-sub { font-size:1rem; color:var(--text-muted); line-height:1.7; max-width:560px; }

  /* ZED AI SECTION */
  .zed-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

  .chat-mockup {
    background:var(--bg); border-radius:24px;
    box-shadow: var(--outset-shadow-lg);
    padding:24px; max-width:400px;
  }
  .chat-header {
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
    padding-bottom:16px; border-bottom:2px solid var(--bg-dark);
  }
  .chat-avatar {
    width:42px;height:42px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:800; color:white; font-size:0.9rem;
    box-shadow: 3px 3px 10px rgba(91,106,240,0.3);
  }
  .chat-bot-name { font-weight:600; color:var(--text); font-size:0.9rem; }
  .chat-bot-status { font-size:0.72rem; color:var(--accent); }
  .platform-icons { display:flex; gap:8px; margin-left:auto; }
  .p-icon {
    width:28px;height:28px; border-radius:8px;
    box-shadow: 3px 3px 8px #b8c2cc, -3px -3px 8px #ffffff;
    display:flex;align-items:center;justify-content:center; font-size:0.7rem; font-weight:700;
  }
  .p-icon.tg { color:#2aabee; }
  .p-icon.fb { color:#1877f2; }

  .msg { margin-bottom:12px; display:flex; flex-direction:column; }
  .msg.user { align-items:flex-end; }
  .msg.bot { align-items:flex-start; }
  .bubble {
    padding:10px 14px; border-radius:16px; font-size:0.82rem; line-height:1.5;
    max-width:80%;
  }
  .bubble.bot {
    background:var(--bg); box-shadow: var(--outset-shadow-sm);
    color:var(--text);
    border-bottom-left-radius:4px;
  }
  .bubble.user {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white; border-bottom-right-radius:4px;
    box-shadow: 4px 4px 12px rgba(91,106,240,0.3);
  }
  .bubble.order {
    background:var(--bg); box-shadow: var(--inset-shadow);
    color:var(--text); font-size:0.75rem; margin-top:6px;
    border-radius:12px;
  }
  .order-line { display:flex; justify-content:space-between; margin-bottom:4px; }
  .order-total { border-top:1px solid var(--bg-dark); padding-top:6px; font-weight:600; color:var(--primary); }

  /* FEATURES */
  .features-header { text-align:center; margin-bottom:60px; }
  .features-header .section-sub { margin:0 auto; }

  .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .feature-card {
    background:var(--bg); border-radius:22px;
    box-shadow: var(--outset-shadow-sm);
    padding:30px 26px; transition: all 0.4s; cursor:default;
  }
  .feature-card:hover { box-shadow: var(--outset-shadow-lg); transform:translateY(-6px); }

  .feature-icon {
    width:52px;height:52px; border-radius:14px;
    box-shadow: var(--inset-shadow);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px; font-size:1.4rem;
  }
  .feature-name { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; color:var(--text); margin-bottom:10px; }
  .feature-desc { font-size:0.87rem; color:var(--text-muted); line-height:1.6; }

  /* HOW IT WORKS */
  .how-section { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; }
  .steps { display:flex; flex-direction:column; gap:20px; }
  .step {
    background:var(--bg); border-radius:20px;
    box-shadow: var(--outset-shadow-sm);
    padding:22px 24px; display:flex; gap:18px; align-items:flex-start;
    transition: all 0.3s;
  }
  .step:hover { box-shadow: var(--inset-shadow); }
  .step-num {
    width:40px;height:40px; border-radius:50%; flex-shrink:0;
    background:var(--bg); box-shadow: var(--inset-shadow);
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:0.9rem; color:var(--primary);
  }
  .step-title { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:0.95rem; margin-bottom:6px; }
  .step-desc { font-size:0.83rem; color:var(--text-muted); line-height:1.6; }

  /* PRICING */
  .pricing-section { text-align:center; }
  .pricing-title { margin:0 auto 14px; }
  .pricing-sub { margin:0 auto 50px; }
  .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

  .price-card {
    background:var(--bg); border-radius:24px;
    box-shadow: var(--outset-shadow-sm);
    padding:36px 28px; transition:all 0.4s; position:relative;
  }
  .price-card.popular {
    box-shadow: var(--outset-shadow-lg);
    transform:translateY(-12px);
  }
  .popular-badge {
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:white; border-radius:50px; padding:5px 18px;
    font-size:0.72rem; font-weight:600; white-space:nowrap;
    box-shadow: 0 4px 15px rgba(91,106,240,0.3);
  }
  .price-name { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; color:var(--text-muted); margin-bottom:16px; }
  .price-amount {
    font-family:'Baloo 2',sans-serif; font-size:2.8rem; font-weight:800; color:var(--text);
    line-height:1; margin-bottom:6px;
  }
  .price-amount sup { font-size:1.2rem; vertical-align:super; }
  .price-period { font-size:0.82rem; color:var(--text-muted); margin-bottom:28px; }
  .price-features { list-style:none; text-align:left; margin-bottom:30px; display:flex;flex-direction:column;gap:12px; }
  .price-features li { font-size:0.85rem; color:var(--text-muted); display:flex;gap:10px;align-items:center; }
  .price-features li::before { content:'✓'; color:var(--accent); font-weight:700; flex-shrink:0; }

  .btn-plan {
    width:100%; padding:13px; border:none; cursor:pointer; border-radius:50px;
    font-family:'Baloo 2',sans-serif; font-size:0.95rem; font-weight:500;
    transition:all 0.3s;
  }
  .btn-plan.outline {
    background:var(--bg); box-shadow: var(--outset-shadow-sm); color:var(--primary);
  }
  .btn-plan.outline:hover { box-shadow: var(--inset-shadow); }
  .btn-plan.filled {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white; box-shadow: 6px 6px 18px rgba(91,106,240,0.35);
  }
  .btn-plan.filled:hover { transform:translateY(-2px); }

  /* TESTIMONIALS */
  .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
  .testimonial {
    background:var(--bg); border-radius:20px;
    box-shadow: var(--outset-shadow-sm);
    padding:28px 24px;
  }
  .test-text { font-size:0.87rem; line-height:1.7; color:var(--text-muted); margin-bottom:20px; font-style:italic; }
  .test-author { display:flex; align-items:center; gap:12px; }
  .test-avatar {
    width:38px;height:38px; border-radius:50%;
    box-shadow: var(--inset-shadow);
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:0.85rem;
    color:var(--primary);
  }
  .test-name { font-weight:600; font-size:0.85rem; color:var(--text); }
  .test-role { font-size:0.73rem; color:var(--text-muted); }
  .stars { color:#f6ad55; font-size:0.8rem; margin-bottom:10px; }

  /* CTA SECTION */
  .cta-section {
    text-align:center; padding: 40px 25px;
  }
  .cta-box {
    background:var(--bg); border-radius:32px;
    box-shadow: var(--outset-shadow-lg);
    padding:70px 60px; max-width:900px; margin:0 auto;
    position:relative; overflow:hidden;
  }
  .cta-glow {
    position:absolute; width:400px;height:400px; border-radius:50%;
    background:var(--primary); filter:blur(120px); opacity:0.08;
    top:-100px; left:-100px; pointer-events:none;
  }
  .cta-title {
    font-family:'Baloo 2',sans-serif; font-size:clamp(2rem,3.5vw,3rem);
    font-weight:800; color:var(--text); margin-bottom:16px; line-height:1.2;
  }
  .cta-sub { color:var(--text-muted); margin-bottom:36px; font-size:1rem; line-height:1.7; }
  .cta-btns { display:flex; gap:16px; justify-content:center; }

  /* FOOTER */
  footer {
    background:var(--bg-dark); padding:50px 60px 30px;
    border-top: 3px solid var(--shadow-light);
  }
  .footer-inner { max-width:1200px; margin:0 auto; }
  .footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; margin-bottom:40px; }
  .footer-brand .logo { font-size:1.4rem; margin-bottom:14px; display:block; }
  .footer-desc { font-size:0.84rem; color:var(--text-muted); line-height:1.7; }
  .footer-col h4 { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:0.9rem; margin-bottom:16px; color:var(--text); }
  .footer-col a { display:block; font-size:0.84rem; color:var(--text-muted); text-decoration:none; margin-bottom:10px; transition:color 0.3s; }
  .footer-col a:hover { color:var(--primary); }
  .footer-bottom { border-top:2px solid var(--shadow-light); padding-top:20px; display:flex; justify-content:space-between; align-items:center; }
  .footer-copy { font-size:0.8rem; color:var(--text-muted); }

  /* SCROLL ANIM */
  .reveal { opacity:0; transform:translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  @media(max-width:900px) {
    nav { padding:16px 24px; }
    .nav-links { display:none; }
    .hero { padding:100px 24px 60px; }
    .hero-inner { grid-template-columns:1fr; gap:50px; text-align:center; }
    .hero-badge { margin:0 auto 20px; }
    .hero-sub { margin:0 auto 30px; }
    .hero-cta { justify-content:center; flex-wrap:wrap; }
    .hero-visual { display:none; }
    .stats-strip { grid-template-columns:1fr 1fr; padding:40px 24px; }
    section { padding:60px 24px; }
    .zed-section,.how-section { grid-template-columns:1fr; gap:40px; }
    .features-grid,.pricing-grid,.testimonials-grid { grid-template-columns:1fr; }
    .price-card.popular { transform:none; }
    .footer-top { grid-template-columns:1fr 1fr; gap:30px; }
    .cta-box { padding:50px 30px; }
    .cta-btns { flex-direction:column; align-items:center; }
  }