/* =========================================================
   파랑 / PARANG — Design System
   White base · Blue accent · Playful & bouncy
   ========================================================= */

/* ---- Fonts ---- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');
/* Gabarito (display, friendly geometric) + Space Grotesk loaded in HTML head */

:root{
  /* paper / ink */
  --paper:#FFFFFF;
  --mist:#F1F5FF;
  --mist-2:#E7EEFF;
  --ink:#0A1430;
  --ink-soft:#54608A;
  --line:#DEE6FB;

  /* parang blues */
  --parang:#1B45FF;
  --parang-600:#1235D6;
  --parang-700:#0C27A8;
  --bright:#3A6BFF;
  --sky:#2BC4FF;
  --peri:#8AA3FF;
  --blue-100:#D9E4FF;
  --blue-50:#EEF3FF;

  /* one warm pop, used sparingly */
  --spark:#FFD23F;
  --coral:#FF6F5E;
  --magenta:#E6007E;

  /* type */
  --kr:"Pretendard","Pretendard Variable",system-ui,sans-serif;
  --display:"Gabarito",var(--kr);
  --mono:"Space Grotesk","Gabarito",monospace;

  /* spacing / radius */
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;
  --shadow:0 18px 50px -22px rgba(16,40,120,.45);
  --shadow-sm:0 8px 24px -14px rgba(16,40,120,.5);
  --ease:cubic-bezier(.34,1.56,.64,1); /* overshoot / bouncy */
  --page:min(1240px,92vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--kr);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--parang);color:#fff}

/* hide native cursor only when custom cursor active (desktop) */
body.has-cursor,body.has-cursor *{cursor:none}

/* ---- Type helpers ---- */
.eyebrow{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(12px,1vw,14px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--parang);
  display:inline-flex;align-items:center;gap:.6em;
}
/* Korean reads badly with wide tracking — tighten when it contains Hangul */
.eyebrow.kr{letter-spacing:.01em;text-transform:none}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--parang);border-radius:2px;
}
h1,h2,h3{line-height:1.02;letter-spacing:-.02em;font-weight:800}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.03em}

