:root {
      --md-primary:#08acff;
      --md-primary-dark:#006fd6;
      --md-deep:#013c68;
      --md-lavender:#b8a7ff;
      --md-mint:#70e2ce;
      --md-green:#75dba6;
      --md-ink:#061722;
      --md-muted:#66788f;
      --md-bg:#f7fcff;
      --md-bg2:#edf8ff;
      --md-card:#ffffff;
      --md-glass:rgba(255,255,255,.76);
      --md-glass-strong:rgba(255,255,255,.92);
      --md-border:rgba(5,32,58,.10);
      --md-shadow:0 26px 80px rgba(4,46,86,.12);
      --md-soft-shadow:0 16px 48px rgba(4,46,86,.09);
      --md-radius:24px;
      --md-radius-lg:36px;
    }
    html[data-theme="dark"] {
      --md-ink:#f6fbff;
      --md-muted:#adc0d3;
      --md-bg:#06121a;
      --md-bg2:#071c28;
      --md-card:#0b1c28;
      --md-glass:rgba(7,24,34,.76);
      --md-glass-strong:rgba(9,28,40,.92);
      --md-border:rgba(231,246,255,.13);
      --md-shadow:0 28px 86px rgba(0,0,0,.35);
      --md-soft-shadow:0 18px 52px rgba(0,0,0,.28);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:104px}
    body{
      margin:0;
      font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--md-ink);
      background:
        radial-gradient(circle at 12% 0%,rgba(24,189,244,.16),transparent 30%),
        radial-gradient(circle at 86% 8%,rgba(184,167,255,.14),transparent 30%),
        linear-gradient(180deg,var(--md-bg),var(--md-bg2));
      overflow-x:hidden;
    }
    body:before,body:after{
      content:"";position:fixed;width:420px;height:420px;border-radius:999px;pointer-events:none;z-index:-1;filter:blur(20px);opacity:.42;animation:pageGlow 14s ease-in-out infinite;
    }
    body:before{left:-170px;top:16%;background:radial-gradient(circle,rgba(24,189,244,.22),transparent 68%)}
    body:after{right:-180px;top:58%;background:radial-gradient(circle,rgba(184,167,255,.24),transparent 70%);animation-delay:3s}
    @keyframes pageGlow{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-28px,0) scale(1.06)}}
    a{text-decoration:none;color:inherit}
    img{max-width:100%}
    .md-text-gradient{background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark),var(--md-lavender));-webkit-background-clip:text;background-clip:text;color:transparent}
    .md-section{padding:94px 0}
    .md-section-sm{padding:74px 0}
    .md-kicker{
      display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--md-border);border-radius:999px;
      color:var(--md-primary-dark);background:rgba(24,189,244,.10);font-size:.77rem;font-weight:850;letter-spacing:.02em;margin-bottom:16px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.45)
    }
    html[data-theme="dark"] .md-kicker{color:#78ddff}
    .md-title{font-size:clamp(2rem,3.6vw,3.55rem)!important;font-weight:900;letter-spacing:-.052em;line-height:1.08;margin-bottom:16px}
    .md-subtitle{color:var(--md-muted);font-size:.98rem;line-height:1.72;max-width:740px}
    .fw-black{font-weight:900}

    /* Navbar */
    .md-navbar{
      min-height:72px;margin:12px auto 0;width:min(1180px,calc(100% - 28px));border:1px solid var(--md-border);border-radius:24px;
      background:var(--md-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 14px 42px rgba(4,46,86,.07);
      transition:all .25s ease;z-index:1040;
    }
    .md-navbar.scrolled{margin-top:8px;background:var(--md-glass-strong);box-shadow:0 22px 58px rgba(4,46,86,.14)}
    .md-brand{display:inline-flex;align-items:center;gap:11px;color:var(--md-ink)!important;font-weight:900;letter-spacing:-.035em;font-size:1.06rem;min-width:0}
    .md-logo{width:42px;height:42px;border-radius:15px;object-fit:contain;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark));box-shadow:0 18px 42px rgba(24,189,244,.25);flex:0 0 auto}
    .md-brand-word{max-width:150px;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .md-nav{position:relative;color:var(--md-muted)!important;font-size:.86rem;font-weight:780;padding:.62rem .78rem!important;border-radius:14px;border:1px solid transparent;transition:.2s}
    .md-nav:before{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:999px;background:var(--md-primary);transform:scaleX(0);transition:.22s}
    .md-nav:hover,.md-nav:focus,.md-nav.active{color:var(--md-primary-dark)!important;background:rgba(24,189,244,.09);border-color:rgba(24,189,244,.14)}
    .md-nav:hover:before,.md-nav.active:before{transform:scaleX(1)}
    html[data-theme="dark"] .md-nav:hover,html[data-theme="dark"] .md-nav:focus,html[data-theme="dark"] .md-nav.active{color:#7bdfff!important}
    .dropdown-menu{min-width:238px;border:1px solid var(--md-border);border-radius:22px;padding:12px;background:var(--md-glass-strong);backdrop-filter:blur(24px);box-shadow:var(--md-soft-shadow);margin-top:12px;animation:dropdownSoft .18s ease both}
    @keyframes dropdownSoft{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
    .dropdown-item{color:var(--md-muted);font-weight:760;border-radius:14px;padding:10px 13px;font-size:.86rem}
    .dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active,.dropdown-item:active{color:var(--md-primary-dark);background:rgba(24,189,244,.11)}
    .md-btn{border-radius:999px;font-weight:850;padding:.78rem 1.15rem;font-size:.9rem;transition:.22s}
    .md-btn-primary{color:#fff;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark));border:0;box-shadow:0 18px 42px rgba(24,189,244,.25)}
    .md-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 24px 56px rgba(24,189,244,.32)}
    .md-btn-soft{color:var(--md-ink);background:var(--md-glass);border:1px solid var(--md-border)}
    .md-btn-soft:hover{color:var(--md-ink);transform:translateY(-2px);background:rgba(24,189,244,.08);border-color:rgba(24,189,244,.34)}
    .md-theme-toggle{width:44px;height:44px;padding:0;display:inline-grid;place-items:center;border-radius:999px}

    /* Hero */
    .md-hero{position:relative;padding:148px 0 88px;overflow:hidden;background:radial-gradient(circle at 20% 16%,rgba(24,189,244,.16),transparent 30%),radial-gradient(circle at 80% 20%,rgba(184,167,255,.17),transparent 28%),linear-gradient(180deg,rgba(255,255,255,0),rgba(24,189,244,.045))}
    .md-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(5,32,58,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(5,32,58,.052) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,black,transparent 80%);opacity:.54;pointer-events:none}
    html[data-theme="dark"] .md-hero-grid{background-image:linear-gradient(rgba(231,246,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(231,246,255,.065) 1px,transparent 1px)}
    .md-orb{position:absolute;border-radius:999px;pointer-events:none;border:1px solid rgba(24,189,244,.16);background:radial-gradient(circle,rgba(24,189,244,.10),transparent 68%);animation:orbFloat 9s ease-in-out infinite}
    .orb-1{width:360px;height:360px;left:-120px;top:120px}
    .orb-2{width:260px;height:260px;right:8%;bottom:60px;background:radial-gradient(circle,rgba(184,167,255,.13),transparent 68%);animation-delay:1.8s}
    @keyframes orbFloat{0%,100%{transform:scale(1) translateY(0);opacity:.7}50%{transform:scale(1.08) translateY(-18px);opacity:1}}
    .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;border:1px solid var(--md-border);border-radius:999px;background:var(--md-glass);color:var(--md-muted);font-size:.8rem;font-weight:850;box-shadow:0 12px 36px rgba(4,46,86,.06);margin-bottom:22px}
    .hero-badge span{display:inline-grid;place-items:center;padding:6px 10px;border-radius:999px;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark));font-size:.72rem}
    .md-hero-title{font-size:clamp(2.2rem,4.8vw,4.85rem);line-height:1.035;font-weight:900;letter-spacing:-.064em;margin-bottom:22px;max-width:780px}
    .md-hero-text{max-width:660px;color:var(--md-muted);font-size:clamp(.98rem,1.35vw,1.1rem);line-height:1.76;margin-bottom:30px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:28px}
    .trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:15px;color:var(--md-muted);font-size:.88rem;font-weight:720}
    .avatar-stack{display:flex;align-items:center}
    .avatar-stack span{width:34px;height:34px;margin-left:-8px;border-radius:999px;border:3px solid var(--md-bg);display:grid;place-items:center;color:white;font-size:.77rem;font-weight:900;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark),var(--md-lavender))}
    .avatar-stack span:first-child{margin-left:0}
    .hero-stage{position:relative;min-height:650px;display:grid;place-items:center;isolation:isolate}
    .phone-glow{position:absolute;width:500px;height:500px;border-radius:999px;background:radial-gradient(circle at 50% 50%,rgba(24,189,244,.28),transparent 62%),radial-gradient(circle at 70% 28%,rgba(184,167,255,.22),transparent 46%);animation:phoneGlow 7s ease-in-out infinite;z-index:-2}
    @keyframes phoneGlow{0%,100%{transform:scale(1) translateY(0);opacity:.84}50%{transform:scale(1.08) translateY(-10px);opacity:1}}
    .phone-shell{position:relative;width:min(348px,76vw);min-height:640px;border:10px solid #06111b;border-radius:52px;background:#f8fcff;box-shadow:0 34px 62px rgba(4,46,86,.24);padding:18px;overflow:hidden;animation:phoneFloat 6.5s ease-in-out infinite;z-index:2}
    @keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-18px) rotate(1deg)}}
    .phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:92px;height:24px;background:#06111b;border-radius:0 0 16px 16px;z-index:3}
    .app-top{margin-top:26px;display:flex;align-items:center;justify-content:space-between;color:#071727}
    .app-top small{color:#7b8da1;font-weight:800}
    .app-top h5{margin:2px 0 0;font-weight:900;letter-spacing:-.04em}
    .app-avatar{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark))}
    .session-card{margin-top:22px;padding:22px;border-radius:30px;color:white;background:radial-gradient(circle at 82% 16%,rgba(255,255,255,.18),transparent 32%),linear-gradient(145deg,var(--md-deep),var(--md-primary-dark),var(--md-primary));box-shadow:0 22px 48px rgba(10,114,204,.22);min-height:180px}
    .session-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:19px;background:rgba(255,255,255,.16);margin-bottom:20px;font-size:1.5rem}
    .session-card h4{font-weight:900;letter-spacing:-.045em;margin-bottom:8px}
    .session-card p{color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.6;margin-bottom:0}
    .progress-card{margin-top:16px;padding:18px;border-radius:24px;background:white;border:1px solid rgba(5,32,58,.08);box-shadow:0 12px 32px rgba(5,32,58,.07)}
    .progress-card h6{font-weight:900;letter-spacing:-.03em;color:#071727}
    .progress-line{height:8px;border-radius:999px;background:rgba(24,189,244,.14);overflow:hidden;margin:12px 0 8px}
    .progress-line span{display:block;height:100%;width:72%;border-radius:999px;background:linear-gradient(90deg,var(--md-primary),var(--md-primary-dark));animation:progressGrow 2.6s ease-in-out infinite alternate}
    @keyframes progressGrow{from{width:48%}to{width:82%}}
    .mini-list{display:grid;gap:10px;margin-top:15px}
    .mini-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:#f1f9ff;color:#071727}
    .mini-item i{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark))}
    .mini-item strong{display:block;font-size:.84rem;letter-spacing:-.02em}
    .mini-item small{color:#7b8da1;font-weight:700}
    .bottom-tabs{position:absolute;left:18px;right:18px;bottom:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;border-radius:24px;background:white;box-shadow:0 -8px 24px rgba(5,32,58,.06)}
    .bottom-tabs span{display:grid;place-items:center;color:#8aa0b6;font-size:1.2rem}
    .bottom-tabs span.active{color:var(--md-primary-dark)}
    .floating-pill{position:absolute;z-index:5;display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:999px;background:var(--md-glass-strong);border:1px solid var(--md-border);box-shadow:0 16px 42px rgba(4,46,86,.13);color:var(--md-primary-dark);font-size:.82rem;font-weight:900;backdrop-filter:blur(16px);animation:floatPill 6s ease-in-out infinite}
    .floating-pill i{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark))}
    .pill-1{top:30px;left:18px}.pill-2{top:128px;right:-4px;animation-delay:.9s}.pill-3{left:-8px;bottom:170px;animation-delay:1.7s}.pill-4{right:36px;bottom:40px;animation-delay:2.4s}
    @keyframes floatPill{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

    /* Cards */
    .md-card{position:relative;height:100%;border:1px solid var(--md-border);background:var(--md-glass);backdrop-filter:blur(18px);border-radius:var(--md-radius);box-shadow:0 14px 45px rgba(4,46,86,.06);transition:.25s;overflow:hidden}
    .md-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(24,189,244,.10),transparent 42%);opacity:0;transition:.25s;pointer-events:none}
    .md-card:hover{transform:translateY(-7px) scale(1.01);border-color:rgba(24,189,244,.40);box-shadow:0 24px 64px rgba(24,189,244,.15)}
    .md-card:hover:before{opacity:1}
    .card-pad{padding:28px}
    .md-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,rgba(24,189,244,.12),rgba(184,167,255,.15));color:var(--md-primary-dark);font-size:1.3rem;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
    html[data-theme="dark"] .md-icon{color:#7bdfff}
    .md-card h4,.md-card h5{font-weight:900;letter-spacing:-.04em;margin-bottom:12px}
    .md-card h4{font-size:1.12rem}.md-card h5{font-size:1rem}
    .md-card p{color:var(--md-muted);line-height:1.68;margin-bottom:0;font-size:.94rem}
    .md-panel{border:1px solid var(--md-border);border-radius:var(--md-radius-lg);padding:34px;background:linear-gradient(135deg,rgba(24,189,244,.08),transparent),var(--md-glass);box-shadow:var(--md-soft-shadow);overflow:hidden;position:relative}
    .step-number{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark),var(--md-lavender));font-weight:900;margin-bottom:18px}

    /* Admin */
    .admin-visual{position:relative;min-height:430px;display:grid;place-items:center}
    .admin-shell{width:100%;max-width:560px;border:1px solid var(--md-border);border-radius:32px;overflow:hidden;background:var(--md-glass-strong);box-shadow:var(--md-shadow);transform:perspective(1100px) rotateY(-5deg) rotateX(3deg);animation:adminFloat 6.5s ease-in-out infinite}
    @keyframes adminFloat{0%,100%{transform:perspective(1100px) rotateY(-5deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1100px) rotateY(-5deg) rotateX(3deg) translateY(-12px)}}
    .admin-top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--md-border)}
    .dots{display:flex;gap:8px}.dots span{width:12px;height:12px;border-radius:999px;background:var(--md-primary)}.dots span:nth-child(2){background:var(--md-lavender)}.dots span:nth-child(3){background:var(--md-green)}
    .admin-body{display:grid;grid-template-columns:84px 1fr;min-height:350px}
    .admin-sidebar{padding:16px 13px;border-right:1px solid var(--md-border);display:grid;gap:12px;align-content:start}
    .admin-pill{width:100%;height:42px;border-radius:16px;background:rgba(24,189,244,.11);display:grid;place-items:center;color:var(--md-primary-dark)}
    .admin-main{padding:22px}
    .admin-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}
    .metric{padding:15px;border-radius:20px;background:var(--md-card);border:1px solid var(--md-border)}
    .metric small{color:var(--md-muted);font-weight:800}.metric h5{margin:7px 0 0;font-weight:900;letter-spacing:-.04em}
    .admin-list{display:grid;gap:10px}
    .admin-row{display:flex;align-items:center;gap:12px;padding:13px;border-radius:18px;background:rgba(24,189,244,.06)}
    .admin-row i{width:40px;height:40px;display:grid;place-items:center;border-radius:15px;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark))}
    .admin-row h6{margin:0;font-weight:900;font-size:.88rem}.admin-row p{margin:2px 0 0;color:var(--md-muted);font-size:.76rem;font-weight:720}

    /* Download / Stats / Package */
    .download-card,.stats-band,.cta-card{border-radius:var(--md-radius-lg);color:white;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.23),transparent 24%),linear-gradient(135deg,var(--md-deep),var(--md-primary-dark),var(--md-primary));box-shadow:0 30px 80px rgba(24,189,244,.28);overflow:hidden;position:relative}
    .download-card{padding:46px}
    .store-btn{display:inline-flex;align-items:center;gap:12px;min-width:210px;padding:14px 18px;border-radius:20px;color:var(--md-deep);background:white;border:0;box-shadow:0 18px 38px rgba(3,46,86,.16);transition:.22s}
    .store-btn:hover{color:var(--md-deep);transform:translateY(-3px);background:#f8fdff}
    .store-btn i{font-size:1.55rem}.store-btn small,.store-btn strong{display:block;line-height:1.15}.store-btn small{font-size:.73rem;color:#6b7f93;font-weight:750}.store-btn strong{font-size:.96rem;font-weight:900}
    .stats-band{padding:46px}
    .stat-item h3{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:900;letter-spacing:-.055em;margin-bottom:4px}
    .stat-item p{margin:0;color:rgba(255,255,255,.82);font-weight:720;font-size:.92rem}
    .package-section{background:radial-gradient(circle at 12% 20%,rgba(24,189,244,.09),transparent 30%),radial-gradient(circle at 88% 18%,rgba(184,167,255,.10),transparent 28%)}
    .package-card.featured{color:white;border-color:rgba(255,255,255,.22);background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.18),transparent 32%),linear-gradient(145deg,var(--md-deep),var(--md-primary-dark),var(--md-primary));box-shadow:0 30px 86px rgba(24,189,244,.30);transform:translateY(-10px)}
    .package-card.featured:hover{transform:translateY(-16px);box-shadow:0 36px 96px rgba(24,189,244,.38)}
    .package-badge{position:absolute;top:22px;right:22px;z-index:3;border-radius:999px;padding:7px 12px;background:white;color:var(--md-primary-dark);font-size:.72rem;font-weight:900;box-shadow:0 10px 26px rgba(5,32,58,.16)}
    .check-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
    .check-list li{display:flex;align-items:flex-start;gap:10px;color:var(--md-muted);font-size:.91rem;font-weight:720;line-height:1.48}
    .check-list i{color:var(--md-primary);flex:0 0 auto;margin-top:1px}
    .package-card.featured .check-list li,.package-card.featured p{color:rgba(255,255,255,.82)!important}.package-card.featured .check-list i{color:white}

    /* Testimonial / FAQ / Contact */
    .testimonial-card{min-height:296px;background:var(--md-card)}
    .stars{color:#f7b731;margin-bottom:18px;letter-spacing:2px}
    .testimonial-card p{line-height:1.72;font-size:.95rem;margin-bottom:24px}
    .user{display:flex;align-items:center;gap:13px}.user-avatar{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;color:white;font-weight:900;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark),var(--md-lavender))}.user h6{margin:0;font-weight:900}.user span{color:var(--md-muted);font-size:.84rem;font-weight:720}
    .swiper-pagination-bullet{background:var(--md-primary);opacity:.32}.swiper-pagination-bullet-active{opacity:1;width:24px;border-radius:999px}
    .accordion-item{border:1px solid var(--md-border)!important;border-radius:22px!important;background:var(--md-card);overflow:hidden;margin-bottom:14px;box-shadow:0 14px 45px rgba(4,46,86,.055);transition:.22s}
    .accordion-item:hover{transform:translateX(4px);border-color:rgba(24,189,244,.32)!important}
    .accordion-button{color:var(--md-ink);background:var(--md-card);font-weight:900;padding:20px 22px;font-size:.96rem;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--md-ink);background:rgba(24,189,244,.07)}html[data-theme="dark"] .accordion-button:after{filter:invert(1)}
    .accordion-body{color:var(--md-muted);line-height:1.68;padding:0 22px 22px;background:var(--md-card);font-size:.94rem}
    .contact-section{position:relative;padding:96px 0;overflow:hidden;background:radial-gradient(circle at 16% 16%,rgba(255,255,255,.18),transparent 26%),radial-gradient(circle at 84% 22%,rgba(255,255,255,.14),transparent 28%),linear-gradient(145deg,var(--md-deep),var(--md-primary-dark),var(--md-primary))}
    .contact-card,.form-card{position:relative;border:1px solid rgba(255,255,255,.22);border-radius:30px;background:rgba(8,24,38,.30);backdrop-filter:blur(22px);box-shadow:0 26px 76px rgba(3,46,86,.22);overflow:hidden;padding:32px}
    .contact-card h3{color:white;font-weight:900;letter-spacing:-.04em}
    .contact-channel{display:flex;align-items:center;gap:14px;padding:15px;border-radius:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:white;margin-top:12px;transition:.22s}
    .contact-channel:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:white}
    .contact-channel i{width:48px;height:48px;display:grid;place-items:center;border-radius:18px;color:white;flex:0 0 auto;font-size:1.25rem;background:rgba(255,255,255,.16)}
    .contact-channel h5{margin:0 0 3px;font-size:.98rem;font-weight:900}.contact-channel p{margin:0;color:rgba(255,255,255,.72);font-size:.84rem;font-weight:720;line-height:1.4}
    .form-card{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.52)}html[data-theme="dark"] .form-card{background:rgba(12,28,40,.90)}
    .form-label-custom{display:block;font-weight:850;color:var(--md-ink);font-size:.86rem;margin-bottom:8px}
    .form-control,.form-select{border:1px solid var(--md-border);background:var(--md-card);color:var(--md-ink);border-radius:17px;padding:13px 15px;font-size:.92rem;box-shadow:none!important;transition:.2s}
    .form-control:focus,.form-select:focus{border-color:var(--md-primary);background:var(--md-card);color:var(--md-ink);transform:translateY(-1px);box-shadow:0 0 0 4px rgba(24,189,244,.10)!important}
    .cta-card{padding:58px 40px}.cta-card h2{font-weight:900;letter-spacing:-.055em;line-height:1.06;margin-bottom:16px}.cta-card p{color:rgba(255,255,255,.82);line-height:1.7;max-width:720px;margin:0 auto 28px;font-size:.98rem}
    .footer{padding:74px 0 28px;border-top:1px solid var(--md-border);background:rgba(255,255,255,.32)}html[data-theme="dark"] .footer{background:rgba(255,255,255,.025)}.footer h6{font-weight:900;margin-bottom:18px}.footer p,.footer a{color:var(--md-muted);font-weight:650;line-height:1.68;font-size:.94rem}.footer a:hover{color:var(--md-primary)}.footer-links{display:grid;gap:10px}.social-links{display:flex;gap:10px;margin-top:18px}.social-links a{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;border:1px solid var(--md-border);background:var(--md-card);color:var(--md-ink);transition:.22s}.social-links a:hover{background:var(--md-primary);color:white;border-color:var(--md-primary);transform:translateY(-2px)}
    .back-to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:999px;z-index:1020;border:0;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--md-primary),var(--md-primary-dark));box-shadow:0 16px 34px rgba(24,189,244,.28);opacity:0;visibility:hidden;transform:translateY(12px);transition:.25s}.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}

    @media (min-width:992px){.dropdown:hover>.dropdown-menu{display:block}}
    @media (max-width:1199.98px){.floating-pill{display:none}}
    @media (max-width:991.98px){
      .md-navbar{width:calc(100% - 20px);margin-top:8px;border-radius:22px}
      .navbar-collapse{margin-top:14px;padding:16px;border:1px solid var(--md-border);border-radius:24px;background:var(--md-glass-strong);backdrop-filter:blur(20px);box-shadow:var(--md-soft-shadow)}
      .md-nav:before{display:none}.md-hero{padding-top:126px}.hero-stage{min-height:570px}.admin-shell{transform:none;animation:none}.admin-body{grid-template-columns:1fr}.admin-sidebar{display:none}.package-card.featured{transform:none}.package-card.featured:hover{transform:translateY(-7px)}
    }
    @media (max-width:767.98px){
      .md-section{padding:70px 0}.md-section-sm{padding:58px 0}.md-hero{padding-bottom:62px}.md-hero-title{font-size:clamp(2rem,11vw,3.05rem)}.md-title{font-size:clamp(1.85rem,8vw,2.45rem)!important}.hero-stage{min-height:510px}.phone-shell{min-height:610px}.phone-glow{width:330px;height:330px}.md-panel,.download-card,.stats-band,.cta-card,.contact-card,.form-card{padding:28px 22px}.card-pad{padding:24px}.admin-metrics{grid-template-columns:1fr}.store-btn{width:100%;justify-content:center}
    }
    @media (max-width:575.98px){.md-brand-word{max-width:105px}.phone-shell{width:min(322px,88vw)}}
  
    /* Maditam Meditation Pricing + Contact Upgrade */
    .pill-5 { top: 224px; left: -24px; animation-delay: 2.1s; }
    .pill-6 { right: 16px; bottom: 132px; animation-delay: 2.9s; }

    .session-card::after {
      content: "";
      position: absolute;
      inset: auto 24px 16px auto;
      width: 74px;
      height: 42px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,.46) 0 4px, transparent 5px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 5px, transparent 5px 10px);
      opacity: .55;
      animation: soundSoftMove 2.8s ease-in-out infinite;
    }

    .session-card { position: relative; overflow: hidden; }

    @keyframes soundSoftMove {
      0%,100% { transform: translateX(0); opacity: .45; }
      50% { transform: translateX(-8px); opacity: .72; }
    }

    .premium-price-section,
    .premium-setup-section {
      position: relative;
      overflow: hidden;
    }

    .premium-price-section {
      background:
        radial-gradient(circle at 12% 20%, rgba(8,172,255,0.11), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(184,167,255,0.14), transparent 28%);
    }

    .premium-setup-section {
      background: linear-gradient(180deg, rgba(8,172,255,0.045), transparent 72%);
    }

    .price-bg-orb {
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(8,172,255,0.16), transparent 68%);
      filter: blur(4px);
      pointer-events: none;
      animation: priceOrbFloat 10s ease-in-out infinite;
    }

    .price-bg-orb.orb-left { left: -120px; top: 120px; }
    .price-bg-orb.orb-right { right: -110px; bottom: 80px; animation-delay: 2s; }

    @keyframes priceOrbFloat {
      0%, 100% { transform: translateY(0) scale(1); opacity: .72; }
      50% { transform: translateY(-24px) scale(1.08); opacity: 1; }
    }

    .meditation-card-glow { position: relative; overflow: hidden; }

    .meditation-card-glow::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 10%, rgba(8,172,255,0.14), transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(184,167,255,0.12), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.10), transparent 45%);
      opacity: .9;
      pointer-events: none;
    }

    .meditation-card-glow::after {
      content: "";
      position: absolute;
      inset: auto 18px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(8,172,255,.55), transparent);
      opacity: .65;
    }

    .license-card,
    .setup-card-pro {
      height: 100%;
      border: 1px solid var(--md-border);
      border-radius: 30px;
      background: var(--md-glass-strong);
      box-shadow: 0 22px 68px rgba(4,46,86,.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }

    .license-card:hover,
    .setup-card-pro:hover {
      transform: translateY(-9px);
      border-color: rgba(8,172,255,.38);
      box-shadow: 0 30px 80px rgba(8,172,255,.16);
    }

    .license-card-content,
    .setup-card-pro {
      position: relative;
      z-index: 1;
      padding: 34px;
    }

    .license-card h4,
    .setup-card-pro h4 {
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: -.045em;
      margin-bottom: 14px;
    }

    .license-icon,
    .setup-top-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      color: var(--md-primary-dark);
      background: linear-gradient(135deg, rgba(8,172,255,.13), rgba(184,167,255,.18));
      font-size: 1.35rem;
      margin-bottom: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }

    .license-price,
    .setup-price {
      display: flex;
      align-items: end;
      gap: 10px;
      margin: 14px 0 14px;
    }

    .setup-price {
      display: block;
      font-size: 2.8rem;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.07em;
      color: var(--md-primary-dark);
    }

    .license-price del {
      color: var(--md-muted);
      opacity: .72;
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 7px;
    }

    .license-price strong {
      font-size: 3.1rem;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.075em;
      color: var(--md-primary-dark);
    }

    .license-price span {
      color: var(--md-muted);
      font-weight: 800;
      margin-bottom: 8px;
      font-size: .86rem;
    }

    .meditation-check-list {
      list-style: none;
      padding: 0;
      margin: 26px 0 0;
      display: grid;
      gap: 13px;
    }

    .meditation-check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--md-muted);
      font-size: .91rem;
      font-weight: 700;
      line-height: 1.48;
    }

    .meditation-check-list i {
      flex: 0 0 auto;
      margin-top: 1px;
      font-size: .95rem;
    }

    .meditation-check-list .check { color: var(--md-primary); }
    .meditation-check-list .cross { color: #ef4444; opacity: .82; }

    .license-btn { margin-top: 28px; }

    .license-card.featured,
    .setup-card-pro.featured {
      color: white;
      border-color: rgba(255,255,255,.22);
      background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.18), transparent 32%),
        radial-gradient(circle at 80% 16%, rgba(184,167,255,.20), transparent 34%),
        linear-gradient(145deg, var(--md-deep), var(--md-primary-dark), var(--md-primary));
      box-shadow: 0 30px 86px rgba(8,172,255,.30);
      transform: translateY(-10px);
    }

    .license-card.featured:hover,
    .setup-card-pro.featured:hover {
      transform: translateY(-16px);
      box-shadow: 0 36px 96px rgba(8,172,255,.38);
    }

    .license-card.featured .license-icon,
    .setup-card-pro.featured .setup-top-icon {
      color: var(--md-primary-dark);
      background: rgba(255,255,255,.92);
    }

    .license-card.featured .license-price strong,
    .setup-card-pro.featured .setup-price {
      color: white;
    }

    .license-card.featured .license-price del,
    .license-card.featured .license-price span,
    .license-card.featured .meditation-check-list li,
    .setup-card-pro.featured .meditation-check-list li,
    .setup-card-pro.featured p {
      color: rgba(255,255,255,.82) !important;
    }

    .license-card.featured .meditation-check-list .check,
    .setup-card-pro.featured .meditation-check-list .check { color: white; }

    .license-card.featured .meditation-check-list .cross,
    .setup-card-pro.featured .meditation-check-list .cross { color: #ffe1e1; }

    .license-ribbon,
    .setup-badge {
      position: absolute;
      top: 22px;
      right: -38px;
      z-index: 3;
      width: 164px;
      text-align: center;
      transform: rotate(35deg);
      background: white;
      color: var(--md-primary-dark);
      padding: 7px 10px;
      font-size: .72rem;
      font-weight: 900;
      box-shadow: 0 10px 26px rgba(4,46,86,.16);
    }

    .setup-badge {
      right: 22px;
      top: 22px;
      width: auto;
      transform: none;
      border-radius: 999px;
      padding: 7px 12px;
    }

    .btn-white {
      background: white;
      color: var(--md-primary-dark);
      border: 0;
      box-shadow: 0 16px 34px rgba(4,46,86,.12);
      border-radius: 999px;
      font-weight: 850;
      padding: .78rem 1.15rem;
    }

    .btn-white:hover {
      background: #f8fdff;
      color: var(--md-primary-dark);
      transform: translateY(-2px);
    }

    .maditam-contact-section {
      position: relative;
      padding: 96px 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.18), transparent 26%),
        radial-gradient(circle at 84% 22%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(145deg, var(--md-deep), var(--md-primary-dark), var(--md-primary));
    }

    .maditam-contact-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 50% 42%, black, transparent 78%);
      pointer-events: none;
    }

    .contact-floating-shape {
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
      animation: contactShapeFloat 9s ease-in-out infinite;
    }

    .contact-floating-shape.shape-one { width: 260px; height: 260px; left: -90px; top: 80px; }
    .contact-floating-shape.shape-two { width: 190px; height: 190px; right: -60px; bottom: 70px; animation-delay: 1.8s; }

    @keyframes contactShapeFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-22px) scale(1.06); }
    }

    .contact-left-wrapper { display: grid; gap: 22px; height: 100%; }

    .contact-side-card,
    .strategy-card,
    .contact-form-card {
      position: relative;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 30px;
      background: rgba(8, 24, 38, .30);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow: 0 26px 76px rgba(3, 46, 86, .22);
      overflow: hidden;
    }

    .contact-side-card,
    .strategy-card-content,
    .contact-form-card { padding: 32px; }

    .contact-side-card::before,
    .strategy-card::before,
    .contact-form-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%);
      pointer-events: none;
    }

    .contact-side-card > *,
    .strategy-card-content > *,
    .contact-form-card > * { position: relative; z-index: 1; }

    .contact-side-card h3,
    .contact-form-card h3 {
      color: white;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .contact-channel {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px;
      border-radius: 22px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color: white;
      margin-top: 12px;
      transition: transform .22s ease, background .22s ease, border-color .22s ease;
    }

    .contact-channel:hover {
      transform: translateY(-4px);
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.26);
      color: white;
    }

    .contact-channel-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: white;
      flex: 0 0 auto;
      font-size: 1.25rem;
    }

    .contact-channel.green .contact-channel-icon { background: #17bf63; }
    .contact-channel.teal .contact-channel-icon { background: #08acff; }
    .contact-channel.blue .contact-channel-icon { background: #2f80ed; }
    .contact-channel.primary .contact-channel-icon { background: var(--md-primary-dark); }

    .contact-channel h5 {
      margin: 0 0 3px;
      font-size: .98rem;
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .contact-channel p {
      margin: 0;
      color: rgba(255,255,255,.70);
      font-size: .84rem;
      font-weight: 700;
      line-height: 1.4;
    }

    .strategy-card {
      background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 32%),
        rgba(255,255,255,.13);
    }

    .strategy-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      color: white;
      font-size: .78rem;
      font-weight: 900;
      margin-bottom: 15px;
    }

    .strategy-card h4 { color: white; font-weight: 900; letter-spacing: -.04em; }
    .strategy-card p,
    .strategy-card small { color: rgba(255,255,255,.72); line-height: 1.65; }
    .strategy-card small { display: block; margin-top: 14px; font-weight: 700; }

    .strategy-btn,
    .btn-ready {
      color: var(--md-primary-dark);
      background: white;
      border: 0;
      border-radius: 999px;
      font-weight: 850;
      padding: .78rem 1.15rem;
      box-shadow: 0 18px 38px rgba(3,46,86,.15);
    }

    .strategy-btn:hover,
    .btn-ready:hover {
      color: var(--md-primary-dark);
      background: #f8fdff;
      transform: translateY(-2px);
    }

    .contact-form-card {
      height: 100%;
      background: rgba(255,255,255,.94);
      border-color: rgba(255,255,255,.52);
    }

    html[data-theme="dark"] .contact-form-card { background: rgba(12,28,40,.90); }

    .contact-form-card h3 {
      color: var(--md-ink);
      font-size: 1.55rem;
    }

    .form-text-small {
      color: var(--md-muted);
      font-size: .94rem;
      margin-bottom: 24px;
    }

    .modern-field label {
      display: block;
      font-weight: 850;
      color: var(--md-ink);
      font-size: .86rem;
      margin-bottom: 8px;
    }

    .modern-field textarea { min-height: 132px; resize: vertical; }

    .upload-box {
      display: grid;
      place-items: center;
      gap: 7px;
      width: 100%;
      min-height: 138px;
      padding: 22px;
      text-align: center;
      border: 1.5px dashed rgba(8,172,255,.42);
      border-radius: 24px;
      background: rgba(8,172,255,.06);
      cursor: pointer;
      transition: transform .22s ease, background .22s ease, border-color .22s ease;
    }

    .upload-box:hover {
      transform: translateY(-3px);
      background: rgba(8,172,255,.10);
      border-color: rgba(8,172,255,.70);
    }

    .upload-box input { display: none; }

    .upload-box i {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: white;
      background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
      font-size: 1.35rem;
      box-shadow: 0 16px 34px rgba(8,172,255,.24);
    }

    .upload-box strong { color: var(--md-ink); font-weight: 900; }
    .upload-box span { color: var(--md-muted); font-size: .86rem; font-weight: 650; }

    @media (max-width: 1199.98px) {
      .pill-5, .pill-6 { display: none; }
    }

    @media (max-width: 991.98px) {
      .license-card.featured,
      .setup-card-pro.featured { transform: none; }
      .license-card.featured:hover,
      .setup-card-pro.featured:hover { transform: translateY(-9px); }
    }

    @media (max-width: 767.98px) {
      .license-card-content,
      .setup-card-pro,
      .contact-side-card,
      .strategy-card-content,
      .contact-form-card { padding: 26px; }
      .license-price strong,
      .setup-price { font-size: 2.45rem; }
      .maditam-contact-section { padding: 72px 0; }
    }

  
    /* =========================================================
       Maditam Meditation Background Upgrade
       Reusable floating icon background:
       Copy .meditation-icon-bg block into any section with position:relative
    ========================================================== */
    html[data-theme="light"] body {
      background:
        radial-gradient(circle at 14% 0%, rgba(8,172,255,.16), transparent 28%),
        radial-gradient(circle at 86% 6%, rgba(184,167,255,.14), transparent 30%),
        linear-gradient(180deg, #f8fdff, #eef8ff);
    }

    .md-hero,
    .maditam-contact-section,
    .has-meditation-bg {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .md-hero > .container,
    .maditam-contact-section > .container,
    .has-meditation-bg > .container {
      position: relative;
      z-index: 2;
    }

    .md-hero {
      background:
        radial-gradient(circle at 10% 16%, rgba(8,172,255,.18), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(184,167,255,.18), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(112,226,206,.16), transparent 36%),
        linear-gradient(180deg, #f9fdff 0%, #edf8ff 48%, #f8fcff 100%);
    }

    .md-hero::before,
    .maditam-contact-section::after {
      content: "";
      position: absolute;
      inset: auto auto 0 -8%;
      width: 116%;
      height: 180px;
      border-radius: 50% 50% 0 0;
      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.58));
      opacity: .75;
      pointer-events: none;
      z-index: 0;
    }

    .md-hero-grid {
      background-image:
        linear-gradient(rgba(8,172,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,172,255,.045) 1px, transparent 1px);
      background-size: 68px 68px;
      opacity: .36;
      mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.06));
    }

    .med-wave {
      position: absolute;
      border-radius: 999px;
      border: 1px solid rgba(8,172,255,.18);
      filter: blur(.2px);
      pointer-events: none;
      z-index: 0;
      animation: medWaveFloat 11s ease-in-out infinite;
      background: linear-gradient(90deg, rgba(8,172,255,.05), rgba(184,167,255,.07), rgba(8,172,255,.05));
    }

    .med-wave-1 {
      width: 480px;
      height: 150px;
      left: -60px;
      top: 88px;
      transform: rotate(-11deg);
    }

    .med-wave-2 {
      width: 380px;
      height: 126px;
      right: -40px;
      top: 170px;
      transform: rotate(12deg);
      animation-delay: 1.4s;
    }

    .med-wave-3 {
      width: 420px;
      height: 140px;
      right: 10%;
      bottom: 54px;
      transform: rotate(-8deg);
      animation-delay: 2.4s;
    }

    .section-wave-1 {
      width: 380px;
      height: 120px;
      right: -90px;
      top: 90px;
      transform: rotate(-14deg);
      animation-delay: .9s;
    }

    .contact-wave-1 {
      width: 430px;
      height: 140px;
      left: -70px;
      top: 90px;
      transform: rotate(-12deg);
      border-color: rgba(255,255,255,.22);
      background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.12), rgba(255,255,255,.04));
    }

    .contact-wave-2 {
      width: 360px;
      height: 118px;
      right: -55px;
      bottom: 110px;
      transform: rotate(10deg);
      border-color: rgba(255,255,255,.18);
      background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
      animation-delay: 1.6s;
    }

    @keyframes medWaveFloat {
      0%,100% { transform: translateY(0) rotate(var(--wave-rot, 0deg)); opacity: .48; }
      50% { transform: translateY(-18px) rotate(var(--wave-rot, 0deg)); opacity: .82; }
    }

    .med-wave-1 { --wave-rot: -11deg; }
    .med-wave-2 { --wave-rot: 12deg; }
    .med-wave-3 { --wave-rot: -8deg; }
    .section-wave-1 { --wave-rot: -14deg; }
    .contact-wave-1 { --wave-rot: -12deg; }
    .contact-wave-2 { --wave-rot: 10deg; }

    .meditation-icon-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .floating-icon {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding: 8px 14px 8px 8px;
      border-radius: 999px;
      border: 1px solid rgba(8,172,255,.18);
      color: var(--md-primary-dark);
      background: rgba(255,255,255,.58);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 14px 34px rgba(8,172,255,.08);
      font-size: .76rem;
      font-weight: 850;
      letter-spacing: .01em;
      opacity: .6;
      animation: meditationFloat 13s ease-in-out infinite;
      white-space: nowrap;
    }

    .floating-icon i {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: white;
      background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
      box-shadow: 0 10px 24px rgba(8,172,255,.18);
    }

    .hero-icon-bg .floating-icon {
      opacity: .82;
      box-shadow: 0 18px 38px rgba(8,172,255,.12);
    }

    .soft-section-icons .floating-icon {
      opacity: .45;
      transform: scale(.92);
    }

    .contact-icon-bg .floating-icon {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.18);
      color: white;
      opacity: .68;
      box-shadow: 0 18px 42px rgba(2, 22, 38, .16);
    }

    .contact-icon-bg .floating-icon i {
      background: rgba(255,255,255,.16);
      color: white;
      box-shadow: none;
    }

    .alt-flow .fi-1,
    .alt-flow .fi-4,
    .alt-flow .fi-7 {
      animation-duration: 15s;
    }

    .cta-icons .floating-icon {
      opacity: .38;
    }

    .fi-1 { left: 4%; top: 14%; animation-delay: 0s; }
    .fi-2 { right: 6%; top: 12%; animation-delay: 1.2s; }
    .fi-3 { left: 8%; top: 44%; animation-delay: 2.1s; }
    .fi-4 { right: 8%; top: 48%; animation-delay: 2.8s; }
    .fi-5 { left: 18%; bottom: 16%; animation-delay: 1.7s; }
    .fi-6 { right: 18%; bottom: 12%; animation-delay: .7s; }
    .fi-7 { left: 42%; top: 18%; animation-delay: 3.1s; }
    .fi-8 { right: 34%; bottom: 18%; animation-delay: 2.4s; }

    @keyframes meditationFloat {
      0%,100% { transform: translate3d(0,0,0) scale(1); }
      25% { transform: translate3d(10px,-14px,0) scale(1.03); }
      50% { transform: translate3d(-6px,-22px,0) scale(.98); }
      75% { transform: translate3d(12px,-10px,0) scale(1.02); }
    }

    .premium-price-section,
    .premium-setup-section,
    .has-meditation-bg {
      background-clip: padding-box;
    }

    .premium-price-section {
      background:
        radial-gradient(circle at 12% 20%, rgba(8,172,255,0.10), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(184,167,255,0.12), transparent 28%);
    }

    .premium-setup-section {
      background:
        radial-gradient(circle at 16% 18%, rgba(112,226,206,.12), transparent 24%),
        linear-gradient(180deg, rgba(8,172,255,.03), transparent 72%);
    }

    #features,
    #testimonials,
    #docs,
    #cta {
      background:
        radial-gradient(circle at 10% 18%, rgba(8,172,255,.06), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(184,167,255,.08), transparent 24%);
    }

    .maditam-contact-section {
      background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.12), transparent 22%),
        radial-gradient(circle at 85% 15%, rgba(197,171,255,.18), transparent 24%),
        radial-gradient(circle at 50% 110%, rgba(106,236,219,.16), transparent 36%),
        linear-gradient(140deg, #062337 0%, #0a4f76 42%, #08acff 100%);
    }

    .maditam-contact-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 28%, rgba(255,255,255,.12) 0 2px, transparent 2px),
        radial-gradient(circle at 80% 32%, rgba(255,255,255,.12) 0 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 120px 120px, 160px 160px, 62px 62px, 62px 62px;
      mask-image: linear-gradient(180deg, black, rgba(0,0,0,.18));
      pointer-events: none;
      z-index: 0;
    }

    .contact-floating-shape {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.16);
      box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
    }

    .contact-side-card,
    .strategy-card,
    .contact-form-card {
      box-shadow: 0 28px 74px rgba(2, 20, 34, .18);
    }

    @media (max-width: 1199.98px) {
      .floating-icon { transform: scale(.92); }
      .fi-7, .fi-8 { display: none; }
    }

    @media (max-width: 991.98px) {
      .floating-icon {
        padding: 0;
        width: 42px;
        height: 42px;
        justify-content: center;
      }
      .floating-icon span { display: none; }
      .floating-icon i {
        width: 42px;
        height: 42px;
      }
      .fi-5, .fi-6 { display: none; }
      .med-wave-3, .section-wave-1 { display: none; }
    }

    @media (max-width: 767.98px) {
      .md-hero { padding-top: 134px; }
      .med-wave-1, .med-wave-2, .contact-wave-1, .contact-wave-2 { display: none; }
      .floating-icon { opacity: .5; }
      .hero-icon-bg .floating-icon { opacity: .68; }
    }

  

    /* =========================================================
       Icon-only background animation override
       Makes all floating background items circular icons only
    ========================================================== */
    .floating-icon {
      width: 46px !important;
      height: 46px !important;
      min-height: 46px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      justify-content: center !important;
      gap: 0 !important;
      white-space: normal !important;
      background: rgba(255,255,255,.22) !important;
      border: 1px solid rgba(8,172,255,.12) !important;
      box-shadow: 0 12px 28px rgba(8,172,255,.08) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .floating-icon span {
      display: none !important;
    }

    .floating-icon i {
      width: 46px !important;
      height: 46px !important;
      border-radius: 50% !important;
      font-size: 1rem;
      box-shadow: 0 10px 24px rgba(8,172,255,.14) !important;
    }

    .hero-icon-bg .floating-icon {
      opacity: .72 !important;
    }

    .soft-section-icons .floating-icon {
      opacity: .34 !important;
      transform: scale(.9);
    }

    .contact-icon-bg .floating-icon {
      opacity: .52 !important;
      background: rgba(255,255,255,.10) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      box-shadow: 0 14px 32px rgba(2,20,34,.12) !important;
    }

    .contact-icon-bg .floating-icon i {
      background: rgba(255,255,255,.14) !important;
      color: white !important;
      box-shadow: none !important;
    }

    @media (max-width: 991.98px) {
      .floating-icon,
      .floating-icon i {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
      }
    }

  

    /* =========================================================
       Premium Button Quality + Footer Contact Upgrade
    ========================================================== */
    .btn,
    .md-btn,
    .store-btn,
    .strategy-btn,
    .btn-ready,
    .btn-white {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transform: translateZ(0);
      will-change: transform, box-shadow;
    }

    .btn::before,
    .md-btn::before,
    .store-btn::before,
    .strategy-btn::before,
    .btn-ready::before,
    .btn-white::before {
      content: "";
      position: absolute;
      top: -120%;
      left: -40%;
      width: 42%;
      height: 340%;
      z-index: -1;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
      transform: rotate(24deg) translateX(-130%);
      transition: transform .68s cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
    }

    .btn:hover::before,
    .md-btn:hover::before,
    .store-btn:hover::before,
    .strategy-btn:hover::before,
    .btn-ready:hover::before,
    .btn-white:hover::before {
      transform: rotate(24deg) translateX(420%);
    }

    .md-btn-primary,
    .btn-ready,
    .strategy-btn,
    .btn-white {
      box-shadow:
        0 16px 34px rgba(8,172,255,.22),
        inset 0 1px 0 rgba(255,255,255,.24);
    }

    .md-btn-primary:hover,
    .btn-ready:hover,
    .strategy-btn:hover,
    .btn-white:hover {
      transform: translateY(-4px) scale(1.015);
      box-shadow:
        0 26px 58px rgba(8,172,255,.34),
        inset 0 1px 0 rgba(255,255,255,.34);
    }

    .md-btn-primary:active,
    .md-btn-soft:active,
    .store-btn:active,
    .strategy-btn:active,
    .btn-ready:active,
    .btn-white:active {
      transform: translateY(-1px) scale(.985);
    }

    .md-btn-soft {
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
        rgba(255,255,255,.56);
      box-shadow:
        0 12px 32px rgba(4,46,86,.08),
        inset 0 1px 0 rgba(255,255,255,.70);
    }

    html[data-theme="dark"] .md-btn-soft {
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        rgba(7,24,34,.74);
      box-shadow:
        0 14px 34px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10);
    }

    .md-btn-soft:hover {
      transform: translateY(-4px) scale(1.012);
      border-color: rgba(8,172,255,.46);
      box-shadow:
        0 22px 52px rgba(8,172,255,.16),
        inset 0 1px 0 rgba(255,255,255,.70);
    }

    .store-btn {
      border: 1px solid rgba(255,255,255,.34);
      box-shadow:
        0 18px 42px rgba(3,46,86,.18),
        inset 0 1px 0 rgba(255,255,255,.75);
    }

    .store-btn:hover {
      transform: translateY(-5px) scale(1.018);
      box-shadow:
        0 28px 62px rgba(3,46,86,.24),
        inset 0 1px 0 rgba(255,255,255,.80);
    }

    .btn-outline-light {
      border-width: 1.5px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    }

    .btn-outline-light:hover {
      color: var(--md-primary-dark);
      background: white;
      transform: translateY(-4px) scale(1.015);
      box-shadow: 0 24px 54px rgba(3,46,86,.22);
    }

    .contact-channel,
    .footer-contact-list a,
    .footer-links a,
    .social-links a {
      transition:
        transform .24s cubic-bezier(.2,.8,.2,1),
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
    }

    .footer {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 10%, rgba(8,172,255,.08), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(184,167,255,.08), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.42));
    }

    html[data-theme="dark"] .footer {
      background:
        radial-gradient(circle at 12% 10%, rgba(8,172,255,.08), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(184,167,255,.06), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.035));
    }

    .footer-contact-card {
      padding: 0;
    }

    .footer-contact-card h6 {
      margin-bottom: 18px;
    }

    .footer-contact-list {
      display: grid;
      gap: 14px;
    }

    .footer-contact-list a {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: var(--md-muted);
      font-weight: 800;
      line-height: 1.55;
      padding: 2px 0;
      border-radius: 14px;
    }

    .footer-contact-list a i {
      width: 22px;
      min-width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      color: var(--md-muted);
      font-size: 1rem;
      margin-top: 1px;
      transition: transform .24s ease, color .24s ease;
    }

    .footer-contact-list a:hover {
      color: var(--md-primary);
      transform: translateX(5px);
    }

    .footer-contact-list a:hover i {
      color: var(--md-primary);
      transform: scale(1.08) rotate(-4deg);
    }

    .footer-links a:hover {
      transform: translateX(5px);
    }

    .social-links a {
      box-shadow:
        0 10px 24px rgba(4,46,86,.06),
        inset 0 1px 0 rgba(255,255,255,.44);
    }

    .social-links a:hover {
      box-shadow:
        0 18px 38px rgba(8,172,255,.22),
        inset 0 1px 0 rgba(255,255,255,.28);
    }

    @keyframes subtleButtonPulse {
      0%, 100% { box-shadow: 0 16px 34px rgba(8,172,255,.20), inset 0 1px 0 rgba(255,255,255,.24); }
      50% { box-shadow: 0 20px 46px rgba(8,172,255,.30), inset 0 1px 0 rgba(255,255,255,.30); }
    }

    .hero-actions .md-btn-primary,
    .cta-card .btn-light {
      animation: subtleButtonPulse 3.8s ease-in-out infinite;
    }

    @media (max-width: 767.98px) {
      .footer-contact-list a {
        font-size: .9rem;
      }
    }

  

    /* =========================================================
       Dark Mode Fix for Hero Section
       Keeps default light mode, but hero now switches properly in dark mode
    ========================================================== */
    html[data-theme="dark"] .md-hero {
      background:
        radial-gradient(circle at 10% 16%, rgba(8,172,255,.16), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(184,167,255,.13), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(112,226,206,.08), transparent 36%),
        linear-gradient(180deg, #06121a 0%, #071c28 48%, #06121a 100%) !important;
    }

    html[data-theme="dark"] .md-hero::before {
      background: linear-gradient(180deg, rgba(6,18,26,0), rgba(6,18,26,.88)) !important;
      opacity: .95;
    }

    html[data-theme="dark"] .md-hero-grid {
      background-image:
        linear-gradient(rgba(231,246,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231,246,255,.055) 1px, transparent 1px) !important;
      opacity: .35;
    }

    html[data-theme="dark"] .hero-badge {
      background: rgba(7,24,34,.72);
      border-color: rgba(231,246,255,.13);
      color: var(--md-muted);
      box-shadow: 0 16px 38px rgba(0,0,0,.18);
    }

    html[data-theme="dark"] .hero-badge span {
      background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
      color: #fff;
    }

    html[data-theme="dark"] .phone-glow {
      background:
        radial-gradient(circle at 50% 50%, rgba(8,172,255,.20), transparent 62%),
        radial-gradient(circle at 70% 28%, rgba(184,167,255,.16), transparent 46%);
      opacity: .76;
    }

    html[data-theme="dark"] .hero-icon-bg .floating-icon {
      background: rgba(7,24,34,.42) !important;
      border-color: rgba(231,246,255,.12) !important;
      box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
    }

    html[data-theme="dark"] .hero-icon-bg .floating-icon i {
      background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark)) !important;
      color: #fff !important;
    }

    html[data-theme="dark"] .med-wave {
      border-color: rgba(8,172,255,.14);
      background: linear-gradient(90deg, rgba(8,172,255,.035), rgba(184,167,255,.045), rgba(8,172,255,.035));
    }

    html[data-theme="dark"] .trust-row,
    html[data-theme="dark"] .md-hero-text {
      color: var(--md-muted);
    }

