/* OC app scene: a slim cropped device, with cash projected from its screen. */
.hero.campaign-scene { background:#071631; }
.hero::after { display:none; }
.hero-backdrop { position:absolute; z-index:-2; inset:-22px; overflow:hidden; pointer-events:none; }
.hero-backdrop img { width:100%; height:100%; object-fit:cover; object-position:center; filter:blur(15px) saturate(.93); opacity:.77; }
.hero::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#06132ff2 0%,#06132fe8 24%,#06132fc7 43%,#06132f6b 67%,#06132f35 100%); }
.hero .hero-layout { width:min(1100px,calc(100% - 144px)); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:34px; min-height:570px; align-items:center; padding-block:30px; }
.hero .hero-copy { max-width:none; padding:0; text-align:left; }
.hero .hero-services { margin-bottom:22px; font-size:13px; }
.hero h1 { font-size:clamp(42px,4vw,60px); line-height:1.21; white-space:nowrap; }
.hero .hero-description { font-size:15px; margin-top:23px; }
.hero .hero-actions { display:flex; flex-wrap:nowrap; gap:22px; margin-top:29px; }
.hero .hero-actions .primary { white-space:nowrap; padding:18px 22px; font-size:14px; }
.hero .hero-actions .primary::after { display:none!important; }
.hero .hero-actions .text-link { flex:none; white-space:nowrap; font-size:13px; }
.hero-object { position:relative; isolation:isolate; width:100%; max-width:490px; height:530px; justify-self:center; pointer-events:none; transform:translate3d(var(--hero-object-x,0px),var(--hero-object-y,0px),0); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.hero-burst-aura { position:absolute; z-index:-1; width:76%; aspect-ratio:1; left:18%; top:-7%; border-radius:50%; background:radial-gradient(circle,#4e9cff7d 0,#2464ef48 35%,transparent 70%); filter:blur(27px); opacity:.55; animation:hero-aura-pop 1s .08s ease-out both; }
.hero-phone { position:absolute; z-index:1; left:50%; bottom:-11px; width:236px; height:480px; box-sizing:border-box; padding:5px; border:2px solid #899ab8; border-radius:43px; background:linear-gradient(130deg,#b6c7df,#243655 25%,#0a1020 67%,#b8cce9); box-shadow:0 24px 36px #000b2280,0 5px 21px #5192ff43,inset 0 0 0 2px #081528; transform:translateX(-50%) rotate(-5deg); animation:hero-phone-enter .75s cubic-bezier(.18,.8,.2,1) both; }
.hero-phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:35px; background:#f3f6fb; color:#182844; box-shadow:inset 0 0 3px #0008; }
.hero-phone-status { position:absolute; z-index:5; top:12px; left:17px; right:16px; display:flex; align-items:center; justify-content:space-between; font-family:Arial,sans-serif; font-size:10px; font-weight:700; }
.hero-phone-signal { font-size:8px; letter-spacing:-2px; }
.hero-phone-camera { position:absolute; z-index:6; top:9px; left:50%; width:63px; height:17px; transform:translateX(-50%); border-radius:20px; background:#0d1627; box-shadow:inset -7px 0 7px #283449; }
.hero-app-screen { position:absolute; inset:45px 0 0; padding:0 15px 24px; text-align:left; }
.hero-app-brand { display:flex; align-items:center; gap:5px; color:#172747; font-size:17px; letter-spacing:-.055em; }
.hero-app-brand img { width:27px; height:14px; }
.hero-app-avatar { margin-left:auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#e2e9f7; color:#4b648d; font:700 9px/1 Arial,sans-serif; letter-spacing:0; }
.hero-app-greeting { margin:24px 0 0; color:#62718b; font-size:10px; line-height:1.45; }
.hero-app-greeting strong { color:#172744; font-size:14px; }
.hero-app-products { display:flex; gap:4px; margin-top:15px; white-space:nowrap; }
.hero-app-products span { border-radius:9px; padding:6px 7px; background:#e7edfa; color:#395c9f; font-size:8px; font-weight:700; }
.hero-app-products span:first-child { background:#dce9ff; color:#1552d2; }
.hero-app-card { position:relative; z-index:2; margin-top:44px; padding:15px 13px 13px; border-radius:15px; background:#fff; box-shadow:0 7px 22px #173a7a16; }
.hero-app-card>span { color:#73819a; font-size:10px; }
.hero-app-number { display:flex; align-items:baseline; gap:3px; margin-top:4px; color:#122b5b; font-size:24px; font-weight:800; line-height:1.25; letter-spacing:-.06em; white-space:nowrap; }
.hero-app-number output { display:inline-flex; align-items:baseline; }
.hero-app-number>span { font-size:12px; }
.hero-app-card small { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:9px; border-top:1px solid #e5eaf3; color:#265cec; font-size:9px; font-weight:700; }
.hero-app-card small b { font-size:13px; }
.hero-app-row { display:flex; justify-content:space-between; align-items:center; margin-top:15px; padding:11px 12px; border-radius:12px; background:#eaf0f9; color:#476083; font-size:9px; font-weight:700; }
.hero-app-row b { color:#2a60dd; font-size:17px; line-height:0; }
.hero-app-nav { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; border-top:1px solid #e5eaf2; padding:10px 0 12px; color:#97a6bd; font-size:9px; font-weight:700; background:#fff; }
.hero-app-nav span:first-child { color:#245cf6; }
.hero-cash { position:absolute; z-index:3; width:390px; height:auto; max-width:none; left:58%; top:-40px; transform-origin:49% 92%; filter:drop-shadow(0 16px 14px #02102d70); animation:hero-cash-pop 1.08s .12s cubic-bezier(.17,.82,.18,1) both; }
@keyframes hero-phone-enter { from { opacity:0; transform:translateX(-50%) translateY(23px) rotate(-8deg) scale(.96); } to { opacity:1; transform:translateX(-50%) rotate(-5deg) scale(1); } }
@keyframes hero-cash-pop { 0% { opacity:0; transform:translateX(-50%) translateY(95px) scale(.23) rotate(-9deg); } 55% { opacity:1; transform:translateX(-50%) translateY(-9px) scale(1.06) rotate(2deg); } 77% { transform:translateX(-50%) translateY(4px) scale(.985) rotate(-1deg); } 100% { opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes hero-aura-pop { from { opacity:0; transform:scale(.3); } 55% { opacity:.73; transform:scale(1.13); } to { opacity:.55; transform:scale(1); } }
.hero-app-number.is-long { font-size:20px; }
@media (max-width:1100px) and (min-width:761px) { .hero .hero-layout { width:calc(100% - 96px); min-height:530px; gap:13px; } .hero h1 { font-size:clamp(37px,4.1vw,46px); } .hero .hero-actions { gap:15px; } .hero .hero-actions .primary { font-size:13px; padding:16px; } .hero .hero-actions .text-link { font-size:13px; } .hero-object { height:490px; } .hero-phone { width:218px; height:444px; bottom:-10px; } .hero-cash { width:350px; top:-27px; } .hero-app-card { margin-top:34px; } }
@media (max-width:760px) { .hero::before { background:linear-gradient(180deg,#06132ff2 0%,#06132fea 36%,#06132fb5 73%,#06132f79 100%); } .hero-backdrop img { object-position:70% center; opacity:.59; filter:blur(19px) saturate(.84); } .hero .hero-layout { display:flex; flex-direction:column; gap:0; width:calc(100% - 52px); min-height:0; padding:35px 0 0; } .hero .hero-copy { width:100%; text-align:center; } .hero .hero-services { font-size:12px; margin-bottom:17px; } .hero h1 { font-size:clamp(29px,5.7vw,40px); line-height:1.24; } .hero .hero-description { font-size:13px; margin-top:18px; } .hero .hero-actions { justify-content:center; gap:18px; margin-top:22px; } .hero .hero-actions .primary { padding:16px 18px; font-size:13px; } .hero .hero-actions .text-link { font-size:13px; } .hero-object { width:min(100%,405px); height:335px; margin-top:25px; } .hero-phone { width:184px; height:376px; bottom:-83px; border-radius:33px; padding:4px; } .hero-phone-screen { border-radius:27px; } .hero-phone-status { top:9px; left:13px; right:12px; font-size:8px; } .hero-phone-signal { font-size:7px; } .hero-phone-camera { width:48px; height:13px; top:7px; } .hero-app-screen { inset:35px 0 0; padding:0 11px 15px; } .hero-app-brand { font-size:14px; } .hero-app-brand img { width:20px; height:11px; } .hero-app-avatar { width:20px; height:20px; font-size:7px; } .hero-app-greeting { margin-top:18px; font-size:8px; } .hero-app-greeting strong { font-size:11px; } .hero-app-products { gap:3px; margin-top:11px; } .hero-app-products span { padding:5px; border-radius:7px; font-size:6px; } .hero-app-card { margin-top:33px; padding:11px 10px; border-radius:11px; } .hero-app-card>span { font-size:8px; } .hero-app-number { font-size:18px; } .hero-app-number>span { font-size:9px; } .hero-app-number.is-long { font-size:15px; } .hero-app-card small { margin-top:9px; padding-top:6px; font-size:7px; } .hero-app-row { margin-top:10px; padding:8px; font-size:7px; } .hero-app-nav { font-size:7px; padding:7px 0; } .hero-cash { width:290px; top:-15px; left:57%; } }
@media (max-width:520px) { .hero .hero-layout { width:calc(100% - 56px); padding-top:31px; } .hero h1 { font-size:clamp(29px,8vw,34px); } .hero .hero-services { font-size:11px; letter-spacing:0; } .hero .hero-description { font-size:13px; } .hero .hero-actions { gap:15px; } .hero .hero-actions .primary { padding:15px 16px; font-size:13px; gap:9px; } .hero .hero-actions .text-link { font-size:12px; gap:6px; } .hero-object { height:305px; margin-top:20px; } .hero-phone { width:172px; height:352px; bottom:-79px; } .hero-cash { width:270px; top:-11px; } .hero-app-card { margin-top:31px; } }
@media (max-width:360px) { .hero .hero-layout { width:calc(100% - 44px); } .hero h1 { font-size:28px; } .hero .hero-actions { gap:10px; } .hero .hero-actions .primary { padding-inline:12px; font-size:13px; } .hero-object { height:285px; } .hero-phone { width:163px; height:334px; bottom:-75px; } .hero-cash { width:250px; top:-8px; } .hero-app-card { margin-top:25px; } }
.effects-paused .hero-object,.page-hidden .hero-object { transform:none; transition:none; }
.effects-paused .hero-phone,.effects-paused .hero-cash,.effects-paused .hero-burst-aura,.page-hidden .hero-phone,.page-hidden .hero-cash,.page-hidden .hero-burst-aura { animation:none; }
.effects-paused .hero-cash,.page-hidden .hero-cash { transform:translateX(-50%); opacity:1; }
.effects-paused .hero-phone,.page-hidden .hero-phone { transform:translateX(-50%) rotate(-5deg); opacity:1; }
@media (prefers-reduced-motion:reduce) { .hero-object { transform:none; transition:none; } .hero-phone,.hero-cash,.hero-burst-aura { animation:none; } .hero-phone { transform:translateX(-50%) rotate(-5deg); } .hero-cash { transform:translateX(-50%); } }
/* Direct contact is the decision at the end of the hero message. */
.hero .hero-actions{gap:12px;align-items:stretch}
.hero-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hero-contact:hover{transform:translateY(-3px)}
.hero-contact:active{transform:translateY(0)}
.hero-contact-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-contact-arrow{width:17px;height:17px;margin-left:8px;transition:transform .25s ease}
.hero-contact:hover .hero-contact-arrow{transform:translateX(3px)}
.hero-contact-kakao{background:#fee500;color:#201d13;box-shadow:0 12px 28px #fee5002b,inset 0 1px 0 #fff9}
.hero-contact-kakao:hover{background:#ffeb36;box-shadow:0 16px 34px #fee50045}
.hero-contact-kakao .hero-contact-icon path:first-child{fill:currentColor}
.hero-contact-kakao .hero-contact-icon path:last-child{stroke:#fee500;stroke-width:3.2}
.hero-contact-phone{border:1px solid #b5caff99;background:#e9f0ff16;color:#fff;box-shadow:inset 0 1px 0 #fff2}
.hero-contact-phone:hover{background:#e9f0ff29;box-shadow:0 12px 28px #2e69ef2b}

/* Crop the empty lower portion of the app while preserving the visible phone and cash origin. */
.hero .hero-layout{min-height:520px;padding-block:22px}
.hero-object{height:470px}
.hero-phone{width:270px;height:550px;bottom:-140px;border-radius:49px}
.hero-phone-screen{border-radius:41px}
.hero-cash{width:455px;top:-25px}
.hero-cash-behind{position:absolute;z-index:0;left:52%;bottom:0;width:650px;height:auto;max-width:none;pointer-events:none;filter:brightness(.95) saturate(.88) blur(.6px) drop-shadow(0 16px 16px #010d27a0);animation:hero-behind-enter .95s .14s ease-out both}
@keyframes hero-behind-enter{from{opacity:0;transform:translateX(-50%) translateY(22px) scale(.96)}to{opacity:.92;transform:translateX(-50%) translateY(0) scale(1)}}
@media (max-width:1100px) and (min-width:761px){
  .hero .hero-layout{min-height:490px;padding-block:20px}
  .hero-object{height:430px}
  .hero-phone{width:248px;height:506px;bottom:-132px;border-radius:46px}
  .hero-phone-screen{border-radius:38px}
  .hero-cash{width:405px;top:-16px}
  .hero-cash-behind{width:560px}
  .hero-contact{min-height:51px;padding-inline:14px;font-size:13px}
  .hero-contact-arrow{margin-left:2px}
}
@media (max-width:760px){
  .hero .hero-layout{min-height:0;padding:35px 0 0}
  .hero-object{height:372px}
  .hero-phone{width:220px;height:450px;bottom:-120px;border-radius:39px}
  .hero-phone-screen{border-radius:32px}
  .hero-cash{width:340px;top:-15px}
  .hero-cash-behind{width:480px;left:50%;bottom:-7px}
  .hero .hero-actions{gap:9px}
  .hero-contact{min-height:49px;padding-inline:13px;font-size:13px;gap:8px}
  .hero-contact-icon{width:19px;height:19px}
  .hero-contact-arrow{display:none}
}
@media (max-width:520px){
  .hero .hero-layout{padding-top:31px}
  .hero-object{height:334px;margin-top:20px}
  .hero-phone{width:205px;height:420px;bottom:-115px;border-radius:37px}
  .hero-phone-screen{border-radius:30px}
  .hero-cash{width:320px;top:-11px}
  .hero-cash-behind{width:430px;bottom:-8px}
  .hero-contact{min-height:48px;padding-inline:12px;font-size:13px}
}
@media (max-width:360px){
  .hero-object{height:308px}
  .hero-phone{width:194px;height:397px;bottom:-115px}
  .hero-cash{width:295px;top:-8px}
  .hero-cash-behind{width:390px;bottom:-7px}
  .hero-contact{padding-inline:10px;font-size:12px;gap:6px}
  .hero-contact-icon{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){.hero-contact,.hero-contact-arrow{transition:none}.hero-cash-behind{animation:none;opacity:.92;transform:translateX(-50%)}}
.effects-paused .hero-cash-behind,.page-hidden .hero-cash-behind{animation:none;opacity:.92;transform:translateX(-50%)}