/* ---- Buttons ---- */
.btn{
  --bg:var(--parang);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  padding:16px 26px;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:16px;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .2s;
  box-shadow:var(--shadow-sm);
  will-change:transform;
}
.btn:hover{box-shadow:0 16px 34px -12px rgba(27,69,255,.6)}
.btn:active{transform:scale(.96)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px) rotate(0)}
.btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{--bg:var(--mist);box-shadow:inset 0 0 0 2px var(--parang)}
.btn.dark{--bg:var(--ink);--fg:#fff}

.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:7px 14px;border-radius:100px;
  font-size:13px;font-weight:700;font-family:var(--mono);letter-spacing:.02em;
  background:var(--blue-50);color:var(--parang);white-space:nowrap;
}
.pill.soon{background:#FFF6DA;color:#A07A00}
.pill.live{background:#E1FBEA;color:#0E8A43}
.pill.dev{background:var(--blue-50);color:var(--parang)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill.live .dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ---- Custom cursor ---- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;mix-blend-mode:normal;
}
.cursor-dot{width:8px;height:8px;background:var(--parang);transform:translate(-50%,-50%)}
.cursor-ring{
  width:42px;height:42px;border:2px solid var(--parang);
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background .2s,border-color .2s,opacity .2s;
}
.cursor-ring.hot{width:64px;height:64px;background:rgba(27,69,255,.12);border-color:var(--parang)}
.cursor-ring.grab{width:30px;height:30px;background:rgba(27,69,255,.18)}
.cursor-label{
  position:fixed;z-index:9999;pointer-events:none;
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--ink);color:#fff;padding:5px 10px;border-radius:100px;
  transform:translate(-50%,-160%);opacity:0;transition:opacity .2s;white-space:nowrap;
}
@media (hover:none){.cursor-dot,.cursor-ring,.cursor-label{display:none}}

/* ---- Nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter,clamp(20px,4vw,48px));
  transition:background .3s,box-shadow .3s,padding .3s;
}
.nav.scrolled{
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand .mark{
  width:30px;height:30px;border-radius:9px;background:var(--parang);
  position:relative;flex:none;box-shadow:0 6px 14px -6px var(--parang);
}
.brand .mark::after{
  content:"";position:absolute;inset:0;border-radius:9px;
  background:radial-gradient(circle at 32% 30%,#fff8 0 18%,transparent 40%);
}
.brand small{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--ink-soft);letter-spacing:.18em;margin-top:3px}
.brand-logo{height:34px;width:auto;display:block}
.nav .brand-logo{height:44px}
.foot .brand-logo{height:46px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  padding:9px 15px;border-radius:100px;font-weight:600;font-size:15px;color:var(--ink-soft);white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:var(--mist)}
.nav-links a.btn,.nav-links a.btn:hover{color:#fff;background:var(--parang)}
.nav-links a.btn:hover{box-shadow:0 16px 34px -12px rgba(27,69,255,.6)}
@media (max-width:780px){.nav-links .hide-sm{display:none}}

/* ---- Layout ---- */
.wrap{width:var(--page);margin-inline:auto}
section{position:relative}
.section-pad{padding:clamp(80px,12vh,150px) 0}

/* ---- Hero / playground ---- */
.hero{
  position:relative;height:100svh;min-height:680px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%,#fff 0,var(--mist) 70%,var(--mist-2) 100%);
}
.playground{position:absolute;inset:0;z-index:1}
.bubble{
  position:absolute;top:0;left:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;will-change:transform;user-select:none;
  font-weight:800;letter-spacing:-.02em;
}
.bubble.deco{box-shadow:inset 0 -8px 18px rgba(0,0,0,.10),inset 0 8px 14px rgba(255,255,255,.5)}
.bubble.svc{
  color:#fff;box-shadow:0 22px 40px -20px rgba(12,30,90,.6),inset 0 -10px 22px rgba(0,0,0,.16),inset 0 10px 18px rgba(255,255,255,.28);
  transition:filter .2s;
}
.bubble.svc:hover{filter:brightness(1.06)}
.bubble.svc .name{font-size:clamp(15px,1.5vw,19px);line-height:1.05}
.bubble.svc .tag{
  margin-top:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;
  background:rgba(255,255,255,.22);padding:3px 9px;border-radius:100px;
}
.bubble .gloss{position:absolute;top:14%;left:20%;width:34%;height:26%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.85),transparent 70%);pointer-events:none}

.hero-copy{
  position:absolute;z-index:3;left:0;right:0;top:clamp(78px,10vh,120px);
  text-align:center;pointer-events:none;padding:0 20px;
}
.hero-copy .eyebrow{pointer-events:auto}
.hero-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(60px,12.5vw,180px);line-height:.86;letter-spacing:-.045em;
  color:var(--ink);margin:18px 0 6px;
}
.hero-title .o{color:var(--parang);position:relative}
.hero-sub-en{font-family:var(--mono);font-weight:600;letter-spacing:.42em;font-size:clamp(13px,1.6vw,20px);color:var(--parang);text-transform:uppercase;padding-left:.42em}
.hero-tag{
  margin:26px auto 0;max-width:640px;font-size:clamp(17px,2vw,21px);color:var(--ink-soft);font-weight:500;
  text-wrap:balance;
}
.hero-tag b{color:var(--ink);font-weight:700}
.hero-cta{margin-top:30px;display:inline-flex;gap:12px;pointer-events:auto;flex-wrap:wrap;justify-content:center}

