:root{
  --bg:#F3F7F6;--card:#FFFFFF;--ink:#12303A;--mute:#4A6168;--line:#D5E3E0;
  --brand:#1F6F6A;--onbrand:#FFFFFF;--soft:#DCEBE8;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E2227;--card:#15303A;--ink:#E7F1F0;--mute:#A9C0BE;--line:#27454C;
    --brand:#6CC1B8;--onbrand:#0E2227;--soft:#1B3A42;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E2227;--card:#15303A;--ink:#E7F1F0;--mute:#A9C0BE;--line:#27454C;
  --brand:#6CC1B8;--onbrand:#0E2227;--soft:#1B3A42;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}
main{max-width:560px;margin:0 auto;padding:28px 22px 40px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.5px;color:var(--brand)}
.pill{display:inline-block;margin-top:44px;padding:6px 14px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--ink)}
h1{margin:18px 0 0;font-size:clamp(34px,9vw,46px);line-height:1.1;letter-spacing:-1.2px;font-weight:800}
.lead{margin:18px 0 0;font-size:18px;color:var(--mute)}
.card{margin-top:20px;padding:26px 22px;background:var(--card);border:1px solid var(--line);border-radius:24px}
.card h2{margin:0;font-size:20px;letter-spacing:-.3px}
.card p{margin:8px 0 0;color:var(--mute);font-size:16px}
.btn{display:flex;align-items:center;justify-content:center;margin-top:18px;min-height:56px;padding:0 24px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:2px solid var(--brand)}
.btn.primary{background:var(--brand);color:var(--onbrand)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cards{margin-top:36px}
h3.sec{margin:48px 0 0;font-size:22px;letter-spacing:-.4px}
ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
li{display:flex;gap:16px;align-items:flex-start}
.n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800}
li b{display:block}
li span{color:var(--mute);font-size:15px}
.note{margin-top:44px;padding:20px 22px;background:var(--soft);border-radius:20px;font-size:15px}
.note p{margin:0}
.note p+p{margin-top:10px;color:var(--mute)}
footer{margin-top:36px;font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
footer a{color:var(--mute)}

.brand a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
article{margin-top:36px}
article h1{font-size:clamp(28px,7vw,36px);margin:0}
article h2{font-size:19px;margin:32px 0 0;letter-spacing:-.2px}
article p,article li{color:var(--ink);font-size:16px}
article p{margin:10px 0 0}
article ul{margin:10px 0 0;padding-left:22px}
.upd{color:var(--mute);font-size:14px;margin-top:8px}
article a{color:var(--brand)}
.back{display:inline-block;margin-top:28px;font-weight:700;color:var(--brand)}

:root{--orb1:#BFE8E2;--glass:rgba(255,255,255,.62);--glassb:rgba(255,255,255,.75);--b1:#8fd3c8;--b2:#bfe0f0;--b3:#f3d3bd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--orb1:#9ADAD2;--glass:rgba(21,48,58,.55);--glassb:rgba(255,255,255,.12);--b1:#1f6f6a;--b2:#1a4a63;--b3:#4a3a3a;}}
:root[data-theme="dark"]{--orb1:#9ADAD2;--glass:rgba(21,48,58,.55);--glassb:rgba(255,255,255,.12);--b1:#1f6f6a;--b2:#1a4a63;--b3:#4a3a3a;}
main{position:relative;z-index:1}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 14s ease-in-out infinite alternate}
.bg span:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-18vmax;background:var(--b1)}
.bg span:nth-child(2){width:50vmax;height:50vmax;right:-18vmax;top:20vh;background:var(--b2);animation-delay:-5s}
.bg span:nth-child(3){width:40vmax;height:40vmax;left:10vw;bottom:-20vmax;background:var(--b3);animation-delay:-9s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vmax,3vmax) scale(1.18)}}
.orb{position:relative;width:132px;height:132px;margin:40px 0 0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,var(--orb1) 28%,var(--brand) 80%);box-shadow:0 30px 60px -14px rgba(31,111,106,.55),inset 0 -14px 28px rgba(0,0,0,.18);animation:inhale 6s ease-in-out infinite}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:ring 6s ease-out infinite}
.orb::after{animation-delay:3s}
@keyframes inhale{0%,100%{transform:scale(.94)}50%{transform:scale(1.08)}}
@keyframes ring{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.3);opacity:0}}
.pill{margin-top:30px}
h1 .w{display:inline-block;white-space:nowrap}
h1 .k{color:var(--brand)}
.ch{display:inline-block;animation:blowin 1.1s cubic-bezier(.2,.7,.2,1) both,wave 5s ease-in-out infinite;animation-delay:calc(var(--i)*55ms),calc(1.4s + var(--i)*110ms)}
@keyframes blowin{from{opacity:0;transform:translate(-28px,6px) scale(.9);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.09em)}}
.card{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--glassb);box-shadow:0 24px 50px -24px rgba(18,48,58,.35);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.ch,.orb,.orb::before,.orb::after,.bg span{animation:none!important}.card{transition:none}}

