:root{
  --periwinkle:#5865F2; /* darker periwinkle */
  --periwinkle-2:#7A87FF;
  --periwinkle-3:#AAB1FF;
  --ink:#1F232B;
  --muted:#5B6170;
  --bg:#FFFFFF;
  --panel:#F2F4FF;
  --border:#E6E8F2;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
}

.container{max-width:1120px;margin-inline:auto;padding-inline:24px}

/* NAV */
.nav{position:sticky;top:0;background:#fff;z-index:30;border-bottom:1px solid var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:16px}
.brand{display:flex;align-items:center;gap:10px;padding-left:16px;}
.brand__name{font-weight:700;font-size:18px}
.logo{height:80px;position:relative;display:inline-block}
/*.logo::before,.logo::after{content:'';position:absolute;background:#fff;border-radius:2px}
.logo::before{width:16px;height:2px;left:6px;top:13px}
.logo::after{width:2px;height:16px;left:13px;top:6px}*/
.nav__links{display:flex;gap:28px;align-items:center}
.nav__links a{color:#303645;text-decoration:none;opacity:.9}
.nav__links a:hover{opacity:1}
.nav__menu{display:none;background:none;border:none;gap:4px}
.nav__menu span{display:block;width:24px;height:2px;background:#333;margin:4px 0;border-radius:2px}
.nav__drawer{display:none;flex-direction:column;gap:14px;padding:14px 24px;border-bottom:1px solid var(--border);background:#fff}
.nav__drawer a{color:#303645;text-decoration:none;opacity:.9}
.nav__drawer a:hover{opacity:1}
.fas{font-size: 24px}

@media (max-width:560px){
  .nav__links{display:none}
  .nav__menu{display:flex;flex-direction:column;margin-right:10px}
  .nav__drawer.show{display:flex}
}

/* HERO */
.hero{
  background:linear-gradient(135deg,var(--periwinkle) 0%,var(--periwinkle-2) 60%,var(--periwinkle-3) 100%);
  color:#fff;
  padding-left:32px;
  padding-right:32px;
}
.hero__inner{padding:84px 0}
.hero h1{font-size:44px;line-height:1.1;margin:0;font-weight:800}
@media (min-width:900px){.hero h1{font-size:64px}}
.hero p{margin:14px 0 0;max-width:720px;font-size:18px;opacity:.95}
.hero__ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:12px 18px;font-weight:700;text-decoration:none;cursor:pointer}
.btn--light{background:#fff;color:#111;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.btn--light:hover{transform:translateY(-1px)}
.btn--outline{color:#fff;border:1px solid #fff}
.btn--ghost{color:#111;border:1px solid rgba(0,0,0,.08);padding:8px 12px;border-radius:10px}
.btn--primary{background:var(--periwinkle);color:#fff}
.btn--primary:hover{filter:saturate(110%)}
.wfull{width:100%}

/* SECTIONS */
.section{padding:72px 0}
.section__title{font-size:28px;margin:0 0 10px}
.section--pricing{padding-bottom:120px}

/* GRID HELPERS */
.grid{display:grid;gap:18px}
.grid--features{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:700px){.grid--features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid--features{grid-template-columns:repeat(3,1fr)}}

.grid--pricing{grid-template-columns:1fr;gap:22px}
@media (min-width:900px){.grid--pricing{grid-template-columns:repeat(3,1fr)}}

/* CARDS */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:0 8px 26px rgba(0,0,0,.07);transform:translateY(-1px)}
.card__icon{
  color:var(--periwinkle);background:var(--panel);width:64px;height:64px;
  border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.card__title{margin:0 0 6px;font-size:18px;font-weight:700}
.card__desc{margin:0;color:var(--muted);font-size:14px}

/* PRICING */
.price{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
}
.price__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.price__head h3{margin:0;font-size:22px}
.pill{background:var(--panel);color:var(--periwinkle);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600}
.price__list{list-style:none;padding:0;margin:16px 0 22px;flex-grow: 1;}
.price__list li{display:flex;gap:10px;align-items:center;margin:8px 0}
.price__list li::before{
  content:\"\";width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--periwinkle);
  display:inline-block;box-shadow:inset 0 0 0 3px #fff;
}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:32px 0;background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__links{display:flex;gap:18px}
.footer__links a{text-decoration:none;color:#3b4353}