@import url('qfy-serif.css');
@import url('qfy-sans.css');
:root{--bg:#f3f5ee;--paper:#fbfcf8;--ink:#0f2e29;--body:#3f5650;--mute:#6b7c76;--leaf:#8db84a;--leaf-deep:#4f7a2b;--leaf-soft:#e1ecd0;--gold:#a8842f;--line:rgba(15,46,41,.16);--serif:'Noto Serif SC','SimSun',serif;--sans:'Noto Sans SC','Microsoft YaHei',sans-serif;--pad:clamp(20px,5.5vw,84px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.85 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.35}
p{color:var(--body)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--paper);padding:10px 14px;border-radius:6px}
.skip:focus{top:10px}

.top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 var(--pad);background:rgba(243,245,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mark{font-family:var(--serif);font-size:21px;letter-spacing:.06em}
.enter{font-size:14px;padding:8px 18px;border:1px solid var(--ink);border-radius:999px;transition:background .2s,color .2s}
.enter:hover{background:var(--ink);color:var(--paper)}

.kicker{font-size:13px;letter-spacing:.16em;color:var(--leaf-deep);margin-bottom:16px;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:16px;letter-spacing:.04em;border:1px solid var(--ink);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#173f38}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:rgba(15,46,41,.07)}
.btn-light{background:var(--leaf);border-color:var(--leaf);color:var(--ink)}
.btn-light:hover{background:#a2cb5f}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* hero */
.hero{padding:clamp(40px,6vw,84px) var(--pad) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(40px,5.8vw,84px);line-height:1.12;letter-spacing:.01em}
.hero-lead{margin-top:28px;font-size:clamp(16px,1.6vw,20px);max-width:26em}
.hero-phone{display:flex;flex-direction:column;align-items:center;gap:14px}
.tag{font-size:12px;color:var(--mute);letter-spacing:.04em}

.phone{width:min(350px,100%);background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 40px 60px -40px rgba(15,46,41,.5);transform:rotate(1.5deg)}
.phone-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;border-bottom:1px solid var(--line)}
.phone-head b{font-family:var(--serif);font-weight:500;font-size:17px}
.phone-head span{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px}
.phone-head i{width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.bubble{max-width:90%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.7}
.bubble.bot{background:var(--leaf-soft);color:var(--ink);border-bottom-left-radius:4px}
.bubble.you{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.phone-input{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--mute)}
.phone-input em{font-style:normal;color:var(--leaf-deep)}

/* ruler */
.ruler{margin-top:clamp(44px,7vw,90px)}
.cells{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.c{font-style:normal;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:clamp(72px,9vw,120px);border-radius:6px;padding:8px clamp(6px,1vw,10px)}
.c b{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,52px);color:var(--ink);line-height:1}
.c small{font-size:clamp(10px,1.1vw,13px);color:#2f4a1a;line-height:1.3;letter-spacing:.02em}
.cells.small .c{padding:0}
.c-care{background:var(--leaf)}
.ruler-cap{margin-top:16px;font-size:15px}

/* blocks */
.block{padding:clamp(70px,10vw,130px) var(--pad)}
.block-head{max-width:820px;margin-bottom:clamp(30px,5vw,60px)}
.block-head h2{font-size:clamp(32px,4.8vw,64px);line-height:1.22;letter-spacing:.01em}
.sub{margin-top:16px;font-size:14px;color:var(--mute)}
.block-tint{background:var(--leaf-soft)}
.block-dark{background:var(--ink)}
.block-dark h2,.block-dark .side-title{color:#f4f7ec}
.block-dark .kicker{color:var(--leaf)}
.block-dark .sub{color:#9db3a9}

/* seven */
.seven{counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,6vw,100px)}
.seven li{padding:26px 0 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:0 16px;align-items:start}
.seven li:before{content:'';width:14px;height:14px;border-radius:3px;background:var(--leaf);margin-top:13px}
.seven h3{font-size:clamp(21px,2.2vw,28px)}
.seven p{grid-column:2;font-size:15px;margin-top:6px;max-width:30em}
.note{margin-top:26px;font-size:13px;color:var(--mute)}

/* versus */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.side{border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.side-title{font-family:var(--serif);font-size:18px;margin-bottom:4px}
.side-plain{background:#173b35;border:1px dashed rgba(244,247,236,.25)}
.side-plain .bubble.bot{background:#294c46;color:#c2d2ca}
.side-plain .bubble.you,.side-xq .bubble.you{background:#f4f7ec;color:var(--ink)}
.side-xq{background:#20493f;border:1px solid var(--leaf)}
.side-xq .bubble.bot{background:var(--leaf);color:var(--ink)}
.side-foot{margin-top:auto;padding-top:8px;font-size:13px;color:#9db3a9}
.side-xq .side-foot{color:#cfe3ac}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:36px;border-top:1px solid rgba(244,247,236,.2)}
.pillars li{padding:20px 16px 0 0;font-size:13px;color:#9db3a9;line-height:1.6}
.pillars b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;color:#f4f7ec;margin-bottom:4px}

/* day */
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.day article{padding:24px 0 30px;border-top:2px solid var(--ink)}
.day time{display:block;font-size:13px;letter-spacing:.14em;color:var(--leaf-deep);margin-bottom:12px;font-weight:500}
.day h3{font-size:22px;margin-bottom:10px}
.day p{font-size:15px}
.day .wide{grid-column:1/-1;border-top:1px solid var(--line);margin-top:10px}
.day .wide p{max-width:36em}

/* shots */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.frame{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 30px 40px -30px rgba(15,46,41,.45)}
.shots figcaption{margin-top:14px;font-size:14px;color:var(--body);line-height:1.7}
.shots figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:18px;color:var(--ink)}

/* privacy */
.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
.privacy-grid>*{min-width:0}
.privacy .block-head{margin-bottom:0}
.rules li{padding:22px 0;border-top:1px solid var(--line)}
.rules li:first-child{border-top:2px solid var(--ink)}
.rules h3{font-size:20px;margin-bottom:6px}
.rules p{font-size:15px}
.disclaimer{margin-top:clamp(30px,5vw,56px);padding:20px 24px;border-left:4px solid var(--leaf);background:var(--paper);font-size:14px}

/* close */
.close{background:var(--ink);color:#f4f7ec;text-align:center;padding:clamp(70px,10vw,130px) var(--pad)}
.cells.small{grid-template-columns:repeat(7,1fr);max-width:320px;margin:0 auto 36px;gap:4px}
.cells.small .c{height:18px}
.close h2{font-size:clamp(34px,5vw,64px);letter-spacing:.06em}
.close p{color:#9db3a9;margin:8px 0 32px;font-size:18px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:24px var(--pad);font-size:13px;color:#9db3a9;background:var(--ink);border-top:1px solid rgba(244,247,236,.15)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn{transition:none}}

@media (max-width:960px){
  .hero-grid,.privacy-grid,.versus{grid-template-columns:1fr}
  .phone{transform:none}
  .seven{grid-template-columns:1fr}
  .day{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .shots{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:560px){
  .day{grid-template-columns:1fr}
  .cells{gap:4px}
  .btn{flex:1 1 100%}
  .pillars{grid-template-columns:1fr}
}