/* Resumio Hero — pixel fidelity to 2207:548 — HTML/CSS only */
@font-face{font-family:'Neue Montreal';src:local('Neue Montreal Regular'),local('NeueMontreal-Regular'),local('Neue Montreal'),url('../fonts/NeueMontreal-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:local('Neue Montreal Medium'),local('NeueMontreal-Medium'),url('../fonts/NeueMontreal-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Eighties Comeback';src:local('Eighties Comeback'),local('EightiesComeback-Regular'),local('Eighties Comeback'),url('../fonts/EightiesComeback-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Eighties Comeback';src:local('Eighties Comeback Medium'),local('EightiesComeback-Medium'),url('../fonts/EightiesComeback-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
:root{--main:#045cff;--gray:#a0a0a0;--gray2:#7d7d7d;--ink:#0a0a0a;--muted:#787575;--bg:#fff;--card:#ffffff;--soft:#fbfbfb;--line:#eee;--radius:10px;--max:1728px}
html{scroll-behavior:smooth}
body{font-family:'Neue Montreal',Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff;color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;-webkit-user-drag:none;user-drag:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}

/* BG */
.hero-wrap{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:transparent;overflow-x:hidden;overflow-y:visible}
/* entrance sequence */
@keyframes enter-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes enter-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes enter-card{from{opacity:0;transform:scale(.97) translateY(12px)}to{opacity:1;transform:none}}
@keyframes enter-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes enter-chat{from{opacity:0;transform:translate(-26px,14px) scale(.9)}to{opacity:1;transform:translate(0,0) scale(.9)}}
.nav{animation:enter-down .5s ease-out both}
.hero-pattern,.dot-blob{animation:enter-up .8s ease-out .35s both}
.pill{animation:enter-up .45s ease-out .2s both}
.h1{animation:enter-up .5s ease-out .3s both}
.sub{animation:enter-up .5s ease-out .4s both}
.cta-row{animation:enter-up .5s ease-out .5s both}
.hero-stats{animation:enter-up .5s ease-out .6s both}
.cv-card{animation:enter-card .6s cubic-bezier(.22,.8,.32,1) .35s both}
.top-avatar{animation:enter-pop .45s cubic-bezier(.34,1.56,.64,1) .95s both}
.google-conn{animation:enter-pop .4s ease-out 1.05s both}
.amazon-conn{animation:enter-pop .4s ease-out 1.15s both}
.meta-conn{animation:enter-pop .4s ease-out 1.25s both}
.score-card{animation:score-in .55s ease-out 1.05s both}
.chat{animation:enter-chat .55s cubic-bezier(.22,.8,.32,1) 1.2s both}
.trust{animation:enter-up .6s ease-out 1.45s both}
@media (prefers-reduced-motion: reduce){.nav,.hero-pattern,.dot-blob,.pill,.h1,.sub,.cta-row,.hero-stats,.cv-card,.top-avatar,.google-conn,.amazon-conn,.meta-conn,.chat,.trust{animation:none}}
.hero-bg-shade{position:absolute;inset:0;background:linear-gradient(180deg,#F9F9F9 0%,#F9F9F9 100%);pointer-events:none;z-index:0}
.hero-pattern{position:absolute;top:24px;right:0;width:1077px;height:861px;max-width:62vw;max-height:88vh;pointer-events:none;z-index:1}
.hero-pattern .dots{position:absolute;pointer-events:none}
.hero-pattern .dots svg{width:100%;height:100%;display:block;overflow:visible}
.hero-pattern .dots circle{animation:dot-blink 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;pointer-events:all;cursor:pointer;stroke:transparent;stroke-width:26px}
@keyframes dot-blink{0%,100%{opacity:var(--o,.1)}50%{opacity:min(calc(var(--o,.1)*2.5),.45)}}
.hero-pattern .dots .dot-ripple{transform-box:fill-box;transform-origin:center;animation:dot-ripple .9s ease-out forwards;pointer-events:none;stroke:#9a9a9a;stroke-width:3px}
@keyframes dot-ripple{0%{transform:scale(.15);opacity:.5}100%{transform:scale(1);opacity:0}}
@keyframes dot-hit{0%{opacity:var(--o,.1)}35%{opacity:min(calc(var(--o,.1)*6),.9)}100%{opacity:var(--o,.1)}}
@media (prefers-reduced-motion: reduce){.hero-pattern .dots circle{animation:none}}
.hero-pattern .dots-top{left:68px;top:122px;width:420px;height:242px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
.hero-pattern .dots-right{left:505px;top:172px;width:393px;height:334px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
.hero-pattern .dots-left{left:58px;top:380px;width:365px;height:360px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
.dot-blob{position:absolute;z-index:1;border-radius:250px;opacity:.19;background-size:14px 14px;mask-image:radial-gradient(ellipse at center,black 0%,rgba(0,0,0,.55) 40%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse at center,black 0%,rgba(0,0,0,.55) 40%,transparent 95%);pointer-events:none}
.dot-blob.a{width:472px;height:287px;left:55%;top:105px}
.dot-blob.b{width:442px;height:394px;left:66%;top:250px}
.dot-blob.c{width:411px;height:424px;left:62%;top:443px}
/* Zero-size origin layer inside .cv-stage that recreates the hero-wrap coordinate
   system (viewport-wide, page top) so the pattern + blobs keep their exact original
   viewport-based positions. Top constants = hero-right's page-top per breakpoint. */
.cv-stage-bg{position:absolute;top:-200px;left:calc(50% - 50vw - 350px);width:100vw;height:0;pointer-events:none}

/* NAV — 2207:807 exact */
.nav{position:sticky;top:0;z-index:50;width:100%;max-width:1328px;margin:0 auto;padding:20.03px 0;display:flex;align-items:center;justify-content:space-between;gap:32px;background:transparent}
.nav-left{display:flex;align-items:center;gap:70.893px}
.logo{display:inline-flex;align-items:center}
.logo img{display:block;width:144.782px;height:31.171px}
.nav-links{display:flex;gap:29.955px;align-items:center;color:#787575;font-family:'Neue Montreal',system-ui,sans-serif;font-weight:400;font-size:15.976px;letter-spacing:-.1598px;white-space:nowrap}
.nav-links a{color:#787575}
.nav-right{display:flex;align-items:center;gap:29.955px}
.signin{color:#6c6c6c;font-family:'Neue Montreal',system-ui,sans-serif;font-weight:400;font-size:17.973px;letter-spacing:-.3595px;white-space:nowrap}
.nav-right .btn-dark{width:170.743px;height:43.934px;padding:9.985px 29.955px;font-family:'Neue Montreal',system-ui,sans-serif;font-weight:500;font-size:15.95px;letter-spacing:-.319px;color:#6c6c6c;background:#eee;border-radius:10px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:500;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease,background .12s}
.btn:active{transform:translateY(1px)}
.btn-dark{background:#eee;color:#6c6c6c;padding:12px 20px;font-size:14px}
.btn-primary{background:var(--main);color:#fff;padding:12px 28px;font-size:16px;box-shadow:none}
.btn-primary:hover{background:#044ee0}
.btn-dark:hover{background:#e6e6e6}

/* HERO LAYOUT */
.hero{max-width:1328px;margin:0 auto;padding:116px 0 0;width:100%;display:grid;grid-template-columns:617px 628px;gap:60px;justify-content:space-between;align-items:start;position:relative;flex:1}
.hero-left{padding-top:42px;margin-top:69px}
.pill{display:inline-flex;align-items:center;justify-content:center;background:#f4f4f4;border:0;border-radius:10px;padding:7px 10px;font-family:'Neue Montreal',system-ui,sans-serif;font-size:15px;line-height:1;letter-spacing:-.15px;color:#3b3b3b;text-align:center;white-space:nowrap}
.h1{margin-top:14px;font-family:'Eighties Comeback','Spectral',Georgia,serif;font-weight:500;font-size:48px;line-height:1.18;letter-spacing:-.48px}
.h1 .muted{color:var(--muted)}
.h1 .ink{color:#000}
.sub{margin-top:12px;max-width:522px;color:var(--gray2);font-size:20px;line-height:30px;letter-spacing:-.2px}
.cta-row{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn svg{width:18px;height:18px}
.hero-stats{margin-top:134px;display:flex;align-items:center;justify-content:flex-start;gap:20px;min-height:42px}
.social-left{display:flex;align-items:center;gap:20px;min-width:225px;height:42px}
.avatars{display:flex;align-items:center;width:65px;height:30.79px}
.avatars img{width:30.79px;height:30.79px;border-radius:999px;object-fit:cover;flex-shrink:0;border:0}
.avatars img:not(:first-child){margin-left:-13.68px}
.avatars img:nth-child(2),.avatars img:nth-child(3){width:35.92px;height:35.92px;margin-top:-2.5px}
.social-text{width:150px;font-family:'Neue Montreal',system-ui,sans-serif;font-size:16px;line-height:21px;letter-spacing:-.32px;color:#727272}
.social-strong{font-weight:500;color:#000}
.social-divider{width:1px;height:21px;flex-shrink:0;align-self:center}
.reviews{display:flex;align-items:center;gap:10px;min-width:227px;height:42px}
.reviews .medal-star{width:30px;height:30px;flex-shrink:0}
.reviews-text{font-size:16px;letter-spacing:-.32px;white-space:nowrap;line-height:16px}
.reviews-strong{font-family:'Neue Montreal',system-ui,sans-serif;font-weight:500;color:#000}
.reviews-muted{font-family:'Neue Montreal',system-ui,sans-serif;font-weight:400;color:#727272}
.reviews-link{font-family:'Neue Montreal',system-ui,sans-serif;font-weight:400;color:var(--main)}
.reviews a.reviews-link{color:var(--main)}

/* RIGHT ILLUSTRATION */
.hero-right{position:relative;height:623px;z-index:2}
.cv-card{position:absolute;inset:0;background:#fff;border-radius:10px;padding:40px 40px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:none;overflow:hidden;box-sizing:border-box;z-index:2}
.cv-card{height:623px;width:628px;max-height:623px}

.cv-blur-top{display:none}
.cv-blur-bottom{position:absolute;left:0;right:0;bottom:0;height:268px;background:linear-gradient(to bottom,rgba(249,249,249,0) 0%,#f9f9f9 100%);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);pointer-events:none;z-index:2;border-radius:0 0 10px 10px}
.cv-head{display:flex;flex-direction:column;gap:12px}
.name-row{display:flex;align-items:baseline;gap:10px}
.name-wrap{position:relative;display:inline-block}
.name{font-family:'Eighties Comeback',Georgia,serif;font-weight:500;font-size:30px;line-height:1.2;margin:0}
.role{font-weight:500;font-size:14px;line-height:1.2;white-space:nowrap;margin:0}
.contact{display:flex;flex-wrap:wrap;gap:16px;font-size:10px}
.contact a{display:inline-flex;align-items:center;gap:4px;color:#000}
.contact img{width:12px;height:12px;flex-shrink:0;display:block}
.intro{background:var(--soft);border-radius:10px;padding:16px;font-family:'Spectral',Georgia,serif;font-weight:300;font-size:14px;line-height:1.35;letter-spacing:-.56px;color:#000}
.title{font-family:'Eighties Comeback',Georgia,serif;font-size:10px;letter-spacing:.04em}
.job{display:flex;flex-direction:column;gap:8px;min-width:0}
.job-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;width:515px;max-width:100%;min-width:0}
.job-head .jtitle{font-weight:500;font-size:16px;letter-spacing:-.3px;white-space:nowrap;flex-shrink:0}
.meta{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#000;white-space:nowrap}
.meta .chip{width:16px;height:16px;border-radius:999px;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.meta .chip img{width:8px;height:8px;display:block;object-fit:contain}
.meta > img{width:12px;height:12px;flex-shrink:0;display:block;object-fit:contain}
.meta .chip.purple{background:#5900ff}
.meta .chip.black{background:#000}
.meta .chip.orange{background:#ff7f00}
.job ul{padding-left:18px;color:#717171;font-size:12px;line-height:16px;list-style:disc;max-width:100%}
.divider{height:1px;min-height:1px;background:#eee;width:515px;max-width:100%;flex-shrink:0;display:block}

/* floating */
.top-avatar{position:absolute;width:127px;height:127px;right:80px;top:-80px;z-index:9}
.top-avatar .avatar-ring{position:absolute;inset:0;width:127px;height:127px;display:block;animation:ring-spin 8s linear infinite}
@keyframes ring-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.top-avatar .avatar-ring{animation:none}}
.top-avatar .avatar-photo{position:absolute;left:13px;top:13px;width:101px;height:101px;border-radius:999px;object-fit:cover;display:block}
.google-conn{position:absolute;width:54px;height:122px;right:-58px;top:-6px;z-index:1;pointer-events:none}
.google-conn .g-line{position:absolute;left:-9px;top:27px;width:45px;height:95px;display:block}
.google-conn .g-badge{position:absolute;left:17px;top:0;width:37px;height:37px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.google-conn .g-badge img{width:19px;height:19.43px;display:block}
.amazon-conn{position:absolute;width:52px;height:90.5px;right:-50px;top:344px;z-index:1;pointer-events:none}
.amazon-conn .a-line{position:absolute;left:0;top:0;width:32px;height:61px;display:block}
.amazon-conn .a-badge{position:absolute;left:15px;top:53.5px;width:37px;height:37px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.amazon-conn .a-badge img{width:20px;height:20px;display:block}
.meta-conn{position:absolute;width:59px;height:122px;left:-59px;top:188px;z-index:1;pointer-events:none}
.meta-conn .m-line{position:absolute;left:18px;top:0;width:45px;height:95px;display:block;transform:rotate(180deg);transform-origin:center}
.meta-conn .m-badge{position:absolute;left:0;top:85px;width:37px;height:37px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.meta-conn .m-badge img{width:24px;height:16px;display:block}
.line-pulse{stroke-dasharray:18 260;animation:line-pulse 2.7s linear infinite}
.g-line .line-pulse{animation-delay:0s}
.a-line .line-pulse{animation-delay:.9s}
.m-line .line-pulse{animation-delay:1.8s}
@keyframes line-pulse{from{stroke-dashoffset:278}to{stroke-dashoffset:0}}
.g-badge img,.a-badge img,.m-badge img{animation:badge-react 2.7s ease-in-out infinite}
.g-badge img{animation-delay:1.56s}
.a-badge img{animation-delay:2.46s}
.m-badge img{animation-delay:3.36s}
@keyframes badge-react{0%{transform:scale(1)}5%{transform:scale(1.18)}12%{transform:scale(1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.g-badge img,.a-badge img,.m-badge img{animation:none}}
.g-badge,.a-badge,.m-badge{pointer-events:auto;transition:transform .25s ease,box-shadow .25s ease}
.g-badge:hover,.a-badge:hover,.m-badge:hover{transform:scale(1.1);box-shadow:0 12px 28px rgba(0,0,0,.16)}
@media (prefers-reduced-motion: reduce){.line-pulse{animation:none}}
.name-wrap{position:relative;display:inline-flex;align-items:center;contain:style}
.name-wrap .select-box,
.name-wrap .select-handle,
.name-wrap .name-toolbar{will-change:opacity}
.name{cursor:pointer;user-select:none;border-radius:4px}
.name:focus-visible{outline:2px solid #045cff;outline-offset:2px}
.name.is-bold{-webkit-text-stroke:.9px currentColor}
.name.is-italic{font-style:italic !important;padding-right:5px}
.name.is-underline{text-decoration:underline;text-underline-offset:3px}
.name-wrap.is-editing .select-box,
.name-wrap.is-editing .select-handle{opacity:1;pointer-events:auto}
.name-wrap .select-box,
.name-wrap .select-handle,
.name-wrap .name-toolbar{opacity:0;pointer-events:none;transition:opacity .14s ease}
.name-wrap.is-editing .name-toolbar{opacity:1;pointer-events:auto}
.name-toolbar{position:absolute;left:0;top:calc(100% + 10px);display:flex;align-items:center;gap:4px;padding:5px 6px;background:#fff;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.12);z-index:4}
.name-toolbar .tb-btn{width:28px;height:28px;border-radius:6px;border:0;background:#fff;display:grid;place-items:center;cursor:pointer}
.name-toolbar .tb-btn:hover{background:#f2f2f2}
.name-toolbar .tb-btn.is-on{background:#eaeaea}
.name-toolbar .tb-btn img{width:18px;height:18px;display:block}
.select-box{inset:0 !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important}
.select-handle{width:7px;height:7px;background:#f9f9f9;border:1px solid #045cff;display:block}
.select-handle.tl{left:-3px !important;top:-3px !important}
.select-handle.tr{right:-3px !important;left:auto !important;top:-3px !important}
.select-handle.bl{left:-3px !important;bottom:-3px !important;top:auto !important}
.select-handle.br{right:-3px !important;bottom:-3px !important;left:auto !important;top:auto !important}
.select-box{position:absolute;left:96px;top:30px;width:161px;height:48px;border:1px solid #045cff;pointer-events:none}
.select-handle{position:absolute;width:7px;height:7px;background:#f9f9f9;border:1px solid #045cff}
.select-handle.tl{left:93px;top:27px}
.select-handle.tr{left:254px;top:27px}
.select-handle.bl{left:93px;top:74px}
.select-handle.br{left:254px;top:74px}

/* Resume Score */
.score-card{position:absolute;right:-88px;top:182px;width:220px;min-height:116px;background:#fff;border-radius:10px;padding:13px;box-shadow:0 16px 40px rgba(0,0,0,.08);box-sizing:border-box;z-index:4;overflow:visible}
.score-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.score-head b{font-size:14px}
.score-head small{font-size:10px;color:var(--gray2);display:inline-flex;align-items:center;gap:4px}
.score-head img{width:10px;height:10px}
.alert-ping{position:relative;display:inline-flex;width:10px;height:10px}
.alert-ping::before,.alert-ping::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #DD1C20;animation:alert-ping 1.6s ease-out infinite}
.alert-ping::after{animation-delay:.8s}
@keyframes alert-ping{0%{transform:scale(.5);opacity:.3}100%{transform:scale(2.6);opacity:0}}
.bars{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.bar{height:8px;border-radius:999px;background:#f1f1f1}
.bar.short{width:55%}
.score-foot{margin-top:10px;display:flex;align-items:end;justify-content:space-between}
.btn-optimize{background:var(--main);color:#fff;border-radius:5px;padding:5px 7px;font-size:10px;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.btn-optimize img{width:13px;height:13px}
.ring{position:relative;width:70px;height:68px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:70px;height:68px}
.ring b{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;font-size:18px}
@keyframes score-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.score-card,.bar::after,.alert-ping::before,.alert-ping::after,.ring-arc{animation:none}}
.bar{position:relative;overflow:hidden}
.bar::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.9) 50%,transparent 80%);animation:bar-shimmer 1.8s linear infinite}
@keyframes bar-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* ring draws once on load, synced with the 0-96% count-up (same 1.4s ease-out, 500ms start) */
@keyframes ring-draw-once{from{stroke-dashoffset:157}to{stroke-dashoffset:6}}
.score-card .ring-arc{animation:ring-draw-once 1.4s cubic-bezier(.33,1,.68,1) .5s both}

/* Chat */
.chat{position:absolute;left:-141px;bottom:95px;width:379px;height:186px;background:#fff;border-radius:10px;padding:16px 16px 16px 16px;box-shadow:0 16px 40px rgba(0,0,0,.08);z-index:5;overflow:hidden;transform:scale(.9);transform-origin:0 100%}
.chat-grid{display:grid}
.bubble-user{justify-self:end;display:flex;align-items:flex-start;gap:10px}
.bubble-user .bubble{background:rgba(4,92,255,.05);color:#045cff;border-radius:10px 10px 5px 10px;padding:10px;font-size:14px}
.bubble-user img{width:40px;height:40px;border-radius:999px;object-fit:cover;flex-shrink:0}
.bubble-ai{margin-top:14px;display:flex;align-items:flex-start;gap:10px}
.bubble-ai .ava{width:40px;height:40px;border-radius:999px;background:#f4f4f4;display:grid;place-items:center;flex-shrink:0}
.bubble-ai img{width:21px;height:21px}
.bubble-ai .bubble{background:#f4f4f4;border-radius:10px;padding:10px;font-size:14px;line-height:16px;color:#000}
.input{margin-top:9px;height:38px;background:#fafafa;border-radius:10px;padding:0 13px;box-sizing:border-box;display:flex;align-items:center;gap:7px;color:#696969;font-size:14px}
.input img{width:21px;height:21px}
.chat.chat-anim .bubble-user{opacity:0;transform:translateY(34px) scale(.94);transition:opacity .5s cubic-bezier(.22,1.35,.36,1),transform .5s cubic-bezier(.22,1.35,.36,1)}
.chat.chat-anim .bubble-user.show{opacity:1;transform:none}
.chat.chat-anim .bubble-ai{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.chat.chat-anim .bubble-ai.show{opacity:1;transform:none}
/* soft exit between loops so the restart is seamless */
.chat.chat-anim.exiting .bubble-user{opacity:0 !important;transform:translateY(14px) !important;transition:opacity .35s ease,transform .35s ease !important}
.chat.chat-anim.exiting .bubble-ai{opacity:0 !important;transform:translateY(8px) !important;transition:opacity .35s ease,transform .35s ease !important}
.chat.chat-anim .bubble-ai .bubble{min-height:52px;box-sizing:border-box}
.chat.chat-anim .ring b{opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.chat.chat-anim .ring b.show{opacity:1;transform:none}
.typing{display:inline-flex;gap:3px;align-items:center;height:16px}
.typing i{width:4px;height:4px;border-radius:50%;background:#a6a6a6;animation:typing-b .9s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing-b{0%,100%{opacity:.25}50%{opacity:1}}
.caret{display:inline-block;width:1.5px;height:11px;background:#777;margin-left:1px;vertical-align:-1px;animation:caret-b .7s steps(1) infinite}
@keyframes caret-b{50%{opacity:0}}
.input.typing-on .input-text{color:#2b2b2b}
@media (prefers-reduced-motion: reduce){.chat.chat-anim .bubble-user,.chat.chat-anim .bubble-ai{opacity:1 !important;transform:none !important;transition:none}}

/* Trust bar — 2213:200 */
.trust{max-width:1328px;width:100%;margin:auto auto 28px;display:flex;align-items:center;gap:45px;position:relative;z-index:5;padding:0;box-sizing:border-box}
.trust-label{width:172px;min-width:172px;max-width:172px;font-family:'Neue Montreal',system-ui,sans-serif;font-weight:400;color:#494949;font-size:16px;line-height:22px;letter-spacing:-.32px;white-space:normal;overflow-wrap:break-word;text-align:left}
.trust-divider{width:1px;height:48px;flex-shrink:0}
.trust-logos{display:block;width:1017.55px;height:36.74px;flex-shrink:0;max-width:100%;opacity:1}
.trust-marquee{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trust-track{display:flex;gap:60px;width:max-content;animation:trust-scroll 30s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
@keyframes trust-scroll{to{transform:translateX(calc(-50% - 30px))}}
@media (prefers-reduced-motion: reduce){.trust-track{animation:none}}

/* Responsive */
@media (max-width:1380px){
  .nav,.hero,.trust{padding-left:20px;padding-right:20px}
  .hero{grid-template-columns:1fr 560px;gap:40px}
  .hero-right{height:620px}
  .cv-stage-bg{left:auto;right:-20px}
}
/* Tablet — stack, keep CV readable */
@media (max-width:1180px){
  .nav{padding-left:24px;padding-right:24px}
  .hero{grid-template-columns:1fr;gap:16px;padding:32px 24px 0}
  .hero-left{margin-top:0;padding-top:8px}
  .hero-stats{margin-top:28px}
  .hero-right{height:auto;min-height:680px;max-width:628px;margin:24px auto 0;width:100%}
  /* Anchor pattern + blobs to the illustration, not the viewport */
  .cv-stage-bg{left:calc(50% - 50vw);right:auto;top:-526px}
  .hero-pattern{top:12px}
  .dot-blob.a{top:90px}
  .dot-blob.b{top:225px}
  .dot-blob.c{top:410px}
  .cv-card{position:relative;height:auto;min-height:560px;max-width:628px}
  .cv-blur-bottom{height:140px}
  .top-avatar{right:-10px;top:-28px}
  .google-conn{right:-18px;top:-6px}
  .amazon-conn{right:-18px;top:320px}
  .meta-conn{left:-18px;top:170px}
  .score-card{right:12px;top:200px}
  .chat{left:12px;bottom:24px}
  .logo img{width:145px;height:auto}
  .trust{flex-direction:row;align-items:center;gap:24px;padding:0 24px}
  .trust-label{width:150px;min-width:150px}
  .trust-logos{max-width:100%;height:auto;object-fit:contain}
}
@media (max-width:860px){
  .hero-right{max-width:100%;min-height:720px}
  .top-avatar{right:8px;top:-12px;width:90px;height:90px}
  .top-avatar .avatar-ring{width:90px;height:90px}
  .top-avatar .avatar-photo{width:70px;height:70px;left:10px;top:10px}
  .google-conn,.amazon-conn,.meta-conn{display:none}
  .score-card,.chat{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:100%;margin-top:14px}
  .logo img{width:145px;height:auto}
  .trust{flex-direction:column;align-items:flex-start;gap:26px;padding:0 24px}
  .trust-label{width:100%;min-width:0;max-width:none}
  .trust-divider{display:none}
  .trust-marquee{overflow:hidden;width:100%;flex:none;margin-top:4px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .trust-track{animation:trust-scroll-mobile 22s linear infinite;display:flex;gap:48px;width:max-content}
  @keyframes trust-scroll-mobile{to{transform:translateX(calc(-50% - 24px))}}
  .trust-track img[aria-hidden="true"]{display:block}
  .trust-logos{width:680px;max-width:none;height:auto;flex-shrink:0;object-fit:contain}
}
@media (max-width:640px){
  .logo img{width:130px;height:auto}
  .nav{padding:14px 16px;gap:12px}
  .nav-links{display:none}
  .hero{padding-left:16px;padding-right:16px}
  .h1{font-size:36px}
  .sub{font-size:16px;line-height:24px}
  .hero-right{height:auto;min-height:720px}
  .cv-stage-bg{top:-530px;left:auto;right:calc(659px - 100vw)}
  .cv-card{position:relative;height:auto;min-height:620px}
  .top-avatar{right:12px;top:-8px;width:90px;height:90px}
  .top-avatar img{width:70px;height:70px;left:10px;top:10px}
  .score-card{position:relative;right:auto;top:auto;margin-top:14px;width:100%}
  .chat{position:relative;left:auto;bottom:auto;width:100%;margin-top:14px}
  .select-box,.select-handle,.toolbar,.brand,.vline{display:none}
  .hero-stats{flex-direction:column;align-items:flex-start;gap:14px}
  .social-divider{display:none}
}
/* ===== PROPORTIONAL SHRINK — below 1180px the whole CV composition (card, avatar,
   badges, score, chat, dots) keeps its exact desktop layout and scales down as ONE
   unit instead of re-stacking. >1180px rendering is untouched. ===== */
@media (max-width:1180px){
  .cv-stage{position:relative;inset:auto;width:628px;height:623px;margin:84px auto 0}
  .hero-right{min-height:0}
  /* restore the desktop composition inside the stage (undo the stacked-mobile rules) */
  .cv-card{position:absolute;width:628px;height:623px;min-height:0}
  .cv-blur-bottom{height:268px}
  .top-avatar{right:80px;top:-80px;width:127px;height:127px}
  .top-avatar .avatar-ring{width:127px;height:127px}
  .top-avatar .avatar-photo{width:101px;height:101px;left:13px;top:13px}
  .google-conn,.amazon-conn,.meta-conn{display:block}
  .google-conn{right:-58px;top:-6px}
  .amazon-conn{right:-50px;top:344px}
  .meta-conn{left:-59px;top:188px}
  .score-card{position:absolute;left:auto;right:-88px;top:182px;bottom:auto;width:220px;max-width:none;transform:none;margin:0}
  .chat{position:absolute;left:-141px;right:auto;top:auto;bottom:95px;width:379px;max-width:none;transform:scale(.9);margin:0}
}
/* stepped fallbacks used only if the browser can't compute the smooth scale below */
@media (max-width:800px){.cv-stage{zoom:.72}}
@media (max-width:650px){.cv-stage{zoom:.55}}
@media (max-width:500px){.cv-stage{zoom:.42}}
/* smooth scale = available width / full composition span (chat 141 + card 628 + score 88) */
@media (max-width:1180px){.cv-stage{zoom:min(1,calc((100vw - 64px) / 857px))}}
/* dots glue to the card at the DESKTOP composition offsets for the whole ≤1180 range */
@media (max-width:1180px){
  .cv-stage-bg{left:-217px;right:auto;top:-200px;width:1077px;height:861px}
  .hero-pattern{width:1077px;max-width:none;height:861px;max-height:none;top:24px}
  .dot-blob.a{left:257px;top:105px}
  .dot-blob.b{left:423px;top:250px}
  .dot-blob.c{left:362px;top:443px}
}
/* ===== 1181–1380 (two-column kept): the 560px column can't hold the 628px card plus
   the 88px score overhang, so the composition scales down as one unit (zoom .79) and
   stays glued to the column instead of clipping off the right edge. ===== */
@media (max-width:1380px) and (min-width:1181px){
  .cv-stage{position:relative;inset:auto;width:628px;height:623px;margin:120px 0 0;zoom:.79}
  .hero-right{height:auto;min-height:0}
  .cv-stage-bg{left:-217px;right:auto;top:-200px;width:1077px;height:861px}
  .hero-pattern{width:1077px;max-width:none;height:861px;max-height:none;top:24px}
  .dot-blob.a{left:257px;top:105px}
  .dot-blob.b{left:423px;top:250px}
  .dot-blob.c{left:362px;top:443px}
}
/* ===== 1381–1503: desktop column placement clips the score card until ~1504px,
   so the same one-unit shrink applies, scaled to the room right of the text ===== */
@media (max-width:1503px) and (min-width:1381px){
  .cv-stage{position:relative;inset:auto;width:628px;height:623px;margin:84px 0 0;zoom:min(1,calc((50vw - 48px) / 716px))}
  .hero-right{height:auto;min-height:0}
  .cv-stage-bg{left:-217px;right:auto;top:-200px;width:1077px;height:861px}
  .hero-pattern{width:1077px;max-width:none;height:861px;max-height:none;top:24px}
  .dot-blob.a{left:257px;top:105px}
  .dot-blob.b{left:423px;top:250px}
  .dot-blob.c{left:362px;top:443px}
}