:root {
  --em-50:#faf7fd;
  --em-100:#f3ecfb;
  --em-200:#e9ddf7;
  --em-300:#d8c2f0;
  --em-400:#bf9be5;
  --em-500:#a675d7;
  --em-600:#8f57c6;
  --em-700:#7a44ac;
  --em-800:#673b8e;
  --em-900:#583377;
  --em-950:#381952;

  --text:#201329;
  --muted:#786889;
  --border:rgba(166,117,215,.22);
  --white:#ffffff;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:"Inter",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 8%,var(--em-200),transparent 28%),
    radial-gradient(circle at 90% 12%,var(--em-300),transparent 26%),
    linear-gradient(180deg,var(--em-50),#ffffff 42%,var(--em-100));
  overflow-x:hidden;
}

.noise {
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:9999;
}

.container {
  width:min(1180px,calc(100% - 32px));
  margin:auto;
}

.header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(250,247,253,.78);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
}

.nav {
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--em-950);
}

.brand-logo {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(135deg,var(--em-800),var(--em-500));
  color:white;
  font-weight:900;
  box-shadow:0 18px 38px rgba(122,68,172,.25);
}

.brand strong {
  display:block;
  letter-spacing:-.03em;
}

.brand small {
  color:var(--muted);
  font-size:.82rem;
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-actions a {
  text-decoration:none;
  color:var(--em-900);
  font-weight:800;
  padding:11px 14px;
  border-radius:999px;
  transition:.25s;
}

.nav-actions a:hover {
  background:var(--em-100);
}

.nav-actions .back-btn {
  color:white;
  background:linear-gradient(135deg,var(--em-950),var(--em-700));
  box-shadow:0 18px 38px rgba(56,25,82,.18);
}

.hero {
  position:relative;
  min-height:calc(100vh - 86px);
  display:flex;
  align-items:center;
  padding:95px 0;
  overflow:hidden;
}

.hero-orb {
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.24;
  pointer-events:none;
}

.hero-orb.one {
  width:650px;
  height:650px;
  right:-220px;
  top:80px;
  background:conic-gradient(var(--em-300),var(--em-700),var(--em-300));
}

.hero-orb.two {
  width:420px;
  height:420px;
  left:-160px;
  bottom:0;
  background:radial-gradient(circle,var(--em-400),transparent 65%);
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
}

.eyebrow {
  display:inline-flex;
  padding:10px 16px;
  border-radius:999px;
  background:white;
  border:1px solid var(--border);
  color:var(--em-700);
  font-weight:900;
  margin-bottom:24px;
}

h1 {
  max-width:900px;
  font-size:clamp(3rem,6.4vw,6.3rem);
  line-height:.9;
  letter-spacing:-.08em;
  color:var(--em-950);
}

.hero-copy p {
  max-width:720px;
  margin-top:30px;
  color:var(--muted);
  line-height:1.8;
  font-size:1.1rem;
}

.hero-copy p strong {
  color:var(--em-700);
}

.hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:36px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  transition:.3s;
}

.btn:hover {
  transform:translateY(-4px);
}

.primary {
  background:linear-gradient(135deg,var(--em-950),var(--em-700));
  color:white;
  box-shadow:0 22px 45px rgba(56,25,82,.25);
}

.secondary {
  background:white;
  color:var(--em-900);
  border:1px solid var(--border);
}

.light {
  background:white;
  color:var(--em-900);
}

.hero-points {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}

.hero-points span {
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
  color:var(--em-900);
  font-weight:800;
}

.hero-panel {
  position:relative;
}

.browser-card {
  position:relative;
  overflow:hidden;
  border-radius:38px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  box-shadow:0 45px 110px rgba(56,25,82,.18);
}

.browser-top {
  display:flex;
  gap:8px;
  padding:20px;
  border-bottom:1px solid var(--border);
}

.browser-top span {
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--em-400);
}

.browser-content {
  padding:38px;
}

