:root{
  --paper:#f3efe7;--paper2:#ebe2d6;--ink:#151515;--muted:#6d675f;
  --line:rgba(31,27,22,.14);--lime:#cfff00;--lime2:#b6e800;--card:rgba(255,255,255,.72);
  --shadow:0 24px 70px rgba(44,34,23,.12);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:
  radial-gradient(circle at 80% 5%,rgba(214,182,137,.24),transparent 32%),
  linear-gradient(180deg,#f6f2eb 0%,#efe8de 45%,#f5f1e9 100%);
  font-family:Inter,Pretendard,"Noto Sans KR",Arial,sans-serif;overflow-x:hidden;
}
button,a,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#111}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:7px;height:7px;background:#111}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(20,20,20,.38);transition:width .2s,height .2s,border-color .2s}
body.cursor-hover .cursor-ring{width:52px;height:52px;border-color:#6c8500}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:var(--lime)}
.topbar{
  width:min(1480px,calc(100% - 48px));height:72px;position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:200;padding:0 18px 0 24px;display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(255,255,255,.75);background:rgba(250,247,241,.72);backdrop-filter:blur(18px);
  border-radius:18px;box-shadow:0 10px 35px rgba(53,41,27,.08)
}
.logo{font-size:24px;font-weight:900;letter-spacing:-1.5px}.logo span{color:#92ad00}
.nav{display:flex;gap:34px}.nav a{font-size:12px;font-weight:800;position:relative}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:#111;transition:.35s}
.nav a:hover:after{right:0}
.nav-cta,.primary-btn{border:1px solid #222;background:var(--lime);color:#111;font-weight:900;border-radius:11px;box-shadow:0 8px 20px rgba(156,196,0,.22)}
.nav-cta{padding:12px 18px}.nav-cta span,.primary-btn span{display:inline-block;margin-left:8px;transition:transform .25s}
.nav-cta:hover span,.primary-btn:hover span{transform:translate(3px,-3px)}
main{width:min(1480px,calc(100% - 48px));margin:0 auto}
.hero{min-height:830px;padding-top:116px;display:grid;grid-template-columns:.82fr 1.18fr;gap:26px;align-items:center}
.hero-copy{padding:40px 16px 40px 18px;z-index:4}
.hero-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(207,255,0,.23);border:1px solid rgba(128,156,0,.14);border-radius:99px;padding:9px 13px;font-size:11px;font-weight:900}
.pulse-dot{width:7px;height:7px;background:#809800;border-radius:50%;box-shadow:0 0 0 0 rgba(128,152,0,.35);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(128,152,0,0)}100%{box-shadow:0 0 0 0 rgba(128,152,0,0)}}
.hero h1{font-size:clamp(54px,5.1vw,85px);line-height:.96;letter-spacing:-5.2px;margin:20px 0 24px}
.marker{position:relative;display:inline-block;z-index:1}.marker:after{content:"";position:absolute;z-index:-1;left:-5px;right:-7px;bottom:7px;height:16px;background:var(--lime);transform:skewX(-10deg) rotate(-1deg);border-radius:4px}
.hero-lead{font-size:17px;line-height:1.75;color:var(--muted);max-width:650px}.hero-lead b{color:#222;font-size:19px}
.hero-actions{display:flex;gap:11px;margin-top:28px}
.primary-btn,.secondary-btn{padding:15px 19px;border-radius:11px;font-size:13px;font-weight:900}
.secondary-btn{border:1px solid #262626;background:rgba(255,255,255,.62)}
.hero-mini{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:9px;font-weight:900;color:#777}
.hero-mini i{width:4px;height:4px;border-radius:50%;background:#888}
.hero-stage{position:relative;height:690px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);background:#d9cbb8;isolation:isolate}
.hero-image-wrap{position:absolute;inset:0;overflow:hidden}
.hero-image-wrap img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);transition:transform .15s linear}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,238,226,.14),transparent 35%,transparent 80%,rgba(61,43,24,.10)),linear-gradient(0deg,rgba(39,26,13,.22),transparent 30%)}
.float-card{position:absolute;z-index:6;background:rgba(252,249,244,.78);border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(45,32,19,.14);border-radius:17px;padding:15px;transition:transform .18s ease}
.card-kicker{font-size:8px;letter-spacing:.08em;font-weight:900;color:#787169}.project-card{left:24px;top:36px;width:225px}.project-title{font-size:17px;font-weight:900;margin:8px 0 13px}.progress-row{display:flex;justify-content:space-between;font-size:10px;font-weight:900}.progress-track{height:6px;margin:8px 0 12px;border-radius:99px;background:#e6e0d6;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--lime2);border-radius:99px}.avatar-row{display:flex;align-items:center}.mini-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #ddd;font-size:8px;font-weight:900;margin-right:-5px}.mini-avatar.ai{background:#1b1b1b;color:var(--lime)}.avatar-row b{margin-left:auto;font-size:9px}
.tools-card{left:70px;top:245px;width:250px}.tool-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:11px}.tool-icons span{display:grid;place-items:center;text-align:center;min-height:48px;padding:5px;border-radius:10px;background:rgba(255,255,255,.7);font-size:8px;font-weight:900}
.feedback-card{right:24px;top:48px;width:220px}.stars{font-size:18px;color:#f3ad18;letter-spacing:2px;margin:8px 0}.feedback-card p{font-size:10px;color:#4e4943;line-height:1.6;margin:0}
.result-card{right:25px;top:255px;width:230px}.result-line{display:flex;gap:10px;margin-top:10px;align-items:center}.result-thumb{width:62px;height:52px;border-radius:9px;background:linear-gradient(135deg,#1d1d1d,#66513f);position:relative;overflow:hidden}.result-thumb:after{content:"";position:absolute;width:45px;height:28px;left:9px;top:11px;border:2px solid var(--lime);border-radius:4px}.result-line b{display:block;font-size:11px}.result-line span{font-size:7px;color:#777}
.floating-status{position:absolute;right:22px;bottom:20px;z-index:7;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(14px);border-radius:99px;padding:9px 12px;font-size:8px;font-weight:900;display:flex;gap:7px;align-items:center}.status-orb{width:7px;height:7px;border-radius:50%;background:var(--lime2);box-shadow:0 0 0 5px rgba(184,234,0,.16)}
.signal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(14px);border-radius:20px;box-shadow:0 16px 45px rgba(55,42,29,.07);overflow:hidden}
.signal-item{padding:20px 24px;position:relative}.signal-item:not(:last-child):after{content:"";position:absolute;right:0;top:18px;bottom:18px;width:1px;background:var(--line)}.signal-item span{display:block;font-size:8px;font-weight:900;color:#777}.signal-item b{display:block;font-size:25px;letter-spacing:-1px;margin:4px 0}.signal-item small{color:#898279;font-size:9px}
.section{padding:115px 0 45px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}.section-head>div{max-width:900px}.section-kicker{font-size:10px;letter-spacing:.14em;color:#777;font-weight:900}.section h2,.final-cta h2{font-size:clamp(40px,4vw,64px);line-height:1.03;letter-spacing:-3.2px;margin:11px 0 0}.section h2 span{background:linear-gradient(transparent 68%,rgba(207,255,0,.75) 68%)}.section-head>p{max-width:390px;font-size:12px;color:#777;line-height:1.7;margin:0}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.step-card{position:relative;min-height:250px;padding:19px;border-radius:18px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 35px rgba(54,40,25,.06);transform-style:preserve-3d}.step-num{font-size:9px;background:var(--lime);border-radius:99px;padding:5px 7px;font-weight:900}.step-icon{font-size:36px;margin:31px 0 23px;font-weight:300}.step-card h3{font-size:18px;margin:0 0 9px}.step-card p{font-size:10px;line-height:1.6;color:#777;margin:0}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-card{min-height:430px;border-radius:24px;padding:28px;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 55px rgba(47,34,19,.08);display:flex;flex-direction:column;transform-style:preserve-3d}.service-card.dark{background:#171717;color:white}.service-card.lime-card{background:linear-gradient(135deg,#f8f8ef 0%,#eafdaf 100%);color:#171717}.service-top{display:flex;justify-content:space-between;font-size:9px;font-weight:900}.dark .service-top span:first-child{color:var(--lime)}.lime-card .service-top span:first-child{color:#769200}.service-index{opacity:.55}.service-card h3{font-size:37px;letter-spacing:-2px;margin:48px 0 14px}.service-card p{max-width:590px;font-size:12px;line-height:1.75;opacity:.72}.service-card ul{padding:0;margin:18px 0;list-style:none}.service-card li{font-size:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}.lime-card li{border-color:rgba(0,0,0,.10)}.week-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:26px}.week-row span{background:rgba(255,255,255,.48);border:1px solid rgba(20,20,20,.08);border-radius:10px;padding:12px 8px;text-align:center;font-size:9px;font-weight:900}.service-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.service-bottom strong{font-size:22px}.service-bottom small{font-size:9px;opacity:.6}.circle-arrow{width:48px;height:48px;border-radius:50%;border:0;background:var(--lime);font-size:19px;font-weight:900}.lime-card .circle-arrow{background:#161616;color:var(--lime)}
.archive-track{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.archive-card{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.78);border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(53,40,27,.06);transition:transform .35s ease,box-shadow .35s ease}.archive-card:hover{transform:translateY(-10px);box-shadow:0 28px 55px rgba(53,40,27,.12)}.archive-visual{height:240px;position:relative;overflow:hidden}.sample{position:absolute;left:14px;top:14px;background:#171717;color:#fff;border-radius:99px;padding:7px 9px;font-size:8px;font-weight:900;z-index:2}.visual-a{background:linear-gradient(135deg,#d8ccb9,#f4eee5)}.fake-window{position:absolute;left:17%;right:17%;top:28%;bottom:18%;background:white;border-radius:12px;box-shadow:0 20px 45px rgba(43,31,19,.2);padding:15px}.fake-bar{height:7px;width:40%;background:#171717;border-radius:3px}.fake-row{height:10px;background:#e9e4dc;border-radius:4px;margin-top:18px}.fake-row.short{width:65%}.visual-b{background:linear-gradient(135deg,#161616,#5d4c3d)}.paper-stack{position:absolute;left:25%;right:25%;top:24%;bottom:18%}.paper-stack i{position:absolute;inset:0;background:#f6f1e9;border-radius:8px;box-shadow:0 13px 35px rgba(0,0,0,.25);transform:rotate(-8deg)}.paper-stack i:nth-child(2){transform:rotate(2deg);left:7%;top:5%}.paper-stack i:nth-child(3){transform:rotate(9deg);left:13%;top:10%;background:var(--lime)}.visual-c{background:linear-gradient(145deg,#08111e,#1b3655)}.grid-ui{position:absolute;left:20%;right:20%;top:25%;bottom:18%;display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:perspective(600px) rotateX(18deg) rotateY(-14deg)}.grid-ui i{border:1px solid rgba(207,255,0,.55);border-radius:8px;background:rgba(207,255,0,.08);box-shadow:0 0 25px rgba(207,255,0,.08)}.archive-body{padding:18px}.archive-body>span{font-size:8px;font-weight:900;color:#777}.archive-body h3{font-size:20px;margin:8px 0}.archive-body p{font-size:10px;color:#777;line-height:1.6}
.final-cta{margin:85px 0 60px;padding:32px;border-radius:24px;background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(235,252,181,.88));border:1px solid rgba(184,215,72,.55);display:grid;grid-template-columns:auto 1fr auto;gap:25px;align-items:center;box-shadow:0 18px 50px rgba(63,50,32,.07)}.cta-character{display:flex}.mini-face{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:900;border:3px solid #f5f1e8;margin-right:-9px}.mini-face.cat{background:#d8b98b}.mini-face.capy{background:#7a5837;color:white}.cta-copy span{font-size:8px;font-weight:900;color:#7d776f}.cta-copy h2{font-size:34px;letter-spacing:-1.7px;margin:4px 0}.cta-copy p{font-size:10px;color:#716a61;margin:0}.primary-btn.big{padding:17px 24px}
footer{width:min(1480px,calc(100% - 48px));margin:0 auto 26px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:26px;font-size:10px;color:#777}footer .logo{font-size:17px;color:#171717}footer a{font-weight:900;color:#171717}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}
.quest-modal{width:min(720px,calc(100% - 28px));border:0;border-radius:26px;padding:0;background:rgba(250,247,241,.96);box-shadow:0 40px 120px rgba(16,13,9,.35);overflow:hidden}.quest-modal::backdrop{background:rgba(18,16,13,.58);backdrop-filter:blur(8px)}.quest-form{padding:34px;position:relative}.modal-close{position:absolute;right:18px;top:16px;border:0;background:#171717;color:white;width:38px;height:38px;border-radius:50%;font-size:22px}.modal-step h2{font-size:42px;letter-spacing:-2.2px;margin:10px 0}.modal-step>p{font-size:11px;color:#777;line-height:1.6}.quest-form label{display:block;font-size:9px;font-weight:900;margin-top:16px}.quest-form textarea,.quest-form input{width:100%;border:1px solid rgba(0,0,0,.15);background:white;border-radius:12px;padding:13px;margin-top:7px;outline:none}.quest-form textarea{min-height:130px;resize:vertical}.quest-form textarea:focus,.quest-form input:focus{border-color:#89a500;box-shadow:0 0 0 3px rgba(207,255,0,.22)}.quick-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.quick-tags button{border:1px solid #d7d0c6;background:#f1ede7;border-radius:99px;padding:8px 10px;font-size:8px;font-weight:900}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.submit-btn{width:100%;margin-top:20px;padding:15px;border:1px solid #171717;border-radius:11px;background:var(--lime);font-weight:900}.submit-state{font-size:8px;color:#7b756c;text-align:center;margin-top:9px}.toast{position:fixed;right:22px;bottom:22px;z-index:500;background:#171717;color:#fff;border-radius:15px;padding:15px 17px;box-shadow:0 20px 55px rgba(0,0,0,.25);transform:translateY(120px);opacity:0;transition:.45s}.toast.show{transform:none;opacity:1}.toast b{display:block;color:var(--lime);font-size:10px}.toast span{font-size:9px;color:#b9b9b9}
@media(max-width:1100px){.nav{display:none}.hero{grid-template-columns:1fr;padding-top:120px}.hero-stage{height:620px}.signal-strip{grid-template-columns:1fr 1fr}.signal-item:nth-child(2):after{display:none}.steps{grid-template-columns:repeat(2,1fr)}.service-grid,.archive-track{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.final-cta{grid-template-columns:auto 1fr}.final-cta .primary-btn{grid-column:1/-1}.cursor-dot,.cursor-ring{display:none}}
@media(max-width:680px){.topbar{width:calc(100% - 24px);top:8px;height:62px;padding-left:16px}.logo{font-size:19px}.nav-cta{padding:10px 12px;font-size:10px}main{width:calc(100% - 24px)}.hero{padding-top:88px;gap:14px}.hero-copy{padding:26px 4px}.hero h1{font-size:48px;letter-spacing:-3.3px}.hero-stage{height:500px}.float-card{transform:scale(.78)!important}.project-card{left:8px;top:18px}.feedback-card{right:-12px;top:22px}.tools-card{left:0;top:auto;bottom:20px}.result-card{display:none}.signal-strip{grid-template-columns:1fr 1fr}.signal-item{padding:16px}.signal-item b{font-size:20px}.steps{grid-template-columns:1fr}.service-card{min-height:390px;padding:22px}.service-card h3{font-size:31px}.archive-visual{height:190px}.section{padding-top:82px}.section h2{font-size:40px}.final-cta{grid-template-columns:1fr;text-align:left;padding:24px}.cta-character{display:none}.cta-copy h2{font-size:29px}.two-col{grid-template-columns:1fr}.quest-form{padding:28px 20px}.modal-step h2{font-size:34px}footer{width:calc(100% - 24px);flex-wrap:wrap;gap:12px}}


/* V2 depth & ambient */
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.19;
  background-image:radial-gradient(rgba(34,28,21,.14) .6px,transparent .6px);
  background-size:8px 8px;
}
.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.25;pointer-events:none;z-index:1}
.ambient-a{width:280px;height:280px;background:#dfff28;right:-80px;top:-70px}
.ambient-b{width:260px;height:260px;background:#f7c98f;left:20%;bottom:-120px}
.hero-gridlines{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 70%,transparent)}
.quest-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.quest-chips button{border:1px solid rgba(20,20,20,.11);background:rgba(255,255,255,.48);backdrop-filter:blur(10px);border-radius:99px;padding:8px 10px;font-size:8px;font-weight:900;color:#625d56;transition:.25s}
.quest-chips button:hover,.quest-chips button.active{background:#171717;color:#fff;transform:translateY(-2px)}
/* sticky story */
.story-section{padding:130px 0 20px}
.story-head{max-width:900px;margin-bottom:40px}
.story-head h2{font-size:clamp(44px,5vw,74px);line-height:1;letter-spacing:-4px;margin:10px 0}
.story-head h2 span{background:linear-gradient(transparent 66%,rgba(207,255,0,.8) 66%)}
.story-head p{font-size:12px;color:#777}
.story-shell{position:relative}
.story-sticky{position:sticky;top:112px;height:680px;z-index:5;display:grid;grid-template-columns:150px 1fr;gap:14px}
.story-rail{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.78);border-radius:22px;padding:22px 14px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.story-progress{position:absolute;left:34px;top:59px;width:2px;height:calc(100% - 118px);background:#ddd5c9}
.story-progress i{position:absolute;left:0;top:0;width:100%;height:0;background:#8fab00;transition:height .35s ease}
.story-node{position:relative;z-index:2;display:flex;align-items:center;gap:9px;min-height:116px;color:#9b948a;transition:.35s}
.story-node b{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#ede8df;border:5px solid #f7f3ed;font-size:9px;transition:.35s}
.story-node span{font-size:9px;font-weight:900}
.story-node.active{color:#171717}.story-node.active b{background:var(--lime);transform:scale(1.1)}
.story-canvas{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;min-width:0}
.story-office{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#ddcfbb,#bca88d);box-shadow:var(--shadow);min-width:0}
.office-top{height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.58);border-bottom:1px solid rgba(255,255,255,.55);backdrop-filter:blur(10px);font-size:8px;font-weight:900}
.office-top b{background:#171717;color:var(--lime);padding:7px 9px;border-radius:99px}
.story-workbench{position:absolute;left:8%;right:8%;top:24%;height:260px;border-radius:22px;background:linear-gradient(180deg,#caa878,#966e43);display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:end;padding:20px 24px;box-shadow:0 32px 70px rgba(67,45,22,.24)}
.story-person{height:155px;border-radius:90px 90px 30px 30px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;box-shadow:inset 0 0 30px rgba(255,255,255,.25)}
.cat-person{background:linear-gradient(#e0bd87,#c7965d);transform:rotate(2deg)}
.capy-person{background:linear-gradient(#84613e,#513a25);color:white;transform:rotate(-2deg)}
.story-laptop{height:170px;background:#252525;border-radius:10px 10px 6px 6px;box-shadow:0 24px 30px rgba(0,0,0,.22);padding:14px;transform:perspective(600px) rotateX(-4deg)}
.screen-bar{width:42%;height:7px;background:var(--lime);border-radius:4px;margin-bottom:20px}.screen-line{height:7px;background:#555;border-radius:4px;margin:9px 0}.w80{width:80%}.w55{width:55%}.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:20px}.screen-grid i{height:48px;border:1px solid #4a4a4a;border-radius:5px;background:#303030}
.story-output{position:absolute;left:8%;right:8%;bottom:35px;background:rgba(250,247,242,.88);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);border-radius:16px;padding:15px 17px;transition:.4s}
.story-output span{font-size:7px;font-weight:900;color:#777}.story-output strong{display:block;font-size:15px;margin:5px 0}.story-output small{font-size:8px;color:#777}
.story-side{position:relative;border-radius:24px;background:#171717;color:white;overflow:hidden}
.story-card{position:absolute;inset:0;padding:36px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(30px);transition:.45s;pointer-events:none}
.story-card.active{opacity:1;transform:none}.story-card>span{font-size:9px;color:var(--lime);font-weight:900}.story-card h3{font-size:38px;line-height:1.05;letter-spacing:-2px;margin:15px 0}.story-card p{font-size:11px;line-height:1.8;color:#aaa}
.story-spacers{margin-top:-680px;pointer-events:none}
.story-spacers>div{height:70vh}
/* simulator */
.simulator{display:grid;grid-template-columns:.88fr 1.12fr;gap:12px;background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.8);border-radius:25px;padding:12px;box-shadow:0 20px 60px rgba(58,44,27,.07)}
.sim-left{padding:24px}.sim-label{font-size:9px;font-weight:900;color:#777}.sim-options{display:grid;gap:7px;margin-top:18px}
.sim-options button{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:13px;padding:15px;font-size:11px;font-weight:850;color:#5f5a52;transition:.25s}
.sim-options button span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ebe5dc;font-size:8px}
.sim-options button:hover,.sim-options button.active{background:#171717;color:#fff;transform:translateX(7px)}
.sim-options button.active span{background:var(--lime);color:#111}
.sim-right{background:#171717;color:white;border-radius:20px;padding:30px;min-height:480px;position:relative;overflow:hidden}
.sim-right:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:var(--lime);right:-150px;top:-150px;filter:blur(40px);opacity:.12}
.sim-badge{display:inline-block;border:1px solid #414141;border-radius:99px;padding:8px 10px;font-size:8px;color:var(--lime);font-weight:900}
.sim-right h3{font-size:38px;letter-spacing:-2px;margin:24px 0 10px}.sim-right>p{font-size:11px;line-height:1.8;color:#a7a7a7;max-width:650px}
.sim-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:26px}.sim-flow div{border:1px solid #343434;border-radius:11px;padding:12px;background:#202020}.sim-flow b{font-size:8px;color:var(--lime)}.sim-flow span{display:block;margin-top:8px;font-size:9px}
.sim-result{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.sim-result>div{background:#222;border-radius:11px;padding:13px}.sim-result span{display:block;font-size:7px;color:#777;font-weight:900}.sim-result strong{display:block;font-size:11px;line-height:1.45;margin-top:7px}
.sim-cta{margin-top:22px}
/* motion accents */
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.project-card{animation:floatSoft 5s ease-in-out infinite}
.feedback-card{animation:floatSoft 6.2s ease-in-out infinite reverse}
.tools-card{animation:floatSoft 5.5s ease-in-out infinite .4s}
@media(max-width:1100px){
  .story-sticky{grid-template-columns:1fr;height:auto;position:relative;top:auto}.story-rail{display:none}.story-canvas{grid-template-columns:1fr}.story-office{height:560px}.story-side{height:300px}.story-spacers{display:none;margin:0}.story-card{position:relative;display:none}.story-card.active{display:flex}.simulator{grid-template-columns:1fr}
}
@media(max-width:680px){
  .story-office{height:480px}.story-workbench{left:4%;right:4%;height:210px;padding:14px}.story-person{height:120px}.story-laptop{height:135px}.story-output{left:4%;right:4%;bottom:24px}.sim-right{padding:22px}.sim-flow{grid-template-columns:1fr 1fr}.sim-result{grid-template-columns:1fr}.sim-right h3{font-size:31px}
}


/* =========================
   V3 POLISH / MOBILE / MOTION
   ========================= */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body{
  font-family:Inter,Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.page-loader{
  position:fixed;inset:0;z-index:10000;background:#f4f0e8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:opacity .65s var(--ease-out),visibility .65s;
}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-brand{font-size:clamp(36px,7vw,88px);font-weight:950;letter-spacing:-5px;transform:translateY(12px);opacity:0;animation:loaderBrand .75s var(--ease-out) forwards}
.loader-brand span{color:#96b000}
.loader-line{width:min(320px,70vw);height:2px;background:#d8d0c5;margin:26px 0 13px;overflow:hidden}
.loader-line i{display:block;height:100%;width:0;background:#171717;animation:loaderLine 1s .18s var(--ease-out) forwards}
.page-loader small{font-size:8px;letter-spacing:.18em;font-weight:900;color:#8d857a;opacity:0;animation:fadeUp .6s .35s forwards}
@keyframes loaderBrand{to{transform:none;opacity:1}}
@keyframes loaderLine{to{width:100%}}
@keyframes fadeUp{to{opacity:1;transform:none}}
.page-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--lime);transform:translateX(-102%);transition:transform .7s var(--ease-out)}
.page-wipe.run{animation:pageWipe 1.1s var(--ease-out)}
@keyframes pageWipe{0%{transform:translateX(-102%)}45%{transform:translateX(0)}100%{transform:translateX(102%)}}

.top-actions{display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid #222;background:transparent;border-radius:10px;position:relative}
.menu-toggle span{position:absolute;left:11px;right:11px;height:2px;background:#171717;transition:.25s}.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:25px}

.mobile-menu{
  position:fixed;z-index:800;inset:0;background:#171717;color:white;padding:20px;display:flex;flex-direction:column;
  transform:translateY(-102%);transition:transform .65s var(--ease-out);visibility:hidden
}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center}.mobile-menu-head .logo{color:white}.mobile-menu-head button{width:44px;height:44px;border:1px solid #555;background:transparent;color:white;border-radius:50%;font-size:24px}
.mobile-menu nav{display:grid;margin:auto 0;gap:0}.mobile-menu nav a{font-size:clamp(34px,10vw,58px);font-weight:900;letter-spacing:-2px;padding:11px 2px;border-bottom:1px solid #333;display:flex;justify-content:space-between}.mobile-menu nav span{font-size:9px;color:var(--lime);letter-spacing:0}
.mobile-menu-cta{width:100%;font-size:14px;margin-top:auto}

.nav a.active{color:#6f8500}.nav a.active:after{right:0;background:#849c00}

.mascot-bubble{
  position:absolute;z-index:8;display:flex;gap:8px;align-items:center;background:rgba(250,247,242,.84);
  border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(14px);border-radius:99px;padding:6px 11px 6px 6px;
  box-shadow:0 14px 35px rgba(48,34,20,.13);transition:transform .35s var(--ease-out),opacity .35s;
}
.mascot-bubble img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid white}
.mascot-bubble b{display:block;font-size:9px}.mascot-bubble span{display:block;font-size:7px;color:#777;margin-top:2px}
.mascot-chaeng{left:45%;bottom:28px;animation:mascotFloat 5.7s ease-in-out infinite}
.mascot-yoon{left:63%;bottom:82px;animation:mascotFloat 6.5s .4s ease-in-out infinite reverse}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.story-person{overflow:hidden;padding:0;background:none!important}
.story-person img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.cat-person{transform:rotate(2deg);background:#c99f70!important}
.capy-person{transform:rotate(-2deg);background:#6e4d31!important}

.mobile-bottom-cta{display:none}

@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none!important}
  .tilt{transform:none!important}
  .magnetic{transform:none!important}
  .archive-card:hover{transform:none}
  .parallax-card{transform:none!important}
}

@media(max-width:1100px){
  .menu-toggle{display:block}.desktop-cta{display:none}
  .topbar{padding-right:10px}
  .mascot-bubble{display:none}
  .hero-stage{min-height:620px}
}

@media(max-width:680px){
  body{padding-bottom:78px}
  .page-loader small{font-size:7px}
  .topbar{backdrop-filter:blur(24px)}
  .hero{display:block;padding-top:92px}
  .hero-copy{padding:34px 4px 20px}
  .hero-pill{font-size:9px}
  .hero h1{font-size:clamp(46px,13.5vw,64px);line-height:.94;letter-spacing:-3.7px}
  .hero-lead{font-size:14px;line-height:1.72}.hero-lead b{font-size:16px}
  .hero-actions .primary-btn,.hero-actions .secondary-btn{flex:1;text-align:center;padding:14px 10px}
  .quest-chips{overflow-x:auto;flex-wrap:nowrap;margin-right:-12px;padding-bottom:5px;scrollbar-width:none}.quest-chips::-webkit-scrollbar{display:none}.quest-chips button{white-space:nowrap}
  .hero-mini{overflow-x:auto;white-space:nowrap;padding-bottom:4px}
  .hero-stage{height:500px;min-height:500px;margin-top:6px;border-radius:22px}
  .project-card{width:190px;transform:scale(.88)!important;transform-origin:left top}
  .feedback-card{width:180px;right:-18px;transform:scale(.82)!important;transform-origin:right top}
  .tools-card{width:220px;transform:scale(.86)!important;transform-origin:left bottom}
  .floating-status{bottom:13px;right:13px}
  .signal-strip{margin-top:12px;border-radius:16px}.signal-item{min-height:92px}.signal-item span{font-size:7px}.signal-item small{font-size:7px}
  .story-section{padding-top:85px}.story-head h2{font-size:42px;letter-spacing:-2.8px}
  .story-office{height:445px;border-radius:19px}.office-top{height:48px;padding:0 12px}.story-workbench{top:22%;height:195px}.story-person{height:115px}.story-laptop{height:125px;padding:10px}.screen-grid i{height:31px}.story-output{padding:11px}.story-output strong{font-size:12px}
  .story-side{height:245px;border-radius:19px}.story-card{padding:25px}.story-card h3{font-size:31px}
  .section-head{margin-bottom:22px}.section-head>p{font-size:10px}.section h2{font-size:39px}
  .step-card{min-height:200px}.step-icon{margin:24px 0 17px}
  .service-card{border-radius:19px}.service-card h3{margin-top:36px}
  .week-row{grid-template-columns:1fr 1fr}
  .simulator{border-radius:19px;padding:7px}.sim-left{padding:14px 8px}.sim-right{border-radius:16px}
  .sim-options button{font-size:10px;padding:12px}
  .archive-track{gap:8px}.archive-card{border-radius:17px}
  .final-cta{margin-bottom:22px}
  footer{margin-bottom:0;padding-bottom:20px}
  .mobile-bottom-cta{
    display:flex;position:fixed;z-index:450;left:10px;right:10px;bottom:10px;background:#171717;color:white;
    border-radius:16px;padding:10px 10px 10px 14px;align-items:center;justify-content:space-between;box-shadow:0 16px 50px rgba(0,0,0,.25)
  }
  .mobile-bottom-cta b{display:block;font-size:10px}.mobile-bottom-cta span{display:block;font-size:7px;color:#aaa;margin-top:2px}
  .mobile-bottom-cta button{border:0;background:var(--lime);border-radius:10px;padding:11px 13px;font-size:9px;font-weight:900}
  .quest-modal{width:calc(100% - 18px);max-height:88vh;overflow:auto;border-radius:20px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .page-loader{display:none}
}


/* V3.1 production form/accessibility */
.hp-field{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;
}
.privacy-check{
  display:flex!important;gap:10px;align-items:flex-start;margin-top:15px!important;
  padding:12px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.48);border-radius:11px;
  cursor:pointer;
}
.privacy-check input{width:17px!important;height:17px;margin:1px 0 0!important;accent-color:#8fa800;flex:0 0 auto}
.privacy-check span{display:block}.privacy-check b{display:block;font-size:9px;color:#222}.privacy-check small{display:block;margin-top:5px;font-size:7px;font-weight:600;line-height:1.55;color:#777}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(152,184,0,.45)!important;outline-offset:3px!important;
}
.submit-btn:disabled{opacity:.55;cursor:wait}
@media(max-width:680px){
  .privacy-check small{font-size:7px}
}


/* =========================
   V3.2 · POST-IT STORY
   ========================= */
.working-status{display:inline-flex!important;align-items:center;gap:7px;background:rgba(250,247,241,.82)!important;color:#171717!important;border:1px solid rgba(20,20,20,.09);padding:7px 10px!important;border-radius:99px!important}
.working-status i{width:7px;height:7px;border-radius:50%;background:#8fa800;box-shadow:0 0 0 0 rgba(143,168,0,.32);animation:workPulse 2s infinite}
.working-status span{font-size:8px;font-weight:900}
@keyframes workPulse{70%{box-shadow:0 0 0 8px rgba(143,168,0,0)}100%{box-shadow:0 0 0 0 rgba(143,168,0,0)}}

.story-route{position:absolute;left:4%;right:4%;top:74px;width:92%;height:58%;z-index:1;pointer-events:none;overflow:visible}
.story-route path{fill:none;stroke:rgba(73,58,40,.26);stroke-width:3;stroke-dasharray:9 11;stroke-linecap:round}
.story-stations{position:absolute;inset:0;z-index:2;pointer-events:none}
.station{position:absolute;background:rgba(250,247,241,.72);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(9px);border-radius:99px;padding:5px 8px;font-size:7px;font-weight:900;color:#817a70;box-shadow:0 6px 18px rgba(49,35,21,.08);transition:.4s}
.station.active{background:#171717;color:var(--lime);transform:scale(1.08)}
.station-0{left:8%;top:18%}.station-1{left:31%;top:22%}.station-2{left:49%;top:15%}.station-3{right:21%;top:29%}.station-4{right:7%;top:57%}

.moving-note{position:absolute;z-index:8;width:190px;min-height:154px;background:#efff79;padding:24px 17px 15px;box-shadow:0 20px 38px rgba(65,49,25,.20),0 2px 1px rgba(255,255,255,.45) inset;transition:left .72s var(--ease-out),top .72s var(--ease-out),transform .72s var(--ease-out),background .45s ease;transform-origin:center;will-change:left,top,transform}
.moving-note:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 20px 20px;border-color:transparent transparent rgba(87,102,17,.18) transparent}
.note-tape{position:absolute;top:-9px;left:50%;width:58px;height:20px;transform:translateX(-50%) rotate(-2deg);background:rgba(248,239,195,.72);border-left:1px solid rgba(100,84,54,.09);border-right:1px solid rgba(100,84,54,.09)}
.moving-note>span{display:block;font-size:8px;font-weight:950;color:#6e751a;margin-bottom:8px}
.moving-note strong{display:block;font-size:16px;line-height:1.25;letter-spacing:-.7px;color:#171717}
.moving-note small{display:block;font-size:8px;line-height:1.5;color:#69701c;margin-top:9px}
.note-arrow{position:absolute;right:13px;bottom:10px;font-style:normal;font-weight:900;font-size:16px;color:#5a6414}
.moving-note.stage-0{left:7%;top:20%;transform:rotate(-5deg)}
.moving-note.stage-1{left:29%;top:27%;transform:rotate(3deg) scale(.96)}
.moving-note.stage-2{left:47%;top:19%;transform:rotate(-2deg) scale(.94)}
.moving-note.stage-3{left:65%;top:34%;transform:rotate(4deg) scale(.96);background:#e5fb77}
.moving-note.stage-4{left:70%;top:58%;transform:rotate(-3deg) scale(1.02);background:#cfff00}
.moving-note.bump{animation:noteBump .46s var(--ease-out)}
@keyframes noteBump{0%{filter:brightness(1)}45%{filter:brightness(1.08)}100%{filter:brightness(1)}}

.story-caption{position:absolute;left:7%;right:7%;bottom:28px;z-index:7;background:rgba(250,247,242,.88);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);border-radius:16px;padding:13px 16px;transition:.4s;box-shadow:0 10px 28px rgba(54,40,25,.08)}
.story-caption span{font-size:8px;font-weight:900;color:#7b756d}.story-caption strong{display:block;font-size:14px;margin:5px 0;color:#171717}.story-caption small{font-size:8px;color:#777;line-height:1.5}
.story-output{display:none!important}
.story-card>span{color:#d8ff3f!important;line-height:1.5}

@media(max-width:1100px){
  .story-route{top:60px;height:52%}.moving-note{width:170px;min-height:137px;padding:21px 14px 13px}.moving-note strong{font-size:14px}
  .moving-note.stage-0{left:5%;top:18%}.moving-note.stage-1{left:23%;top:26%}.moving-note.stage-2{left:42%;top:18%}.moving-note.stage-3{left:59%;top:32%}.moving-note.stage-4{left:64%;top:55%}
}
@media(max-width:680px){
  .story-route{left:0;width:100%;top:52px;height:50%}.story-route path{stroke-width:4}
  .station{font-size:6px;padding:4px 6px}.station-0{left:4%;top:16%}.station-1{left:27%;top:21%}.station-2{left:47%;top:14%}.station-3{right:16%;top:28%}.station-4{right:4%;top:52%}
  .moving-note{width:140px;min-height:118px;padding:18px 12px 12px}.moving-note strong{font-size:12px}.moving-note small{font-size:7px}.note-tape{width:46px;height:16px;top:-7px}.note-arrow{font-size:13px}
  .moving-note.stage-0{left:3%;top:17%}.moving-note.stage-1{left:20%;top:25%}.moving-note.stage-2{left:39%;top:17%}.moving-note.stage-3{left:56%;top:31%}.moving-note.stage-4{left:59%;top:53%}
  .story-caption{left:4%;right:4%;bottom:20px;padding:10px 12px}.story-caption strong{font-size:11px}.story-caption small{font-size:7px}
  .working-status span{font-size:7px}
}


/* ==========================================================
   V4 WHITE · BRIGHT CORPORATE PROJECT STUDIO
   White-led B2B visual system with restrained blue accents.
   V3.2 interactions and JOBMONG identity are preserved.
   ========================================================== */
:root{
  --paper:#ffffff;
  --paper2:#f4f8fc;
  --ink:#0b1d2f;
  --muted:#6f8293;
  --line:rgba(22,55,82,.12);
  --lime:#1769ff;
  --lime2:#38bdf8;
  --card:#ffffff;
  --shadow:0 24px 70px rgba(14,45,72,.10);
  --blue:#1769ff;
  --blue2:#3887ff;
  --cyan:#52c8f5;
  --navy:#0b1d2f;
  --pale:#f4f8fc;
  --pale2:#eef5fb;
}
html{background:#fff}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 84% 4%,rgba(63,143,255,.08),transparent 26%),
    radial-gradient(circle at 16% 26%,rgba(78,202,245,.05),transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#ffffff 42%,#f8fbfe 72%,#ffffff 100%);
}
body:before{
  opacity:.13;
  background-image:radial-gradient(rgba(13,70,112,.12) .55px,transparent .55px);
  background-size:12px 12px;
}
::selection{background:#d7edff;color:#071827}
.scroll-progress span{background:linear-gradient(90deg,#1769ff,#52c8f5)}

/* intro */
.page-loader{background:#fff;color:#0b1d2f}
.loader-brand span{color:#1769ff}
.loader-line{background:#e3ecf3}.loader-line i{background:linear-gradient(90deg,#1769ff,#52c8f5)}
.page-loader small{color:#8091a0}
.page-wipe{background:linear-gradient(90deg,#1769ff,#64cff4)}

/* nav */
.topbar{
  background:rgba(255,255,255,.82);
  border-color:rgba(21,71,109,.10);
  box-shadow:0 10px 35px rgba(16,46,72,.06);
  color:#0b1d2f;
}
.logo{color:#0b1d2f}.logo span{color:#1769ff}
.nav a{color:#6d7e8d}
.nav a:hover,.nav a.active{color:#0b1d2f}
.nav a:after,.nav a.active:after{background:linear-gradient(90deg,#1769ff,#55c9f4)}
.nav-cta,.primary-btn{
  color:#fff;border-color:#1769ff;background:#1769ff;
  box-shadow:0 10px 24px rgba(23,105,255,.16)
}
.nav-cta:hover,.primary-btn:hover{background:#0f59e8}
.secondary-btn{color:#183047;border-color:#ccd9e4;background:#fff}
.menu-toggle{border-color:#cedae5}.menu-toggle span{background:#173148}

/* hero */
.hero{min-height:860px}
.hero-copy{padding-left:8px}
.hero-pill{
  color:#1769ff;background:#f2f7ff;border-color:#dce9fb;
}
.pulse-dot{background:#1769ff}
.hero h1{color:#0a1c2d}
.marker:after{
  height:10px;bottom:7px;
  background:linear-gradient(90deg,#b7dcff,#d3f2ff);
  opacity:1;
}
.hero-lead{color:#718292}.hero-lead b{color:#0e2234}
.hero-mini{color:#83919d}.hero-mini i{background:#b9c5cf}
.quest-chips button{
  color:#607483;background:#fff;border-color:#dce6ee;
  box-shadow:0 6px 15px rgba(23,60,91,.03)
}
.quest-chips button:hover,.quest-chips button.active{
  color:#fff;background:#1769ff;border-color:#1769ff;transform:translateY(-2px)
}
.hero-stage{
  background:#eef4f8;
  border:1px solid #e4edf4;
  box-shadow:0 28px 80px rgba(25,57,82,.13)
}
.hero-image-wrap img{
  filter:saturate(.86) contrast(.98) brightness(1.03);
}
.hero-vignette{
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 35%,transparent 80%,rgba(28,61,87,.04)),
    linear-gradient(0deg,rgba(12,40,63,.13),transparent 30%);
}
.hero-gridlines{
  opacity:.19;
  background-image:
    linear-gradient(rgba(255,255,255,.48) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.48) 1px,transparent 1px)
}
.ambient-a{background:#66baff;opacity:.16}
.ambient-b{background:#dbeeff;opacity:.26}
.hero-circle{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.46);border-radius:50%;pointer-events:none}
.circle-a{width:430px;height:430px;right:-210px;top:60px}
.circle-b{width:640px;height:640px;right:-360px;top:-80px}
.hero-corner-copy{position:absolute;z-index:7;left:22px;bottom:20px;font-size:7px;letter-spacing:.16em;color:rgba(255,255,255,.68);font-weight:900}

/* floating cards: clean white glass */
.float-card{
  background:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.92);
  box-shadow:0 16px 42px rgba(27,55,77,.13);
  color:#14283a
}
.card-kicker{color:#6a8397}
.progress-track{background:#e8eef3}.progress-track i{background:linear-gradient(90deg,#1769ff,#4fc5f2)}
.mini-avatar{background:#f6f9fc;color:#173047;border-color:#dce5ec}.mini-avatar.ai{background:#1769ff;color:#fff}
.tool-icons span{background:#f7fafd;color:#5f7586}
.feedback-card p{color:#556c7e}.stars{color:#2a8ee9}
.result-thumb{background:linear-gradient(135deg,#dbeaf6,#9cc9e8)}.result-thumb:after{border-color:#1769ff}
.result-line span{color:#7c8c98}
.floating-status,.mascot-bubble{
  background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.95);
  color:#173047;box-shadow:0 14px 34px rgba(21,49,70,.11)
}
.mascot-bubble span{color:#778895}
.status-orb{background:#1769ff;box-shadow:0 0 0 5px rgba(23,105,255,.10)}

/* signal strip */
.signal-strip{
  background:#fff;border-color:#e5edf3;
  box-shadow:0 18px 50px rgba(23,55,80,.06)
}
.signal-item:not(:last-child):after{background:#e5edf3}
.signal-item span{color:#81909c}.signal-item b{color:#0d2234}.signal-item small{color:#85939e}

/* section rhythm */
.section,.story-section{position:relative}
.ghost-word{
  position:absolute;top:74px;right:0;pointer-events:none;
  font-size:clamp(72px,11vw,165px);font-weight:950;letter-spacing:-8px;
  color:transparent;-webkit-text-stroke:1px rgba(17,76,122,.055);
  opacity:1;z-index:-1
}
.section-kicker{color:#1769ff}
.section h2,.story-head h2,.final-cta h2{color:#0b1d2f}
.section h2 span,.story-head h2 span{
  background:linear-gradient(transparent 72%,#dceeff 72%)
}
.section-head>p,.story-head p{color:#758695}

/* PROCESS — airy light panel */
.story-rail{
  background:#f7fafc;border-color:#e5edf3;
  box-shadow:0 15px 45px rgba(22,52,76,.04)
}
.story-progress{background:#dde7ee}.story-progress i{background:linear-gradient(#1769ff,#52c8f5)}
.story-node{color:#91a0ab}
.story-node b{background:#edf3f7;border-color:#f9fbfc;color:#8092a1}
.story-node.active{color:#0f2638}.story-node.active b{background:#1769ff;color:white}
.story-office{
  background:linear-gradient(135deg,#e6eef3,#cddce7);
  border:1px solid #dde7ee;
  box-shadow:0 24px 70px rgba(20,52,77,.10)
}
.office-top{
  background:rgba(255,255,255,.70);border-bottom-color:rgba(255,255,255,.72);color:#718392
}
.working-status{
  background:rgba(255,255,255,.88)!important;color:#173047!important;border-color:#e4ebf0
}
.working-status i{background:#1769ff}
.story-workbench{
  background:linear-gradient(180deg,#bfd1dd,#8aaabe);
  box-shadow:0 30px 70px rgba(37,67,88,.19)
}
.story-laptop{background:#172a39;border:1px solid #334c5f}
.screen-bar{background:#47bef0}.screen-line{background:#415766}.screen-grid i{border-color:#3f5666;background:#243a4b}
.story-route path{stroke:rgba(51,106,145,.25)}
.station{
  color:#6c8292;background:rgba(255,255,255,.76);
  border-color:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(27,57,79,.07)
}
.station.active{background:#1769ff;color:#fff}
.moving-note{
  background:linear-gradient(145deg,#e5f6ff,#bcecff);
  box-shadow:0 20px 45px rgba(25,60,84,.16),0 1px 0 rgba(255,255,255,.6) inset
}
.moving-note:after{border-color:transparent transparent rgba(51,116,150,.15) transparent}
.note-tape{background:rgba(239,249,255,.80)}
.moving-note>span{color:#1b6e9d}.moving-note strong{color:#092337}.moving-note small{color:#3d708a}.note-arrow{color:#1769ff}
.moving-note.stage-3{background:linear-gradient(145deg,#dff5ff,#a9e8ff)}
.moving-note.stage-4{background:linear-gradient(145deg,#d6f3ff,#8ee1ff)}
.story-caption{
  background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.95);
  box-shadow:0 12px 34px rgba(20,51,74,.08)
}
.story-caption span{color:#1769ff}.story-caption strong{color:#11283a}.story-caption small{color:#718493}

/* Right story: single controlled dark contrast */
.story-side{
  background:
    radial-gradient(circle at 95% 5%,rgba(55,143,255,.24),transparent 34%),
    #0c2135;
  border:1px solid #173850;
}
.story-card>span{color:#73d5fa!important}.story-card h3{color:#f7fbff}.story-card p{color:#97aebe}

/* method */
.how-section{background:transparent}
.step-card{
  background:#fff;border-color:#e5edf3;box-shadow:0 14px 38px rgba(21,54,80,.05)
}
.step-num{background:#e8f2ff;color:#1769ff}
.step-card h3{color:#11283a}.step-card p{color:#738594}.step-icon{color:#1769ff}

/* service: one white, one blue */
.service-card.dark{
  background:#0c2135;color:white;border-color:#173850;
  box-shadow:0 22px 65px rgba(15,48,73,.14)
}
.service-card.lime-card{
  background:#f4f8fc;color:#0b1d2f;border-color:#e0eaf1;
  box-shadow:0 18px 52px rgba(18,51,76,.07)
}
.dark .service-top span:first-child,.lime-card .service-top span:first-child{color:#2c82ff}
.dark .service-top span:first-child{color:#70d4fb}
.service-card.dark p{color:#9cb1c1}.service-card.lime-card p{color:#748695}
.service-card.dark li{border-color:#223d52;color:#d4e2eb}
.service-card.lime-card li{border-color:#dbe6ed;color:#40596b}
.week-row span{background:#fff;border-color:#dce7ee;color:#526b7c}
.circle-arrow{background:#1769ff;color:#fff}
.lime-card .circle-arrow{background:#1769ff;color:#fff}

/* simulator: light overall, dark result only */
.simulator{
  background:#f7fafc;border-color:#e3ebf1;
  box-shadow:0 20px 60px rgba(19,50,74,.06)
}
.sim-label{color:#7a8b99}
.sim-options button{
  color:#5e7383;background:#fff;border-color:#dfe8ee
}
.sim-options button span{background:#eef4f8;color:#698497}
.sim-options button:hover,.sim-options button.active{background:#1769ff;color:#fff}
.sim-options button.active span{background:#fff;color:#1769ff}
.sim-right{
  background:
    radial-gradient(circle at 95% 4%,rgba(70,151,255,.22),transparent 34%),
    #0c2135;
  border:1px solid #173850
}
.sim-right:after{background:#51c8f5;opacity:.10}
.sim-badge{border-color:#294b64;color:#71d4f9}
.sim-right>p{color:#92a8b9}
.sim-flow div,.sim-result>div{background:#132e44;border-color:#234158}
.sim-flow b{color:#70d5fa}.sim-result span{color:#819caf}

/* archive */
.archive-card{
  background:#fff;border-color:#e3ebf1;box-shadow:0 15px 42px rgba(18,49,74,.055)
}
.archive-card:hover{box-shadow:0 28px 58px rgba(18,49,74,.10)}
.archive-body>span{color:#1769ff}.archive-body h3{color:#102638}.archive-body p{color:#718493}
.visual-a{background:linear-gradient(135deg,#e7f1f8,#c9e2f2)}
.visual-b{background:linear-gradient(135deg,#dfeaf1,#aecbde)}
.visual-c{background:linear-gradient(145deg,#e8f1f7,#c1daea)}
.sample{background:#1769ff;color:#fff}
.fake-window{background:#fff}.fake-bar{background:#1769ff}.fake-row{background:#e8eff4}
.paper-stack i{background:#fff}.paper-stack i:nth-child(3){background:#bdeaff}
.grid-ui i{border-color:rgba(23,105,255,.30);background:rgba(23,105,255,.06)}

/* final CTA: light, not dark */
.final-cta{
  background:
    radial-gradient(circle at 88% 18%,rgba(63,160,255,.10),transparent 28%),
    linear-gradient(90deg,#f3f8fc,#eaf5fd);
  border-color:#dbe9f3;box-shadow:0 20px 58px rgba(19,50,74,.07)
}
.cta-copy span{color:#1769ff}.cta-copy p{color:#708393}
.mini-face{border-color:#fff}.mini-face.cat{background:#e1b985;color:#583e28}.mini-face.capy{background:#7a5837;color:#fff}

/* form returns to bright */
.quest-modal{background:#fff;color:#0b1d2f;box-shadow:0 40px 120px rgba(11,31,49,.24)}
.modal-close{background:#0d2538;color:#fff}
.modal-step>p{color:#718393}
.quest-form textarea,.quest-form input{color:#173047;background:#fff;border-color:#d6e1e9}
.quest-form textarea::placeholder,.quest-form input::placeholder{color:#99a6af}
.quest-form textarea:focus,.quest-form input:focus{border-color:#1769ff;box-shadow:0 0 0 3px rgba(23,105,255,.10)}
.quick-tags button{color:#5f7383;border-color:#dce5ec;background:#f6f9fb}
.privacy-check{border-color:#dce6ed;background:#f8fafc}.privacy-check b{color:#203648}.privacy-check small{color:#758795}
.submit-state{color:#788996}
.toast{background:#0c2135}.toast b{color:#79d9fb}.toast span{color:#9fb4c3}

/* footer/mobile */
footer{border-color:#e3ebf1;color:#7b8c99}footer .logo,footer a{color:#183047}
.mobile-menu{background:#fff;color:#0b1d2f}.mobile-menu-head .logo{color:#0b1d2f}.mobile-menu-head button{border-color:#d8e2e9;color:#173047}
.mobile-menu nav a{border-color:#e6edf2}.mobile-menu nav span{color:#1769ff}
.mobile-bottom-cta{background:#0c2135;border:1px solid #173850}.mobile-bottom-cta span{color:#97acbc}.mobile-bottom-cta button{background:#1769ff;color:#fff}

@media(max-width:680px){
  .ghost-word{top:50px;font-size:74px;right:-8px;letter-spacing:-4px}
  .hero-stage{border-color:#e2ebf1}
}


/* ==========================================================
   V4.1 · TYPOGRAPHY OPTIMIZATION
   Goal: one-glance readability across desktop + mobile.
   Minimum visible UI text is raised significantly.
   ========================================================== */

:root{
  --fs-hero:clamp(52px,4.5vw,76px);
  --fs-section:clamp(40px,3.5vw,56px);
  --fs-card-title:clamp(24px,2vw,34px);
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-label:12px;
  --fs-micro:11px;
  --lh-body:1.7;
}
body{
  font-size:16px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font-size:14px}

/* Header */
.logo{font-size:25px;letter-spacing:-1.2px}
.nav a{font-size:14px;letter-spacing:-.1px}
.nav-cta{font-size:14px;padding:13px 19px}

/* Hero hierarchy */
.hero-pill{font-size:12px;padding:10px 14px}
.hero h1{
  font-size:var(--fs-hero);
  line-height:1.01;
  letter-spacing:-3.8px;
  max-width:780px;
}
.hero-lead{
  font-size:17px;
  line-height:1.72;
  max-width:670px;
}
.hero-lead b{font-size:20px}
.primary-btn,.secondary-btn{font-size:14px;padding:15px 20px}
.quest-chips button{font-size:11px;padding:9px 12px}
.hero-mini{font-size:11px;letter-spacing:.02em}
.hero-corner-copy{font-size:10px;letter-spacing:.14em}

/* Hero floating cards */
.card-kicker{font-size:11px;letter-spacing:.06em}
.project-card{width:245px}
.project-title{font-size:18px;line-height:1.25}
.progress-row{font-size:12px}
.mini-avatar{font-size:10px}
.avatar-row b{font-size:11px}
.tools-card{width:270px}
.tool-icons span{font-size:11px;line-height:1.35}
.feedback-card{width:245px}
.feedback-card p{font-size:13px;line-height:1.55}
.result-card{width:250px}
.result-line b{font-size:13px}
.result-line span{font-size:11px;line-height:1.35}
.floating-status{font-size:11px}
.mascot-bubble b{font-size:11px}
.mascot-bubble span{font-size:10px}

/* KPI strip */
.signal-item{padding:22px 24px}
.signal-item span{font-size:11px}
.signal-item b{font-size:26px}
.signal-item small{font-size:12px;line-height:1.4}

/* Global section titles */
.section-kicker{
  font-size:12px;
  letter-spacing:.12em;
}
.section h2,.final-cta h2{
  font-size:var(--fs-section);
  line-height:1.08;
  letter-spacing:-2.5px;
}
.section-head>p{
  max-width:430px;
  font-size:15px;
  line-height:1.7;
}
.story-head h2{
  font-size:clamp(42px,4vw,62px);
  line-height:1.05;
  letter-spacing:-3px;
}
.story-head p{font-size:15px;line-height:1.7}

/* PROCESS story */
.story-node b{font-size:11px}
.story-node span{font-size:12px;line-height:1.3}
.office-top{font-size:11px}
.working-status span{font-size:11px}
.station{font-size:10px;padding:6px 9px}
.moving-note{width:215px;min-height:164px;padding:25px 18px 16px}
.moving-note>span{font-size:11px}
.moving-note strong{font-size:17px;line-height:1.3;letter-spacing:-.4px}
.moving-note small{font-size:11px;line-height:1.5}
.note-arrow{font-size:17px}
.story-caption{padding:15px 17px}
.story-caption span{font-size:11px}
.story-caption strong{font-size:15px;line-height:1.35}
.story-caption small{font-size:11px;line-height:1.55}
.story-card>span{font-size:12px}
.story-card h3{
  font-size:clamp(30px,2.6vw,40px);
  line-height:1.12;
  letter-spacing:-1.6px;
}
.story-card p{font-size:15px;line-height:1.75}

/* HOW WE WORK */
.step-num{font-size:11px;padding:6px 8px}
.step-card{padding:22px;min-height:270px}
.step-icon{font-size:34px}
.step-card h3{font-size:21px;line-height:1.25}
.step-card p{font-size:14px;line-height:1.65}

/* Services */
.service-top{font-size:12px}
.service-card{padding:30px}
.service-card h3{
  font-size:clamp(30px,2.4vw,38px);
  line-height:1.12;
  letter-spacing:-1.6px;
}
.service-card p{font-size:15px;line-height:1.75}
.service-card li{font-size:14px;line-height:1.55;padding:10px 0}
.week-row span{font-size:12px;line-height:1.35}
.service-bottom strong{font-size:24px}
.service-bottom small{font-size:12px}

/* QUEST simulator */
.sim-label{font-size:12px}
.sim-options button{font-size:14px;line-height:1.4;padding:15px 16px}
.sim-options button span{font-size:11px}
.sim-badge{font-size:11px}
.sim-right h3{
  font-size:clamp(29px,2.5vw,38px);
  line-height:1.15;
  letter-spacing:-1.5px;
}
.sim-right>p{font-size:15px;line-height:1.75}
.sim-flow b{font-size:11px}
.sim-flow span{font-size:12px;line-height:1.35}
.sim-result span{font-size:10px}
.sim-result strong{font-size:14px;line-height:1.5}

/* Archive */
.sample{font-size:11px}
.archive-body{padding:21px}
.archive-body>span{font-size:11px}
.archive-body h3{font-size:22px;line-height:1.3}
.archive-body p{font-size:14px;line-height:1.65}

/* Final CTA / footer */
.cta-copy span{font-size:11px}
.cta-copy h2{font-size:clamp(30px,2.6vw,38px);line-height:1.15}
.cta-copy p{font-size:14px;line-height:1.6}
footer{font-size:12px}
footer .logo{font-size:19px}

/* Inquiry modal */
.modal-step h2{font-size:clamp(34px,3.1vw,44px);line-height:1.12}
.modal-step>p{font-size:14px;line-height:1.65}
.quest-form label{font-size:13px}
.quest-form textarea,.quest-form input{font-size:14px;line-height:1.5}
.quick-tags button{font-size:12px}
.privacy-check b{font-size:12px}
.privacy-check small{font-size:11px;line-height:1.55}
.submit-btn{font-size:14px}
.submit-state{font-size:12px}
.toast b{font-size:12px}
.toast span{font-size:12px}

/* Mobile typography is deliberately not tiny. */
@media(max-width:680px){
  :root{
    --fs-hero:clamp(42px,12vw,52px);
    --fs-section:clamp(34px,9.5vw,40px);
  }
  body{font-size:15px}
  .logo{font-size:20px}
  .nav-cta{font-size:12px}
  .hero-pill{font-size:11px}
  .hero h1{
    font-size:var(--fs-hero);
    line-height:1.02;
    letter-spacing:-2.8px;
  }
  .hero-lead{font-size:15px;line-height:1.7}
  .hero-lead b{font-size:17px}
  .primary-btn,.secondary-btn{font-size:13px}
  .quest-chips button{font-size:11px}
  .hero-mini{font-size:10px}

  .project-card{width:215px}
  .feedback-card{width:205px}
  .tools-card{width:235px}
  .card-kicker{font-size:10px}
  .project-title{font-size:16px}
  .progress-row,.avatar-row b{font-size:10px}
  .tool-icons span{font-size:10px}
  .feedback-card p{font-size:11px}
  .floating-status{font-size:10px}

  .signal-item span{font-size:10px}
  .signal-item b{font-size:22px}
  .signal-item small{font-size:10px}

  .section-kicker{font-size:11px}
  .section h2{font-size:var(--fs-section);line-height:1.1;letter-spacing:-2px}
  .section-head>p{font-size:14px}
  .story-head h2{font-size:38px;line-height:1.08;letter-spacing:-2.2px}
  .story-head p{font-size:14px}

  .story-card h3{font-size:28px;line-height:1.15}
  .story-card p{font-size:14px}
  .story-card>span{font-size:11px}
  .office-top{font-size:10px}
  .working-status span{font-size:10px}
  .station{font-size:9px}
  .moving-note{
    width:155px;
    min-height:132px;
    padding:20px 13px 13px;
  }
  .moving-note>span{font-size:9px}
  .moving-note strong{font-size:13px}
  .moving-note small{font-size:9px}
  .story-caption span{font-size:9px}
  .story-caption strong{font-size:12px}
  .story-caption small{font-size:9px}

  .step-card{min-height:210px;padding:20px}
  .step-num{font-size:10px}
  .step-card h3{font-size:20px}
  .step-card p{font-size:14px}

  .service-card{padding:24px}
  .service-top{font-size:11px}
  .service-card h3{font-size:30px}
  .service-card p{font-size:14px}
  .service-card li{font-size:13px}
  .week-row span{font-size:11px}
  .service-bottom strong{font-size:22px}
  .service-bottom small{font-size:11px}

  .sim-label{font-size:11px}
  .sim-options button{font-size:13px}
  .sim-options button span{font-size:10px}
  .sim-badge{font-size:10px}
  .sim-right h3{font-size:29px}
  .sim-right>p{font-size:14px}
  .sim-flow b{font-size:10px}
  .sim-flow span{font-size:11px}
  .sim-result span{font-size:9px}
  .sim-result strong{font-size:13px}

  .sample{font-size:10px}
  .archive-body>span{font-size:10px}
  .archive-body h3{font-size:20px}
  .archive-body p{font-size:14px}

  .cta-copy span{font-size:10px}
  .cta-copy h2{font-size:29px}
  .cta-copy p{font-size:14px}
  footer{font-size:11px}

  .modal-step h2{font-size:32px}
  .modal-step>p{font-size:14px}
  .quest-form label{font-size:12px}
  .quick-tags button{font-size:11px}
  .privacy-check b{font-size:11px}
  .privacy-check small{font-size:10px}
  .submit-state{font-size:11px}
  .mobile-bottom-cta b{font-size:11px}
  .mobile-bottom-cta span{font-size:9px}
  .mobile-bottom-cta button{font-size:11px}
}

/* Large desktop: prevent typography from becoming oversized. */
@media(min-width:1500px){
  .hero h1{font-size:76px}
  .section h2,.final-cta h2{font-size:56px}
  .story-head h2{font-size:62px}
}


/* ==========================================================
   V4.2 · SUBLINE READABILITY PASS
   Main headlines are intentionally unchanged from V4.1.
   Supporting copy is enlarged and given stronger contrast.
   ========================================================== */

:root{
  --fs-subhero:19px;
  --fs-section-lead:17px;
  --fs-card-body:16px;
  --fs-support:14px;
  --fs-ui-label:12px;
}

/* HERO: keep headline untouched, enlarge the message beneath it */
.hero-lead{
  font-size:19px;
  line-height:1.78;
  max-width:700px;
  color:#5e7384;
}
.hero-lead b{
  font-size:22px;
  line-height:1.45;
  color:#0c2133;
}
.hero-pill{
  font-size:13px;
  line-height:1.3;
}
.hero-mini{
  font-size:12px;
  line-height:1.35;
}
.quest-chips button{
  font-size:12px;
  line-height:1.3;
}

/* SECTION INTRO COPY */
.section-head>p{
  max-width:460px;
  font-size:17px;
  line-height:1.78;
  color:#64798a;
}
.story-head p{
  max-width:680px;
  font-size:17px;
  line-height:1.78;
  color:#64798a;
}
.section-kicker{
  font-size:13px;
}

/* SIGNAL / SUMMARY STRIP */
.signal-item span{
  font-size:12px;
}
.signal-item small{
  font-size:13px;
  line-height:1.5;
}

/* FLOATING HERO CARDS */
.card-kicker{
  font-size:12px;
}
.feedback-card p{
  font-size:14px;
  line-height:1.65;
}
.result-line span{
  font-size:12px;
}
.tool-icons span{
  font-size:12px;
  line-height:1.4;
}
.floating-status{
  font-size:12px;
}
.mascot-bubble span{
  font-size:11px;
}

/* PROCESS */
.story-node span{
  font-size:13px;
}
.office-top{
  font-size:12px;
}
.working-status span{
  font-size:12px;
}
.station{
  font-size:11px;
}
.moving-note>span{
  font-size:12px;
}
.moving-note strong{
  font-size:18px;
}
.moving-note small{
  font-size:12px;
  line-height:1.6;
}
.story-caption span{
  font-size:12px;
}
.story-caption strong{
  font-size:16px;
}
.story-caption small{
  font-size:12px;
  line-height:1.65;
}
.story-card>span{
  font-size:13px;
}
.story-card p{
  font-size:16px;
  line-height:1.82;
  color:#a8bac7;
}

/* HOW WE WORK */
.step-card p{
  font-size:15px;
  line-height:1.72;
  color:#657a8a;
}

/* SERVICES */
.service-card p{
  font-size:16px;
  line-height:1.82;
}
.service-card.dark p{
  color:#b3c3cf;
}
.service-card.lime-card p{
  color:#627786;
}
.service-card li{
  font-size:15px;
  line-height:1.6;
}
.week-row span{
  font-size:13px;
}

/* QUEST SIMULATOR */
.sim-label{
  font-size:13px;
}
.sim-options button{
  font-size:15px;
  line-height:1.45;
}
.sim-badge{
  font-size:12px;
}
.sim-right>p{
  font-size:16px;
  line-height:1.82;
  color:#a9bbc8;
}
.sim-flow span{
  font-size:13px;
}
.sim-result span{
  font-size:11px;
}
.sim-result strong{
  font-size:15px;
  line-height:1.55;
}

/* ARCHIVE */
.archive-body>span{
  font-size:12px;
}
.archive-body p{
  font-size:15px;
  line-height:1.72;
  color:#667b8b;
}
.sample{
  font-size:12px;
}

/* FINAL CTA */
.cta-copy span{
  font-size:12px;
}
.cta-copy p{
  font-size:16px;
  line-height:1.7;
  color:#617687;
}

/* MODAL SUPPORTING COPY */
.modal-step>p{
  font-size:15px;
}
.quest-form label{
  font-size:14px;
}
.quick-tags button{
  font-size:13px;
}
.privacy-check b{
  font-size:13px;
}
.privacy-check small{
  font-size:12px;
  line-height:1.65;
}
.submit-state{
  font-size:13px;
}

/* Slightly increase contrast of all supporting copy */
.hero-lead,
.section-head>p,
.story-head p,
.step-card p,
.service-card p,
.archive-body p,
.cta-copy p{
  font-weight:500;
}

/* Mobile: supporting copy should stay readable, not collapse */
@media(max-width:680px){
  .hero-lead{
    font-size:16px;
    line-height:1.75;
  }
  .hero-lead b{
    font-size:18px;
  }
  .hero-pill{
    font-size:12px;
  }
  .section-head>p,
  .story-head p{
    font-size:15px;
    line-height:1.72;
  }
  .section-kicker{
    font-size:12px;
  }

  .signal-item span{
    font-size:11px;
  }
  .signal-item small{
    font-size:11px;
  }

  .feedback-card p{
    font-size:12px;
  }
  .tool-icons span{
    font-size:11px;
  }
  .floating-status{
    font-size:11px;
  }

  .story-node span{
    font-size:11px;
  }
  .office-top,
  .working-status span{
    font-size:10px;
  }
  .station{
    font-size:9px;
  }
  .moving-note>span{
    font-size:10px;
  }
  .moving-note strong{
    font-size:14px;
  }
  .moving-note small{
    font-size:10px;
  }
  .story-caption span{
    font-size:10px;
  }
  .story-caption strong{
    font-size:13px;
  }
  .story-caption small{
    font-size:10px;
  }
  .story-card>span{
    font-size:11px;
  }
  .story-card p{
    font-size:15px;
    line-height:1.75;
  }

  .step-card p{
    font-size:15px;
  }

  .service-card p{
    font-size:15px;
  }
  .service-card li{
    font-size:14px;
  }
  .week-row span{
    font-size:12px;
  }

  .sim-label{
    font-size:12px;
  }
  .sim-options button{
    font-size:14px;
  }
  .sim-right>p{
    font-size:15px;
  }
  .sim-flow span{
    font-size:12px;
  }
  .sim-result strong{
    font-size:14px;
  }

  .archive-body p{
    font-size:15px;
  }

  .cta-copy p{
    font-size:15px;
  }

  .modal-step>p{
    font-size:15px;
  }
  .quest-form label{
    font-size:13px;
  }
  .privacy-check small{
    font-size:11px;
  }
}


/* ==========================================================
   V4.3 · CONVERSION & TRUST PASS
   Keeps V4.2 visual system; improves hierarchy, trust, choice.
   ========================================================== */

/* Hero less busy */
.hero-reassurance{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:15px;color:#708393;font-size:12px;font-weight:700
}
.hero-reassurance i{width:4px;height:4px;border-radius:50%;background:#b3c1cc}
.principle-card{
  right:24px;top:52px;width:245px;
}
.principle-card strong{
  display:block;margin:10px 0 8px;font-size:18px;letter-spacing:-.4px;color:#102638
}
.principle-card p{
  margin:0;color:#667b8b;font-size:13px;line-height:1.65
}
.tools-card,.feedback-card,.result-card{display:none!important}

/* Reduce visual noise around mascot bubbles */
.mascot-chaeng{left:48%;bottom:26px}
.mascot-yoon{display:none}
.floating-status{right:20px;bottom:19px}

/* PROCESS: post-it + right narrative only */
.story-caption{display:none!important}
.story-workbench{top:26%}
.story-output{display:none!important}

/* WHY JOBMONGZ */
.why-section{
  padding-top:115px;
}
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.trust-card{
  position:relative;min-height:390px;padding:28px;
  background:#fff;border:1px solid #e3ebf1;border-radius:22px;
  box-shadow:0 15px 44px rgba(18,49,74,.055);
  overflow:hidden
}
.trust-card:after{
  content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  right:-90px;top:-90px;background:#edf6ff;transition:.45s var(--ease-out)
}
.trust-card:hover:after{transform:scale(1.35)}
.trust-num{
  position:relative;z-index:1;font-size:12px;color:#91a1ad;font-weight:900
}
.trust-label{
  position:relative;z-index:1;display:inline-block;margin-top:48px;
  color:#1769ff;font-size:12px;font-weight:900;letter-spacing:.07em
}
.trust-card h3{
  position:relative;z-index:1;font-size:26px;line-height:1.28;
  letter-spacing:-1.2px;margin:13px 0 16px;color:#102638
}
.trust-card p{
  position:relative;z-index:1;font-size:15px;line-height:1.75;
  color:#64798a;margin:0
}
.trust-tags{
  position:absolute;z-index:2;left:28px;bottom:26px;display:flex;gap:6px;flex-wrap:wrap
}
.trust-tags span{
  background:#f3f7fa;border:1px solid #e1eaf0;border-radius:99px;
  padding:7px 9px;font-size:11px;font-weight:800;color:#607586
}
.trust-bottom{
  margin-top:12px;border-radius:18px;padding:20px 24px;
  background:#0c2135;color:#fff;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:18px
}
.trust-bottom b{
  color:#70d5fa;font-size:12px;letter-spacing:.08em
}
.trust-bottom span{
  font-size:21px;font-weight:900;letter-spacing:-.7px
}
.trust-bottom p{
  color:#9db0be;font-size:13px;margin:0
}

/* Service selection clarity */
.fit-pill{
  display:inline-flex;width:max-content;margin-top:31px;
  border:1px solid #29455b;background:#142f45;color:#8edcf9;
  border-radius:99px;padding:8px 10px;font-size:11px;font-weight:900
}
.fit-pill.light{
  background:#e8f2ff;color:#1769ff;border-color:#d4e7fb
}
.service-card h3{margin-top:19px}
.service-fit{
  display:grid;gap:7px;margin:19px 0 22px;padding:15px;
  background:#122d43;border-radius:13px;border:1px solid #234158
}
.service-fit b{font-size:12px;color:#72d5fa}
.service-fit span{
  position:relative;padding-left:15px;font-size:13px;line-height:1.45;color:#d2e0e9
}
.service-fit span:before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:#56c9f4
}
.service-fit.light-fit{
  background:#fff;border-color:#dce7ee
}
.service-fit.light-fit b{color:#1769ff}
.service-fit.light-fit span{color:#526b7c}
.service-text-cta{
  border:1px solid #31516a;background:#153047;color:#fff;
  border-radius:11px;padding:12px 14px;font-size:12px;font-weight:900
}
.service-text-cta span{margin-left:7px}
.service-text-cta.blue{
  border-color:#1769ff;background:#1769ff;color:#fff
}
.service-choice{
  margin-top:12px;display:grid;grid-template-columns:1fr 1px 1fr;
  align-items:center;background:#f4f8fc;border:1px solid #e0eaf1;
  border-radius:18px;padding:18px 24px
}
.service-choice i{height:40px;background:#dae5ec}
.service-choice div{display:flex;align-items:center;justify-content:center;gap:12px}
.service-choice span{font-size:13px;color:#728493}
.service-choice b{font-size:14px;color:#173047}

/* Modal next step */
.interview-note{
  display:flex;gap:12px;align-items:center;margin:17px 0 4px;
  padding:14px;background:#f3f8fc;border:1px solid #dfeaf2;border-radius:14px
}
.interview-icon{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;background:#1769ff;color:white;
  font-size:15px;font-weight:950
}
.interview-note b{display:block;font-size:13px;color:#173047}
.interview-note p{margin:4px 0 0;font-size:12px;line-height:1.55;color:#708393}

/* Mobile */
@media(max-width:1100px){
  .trust-grid{grid-template-columns:1fr}
  .trust-card{min-height:310px}
  .trust-bottom{grid-template-columns:1fr}
  .trust-bottom p{margin-top:-8px}
}
@media(max-width:680px){
  .hero-reassurance{
    font-size:10px;gap:7px;line-height:1.4
  }
  .principle-card{
    width:190px;right:-10px;top:24px;transform:scale(.84)!important;
    transform-origin:right top
  }
  .principle-card p{font-size:11px}
  .mascot-chaeng{display:none}
  .trust-card{min-height:320px;padding:23px}
  .trust-label{margin-top:34px;font-size:11px}
  .trust-card h3{font-size:23px}
  .trust-card p{font-size:14px}
  .trust-tags{left:23px;bottom:22px}
  .trust-bottom{padding:18px}
  .trust-bottom span{font-size:18px}
  .service-fit{padding:13px}
  .service-fit span{font-size:12px}
  .service-bottom{
    align-items:flex-start;gap:12px;flex-direction:column
  }
  .service-text-cta{width:100%;font-size:12px}
  .service-choice{
    grid-template-columns:1fr;padding:14px
  }
  .service-choice i{width:100%;height:1px;margin:6px 0}
  .service-choice div{justify-content:space-between}
  .service-choice span{font-size:11px}
  .service-choice b{font-size:12px}
  .interview-note{align-items:flex-start}
  .interview-note b{font-size:12px}
  .interview-note p{font-size:11px}
}


/* ==========================================================
   V4.3.1 · JM INTRO EMPHASIS
   Make J and M larger, more memorable, and color-accented.
   ========================================================== */
.loader-brand{
  display:flex;align-items:flex-end;gap:1px;
  font-size:clamp(38px,7vw,86px);
  font-weight:950;
  letter-spacing:-4px;
  line-height:.88;
}
.loader-rest{
  display:inline-block;
  color:#0b1d2f;
  transform:translateY(-2px);
}
.loader-jm{
  display:inline-block;
  position:relative;
  font-size:1.32em;
  line-height:.8;
  letter-spacing:-.06em;
  font-weight:1000;
  transform:translateY(14px) scale(.92);
  opacity:0;
  text-shadow:0 10px 28px rgba(23,105,255,.16);
}
.loader-dot{
  display:inline-block;
  color:#52c8f5;
  transform:translateY(-1px);
}
.jm-j{
  color:#1769ff;
  animation:loaderJM .9s .05s cubic-bezier(.16,1,.3,1) forwards;
}
.jm-m{
  color:#52c8f5;
  animation:loaderJM .9s .18s cubic-bezier(.16,1,.3,1) forwards;
}
.page-loader .loader-rest,
.page-loader .loader-dot{
  opacity:0;
  transform:translateY(12px);
  animation:loaderRest .68s .24s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes loaderJM{
  0%{opacity:0;transform:translateY(16px) scale(.88)}
  55%{opacity:1;transform:translateY(-3px) scale(1.06)}
  100%{opacity:1;transform:translateY(-1px) scale(1)}
}
@keyframes loaderRest{
  to{opacity:1;transform:translateY(-1px)}
}
@media(max-width:680px){
  .loader-brand{
    font-size:clamp(34px,11vw,60px);
    letter-spacing:-3px;
  }
  .loader-jm{
    font-size:1.28em;
  }
}


/* ==========================================================
   V4.3.3 · INTRO RED ONLY
   Only the opening loader screen uses a red brand tone.
   The main website after loading keeps the original V4.3.1 colors.
   ========================================================== */

/* Loader screen only */
.page-loader{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,215,218,.88), transparent 24%),
    radial-gradient(circle at 82% 15%, rgba(255,235,236,.85), transparent 25%),
    linear-gradient(180deg, #fff7f7 0%, #fff2f2 100%);
  color:#35181a;
}
.page-loader::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(137,34,40,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137,34,40,.05) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.loader-brand{
  position:relative;
  z-index:2;
}
.loader-rest{
  color:#35181a !important;
}
.loader-jm{
  text-shadow:0 12px 34px rgba(143,29,34,.18);
}
.jm-j{
  color:#8f1d22 !important;
}
.jm-m{
  color:#b2242c !important;
}
.loader-dot{
  color:#e55b64 !important;
}
.loader-line{
  background:#f1dfe0 !important;
}
.loader-line i{
  background:linear-gradient(90deg,#b2242c,#ef7b82) !important;
}
.page-loader small{
  color:#8e6d70 !important;
}
.page-wipe{
  background:linear-gradient(90deg,#8f1d22,#e55b64) !important;
}

@media(max-width:680px){
  .page-loader::before{
    background-size:22px 22px;
  }
}


/* ==========================================================
   V4.3.4 · INTRO RED UNIFIED
   Only the intro screen is touched.
   All intro reds are unified around one brand red family.
   Main website colors remain unchanged.
   ========================================================== */

:root{
  --intro-red:#b2242c;
  --intro-red-deep:#971c23;
  --intro-red-soft:#d45b63;
  --intro-red-bg:#fff6f6;
  --intro-red-bg2:#fff1f1;
  --intro-red-line:#f0dddd;
}

/* Loader screen only */
.page-loader{
  background:
    radial-gradient(circle at 18% 22%, rgba(178,36,44,.10), transparent 24%),
    radial-gradient(circle at 82% 15%, rgba(178,36,44,.08), transparent 25%),
    linear-gradient(180deg, var(--intro-red-bg) 0%, var(--intro-red-bg2) 100%) !important;
  color:#35181a;
}
.page-loader::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(178,36,44,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178,36,44,.045) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.loader-rest{
  color:#35181a !important;
}
.loader-jm{
  text-shadow:0 12px 34px rgba(151,28,35,.16);
}
/* J, M are still emphasized, but now within the same unified red brand family */
.jm-j{
  color:var(--intro-red-deep) !important;
}
.jm-m{
  color:var(--intro-red-deep) !important;
}
.loader-dot{
  color:var(--intro-red) !important;
}
.loader-line{
  background:var(--intro-red-line) !important;
}
.loader-line i{
  background:linear-gradient(90deg,var(--intro-red-deep),var(--intro-red)) !important;
}
.page-loader small{
  color:#8e6d70 !important;
}
.page-wipe{
  background:linear-gradient(90deg,var(--intro-red-deep),var(--intro-red)) !important;
}

@media(max-width:680px){
  .page-loader::before{
    background-size:22px 22px;
  }
}


/* ==========================================================
   V4.3.6 · INTRO CUSTOM MASCOTS
   Custom-generated mascots for the intro only.
   Chaengmong sits on J, Yoonmong sits on M.
   ========================================================== */

.loader-brand{
  display:flex;
  align-items:flex-end;
  gap:2px;
}
.loader-letter-block{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  min-width:.82em;
}
.loader-seat-shadow{
  position:absolute;
  left:50%;
  bottom:100%;
  width:54px;
  height:10px;
  border-radius:999px;
  transform:translateX(-50%) translateY(7px);
  background:radial-gradient(circle at center, rgba(151,28,35,.15), rgba(151,28,35,0) 72%);
  z-index:2;
  opacity:0;
  animation:seatShadowIn .6s .28s ease-out forwards;
}
.loader-mascot{
  position:absolute;
  left:50%;
  bottom:100%;
  z-index:4;
  height:auto;
  opacity:0;
  filter:drop-shadow(0 12px 22px rgba(53,24,26,.12));
  transform-origin:center bottom;
}
.block-j .loader-mascot{
  width:66px;
  transform:translateX(-50%) translateY(15px) scale(.76);
}
.block-m .loader-mascot{
  width:74px;
  transform:translateX(-50%) translateY(16px) scale(.74);
}

.mascot-j{
  animation:loaderMascotInJ .82s .08s cubic-bezier(.16,1,.3,1) forwards,
            mascotBobJ 2.8s 1.15s ease-in-out infinite;
}
.mascot-m{
  animation:loaderMascotInM .82s .20s cubic-bezier(.16,1,.3,1) forwards,
            mascotBobM 2.9s 1.25s ease-in-out infinite;
}

.block-j .loader-jm,
.block-m .loader-jm{
  position:relative;
  z-index:3;
}

/* custom entering motion */
@keyframes loaderMascotInJ{
  0%{ opacity:0; transform:translateX(-50%) translateY(18px) scale(.62) rotate(-5deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(0px) scale(.8) rotate(1deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(3px) scale(.76) rotate(0deg); }
}
@keyframes loaderMascotInM{
  0%{ opacity:0; transform:translateX(-50%) translateY(20px) scale(.6) rotate(4deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(1px) scale(.78) rotate(-1deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(5px) scale(.74) rotate(0deg); }
}
@keyframes seatShadowIn{
  from{opacity:0; transform:translateX(-50%) translateY(10px) scale(.8);}
  to{opacity:1; transform:translateX(-50%) translateY(7px) scale(1);}
}
@keyframes mascotBobJ{
  0%,100%{ transform:translateX(-50%) translateY(3px) scale(.76); }
  50%{ transform:translateX(-50%) translateY(-1px) scale(.76); }
}
@keyframes mascotBobM{
  0%,100%{ transform:translateX(-50%) translateY(5px) scale(.74); }
  50%{ transform:translateX(-50%) translateY(1px) scale(.74); }
}

/* Give headroom */
.page-loader .loader-wrap{
  padding-top:40px;
}

@media(max-width:680px){
  .page-loader .loader-wrap{
    padding-top:28px;
  }
  .loader-seat-shadow{
    width:40px;
    height:8px;
    transform:translateX(-50%) translateY(5px);
  }
  .block-j .loader-mascot{
    width:48px;
  }
  .block-m .loader-mascot{
    width:54px;
  }
  @keyframes loaderMascotInJ{
    0%{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.62) rotate(-5deg); }
    55%{ opacity:1; transform:translateX(-50%) translateY(0px) scale(.79) rotate(1deg); }
    100%{ opacity:1; transform:translateX(-50%) translateY(2px) scale(.76) rotate(0deg); }
  }
  @keyframes loaderMascotInM{
    0%{ opacity:0; transform:translateX(-50%) translateY(15px) scale(.6) rotate(4deg); }
    55%{ opacity:1; transform:translateX(-50%) translateY(0px) scale(.77) rotate(-1deg); }
    100%{ opacity:1; transform:translateX(-50%) translateY(3px) scale(.74) rotate(0deg); }
  }
  @keyframes mascotBobJ{
    0%,100%{ transform:translateX(-50%) translateY(2px) scale(.76); }
    50%{ transform:translateX(-50%) translateY(-1px) scale(.76); }
  }
  @keyframes mascotBobM{
    0%,100%{ transform:translateX(-50%) translateY(3px) scale(.74); }
    50%{ transform:translateX(-50%) translateY(0px) scale(.74); }
  }
}


/* ==========================================================
   V4.3.7 · INTRO SEATED FIT
   Fit mascot size/position to the J and M text proportions.
   Mascots now sit on top of the glyphs using em-based alignment.
   ========================================================== */

/* keep loader brand as the sizing reference */
.loader-brand{
  line-height:.88;
}

/* each letter block follows letter scale, not fixed pixels */
.loader-letter-block{
  min-width:.92em;
  vertical-align:bottom;
}

/* seat shadow sized from letter width */
.loader-seat-shadow{
  left:50%;
  bottom:100%;
  width:.88em;
  height:.15em;
  transform:translateX(-50%) translateY(.12em);
  background:radial-gradient(circle at center, rgba(151,28,35,.17), rgba(151,28,35,0) 72%);
  filter:blur(1px);
}

/* mascots scale with type size */
.loader-mascot{
  bottom:100%;
  left:50%;
  height:auto;
  max-width:none;
  transform-origin:center bottom;
  filter:drop-shadow(0 .14em .28em rgba(53,24,26,.14));
}

/* Chaengmong: slightly smaller and centered on the J top */
.block-j{
  min-width:.78em;
}
.block-j .loader-seat-shadow{
  width:.74em;
}
.block-j .loader-mascot{
  width:.86em;
  transform:translateX(-50%) translateY(.23em) scale(1);
}
.block-j .loader-jm{
  transform-origin:center bottom;
}

/* Yoonmong: a little wider to match the M width */
.block-m{
  min-width:.96em;
}
.block-m .loader-seat-shadow{
  width:.98em;
}
.block-m .loader-mascot{
  width:1.02em;
  transform:translateX(-50%) translateY(.25em) scale(1);
}
.block-m .loader-jm{
  transform-origin:center bottom;
}

/* redefine intro motion so final pose lands exactly on the letter top */
.mascot-j{
  animation:loaderMascotSeatJ .82s .08s cubic-bezier(.16,1,.3,1) forwards,
            mascotBobSeatJ 2.8s 1.15s ease-in-out infinite;
}
.mascot-m{
  animation:loaderMascotSeatM .82s .20s cubic-bezier(.16,1,.3,1) forwards,
            mascotBobSeatM 2.9s 1.25s ease-in-out infinite;
}

@keyframes loaderMascotSeatJ{
  0%{ opacity:0; transform:translateX(-50%) translateY(.42em) scale(.82) rotate(-5deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(.14em) scale(1.04) rotate(1deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(.23em) scale(1) rotate(0deg); }
}
@keyframes loaderMascotSeatM{
  0%{ opacity:0; transform:translateX(-50%) translateY(.45em) scale(.8) rotate(4deg); }
  55%{ opacity:1; transform:translateX(-50%) translateY(.16em) scale(1.03) rotate(-1deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(.25em) scale(1) rotate(0deg); }
}
@keyframes mascotBobSeatJ{
  0%,100%{ transform:translateX(-50%) translateY(.23em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.18em) scale(1); }
}
@keyframes mascotBobSeatM{
  0%,100%{ transform:translateX(-50%) translateY(.25em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.20em) scale(1); }
}

/* give the loader enough headroom but tied to typography */
.page-loader .loader-wrap{
  padding-top:2.6em;
}

/* slightly tighten rest text so mascots remain visually centered */
.loader-rest{
  transform:translateY(-.02em) !important;
}

/* mobile scales with typography automatically; only small balance tweaks */
@media(max-width:680px){
  .page-loader .loader-wrap{
    padding-top:2.2em;
  }
  .block-j .loader-mascot{
    width:.92em;
    transform:translateX(-50%) translateY(.22em) scale(1);
  }
  .block-m .loader-mascot{
    width:1.08em;
    transform:translateX(-50%) translateY(.24em) scale(1);
  }
  .block-j .loader-seat-shadow{
    width:.78em;
  }
  .block-m .loader-seat-shadow{
    width:1.02em;
  }
  @keyframes loaderMascotSeatJ{
    0%{ opacity:0; transform:translateX(-50%) translateY(.36em) scale(.82) rotate(-5deg); }
    55%{ opacity:1; transform:translateX(-50%) translateY(.12em) scale(1.03) rotate(1deg); }
    100%{ opacity:1; transform:translateX(-50%) translateY(.22em) scale(1) rotate(0deg); }
  }
  @keyframes loaderMascotSeatM{
    0%{ opacity:0; transform:translateX(-50%) translateY(.38em) scale(.8) rotate(4deg); }
    55%{ opacity:1; transform:translateX(-50%) translateY(.14em) scale(1.02) rotate(-1deg); }
    100%{ opacity:1; transform:translateX(-50%) translateY(.24em) scale(1) rotate(0deg); }
  }
  @keyframes mascotBobSeatJ{
    0%,100%{ transform:translateX(-50%) translateY(.22em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.18em) scale(1); }
  }
  @keyframes mascotBobSeatM{
    0%,100%{ transform:translateX(-50%) translateY(.24em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.20em) scale(1); }
  }
}


/* ==========================================================
   V4.3.8 · INTRO NATURAL SEAT
   Make mascots feel naturally seated on the J/M text.
   Less floating, less bobbing, more overlap with the glyph top.
   ========================================================== */

/* The brand line becomes the main anchor */
.loader-brand{
  align-items:flex-end;
  line-height:.9;
  gap:.02em;
}

/* Give each letter a stable seating area */
.loader-letter-block{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  min-width:.88em;
  isolation:isolate;
}

/* Seat shadow: tighter and closer to the top edge */
.loader-seat-shadow{
  left:50%;
  bottom:100%;
  width:.70em;
  height:.10em;
  border-radius:999px;
  transform:translateX(-50%) translateY(.18em);
  background:radial-gradient(circle at center, rgba(93,20,24,.18), rgba(93,20,24,0) 72%);
  filter:blur(.5px);
  opacity:.85;
}

/* Mascots: smaller, lower, naturally resting on top */
.loader-mascot{
  position:absolute;
  bottom:100%;
  left:50%;
  max-width:none;
  height:auto;
  z-index:4;
  opacity:0;
  transform-origin:center bottom;
  filter:drop-shadow(0 .10em .18em rgba(53,24,26,.10));
  will-change:transform, opacity;
}

/* J side: compact and centered */
.block-j{
  min-width:.74em;
}
.block-j .loader-seat-shadow{
  width:.60em;
}
.block-j .loader-mascot{
  width:.72em;
  transform:translateX(-50%) translateY(.34em) scale(1);
}
.block-j .loader-jm{
  position:relative;
  z-index:3;
}

/* M side: slightly wider, but not oversized */
.block-m{
  min-width:.92em;
}
.block-m .loader-seat-shadow{
  width:.82em;
}
.block-m .loader-mascot{
  width:.86em;
  transform:translateX(-50%) translateY(.36em) scale(1);
}
.block-m .loader-jm{
  position:relative;
  z-index:3;
}

/* Subtle settle-in motion: almost no rotation, lands lower */
.mascot-j{
  animation:loaderMascotNaturalJ .62s .06s cubic-bezier(.18,.88,.32,1.08) forwards,
            mascotIdleJ 3.8s 1.0s ease-in-out infinite;
}
.mascot-m{
  animation:loaderMascotNaturalM .64s .16s cubic-bezier(.18,.88,.32,1.08) forwards,
            mascotIdleM 4.0s 1.06s ease-in-out infinite;
}
.loader-seat-shadow{
  animation:seatNaturalIn .48s .18s ease-out forwards;
}

@keyframes loaderMascotNaturalJ{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.46em) scale(.92);
  }
  65%{
    opacity:1;
    transform:translateX(-50%) translateY(.29em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.34em) scale(1);
  }
}
@keyframes loaderMascotNaturalM{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.48em) scale(.91);
  }
  65%{
    opacity:1;
    transform:translateX(-50%) translateY(.31em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.36em) scale(1);
  }
}
@keyframes seatNaturalIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(.23em) scale(.85);
  }
  to{
    opacity:.85;
    transform:translateX(-50%) translateY(.18em) scale(1);
  }
}

/* Idle movement is extremely subtle now */
@keyframes mascotIdleJ{
  0%,100%{ transform:translateX(-50%) translateY(.34em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.32em) scale(1); }
}
@keyframes mascotIdleM{
  0%,100%{ transform:translateX(-50%) translateY(.36em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.34em) scale(1); }
}

/* More natural text spacing so the mascots don't look detached */
.loader-rest{
  transform:translateY(0) !important;
}
.loader-dot{
  transform:translateY(-.01em) !important;
}

/* Slightly less headroom so the mascots feel tied to the letters */
.page-loader .loader-wrap{
  padding-top:2.15em;
}

/* mobile */
@media(max-width:680px){
  .page-loader .loader-wrap{
    padding-top:1.95em;
  }
  .block-j .loader-seat-shadow{
    width:.58em;
  }
  .block-m .loader-seat-shadow{
    width:.78em;
  }
  .block-j .loader-mascot{
    width:.76em;
    transform:translateX(-50%) translateY(.32em) scale(1);
  }
  .block-m .loader-mascot{
    width:.90em;
    transform:translateX(-50%) translateY(.34em) scale(1);
  }
  @keyframes loaderMascotNaturalJ{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.42em) scale(.92);
    }
    65%{
      opacity:1;
      transform:translateX(-50%) translateY(.27em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.32em) scale(1);
    }
  }
  @keyframes loaderMascotNaturalM{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.44em) scale(.91);
    }
    65%{
      opacity:1;
      transform:translateX(-50%) translateY(.29em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.34em) scale(1);
    }
  }
  @keyframes mascotIdleJ{
    0%,100%{ transform:translateX(-50%) translateY(.32em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.30em) scale(1); }
  }
  @keyframes mascotIdleM{
    0%,100%{ transform:translateX(-50%) translateY(.34em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.32em) scale(1); }
  }
}


/* ==========================================================
   V4.3.9 · INTRO FIXED LETTERS
   Letters stay fixed. Mascots settle onto them.
   Removes the floating/pop-up feeling from the text.
   ========================================================== */

/* Keep the whole loader word stable */
.loader-brand{
  align-items:flex-end;
  line-height:.9;
}

/* Letters should not pop upward anymore */
.loader-jm,
.page-loader .loader-rest,
.page-loader .loader-dot{
  opacity:1 !important;
  animation:none !important;
}

/* Fix each part in place */
.loader-jm{
  transform:translateY(0) scale(1) !important;
  text-shadow:0 .08em .18em rgba(151,28,35,.10);
}
.loader-rest{
  transform:translateY(0) !important;
}
.loader-dot{
  transform:translateY(-.01em) !important;
}

/* Only a gentle fade for the whole word so it doesn't feel abrupt */
.loader-brand{
  opacity:0;
  animation:loaderWordFadeIn .36s .02s ease-out forwards;
}
@keyframes loaderWordFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Stable seating blocks */
.loader-letter-block{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  isolation:isolate;
}

/* Letter widths tuned to text */
.block-j{ min-width:.74em; }
.block-m{ min-width:.92em; }

/* Seat shadows stay almost fixed */
.loader-seat-shadow{
  opacity:0;
  animation:seatFixedIn .30s .18s ease-out forwards !important;
}
@keyframes seatFixedIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(.22em) scale(.92);
  }
  to{
    opacity:.85;
    transform:translateX(-50%) translateY(.18em) scale(1);
  }
}

/* Mascots become the only moving element */
.block-j .loader-mascot{
  width:.72em;
  transform:translateX(-50%) translateY(.34em) scale(1);
}
.block-m .loader-mascot{
  width:.86em;
  transform:translateX(-50%) translateY(.36em) scale(1);
}

/* More natural "sit down" motion */
.mascot-j{
  animation:mascotSettleJ .56s .10s cubic-bezier(.2,.88,.3,1.06) forwards,
            mascotBreathJ 4.2s 1.05s ease-in-out infinite !important;
}
.mascot-m{
  animation:mascotSettleM .58s .20s cubic-bezier(.2,.88,.3,1.06) forwards,
            mascotBreathM 4.4s 1.10s ease-in-out infinite !important;
}

@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.46em) scale(.95);
  }
  60%{
    opacity:1;
    transform:translateX(-50%) translateY(.31em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.34em) scale(1);
  }
}
@keyframes mascotSettleM{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.48em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-50%) translateY(.33em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.36em) scale(1);
  }
}

/* Nearly static idle motion, like breathing not bobbing */
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-50%) translateY(.34em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.335em) scale(1.003); }
}
@keyframes mascotBreathM{
  0%,100%{ transform:translateX(-50%) translateY(.36em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.355em) scale(1.003); }
}

/* Slightly tighter top padding so letters feel anchored */
.page-loader .loader-wrap{
  padding-top:2.05em;
}

/* Mobile */
@media(max-width:680px){
  .page-loader .loader-wrap{
    padding-top:1.9em;
  }

  .block-j .loader-mascot{
    width:.76em;
    transform:translateX(-50%) translateY(.32em) scale(1);
  }
  .block-m .loader-mascot{
    width:.90em;
    transform:translateX(-50%) translateY(.34em) scale(1);
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.42em) scale(.95);
    }
    60%{
      opacity:1;
      transform:translateX(-50%) translateY(.29em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.32em) scale(1);
    }
  }
  @keyframes mascotSettleM{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.44em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-50%) translateY(.31em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.34em) scale(1);
    }
  }
  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-50%) translateY(.32em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.315em) scale(1.003); }
  }
  @keyframes mascotBreathM{
    0%,100%{ transform:translateX(-50%) translateY(.34em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.335em) scale(1.003); }
  }
}


/* ==========================================================
   V4.3.10 · INTRO SMALLER MASCOTS
   Reduce mascot scale for a cleaner, less awkward intro.
   Structure stays the same; only size/balance is tuned.
   ========================================================== */

/* Slightly smaller and cleaner seating shadows */
.block-j .loader-seat-shadow{
  width:.54em;
  height:.09em;
}
.block-m .loader-seat-shadow{
  width:.74em;
  height:.09em;
}

/* Reduce mascot scale 10~15% */
.block-j .loader-mascot{
  width:.62em;
  transform:translateX(-50%) translateY(.35em) scale(1);
  filter:drop-shadow(0 .08em .15em rgba(53,24,26,.09));
}
.block-m .loader-mascot{
  width:.74em;
  transform:translateX(-50%) translateY(.37em) scale(1);
  filter:drop-shadow(0 .08em .15em rgba(53,24,26,.09));
}

/* Re-tune settle motion for smaller mascots */
@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.44em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-50%) translateY(.32em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.35em) scale(1);
  }
}
@keyframes mascotSettleM{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.46em) scale(.93);
  }
  60%{
    opacity:1;
    transform:translateX(-50%) translateY(.34em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(.37em) scale(1);
  }
}

/* Breathing motion remains extremely subtle */
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-50%) translateY(.35em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.345em) scale(1.002); }
}
@keyframes mascotBreathM{
  0%,100%{ transform:translateX(-50%) translateY(.37em) scale(1); }
  50%{ transform:translateX(-50%) translateY(.365em) scale(1.002); }
}

/* mobile */
@media(max-width:680px){
  .block-j .loader-seat-shadow{
    width:.52em;
  }
  .block-m .loader-seat-shadow{
    width:.70em;
  }
  .block-j .loader-mascot{
    width:.66em;
    transform:translateX(-50%) translateY(.33em) scale(1);
  }
  .block-m .loader-mascot{
    width:.78em;
    transform:translateX(-50%) translateY(.35em) scale(1);
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.40em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-50%) translateY(.30em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.33em) scale(1);
    }
  }
  @keyframes mascotSettleM{
    0%{
      opacity:0;
      transform:translateX(-50%) translateY(.42em) scale(.93);
    }
    60%{
      opacity:1;
      transform:translateX(-50%) translateY(.32em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-50%) translateY(.35em) scale(1);
    }
  }

  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-50%) translateY(.33em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.325em) scale(1.002); }
  }
  @keyframes mascotBreathM{
    0%,100%{ transform:translateX(-50%) translateY(.35em) scale(1); }
    50%{ transform:translateX(-50%) translateY(.345em) scale(1.002); }
  }
}


/* ==========================================================
   V4.3.11 · INTRO POSITION TUNED
   Keep mascot size from V4.3.10, only micro-adjust position.
   Goal: reduce awkwardness by improving sit depth + center balance.
   ========================================================== */

/* Stable seating blocks */
.loader-letter-block{
  isolation:isolate;
}

/* J: slightly right, slightly deeper on the glyph */
.block-j .loader-seat-shadow{
  left:52%;
  transform:translateX(-50%) translateY(.20em);
}
.block-j .loader-mascot{
  width:.62em; /* keep same size */
  transform:translateX(-48%) translateY(.39em) scale(1);
}
@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-48%) translateY(.48em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-48%) translateY(.35em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-48%) translateY(.39em) scale(1);
  }
}
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-48%) translateY(.39em) scale(1); }
  50%{ transform:translateX(-48%) translateY(.385em) scale(1.002); }
}

/* M: slightly left, slightly deeper on the glyph */
.block-m .loader-seat-shadow{
  left:48%;
  transform:translateX(-50%) translateY(.21em);
}
.block-m .loader-mascot{
  width:.74em; /* keep same size */
  transform:translateX(-52%) translateY(.42em) scale(1);
}
@keyframes mascotSettleM{
  0%{
    opacity:0;
    transform:translateX(-52%) translateY(.50em) scale(.93);
  }
  60%{
    opacity:1;
    transform:translateX(-52%) translateY(.37em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-52%) translateY(.42em) scale(1);
  }
}
@keyframes mascotBreathM{
  0%,100%{ transform:translateX(-52%) translateY(.42em) scale(1); }
  50%{ transform:translateX(-52%) translateY(.415em) scale(1.002); }
}

/* Tighter anchor feel */
.page-loader .loader-wrap{
  padding-top:1.98em;
}

/* mobile mirrors the same positional logic */
@media(max-width:680px){
  .page-loader .loader-wrap{
    padding-top:1.84em;
  }

  .block-j .loader-seat-shadow{
    left:52%;
    transform:translateX(-50%) translateY(.18em);
  }
  .block-m .loader-seat-shadow{
    left:48%;
    transform:translateX(-50%) translateY(.19em);
  }

  .block-j .loader-mascot{
    width:.66em;
    transform:translateX(-48%) translateY(.37em) scale(1);
  }
  .block-m .loader-mascot{
    width:.78em;
    transform:translateX(-52%) translateY(.40em) scale(1);
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-48%) translateY(.44em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-48%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-48%) translateY(.37em) scale(1);
    }
  }
  @keyframes mascotSettleM{
    0%{
      opacity:0;
      transform:translateX(-52%) translateY(.46em) scale(.93);
    }
    60%{
      opacity:1;
      transform:translateX(-52%) translateY(.35em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-52%) translateY(.40em) scale(1);
    }
  }

  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-48%) translateY(.37em) scale(1); }
    50%{ transform:translateX(-48%) translateY(.365em) scale(1.002); }
  }
  @keyframes mascotBreathM{
    0%,100%{ transform:translateX(-52%) translateY(.40em) scale(1); }
    50%{ transform:translateX(-52%) translateY(.395em) scale(1.002); }
  }
}


/* ==========================================================
   V4.3.12 · INTRO TIMING
   Extend intro to ~2.6s and add a calm brand hold.
   ========================================================== */

.page-loader{
  transition:opacity .72s cubic-bezier(.16,1,.3,1), visibility .72s;
}

/* Keep the finished lockup visually steady after mascot settle */
.loader-brand{
  animation-duration:.42s !important;
}

/* slightly slower loading line so intro has readable rhythm */
.loader-line i{
  animation-duration:1.55s !important;
}

/* subtitle appears a touch later */
.page-loader small{
  animation-delay:.58s !important;
  animation-duration:.72s !important;
}

/* breathing motion stays nearly static */
.mascot-j{
  animation-duration:.60s, 4.4s !important;
}
.mascot-m{
  animation-duration:.62s, 4.6s !important;
}

/* smooth fade to main */
.page-loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}


/* ==========================================================
   V4.3.13 · INTRO SWAPPED MASCOTS
   Swap mascot positions only:
   J = Yoonmong, M = Chaengmong
   Keep timing and overall intro structure the same.
   ========================================================== */

/* J now hosts Yoonmong: slightly broader */
.block-j .loader-mascot{
  width:.68em !important;
  transform:translateX(-49%) translateY(.40em) scale(1) !important;
}

/* M now hosts Chaengmong: slightly more compact */
.block-m .loader-mascot{
  width:.68em !important;
  transform:translateX(-51%) translateY(.40em) scale(1) !important;
}

/* retune settle animation landing positions for the swapped pair */
@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-49%) translateY(.49em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-49%) translateY(.35em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-49%) translateY(.40em) scale(1);
  }
}
@keyframes mascotSettleM{
  0%{
    opacity:0;
    transform:translateX(-51%) translateY(.48em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-51%) translateY(.34em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-51%) translateY(.40em) scale(1);
  }
}

/* breathing aligned to swapped final positions */
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-49%) translateY(.40em) scale(1); }
  50%{ transform:translateX(-49%) translateY(.395em) scale(1.002); }
}
@keyframes mascotBreathM{
  0%,100%{ transform:translateX(-51%) translateY(.40em) scale(1); }
  50%{ transform:translateX(-51%) translateY(.395em) scale(1.002); }
}

@media(max-width:680px){
  .block-j .loader-mascot{
    width:.72em !important;
    transform:translateX(-49%) translateY(.38em) scale(1) !important;
  }
  .block-m .loader-mascot{
    width:.72em !important;
    transform:translateX(-51%) translateY(.38em) scale(1) !important;
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-49%) translateY(.45em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-49%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-49%) translateY(.38em) scale(1);
    }
  }
  @keyframes mascotSettleM{
    0%{
      opacity:0;
      transform:translateX(-51%) translateY(.45em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-51%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-51%) translateY(.38em) scale(1);
    }
  }

  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-49%) translateY(.38em) scale(1); }
    50%{ transform:translateX(-49%) translateY(.375em) scale(1.002); }
  }
  @keyframes mascotBreathM{
    0%,100%{ transform:translateX(-51%) translateY(.38em) scale(1); }
    50%{ transform:translateX(-51%) translateY(.375em) scale(1.002); }
  }
}


/* ==========================================================
   V4.3.14 · INTRO CAPY LEFT
   Move capybara (Yoonmong on J) slightly more to the left.
   Keep size, timing, and all other structure unchanged.
   ========================================================== */

/* J block = Yoonmong (capybara) */
.block-j .loader-seat-shadow{
  left:49% !important;
  transform:translateX(-50%) translateY(.20em) !important;
}
.block-j .loader-mascot{
  width:.68em !important;
  transform:translateX(-54%) translateY(.40em) scale(1) !important;
}

@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-54%) translateY(.49em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-54%) translateY(.35em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-54%) translateY(.40em) scale(1);
  }
}
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-54%) translateY(.40em) scale(1); }
  50%{ transform:translateX(-54%) translateY(.395em) scale(1.002); }
}

@media(max-width:680px){
  .block-j .loader-seat-shadow{
    left:49% !important;
    transform:translateX(-50%) translateY(.18em) !important;
  }
  .block-j .loader-mascot{
    width:.72em !important;
    transform:translateX(-54%) translateY(.38em) scale(1) !important;
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-54%) translateY(.45em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-54%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-54%) translateY(.38em) scale(1);
    }
  }
  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-54%) translateY(.38em) scale(1); }
    50%{ transform:translateX(-54%) translateY(.375em) scale(1.002); }
  }
}


/* ==========================================================
   V4.3.15 · INTRO CAPY MORE LEFT
   Move Yoonmong on J further left than V4.3.14.
   Keep size, timing, and all other structure unchanged.
   ========================================================== */

.block-j .loader-seat-shadow{
  left:46% !important;
  transform:translateX(-50%) translateY(.20em) !important;
}
.block-j .loader-mascot{
  width:.68em !important;
  transform:translateX(-59%) translateY(.40em) scale(1) !important;
}

@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-59%) translateY(.49em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-59%) translateY(.35em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-59%) translateY(.40em) scale(1);
  }
}
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-59%) translateY(.40em) scale(1); }
  50%{ transform:translateX(-59%) translateY(.395em) scale(1.002); }
}

@media(max-width:680px){
  .block-j .loader-seat-shadow{
    left:46% !important;
    transform:translateX(-50%) translateY(.18em) !important;
  }
  .block-j .loader-mascot{
    width:.72em !important;
    transform:translateX(-59%) translateY(.38em) scale(1) !important;
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-59%) translateY(.45em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-59%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-59%) translateY(.38em) scale(1);
    }
  }
  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-59%) translateY(.38em) scale(1); }
    50%{ transform:translateX(-59%) translateY(.375em) scale(1.002); }
  }
}


/* ==========================================================
   V4.3.16 · INTRO CAPY RIGHT
   Move Yoonmong on J noticeably to the right.
   Keep size, timing, and all other structure unchanged.
   ========================================================== */

.block-j .loader-seat-shadow{
  left:58% !important;
  transform:translateX(-50%) translateY(.20em) !important;
}
.block-j .loader-mascot{
  width:.68em !important;
  transform:translateX(-40%) translateY(.40em) scale(1) !important;
}

@keyframes mascotSettleJ{
  0%{
    opacity:0;
    transform:translateX(-40%) translateY(.49em) scale(.94);
  }
  60%{
    opacity:1;
    transform:translateX(-40%) translateY(.35em) scale(1.01);
  }
  100%{
    opacity:1;
    transform:translateX(-40%) translateY(.40em) scale(1);
  }
}
@keyframes mascotBreathJ{
  0%,100%{ transform:translateX(-40%) translateY(.40em) scale(1); }
  50%{ transform:translateX(-40%) translateY(.395em) scale(1.002); }
}

@media(max-width:680px){
  .block-j .loader-seat-shadow{
    left:58% !important;
    transform:translateX(-50%) translateY(.18em) !important;
  }
  .block-j .loader-mascot{
    width:.72em !important;
    transform:translateX(-40%) translateY(.38em) scale(1) !important;
  }

  @keyframes mascotSettleJ{
    0%{
      opacity:0;
      transform:translateX(-40%) translateY(.45em) scale(.94);
    }
    60%{
      opacity:1;
      transform:translateX(-40%) translateY(.33em) scale(1.01);
    }
    100%{
      opacity:1;
      transform:translateX(-40%) translateY(.38em) scale(1);
    }
  }
  @keyframes mascotBreathJ{
    0%,100%{ transform:translateX(-40%) translateY(.38em) scale(1); }
    50%{ transform:translateX(-40%) translateY(.375em) scale(1.002); }
  }
}


/* ==========================================================
   V4.4 RELEASE CANDIDATE · PRODUCTION POLISH
   ========================================================== */

.footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
.footer-links a{
  color:inherit;
  text-decoration:none;
}
.footer-links a:first-child{
  opacity:.66;
  font-size:12px;
}
.footer-links a:hover{
  opacity:1;
}
.privacy-check small a{
  color:#1769ff;
  text-underline-offset:2px;
}
.privacy-check small a:hover{
  text-decoration-thickness:2px;
}

/* Prevent mobile fixed CTA from covering footer content */
@media(max-width:680px){
  footer{
    padding-bottom:92px;
  }
  .footer-links{
    justify-content:flex-start;
    gap:12px;
  }
}

/* Better tap target for tiny inline privacy link */
@media(pointer:coarse){
  .privacy-check small a{
    display:inline-block;
    padding:3px 0;
  }
}