:root{
      --pink:#3d6df2;
      --pink-2:#6f5cff;
      --pink-soft:#eef4ff;
      --ink:#16243b;
      --ink-2:#0d1829;
      --muted:#78859a;
      --bg:#f5f8fc;
      --surface:#fff;
      --line:#e9ebf2;
      --dark:#101a2b;
      --dark-2:#17243a;
      --success:#1fb981;
      --shadow:0 18px 50px rgba(31,39,77,.09);
      --shadow-sm:0 10px 28px rgba(31,39,77,.07);
      --radius:24px;
      --container:1120px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.55;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.35;
      background-image:
        radial-gradient(circle at 20px 20px, rgba(45,57,93,.045) 1.3px, transparent 1.3px),
        radial-gradient(circle at 60px 60px, rgba(61,109,242,.035) 1.2px, transparent 1.2px);
      background-size:80px 80px;
      z-index:-2;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button,input,select{font:inherit}
    .container{width:min(calc(100% - 32px),var(--container));margin:auto}

    /* utility */
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border:1px dashed var(--pink);
      border-radius:12px;
      color:var(--pink);
      font-size:13px;
      font-weight:700;
      background:rgba(255,255,255,.75);
    }
    .section-title{text-align:center;margin-bottom:34px}
    .section-title .mini{color:var(--pink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px}
    .section-title h2{font-size:34px;line-height:1.15;margin:7px 0 6px;letter-spacing:-1px;color:var(--ink)}
    .section-title p{margin:0;color:var(--muted);font-size:14px}
    .title-line{width:38px;height:4px;border-radius:999px;background:var(--ink);margin:14px auto 0}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:12px;
      border:1px solid transparent;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      transition:.2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-pink{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;box-shadow:0 10px 24px rgba(61,109,242,.22)}
    .btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
    .btn-dark{background:var(--ink);color:#fff}

    /* top */
    .topbar{
      background:rgba(255,255,255,.86);
      border-bottom:1px solid rgba(232,234,241,.7);
      backdrop-filter:blur(12px);
    }
    .topbar-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      font-size:12px;
      color:#59617d;
    }
    .topbar-group{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
    .topbar a:hover{color:var(--pink)}

    /* nav */
    .nav-area{padding:9px 0 0}
    .navbar{
      min-height:70px;
      background:#fff;
      border:1px solid rgba(229,232,240,.8);
      box-shadow:var(--shadow-sm);
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      padding:0 18px 0 22px;
      position:relative;
      z-index:20;
    }
    .brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.8px;color:var(--ink)}
    .brand-heart{
      width:35px;height:35px;border-radius:11px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--pink),#ff4b92);
      color:#fff;font-size:18px;
      box-shadow:0 8px 20px rgba(61,109,242,.24)
    }
    .brand strong{color:var(--pink)}
    .nav-links{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:600;color:#3b4568}
    .nav-links a{display:flex;align-items:center;gap:6px}
    .nav-links a:hover{color:var(--pink)}
    .nav-actions{display:flex;align-items:center;gap:8px}
    .nav-actions .btn{min-height:42px}
    .menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff}

    /* hero */
    .hero{
      padding:42px 0 0;
      overflow:hidden;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      align-items:center;
      gap:44px;
      min-height:430px;
    }
    .hero-copy h1{
      font-size:47px;
      line-height:1.08;
      letter-spacing:-1.8px;
      margin:16px 0 14px;
      color:#394264;
      max-width:700px;
    }
    .hero-copy h1 span{color:var(--pink)}
    .hero-copy p{margin:0;color:#6f7893;font-size:14px;max-width:610px}
    .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

    .hero-art{
      min-height:360px;
      position:relative;
      display:grid;
      place-items:center;
    }
    .hero-blob{
      width:330px;height:330px;border-radius:45% 55% 52% 48% / 46% 42% 58% 54%;
      background:linear-gradient(145deg,#eef4ff,#dce8ff);
      position:relative;
      box-shadow:0 25px 70px rgba(61,109,242,.13);
    }
    .phone{
      width:175px;height:300px;
      position:absolute;left:50%;top:50%;
      transform:translate(-50%,-50%) rotate(-6deg);
      border-radius:34px;
      background:linear-gradient(180deg,#252b48,#161a2e);
      border:7px solid #fff;
      box-shadow:0 24px 55px rgba(38,43,69,.25);
      padding:14px 12px;
    }
    .phone:before{
      content:"";
      position:absolute;top:8px;left:50%;transform:translateX(-50%);
      width:58px;height:8px;border-radius:999px;background:#0c0f1e;
    }
    .screen{
      height:100%;border-radius:24px;
      background:linear-gradient(160deg,#fff,#eef4ff);
      padding:28px 12px 12px;
      overflow:hidden;
    }
    .screen .mini-card{
      height:56px;border-radius:15px;background:#fff;
      box-shadow:0 8px 18px rgba(37,43,72,.07);
      margin-bottom:10px;padding:10px;
    }
    .mini-line{height:7px;border-radius:999px;background:#e7e9f2;margin-bottom:7px}
    .mini-line.pink{background:#b9cdfc;width:66%}
    .mini-line.short{width:45%}
    .bubble{
      position:absolute;
      width:58px;height:58px;border-radius:20px;
      display:grid;place-items:center;
      color:#fff;font-weight:800;
      box-shadow:0 12px 28px rgba(31,39,77,.16);
      border:4px solid rgba(255,255,255,.85);
    }
    .b1{left:18px;top:70px;background:linear-gradient(135deg,#6e4cff,#9a63ff);transform:rotate(-8deg)}
    .b2{right:12px;top:52px;background:linear-gradient(135deg,var(--pink),#7662ff);transform:rotate(10deg)}
    .b3{right:34px;bottom:58px;background:linear-gradient(135deg,#2c8dff,#5ba8ff);transform:rotate(-7deg)}
    .b4{left:30px;bottom:44px;background:linear-gradient(135deg,#20bd79,#47db9b);transform:rotate(8deg)}
    .bubble small{font-size:10px}
    .spark{
      position:absolute;width:14px;height:14px;border-radius:50%;background:#ffd85d;
      box-shadow:0 0 0 7px rgba(255,216,93,.13)
    }
    .s1{right:86px;top:22px}.s2{left:76px;bottom:18px}

    /* platform cards */
    .platform-section{padding:14px 0 0}
    .platform-grid{
      display:grid;
      grid-template-columns:repeat(11,1fr);
      gap:7px;
      align-items:stretch;
    }
    .platform-card{
      background:#fff;
      border:1px solid #edf0f5;
      min-height:104px;
      border-radius:14px;
      display:grid;
      place-items:center;
      padding:12px 8px;
      box-shadow:0 8px 22px rgba(31,39,77,.045);
      transition:.2s ease;
    }
    .platform-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
    .platform-logo{
      width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
      color:#fff;font-size:21px;
      box-shadow:0 8px 18px rgba(31,39,77,.12);
      transition:.2s ease;
    }
    .platform-card:hover .platform-logo{transform:scale(1.06) rotate(-2deg)}
    .platform-card span{font-size:10px;color:#66708f;font-weight:600;text-align:center}

    .brand-instagram{background:linear-gradient(135deg,#feda75 0%,#d62976 46%,#4f5bd5 100%)}
    .brand-tiktok{background:#10131d}
    .brand-youtube{background:#ff1f3d}
    .brand-x{background:#111318}
    .brand-facebook{background:#1877f2}
    .brand-twitch{background:#9146ff}
    .brand-spotify{background:#1db954}
    .brand-pinterest{background:#e60023}
    .brand-linkedin{background:#0a66c2}
    .brand-telegram{background:#229ed9}
    .brand-soundcloud{background:linear-gradient(135deg,#ff7700,#ff3300)}
    .brand-discord{background:#5865f2}
    .brand-snapchat{background:#fffc00;color:#111}
    .brand-threads{background:#111}
    .brand-reddit{background:#ff4500}
    .brand-tumblr{background:#35465c}
    .brand-vimeo{background:#1ab7ea}
    .brand-whatsapp{background:#25d366}
    .brand-messenger{background:linear-gradient(135deg,#00b2ff,#a033ff)}
    .brand-vk{background:#0077ff}
    .brand-quora{background:#b92b27}
    .brand-medium{background:#111}
    .brand-github{background:#24292f}
    .brand-dribbble{background:#ea4c89}
    .brand-behance{background:#1769ff}
    .brand-skype{background:#00aff0}
    .brand-slack{background:#4a154b}
    .brand-apple{background:#111}
    .brand-amazon{background:#ff9900;color:#111}
    .brand-google{background:#4285f4}
    .brand-line{background:#06c755}
    .brand-weibo{background:#e6162d}
    .brand-weixin{background:#07c160}
    .brand-qq{background:#111}
    .brand-xing{background:#026466}
    .brand-kick{background:#53fc18;color:#111}
    .brand-likee{background:linear-gradient(135deg,#ff2b84,#ff7a24)}
    .brand-trovo{background:#19d67c}
    .brand-rumble{background:#85c742}
    .brand-default{background:linear-gradient(135deg,#56617f,#8c95ad)}

    /* activity strip */
    .activity{
      margin-top:28px;
      background:linear-gradient(90deg,#315fdc,#664fff);
      color:#fff;
      position:relative;
    }
    .activity:after{
      content:"";position:absolute;left:0;right:0;bottom:-10px;height:20px;
      background:
        radial-gradient(circle at 10px 0,#664fff 10px,transparent 10.5px) repeat-x;
      background-size:20px 20px;
    }
    .activity-inner{
      min-height:112px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
      text-align:left;
    }
    .avatars{display:flex}
    .avatar-dot{
      width:42px;height:42px;border-radius:50%;
      border:3px solid #fff;margin-left:-10px;
      display:grid;place-items:center;font-size:12px;font-weight:800;
      background:#fff;color:var(--pink)
    }
    .avatar-dot:first-child{margin-left:0}
    .activity-copy{font-size:13px;line-height:1.3}
    .activity-copy b{display:block;font-size:15px}

    /* packages */
    .section{padding:78px 0}
    .package-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:13px;
    }
    .package-card{
      background:#fff;
      border-radius:18px;
      border:1px solid #e9edf4;
      padding:12px;
      box-shadow:0 9px 24px rgba(31,39,77,.05);
      transition:.2s ease;
    }
    .package-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
    .package-main{display:flex;gap:11px;align-items:center;padding:0 2px 10px}
    .package-icon{
      width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
      color:#fff;font-size:25px;flex:0 0 auto;
      box-shadow:0 8px 18px rgba(31,39,77,.11);
    }
    .package-info strong{display:block;font-size:13px;text-transform:uppercase}
    .package-info .pkg-name{font-size:12px;color:#44506f;margin:2px 0}
    .package-info .pkg-price{font-size:12px;color:#66708f}
    .package-card .buy{
      width:100%;min-height:38px;border:0;border-radius:11px;
      background:#f0f2f7;color:#4e5875;font-weight:700;font-size:11px;
      transition:.2s ease;cursor:pointer;
    }
    .package-card:hover .buy{background:var(--pink);color:#fff}

    /* quick order */
    .quick-wrap{
      display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;align-items:stretch;
      margin-top:48px;
    }
    .quick-copy{
      background:linear-gradient(145deg,#fff,#fff6f9);
      border:1px solid #f3dce5;
      border-radius:24px;
      padding:30px;
    }
    .quick-copy h3{font-size:29px;line-height:1.18;margin:10px 0 10px}
    .quick-copy p{color:var(--muted);font-size:13px;margin:0 0 18px}
    .quick-points{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .quick-point{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;font-size:11px;font-weight:600}
    .quick-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)}
    .quick-card h4{font-size:20px;margin:0 0 18px}
    .field{margin-bottom:12px}
    .field label{display:block;font-size:10px;color:#7d859f;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin:0 0 6px 3px}
    .field select{
      width:100%;height:48px;border-radius:12px;border:1px solid var(--line);background:#fafbfe;
      color:#3e4766;padding:0 13px;outline:none;font-weight:600;font-size:12px;
    }
    .quick-price{
      display:flex;align-items:center;justify-content:space-between;
      margin:15px 0;background:#eef4ff;border:1px solid #cfddff;border-radius:13px;padding:12px 14px;
      font-size:12px;color:#68708a;
    }
    .quick-price b{font-size:23px;color:var(--pink)}

    /* dark blog */
    .blog-dark{
      background:#1e2230;
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .blog-dark:before{
      content:"";position:absolute;inset:0;opacity:.3;
      background-image:radial-gradient(circle at 20px 20px,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:36px 36px;
    }
    .blog-dark .section-title h2{color:#fff}
    .blog-dark .section-title p{color:#aab0c5}
    .blog-grid{
      position:relative;
      display:grid;
      grid-template-columns:1fr 1.1fr 1fr;
      grid-template-rows:220px 220px;
      gap:10px;
      z-index:2;
    }
    .blog-card{
      border-radius:16px;
      overflow:hidden;
      position:relative;
      min-height:210px;
      background:
        linear-gradient(180deg,transparent 20%,rgba(17,22,37,.78) 100%),
        linear-gradient(135deg,#6691ff,#734dff);
      box-shadow:0 12px 30px rgba(0,0,0,.16);
    }
    .blog-card:nth-child(2){grid-row:1/3;grid-column:2;background:
      linear-gradient(180deg,transparent 25%,rgba(17,22,37,.82) 100%),
      linear-gradient(145deg,#415a86,#f69e79);}
    .blog-card:nth-child(3){background:
      linear-gradient(180deg,transparent 20%,rgba(17,22,37,.78) 100%),
      linear-gradient(145deg,#775cdb,#4ac6c9);}
    .blog-card:nth-child(4){background:
      linear-gradient(180deg,transparent 20%,rgba(17,22,37,.78) 100%),
      linear-gradient(145deg,#4b9ab2,#6e5d83);}
    .blog-card:nth-child(5){background:
      linear-gradient(180deg,transparent 20%,rgba(17,22,37,.78) 100%),
      linear-gradient(145deg,#27344d,#c57ab0);}
    .blog-overlay{position:absolute;left:18px;right:18px;bottom:16px}
    .blog-overlay h4{margin:0 0 7px;font-size:14px;line-height:1.35;color:#fff}
    .blog-overlay span{font-size:10px;color:#cbd1e3}
    .blog-arrow{
      position:absolute;right:16px;bottom:15px;width:34px;height:26px;border-radius:999px;
      border:1px solid rgba(255,255,255,.8);display:grid;place-items:center;font-size:13px;color:#fff;
    }

    /* stats */
    .stats-strip{
      background:linear-gradient(90deg,#315fdc,#664fff);
      color:#fff;
      position:relative;
    }
    .stats-strip:after{
      content:"";position:absolute;left:0;right:0;bottom:-10px;height:20px;
      background:radial-gradient(circle at 10px 0,#664fff 10px,transparent 10.5px) repeat-x;background-size:20px 20px;
    }
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:26px 0}
    .stat-box{border:1px dashed rgba(255,255,255,.55);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px}
    .stat-icon{width:42px;height:42px;border-radius:10px;background:#fff;color:var(--pink);display:grid;place-items:center;font-weight:800}
    .stat-box b{display:block;font-size:20px;line-height:1.1}
    .stat-box span{font-size:11px;color:#e6edff}

    /* testimonials */
    .testimonials{background:#eef1f6}
    .testimonial-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:12px;align-items:stretch}
    .test-col{display:grid;gap:12px}
    .test-card{background:#fff;border:1px solid #e6e9f0;border-radius:16px;padding:16px}
    .person{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid #edf0f5}
    .person-avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#e6eeff;color:var(--pink);font-weight:800}
    .person b{font-size:12px;display:block}
    .person span{font-size:10px;color:var(--pink);font-weight:600}
    .test-card p{font-size:11px;color:#6f7893;margin:11px 0 0}
    .testimonial-center{
      border-radius:18px;
      background:linear-gradient(145deg,#3d6df2,#725cff);
      min-height:322px;
      display:grid;place-items:center;
      position:relative;overflow:hidden;
    }
    .testimonial-center:before,.testimonial-center:after{
      content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)
    }
    .testimonial-center:before{width:210px;height:210px;left:-70px;top:-50px}
    .testimonial-center:after{width:240px;height:240px;right:-80px;bottom:-80px}
    .center-figure{
      width:148px;height:148px;border-radius:50%;
      background:#fff;
      display:grid;place-items:center;
      color:var(--pink);font-size:58px;font-weight:800;
      box-shadow:0 20px 50px rgba(93,16,42,.18);
      z-index:2;
    }
    .satisfaction{
      position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
      background:#fff;color:var(--ink);border-radius:13px;padding:11px 15px;font-size:11px;white-space:nowrap;z-index:2
    }
    .satisfaction b{color:var(--pink)}

    /* faq */
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .faq-item{background:#fff;border:1px solid #e8ebf2;border-radius:14px;overflow:hidden}
    .faq-q{
      width:100%;border:0;background:#fff;min-height:58px;text-align:left;padding:0 16px;
      display:flex;align-items:center;justify-content:space-between;gap:14px;color:#404a6b;font-weight:600;font-size:12px;cursor:pointer
    }
    .faq-q span:first-child:before{content:"✦";color:#9db8ff;margin-right:10px}
    .faq-a{display:none;padding:0 16px 15px;color:#7a829c;font-size:11px}
    .faq-item.open .faq-a{display:block}

    /* contact strip */
    .contact-strip{padding:0 0 0;background:#eef1f6}
    .contact-card{
      background:linear-gradient(90deg,#315fdc,#664fff);
      color:#fff;border-radius:0 0 16px 16px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;
    }
    .contact-card h4{font-size:16px;margin:0 0 2px}
    .contact-card p{font-size:10px;margin:0;color:#e6edff}
    .contact-actions{display:flex;gap:8px;flex-wrap:wrap}
    .contact-actions a{border:1px dashed rgba(255,255,255,.55);padding:9px 14px;border-radius:10px;font-size:10px;font-weight:600}

    /* footer */
    footer{background:#1d202b;color:#b8bfd2;padding:28px 0 18px}
    .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;padding:22px 0 28px;border-bottom:1px solid rgba(255,255,255,.07)}
    .foot-about{font-size:11px;color:#969eb7;margin-top:12px;max-width:350px}
    .foot-title{color:#fff;font-size:12px;font-weight:700;margin-bottom:10px;padding-left:10px;border-left:3px solid var(--pink)}
    .foot-links{display:grid;gap:7px}
    .foot-links a{font-size:11px;background:#232734;border-radius:10px;padding:8px 10px}
    .foot-links a:before{content:"•";color:var(--pink);margin-right:7px}
    .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;font-size:10px;color:#858da6}


    /* VEVOBAYI BRAND GLOW + MOBILE NAV */
    html,body{max-width:100%;overflow-x:hidden}
    .nav-area{
      position:sticky;
      top:0;
      z-index:60;
      padding:9px 0 0;
      background:linear-gradient(180deg,rgba(245,248,252,.95),rgba(245,248,252,.72),transparent);
      backdrop-filter:blur(12px);
    }
    .navbar{
      box-shadow:
        0 18px 48px rgba(22,36,59,.08),
        0 0 0 1px rgba(61,109,242,.025);
    }
    .brand-heart{
      background:linear-gradient(135deg,#12233d 0%,#284e8a 48%,#557df6 100%);
      box-shadow:
        0 10px 22px rgba(29,63,119,.22),
        0 0 24px rgba(61,109,242,.15);
    }
    .brand strong{
      background:linear-gradient(135deg,#376eea,#705cff);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .btn-pink{
      background:linear-gradient(135deg,#315fdc,#6f5cff);
      box-shadow:
        0 12px 25px rgba(61,109,242,.22),
        0 0 28px rgba(111,92,255,.10);
    }
    .hero:before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-180px;top:-120px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(83,121,245,.16),rgba(83,121,245,0) 68%);
      pointer-events:none;
    }
    .hero:after{
      content:"";
      position:absolute;
      width:390px;height:390px;
      left:-240px;bottom:-200px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(111,92,255,.09),rgba(111,92,255,0) 68%);
      pointer-events:none;
    }
    .hero-copy,.hero-art{position:relative;z-index:2}
    .hero-blob{
      box-shadow:
        0 28px 70px rgba(61,109,242,.15),
        0 0 65px rgba(111,92,255,.08);
    }
    .activity,.stats-strip,.contact-card{
      background:linear-gradient(90deg,#18335d 0%,#315fdc 48%,#6f5cff 100%);
    }
    .activity:after{
      background:radial-gradient(circle at 10px 0,#315fdc 10px,transparent 10.5px) repeat-x;
      background-size:20px 20px;
    }
    .stats-strip:after{
      background:radial-gradient(circle at 10px 0,#315fdc 10px,transparent 10.5px) repeat-x;
      background-size:20px 20px;
    }
    .blog-dark{background:#101a2b}
    .testimonial-center{
      background:linear-gradient(145deg,#244fae,#6f5cff);
    }

    .nav-link-icon{
      width:24px;height:24px;border-radius:8px;
      display:grid;place-items:center;
      color:#3d6df2;
      background:#eef4ff;
      font-size:11px;
      transition:.2s ease;
    }
    .nav-links a:hover .nav-link-icon{
      background:#3d6df2;color:#fff;transform:translateY(-1px);
    }
    .nav-caret{font-size:9px;color:#9aa4b5;margin-left:-2px}

    .mobile-menu{
      display:none;
      position:absolute;
      top:calc(100% + 10px);
      left:0;right:0;
      background:rgba(255,255,255,.98);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 20px 50px rgba(22,36,59,.15);
      padding:10px;
      backdrop-filter:blur(18px);
    }
    .mobile-menu.open{display:block}
    .mobile-menu a{
      min-height:52px;
      display:flex;
      align-items:center;
      gap:11px;
      padding:0 13px;
      border-radius:12px;
      font-size:13px;
      font-weight:650;
      color:#35435c;
    }
    .mobile-menu a:hover{background:#f1f5ff;color:#315fdc}
    .mobile-menu .mobile-primary{
      margin-top:6px;
      justify-content:center;
      color:#fff;
      background:linear-gradient(135deg,#315fdc,#6f5cff);
    }
    .menu-btn{
      color:#1c2c45;
      font-size:17px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .menu-btn i{pointer-events:none}


    /* CANLI AKTİVİTE — sabit zaman dilimine bağlı organik görünüm */
    .activity-inner{
      gap:20px;
      justify-content:center;
    }
    .live-people{
      position:relative;
      display:flex;
      align-items:center;
      padding-right:15px;
    }
    .live-avatar{
      width:45px;
      height:45px;
      margin-left:-10px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:15px;
      border:3px solid rgba(255,255,255,.95);
      box-shadow:0 9px 22px rgba(9,24,54,.18);
      position:relative;
    }
    .live-avatar:first-child{margin-left:0}
    .avatar-one{background:linear-gradient(135deg,#16345e,#4c79ee)}
    .avatar-two{background:linear-gradient(135deg,#6f5cff,#9f76ff)}
    .avatar-three{background:linear-gradient(135deg,#1687c9,#55b9f1)}
    .avatar-four{background:linear-gradient(135deg,#16a777,#4bd9a4)}
    .live-pulse{
      position:absolute;
      right:2px;
      bottom:3px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:#3fe19d;
      border:3px solid #fff;
      box-shadow:0 0 0 0 rgba(63,225,157,.45);
      animation:livePulse 2.2s infinite;
    }
    @keyframes livePulse{
      0%{box-shadow:0 0 0 0 rgba(63,225,157,.48)}
      70%{box-shadow:0 0 0 9px rgba(63,225,157,0)}
      100%{box-shadow:0 0 0 0 rgba(63,225,157,0)}
    }
    .activity-copy{
      display:grid;
      gap:1px;
      font-size:12px;
      line-height:1.35;
    }
    .activity-kicker{
      width:max-content;
      color:#dbe6ff;
      font-size:9px;
      font-weight:700;
      letter-spacing:.65px;
      text-transform:uppercase;
      margin-bottom:2px;
    }
    .activity-kicker i{margin-right:5px;color:#73f0bc}
    .activity-copy b{
      font-size:15px;
      line-height:1.2;
      letter-spacing:-.15px;
    }
    .activity-copy b strong{
      font-size:20px;
      font-weight:800;
    }
    .activity-copy small{
      color:rgba(255,255,255,.72);
      font-size:9px;
      margin-top:2px;
    }

    .stat-icon{
      font-size:16px;
      box-shadow:0 8px 18px rgba(15,35,70,.12);
    }
    .center-figure{
      font-size:53px;
      background:
        radial-gradient(circle at 35% 30%,#ffffff 0%,#f8faff 62%,#e9efff 100%);
      color:#416ff2;
    }
    .center-figure i{
      filter:drop-shadow(0 8px 13px rgba(61,109,242,.15));
    }

    @media(max-width:1050px){
      .nav-links{display:none}
      .menu-btn{display:flex}
      .navbar{position:relative}
      .hero-grid,.quick-wrap{grid-template-columns:1fr}
      .hero-copy{max-width:760px}
      .hero-art{min-height:320px}
      .platform-grid{grid-template-columns:repeat(6,1fr)}
      .package-grid{grid-template-columns:repeat(2,1fr)}
      .blog-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
      .blog-card:nth-child(2){grid-row:auto;grid-column:auto;min-height:220px}
      .stats-grid{grid-template-columns:1fr 1fr}
      .testimonial-grid{grid-template-columns:1fr}
      .testimonial-center{order:-1}
      .footer-top{grid-template-columns:1.2fr 1fr 1fr}
    }

    @media(max-width:700px){
      .container{width:min(calc(100% - 24px),var(--container))}
      .topbar{display:none}
      .nav-area{padding:7px 0 0}
      .navbar{
        min-height:62px;
        border-radius:15px;
        padding:0 10px 0 14px;
        gap:10px;
      }
      .brand{font-size:18px;gap:8px;white-space:nowrap}
      .brand-heart{width:34px;height:34px;border-radius:10px}
      .nav-actions{gap:6px}
      .nav-actions .btn-light,.nav-actions .btn-pink{display:none}
      .menu-btn{width:42px;height:42px;flex:0 0 42px}

      .hero{padding:30px 0 0}
      .hero-grid{gap:15px;min-height:auto}
      .hero-copy{text-align:center}
      .eyebrow{font-size:10px;padding:8px 10px;max-width:100%}
      .hero-copy h1{
        font-size:clamp(32px,10.6vw,41px);
        line-height:1.08;
        letter-spacing:-1.35px;
        margin:15px auto 13px;
        max-width:520px;
      }
      .hero-copy p{
        font-size:12.5px;
        line-height:1.7;
        margin:auto;
        max-width:520px;
      }
      .hero-actions{justify-content:center;margin-top:20px}
      .hero-actions .btn{min-height:46px;flex:1;max-width:185px;padding:0 10px;font-size:11px}
      .hero-art{min-height:270px;margin-top:2px}
      .hero-blob{width:245px;height:245px}
      .phone{width:128px;height:222px;border-width:5px;border-radius:27px;padding:10px 8px}
      .phone:before{width:44px;height:6px;top:6px}
      .screen{border-radius:19px;padding:21px 8px 8px}
      .screen .mini-card{height:40px;border-radius:11px;margin-bottom:7px;padding:7px}
      .bubble{width:45px;height:45px;border-radius:15px;border-width:3px;font-size:13px}
      .b1{left:5px;top:53px}.b2{right:0;top:36px}.b3{right:19px;bottom:39px}.b4{left:18px;bottom:28px}

      .platform-section{padding-top:5px}
      .platform-grid{grid-template-columns:repeat(3,1fr);gap:7px}
      .platform-card{min-height:88px;padding:9px 5px;border-radius:13px}
      .platform-logo{width:39px;height:39px;font-size:18px;border-radius:12px}
      .platform-card span{font-size:9px}

      .activity{margin-top:18px}
      .activity-inner{min-height:92px;gap:13px}
      .avatar-dot{width:35px;height:35px;font-size:9px}
      .activity-copy{font-size:10px}
      .activity-copy b{font-size:12px}

      .activity-inner{
        min-height:102px;
        justify-content:center;
        gap:14px;
        padding:13px 0;
      }
      .live-avatar{
        width:37px;
        height:37px;
        margin-left:-9px;
        border-width:2px;
        font-size:12px;
      }
      .live-pulse{width:10px;height:10px;border-width:2px}
      .activity-copy{
        text-align:left;
        font-size:9.5px;
      }
      .activity-copy b{font-size:11.5px}
      .activity-copy b strong{font-size:15px}
      .activity-copy small{font-size:7.8px}
      .activity-kicker{font-size:7.5px}

      .section{padding:52px 0}
      .section-title{margin-bottom:25px}
      .section-title h2{font-size:28px;letter-spacing:-.7px}
      .section-title p{font-size:11.5px}
      .package-grid{grid-template-columns:1fr;gap:9px}
      .package-card{display:grid;grid-template-columns:1fr 105px;align-items:center;gap:8px;padding:10px 11px}
      .package-main{padding:0}
      .package-card .buy{height:42px}
      .package-icon{width:50px;height:50px;font-size:21px}
      .package-info strong{font-size:11px}
      .package-info .pkg-name,.package-info .pkg-price{font-size:10.5px}

      .quick-wrap{gap:12px;margin-top:32px}
      .quick-copy,.quick-card{padding:20px;border-radius:19px}
      .quick-copy h3{font-size:23px}
      .quick-points{grid-template-columns:1fr 1fr;gap:7px}
      .quick-point{font-size:9.5px;padding:10px}
      .field select{height:46px}

      .blog-grid{grid-template-columns:1fr;gap:9px}
      .blog-card,.blog-card:nth-child(2){min-height:190px}
      .blog-overlay h4{font-size:12.5px}

      .stats-grid{grid-template-columns:1fr 1fr;gap:8px;padding:20px 0}
      .stat-box{padding:10px;gap:8px}
      .stat-icon{width:36px;height:36px}
      .stat-box b{font-size:15px}
      .stat-box span{font-size:9px}

      .testimonial-grid{gap:9px}
      .testimonial-center{min-height:265px}
      .center-figure{width:125px;height:125px;font-size:46px}
      .test-card{padding:13px}

      .faq-grid{grid-template-columns:1fr}
      .faq-q{min-height:54px;font-size:11px;padding:0 13px}

      .contact-card{flex-direction:column;align-items:flex-start;border-radius:14px 14px 0 0}
      .contact-actions{width:100%}
      .contact-actions a{flex:1;text-align:center}

      .footer-top{grid-template-columns:1fr;gap:20px}
      .footer-bottom{flex-direction:column;align-items:flex-start}
    }

    @media(max-width:390px){
      .platform-grid{grid-template-columns:repeat(2,1fr)}
      .stats-grid{grid-template-columns:1fr}
      .quick-points{grid-template-columns:1fr}
      .hero-actions .btn{max-width:none}
      .hero-copy h1{font-size:32px}
      .package-card{grid-template-columns:1fr 88px}
    }