:root {
     --bg:#0d0f13;
     --panel:#12151b;
     --muted:#1a1e25;
     --text:#eef2f6;
     --sub:#c7d1dc;
     --primary:#7babda;
     --primary-20:#7babda22;
     --primary-40:#7babda44;
     --shadow:0 10px 30px rgba(0,0,0,.35);
}
 * {
     box-sizing:border-box;
}
 html,body {
     margin:0;
     padding:0;
     background:var(--bg);
     color:var(--text);
     font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
 a {
     color:inherit;
     text-decoration:none;
}
 img {
     display:block;
     max-width:100%;
     border-radius:12px;
}
 .container {
     width:100%;
     max-width:980px;
     margin:0 auto;
     padding:0 16px;
}
 .nav {
     position:sticky;
     top:0;
     z-index:20;
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:12px 16px;
     background:linear-gradient(180deg, #0d0f13cc, #0d0f1300);
     backdrop-filter:saturate(140%) blur(6px);
}
 .brand {
     display:flex;
     align-items:center;
     gap:10px;
}
 .brand-logo {
     height:24px;
     width:auto;
     display:block;
}
 .brand-name {
     font-weight:600;
     letter-spacing:.3px;
}
 .nav-links {
     display:flex;
     gap:14px;
}
 .nav-links a {
     padding:8px 10px;
     border-radius:10px;
     color:var(--sub);
     transition:color .2s, background .2s;
}
 .nav-links a:hover {
     color:var(--text);
     background:var(--primary-20);
}
 .section {
     padding:72px 0;
}
 .section h2 {
     font-size:1.6rem;
     margin:0 0 12px;
     letter-spacing:.4px;
}
 .lead {
     color:var(--sub);
     margin:0 0 24px;
}
 .hero {
     position:relative;
     min-height:70vh;
     display:grid;
     place-items:center;
     overflow:hidden;
}
 #heroCanvas {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
}
 .hero-content {
     position:relative;
     z-index:2;
     text-align:center;
     padding:0 16px;
     max-width:780px;
}
 .hero h1 {
     font-size:2rem;
     margin:0 0 12px;
}
 .subtitle {
     color:var(--sub);
     margin:0 0 22px;
}
 .btn {
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:8px;
     min-height:44px;
     padding:12px 18px;
     border-radius:14px;
     border:1px solid transparent;
     transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
     cursor:pointer;
}
 .btn.primary {
     background:linear-gradient(180deg, var(--primary), #5f90cf);
     color:#0b0e12;
     box-shadow:0 8px 20px #7babda35;
}
 .btn.primary:hover {
     transform:translateY(-2px);
     box-shadow:0 12px 26px #7babda45;
}
 .btn.outline {
     background:transparent;
     border-color:var(--primary-40);
     color:var(--text);
}
 .btn.outline:hover {
     background:var(--primary-20);
}
 .btn.small {
     min-height:36px;
     padding:8px 12px;
     border-radius:12px;
}
 .btn.full {
     width:100%;
}
 .cta {
     display:flex;
     gap:12px;
     justify-content:center;
     flex-wrap:wrap;
}
 .features-grid {
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:14px;
}
 @media (min-width:900px){
     .features-grid{
         grid-template-columns:repeat(4,1fr);
    }
}
 .card {
     background:linear-gradient(180deg, var(--panel), var(--muted));
     border:1px solid #222832;
     border-radius:16px;
     padding:16px;
     box-shadow:var(--shadow);
}
 .feature .icon {
     width:44px;
     height:44px;
     display:grid;
     place-items:center;
     border-radius:12px;
     color:var(--primary);
     background:radial-gradient(circle at 50% 50%, var(--primary-20), transparent 60%);
     margin-bottom:10px;
}
 .pulse {
     animation:pulse 2.2s ease-in-out infinite;
}
 .float {
     animation:float 3.6s ease-in-out infinite;
}
 @keyframes pulse {
     0%,100%{
         transform:scale(1);
         box-shadow:0 0 0 0 var(--primary-20);
    }
     50%{
         transform:scale(1.05);
         box-shadow:0 0 0 6px var(--primary-20);
    }
}
 @keyframes float {
     0%,100%{
         transform:translateY(0);
    }
     50%{
         transform:translateY(-6px);
    }
}
 .plans {
     display:grid;
     grid-template-columns:1fr;
     gap:16px;
}
 @media (min-width:900px){
     .plans{
         grid-template-columns:repeat(3,1fr);
    }
}
 .plan-card {
     position:relative;
     padding:18px;
     border-radius:18px;
     background:linear-gradient(180deg, #12151b, #0f1217);
     border:1px solid #253040;
     box-shadow:0 10px 24px rgba(10,14,20,.5);
}
 .plan-card .price {
     font-size:1.2rem;
     margin:6px 0 10px;
     color:var(--primary);
}
 .plan-head {
     display:flex;
     align-items:center;
     gap:10px;
}
 .plan-icon {
     width:40px;
     height:40px;
     border-radius:12px;
     display:grid;
     place-items:center;
     color:var(--primary);
     background:radial-gradient(circle at 50% 50%, var(--primary-20), transparent 60%);
}
 .highlight {
     outline:2px solid var(--primary-40);
     box-shadow:0 16px 36px #7babda33;
}
 .plan-list {
     margin:10px 0 16px;
     padding:0;
     list-style:none;
     color:var(--sub);
}
 .plan-list li {
     padding:6px 0;
     border-bottom:1px dashed #243042;
}
 .plan-list li:last-child {
     border-bottom:none;
}
 .glow {
     animation:glow 3s ease-in-out infinite;
}
 @keyframes glow {
     0%,100%{
         box-shadow:0 0 0 0 var(--primary-20);
    }
     50%{
         box-shadow:0 0 20px 6px var(--primary-20);
    }
}
 .embla {
     position:relative;
}
 .embla__viewport {
     overflow:hidden;
     border-radius:16px;
}
 .embla__container {
     display:flex;
     gap:12px;
}
 .embla__slide {
     flex:0 0 85%;
}
 .embla__controls {
     display:flex;
     justify-content:center;
     gap:10px;
     margin-top:12px;
}
 .testimonial {
     display:flex;
     align-items:center;
     gap:12px;
     padding:14px;
}
 .testimonial img {
     width:48px;
     height:48px;
     border-radius:50%;
     border:2px solid var(--primary-40);
}
 .testimonial .name {
     display:block;
     margin-top:6px;
     color:var(--sub);
     font-size:.9rem;
}
 .contact textarea, .contact input {
     width:100%;
     background:#0f1217;
     border:1px solid #243042;
     color:var(--text);
     border-radius:12px;
     padding:12px;
     outline:none;
     transition:border-color .2s, box-shadow .2s;
}
 .contact input:focus, .contact textarea:focus {
     border-color:var(--primary);
     box-shadow:0 0 0 4px var(--primary-20);
}
 .contact .row {
     display:grid;
     grid-template-columns:1fr;
     gap:10px;
     margin-bottom:10px;
}
 @media (min-width:900px){
     .contact .row{
         grid-template-columns:1fr 1fr;
    }
}
 .contact .actions {
     display:flex;
     gap:10px;
     flex-wrap:wrap;
}
 .footer {
     padding:28px 0;
     background:linear-gradient(180deg, #0d0f1300, #0d0f13);
}
 .footer-inner {
     display:flex;
     align-items:center;
     gap:12px;
     color:var(--sub);
}
 .dot-sep {
     width:6px;
     height:6px;
     border-radius:50%;
     background:#2a3340;
}
 .reveal {
     opacity:0;
     transform:translateY(16px);
     transition:opacity .6s ease, transform .6s ease;
}
 .reveal.visible {
     opacity:1;
     transform:translateY(0);
}
.select-plan {
  width: 100%;
  background: #0f1217;
  border: 1px solid #243042;
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  outline: none;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.select-plan:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-20);
}