/* =========================================================
   Documentation Section Clickable Cards
   Ready CSS for Maditam Documentation Section
   Paste this file as your full CSS file
========================================================== */

/* Documentation section wrapper */
#docs {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 18%, rgba(8, 172, 255, 0.06), transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(184, 167, 255, 0.08), transparent 24%);
}

/* Keep documentation content above animated background icons */
#docs > .container {
  position: relative;
  z-index: 2;
}

/* Full card link wrapper */
.md-doc-link-card {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: var(--md-radius);
  outline: none;
}

/* Prevent link color change on hover */
.md-doc-link-card:hover {
  color: inherit;
  text-decoration: none;
}

/* Make card clickable and smooth */
.md-doc-link-card .md-card {
  height: 100%;
  min-height: 100%;
  cursor: pointer;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

/* Premium card hover effect */
.md-doc-link-card:hover .md-card {
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(8, 172, 255, 0.48);
  box-shadow:
    0 28px 72px rgba(8, 172, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

/* Keyboard focus accessibility */
.md-doc-link-card:focus-visible .md-card {
  outline: 3px solid rgba(8, 172, 255, 0.30);
  outline-offset: 4px;
}

/* Action text under each documentation card */
.doc-card-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--md-primary-dark);
  font-size: 0.84rem;
  font-weight: 900;
  transition:
    transform 0.24s ease,
    color 0.24s ease;
}

/* Dark mode action color */
html[data-theme="dark"] .doc-card-action {
  color: #7bdfff;
}

/* Action text hover movement */
.md-doc-link-card:hover .doc-card-action {
  transform: translateX(4px);
  color: var(--md-primary);
}

/* Action icon size */
.doc-card-action i {
  font-size: 0.9rem;
}

/* =========================================================
   Optional Animated Background Icons for Documentation
   Use only if your #docs section has .meditation-icon-bg icons
========================================================== */

/* Animated icon background wrapper */
#docs .meditation-icon-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Icon-only floating background items */
#docs .floating-icon {
  position: absolute;
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(8, 172, 255, 0.12);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(8, 172, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.34;
  animation: documentationIconFloat 13s ease-in-out infinite;
}

/* Icon design */
#docs .floating-icon i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  box-shadow: 0 10px 24px rgba(8, 172, 255, 0.14);
}

