:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#98a1b3;
  --accent:#6ee7b7;
  --accent-2:#7c5cff;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.12), transparent),
              linear-gradient(180deg, rgba(14,18,29,1) 0%, rgba(7,11,16,1) 100%);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:2rem}
.site-header{padding:2rem 0 0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 0 1.5rem;position:relative;z-index:10000}
.brand{display:flex;gap:0.75rem;align-items:center;z-index:10002;position:relative}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;color:#071022}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.brand-title{font-weight:800;font-family:Poppins, Inter;color:var(--accent-2)}
.brand-sub{font-size:12px;color:var(--muted)}

/* Navigation Toggle Button */
.nav-toggle{display:none;flex-direction:column;gap:4px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);cursor:pointer;padding:12px;border-radius:8px;transition:all 0.3s ease;z-index:10001;min-width:48px;min-height:48px;justify-content:center;position:relative}
.nav-toggle:hover{background:rgba(255,255,255,0.08);border-color:rgba(124,92,255,0.3)}
.nav-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}
.hamburger{width:20px;height:2px;background:var(--muted);border-radius:2px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:center}
.nav-toggle.active{background:rgba(124,92,255,0.15);border-color:rgba(124,92,255,0.3)}
.nav-toggle.active .hamburger{background:var(--accent)}
.nav-toggle.active .hamburger:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.nav-toggle.active .hamburger:nth-child(2){opacity:0;transform:scale(0)}
.nav-toggle.active .hamburger:nth-child(3){transform:rotate(-45deg) translate(7px, -6px)}

/* Navigation Links */
.nav-links{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .2s;font-weight:500}
.nav-links a:hover{color:var(--accent);background:rgba(255,255,255,0.02);transform:translateY(-1px)}
.hero{display:flex;gap:2rem;align-items:center;padding:3rem 0}
.hero-left{flex:1}
.hero h1{font-size:2.1rem;line-height:1.04;margin:0 0 .8rem;font-weight:800}
.lead{color:var(--muted);margin:0 0 1.25rem}
.hero-ctas{display:flex;gap:0.75rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:10px;border:0;cursor:pointer;text-decoration:none;color:inherit}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071022;font-weight:700;box-shadow:0 6px 30px rgba(124,92,255,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--accent);}
.btn.small{padding:.45rem .7rem;font-size:.9rem}
.hero-right{width:420px}
.floating-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:1rem;border:1px solid rgba(255,255,255,0.04);backdrop-filter: blur(6px);box-shadow: 0 10px 40px rgba(2,6,23,0.6);transform:rotate(-3deg)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.chip{width:48px;height:28px;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.dots i{opacity:.18;margin-left:6px}
.card-body h3{margin:.7rem 0 .25rem}
.mini-stats{display:flex;gap:1rem;margin-top:.5rem}
.mini-stats div{background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);padding:.5rem .75rem;border-radius:12px}

.services{padding:5.2rem 0 3.5rem;position:relative;z-index:2}
.section-title{font-family:Poppins;font-size:1.5rem;margin:0 0 .25rem}
.section-sub{color:var(--muted);margin:0 0 1.75rem}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;align-items:start}
.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:16px;border:1px solid rgba(255,255,255,0.03);transition:transform .25s, box-shadow .25s}
.service-card i{color:var(--accent);display:block;margin-bottom:.5rem}
.service-card h3{margin:.35rem 0}
.service-card p{color:var(--muted);margin:0}
.service-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(2,6,23,0.6)}
.service-card.featured{grid-column:span 1;background:linear-gradient(135deg, rgba(124,92,255,0.12), rgba(110,231,183,0.06));border:1px solid rgba(124,92,255,0.14);position:relative}
.service-card .badge{position:absolute;right:12px;top:12px;background:var(--accent);color:#071022;padding:.25rem .5rem;border-radius:8px;font-weight:700}

/* featured card as a block-level link */
.service-card.featured{display:block;text-decoration:none;color:inherit}
.service-card.featured:focus{outline:3px solid rgba(124,92,255,0.14);outline-offset:6px}
.service-card.featured:active,.service-card.featured:focus,.service-card.featured:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(2,6,23,0.66)}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;align-items:start}
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);text-align:center}
.feature i{color:var(--accent-2);margin-bottom:.5rem}

/* Stats */
.stats{padding:2.5rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;align-items:start}
.stat{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.2rem;border-radius:12px;text-align:center}
.stat .num{font-size:1.5rem;font-weight:800;color:var(--accent-2)}
.stat .label{color:var(--muted);margin-top:.35rem}

