@font-face{
  font-family:ui-sans;
  src:local("Inter"),local("SF Pro Display"),local("Segoe UI"),local("Helvetica Neue"),local("Arial");
}

:root{
  --bg0:#fff7fb;
  --bg1:#ffffff;
  --pink0:#f9d6e6;
  --pink1:#f3b7d2;
  --ink:#1f1b20;
  --muted:#6a5f67;
  --card:#ffffffcc;
  --stroke:#f0d7e3;
  --shadow:0 18px 55px rgba(31,27,32,.08);
  --shadow2:0 10px 26px rgba(31,27,32,.08);
  --radius:18px;
  --radius2:24px;
  --container:1120px;
  --pad:18px;
  --pad2:26px;
  --gap:18px;
  --gap2:26px;
  --title:clamp(2.05rem,4.7vw,3.1rem);
  --h2:clamp(1.35rem,3.5vw,1.95rem);
  --h3:1.05rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg0),var(--bg1));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}

.container{
  width:min(var(--container),100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow2);
  transform:translateY(-160%);
  transition:transform .2s ease;
  z-index:50;
}
.skip-link:focus{transform:translateY(0)}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg,rgba(255,247,251,.86),rgba(255,255,255,.62));
  border-bottom:1px solid rgba(240,215,227,.8);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-block:12px;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__mark{flex:0 0 auto}
.brand__text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand__name{font-weight:700;letter-spacing:.2px}
.brand__tag{font-size:.86rem;color:var(--muted)}

.topbar__nav{display:flex;align-items:center;gap:12px}
.navlink{
  font-size:.95rem;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  transition:background .2s ease,color .2s ease;
}
.navlink:focus-visible,.navlink:hover{
  background:rgba(249,214,230,.55);
  color:var(--ink);
}

.hero{padding-block:28px 22px}
.hero__inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(240,215,227,.9);
  background:rgba(255,255,255,.7);
  border-radius:999px;
  color:var(--muted);
  font-size:.88rem;
}

.hero__headline{margin:14px 0 10px;font-size:var(--title);letter-spacing:-.02em;line-height:1.06}
.hero__subtext{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:56ch}

.hero__cta{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:13px 18px;
  font-weight:650;
  letter-spacing:.2px;
  border:1px solid transparent;
  box-shadow:var(--shadow2);
}
.btn--primary{
  background:linear-gradient(135deg,var(--pink1),#f7c4db 50%,#ffd8ea);
  color:#231824;
  border-color:rgba(240,215,227,.9);
}
.btn--primary:focus-visible,.btn--primary:hover{
  filter:saturate(1.03) brightness(1.01);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0)}

.micro{margin:0;color:var(--muted);font-size:.9rem}

.hero__card{
  border-radius:var(--radius2);
  background:radial-gradient(900px 420px at 20% 10%,rgba(243,183,210,.55),transparent 55%),
             radial-gradient(900px 420px at 90% 30%,rgba(249,214,230,.7),transparent 55%),
             rgba(255,255,255,.7);
  border:1px solid rgba(240,215,227,.95);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.glass{padding:18px}

.highlights{display:grid;grid-template-columns:1fr;gap:12px}
.highlight{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(240,215,227,.85);
  border-radius:16px;
}
.highlight__icon{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(249,214,230,.55));
  border:1px solid rgba(240,215,227,.9);
  flex:0 0 auto;
}
.icon{width:20px;height:20px;fill:#6b3f56}
.highlight__title{font-weight:650}
.highlight__text{color:var(--muted);font-size:.95rem;margin-top:2px}

.mini-note{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(240,215,227,.85);
}
.mini-note__icon{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(249,214,230,.55);
  border:1px solid rgba(240,215,227,.9);
  flex:0 0 auto;
}
.mini-note__text{margin:2px 0 0;color:var(--muted);line-height:1.5}

.section{padding-block:30px}
.section--soft{padding-block:26px}
.section__head{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.section__title{margin:0;font-size:var(--h2);letter-spacing:-.02em}
.section__sub{margin:0;color:var(--muted);line-height:1.6;max-width:70ch}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
}

.card{
  border-radius:var(--radius2);
  background:rgba(255,255,255,.74);
  border:1px solid rgba(240,215,227,.92);
  box-shadow:var(--shadow2);
  overflow:hidden;
}

.card__head{display:flex;gap:12px;align-items:flex-start;padding:18px 18px 10px}
.card__icon{
  width:42px;height:42px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(249,214,230,.6));
  border:1px solid rgba(240,215,227,.92);
  flex:0 0 auto;
}
.card__title{margin:2px 0 2px;font-size:1.08rem;letter-spacing:-.01em}
.card__hint{margin:0;color:var(--muted);font-size:.94rem;line-height:1.45}

.price-list{list-style:none;margin:0;padding:0 18px 18px;display:flex;flex-direction:column;gap:10px}
.price-list li{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(240,215,227,.7);
}
.price-list li span:first-child{color:var(--ink);line-height:1.35}
.price{color:#5a2f45;font-weight:650;white-space:nowrap}

.split{padding:0 18px 18px;display:grid;grid-template-columns:1fr;gap:14px}
.subhead{font-weight:650;color:#5a2f45;margin:2px 0 10px}

.note{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:var(--radius2);
  background:radial-gradient(800px 360px at 15% 20%,rgba(243,183,210,.55),transparent 55%),
             rgba(255,255,255,.72);
  border:1px solid rgba(240,215,227,.92);
  box-shadow:var(--shadow2);
}
.note__icon{
  width:46px;height:46px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(240,215,227,.92);
  flex:0 0 auto;
}
.note__title{margin:0 0 10px;font-size:1.15rem;letter-spacing:-.01em}
.note__list{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}

.final-cta{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  padding:20px;
  border-radius:var(--radius2);
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(249,214,230,.55));
  border:1px solid rgba(240,215,227,.92);
  box-shadow:var(--shadow2);
}
.final-cta__title{margin:0;font-size:1.4rem;letter-spacing:-.02em;line-height:1.2}
.final-cta__sub{margin:8px 0 0;color:var(--muted);line-height:1.6}
.final-cta__actions{display:flex;gap:10px;flex-wrap:wrap}

.footer{
  padding-block:22px;
  border-top:1px solid rgba(240,215,227,.9);
  background:rgba(255,255,255,.6);
}
.footer__inner{display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:space-between}
.footer__brand{font-weight:700}
.footer__meta{color:var(--muted);font-size:.95rem;margin-top:4px}
.footer__right{display:flex;gap:12px;flex-wrap:wrap}
.footlink{
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(240,215,227,.7);
  background:rgba(255,255,255,.65);
}
.footlink:focus-visible,.footlink:hover{color:var(--ink)}

:focus-visible{outline:3px solid rgba(243,183,210,.9);outline-offset:2px}

@media (min-width:740px){
  :root{--pad:24px;--gap:20px}
  .hero{padding-block:44px 26px}
  .hero__inner{grid-template-columns:1.08fr .92fr;gap:22px}
  .glass{padding:20px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:repeat(2,1fr)}
  .final-cta{flex-direction:row;align-items:center}
  .footer__inner{flex-direction:row;align-items:center}
}

@media (min-width:1040px){
  .grid{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none}
  .btn--primary:focus-visible,.btn--primary:hover{transform:none}
}
