/* Forelink — Light theme inspired by Stripe/Linear/Notion */
:root{
  --bg: #ffffff;
  --bg2:#f6f7fb;
  --text:#0b1020;
  --muted:#55607a;
  --line: rgba(15, 23, 42, .10);
  --shadow: 0 12px 32px rgba(15, 23, 42, .10);
  --shadow2: 0 8px 24px rgba(15, 23, 42, .08);
  --brand:#2457ff;
  --brand2:#00c2ff;
  --ok:#00bfa6;
  --warn:#ff6b35;
  --radius: 16px;
  --radius2: 24px;
  --container: 1140px;
  --dur:.18s;
  --ease:cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--text); background:var(--bg)}
a{color:inherit}
img{max-width:100%; display:block}

.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; background:#fff; padding:10px 12px; border:1px solid var(--line); border-radius:12px; z-index:9999}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.kicker{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(36,87,255,.85)}
.kicker::before{content:""; width:24px; height:1px; background:rgba(36,87,255,.6)}
.h1{font-size:clamp(34px, 5vw, 56px); line-height:1.05; letter-spacing:-.04em; margin:14px 0 14px}
.h2{font-size:clamp(22px, 3vw, 34px); line-height:1.2; letter-spacing:-.03em; margin:0 0 12px}
.p{font-size:16px; line-height:1.75; color:var(--muted); margin:0}

.topbar{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.78); backdrop-filter: blur(18px); border-bottom:1px solid var(--line)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{text-decoration:none; font-family:"Rajdhani", sans-serif; font-weight:700; letter-spacing:2px}
.brand__mark{font-size:22px}
.brand__mark span{color:var(--brand)}
.brand__mark--footer{font-size:18px}

.nav{display:flex; gap:18px; align-items:center}
.nav__link{font-size:14px; text-decoration:none; color:rgba(11,16,32,.75); padding:8px 10px; border-radius:10px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease)}
.nav__link:hover{background:rgba(36,87,255,.06); color:rgba(11,16,32,.95)}
.nav__cta{font-size:14px; text-decoration:none; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand2)); padding:10px 14px; border-radius:12px; box-shadow:0 10px 26px rgba(36,87,255,.22); transition: transform var(--dur) var(--ease)}
.nav__cta:hover{transform:translateY(-1px)}

.navbtn{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.06); padding:10px; cursor:pointer}
.navbtn span{display:block; height:2px; background:rgba(11,16,32,.8); margin:6px 0; border-radius:2px}
.navsheet{border-top:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter: blur(18px)}
.navsheet__inner{display:grid; gap:10px; padding:16px 20px 22px}
.navsheet__inner a{padding:12px 12px; border:1px solid var(--line); border-radius:14px; text-decoration:none; background:#fff}
.navsheet__cta{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff !important; border:none !important}

.hero{position:relative; padding:72px 0 36px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% -10% auto -10%; height:520px; background:
  radial-gradient(800px 420px at 20% 20%, rgba(36,87,255,.18), transparent 60%),
  radial-gradient(700px 420px at 70% 10%, rgba(0,194,255,.14), transparent 55%),
  radial-gradient(600px 420px at 50% 70%, rgba(0,191,166,.10), transparent 55%);
  pointer-events:none}
.hero__grid{position:relative; display:grid; grid-template-columns: 1.25fr .95fr; gap:28px; align-items:start}
.hero__card{border:1px solid var(--line); background:rgba(255,255,255,.72); border-radius:var(--radius2); box-shadow: var(--shadow2)}
.hero__left{padding:28px}
.hero__right{padding:18px}

.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; text-decoration:none; border:1px solid var(--line); background:#fff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.10)}
.btn--primary{border:none; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow:0 12px 26px rgba(36,87,255,.22)}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.badge{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7)}

.bento{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.bento__tile{padding:14px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(36,87,255,.06), rgba(255,255,255,.0)); min-height:96px}
.bento__title{font-weight:800; letter-spacing:-.02em}
.bento__desc{margin-top:6px; color:var(--muted); font-size:13px; line-height:1.55}

.section{padding:64px 0}
.section--alt{background:var(--bg2)}
.grid2{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px}
.card{border:1px solid var(--line); background:#fff; border-radius:18px; padding:16px; box-shadow:0 10px 22px rgba(15,23,42,.06); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,.10)}
.card__title{font-weight:800; letter-spacing:-.02em}
.card__text{color:var(--muted); font-size:13px; line-height:1.6; margin-top:8px}
.card__link{display:inline-flex; gap:8px; align-items:center; margin-top:12px; font-weight:700; color:rgba(36,87,255,.95); text-decoration:none}

.timeline{display:grid; gap:10px; margin-top:18px}
.trow{display:flex; gap:14px; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fff}
.tyear{min-width:64px; font-family:"Rajdhani", sans-serif; font-weight:800; color:rgba(36,87,255,.95)}
.ttext{color:var(--muted); line-height:1.6; font-size:14px}

.logoWall{display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top:16px}
.logoBadge{border:1px solid var(--line); background:#fff; border-radius:16px; padding:10px; display:flex; align-items:center; justify-content:center; height:56px}
.logoBadge img{max-height:26px; max-width:100%; filter: grayscale(1); opacity:.8}
.logoBadge:hover img{filter:none; opacity:1}

.pageHero{padding:56px 0 18px}
.pageHero__inner{display:flex; align-items:flex-end; justify-content:space-between; gap:18px}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:#fff}

.article{padding:26px 0 70px}
.article__grid{display:grid; grid-template-columns: 1fr .9fr; gap:18px; align-items:start}
.article__box{border:1px solid var(--line); background:#fff; border-radius:18px; padding:16px; box-shadow:0 10px 22px rgba(15,23,42,.06)}
.ul{margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.75}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px}
.gimg{border-radius:16px; border:1px solid var(--line); overflow:hidden; background:#fff}
.gimg img{width:100%; height:160px; object-fit:cover}

.form{display:grid; gap:12px; max-width:620px; margin-top:16px}
.field{display:grid; gap:6px}
.field label{font-size:13px; color:rgba(11,16,32,.85); font-weight:700}
.field input,.field textarea{border:1px solid var(--line); border-radius:14px; padding:12px 12px; font:inherit; background:#fff}
.field textarea{min-height:160px; resize:vertical}
.msg{margin-top:10px; font-size:13px}
.msg.ok{color:var(--ok)}
.msg.err{color:#e11d48}

.footer{border-top:1px solid var(--line); background:#fff; padding:34px 0}
.footer__grid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:18px}
.footer__col{display:grid; gap:8px; align-content:start}
.footer__title{font-weight:900; letter-spacing:-.02em}
.footer__bottom{padding-top:16px; margin-top:14px; border-top:1px solid var(--line)}

@media (max-width: 960px){
  .hero__grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .logoWall{grid-template-columns: repeat(3, 1fr)}
  .article__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns: 1fr 1fr}
  .nav{display:none}
  .navbtn{display:inline-block}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}