/* ===================== VARIABLES & BASE ===================== */
    :root {
      --dark:     #0A0E1A;
      --dark-2:   #111827;
      --dark-3:   #1C2534;
      --accent:   #4FD87E;
      --accent-2: #F59E0B;
      --light:    #F8FAFC;
      --muted:    #94A3B8;
      --border:   rgba(255,255,255,0.08);
      --font-head: 'Syne', sans-serif;
      --font-body: 'Outfit', sans-serif;
      --radius:   16px;
      --radius-sm: 10px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background-color: var(--dark);
      color: var(--light);
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
    }
    h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }
    a { text-decoration: none; color: inherit; }
    
     .section-py { padding: 100px 0; }

    /* ===================== ANIMATIONS ===================== */
    @keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
    @keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

    .fade-up { animation: fadeInUp 0.7s ease both; }
    .delay-1 { animation-delay: 0.15s; }
    .delay-2 { animation-delay: 0.30s; }
    .delay-3 { animation-delay: 0.45s; }
    .delay-4 { animation-delay: 0.60s; }

    /* ===================== NAVBAR ===================== */
    #navbar {
      position: fixed; top:0; left:0; right:0; z-index:1000;
      padding: 18px 0;
      transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
    }
    #navbar.scrolled {
      background: rgba(10,14,26,0.93);
      backdrop-filter: blur(18px);
      padding: 12px 0;
      box-shadow: 0 2px 30px rgba(0,0,0,0.5);
    }
    .nav-logo { font-family: var(--font-head); font-size:1.45rem; font-weight:800; color:var(--light); }
    .nav-logo span { color: var(--accent); }
    .nav-links { list-style:none; display:flex; gap:4px; align-items:center; margin:0; padding:0; }
    .nav-links a {
      font-size:0.88rem; font-weight:500; color:var(--muted);
      padding:7px 13px; border-radius:8px;
      transition: color 0.2s, background 0.2s;
    }
    .nav-links a:hover { color:var(--light); background:rgba(255,255,255,0.06); }
    .btn-nav {
      background: var(--accent) !important; color: var(--dark) !important;
      font-weight: 700 !important; border-radius: 50px !important;
      padding: 9px 22px !important; font-size: 0.85rem !important;
      transition: transform 0.2s, box-shadow 0.2s !important;
    }
    .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,216,126,0.35) !important; }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
    .hamburger span { display:block; width:24px; height:2px; background:var(--light); border-radius:2px; transition:0.3s; }

    @media(max-width:991px){
      .hamburger { display:flex; }
      .nav-menu {
        display:none; position:absolute; top:100%; left:0; right:0;
        background:rgba(10,14,26,0.97); backdrop-filter:blur(20px);
        padding:20px 24px; border-top:1px solid var(--border);
      }
      .nav-menu.open { display:block; }
      .nav-links { flex-direction:column; align-items:flex-start; gap:4px; }
      .nav-links a { font-size:0.95rem; padding:10px 14px; }
    }
    /* ===================== BUTTONS ===================== */
    .btn-primary-custom {
      background: var(--accent); color: var(--dark);
      font-family: var(--font-head); font-weight:700; font-size:0.95rem;
      padding: 14px 30px; border-radius:50px; border:none; cursor:pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      display: inline-flex; align-items:center; gap:10px;
    }
    .btn-primary-custom:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(79,216,126,0.35); color:var(--dark); }
    .btn-outline-custom {
      background: transparent; color:var(--light);
      font-family: var(--font-head); font-weight:600; font-size:0.95rem;
      padding: 13px 28px; border-radius:50px; border:1px solid var(--border); cursor:pointer;
      transition: border-color 0.2s, background 0.2s;
      display: inline-flex; align-items:center; gap:10px;
    }
    .btn-outline-custom:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.05); color:var(--light); }

    /* ===================== HERO ===================== */
    #hero {
      min-height: 100vh; display:flex; align-items:center;
      padding-top: 100px; position:relative; overflow:hidden;
    }
    .hero-bg {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 60% at 70% 50%, rgba(79,216,126,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(245,158,11,0.05) 0%, transparent 60%),
        var(--dark);
      z-index:0;
    }
    .hero-grid {
      position:absolute; inset:0;
      background-image: linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
      background-size: 60px 60px; z-index:0;
    }
    .hero-content { position:relative; z-index:1; width:100%; }

    .badge-pill {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(79,216,126,0.12); border:1px solid rgba(79,216,126,0.25);
      color:var(--accent); font-size:0.78rem; font-weight:700;
      padding:7px 16px; border-radius:50px; letter-spacing:0.5px; text-transform:uppercase;
    }
    .badge-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:pulse-dot 2s ease infinite; }

    .hero-title {
      font-size: clamp(2.8rem,6vw,5rem); font-weight:800;
      letter-spacing:-1.5px; line-height:1.05; margin:24px 0 20px;
    }
    .hero-title .accent { color:var(--accent); }
    .hero-title .outline { -webkit-text-stroke:2px var(--light); color:transparent; }
    .hero-sub { font-size:1.05rem; color:var(--muted); max-width:520px; line-height:1.75; }
    .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }

    .hero-stats {
      margin-top:52px; padding-top:36px; border-top:1px solid var(--border);
      display:flex; gap:40px; flex-wrap:wrap;
    }
    .hero-stat-item .num { font-family:var(--font-head); font-size:1.9rem; font-weight:800; }
    .hero-stat-item .num span { color:var(--accent); }
    .hero-stat-item .txt { font-size:0.82rem; color:var(--muted); margin-top:2px; }

    /* Hero card */
    .hero-card-main {
      background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
      padding:28px; animation:float 4s ease-in-out infinite;
    }
    .card-header-custom { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
    .avatar-sm {
      width:38px; height:38px; border-radius:50%;
      background:linear-gradient(135deg,var(--accent),#22C55E);
      display:flex; align-items:center; justify-content:center; font-size:1rem;
    }
    .card-meta .name { font-weight:600; font-size:0.9rem; margin:0; }
    .card-meta .role { color:var(--muted); font-size:0.78rem; margin:0; }
    .stat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
    .stat-box {
      background:var(--dark-2); border-radius:var(--radius-sm); padding:14px; border:1px solid var(--border);
    }
    .stat-box .val { font-family:var(--font-head); font-size:1.4rem; font-weight:800; color:var(--accent); }
    .stat-box .lbl { font-size:0.72rem; color:var(--muted); margin-top:2px; }
    .map-bar {
      margin-top:10px; background:var(--dark-2); border-radius:var(--radius-sm);
      padding:14px; border:1px solid var(--border); display:flex; align-items:center; gap:10px;
    }
    .map-bar .map-text .mt { font-size:0.78rem; font-weight:600; margin:0; }
    .map-bar .map-text .ms { font-size:0.72rem; color:var(--muted); margin:0; }

    .float-badge {
      position:absolute; background:var(--dark-3); border:1px solid var(--border);
      border-radius:12px; padding:10px 16px; display:flex; align-items:center; gap:8px;
      font-size:0.8rem; font-weight:600; white-space:nowrap;
    }
    .float-badge.badge-top { top:-28px; right:-16px; animation:float 3.5s ease-in-out 0.5s infinite; }
    .float-badge.badge-bot { bottom:-20px; left:-28px; animation:float 3.5s ease-in-out 1s infinite; }
    .float-badge i { color:var(--accent); }

    @media(max-width:768px){
      .float-badge { display:none; }
      .hero-stats { gap:24px; }
    }
    
        /* ===================== CLIENTS STRIP ===================== */
    .clients-strip {
      background:var(--dark-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0;
    }
    .clients-strip .strip-label {
      font-size:0.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); font-weight:600; white-space:nowrap;
    }
    .client-logos { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
    .client-logo-item {
      font-family:var(--font-head); font-size:0.95rem; font-weight:700;
      color:rgba(255,255,255,0.18); transition:color 0.3s; display:flex; align-items:center; gap:7px;
    }
    .client-logo-item:hover { color:rgba(255,255,255,0.45); }

    /* ===================== SECTION LABELS ===================== */
    .section-label {
      display:inline-flex; align-items:center; gap:8px;
      font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
      color:var(--accent); margin-bottom:14px;
    }
    .section-label::before { content:''; display:block; width:22px; height:2px; background:var(--accent); border-radius:2px; }
    .section-title { font-size:clamp(2rem,4vw,2.9rem); font-weight:800; letter-spacing:-1px; line-height:1.1; }
    .section-sub { color:var(--muted); font-size:1rem; margin-top:14px; max-width:560px; }
    .text-accent { color:var(--accent); }

    /* ===================== VALUE CARDS ===================== */
    .value-card {
      background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
      padding:32px 28px; height:100%; position:relative; overflow:hidden;
      transition:transform 0.3s, border-color 0.3s;
    }
    .value-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg,var(--accent),transparent);
    }
    .value-card:hover { transform:translateY(-6px); border-color:rgba(79,216,126,0.3); }
    .value-icon {
      width:48px; height:48px; background:rgba(79,216,126,0.12); border-radius:14px;
      display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--accent); margin-bottom:18px;
    }
    .value-card h4 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
    .value-card p { color:var(--muted); font-size:0.9rem; line-height:1.7; margin:0; }

    /* ===================== SERVICE CARDS ===================== */
    #services { background:var(--dark-2); }
    .service-card {
      background:var(--dark); border:1px solid var(--border); border-radius:var(--radius);
      padding:36px 32px; height:100%; position:relative; overflow:hidden;
      transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .service-card:hover { transform:translateY(-8px); border-color:rgba(79,216,126,0.3); box-shadow:0 24px 60px rgba(0,0,0,0.4); }
    .service-card.featured { background:linear-gradient(135deg,rgba(79,216,126,0.1),rgba(79,216,126,0.03)); border-color:rgba(79,216,126,0.3); }
    .service-num { font-family:var(--font-head); font-size:3rem; font-weight:800; color:rgba(255,255,255,0.05); position:absolute; top:18px; right:22px; }
    .service-icon { width:54px; height:54px; background:rgba(79,216,126,0.1); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--accent); margin-bottom:22px; }
    .service-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:10px; }
    .service-card p { color:var(--muted); font-size:0.9rem; line-height:1.75; }
    .service-features { list-style:none; padding:0; margin-top:14px; display:flex; flex-direction:column; gap:7px; }
    .service-features li { font-size:0.86rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
    .service-link { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:0.85rem; font-weight:600; margin-top:18px; transition:gap 0.2s; }
    .service-link:hover { gap:10px; color:var(--accent); }
        /* ===================== PROCESS ===================== */
    .process-step {
      background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
      padding:32px; height:100%; transition:transform 0.3s, border-color 0.3s;
    }
    .process-step:hover { transform:translateY(-4px); border-color:rgba(79,216,126,0.25); }
    .step-icon { width:44px; height:44px; background:rgba(79,216,126,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--accent); margin-bottom:14px; }
    .step-num { font-family:var(--font-head); font-size:2.5rem; font-weight:800; color:var(--accent); opacity:0.25; line-height:1; margin-bottom:8px; }
    .step-content h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
    .step-content p { color:var(--muted); font-size:0.88rem; line-height:1.7; margin:0; }

    /* ===================== PRICING ===================== */
    #pricing { background:var(--dark-2); }
    .pricing-card {
      background:var(--dark); border:1px solid var(--border); border-radius:var(--radius);
      padding:40px 34px; height:100%; transition:transform 0.3s;
    }
    .pricing-card:hover { transform:translateY(-6px); }
    .pricing-card.featured { background:var(--dark-3); border-color:var(--accent); box-shadow:0 0 60px rgba(79,216,126,0.12); }
    .featured-tag {
      display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--dark);
      font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 14px; border-radius:50px; margin-bottom:18px;
    }
    .pricing-name { font-family:var(--font-head); font-size:1.25rem; font-weight:700; margin-bottom:6px; }
    .pricing-desc { color:var(--muted); font-size:0.87rem; margin-bottom:24px; }
    .pricing-price { display:flex; align-items:flex-end; gap:4px; margin-bottom:6px; }
    .pricing-price .currency { font-size:1.1rem; color:var(--muted); margin-bottom:8px; }
    .pricing-price .amount { font-family:var(--font-head); font-size:3.2rem; font-weight:800; line-height:1; }
    .pricing-price .period { color:var(--muted); font-size:0.82rem; margin-bottom:8px; }
    .pricing-divider { border-color:var(--border); margin:24px 0; }
    .pricing-features { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
    .pricing-features li { display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--muted); }
    .pricing-features li i { font-size:1rem; margin-top:2px; flex-shrink:0; }
    .pricing-features li.active { color:var(--light); }
    .btn-pricing {
      width:100%; padding:14px; border-radius:50px; font-family:var(--font-head); font-weight:700; font-size:0.92rem;
      cursor:pointer; transition:all 0.2s; text-align:center; display:block; border:none;
    }
    .btn-pricing-outline { background:transparent; border:1px solid var(--border); color:var(--light); }
    .btn-pricing-outline:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.05); color:var(--light); }
    .btn-pricing-filled { background:var(--accent); color:var(--dark); }
    .btn-pricing-filled:hover { box-shadow:0 12px 32px rgba(79,216,126,0.4); transform:translateY(-2px); color:var(--dark); }

    /* ===================== TESTIMONIALS ===================== */
    .testimonial-card {
      background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
      padding:32px; height:100%; transition:transform 0.3s, border-color 0.3s;
    }
    .testimonial-card:hover { transform:translateY(-6px); border-color:rgba(79,216,126,0.2); }
    .stars { display:flex; gap:3px; color:var(--accent-2); margin-bottom:16px; font-size:0.88rem; }
    .testimonial-text { color:var(--light); font-size:0.94rem; line-height:1.8; font-style:italic; margin-bottom:22px; opacity:0.9; }
    .testimonial-author { display:flex; align-items:center; gap:12px; }
    .author-avatar {
      width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-family:var(--font-head); font-weight:700; font-size:0.95rem; flex-shrink:0;
    }
    .author-name { font-weight:700; font-size:0.92rem; margin:0; }
    .author-role { color:var(--muted); font-size:0.8rem; margin:0; }

    /* ===================== FAQ ===================== */
    #faq { background:var(--dark-2); }
    .faq-item {
      background:var(--dark); border:1px solid var(--border); border-radius:var(--radius-sm);
      overflow:hidden; transition:border-color 0.3s;
    }
    .faq-item:hover { border-color:rgba(79,216,126,0.2); }
    .faq-question { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; cursor:pointer; gap:16px; }
    .faq-question h5 { font-size:0.95rem; font-weight:600; margin:0; line-height:1.5; }
    .faq-icon {
      width:30px; height:30px; flex-shrink:0; background:rgba(79,216,126,0.1); border-radius:50%;
      display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:0.95rem;
      transition:transform 0.3s, background 0.3s;
    }
    .faq-item.open .faq-icon { transform:rotate(45deg); background:rgba(79,216,126,0.2); }
    .faq-answer { display:none; padding:0 22px 20px; color:var(--muted); font-size:0.9rem; line-height:1.75; }
    .faq-item.open .faq-answer { display:block; }

    /* ===================== CTA ===================== */
    #cta { background:var(--dark); padding:100px 0; position:relative; overflow:hidden; }
    .cta-box {
      background:linear-gradient(135deg,var(--dark-3),var(--dark-2));
      border:1px solid rgba(79,216,126,0.25); border-radius:24px; padding:72px 48px;
      text-align:center; position:relative; overflow:hidden;
    }
    .cta-box::before {
      content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
      width:300px; height:300px; background:radial-gradient(circle,rgba(79,216,126,0.15),transparent 70%);
    }
    .cta-box h2 { font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; letter-spacing:-1px; position:relative; z-index:1; }
    .cta-box p { color:var(--muted); font-size:1rem; margin:14px auto 32px; max-width:500px; position:relative; z-index:1; }
    .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
    @media(max-width:768px){ .cta-box { padding:48px 24px; } }

    /* ===================== CONTACT ===================== */
    #contact { background:var(--dark-2); }
    .contact-info-card {
      background:var(--dark); border:1px solid var(--border); border-radius:var(--radius); padding:34px; height:100%;
    }
    .contact-item { display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
    .contact-item:last-child { border-bottom:none; }
    .contact-item-icon {
      width:42px; height:42px; background:rgba(79,216,126,0.1); border-radius:12px;
      display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--accent); flex-shrink:0;
    }
    .contact-item h6 { font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:3px; }
    .contact-item p { margin:0; font-size:0.93rem; font-weight:500; }
    .form-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--radius); padding:38px 34px; }
    .form-label-custom { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:7px; display:block; }
    .form-control-custom {
      width:100%; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius-sm);
      padding:12px 16px; color:var(--light); font-family:var(--font-body); font-size:0.93rem; transition:border-color 0.2s; outline:none;
    }
    .form-control-custom::placeholder { color:rgba(148,163,184,0.4); }
    .form-control-custom:focus { border-color:var(--accent); background:var(--dark-3); }
    textarea.form-control-custom { resize:vertical; min-height:120px; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    @media(max-width:576px){ .form-grid { grid-template-columns:1fr; } }

    /* ===================== FOOTER ===================== */
    footer { background:var(--dark); border-top:1px solid var(--border); padding:60px 0 28px; }
    .footer-logo { font-family:var(--font-head); font-size:1.35rem; font-weight:800; }
    .footer-logo span { color:var(--accent); }
    .footer-desc { color:var(--muted); font-size:0.88rem; margin-top:10px; max-width:270px; line-height:1.7; }
    .footer-social { display:flex; gap:9px; margin-top:20px; }
    .social-btn {
      width:36px; height:36px; background:var(--dark-3); border:1px solid var(--border); border-radius:9px;
      display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--muted);
      transition:color 0.2s, background 0.2s, border-color 0.2s;
    }
    .social-btn:hover { color:var(--accent); border-color:rgba(79,216,126,0.3); background:rgba(79,216,126,0.08); }
    .footer-title { font-family:var(--font-head); font-size:0.75rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:16px; font-weight:700; }
    .footer-links-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; }
    .footer-links-list a { font-size:0.88rem; color:var(--muted); transition:color 0.2s; }
    .footer-links-list a:hover { color:var(--light); }
    .footer-bottom { margin-top:52px; padding-top:22px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
    .footer-copy { color:var(--muted); font-size:0.82rem; margin:0; }