@font-face{font-family:Nunito;src:url(/fonts/nunito.woff) format('woff');font-weight:500 800;font-style:normal;font-display:swap}
:root{
  --navy:#16164F;--navy-2:#0E0E38;--orange:#FF5D14;--cta:#D63F00;--orange-ink:#A63A00;--orange-tint:#FFE3D6;--orange-soft:#FFF4EE;
  --bg:#EFF2F7;--card:#fff;--line:#E6E9F2;--muted:#5F6382;--soft:#C9CDE0;--ok:#1E7B4F;--err:#B42318;--tg:#1A6FAA;
  --r:16px;--shadow:0 1px 2px rgba(22,22,79,.05),0 6px 16px rgba(22,22,79,.05);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --vh:var(--tg-viewport-stable-height,100dvh);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.35 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--navy);
  background:radial-gradient(120% 45% at 100% 0,#FFE3D6 0,rgba(255,227,214,0) 70%),radial-gradient(90% 35% at 0 100%,#DCEFFA 0,rgba(220,239,250,0) 70%),var(--bg);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input,select,textarea{width:100%;border:0;outline:0;background:transparent;font:600 16px Nunito,system-ui,sans-serif;color:var(--navy);padding:2px 0}
textarea{resize:none}
input::placeholder,textarea::placeholder{color:#8A8FA8}
.hidden{display:none!important}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.app{position:relative;max-width:560px;margin:0 auto;height:var(--vh);overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:fade .25s ease both}
.screen.with-nav{bottom:calc(64px + var(--safe-b))}
.center{align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 20px;display:flex;flex-direction:column;gap:16px}
.scroll.tight{gap:8px;padding-top:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(12px + var(--safe-t)) 16px 8px}
.top .title{flex:1;margin:0;font-size:18px;font-weight:800}
.top .title.big{font-size:26px}
.back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px 0 -10px -10px;flex:none}
.top-right{display:flex;align-items:center;gap:8px;min-width:0}
.greet{font-size:14px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font-size:19px;font-weight:800;box-shadow:0 2px 8px rgba(22,22,79,.08)}
.logo{height:40px;width:auto}
.logo-lg{height:46px;width:auto;align-self:flex-start}

.bar{padding:12px 16px calc(12px + var(--safe-b))}
.bar.white{background:#fff;border-top:1px solid var(--line)}
.bar.row{display:flex;gap:10px}.bar.row .btn{flex:1}
.bar.col{display:flex;flex-direction:column;gap:8px}

.btn{display:block;width:100%;text-align:center;background:var(--cta);color:#fff;font-weight:800;font-size:16px;padding:15px;border-radius:28px;box-shadow:0 6px 14px rgba(214,63,0,.28);transition:transform .12s,opacity .15s}
.btn:active,.chip:active,.tile:active,.step:active,.how-btn:active,.icon-btn:active,.slide:active{transform:scale(.96)}
.btn[disabled]{opacity:.65}
.btn-ghost{flex:none;padding:0 20px;min-height:52px;border-radius:28px;background:#fff;border:1.5px solid var(--line);font-weight:800}
.btn-text{font-weight:800;padding:8px;min-height:44px}
.btn-tg{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--tg);color:#fff;font-weight:800;font-size:15px;padding:13px;border-radius:14px;min-height:48px;transition:transform .12s}
.link,.link-btn{font-weight:800;color:var(--cta)}
.link-btn{margin-top:4px;font-size:13px;min-height:36px}

.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow);text-align:left}
.stack{display:flex;flex-direction:column;gap:10px;padding:14px}
.lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.field{display:block;background:var(--bg);border-radius:12px;padding:8px 12px;border:1.5px solid transparent;transition:border-color .2s}
.field.bad{border-color:var(--err);animation:shake .3s ease}
.err{margin:-2px 0 0;font-size:13px;font-weight:700;color:var(--err)}
.hint{margin:0;font-size:12px;color:var(--muted);line-height:1.4}
.or{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--muted)}
.or span{flex:1;height:1px;background:var(--line)}
.muted{color:var(--muted)}
.strong{margin:0;font-weight:700;font-size:14px}
.sub{margin:2px 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.h2{margin:0 0 10px;font-size:18px;font-weight:800}
.hero-title{margin:0;font-size:28px;font-weight:800;line-height:1.1}
.accent{color:var(--cta)}
.lead{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--muted)}
.row2{display:flex;gap:8px}.row2>*{flex:1;min-width:0}.row2.r21>*:first-child{flex:2}

.chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:8px 10px;font-size:14px;font-weight:700;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s,background-color .2s,border-color .2s,color .2s}
.chip.on{background:var(--orange-tint);border-color:var(--orange);color:var(--orange-ink)}
.seg{display:grid;gap:6px}.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}.seg4{grid-template-columns:repeat(4,minmax(0,1fr))}.seg5{grid-template-columns:repeat(5,minmax(0,1fr))}
.seg4 .chip{font-size:13px;padding:8px 4px}
.hscroll{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding-bottom:2px;scrollbar-width:none}
.hscroll .chip{white-space:nowrap;min-height:34px;padding:6px 12px;font-size:13px}

