:root{color-scheme:light;--paper:#f8f5f0;--ink:#202c35;--muted:#717776;--pink:#ef80a5}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #bc3668;outline-offset:5px}
.page{max-width:1100px;margin:auto;padding:0 48px}
.header{height:106px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:27px;font-weight:850;letter-spacing:-1.4px;line-height:1}
.brand span{display:block;font-size:10px;letter-spacing:4.1px;font-weight:600;margin-top:7px}
.header-note{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.header-note i{width:6px;height:6px;background:#699e7b;border-radius:50%}
.hero{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;position:relative;padding:62px 0 48px;align-items:center}
.intro{grid-area:1/1;z-index:1}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.03em}
h1{font-size:clamp(52px,6vw,76px);line-height:1.04;letter-spacing:-4px;margin:22px 0;font-weight:800}
h1 em{font-style:normal;color:#bf4673}
.lead{font-size:17px;line-height:1.65;color:#66706f;margin:0}
.art{grid-area:1/2/3/3;align-self:stretch;position:relative;min-height:430px;isolation:isolate}
.halo{position:absolute;width:94%;aspect-ratio:1;left:3%;top:10%;background:#f4d9df;border-radius:50%}
.halo:after{content:"";position:absolute;inset:15px;border:1px solid #fff9;border-radius:50%}
.hero-cat{position:absolute;width:100%;height:108%;object-fit:contain;bottom:-2%;left:0;filter:drop-shadow(0 15px 13px #62323b12)}
.domain-tag{position:absolute;z-index:2;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 7px 22px #473e4210;font-size:13px;font-weight:650}
.tag-one{left:-7%;top:23%;transform:rotate(-9deg)}
.tag-one b{color:#bf4673;margin-left:16px}
.tag-two{right:-2%;bottom:7%;transform:rotate(7deg);background:#263b37;color:#fff;font-size:12px;letter-spacing:.02em}
.spark{position:absolute;right:4%;top:6%;font-size:48px;color:#c15379}
.action{grid-area:2/1;max-width:360px;margin-top:30px;z-index:3}
.cta{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--ink);color:#fff;border-radius:18px;min-height:66px;padding:0 25px;font-size:17px;font-weight:650;transition:background .18s,transform .18s}
.cta:hover{background:#b74672;transform:translateY(-2px)}
.cta>span:last-child{font-size:27px;font-weight:400}
.action-note{font-size:11px;color:var(--muted);text-align:center;margin:12px 0 24px}
.perks{display:flex;gap:20px;justify-content:center;font-size:11px;color:#65716d}
.perks span:before{content:"✓";color:#628a6e;margin-right:6px}
.extras{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 0}
.extra{border-radius:22px;padding:26px;position:relative;overflow:hidden;min-height:180px;isolation:isolate}
.extra>div{position:relative;z-index:2}
.cloud{background:#e8eee7}.api{background:#f0e4eb}
.card-label{font-size:9px;letter-spacing:1.2px;font-weight:650;color:#6d7573}
.extra h2{font-size:25px;line-height:1.15;letter-spacing:-.8px;margin:12px 0 9px}
.extra p{font-size:12px;color:#68716f;margin:0}
.extra img{position:absolute;width:46%;height:125%;object-fit:contain;right:0;bottom:-27%;z-index:1}
.api img{bottom:-34%;right:-1%;height:135%}
.api:hover{background:#ebd9e4}
footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#7b807c;padding:28px 0 30px}
footer a{font-size:12px;color:var(--ink)}
@media(max-width:760px){
.page{padding:0 24px;max-width:480px}
.header{height:84px}
.brand{font-size:24px}.brand span{font-size:9px;letter-spacing:3.6px}
.header-note{font-size:10px;gap:6px}
.hero{display:flex;flex-direction:column;padding:24px 0 0;text-align:center}
.eyebrow{font-size:10px}
h1{font-size:clamp(44px,12vw,58px);letter-spacing:-2.7px;margin:17px 0 15px}
.lead{font-size:14px;line-height:1.6}
.art{width:100%;height:285px;min-height:0;align-self:center;margin-top:14px;max-width:340px}
.halo{width:78%;left:11%;top:9%}
.hero-cat{height:110%;width:100%;bottom:-5%}
.tag-one{left:0;top:25%;font-size:11px;padding:10px 13px}
.tag-two{right:0;bottom:9%;font-size:10px;padding:10px 12px}
.spark{font-size:34px;right:10%;top:5%}
.action{width:100%;max-width:none;margin-top:8px}
.cta{min-height:61px;border-radius:16px;font-size:16px;padding:0 22px}
.action-note{margin:10px 0 20px;font-size:10px}
.perks{font-size:10px;gap:22px}
.extras{gap:10px;margin-top:29px}
.extra{padding:17px 13px;min-height:210px;border-radius:18px}
.card-label{font-size:7px;letter-spacing:.6px}
.extra h2{font-size:21px;margin:10px 0 7px;letter-spacing:-.6px}
.extra p{font-size:10px}
.extra img{height:105px;width:100px;right:-9px;bottom:-26px}
.api img{height:110px;width:110px;bottom:-35px;right:-6px}
footer{padding:24px 0 calc(22px + env(safe-area-inset-bottom));font-size:9px}
footer a{font-size:11px}
}
@media(max-width:350px){.page{padding:0 18px}.header-note{font-size:9px}.art{height:255px}.extra{padding:15px 11px}.extra h2{font-size:19px}.card-label{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}