:root{
  --paper:#F5F8FC; --white:#FFFFFF; --ink:#12294A; --ink2:#1D3B6B; --muted:#5C7091;
  --cyan:#2BC8EA; --blue:#2E6BE6; --green:#78C46A; --line:#E3EAF3;
  --grad:linear-gradient(120deg,#37D0E6 0%,#2E93E6 38%,#2E6BE6 66%,#6CBF69 100%);
  --grad-soft:linear-gradient(120deg,rgba(55,208,230,.14),rgba(46,107,230,.14),rgba(108,191,105,.14));
  --sans:'Pretendard','Outfit',system-ui,sans-serif; --disp:'Outfit','Pretendard',sans-serif;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:110px}
body{font-family:var(--sans);color:var(--ink2);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);color:var(--ink);letter-spacing:-.02em;line-height:1.12;font-weight:700}
.eyebrow{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;transition:.25s;cursor:pointer;border:0}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px -8px rgba(46,107,230,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(46,107,230,.6)}
.btn-ghost{background:transparent;color:var(--ink2);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(245,248,252,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
header.scrolled{border-color:var(--line);background:rgba(245,248,252,.9)}
nav{display:flex;align-items:center;justify-content:space-between;height:104px}
.logo{display:flex;align-items:center}
.logo .cilogo{height:60px;width:auto;display:block}
footer .logo .cilogo{height:46px}
@media(max-width:600px){ .logo .cilogo{height:34px} }

.logo svg.sym{width:66px;height:68px;display:block}
.logo .wm{height:40px;color:var(--ink2);display:block}
.logo .wm svg{height:100%;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink2);position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--grad);transition:.25s}
.nav-links a:hover::after{width:100%}
.nav-links .btn{padding:10px 20px;font-size:14px}
.menu-btn{display:none;background:none;border:0;cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;padding:96px 0 90px;overflow:hidden}
.scroll-cue{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);z-index:40;cursor:pointer;opacity:1;transition:opacity .4s ease;animation:cueFloat 2.4s ease-in-out infinite}
.scroll-cue.hide{opacity:0;pointer-events:none}
.scroll-cue .sc-mouse{width:23px;height:36px;border:2px solid var(--ink2);border-radius:12px;display:flex;justify-content:center;padding-top:6px;background:rgba(245,248,252,.6);backdrop-filter:blur(4px)}
.scroll-cue .sc-wheel{width:4px;height:8px;border-radius:2px;background:var(--grad);animation:cueWheel 1.8s ease-in-out infinite}
@keyframes cueFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@keyframes cueWheel{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}.scroll-cue .sc-wheel{animation:none}}
@media(max-width:600px){.scroll-cue{display:none}}

.hero-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(30px,4.1vw,50px);font-weight:800}
.hero-h1{word-break:keep-all}
.hero-h1 .lastline{white-space:nowrap}
@media(max-width:520px){ .hero-h1 .lastline{white-space:normal} .hero h1{font-size:clamp(30px,8.6vw,42px)} }

