/* JINSIM.LABS — site styles. Re-implemented from Claude Design hi-fi handoff. */

:root{
  --font-sans:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%;display:block}
::selection{background:#3b6cff;color:#fff}

/* ===== Themes ===== */
.theme-dark{
  --brand:#3b6cff;--brand-bright:#5b8cff;--brand-deep:#1e5fa5;
  --bg:#0a0b0d;--surface:#131519;--surface-2:#0c0d10;
  --border:#1b1d22;--border-card:#24262c;
  --ink:#eef0f3;--ink-muted:#9aa0ab;--ink-faint:#6a6f7a;
  background:var(--bg);color:var(--ink);min-height:100vh;
}
.theme-light{
  --accent:#1e5fa5;
  --bg:#f7f8fa;--card:#fff;--border:#e3e6ea;--border-strong:#d0d5dd;
  --ink:#14171c;--ink-2:#45505b;--ink-3:#6b7280;--lead:#2f3742;
  background:var(--bg);color:var(--ink);min-height:100vh;
}

/* ===== Shared bits ===== */
.wordmark{font-weight:800;font-size:18px;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.wordmark .dot{color:#3b6cff}
.theme-light .wordmark .dot{color:#1e5fa5}

.seg{display:inline-flex;border:1px solid #2a2d35;border-radius:7px;overflow:hidden;font-family:var(--font-mono);font-size:12px}
.seg button{appearance:none;border:0;background:transparent;font:inherit;line-height:1;padding:5px 11px;cursor:pointer;color:var(--ink-muted);font-weight:500}
.seg button.active{background:#3b6cff;color:#fff;font-weight:700}
.seg--sm{border-radius:6px;font-size:11.5px}
.seg--sm button{padding:4px 10px}
.theme-light .seg{border-color:#d0d5dd}
.theme-light .seg button{color:#6b7280}
.theme-light .seg button.active{background:#1e5fa5;color:#fff}

.btn{border-radius:8px;padding:15px 28px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;border:0;font-family:inherit;transition:background .15s,transform .15s,box-shadow .15s,border-color .15s}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 10px 34px rgba(59,108,255,.4)}
.btn--primary:hover{background:var(--brand-bright);transform:translateY(-2px);box-shadow:0 16px 46px rgba(59,108,255,.52)}
.btn--ghost{border:1px solid #2a2d35;color:var(--ink);background:transparent;white-space:nowrap}
.btn--ghost:hover{border-color:var(--brand);transform:translateY(-2px);background:#0f1116}
.btn--contact{border-radius:10px;padding:16px 28px;position:relative}

/* ===== Home nav (dark) ===== */
.nav{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,box-shadow .25s,border-color .25s;background:rgba(10,11,13,.6);border-bottom:1px solid #1b1d22}
.nav.scrolled{background:rgba(10,11,13,.94);border-bottom:1px solid #24262c;box-shadow:0 10px 34px rgba(0,0,0,.45)}
.nav__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.nav__right{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--ink-muted);font-weight:500}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{cursor:pointer;text-decoration:none;color:var(--ink-muted);transition:color .15s}
.nav__links a:hover{color:var(--ink)}

/* ===== Hero ===== */
.hero{max-width:1180px;margin:0 auto;padding:118px 28px 64px;background:radial-gradient(680px 380px at 20% 6%,rgba(59,108,255,.20),transparent 70%)}
.hero__kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;color:var(--brand);margin-bottom:28px}
.hero__title{font-size:clamp(50px,7.4vw,86px);line-height:.98;font-weight:800;letter-spacing:-.035em;max-width:920px;margin:0}
.hero__title .accent{color:var(--brand);animation:jl-glow 4.5s ease-in-out infinite}
.hero__sub{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-muted);max-width:500px;margin-top:30px;text-wrap:pretty}
.hero__cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}

/* ===== Ticker ===== */
.ticker{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-2)}
.ticker__inner{max-width:1180px;margin:0 auto;display:flex;gap:40px;flex-wrap:wrap;padding:16px 28px;font-family:var(--font-mono);font-size:12.5px;color:#8b91a0}
.dot-pulse{animation:jl-pulse 2.6s ease-in-out infinite}

/* ===== Products bento ===== */
.products{max-width:1180px;margin:0 auto;padding:72px 28px 76px;scroll-margin-top:70px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.section-title{font-size:clamp(28px,3vw,34px);font-weight:800;letter-spacing:-.02em}
.section-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint)}
.bento{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;gap:14px}

.card{background:var(--surface);border:1px solid var(--border-card);border-radius:16px;padding:26px 24px;display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.card--mold:hover{border-color:#5b8cff;transform:translateY(-5px);box-shadow:0 22px 55px rgba(91,140,255,.2)}
.card--weld:hover{border-color:#3a3e47;background:#16181d}

.card-featured{grid-row:1/3;background:linear-gradient(160deg,#13161d,#0e1014);border:1px solid var(--border-card);border-radius:18px;padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.card-featured:hover{border-color:#5bc9f2;transform:translateY(-5px);box-shadow:0 22px 55px rgba(91,201,242,.2)}
.blob{position:absolute;top:-40px;right:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(91,201,242,.20),transparent 70%)}
.rel{position:relative}

.card__top{display:flex;justify-content:space-between;align-items:center}
.pdot{width:10px;height:10px;border-radius:3px;flex:none}
.card-featured .pdot{width:11px;height:11px}
.badge{font-family:var(--font-mono);border-radius:100px;white-space:nowrap}
.badge--soon{font-size:11px;font-weight:500;color:#5bc9f2;border:1px solid #2a4a57;background:rgba(91,201,242,.1);padding:5px 12px}
.badge--dev{font-size:10.5px;color:#8b91a0;border:1px solid #2a2d35;padding:4px 10px}

.featured__name{font-size:36px;font-weight:800;letter-spacing:-.02em;margin-top:28px}
.featured__desc{font-size:15px;color:var(--ink-muted);line-height:1.55;margin-top:12px;max-width:320px}
.featured__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;font-family:var(--font-mono);font-size:12.5px}
.featured__note{color:var(--ink-faint)}
.featured__visit{color:#5bc9f2;font-weight:500}

.card__name{font-size:23px;font-weight:700;margin-top:16px}
.card__desc{font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin-top:8px}
.card__link{font-size:12.5px;font-weight:600;margin-top:18px;font-family:var(--font-mono)}
.card__link--mold{color:#5b8cff}
.card__link--weld{color:var(--ink-faint)}

/* ===== About ===== */
.about{border-top:1px solid var(--border);scroll-margin-top:70px}
.about__inner{max-width:760px;margin:0 auto;padding:88px 28px;text-align:center}
.about__label{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;color:var(--brand);margin-bottom:24px}
.about__body{font-size:clamp(25px,2.8vw,33px);line-height:1.32;font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
.about__sub{font-size:clamp(15px,1.4vw,16.5px);line-height:1.6;color:var(--ink-muted);margin:20px auto 0;max-width:520px;text-wrap:pretty}

/* ===== Contact ===== */
.contact{border-top:1px solid var(--border);background:var(--surface-2);scroll-margin-top:70px}
.contact__inner{max-width:1180px;margin:0 auto;padding:64px 28px 72px}
.contact-card{border:1px solid var(--border-card);border-radius:20px;background:linear-gradient(135deg,#16181f,#0d0f13);padding:clamp(32px,4vw,52px);display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.contact-card__glow{position:absolute;top:-60px;right:-30px;width:340px;height:240px;background:radial-gradient(circle,rgba(59,108,255,.18),transparent 70%);pointer-events:none}
.contact-card__text{position:relative;max-width:460px}
.contact__label{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;color:var(--brand);margin-bottom:14px;font-weight:400}
.contact__title{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.02em}
.contact__body{font-size:15px;color:var(--ink-muted);margin-top:12px;text-wrap:pretty}

/* ===== Footer (dark) ===== */
.footer{border-top:1px solid var(--border)}
.footer__inner{max-width:1180px;margin:0 auto;padding:56px 28px 44px;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.footer__tag{font-size:13px;color:#8b91a0;margin-top:10px}
.footer__meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);line-height:1.9;margin-top:18px}
.footer__right{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.footer__links{display:flex;gap:22px;align-items:center;justify-content:flex-end;flex-wrap:wrap;font-size:13px;color:var(--ink-muted);font-weight:500}
.footer__links a{text-decoration:none;color:var(--ink-muted);cursor:pointer;transition:color .15s}
.footer__links a:hover{color:var(--ink)}
.footer__copy{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint)}

/* ===== Policy nav (light) ===== */
.pnav{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(247,248,250,.8);border-bottom:1px solid var(--border)}
.pnav__inner{max-width:840px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.pnav__right{display:flex;align-items:center;gap:22px;font-size:14px;color:#5a6470;font-weight:500}
.pnav__right a{text-decoration:none;color:#5a6470;cursor:pointer;transition:color .15s}
.pnav__right a:hover{color:var(--ink)}

/* ===== Policy doc (light) ===== */
.doc{max-width:720px;margin:0 auto;padding:72px 28px 110px}
.tabs{display:flex;gap:10px;margin-bottom:22px}
.tab{padding:8px 16px;border-radius:100px;cursor:pointer;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;background:#fff;border:1px solid var(--border);color:#5a6470}
.tab.active{background:#14171c;border-color:#14171c;color:#fff}
.doc__title{font-size:clamp(34px,4.4vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0}
.doc__updated{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);margin-top:16px}
.doc__intro{font-size:17.5px;line-height:1.65;color:var(--lead);margin-top:28px;padding-bottom:36px;border-bottom:1px solid var(--border);text-wrap:pretty}
.doc__sec{margin-top:36px}
.doc__sec h2{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0}
.doc__sec p{font-size:16px;line-height:1.75;color:var(--ink-2);margin-top:12px;text-wrap:pretty}
.doc__contact{margin-top:52px;padding:24px 26px;background:#fff;border:1px solid var(--border);border-radius:16px;font-size:15px;color:var(--ink-2);line-height:1.6}
.doc__contact a{color:var(--accent);font-weight:600;text-decoration:none}

/* ===== Footer (light) ===== */
.pfooter{border-top:1px solid var(--border);background:#fff}
.pfooter__inner{max-width:840px;margin:0 auto;padding:48px 28px 40px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.pfooter__tag{font-size:13px;color:var(--ink-3);margin-top:10px}
.pfooter__meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);line-height:1.9;margin-top:18px}
.pfooter__right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;font-size:13px;color:#5a6470;font-weight:500}
.pfooter__links{display:flex;gap:22px;justify-content:flex-end}
.pfooter__links a{text-decoration:none;color:#5a6470;cursor:pointer;transition:color .15s}
.pfooter__links a:hover{color:var(--ink)}
.pfooter__copy{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}

/* ===== 404 ===== */
.notfound{max-width:680px;margin:0 auto;padding:140px 28px 160px;text-align:center}
.nf__code{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;color:var(--brand);margin-bottom:18px}
.nf__title{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.02em}
.nf__body{font-size:16px;color:var(--ink-muted);margin:16px auto 30px;max-width:420px;line-height:1.6}
.notfound .btn{display:inline-flex}

/* ===== Animations ===== */
@keyframes jl-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes jl-glow{0%,100%{text-shadow:0 0 26px rgba(59,108,255,.38)}50%{text-shadow:0 0 54px rgba(59,108,255,.7)}}

/* ===== Responsive ===== */
@media (max-width:760px){
  .nav__links{display:none}
  .bento{grid-template-columns:1fr;grid-template-rows:auto}
  .card-featured{grid-row:auto}
  .contact-card{flex-direction:column;align-items:flex-start}
  .contact-card .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.card-featured:hover{transform:none!important}
}