/* ===== TOKENS: Violet Palette from your image ===== */ .mi-wrap{ /* palette (dark → light) */ –violet0:#0b0020; –violet1:#16003a; –violet2:#2a0066; –violet3:#4a0d9c; –violet4:#6d2cc9; –violet5:#8c4ee6; –violet6:#b37bf6; –violet7:#dfb5ff; /* theme colors */ –bg: radial-gradient(1200px 800px at 80% -10%, rgba(179,123,246,.08), transparent 55%), var(–violet0); –panel: linear-gradient(180deg, rgba(22,0,58,.9), rgba(10,0,30,.96)); –ink:#f2ecff; –muted:#cfc3f5; –line:rgba(179,123,246,.22); –accent: linear-gradient(90deg, var(–violet5), var(–violet6) 50%, var(–violet5)); –shadow: 0 10px 34px rgba(0,0,0,.45); –radius:22px; –r-sm:14px; –pad:clamp(16px,4vw,28px); font-family:’Poppins’,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(–ink); background:var(–bg); line-height:1.6; padding:0; margin:0 } .mi-wrap *{box-sizing:border-box} .mi-cont{max-width:1120px;margin:0 auto;padding:28px var(–pad) 64px} /* ===== HEADER ===== */ .mi-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(–pad);border-bottom:1px solid var(–line);position:sticky;top:0;background:rgba(10,0,30,.7);backdrop-filter:blur(8px);z-index:9} .mi-brand{display:flex;align-items:center;gap:12px} .mi-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:conic-gradient(from 220deg,var(–violet2),var(–violet3) 40%,var(–violet2));border:1px solid rgba(255,255,255,.06)} .mi-logo:after{content:”✦”;background:var(–accent);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px;transform:translateY(-1px)} .mi-title{display:flex;flex-direction:column} .mi-title b{font-family:’Playfair Display’,serif;font-weight:700;letter-spacing:.4px} .mi-title small{color:var(–muted);font-size:12px} .mi-nav{display:flex;gap:10px;flex-wrap:wrap} .mi-nav a{color:var(–ink);text-decoration:none;padding:10px 14px;border-radius:999px;border:1px solid var(–line);font-size:14px} .mi-nav a:hover{box-shadow:0 0 0 4px rgba(179,123,246,.15)} /* ===== HERO ===== */ .mi-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding:40px 0} @media (max-width:960px){.mi-hero{grid-template-columns:1fr}} .mi-hero h1{font-family:’Playfair Display’,serif;font-weight:700;line-height:1.12;font-size:clamp(30px,4.3vw,56px);margin:0 0 10px} .mi-hero .glow{background:var(–accent);-webkit-background-clip:text;background-clip:text;color:transparent} .mi-hero p{color:var(–muted);margin:0 0 18px} .mi-cta{display:flex;gap:12px;flex-wrap:wrap} .mi-btn{appearance:none;border:none;cursor:pointer;border-radius:999px;padding:12px 18px;font-weight:600;transition:.25s} .mi-btn–accent{color:#150028;background:var(–accent)} .mi-btn–ghost{background:transparent;color:var(–ink);border:1px solid var(–line)} .mi-btn–ghost:hover{border-color:var(–violet6)} .mi-card-astro{border-radius:var(–radius);background:var(–panel);border:1px solid var(–line);padding:20px;box-shadow:var(–shadow)} .mi-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:560px){.mi-grid-2{grid-template-columns:1fr}} .mi-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#1a0830;background:linear-gradient(90deg,#fff,#f4eaff);padding:6px 10px;border-radius:999px;font-weight:600} /* ===== SECTIONS ===== */ .mi-sec{margin:34px 0} .mi-sec h2{font-family:’Playfair Display’,serif;font-size:clamp(24px,3.2vw,36px);margin:0 0 6px} .mi-sec p.lead{color:var(–muted);margin:0 0 18px} /* ===== SERVICES ===== */ .mi-services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:1080px){.mi-services{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.mi-services{grid-template-columns:1fr}} .mi-service{background:var(–panel);border:1px solid var(–line);border-radius:var(–radius);padding:22px;position:relative;overflow:hidden;box-shadow:var(–shadow)} .mi-service:after{content:””;position:absolute;inset:auto -40% -40% auto;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,rgba(179,123,246,.24),transparent 62%)} .mi-chip{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px dashed rgba(255,255,255,.12);border-radius:999px;color:var(–muted);font-size:12px;margin-bottom:10px} .mi-service h3{margin:6px 0 8px;font-size:clamp(18px,2.2vw,20px)} .mi-service ul{margin:10px 0 0;padding:0;list-style:none} .mi-service li{padding-left:20px;position:relative;margin:8px 0;color:#eee7ff} .mi-service li:before{content:”▹”;position:absolute;left:0;background:var(–accent);-webkit-background-clip:text;background-clip:text;color:transparent} /* ===== HIGHLIGHTS ===== */ .mi-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media (max-width:960px){.mi-stats{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.mi-stats{grid-template-columns:1fr}} .mi-stat{background:linear-gradient(180deg, rgba(109,44,201,.18), rgba(22,0,58,.35)), var(–panel); border:1px solid var(–line);border-radius:var(–r-sm);padding:16px;text-align:center} .mi-stat b{display:block;font-size:clamp(22px,3vw,28px);background:var(–accent);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.4px} .mi-stat small{color:var(–muted)} /* ===== PRICING ===== */ .mi-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:1080px){.mi-pricing{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.mi-pricing{grid-template-columns:1fr}} .mi-plan{background:var(–panel);border:1px solid var(–line);border-radius:var(–radius);padding:22px;position:relative;overflow:hidden} .mi-plan.popular{outline:2px solid rgba(179,123,246,.35)} .mi-price{font-family:’Playfair Display’,serif;font-size:clamp(28px,3.4vw,34px);background:var(–accent);-webkit-background-clip:text;background-clip:text;color:transparent} .mi-plan ul{list-style:none;margin:10px 0 0;padding:0} .mi-plan li{margin:8px 0;padding-left:18px;position:relative} .mi-plan li:before{content:”✓”;position:absolute;left:0;color:var(–violet6)} .mi-plan .mi-btn{margin-top:14px} /* ===== TESTIMONIALS ===== */ .mi-testis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:1080px){.mi-testis{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.mi-testis{grid-template-columns:1fr}} .mi-quote{background:var(–panel);border:1px solid var(–line);border-radius:var(–radius);padding:18px;position:relative} .mi-quote:before{content:”“”;position:absolute;left:12px;top:-10px;font-family:’Playfair Display’,serif;color:var(–violet7);font-size:40px;opacity:.9} .mi-quote p{margin:12px 0 8px;color:#f1eaff} .mi-quote b{color:var(–muted);font-size:14px} /* ===== CTA ===== */ .mi-ctaBlock{display:grid;gap:14px;grid-template-columns:1.2fr .8fr;align-items:center; background:linear-gradient(100deg, rgba(179,123,246,.15), rgba(223,181,255,.10) 60%, transparent), var(–panel); border:1px solid var(–line);border-radius:var(–radius);padding:22px;box-shadow:var(–shadow)} @media (max-width:860px){.mi-ctaBlock{grid-template-columns:1fr}} .mi-ctaBlock h3{font-family:’Playfair Display’,serif;margin:0 0 8px} .mi-ctaBlock .mi-btn{font-size:15px} /* ===== FOOTER ===== */ .mi-footer{margin-top:28px;border-top:1px solid var(–line);padding-top:18px;color:var(–muted);font-size:14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between} /* ===== ANIMATIONS ===== */ @keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}} .mi-seal{animation:floaty 6s ease-in-out infinite} /* ===== LIGHT MODE (toggle) ===== */ .mi-wrap.mi-light{ –bg:#faf7ff; –panel:#ffffff; –ink:#2a0a5a; –muted:#6e59a7; –line:#eadffc; –shadow:0 8px 22px rgba(42,10,90,.08); } .mi-wrap.mi-light .mi-header{background:rgba(255,255,255,.92)} .mi-wrap.mi-light .mi-service, .mi-wrap.mi-light .mi-plan, .mi-wrap.mi-light .mi-quote, .mi-wrap.mi-light .mi-stat, .mi-wrap.mi-light .mi-ctaBlock{background:var(–panel);border-color:var(–line)}