:root{
  --plum:#2b2a55;
  --ink:#34335c;
  --soft:#6a6a92;
  --blue:#3d5afe;
  --blue-d:#2438c7;
  --mint:#5eead4;
  --mint-d:#2fb8a3;
  --peach:#fde7d9;
  --lilac:#dfe6ff;
  --line:#e3e6fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.8;font-size:17px;
  background:linear-gradient(180deg,var(--peach) 0,var(--lilac) 640px,#f6f8ff 100%) no-repeat;background-color:#f6f8ff;min-height:100vh}
h1,h2,h3{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;font-weight:400;color:var(--plum);line-height:1.18}
a{color:var(--blue-d)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--mint-d);outline-offset:3px}
img{max-width:100%;height:auto}

.bar{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--plum);font-weight:700}
.logo img{height:44px;width:auto;background:#fff;border-radius:10px;padding:3px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;background:rgba(255,255,255,.7);padding:6px;border-radius:999px}
.tabs a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:9px 16px;border-radius:999px}
.tabs a:hover{background:#fff}
.tabs a[aria-current="page"]{background:var(--plum);color:#fff}

/* hero */
.hero{max-width:1120px;margin:0 auto;padding:30px 24px 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 16px}
.hero p.lead{font-size:1.15rem;color:var(--soft);margin:0 0 28px;max-width:32em}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:1.15rem;padding:19px 30px;border-radius:16px;transition:transform .15s,box-shadow .15s}
.btn-a{background:var(--blue);color:#fff;box-shadow:0 7px 0 var(--blue-d)}
.btn-b{background:var(--mint);color:#07352d;box-shadow:0 7px 0 var(--mint-d)}
.btn:hover{transform:translateY(3px)}
.btn-a:hover{box-shadow:0 4px 0 var(--blue-d)}
.btn-b:hover{box-shadow:0 4px 0 var(--mint-d)}

.stack{position:relative;min-height:380px}
.stack img{position:absolute;border:8px solid #fff;border-radius:22px;box-shadow:0 16px 36px rgba(43,42,85,.22);display:block}
.stack .p1{width:78%;left:0;top:10px;transform:rotate(-4deg);z-index:1}
.stack .p2{width:58%;right:0;top:0;transform:rotate(4deg);z-index:2}
.stack .p3{width:66%;right:6%;bottom:0;transform:rotate(-2deg);z-index:3}
.single{position:relative}
.single img{display:block;width:100%;border:8px solid #fff;border-radius:24px;box-shadow:0 16px 36px rgba(43,42,85,.22);transform:rotate(2deg)}

/* cloud divider */
.cloudline{height:60px;background:radial-gradient(circle at 50% 100%,#f6f8ff 0 34px,transparent 35px) 0 100%/76px 60px repeat-x;margin-top:-20px}

/* sheet */
.sheet{max-width:880px;margin:-6px auto 0;background:#fff;border-radius:34px;padding:46px clamp(22px,5vw,60px) 30px;box-shadow:0 20px 50px rgba(43,42,85,.1)}
.sheet h2{font-size:1.85rem;margin:0 0 12px}
.sheet section{padding:0 0 34px;margin:0 0 34px;border-bottom:2px dotted var(--line)}
.sheet section:last-child{border:0;margin-bottom:0}
.sheet p{margin:0 0 16px}
.sheet ul,.sheet ol{margin:0 0 16px;padding-left:22px}
.sheet li{margin-bottom:8px}

.line{list-style:none;padding:0 0 0 34px;margin:0 0 16px;position:relative;counter-reset:l}
.line::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:3px;background:var(--lilac);border-radius:3px}
.line li{position:relative;margin:0 0 20px;counter-increment:l}
.line li::before{content:counter(l);position:absolute;left:-34px;top:2px;width:25px;height:25px;border-radius:50%;background:var(--blue);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
.line strong{display:block;color:var(--plum)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 16px}
.two div{background:var(--lilac);border-radius:22px;padding:22px}
.two h3{margin:0 0 8px;font-size:1.3rem}
.two ul{margin:0;padding-left:20px}

.go{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.go a{display:block;text-decoration:none;color:var(--ink);background:var(--peach);border-radius:20px;padding:20px}
.go a:hover{outline:2px solid var(--blue)}
.go strong{display:block;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:1.25rem;color:var(--plum)}

footer.foot{max-width:880px;margin:36px auto 0;padding:10px 24px 50px;color:var(--soft);font-size:.92rem;text-align:center}
footer.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:0;margin:0 0 12px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .stack{min-height:340px;max-width:460px;margin:0 auto;width:100%}
  .two,.go{grid-template-columns:1fr}
}
@media (max-width:520px){.btn{width:100%;text-align:center}.tabs{border-radius:20px}}