/* AI Picked You Media v5: dark navy showcase system (from v4 tokens)
   Butter standard: soft inertia scroll, velocity skew, expo easing. */
:root{
  --navy:#071633; --deep:#050f24; --mid:#0a1f45; --blue:#0b3d91; --btn:#2f6df0; --sky:#4d8dff;
  --ink:#eaf1ff; --muted:rgba(234,241,255,.68); --faint:rgba(234,241,255,.44);
  --line:rgba(141,182,255,.18); --card:rgba(16,42,94,.55); --card2:rgba(10,31,69,.72);
  --pad:clamp(24px,6vw,96px); --radius:22px;
  --display:'Space Grotesk','Inter',Arial,sans-serif; --body:'Inter',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:linear-gradient(180deg,var(--deep),var(--navy) 30%,var(--deep));color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sky);color:#04122e}
a{color:var(--sky)}
img{max-width:100%;display:block}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1560px;margin:0 auto}
h1,h2,h3,.disp{font-family:var(--display);letter-spacing:-.02em;line-height:1.04}
.kicker{font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-bottom:18px}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:640px;line-height:1.6}
.muted{color:var(--muted)} .small{font-size:14.5px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:16px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .45s;will-change:transform}
.btn:hover{background:#4d8dff;box-shadow:0 14px 34px rgba(47,109,240,.35)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(141,182,255,.4)}
.btn.ghost:hover{border-color:var(--sky);background:rgba(77,141,255,.08)}
.btn.sm{padding:11px 20px;font-size:14.5px}
.btn[disabled]{opacity:.55;pointer-events:none}
/* header */
header.site{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px var(--pad);background:rgba(5,15,36,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--ink);line-height:1.1}
.brand b{font-family:var(--display);font-size:19px;letter-spacing:-.01em;display:block}
.brand b span{color:var(--sky)}
.brand i{font-style:normal;font-size:11.5px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
nav.main{display:flex;gap:22px;flex-wrap:wrap}
nav.main a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .3s}
nav.main a:hover,nav.main a[aria-current]{color:#fff}
.hact{display:flex;gap:10px;align-items:center}
@media (max-width:1080px){nav.main{display:none}}
/* progress */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--btn),var(--sky));transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
/* hero */
.hero{padding:170px var(--pad) 90px;position:relative;overflow:hidden;max-width:1560px;margin:0 auto}
.hero .glow{position:absolute;width:64vw;height:64vw;border-radius:50%;top:-24vw;right:-16vw;background:radial-gradient(circle at 35% 35%,rgba(77,141,255,.5),rgba(11,61,145,.12) 62%,transparent 72%);pointer-events:none}
.hero h1{font-size:clamp(54px,10.5vw,156px);text-transform:uppercase;position:relative;z-index:2}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row>span{display:inline-block;will-change:transform}
.hero h1 .blue{color:var(--sky)}
.hero h1 .out{color:transparent;-webkit-text-stroke:2px rgba(234,241,255,.85)}
.hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:34px;position:relative;z-index:2}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
/* marquee */
.marquee{background:#04122e;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:15px 0;transform:rotate(-1.1deg) scale(1.02)}
.marquee .track{display:flex;width:max-content;will-change:transform}
.marquee span{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,29px);text-transform:uppercase;padding:0 16px;white-space:nowrap}
.marquee .o{color:transparent;-webkit-text-stroke:1px rgba(234,241,255,.6)}
/* sections */
section.blk{padding:105px var(--pad);max-width:1560px;margin:0 auto}
.shead{display:flex;align-items:baseline;gap:20px;margin-bottom:16px}
.shead .no{font-family:var(--display);font-size:14px;color:var(--sky);font-weight:700;letter-spacing:.2em}
.shead h2{font-size:clamp(36px,5.6vw,76px);text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
@media (max-width:940px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;will-change:transform}
.card h3{font-size:23px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15.5px}
.card ul{list-style:none;margin-top:14px}
.card li{padding:8px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.card li b{color:var(--ink)}
.tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--sky)}
.price{font-family:var(--display);font-size:clamp(38px,4.4vw,56px);font-weight:700;letter-spacing:-.02em;margin:10px 0 2px}
.price small{font-size:17px;color:var(--muted);font-family:var(--body);font-weight:600}
.hot{background:linear-gradient(160deg,#123f86,#0b3d91 55%,#0a2a63);border-color:rgba(141,182,255,.4)}
.reach{margin:16px 0}
.reach div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.reach .y{color:#7ee2a8;font-weight:700}.reach .n{color:var(--faint)}
details.more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
details.more summary{cursor:pointer;font-weight:700;color:var(--sky);font-size:15px}
details.more ul{margin-top:8px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-top:2px solid rgba(234,241,255,.85);padding-top:16px}
.stat .n{font-family:var(--display);font-size:clamp(40px,5.2vw,72px);font-weight:700;line-height:1}
.stat .l{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.5}
/* steps */
.step{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--line)}
.step .num{font-family:var(--display);font-size:clamp(38px,4.6vw,64px);color:transparent;-webkit-text-stroke:1.5px var(--sky);font-weight:700;line-height:1}
.step h3{font-size:24px;margin-bottom:6px}.step p{color:var(--muted);max-width:720px}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:8px}}
/* tables */
table.score,table.cmp{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
table.score th,table.score td,table.cmp th,table.cmp td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
table.score th,table.cmp th{color:var(--ink);font-family:var(--display)}
table.cmp td:first-child{font-weight:700;color:var(--ink)}
.yes{color:#7ee2a8;font-weight:700}.no{color:var(--faint)}
/* work carousel */
.wk{position:relative}
.wk-viewport{overflow:hidden;border-radius:var(--radius)}
.wk-track{display:flex;gap:18px;will-change:transform;padding:4px}
.wk-slide{flex:0 0 min(78vw,520px);background:var(--card2);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink)}
.wk-slide .mask{overflow:hidden;height:300px}
.wk-slide img{width:100%;height:100%;object-fit:cover;object-position:top center;will-change:transform}
.wk-slide .cap{padding:16px 18px}
.wk-slide h3{font-size:19px}.wk-slide p{color:var(--muted);font-size:14px}
.wk-nav{display:flex;gap:10px;margin-top:18px;align-items:center}
.wk-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(141,182,255,.4);background:transparent;color:var(--ink);font-size:20px;cursor:pointer;transition:background .3s,transform .3s}
.wk-btn:hover{background:rgba(77,141,255,.15)}
.wk-dots{display:flex;gap:7px;margin-left:8px}
.wk-dots i{width:8px;height:8px;border-radius:50%;background:rgba(234,241,255,.25);cursor:pointer}
.wk-dots i.on{background:var(--sky)}
/* work grid page */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:36px}
.wcell{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card)}
.wcell .idx{font-family:var(--display);color:var(--sky);font-size:13px;font-weight:700}
.wcell h3{font-size:18px;margin:8px 0 4px}.wcell p{color:var(--muted);font-size:14px}
.wcell a{display:inline-block;margin-top:10px;font-weight:700;font-size:14px}
/* chat + demo */
.chatbox{background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:26px;max-width:760px}
.chatlog{display:flex;flex-direction:column;gap:12px;min-height:120px}
.msg{max-width:86%;padding:13px 17px;border-radius:18px;font-size:15.5px;line-height:1.55}
.msg.bot{background:rgba(77,141,255,.13);border:1px solid rgba(141,182,255,.25);align-self:flex-start;border-bottom-left-radius:6px}
.msg.user{background:var(--btn);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.msg ul{margin:8px 0 0 18px}
.typing{align-self:flex-start;color:var(--faint);font-size:14px;font-style:italic;padding:6px 4px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.chipbtn{background:transparent;border:1px solid rgba(141,182,255,.5);color:var(--ink);border-radius:999px;padding:11px 18px;font-weight:600;font-size:14.5px;cursor:pointer;transition:background .3s,transform .3s}
.chipbtn:hover{background:rgba(77,141,255,.16)}
.chipbtn.sel{background:var(--btn);border-color:var(--btn);color:#fff}
.chat-score{font-family:var(--display);font-size:52px;font-weight:700;color:var(--sky);line-height:1.1}
.chat-input-row{display:flex;gap:10px;margin-top:16px}
.chat-input-row input{flex:1;background:rgba(5,15,36,.6);border:1px solid var(--line);border-radius:999px;color:var(--ink);padding:14px 20px;font-size:16px;font-family:var(--body)}
.chat-input-row input:focus{outline:2px solid var(--sky);outline-offset:1px}
/* forms */
form.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 28px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{width:100%;background:rgba(5,15,36,.55);border:1px solid var(--line);border-radius:13px;color:var(--ink);padding:14px 16px;font-size:16px;font-family:var(--body)}
.field input:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:1px}
fieldset.plans{border:0;margin:6px 0 18px}
fieldset.plans legend{font-weight:700;margin-bottom:10px}
.plan-option{display:block;border:1px solid var(--line);border-radius:15px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .3s,background .3s}
.plan-option:hover{border-color:var(--sky)}
.plan-option.sel{border-color:var(--sky);background:rgba(77,141,255,.12)}
.plan-option input{margin-right:10px}
.plan-option .pp{float:right;font-weight:700;color:var(--sky)}
.form-note{display:none;margin-top:14px;border:1px solid rgba(255,180,84,.5);background:rgba(255,180,84,.1);border-radius:13px;padding:13px 16px;font-size:15px}
.form-note.show{display:block}
.form-note.ok{border-color:rgba(126,226,168,.5);background:rgba(126,226,168,.1)}
/* check tool */
.qopts{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 20px}
.scorebig{font-family:var(--display);font-size:clamp(70px,10vw,120px);font-weight:700;line-height:1;color:var(--sky)}
.aic-point{border-top:1px solid var(--line);padding:16px 0}
.aic-point h4{font-size:18px;margin-bottom:5px}
.aic-point p{color:var(--muted);font-size:15px}
.aic-fixline{color:var(--ink)!important}
.locked{filter:blur(5px);pointer-events:none;user-select:none}
.progressline{height:8px;border-radius:99px;background:rgba(234,241,255,.12);overflow:hidden;margin:14px 0}
.progressline i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--btn),var(--sky))}
/* faq */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;color:var(--ink);text-align:left;font-family:var(--display);font-size:clamp(18px,2vw,22px);font-weight:600;padding:22px 34px 22px 0;cursor:pointer;position:relative}
.faq-q::after{content:"+";position:absolute;right:2px;top:18px;font-size:26px;color:var(--sky);transition:transform .4s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.22,1,.36,1)}
.faq-a p{color:var(--muted);padding:0 0 22px;max-width:760px}
/* article */
.article{max-width:780px}
.article p{color:var(--muted);margin-bottom:18px;font-size:17.5px}
.article h2{font-size:clamp(27px,3.6vw,40px);margin:38px 0 14px}
.article h1{font-size:clamp(38px,5.6vw,64px)}
.listlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:34px}
.listlinks a{display:block;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .35s,border-color .3s}
.listlinks a:hover{transform:translateY(-3px);border-color:var(--sky)}
.listlinks a .t{font-family:var(--display);font-weight:600;font-size:17px;display:block}
.listlinks a .d{color:var(--faint);font-size:13.5px;display:block;margin-top:5px}
.listlinks a .e{color:var(--muted);font-size:14px;display:block;margin-top:6px;line-height:1.5}
/* portal */
.dash{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
@media (max-width:860px){.dash{grid-template-columns:1fr}}
.pill{display:inline-block;padding:5px 13px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(126,226,168,.15);color:#7ee2a8;border:1px solid rgba(126,226,168,.4)}
.pill.mid{background:rgba(255,209,102,.13);color:#ffd166;border-color:rgba(255,209,102,.4)}
/* footer */
footer.site{border-top:1px solid var(--line);padding:80px var(--pad) 120px;max-width:1560px;margin:0 auto}
footer .mega{font-family:var(--display);font-size:clamp(40px,7.6vw,104px);font-weight:700;text-transform:uppercase;line-height:.98}
footer .mega .out{color:transparent;-webkit-text-stroke:1.5px rgba(234,241,255,.8)}
footer .cols{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
footer .cols a{color:var(--muted);text-decoration:none}footer .cols a:hover{color:#fff}
.mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:95;display:none;gap:8px;background:rgba(5,15,36,.85);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:8px}
.mbar a{flex:1;text-align:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;padding:11px 4px;border-radius:999px}
.mbar a.call{background:var(--btn);color:#fff}
@media (max-width:760px){.mbar{display:flex}footer.site{padding-bottom:110px}}
.reveal-init{will-change:transform,opacity}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}

/* Library integration layer: page wipe, Typed cursor, Splitting words, gallery */
#wipe{position:fixed;inset:0;background:var(--blue);z-index:200;display:none}
.typed-cursor{color:var(--sky);font-weight:400;animation:tblink 1s steps(1) infinite}
@keyframes tblink{50%{opacity:0}}
.statement{font-family:var(--display);font-size:clamp(26px,3.6vw,50px);line-height:1.28;font-weight:600;max-width:1050px}
.statement .word{transition:none}
.galgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.galgrid a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.galgrid img{width:100%;height:180px;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.galgrid a:hover img{transform:scale(1.05)}
@media (max-width:900px){.galgrid{grid-template-columns:repeat(2,1fr)}.galgrid img{height:130px}}
.pswp{--pswp-bg:#050f24}
.pin-steps .step{will-change:transform,opacity}
.qlabel{font-weight:600;margin:20px 0 2px;font-size:16px}
.wcell .wn{font-family:var(--display);color:var(--sky);font-size:13px;font-weight:700;letter-spacing:.15em;display:block;margin-bottom:8px}
.chatlog.tall{min-height:430px}
header.site .btn{white-space:nowrap}
@media (max-width:640px){
  .hact{gap:8px}
  .hact .btn{padding:9px 14px;font-size:13px;border-radius:99px}
  .brand{font-size:16.5px;line-height:1.15}
}