.hero h1 .ren{font-family:var(--disp);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero .sub{font-size:18px;color:var(--muted);max-width:30em;margin:26px 0 34px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.stage{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.stage .halo{position:absolute;inset:8% ;border-radius:50%;background:var(--grad-soft);filter:blur(28px)}
.stage svg.bigsym{width:78%;height:78%;position:relative;filter:drop-shadow(0 24px 40px rgba(46,107,230,.18))}
.node{position:absolute;border-radius:50%;opacity:.9}
.hero-foot{margin-top:64px;display:flex;gap:40px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px}
.hero-foot b{color:var(--ink2);font-family:var(--disp);font-weight:600}
.hero-ci{margin-top:56px;display:flex;flex-direction:column;gap:12px}
.hero-ci-label{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.hero-ci-lockup{display:inline-flex;align-items:flex-end;gap:14px;padding-top:2px}
.hero-ci-lockup .sym{width:44px;height:45px;display:block}
.hero-ci-lockup .wm{height:26px;width:auto;color:var(--ink2);display:block}

.hero-bgnet{position:absolute;top:-40px;right:-60px;width:520px;opacity:.5;pointer-events:none}

/* ---------- PHILOSOPHY ---------- */
.philo{padding:76px 0;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.philo-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.slogan{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.35;color:var(--ink)}
.slogan .ren{color:var(--blue);font-weight:800}
.slogan span.q{font-family:var(--sans)}
.meaning{display:flex;flex-direction:column;gap:18px}
.mrow{display:flex;gap:16px;align-items:flex-start}
.mrow .mk{flex:0 0 42px;height:42px;border-radius:12px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center}
.mrow .mk svg{width:22px;height:22px}
.mrow h4{font-family:var(--disp);font-size:16px;color:var(--ink);margin-bottom:3px;font-weight:600}
.mrow p{font-size:14.5px;color:var(--muted)}

/* ---------- SECTION HEAD ---------- */
.shead{max-width:640px;margin-bottom:48px}
.shead h2{font-size:clamp(28px,3.4vw,42px);margin-top:14px}
.shead p{color:var(--muted);margin-top:14px;font-size:16.5px}

/* ---------- SERVICES ---------- */
.services{padding:96px 0}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc{position:relative;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:40px 36px;overflow:hidden;transition:.3s}
.svc:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 26px 50px -22px rgba(30,59,107,.28)}
.svc .num{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--muted);letter-spacing:.1em}
.svc h3{font-size:25px;margin:20px 0 12px}
.svc p{color:var(--muted);font-size:15.5px;margin-bottom:22px}
.svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-family:var(--disp);font-size:13px;font-weight:500;color:var(--ink2);background:var(--paper);border:1px solid var(--line);padding:6px 13px;border-radius:999px}
.svc .bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
.svc .ic{width:52px;height:52px;border-radius:14px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center}
.svc .ic svg{width:26px;height:26px}

/* ---------- WORK ---------- */
.work{padding:40px 0 100px}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 55px -26px rgba(30,59,107,.3)}
.thumb{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb .g{position:absolute;inset:0;opacity:.92}
.thumb .lbl{position:relative;font-family:var(--disp);font-weight:700;color:#fff;font-size:26px;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.18)}
.card .body{padding:22px 22px 24px}
.card .tag{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card h4{font-family:var(--disp);font-size:18px;color:var(--ink);margin:8px 0 6px}
.card p{font-size:14px;color:var(--muted)}
.card .url{margin-top:14px;font-family:var(--disp);font-size:13px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;font-weight:500}
.card:hover .url{color:var(--blue)}

/* ---------- CONTACT ---------- */
.contact{padding:0 0 100px}
.contact-in{position:relative;background:linear-gradient(150deg,#12294A,#1D3B6B 60%,#20406e);border-radius:30px;padding:70px 60px;overflow:hidden;color:#fff}
.contact-in .net{position:absolute;inset:0;opacity:.5}
.contact-flex{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.contact h2{color:#fff;font-size:clamp(28px,3.4vw,40px)}
.contact p{color:#B9CCE6;margin-top:16px;max-width:26em}
.cinfo{display:flex;flex-direction:column;gap:14px}
.ci{display:flex;align-items:center;gap:14px;color:#E4EDFB;font-size:15px}
.ci .ci-ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.ci .ci-ic svg{width:18px;height:18px;stroke:#8FD4EA}
.ci b{font-family:var(--disp);color:#fff;font-weight:500}
.contact .btn-primary{background:#fff;color:var(--blue)}
.contact .revlogo{display:inline-block;margin-bottom:24px;overflow:visible}
.contact .revlogo svg{overflow:visible}

/* ---------- FOOTER ---------- */
footer{padding:46px 0 40px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;overflow:visible}
.foot .logo .wm{color:var(--ink2)}
.foot .cr{color:var(--muted);font-size:13px}
.foot .fl{display:flex;gap:22px}
.foot .fl a{font-family:var(--disp);font-size:14px;color:var(--muted)}
.foot .fl a:hover{color:var(--blue)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:920px){
  .hero-grid,.philo-in,.svc-grid,.contact-flex{grid-template-columns:1fr}
  .stage{max-width:380px;margin:0 auto;order:-1}
  .work-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:flex;gap:16px}
  .menu-btn{display:block}
  .contact-in{padding:48px 30px}
}
@media(max-width:600px){ .work-grid{grid-template-columns:1fr} .wrap{padding:0 20px} .hero{padding:60px 0} }
@media(max-width:600px){
  nav{height:72px}
  .logo svg.sym{width:34px;height:35px}
  .logo .wm{height:20px}
  .logo{gap:10px}
  .nav-links{display:flex;gap:12px}
  .nav-links a{font-size:11.5px}
}

@media(prefers-reduced-motion:reduce){ .rv{transition:none;opacity:1;transform:none} *{animation:none!important} }

/* ===== Contact Page ===== */
.contact-page{padding:130px 0 100px;min-height:70vh}
.contact-page .cp-head{max-width:640px;margin-bottom:40px}
.contact-page .cp-head h1{font-size:clamp(32px,4vw,46px);margin:12px 0 14px}
.contact-page .cp-head p{color:var(--muted);font-size:16.5px}
.cp-form{max-width:760px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:38px 36px;box-shadow:0 24px 50px -30px rgba(30,59,107,.25)}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cp-field{margin-bottom:20px;display:flex;flex-direction:column}
.cp-field label{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.cp-field label span{color:#e0575b}
.cp-field input,.cp-field textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:.2s;width:100%}
.cp-field input:focus,.cp-field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(46,107,230,.1)}
.cp-field textarea{resize:vertical;line-height:1.6}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cp-captcha{margin:6px 0 20px}
.cp-captcha-label{display:block;font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.cp-captcha #captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-captcha input{font-family:var(--sans);font-size:15px;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--paper)}
.cp-captcha input:focus{outline:none;border-color:var(--blue);background:#fff}
.cp-captcha img{vertical-align:middle;border-radius:8px}
.cp-agree{margin:6px 0 26px;font-size:14px;color:var(--muted)}
.cp-agree label{display:flex;align-items:flex-start;gap:9px;cursor:pointer}
.cp-agree input{margin-top:3px}
.cp-actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:600px){ .cp-row{grid-template-columns:1fr} .cp-form{padding:28px 22px} .contact-page{padding:100px 0 70px} }

.hero-login{color:inherit;text-decoration:none;transition:.2s;cursor:pointer}
.hero-login:hover{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:5px;text-decoration-thickness:2px}

.nav-admin{display:inline-flex;align-items:center;gap:7px;margin-left:26px;padding:8px 15px;border-radius:999px;
  background:var(--grad);color:#fff;font-family:var(--disp);font-weight:600;font-size:13.5px;text-decoration:none;
  box-shadow:0 8px 20px -9px rgba(46,107,230,.6);transition:.22s}
.nav-admin:hover{transform:translateY(-2px);box-shadow:0 13px 26px -9px rgba(46,107,230,.7)}
.nav-admin svg{width:16px;height:16px}
@media(max-width:600px){.nav-admin span{display:none}.nav-admin{margin-left:12px;padding:8px}}

.nav-inquiry{display:inline-flex;align-items:center;gap:7px;margin-left:26px;padding:8px 15px;border-radius:999px;
  background:var(--white);color:var(--ink2);border:1.5px solid var(--line);font-family:var(--disp);font-weight:600;font-size:13.5px;text-decoration:none;transition:.22s}
.nav-inquiry:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.nav-inquiry svg{width:16px;height:16px}
.nav-inquiry + .nav-admin{margin-left:10px}
@media(max-width:600px){.nav-inquiry span{display:none}.nav-inquiry{margin-left:10px;padding:8px}}

.nav-portfolio{display:inline-flex;align-items:center;gap:7px;margin-left:26px;padding:8px 15px;border-radius:999px;
  background:var(--white);color:var(--ink2);border:1.5px solid var(--line);font-family:var(--disp);font-weight:600;font-size:13.5px;text-decoration:none;transition:.22s}
.nav-portfolio:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.nav-portfolio svg{width:16px;height:16px}
.nav-portfolio + .nav-inquiry{margin-left:10px}
@media(max-width:600px){.nav-portfolio span{display:none}.nav-portfolio{margin-left:10px;padding:8px}}