:root{--sky:#eef4ff;--sky2:#dfe9ff;--night:#2b3a67;--ink:#33415c;--soft:#6b7a99;--lav:#b9b3f5;--peach:#ffd9c7;--star:#ffd36e;--white:#fff;--r:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--sky);line-height:1.7;font-size:18px}
a{color:#5b54d6}a:hover{color:var(--night)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:10;background:rgba(238,244,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid #e3eafa}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;color:var(--night);text-decoration:none}
.logo svg{width:42px;color:#fff;filter:drop-shadow(0 2px 3px rgba(43,58,103,.15))}
nav a{margin-left:18px;text-decoration:none;color:var(--ink);font-weight:700;font-size:16px}
nav a.cta{background:var(--night);color:#fff;padding:8px 16px;border-radius:999px}
@media(max-width:640px){nav a:not(.cta){display:none}}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#2b3a67 0%,#5b6fb0 55%,#a9bdf0 100%);color:#fff;padding:90px 0 140px}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.15;margin:0 0 18px;font-weight:900;max-width:720px}
.hero p{font-size:20px;max-width:620px;opacity:.95;margin:0 0 28px}
.btn{display:inline-block;background:var(--star);color:var(--night);font-weight:900;padding:14px 26px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:none;margin-left:10px}
.hero .moon{position:absolute;right:8%;top:60px;width:110px;color:var(--star);filter:drop-shadow(0 0 30px rgba(255,211,110,.55))}
.star{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.8;animation:tw 3s infinite ease-in-out}
@keyframes tw{50%{opacity:.25}}
.cloud{position:absolute;color:#fff}
.drift{animation:drift 40s linear infinite}@keyframes drift{from{transform:translateX(-10vw)}to{transform:translateX(110vw)}}
.hero .bank{position:absolute;left:0;right:0;bottom:-2px;height:120px;color:var(--sky)}
.hero .bank svg{position:absolute;bottom:0}
section{padding:70px 0}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.25;color:var(--night);margin:0 0 14px;font-weight:900}
.lead{font-size:20px;color:var(--soft);max-width:720px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:30px}
.card{background:#fff;border-radius:var(--r);padding:26px;box-shadow:0 10px 30px rgba(43,58,103,.08);position:relative}
.card .ico{font-size:30px}
.card h3{margin:8px 0 6px;color:var(--night);font-size:20px}
.card p{margin:0;color:var(--soft);font-size:17px}
.quote{background:#fff;border-radius:var(--r);padding:30px;border-left:6px solid var(--lav);font-size:20px}
.about{display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:center;background:#fff;border-radius:28px;padding:34px;box-shadow:0 10px 30px rgba(43,58,103,.08)}
.about .avatar{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--sky2));display:grid;place-items:center;color:var(--lav)}
.about .avatar svg{width:90px}
@media(max-width:640px){.about{grid-template-columns:1fr;text-align:center}.about .avatar{margin:0 auto}}
ul.checks{list-style:none;padding:0;margin:14px 0 0}ul.checks li{padding-left:30px;position:relative;margin:6px 0}
ul.checks li:before{content:"☁";position:absolute;left:0;color:var(--lav)}
.posts a.card{text-decoration:none;color:inherit;transition:transform .15s}
.posts a.card:hover{transform:translateY(-4px)}
.tag{display:inline-block;background:var(--sky2);color:var(--night);font-weight:800;font-size:13px;padding:3px 10px;border-radius:999px}
.band{background:linear-gradient(135deg,#ffe9df,#ece9ff);border-radius:32px;padding:44px;text-align:center}
form.wl{display:grid;gap:12px;max-width:520px;margin:20px auto 0;text-align:left}
form.wl input,form.wl select,form.wl textarea{font:inherit;font-size:17px;padding:13px 16px;border-radius:14px;border:2px solid #dbe3f5;background:#fff;width:100%}
form.wl button{font:inherit;font-weight:900;border:0;cursor:pointer}
.small{font-size:14px;color:var(--soft)}
article.post{max-width:740px;margin:0 auto;background:#fff;border-radius:28px;padding:48px clamp(22px,5vw,60px);box-shadow:0 10px 30px rgba(43,58,103,.08)}
article.post h1{font-size:clamp(30px,4vw,42px);line-height:1.2;color:var(--night);margin:10px 0 16px}
article.post h2{font-size:26px;margin-top:38px}
article.post .intro{font-size:21px;color:var(--soft)}
article.post li{margin:6px 0}
.author{display:flex;gap:14px;align-items:center;margin:26px 0 0;padding-top:20px;border-top:2px dashed #e3eafa;font-size:16px;color:var(--soft)}
.author svg{width:46px;color:var(--lav)}
.pagehead{background:linear-gradient(180deg,#2b3a67,#6f83c6);color:#fff;padding:60px 0 90px;position:relative;overflow:hidden}
.pagehead h1{margin:0;font-size:clamp(30px,4vw,44px)}
.pagehead .bank{position:absolute;left:0;right:0;bottom:-2px;height:70px;color:var(--sky)}
.pagehead .bank svg{position:absolute;bottom:0}
footer{background:var(--night);color:#cfd8f3;padding:46px 0;margin-top:60px;font-size:15px}
footer a{color:#fff}
.note{background:#fff8e6;border-radius:16px;padding:16px 20px;font-size:16px}
.hero .wrap{z-index:2}.hero .star,.hero .cloud,.hero .moon{z-index:1;pointer-events:none}.hero .drift{top:auto!important;bottom:150px}.pagehead .wrap{position:relative;z-index:2}

.calc{text-align:left}
.calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.calc .row2{grid-template-columns:1fr}}
.calc label{display:block;font-weight:800;margin:0 0 14px;text-align:left}
.calc select,.calc input[type=time]{display:block;width:100%;margin-top:6px;padding:12px 14px;border:2px solid #dfe6fb;border-radius:14px;font:inherit;background:#fff;color:var(--ink)}
.chk{display:flex;gap:10px;align-items:center;font-weight:700;margin:6px 0}
.chk input{width:20px;height:20px}
.calc textarea{width:100%;border:2px solid #dfe6fb;border-radius:14px;padding:12px;font:inherit;font-size:16px;margin:6px 0 10px}
.tbl{width:100%;border-collapse:collapse;margin:14px 0;background:#fff;border-radius:16px;overflow:hidden;text-align:left}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid #eef1fb;vertical-align:top}.tbl th{background:var(--sky2);font-weight:800}
.tbl td span{color:var(--soft);font-size:15px}
.sched .tm{font-weight:800;color:var(--night);white-space:nowrap;width:64px}
.sched tr.nap td{background:#f2f0ff}
.pers{background:#eafaf1;border-radius:12px;padding:8px 12px;margin:10px 0 0;font-weight:700;font-size:16px}
.logbox{margin-top:22px;text-align:left}
.logbox .btn{margin:4px 8px 4px 0}
.ghost2{background:#fff!important;color:var(--night)!important;border:2px solid #dfe6fb}
.nextmsg{font-size:20px;margin:0 0 6px}
.todaylist{list-style:none;padding:0;margin:0 0 10px}.todaylist li{padding:4px 0;border-bottom:1px dashed #e3eafa}
.tipbox{background:#fff;border-radius:18px;padding:6px 18px;margin:12px 0;box-shadow:0 2px 0 #e3eafa}
.tipbox summary,.faq summary{cursor:pointer;font-weight:900;font-size:19px;padding:10px 0;color:var(--night)}
.tipbox ul{margin:0 0 12px;padding-left:20px}.tipbox li{margin:6px 0}
.faq{background:#fff;border-radius:16px;padding:4px 18px;margin:10px 0}
.faq summary{font-size:17px}
.tiplist li{margin:10px 0}
.replan{background:#fff;border-radius:14px;padding:2px 14px;margin:8px 0}.replan summary{cursor:pointer;font-weight:800;padding:8px 0}
.install{margin-top:26px;background:#fff7e8;border-radius:18px;padding:16px 18px;font-size:16px}
.install .btn{margin-top:10px}
.toolcta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero .wrap{z-index:2}.hero .star,.hero .cloud,.hero .moon{z-index:1;pointer-events:none}.hero .drift{top:auto!important;bottom:150px}.pagehead .wrap{position:relative;z-index:2}