.hero-hint{display:none}
.hero-hint.x{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.9);
  pointer-events:none;text-shadow:0 1px 8px rgba(8,24,80,.4);
}
.hero-hint .grab-ic{font-size:20px;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(8deg)}}
.note-flag{
  position:absolute;z-index:5;right:16px;bottom:16px;white-space:nowrap;
  background:#FFF6DA;color:#8a6a00;font-size:12px;font-weight:600;
  padding:8px 13px;border-radius:100px;border:1px dashed #E6C24a;pointer-events:none;
  font-family:var(--mono);letter-spacing:.02em;
}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Transformation / narrative ---- */
.shift{background:var(--paper);overflow:hidden}
.shift-head{text-align:center;max-width:760px;margin:0 auto 56px}
.shift-head h2{font-size:clamp(34px,5.4vw,68px)}
.shift-head .swap{position:relative;display:inline-block}
.kicker{font-size:clamp(34px,5.4vw,68px);font-weight:800;letter-spacing:-.03em}
.strike{position:relative;color:var(--ink-soft)}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:6px;background:var(--coral);border-radius:6px;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .2s}
.strike.on::after{transform:scaleX(1)}
.grow{color:var(--parang)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  background:var(--mist);border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--parang);letter-spacing:.1em}
.step h3{font-size:23px;margin:14px 0 8px}
.step p{color:var(--ink-soft);font-size:15px;line-height:1.6}
.step .blob{position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:var(--blue-100);opacity:.6}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---- Services ---- */
.services{background:linear-gradient(180deg,var(--paper),var(--mist) 60%,var(--paper))}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,46px);max-width:none;flex:1 1 460px}
.sec-head p{color:var(--ink-soft);max-width:34ch;font-size:16px}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc-card{
  position:relative;border-radius:var(--r-lg);padding:32px;overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  display:flex;flex-direction:column;gap:18px;min-height:268px;
}
.svc-card:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:var(--shadow)}
.svc-card .top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.svc-ic{
  width:62px;height:62px;border-radius:18px;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:26px;font-family:var(--display);
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.18),inset 0 8px 14px rgba(255,255,255,.3);
}
.svc-card h3{font-size:27px}
.svc-card .desc{color:var(--ink-soft);font-size:15.5px;line-height:1.6;flex:1}
.svc-card .go{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--parang);font-size:15px}
.svc-card .go .arrow{transition:transform .35s var(--ease)}
.svc-card:hover .go .arrow{transform:translateX(5px)}
.svc-card .bg-num{position:absolute;right:-10px;bottom:-44px;font-family:var(--display);font-weight:800;font-size:200px;color:var(--blue-50);z-index:0;line-height:1}
.svc-card>*{position:relative;z-index:1}

