:root{
    --ink:#18171d;
    --muted:#686775;
    --card:rgba(255,255,255,.78);
    --shadow:0 24px 70px rgba(53,35,78,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    color:var(--ink);
    font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
    background:
        radial-gradient(circle at 8% 8%,var(--a),transparent 34%),
        radial-gradient(circle at 93% 12%,var(--b),transparent 31%),
        radial-gradient(circle at 50% 100%,var(--c),transparent 42%),
        #faf8fc;
    min-height:100vh;
}

body:before,
body:after{
    content:"";
    position:fixed;
    width:330px;
    height:330px;
    border-radius:50%;
    filter:blur(55px);
    opacity:.32;
    pointer-events:none;
    z-index:-1;
}

body:before{
    background:var(--b);
    left:-120px;
    top:42%;
}

body:after{
    background:var(--a);
    right:-120px;
    top:62%;
}

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

.page-shell{
    width:min(1120px,calc(100% - 32px));
    margin:auto;
}

.topbar{
    padding:18px 0;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:13px 16px;
    border:1px solid rgba(255,255,255,.75);
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(18px);
    border-radius:22px;
    box-shadow:0 12px 45px rgba(40,25,60,.07);
}

.logo{
    font-size:26px;
    font-weight:950;
    letter-spacing:-1.8px;
}

.back{
    display:inline-flex;
    align-items:center;
    padding:10px 16px;
    border-radius:999px;
    background:#18171d;
    color:#fff;
    font-weight:850;
    font-size:14px;
}

.hero{
    padding:55px 0 36px;
}

.kicker{
    display:inline-flex;
    align-items:center;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.8);
    color:#696574;
    font-size:12px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

h1{
    max-width:900px;
    margin:18px 0;
    font-size:clamp(48px,8vw,90px);
    line-height:.92;
    letter-spacing:-.065em;
    font-weight:950;
}

.hero p{
    max-width:760px;
    margin:0;
    font-size:20px;
    line-height:1.65;
    color:var(--muted);
}

.content{
    display:grid;
    gap:20px;
    padding-bottom:70px;
}

.card{
    padding:28px;
    border-radius:28px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}

.card h2{
    margin:0 0 11px;
    font-size:29px;
    line-height:1.05;
    letter-spacing:-.035em;
}

.card h3{
    margin:25px 0 8px;
    font-size:18px;
}

.card p,
.card li{
    font-size:16px;
    line-height:1.75;
    color:#4f4e59;
}

.card p:last-child{margin-bottom:0}

.card ul{
    margin:10px 0 0;
    padding-left:22px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.feature{
    padding:25px;
    border-radius:25px;
    border:1px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.66);
    box-shadow:0 14px 38px rgba(60,40,80,.08);
}

.feature .num{
    font-size:12px;
    font-weight:950;
    opacity:.55;
    letter-spacing:.1em;
}

.feature h3{
    margin:12px 0 7px;
    font-size:23px;
}

.feature p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.highlight{
    padding:30px;
    border-radius:30px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.48)),
        linear-gradient(120deg,var(--a),var(--b));
    border:1px solid rgba(255,255,255,.9);
    box-shadow:var(--shadow);
}

.highlight strong{
    display:block;
    font-size:clamp(25px,4vw,42px);
    line-height:1.05;
    letter-spacing:-.045em;
}

.highlight span{
    display:block;
    margin-top:13px;
    color:#62606d;
    line-height:1.65;
}

.notice{
    border-left:5px solid var(--accent);
    padding:18px 20px;
    border-radius:17px;
    background:rgba(255,255,255,.64);
}

.notice p{margin:0}

.footer{
    padding:10px 0 45px;
}

.footer-inner{
    padding:28px;
    border-radius:28px;
    background:rgba(24,23,29,.94);
    color:#fff;
    box-shadow:0 25px 70px rgba(20,15,30,.18);
}

.footer-brand{
    font-size:24px;
    font-weight:950;
    letter-spacing:-1.5px;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:15px;
}

.footer-links a{
    color:rgba(255,255,255,.76);
    font-size:14px;
    font-weight:750;
}

.footer-note{
    margin-top:20px;
    color:rgba(255,255,255,.48);
    font-size:12px;
    line-height:1.6;
}

@media(max-width:760px){
    .page-shell{width:min(100% - 22px,1120px)}
    .hero{padding:38px 0 25px}
    .hero p{font-size:17px}
    .card{padding:22px}
    .feature-grid{grid-template-columns:1fr}
    .nav{border-radius:18px}
    .logo{font-size:24px}
    h1{font-size:clamp(45px,14vw,68px)}
}