.mini-logo {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(135deg,var(--em-950),var(--em-600));
  color:white;
  font-weight:900;
  font-size:1.4rem;
  margin-bottom:24px;
}

.browser-content h3 {
  color:var(--em-950);
  font-size:2rem;
  letter-spacing:-.05em;
  line-height:1;
}

.browser-content p {
  color:var(--muted);
  margin-top:15px;
  line-height:1.7;
}

.browser-bars {
  display:grid;
  gap:12px;
  margin-top:32px;
}

.browser-bars span {
  height:14px;
  border-radius:999px;
  background:var(--em-100);
}

.browser-bars span:nth-child(1) {
  width:92%;
}

.browser-bars span:nth-child(2) {
  width:74%;
}

.browser-bars span:nth-child(3) {
  width:84%;
}

.browser-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:30px;
}

.browser-grid div {
  height:90px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--em-100),white);
  border:1px solid var(--border);
}

.floating-price {
  position:absolute;
  right:-20px;
  bottom:-28px;
  padding:22px;
  min-width:170px;
  border-radius:30px;
  background:linear-gradient(135deg,var(--em-950),var(--em-700));
  color:white;
  box-shadow:0 30px 70px rgba(56,25,82,.3);
}

.floating-price small {
  display:block;
  opacity:.75;
}

.floating-price strong {
  display:block;
  font-size:3rem;
  line-height:1;
  letter-spacing:-.08em;
}

.floating-price span {
  font-size:.9rem;
  opacity:.8;
}

.section {
  padding:105px 0;
}

.intro-card {
  padding:50px;
  border-radius:42px;
  background:rgba(255,255,255,.76);
  border:1px solid var(--border);
  box-shadow:0 35px 90px rgba(56,25,82,.09);
  text-align:center;
}

.intro-card h2,
.section-title h2,
.extras-grid h2,
.cta h2 {
  font-size:clamp(2.3rem,5vw,4.5rem);
  line-height:.95;
  letter-spacing:-.06em;
  color:var(--em-950);
}

.intro-card p {
  max-width:850px;
  margin:24px auto 0;
  color:var(--muted);
  line-height:1.9;
  font-size:1.06rem;
}

.section-title {
  max-width:820px;
  margin:0 auto 55px;
  text-align:center;
}

.section-title p {
  margin-top:24px;
  color:var(--muted);
  line-height:1.8;
  font-size:1.05rem;
}

.plans-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  align-items:stretch;
}

.plan-card {
  position:relative;
  overflow:hidden;
  padding:44px;
  border-radius:40px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  box-shadow:0 35px 90px rgba(56,25,82,.1);
}

.plan-card::before {
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-120px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(166,117,215,.32),transparent 70%);
}

.plan-card.featured {
  background:linear-gradient(135deg,rgba(56,25,82,.98),rgba(122,68,172,.96));
  color:white;
}

.plan-card.featured h3,
.plan-card.featured p,
.plan-card.featured li,
.plan-card.featured .plan-note {
  color:white;
}

.plan-label {
  position:relative;
  z-index:2;
  display:inline-flex;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  color:inherit;
  font-size:.82rem;
  font-weight:900;
  margin-bottom:24px;
}

.plan-card:not(.featured) .plan-label {
  background:var(--em-100);
  color:var(--em-700);
  border:1px solid var(--border);
}

.plan-card h3 {
  position:relative;
  z-index:2;
  font-size:2.3rem;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--em-950);
  margin-bottom:24px;
}

.price {
  position:relative;
  z-index:2;
  font-size:5rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.08em;
  margin-bottom:24px;
  color:white;
}

.price span {
  font-size:2.1rem;
}

.price small {
  display:block;
  font-size:1rem;
  letter-spacing:0;
  margin-top:12px;
  opacity:.8;
}

.custom-price {
  position:relative;
  z-index:2;
  display:inline-flex;
  padding:18px 22px;
  border-radius:22px;
  background:var(--em-100);
  color:var(--em-800);
  font-weight:900;
  margin-bottom:24px;
}