.collage{position:relative;height:150px}
.collage img{position:absolute;width:150px;height:96px;object-fit:cover;border-radius:16px;border:3px solid #fff;box-shadow:0 10px 24px rgba(22,22,79,.18)}
.collage .c1{left:0;top:18px;rotate:-5deg}.collage .c2{left:calc(50% - 75px);top:0;rotate:3deg;z-index:1}.collage .c3{right:0;top:40px;rotate:6deg;width:140px;height:92px}

.slider{overflow:hidden;border-radius:22px;touch-action:pan-y}
.track{display:flex;gap:12px;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.slide{flex:0 0 86%;height:200px;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px rgba(22,22,79,.16);text-align:left;transition:transform .12s}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 4s ease-out;user-select:none;-webkit-user-drag:none}
.slide.active img{transform:scale(1.08)}
.slide .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,79,0) 40%,rgba(22,22,79,.78))}
.slide .cap{position:absolute;left:16px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;color:#fff}
.slide .name{display:block;font-size:24px;font-weight:800;line-height:1.1}
.slide .tag{display:block;margin-top:2px;font-size:13px;font-weight:700}
.badge{display:inline-block;padding:5px 11px;border-radius:12px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--cta);color:#fff;transition:background-color .2s,color .2s}
.slide.picked .badge{background:#fff;color:var(--navy)}
.dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.dots button{width:8px;height:8px;border-radius:4px;background:var(--soft);transition:width .3s,background-color .3s;position:relative}
.dots button::after{content:"";position:absolute;inset:-10px -4px}
.dots button.on{width:22px;background:var(--orange)}
.dest-pill{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--muted);text-align:center}

.how-btn{width:100%;background:var(--navy);color:#fff;border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left;position:relative;overflow:hidden;min-height:72px;transition:transform .12s}
.how-btn::before{content:"";position:absolute;right:-34px;top:-40px;width:96px;height:96px;border-radius:50%;border:12px solid var(--orange);opacity:.2}
.how-q{flex:0 0 42px;height:42px;border-radius:13px;background:var(--orange);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.how-txt{flex:1;min-width:0}.how-txt b{display:block;font-size:17px}.how-txt small{display:block;font-size:13px;font-weight:700;color:var(--soft)}
.how-btn .arrow{color:#FFB37A}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;background:#fff;border:1.5px solid var(--line);border-radius:18px;text-align:left;min-height:100px;box-shadow:var(--shadow);transition:transform .12s,background-color .2s,border-color .2s}
.tile.on{background:var(--orange-soft);border-color:var(--orange)}
.tile .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.tile .t{font-size:14px;font-weight:800;line-height:1.2}
.tile .chk{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--cta);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.tile.on .chk{opacity:1;transform:none}
.tile .chk .ico{width:14px;height:14px;stroke-width:3}
.ic.o{background:#FFE3D6;color:#A63A00}.ic.b{background:#DCEFFA;color:#14608F}.ic.g{background:#DDF1E6;color:#16603C}.ic.n{background:#E1E3F5;color:#16164F}.ic.y{background:#FFF1C7;color:#7A5A00}
.field-card textarea{min-height:66px}

.how-body{flex:1;padding:6px 16px 0;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.how-slider{border-radius:24px;padding-bottom:6px}
.how-card{flex:0 0 100%;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(22,22,79,.05),0 10px 24px rgba(22,22,79,.07)}
.how-card .art{height:200px;display:flex;align-items:center;justify-content:center;background:#F7F8FC}
.how-card .art svg{width:220px;height:150px}
.how-card .txt{padding:18px 18px 22px}
.pill{display:inline-block;padding:5px 11px;border-radius:12px;font-size:12px;font-weight:800;background:var(--orange-tint);color:var(--orange-ink)}
.how-card h2{margin:12px 0 0;font-size:23px;font-weight:800;line-height:1.15}
.how-card p{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--muted);line-height:1.45}

.contact-card{background:var(--navy);color:#fff;border-radius:16px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cc-txt{min-width:0}.cc-txt small{display:block;font-size:12px;font-weight:700;color:var(--soft)}
.cc-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-edit{font-size:13px;font-weight:800;color:#FFB37A;min-height:44px;padding:0 4px;flex:none}
.stepper{display:flex;justify-content:space-between;align-items:center}
.step{width:36px;height:36px;border-radius:50%;background:#FFD7CC;color:var(--orange-ink);font-weight:800;font-size:18px;transition:transform .12s}
.step[disabled]{opacity:.4}
.ages-btn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px}

.center-col{align-items:center;padding-top:calc(44px + var(--safe-t))}
.done-ico{width:84px;height:84px}
.done-title{margin:0;font-size:26px;font-weight:800}
.center-text{text-align:center;max-width:300px}
.w100{width:100%}
.req{display:flex;flex-direction:column;gap:6px}
.req-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.req .dst{font-size:16px;font-weight:800;overflow-wrap:anywhere}
.req .mt{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.st{display:inline-block;padding:5px 11px;border-radius:12px;font-size:12px;font-weight:800;white-space:nowrap}
.st-new{background:#E1E3F5;color:var(--navy)}.st-in_work{background:var(--orange-tint);color:var(--orange-ink)}.st-confirmed{background:#DDF1E6;color:#16603C}.st-rejected{background:#F3E1E1;color:#8A1C1C}
.empty{text-align:center;color:var(--muted);font-weight:700;padding:40px 10px}

.nav{position:absolute;left:0;right:0;bottom:0;height:calc(64px + var(--safe-b));padding-bottom:var(--safe-b);background:#fff;border-top:1px solid var(--line);display:flex;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:800;color:var(--muted);transition:color .2s}
.nav button.on{color:var(--cta)}
.nav-ind{position:absolute;top:-1px;left:0;width:50%;display:flex;justify-content:center;transition:transform .35s cubic-bezier(.3,1.2,.4,1)}
.nav-ind::after{content:"";width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
.nav-ind.right{transform:translateX(100%)}

.backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(22,22,79,.45);opacity:0;pointer-events:none;transition:opacity .25s;cursor:default;z-index:20}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:#fff;border-radius:24px 24px 0 0;padding:10px 16px calc(16px + var(--safe-b));box-shadow:0 -8px 30px rgba(22,22,79,.18);transform:translateY(105%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;max-height:85%;overflow-y:auto}
.sheet.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--soft);margin:0 auto 14px}
.sheet-title{margin:0 0 4px;font-size:20px;font-weight:800}
.age-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.age-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:14px;padding:8px 12px}
.age-row .v{min-width:64px;text-align:center}
.age-row .ctl{display:flex;align-items:center;gap:12px}

.toast{position:absolute;left:16px;right:16px;top:calc(12px + var(--safe-t));z-index:30;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:12px 14px;border-radius:14px;box-shadow:0 10px 24px rgba(22,22,79,.25);transform:translateY(-140%);transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.toast.show{transform:none}
.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--soft);border-top-color:var(--cta);animation:spin 1s linear infinite}

.stagger>*{animation:up .45s cubic-bezier(.2,.8,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}.stagger>*:nth-child(n+6){animation-delay:.25s}
.float1{animation:fl 5s ease-in-out infinite alternate}.float2{animation:fl 6s ease-in-out -2s infinite alternate}.float3{animation:fl 5.5s ease-in-out -1s infinite alternate}
.pop{animation:pop .45s cubic-bezier(.3,1.4,.5,1) both}.draw{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .2s ease forwards}
@keyframes fl{from{translate:0 0}to{translate:0 -8px}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:480px){.collage .c2{left:calc(50% - 75px)}}
@media (max-width:350px){.hero-title{font-size:24px}.collage{height:130px}.collage img{width:120px;height:78px}.collage .c2{left:calc(50% - 60px)}.collage .c3{width:112px;height:74px}.seg4 .chip{font-size:12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}}
.onb-top{display:flex;align-items:center;gap:6px;padding-top:var(--safe-t)}
.onb-top .back{margin:0 0 0 -10px}
.scroll>*,.how-body>*{flex-shrink:0}
@media (max-width:350px){.greet{display:none}}