/* ---- Big statement / AI ---- */
.ai{background:var(--ink);color:#fff;border-radius:0;overflow:hidden;position:relative}
.ai .wrap{position:relative;z-index:2}
.ai .eyebrow{color:var(--sky)}
.ai .eyebrow::before{background:var(--sky)}
.ai h2{font-size:clamp(34px,6vw,82px);max-width:16ch;margin:22px 0 0}
.ai h2 em{font-style:normal;color:var(--sky)}
.ai .lead{color:#AEB9E6;max-width:52ch;margin-top:26px;font-size:18px;line-height:1.65}
.ai-blobs{position:absolute;inset:0;z-index:1;overflow:hidden}
.ai-blob{position:absolute;border-radius:50%;filter:blur(38px);opacity:.5}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
.feat .f{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:26px}
.feat .f .fi{width:44px;height:44px;border-radius:13px;background:var(--parang);display:grid;place-items:center;margin-bottom:16px;font-size:20px}
.feat .f h4{font-size:19px;margin-bottom:8px}
.feat .f p{color:#9AA6D6;font-size:14.5px;line-height:1.6}
@media (max-width:820px){.feat{grid-template-columns:1fr}}

/* ---- Partners marquee ---- */
.partners{background:var(--paper);padding:clamp(44px,6vh,76px) 0 clamp(56px,8vh,92px);overflow:hidden}
.partners .lead{text-align:center;color:var(--ink-soft);font-weight:700;margin-bottom:40px;font-size:14px;font-family:var(--mono);letter-spacing:.01em}
.marquee{display:flex;gap:72px;width:max-content;align-items:center;animation:scrollx 48s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee-mask{position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@keyframes scrollx{to{transform:translateX(-50%)}}
.chip{
  display:flex;align-items:center;justify-content:center;flex:none;
  height:150px;padding:0 24px;
}
.chip img{height:clamp(78px,8.4vw,108px);width:auto;max-width:360px;object-fit:contain;filter:grayscale(.25);opacity:.78;transition:filter .3s,opacity .3s,transform .3s}
.chip:hover img{filter:none;opacity:1;transform:scale(1.05)}

/* ---- CTA / contact ---- */
.cta{
  background:var(--parang);color:#fff;border-radius:var(--r-xl);
  padding:clamp(48px,8vw,84px);text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.cta h2{font-size:clamp(34px,6vw,72px);position:relative;z-index:2}
.cta p{color:#D6E0FF;margin:20px auto 32px;max-width:44ch;font-size:18px;position:relative;z-index:2}
.cta .btn.dark{position:relative;z-index:2}
.cta-ball{position:absolute;border-radius:50%;background:rgba(255,255,255,.13);z-index:1}

/* ---- Footer ---- */
.foot{background:var(--paper);padding:60px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot .brand{font-size:24px}
.foot .meta{color:var(--ink-soft);font-size:14px;line-height:1.9;max-width:42ch;margin-top:16px}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h5{font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;font-weight:600;color:var(--ink);font-size:15px;white-space:nowrap}
.foot-col a:hover{color:var(--parang)}
.foot-col .soon{display:flex;align-items:center;gap:7px;padding:5px 0;font-weight:600;color:var(--ink-soft);font-size:15px;white-space:nowrap;cursor:default}
.foot-col .soon i{font-style:normal;font-family:var(--kr);font-size:11px;font-weight:700;color:#7C879E;background:var(--mist);padding:1px 7px;border-radius:100px}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-soft);font-size:13px;font-family:var(--mono)}

.svc-card.locked{cursor:default}
.svc-card.locked:hover{transform:none;box-shadow:var(--shadow-sm)}
/* magnetic helper */
.magnetic{will-change:transform;transition:transform .4s var(--ease)}

/* ===== Wave (파랑 = 파도/물결) ===== */
.hero-wave{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:0;overflow:hidden;pointer-events:none}
.hero-wave .layer{position:absolute;left:0;right:0;bottom:0;background-repeat:repeat-x;background-position:bottom;will-change:background-position}
.hero-wave .w1{height:150px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='150' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C100 40 200 40 300 80 S500 120 600 80 S800 40 900 80 S1100 120 1200 80 L1200 150 L0 150 Z' fill='%231B45FF' fill-opacity='0.09'/%3E%3C/svg%3E");background-size:1200px 150px;animation:waveSlide 22s linear infinite}
.hero-wave .w2{height:120px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='120' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C75 35 150 35 225 70 S375 105 450 70 S600 35 675 70 S825 105 900 70 L900 120 L0 120 Z' fill='%232BC4FF' fill-opacity='0.12'/%3E%3C/svg%3E");background-size:900px 120px;animation:waveSlide2 14s linear infinite}
@keyframes waveSlide{from{background-position-x:0}to{background-position-x:1200px}}
@keyframes waveSlide2{from{background-position-x:0}to{background-position-x:-900px}}
@media (prefers-reduced-motion:reduce){.hero-wave .layer{animation:none}}

/* wavy underline highlight */
.wavy{position:relative;color:var(--parang);white-space:nowrap}
.wavy::after{content:"";position:absolute;left:0;right:0;bottom:-.16em;height:.16em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q10 -1 20 5 T40 5' fill='none' stroke='%231B45FF' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:auto 100%;}

/* ===== Section label/summary (info-delivery) ===== */
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sec-label .num{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--parang);letter-spacing:.02em;white-space:nowrap}
.sec-label .ln{flex:1;height:1px;background:var(--line)}
.learn{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--parang);font-size:15px;font-family:var(--kr)}
.learn .arrow{transition:transform .35s var(--ease)}
.learn:hover .arrow{transform:translateX(5px)}

/* ===== 파랑의 약속 (values) ===== */
.promise{background:var(--paper);overflow:hidden}
.promise .head{max-width:880px;margin-bottom:54px}
.promise .head h2{font-size:clamp(32px,5vw,60px);line-height:1.12}
.promise .head p{color:var(--ink-soft);font-size:18px;margin-top:28px;max-width:62ch;line-height:1.7}
.promise .head p b{color:var(--ink)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.val-grid{grid-template-columns:1fr}}
.val{background:var(--mist);border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.val:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.val .vn{width:52px;height:52px;border-radius:15px;background:radial-gradient(circle at 34% 28%,var(--bright),var(--parang-700));color:#fff;display:grid;place-items:center;font-size:24px;font-family:var(--display);font-weight:800;box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),inset 0 6px 10px rgba(255,255,255,.3);margin-bottom:20px}
.val h3{font-size:23px;margin-bottom:11px}
.val p{color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.val .wm{position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:var(--blue-100);opacity:.5}

/* ===== 사업 영역 (two axes) ===== */
.biz{background:linear-gradient(180deg,var(--paper),var(--mist) 70%)}
.biz-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
@media (max-width:860px){.biz-grid{grid-template-columns:1fr}}
.biz-card{border-radius:var(--r-lg);padding:42px;position:relative;overflow:hidden;min-height:360px;display:flex;flex-direction:column}
.biz-card .bz-tag{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.biz-card h3{font-size:clamp(27px,3.4vw,38px);margin:16px 0 14px;line-height:1.08}
.biz-card p{font-size:16.5px;line-height:1.7;flex:1}
.biz-card .bz-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.biz-card .bz-tags span{padding:8px 14px;border-radius:100px;font-size:13.5px;font-weight:700}
.biz-card.primary{background:radial-gradient(120% 120% at 85% 0%,var(--bright),var(--parang) 45%,var(--parang-700));color:#fff}
.biz-card.primary .bz-tag{color:#BFD0FF}
.biz-card.primary p{color:#DCE6FF}
.biz-card.primary .bz-tags span{background:rgba(255,255,255,.16);color:#fff}
.biz-card.primary .learn{color:#fff}
.biz-card.sub{background:var(--paper);border:1px solid var(--line)}
.biz-card.sub .bz-tag{color:var(--parang)}
.biz-card.sub p{color:var(--ink-soft)}
.biz-card.sub .bz-tags span{background:var(--mist);color:var(--ink-soft);border:1px solid var(--line)}
.biz-card .share{position:absolute;top:34px;right:34px;font-family:var(--mono);font-weight:800;font-size:13px;padding:7px 13px;border-radius:100px}
.biz-card.primary .share{background:rgba(255,255,255,.18);color:#fff}
.biz-card.sub .share{background:var(--mist);color:var(--ink-soft)}
.biz-card .bwave{position:absolute;left:0;right:0;bottom:0;height:80px;opacity:.5;background-repeat:repeat-x;background-position:bottom;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='80' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0 45 C100 20 150 20 250 45 S400 70 500 45 S650 20 750 45 S900 70 1000 45 L1000 80 L0 80 Z' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");background-size:800px 80px;animation:waveSlide 26s linear infinite}

/* ===== 출시 로드맵 timeline ===== */
.launch{background:var(--mist)}
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;margin-top:54px}
.tl::before{content:"";position:absolute;top:32px;left:9%;right:9%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--parang),var(--sky) 55%,var(--peri));z-index:0}
@media (max-width:1000px){.tl{grid-template-columns:repeat(3,1fr);gap:30px 18px}.tl::before{display:none}}
@media (max-width:560px){.tl{grid-template-columns:1fr 1fr}}
.tl-item{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.tl-ball{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;box-shadow:0 14px 26px -12px rgba(12,30,90,.5),inset 0 -7px 14px rgba(0,0,0,.16),inset 0 7px 11px rgba(255,255,255,.3);margin-bottom:18px;transition:transform .4s var(--ease)}
.tl-item:hover .tl-ball{transform:translateY(-6px) scale(1.06)}
.tl-item .tl-st{margin-bottom:9px}
.tl-item h4{font-size:18px;margin-bottom:6px}
.tl-item .tl-en{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:8px}
.tl-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:24ch}
.tl-item .more-soon{font-family:var(--mono);font-size:12px;color:var(--peri);margin-top:10px}

/* ===== 회사 정보 facts ===== */
/* ===== 회사 정보 facts — dark band for contrast ===== */
.facts{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.facts .sec-label .num{color:var(--sky)}
.facts .sec-label .ln{background:rgba(255,255,255,.16)}
.facts .sec-head h2{color:#fff}
.facts .sec-head p{color:#AEB9E6}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid #9FB0DD;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 22px 48px -30px rgba(0,0,0,.45)}
@media (max-width:820px){.facts-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts-grid{grid-template-columns:1fr}}
.fact{background:#fff;padding:28px 26px;transition:background .25s;border-top:1px solid #C9D6F0;border-left:1px solid #C9D6F0}
.fact:hover{background:var(--blue-50)}
.fact .k{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.fact .v{font-weight:800;font-size:18px;line-height:1.35;color:var(--ink)}
.fact .v small{display:block;font-weight:600;font-size:13.5px;color:var(--ink-soft);margin-top:5px;font-family:var(--kr)}
.fact .v .q{color:#A07A00;font-size:13px;font-weight:700}

/* =====================================================
   WATER HERO (replaces ball pit) + de-AI / flatten pass
   ===================================================== */
#water{position:absolute;inset:0;z-index:1;pointer-events:none}
#floats{position:absolute;inset:0;z-index:2;pointer-events:none}
.buoy{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:9px;
  will-change:transform;cursor:grab;text-align:center;user-select:none;pointer-events:auto;touch-action:none;transform-origin:bottom center}
.buoy.held{cursor:grabbing;z-index:5}
.buoy-name{background:#fff;padding:7px 13px;border-radius:100px;font-weight:800;font-size:14px;color:var(--ink);
  box-shadow:0 10px 22px -10px rgba(16,40,120,.5);white-space:nowrap;display:flex;align-items:center;gap:7px}
.buoy-name i{font-style:normal;font-family:var(--kr);font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:100px;letter-spacing:0;line-height:1.5}
.buoy-name i.st-open{color:#0E8A43;background:#E1FBEA}
.buoy-name i.st-soon{color:#7C879E;background:#EEF1F7}
.buoy.soon{cursor:default}
.buoy-tile{width:clamp(62px,7.6vw,90px);height:clamp(62px,7.6vw,90px);border-radius:23px;display:grid;place-items:center;
  font-size:clamp(28px,3.8vw,40px);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 18px 30px -14px rgba(12,30,90,.5),inset 0 -3px 8px rgba(0,0,0,.12)}
.buoy-tile .bgloss{position:absolute;top:0;left:0;right:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.32),transparent);pointer-events:none}
.svc-glyph{width:54%;height:54%;display:block;position:relative}
.buoy-tile .svc-glyph{width:50%;height:50%}
.tl-ball .svc-glyph{width:50%;height:50%}
.more-card .mb .svc-glyph{width:52%;height:52%}
.svc-hero .bigball .emoji{display:grid;place-items:center;width:42%;height:42%}
.svc-hero .bigball .svc-glyph{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
@media (hover:none){.buoy-name{font-size:12px}}

/* hero hint sits above the water */
.hero .hero-hint{z-index:4}
.hero .note-flag{z-index:6}

/* ---- flyers: SI & 프라이빗 AI soar overhead like gulls ---- */
.flyer{position:absolute;top:0;left:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;cursor:pointer;pointer-events:auto;will-change:transform}
.flyer-craft{position:relative;display:grid;place-items:center}
.flyer .buoy-tile{position:relative;z-index:2;width:clamp(50px,6vw,68px);height:clamp(50px,6vw,68px);border-radius:19px}
.flyer .wing{position:absolute;top:34%;width:108%;height:52%;z-index:1;
  background:linear-gradient(180deg,#ffffff,rgba(188,212,255,.92));
  filter:drop-shadow(0 3px 4px rgba(18,40,110,.4))}
.flyer .wl{right:48%;transform-origin:right center;clip-path:polygon(100% 20%,100% 80%,0 50%);
  animation:flapL .46s ease-in-out infinite}
.flyer .wr{left:48%;transform-origin:left center;clip-path:polygon(0 20%,0 80%,100% 50%);
  animation:flapR .46s ease-in-out infinite}
/* mirrored origins -> opposite signs make BOTH tips rise & fall together */
@keyframes flapL{0%,100%{transform:rotate(-28deg) scaleY(.84)}50%{transform:rotate(24deg) scaleY(1.08)}}
@keyframes flapR{0%,100%{transform:rotate(28deg) scaleY(.84)}50%{transform:rotate(-24deg) scaleY(1.08)}}
.flyer .buoy-name{box-shadow:0 12px 24px -10px rgba(16,40,120,.55)}
@media (prefers-reduced-motion:reduce){.flyer .wing{animation:none;transform:rotate(0) scaleY(1)}}

/* flatten the glossy "orb" look across components (less AI-render) */
.svc-ic,.feat-card .fic,.more-card .mb,.svc-hero .bigball,.svc-hero .orbit,.bubble{
  box-shadow:0 14px 26px -14px rgba(12,30,90,.4)!important;
}
.svc-ic{border-radius:18px}

/* timeline markers: rounded-square app tiles, not balls */
.tl-ball{border-radius:21px!important;box-shadow:0 14px 26px -13px rgba(12,30,90,.45)!important}
.tl::before{height:2px;top:33px;background:repeating-linear-gradient(90deg,var(--parang) 0 10px,transparent 10px 20px);opacity:.5}

/* CTA: wave band instead of floating balls */
.cta-wave{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background-repeat:repeat-x;background-position:bottom;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='120' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C112 35 188 35 300 70 S488 105 600 70 S788 35 900 70 L900 120 L0 120 Z' fill='%23ffffff' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-size:900px 120px;animation:waveSlide 24s linear infinite}
.cta-wave.b{height:90px;opacity:.5;background-size:640px 90px;animation:waveSlide2 16s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='90' viewBox='0 0 640 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C80 26 134 26 214 52 S348 78 428 52 S562 26 640 52 L640 90 L0 90 Z' fill='%23ffffff' fill-opacity='0.16'/%3E%3C/svg%3E")}

/* wave divider between light sections */
.wave-divide{display:block;width:100%;height:60px;color:var(--mist)}
.wave-divide.flip{transform:scaleY(-1)}

/* SI service card variant */
.svc-card.si{background:linear-gradient(180deg,var(--ink),#0b1024);border-color:transparent;color:#fff}
.svc-card.si h3{color:#fff}
.svc-card.si .desc{color:#AEB9E6}
.svc-card.si .go{color:var(--sky)}
.svc-card.si .bg-num{color:rgba(255,255,255,.06)}
.svc-card.si .svc-ic{background:rgba(255,255,255,.1)!important;color:#fff;font-size:22px}
.svc-card.si .pill{background:rgba(255,255,255,.14);color:#fff}
.svc-card.si.ai{background:linear-gradient(160deg,#1a1140,#0b0a24);border-radius:var(--r-lg)}
.svc-card.si.ai .svc-ic{background:linear-gradient(135deg,#A06BFF,#5C76FF)!important;color:#fff}
.svc-card.si.ai .go{color:#C0A9FF}
.svc-card.si.ai .desc b{color:#E5DBFF}
.svc-card.si.ai .bg-num{color:rgba(160,107,255,.10)}
.svc-grid.five{grid-template-columns:repeat(3,1fr)}
.svc-grid.five .svc-card.si{grid-column:span 1}
@media (max-width:980px){.svc-grid.five{grid-template-columns:repeat(2,1fr)}.svc-grid.five .svc-card.si{grid-column:span 2}}
@media (max-width:620px){.svc-grid.five{grid-template-columns:1fr}.svc-grid.five .svc-card.si{grid-column:span 1}}

/* flatten promise value icons (square, not glossy orb) */
.val .vn{border-radius:16px!important;box-shadow:0 12px 22px -12px rgba(12,30,90,.4)!important;background:var(--parang)!important}