.plan-card p {
  position:relative;
  z-index:2;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:24px;
}

.plan-card ul {
  position:relative;
  z-index:2;
  list-style:none;
  display:grid;
  gap:12px;
  margin:28px 0;
}

.plan-card li {
  color:var(--muted);
  padding:12px 0;
  border-bottom:1px solid rgba(166,117,215,.16);
}

.plan-card li::before {
  content:"✔ ";
  font-weight:900;
}

.plan-note {
  position:relative;
  z-index:2;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  line-height:1.7;
  margin:28px 0;
}

.plan-card:not(.featured) .plan-note {
  background:var(--em-50);
  color:var(--em-800);
  border:1px solid var(--border);
}

.process-grid,
.features-grid,
.extras-list {
  display:grid;
  gap:24px;
}

.process-grid {
  grid-template-columns:repeat(4,1fr);
}

.features-grid {
  grid-template-columns:repeat(4,1fr);
}

.process-grid article,
.features-grid article,
.extras-list article {
  padding:30px;
  border-radius:30px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  box-shadow:0 25px 60px rgba(56,25,82,.08);
}

.process-grid article {
  min-height:260px;
}

.process-grid span {
  display:block;
  font-size:3rem;
  line-height:1;
  letter-spacing:-.08em;
  color:var(--em-400);
  font-weight:900;
  margin-bottom:22px;
}

.process-grid h3,
.features-grid h3,
.extras-list h3 {
  color:var(--em-950);
  font-size:1.35rem;
  margin-bottom:12px;
  letter-spacing:-.03em;
}

.process-grid p,
.features-grid p,
.extras-list p,
.extras-grid > div > p {
  color:var(--muted);
  line-height:1.7;
}

.extras-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:50px;
  align-items:start;
}

.extras-list {
  grid-template-columns:repeat(2,1fr);
}

.icon {
  font-size:2.6rem;
  margin-bottom:18px;
}

.features-grid article {
  text-align:center;
}

.cta {
  text-align:center;
  padding:105px 20px;
  background:linear-gradient(135deg,var(--em-950),var(--em-700));
  color:white;
}

.light-eyebrow {
  color:white;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.cta h2 {
  max-width:900px;
  margin:auto;
  color:white;
}

.cta p {
  max-width:760px;
  margin:24px auto 0;
  color:rgba(255,255,255,.82);
  line-height:1.8;
}

.email-link {
  display:inline-flex;
  margin-top:28px;
  color:white;
  font-weight:900;
  font-size:1.2rem;
  text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.5);
}

.cta-actions {
  margin-top:32px;
}

footer {
  padding:38px 20px;
  text-align:center;
  color:var(--muted);
}

@media(max-width:1060px) {
  .hero-grid,
  .plans-grid,
  .extras-grid {
    grid-template-columns:1fr;
  }

  .hero {
    min-height:auto;
  }

  .floating-price {
    right:20px;
  }

  .process-grid,
  .features-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px) {
  .nav {
    flex-direction:column;
    align-items:flex-start;
    padding:18px 0;
  }

  .nav-actions {
    width:100%;
  }

  .nav-actions a,
  .nav-actions .back-btn {
    width:100%;
    text-align:center;
  }

  h1 {
    font-size:3.2rem;
  }

  .section {
    padding:80px 0;
  }

  .intro-card,
  .plan-card {
    padding:32px 22px;
  }

  .price {
    font-size:4rem;
  }

  .process-grid,
  .features-grid,
  .extras-list {
    grid-template-columns:1fr;
  }

  .browser-content {
    padding:28px;
  }

  .floating-price {
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:18px;
  }
}

@media(max-width:480px) {
  .brand small {
    display:none;
  }

  h1 {
    font-size:2.8rem;
  }

  .hero-actions,
  .btn {
    width:100%;
  }

  .btn {
    text-align:center;
  }
}