.hero{text-align:center}
.hero .orb{margin-left:auto;margin-right:auto}
.hero .btn{max-width:360px;margin:26px auto 0}
.scene{margin-top:96px;text-align:center}
.big{margin:0;font-size:clamp(34px,10vw,60px);line-height:1.06;letter-spacing:-2px;font-weight:800}
.sub{margin:16px auto 0;max-width:440px;font-size:18px;color:var(--mute)}
.reveal{opacity:0;transform:translateY(32px);filter:blur(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.reveal.in{opacity:1;transform:none;filter:none}
.scene .ch{animation:none;opacity:0}
.scene.in .ch{opacity:1;animation:blowin 1.1s cubic-bezier(.2,.7,.2,1) both,wave 5s ease-in-out infinite;animation-delay:calc(var(--i)*55ms),calc(1.4s + var(--i)*110ms)}
.phone{width:min(100%,340px);margin:38px auto 0;padding:18px;border-radius:36px;text-align:left;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--glassb);box-shadow:0 40px 70px -30px rgba(18,48,58,.5);transform:perspective(1000px) rotateY(-10deg) rotateX(4deg);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-8px)}}
.ph-top{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#ffd9c2,#f0a58f)}
.msg{max-width:84%;margin-top:12px;padding:11px 15px;font-size:15px;opacity:0;transform:translateY(14px) scale(.96)}
.msg.me{margin-left:auto;background:var(--brand);color:var(--onbrand);border-radius:20px 20px 6px 20px}
.msg.psy{background:var(--soft);border-radius:20px 20px 20px 6px}
.scene.in .msg{animation:pop .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d)*1s)}
@keyframes pop{to{opacity:1;transform:none}}
.eg{margin:14px 0 0;font-size:13px;color:var(--mute)}
.stage{display:flex;justify-content:center;align-items:center;margin-top:40px;min-height:200px}
.person{position:relative;flex:none;width:64px;height:92px;opacity:0}
.person i{position:absolute;left:50%;display:block;background:linear-gradient(145deg,var(--orb1),var(--brand))}
.person .hd{top:0;width:40px;height:40px;margin-left:-20px;border-radius:50%}
.person .bd{bottom:0;width:64px;height:46px;margin-left:-32px;border-radius:32px 32px 10px 10px}
.person.psy i{background:linear-gradient(145deg,#ffd9c2,#f0a58f)}
.you{transform:translateX(-36px)}.psy.person{transform:translateX(36px)}
.scene.in .person{animation:meet 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes meet{to{opacity:1;transform:none}}
.bloom{position:relative;flex:none;width:180px;height:180px;perspective:600px}
.pt{position:absolute;left:50%;top:50%;width:38px;height:72px;margin:-72px 0 0 -19px;transform-origin:50% 100%;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(#ffe2d6,#ff9bb0);opacity:0;transform:rotate(var(--r)) scaleY(0)}
.pt:nth-child(even){background:linear-gradient(#ffd0dc,#f77f9c)}
.scene.in .pt{animation:petal 1.6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.3s + var(--k)*.09s)}
@keyframes petal{to{opacity:.88;transform:rotate(var(--r)) scaleY(1)}}
.hw{position:absolute;left:50%;top:50%;width:78px;height:70px;margin:-35px 0 0 -39px;opacity:0;transform:scale(0)}
.scene.in .hw{animation:grow 1s cubic-bezier(.2,1.4,.4,1) .9s forwards}
@keyframes grow{to{opacity:1;transform:scale(1)}}
.heart{width:100%;height:100%;filter:drop-shadow(0 12px 14px rgba(201,58,99,.45));animation:turn 6s ease-in-out infinite}
.heart svg{display:block}
@keyframes turn{0%,100%{transform:rotateY(-26deg) scale(1)}25%{transform:rotateY(0) scale(1.08)}50%{transform:rotateY(26deg) scale(1)}75%{transform:rotateY(0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}.phone,.heart{animation:none!important}.scene .ch,.msg,.person,.hw{opacity:1!important;animation:none!important}.msg,.person,.hw{transform:none!important}.pt{opacity:.88!important;animation:none!important;transform:rotate(var(--r))!important}}