/* Hide any icon text if accidentally added */
#docs .floating-icon span {
  display: none !important;
}

/* Icon positions */
#docs .fi-1 {
  left: 4%;
  top: 14%;
  animation-delay: 0s;
}

#docs .fi-2 {
  right: 6%;
  top: 12%;
  animation-delay: 1.2s;
}

#docs .fi-3 {
  left: 8%;
  top: 44%;
  animation-delay: 2.1s;
}

#docs .fi-4 {
  right: 8%;
  top: 48%;
  animation-delay: 2.8s;
}

#docs .fi-5 {
  left: 18%;
  bottom: 16%;
  animation-delay: 1.7s;
}

#docs .fi-6 {
  right: 18%;
  bottom: 12%;
  animation-delay: 0.7s;
}

/* Floating animation */
@keyframes documentationIconFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  25% {
    transform: translate3d(10px, -14px, 0) scale(1.03);
  }

  50% {
    transform: translate3d(-6px, -22px, 0) scale(0.98);
  }

  75% {
    transform: translate3d(12px, -10px, 0) scale(1.02);
  }
}

/* =========================================================
   Responsive for Documentation Section
========================================================== */

@media (max-width: 991.98px) {
  #docs .floating-icon,
  #docs .floating-icon i {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #docs .fi-5,
  #docs .fi-6 {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #docs .floating-icon {
    opacity: 0.24;
  }

  .doc-card-action {
    font-size: 0.82rem;
  }
}