@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700 800;font-display:swap}
:root{--ink:#1F2A44;--ink2:#4A5878;--verm:#EE4B2B;--verm-hi:#FF7B57;--bg:#DCEBF8;--bg2:#F4F9FD;--card:#fff;--line:rgba(31,42,68,.14);--serif:Fraunces,"Iowan Old Style",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,sans-serif;--facets:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'%3E%3Cpath d='M0 0L520 0 0 520Z' fill='%23fff' fill-opacity='.4'/%3E%3Cpath d='M900 0L900 640 330 0Z' fill='%231F2A44' fill-opacity='.04'/%3E%3Cpath d='M0 900L0 380 560 900Z' fill='%231F2A44' fill-opacity='.045'/%3E%3Cpath d='M0 520L520 0M330 0L900 640M0 380L560 900' stroke='%23fff' stroke-opacity='.6' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root{--ink:#F2EEE4;--ink2:#B3BCD2;--bg:#141C31;--bg2:#1B2540;--card:#232F50;--line:rgba(255,255,255,.14);--facets:none}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:500 17px/1.55 var(--sans);color:var(--ink);background:linear-gradient(180deg,var(--bg2),var(--bg)) fixed,var(--bg);overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-weight:700}.top a{text-decoration:none}.top .studio{border-bottom:2px solid var(--verm)}
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;padding:20px 0 70px}
.hero::before{content:"";position:absolute;inset:-80px -20px 0;background:var(--facets) 20% 0/900px no-repeat;opacity:.9;z-index:-1}
.wm{position:relative;display:inline-block;font:900 clamp(56px,13vw,112px)/1 var(--serif);letter-spacing:-.02em;transform:rotate(-2deg);margin:6px 0 4px}
.wm i{font-style:normal;display:block}.wm .a,.wm .b{position:absolute;left:0;top:0;color:#1F2A44;-webkit-text-stroke:.2em #1F2A44}.wm .a{transform:translateY(.07em);text-shadow:0 .1em 0 #1F2A44,0 .16em .22em rgba(31,42,68,.35)}
.wm .c{position:relative;color:transparent;background:linear-gradient(180deg,#FF9A78,#F2552F 46%,#DC3E20);-webkit-background-clip:text;background-clip:text}
.wm .d{position:absolute;left:0;top:0;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 38%);-webkit-background-clip:text;background-clip:text}
.pill{display:inline-block;font:800 15px var(--sans);letter-spacing:.3em;padding:9px 22px 9px 26px;border-radius:99px;background:#1F2A44;color:#FFFBF2;transform:rotate(-2deg);margin-left:6px}
@media (prefers-color-scheme:dark){.pill{background:#FFFBF2;color:#1F2A44}}
.lead{font-size:clamp(18px,2.4vw,22px);max-width:30em;margin:22px 0}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{display:inline-flex;flex-direction:column;padding:11px 22px;border-radius:18px;background:linear-gradient(#fff,#F0E9DA);color:#1F2A44;border:2.5px solid #1F2A44;box-shadow:0 4px 0 #1F2A44;font:800 18px/1.15 var(--sans)}.badge small{font:700 12px var(--sans);color:#4A5878;letter-spacing:.04em}
.stage{position:relative;height:640px}
.phone{position:relative;border-radius:34px;background:#FFFBF2;border:7px solid #FFFBF2;box-shadow:0 0 0 2.5px #1F2A44,0 26px 40px -18px rgba(31,42,68,.55);overflow:hidden;line-height:0}
.phone img{width:100%;height:auto;display:block}
.stage .phone{position:absolute;width:min(290px,46vw)}.stage .p1{left:4%;top:58px;transform:rotate(-5deg)}.stage .p2{right:0;top:0;transform:rotate(4deg)}
.stage .oru{position:absolute;left:-2%;bottom:-6px;width:min(190px,32vw);z-index:3;filter:drop-shadow(0 12px 10px rgba(31,42,68,.3))}
.oru svg{width:100%;height:auto;overflow:visible;display:block}.oru .o-happy,.oru .o-sleepy,.oru .o-extra{display:none}
.oru .o-bird{animation:bob 3.6s ease-in-out infinite;transform-origin:100px 196px}.oru .o-wl{transform-origin:56px 100px;animation:fl 3.6s ease-in-out infinite}.oru .o-wr{transform-origin:144px 100px;animation:fl 3.6s ease-in-out infinite reverse}.oru .o-eyes{transform-origin:100px 94px;animation:bl 4.6s infinite}
@keyframes bob{50%{transform:translateY(-6px)}}@keyframes fl{50%{transform:rotate(6deg)}}@keyframes bl{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
h2{font:900 clamp(32px,5vw,50px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 10px}
section{padding:46px 0}.sub{color:var(--ink2);max-width:40em;margin:0 0 26px;font-size:19px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--card);border-radius:30px;padding:22px 22px 26px;border:2.5px solid #1F2A44;box-shadow:0 6px 0 #1F2A44;text-align:center;position:relative}
.step .phone{max-width:230px;margin:0 auto 18px}
.step b{position:absolute;left:16px;top:16px;width:46px;height:46px;border-radius:50%;background:linear-gradient(var(--verm-hi),var(--verm));color:#fff;border:2.5px solid #1F2A44;display:grid;place-items:center;font:900 24px var(--serif)}
.step h3{font:900 26px var(--serif);margin:0 0 4px}.step p{margin:0;color:var(--ink2)}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:var(--card);border-radius:26px;padding:22px;border:2.5px solid #1F2A44;box-shadow:0 5px 0 #1F2A44}
.feat i{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;border:2.5px solid #1F2A44;margin-bottom:14px;font:900 26px var(--serif);color:#1F2A44;font-style:normal;box-shadow:inset 0 2px 0 rgba(255,255,255,.65)}
.feat h3{font:900 23px var(--serif);margin:0 0 6px}.feat p{margin:0;color:var(--ink2);font-size:16px}
.meet{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center;background:linear-gradient(135deg,#FF8A66,#EE4B2B);border-radius:44px;padding:44px;border:3px solid #1F2A44;box-shadow:0 8px 0 #1F2A44;color:#fff;position:relative;overflow:hidden}
.meet::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0 40%,transparent 40%);}
.meet>*{position:relative}.meet h2{color:#fff;text-shadow:0 3px 0 rgba(122,22,4,.4)}.meet p{font-size:19px;margin:0 0 12px}
.meet .oru{width:min(300px,70%);margin:0 auto;filter:drop-shadow(0 18px 14px rgba(110,20,4,.45))}
.phones{display:flex;gap:22px;align-items:flex-start;justify-content:center}.phones .phone{width:min(250px,30vw)}
.note{font-size:15px;color:var(--ink2);border-left:4px solid var(--verm);padding-left:14px;margin-top:16px}
footer{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding:30px 0 44px;font-size:15px;color:var(--ink2);border-top:2px dashed var(--line)}
footer a{color:var(--ink)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.stage{height:560px;max-width:520px;margin:0 auto;width:100%}.steps{grid-template-columns:1fr}.feats{grid-template-columns:1fr 1fr}.meet{grid-template-columns:1fr;padding:30px 24px;text-align:center}}
@media (max-width:520px){.feats{grid-template-columns:1fr}.stage{height:500px}.pill{font-size:12px;padding:8px 16px 8px 20px}.phones .phone{width:44vw}}
@media (prefers-reduced-motion:reduce){.oru *{animation:none!important}}