/* Testimonials */
.testi-wrap{position:relative;min-height:140px}
.testi{position:absolute;left:0;right:0;opacity:0;transform:translateY(6px);transition:all .35s}
.testi.active{opacity:1;transform:none}
.testi p{color:var(--muted);margin:0 0 .5rem}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;align-items:start}
.plan{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);text-align:center}
.plan.popular{border:1px solid rgba(124,92,255,0.16);box-shadow:0 8px 40px rgba(124,92,255,0.06)}
.plan .price{font-size:1.5rem;font-weight:800;margin:.5rem 0}
.plan .pill{background:var(--accent);color:#071022;padding:.25rem .5rem;border-radius:8px;display:inline-block;margin-bottom:.5rem}

/* FAQ + Newsletter */
.faq-news{display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
.faq h3{margin-top:0}
.qa{margin-bottom:.75rem}
.q{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.6rem;border-radius:8px;width:100%;text-align:left;color:inherit;cursor:pointer}
.a{padding:.6rem;margin-top:.35rem;border-left:3px solid rgba(124,92,255,0.12);display:none;color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px}
.newsletter form{display:flex;gap:.5rem}
.newsletter input{flex:1}

.contact{padding:3.5rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:.75rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.contact-form input,.contact-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.75rem;border-radius:10px;color:inherit}
.contact-info{background:linear-gradient(90deg, rgba(124,92,255,0.06), rgba(110,231,183,0.03));padding:1.25rem;border-radius:12px;color:#eafbf3}
.contact-info h4{margin-top:0}
.socials a{color:var(--muted);margin-right:.5rem}

.site-footer{border-top:1px solid rgba(255,255,255,0.02);padding:1.25rem 0;margin-top:2rem}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}

/* ========================= */
/* RESPONSIVE BREAKPOINTS */
/* ========================= */

/* Tablet Styles */
@media (max-width: 1024px) {
  .container { padding: 1.5rem; }
  .hero { gap: 1.5rem; }
  .hero h1 { font-size: 1.9rem; }
  .floating-card { width: 100%; max-width: 380px; }
  .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .faq-news { grid-template-columns: 1fr; }
}

/* Mobile Landscape */
@media (max-width: 880px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-right { width: 100%; order: -1; max-width: 400px; }
  .hero h1 { font-size: 1.7rem; }
  .service-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  
  /* Mobile Navigation */
  .nav-toggle { display: flex; }
  
  /* Mobile menu overlay */
  .nav-links::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 16, 34, 0.8);
    z-index: -1;
  }
  
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(15, 23, 36, 0.96), rgba(11, 18, 32, 0.96));
    backdrop-filter: blur(12px);
    z-index: 10000;
    padding: 6rem 2rem 2rem;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links li {
    width: 100%;
    max-width: 240px;
  }
  .nav-links a {
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
    width: 100%;
    display: block;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
  }
  .nav-links a:hover, .nav-links a:focus {
    background: rgba(124, 92, 255, 0.1);
    border-color: rgba(124, 92, 255, 0.2);
    transform: translateY(-2px);
    color: var(--accent);
  }
}

/* Mobile Portrait */
@media (max-width: 640px) {
  .container { padding: 1rem; }
  .hero { padding: 2rem 0; }
  .hero h1 { font-size: 1.5rem; line-height: 1.2; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .service-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 2fr 2fr; }
  .site-footer .container { flex-direction: column; gap: 1rem; text-align: center; }
  .floating-card { transform: rotate(0deg); }
  
  /* Improve button sizes for touch */
  .btn { padding: 0.8rem 1.2rem; min-height: 44px; }
  .nav-links a { min-height: 44px; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.3rem; }
  .section-title { font-size: 1.3rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .mini-stats { flex-direction: column; gap: 0.5rem; }
  .brand-title { font-size: 0.9rem; }
  .brand-sub { font-size: 11px; }
  .logo { width: 48px; height: 48px; }
}

/* subtle animated background shapes */
/* decorative background should not block touch/click events */
body:after{content:"";position:fixed;right:-200px;bottom:-120px;width:600px;height:600px;background:radial-gradient(circle at 30% 30%, rgba(124,92,255,0.08), transparent 30%),linear-gradient(90deg, rgba(110,231,183,0.04), transparent);filter:blur(40px);z-index:0;pointer-events:none}

/* small helper */
.container{position:relative;z-index:1}

/* mobile/touch niceties */
.btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,0.06)}
.service-card.featured{touch-action:manipulation}

/* Full-screen loader */
.full-screen-loader{position:fixed;inset:0;display:grid;place-items:center;background:rgba(6,10,16,0.78);backdrop-filter:blur(4px);z-index:100000;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
.full-screen-loader.visible{opacity:1;visibility:visible}
.full-screen-loader .loader-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 22px;border-radius:12px}
.full-screen-loader .spinner{width:84px;height:84px;border-radius:50%;border:8px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 1s linear infinite;box-shadow:0 10px 40px rgba(2,6,23,0.6)}
.full-screen-loader .loader-progress{width:260px;margin-top:6px;background:rgba(255,255,255,0.03);height:10px;border-radius:8px;overflow:hidden;position:relative}
.full-screen-loader .loader-progress .bar{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .08s linear}
.full-screen-loader .loader-progress .info{position:absolute;right:8px;top:-22px;color:var(--muted);font-size:12px}
.full-screen-loader .loader-text{color:var(--muted);font-weight:600}

@keyframes spin{to{transform:rotate(360deg)}}

/* Success Modal Styles */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 10, 16, 0.78);
  backdrop-filter: blur(4px);
  z-index: 100001;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s;
}

.success-modal.visible {
  opacity: 1;
  visibility: visible;
}

.success-modal .modal-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.success-modal h3 {
  margin-top: 0;
}

.success-modal p {
  color: var(--muted);
}

.success-modal .close-modal {
  margin-top: 1rem;
  cursor: pointer;
}