/* ============================================================
   Homepage premium theme (scoped to body.home)
   Light, commercial "modern SaaS" look layered on top of the
   shared dark-token styles.css. Only affects index.html / ko/index.html.
   ============================================================ */

body.home{
  --bg:#f7f9fc;
  --panel:#ffffff;
  --panel2:#eef2f7;
  --text:#0f1728;
  --muted:#5b6478;
  --accent:#0d9488;
  --accent2:#4f46e5;
  --line:#e6eaf0;
  --white:#0f1728;
  background:var(--bg);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.home h1,body.home h2,body.home h3,body.home .brand,body.home .kicker{
  font-family:'Sora','Inter',ui-sans-serif,system-ui,sans-serif;
}
body.home ::selection{background:#0d9488;color:#fff}

/* Top bar / nav */
body.home .topbar{background:rgba(247,249,252,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,40,.03)}
body.home .navlinks a{color:#3c4759;transition:color .15s ease}
body.home .navlinks a:hover{color:var(--text)}
body.home .lang-switch{border-color:var(--line)}
body.home .lang-switch a{color:#7c879a}
body.home .lang-switch a.active{background:var(--panel2);color:var(--text)}

/* Buttons */
body.home .btn{border-radius:12px;padding:13px 22px;font-weight:700;font-size:14.5px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
body.home .btn.primary{background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;border:none;box-shadow:0 10px 24px -10px rgba(13,148,136,.55)}
body.home .btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(13,148,136,.65)}
body.home .btn.secondary{background:#ffffff;border:1px solid var(--line);color:var(--text);box-shadow:0 1px 2px rgba(15,23,40,.04)}
body.home .btn.secondary:hover{border-color:#c7d0dc;transform:translateY(-1px)}
body.home a.btn:not(.primary):not(.secondary){background:#ffffff;border:1px solid var(--line);color:var(--text)}
body.home a.btn:not(.primary):not(.secondary):hover{border-color:#c7d0dc}

/* Hero */
body.home .aihero{background:radial-gradient(circle at 80% 8%,rgba(79,70,229,.09),transparent 32%),radial-gradient(circle at 12% 18%,rgba(13,148,136,.10),transparent 30%)}
body.home .kicker{border:1px solid #cdeae2;background:#eefaf7;color:#0f6b5c}
body.home .eyebrow{color:#0d9488}
body.home .aihero h1{color:#0b1220}
body.home .aihero p{color:var(--muted)}
body.home .chip{background:#ffffff;border:1px solid var(--line);color:#3c4759;box-shadow:0 1px 2px rgba(15,23,40,.03)}
body.home .hero-diagram{border:1px solid var(--line);background:#ffffff;box-shadow:0 30px 60px -28px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.02)}
body.home .hd-title{color:#0b1220}
body.home .hd-box{background:#f8fafc;border:1px solid var(--line)}
body.home .hd-box.primary{border-color:#0d9488;background:#f0faf8}
body.home .hd-box strong{color:#0f1728}
body.home .hd-arrow{color:#0d9488}

@keyframes homeFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
body.home .aihero-grid>div{animation:homeFadeUp .7s ease both}
body.home .aihero-grid>div:nth-child(2){animation-delay:.12s}
@media (prefers-reduced-motion: reduce){body.home .aihero-grid>div{animation:none}}

/* Banded sections */
body.home .band{background:#ffffff}

/* Cards / feature boxes */
body.home .fbox{background:linear-gradient(180deg,#ffffff,#fbfcfe);border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04);transition:transform .18s ease,box-shadow .18s ease}
body.home .fbox:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(15,23,42,.14)}
body.home .fbox b{color:#0f1728}
body.home .mini-tags b{background:#f0f4fa;border:1px solid var(--line);color:#334155}

body.home .promise{background:#ffffff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04)}
body.home .promise.main{background:linear-gradient(145deg,#f0faf8,#eef1ff);border-color:#bfe3da}
body.home .promise h3{color:#0f1728}

body.home .comm-card{background:#ffffff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04);transition:transform .18s ease,box-shadow .18s ease}
body.home .comm-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(15,23,42,.13)}
body.home .comm-card h3{color:#0f1728}

/* SDK package */
body.home .package-tree,body.home .package-result{background:linear-gradient(145deg,#ffffff,#f6f9fc);border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04)}
body.home .package-tree b{color:#0d9488}
body.home .package-tree span{border-top:1px solid #eef1f6;color:#3c4759}
body.home .package-result small{color:#0d9488}
body.home .package-result strong{color:#0f1728}
body.home .package-arrow{color:#4f46e5}

/* Platform support table */
body.home .support-table{background:#ffffff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04)}
body.home .support-row{border-top:1px solid var(--line)}
body.home .support-row.head{background:#f8fafc}
body.home .support-row b{color:#0d9488}
body.home .support-row span{color:#334155}
body.home .feature-disclaimer{color:#8993a6}

/* Steps */
body.home .step{background:#ffffff;border-top:2px solid #0d9488;box-shadow:0 1px 3px rgba(15,23,42,.04)}
body.home .step b{color:#0d9488}

/* Secondary product notice */
body.home .notice{background:#f0faf8;border-left:3px solid #0d9488;color:#3c4759}
body.home .notice a{color:#0d9488;font-weight:700}

/* Final CTA */
body.home .cta{background:linear-gradient(135deg,#0d9488,#4f46e5);border:none;box-shadow:0 24px 55px -24px rgba(79,70,229,.55)}
body.home .cta .eyebrow{color:#d7fff5}
body.home .cta h2{color:#fff}
body.home .cta p{color:rgba(255,255,255,.86)}
body.home .cta .btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff}
body.home .cta .btn.primary{background:#ffffff;color:#0d9488;box-shadow:none}
body.home .cta .btn.primary:hover{background:#f3fbf9}

/* Footer */
body.home footer{background:#ffffff;border-top:1px solid var(--line)}
body.home .footergrid strong{color:var(--text)}
body.home .footergrid p{color:var(--muted)}
body.home .footergrid a{color:#5b6478}
body.home .footergrid a:hover{color:#0d9488}
body.home .small{color:#8993a6}

@media(max-width:620px){
  body.home .aihero-grid>div{animation:none}
}