:root{
      --bg:#070b14;
      --panel:#0b1220;
      --card:#0f1b32;
      --line:#1e2d52;
      --text:#e8eefc;
      --muted:#a9b6da;
      --accent:#7aa7ff;
      --good:#2dd4bf;
      --warn:#fbbf24;
      --bad:#fb7185;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 24px;
      --max: 1120px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(122,167,255,.20), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(45,212,191,.14), transparent 60%),
        radial-gradient(1200px 700px at 50% 110%, rgba(251,191,36,.10), transparent 55%),
        linear-gradient(180deg, #060914 0%, #050816 60%, #040717 100%);
      color: var(--text);
      line-height:1.55;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(7,11,20,.55);
      border-bottom:1px solid rgba(30,45,82,.55);
    }
    .topbar .row{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:12px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .logo{
      width:34px; height:34px; border-radius:12px;
      background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(45,212,191,.85));
      box-shadow: 0 10px 30px rgba(122,167,255,.18);
      position:relative;
      overflow:hidden;
    }
    .logo:after{
      content:"";
      position:absolute; inset:-30%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%);
      transform: rotate(25deg);
      opacity:.6;
    }
    .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }

    nav{
      display:flex; align-items:center; gap:14px;
      color: var(--muted);
      font-weight:600;
      font-size:14px;
    }
    nav a{ padding:8px 10px; border-radius:12px; }
    nav a:hover{ background: rgba(15,27,50,.6); color: var(--text); }
    .actions{ display:flex; align-items:center; gap:10px; }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      padding:11px 14px;
      border-radius: 14px;
      border:1px solid rgba(30,45,82,.9);
      background: rgba(15,27,50,.75);
      color: var(--text);
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(15,27,50,.95); }
    .btn.primary{
      border-color: rgba(122,167,255,.65);
      background: linear-gradient(180deg, rgba(122,167,255,.22), rgba(15,27,50,.85));
      box-shadow: 0 18px 40px rgba(122,167,255,.12);
    }
    .btn.ghost{
      background: transparent;
      border:1px solid rgba(30,45,82,.8);
      box-shadow:none;
      color: var(--muted);
    }
    .btn.ghost:hover{ color: var(--text); background: rgba(15,27,50,.45); }

    /* hero */
    .hero{ padding: 16px 0 10px; }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:22px;
      align-items:stretch;
    }
    .heroCard{
      border-radius: var(--radius2);
      border:1px solid rgba(30,45,82,.75);
      background: rgba(11,18,32,.55);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .heroCard .pad{ padding: 26px; }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(15,27,50,.75);
      border:1px solid rgba(30,45,82,.75);
      color: var(--muted);
      font-weight:700;
      font-size: 12px;
    }
    .dot{
      width:8px; height:8px; border-radius:999px;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(45,212,191,.12);
    }
    h1{
      margin: 14px 0 10px;
      font-size: clamp(26px, 3.2vw, 44px);
      line-height: 1.15;
      letter-spacing: -.5px;
    }
    .sub{
      margin:0;
      color: var(--muted);
      font-size: 15px;
      max-width: 58ch;
    }
    .ctaRow{
      margin-top: 18px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .miniRow{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top: 18px;
      color: var(--muted);
      font-size: 13px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid rgba(30,45,82,.7);
      background: rgba(15,27,50,.5);
    }
    .pill b{ color: var(--text); font-weight:800; }
    .pill.white{ color:#ffffff; }

    /* right demo card */
    .demo{
      padding: 22px;
      display:flex; flex-direction:column; gap:14px;
      height:100%;
      position:relative;
    }
    .demoTop{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:10px;
    }
    .demoTitle{ font-weight:900; }
    .kpiGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .kpi{
      border-radius: var(--radius);
      border:1px solid rgba(30,45,82,.7);
      background: rgba(15,27,50,.55);
      padding: 12px;
    }
    .kpi .label{ color: var(--muted); font-size:12px; font-weight:700; }
    .kpi .value{ font-size:16px; font-weight:900; margin-top:4px; }
    .log{
      border-radius: var(--radius);
      border:1px solid rgba(30,45,82,.7);
      background: rgba(15,27,50,.45);
      padding: 12px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      overflow:auto;
      max-height: 220px;
    }
    .line{ display:flex; gap:8px; white-space:nowrap; }
    .tag{
      display:inline-flex; align-items:center; justify-content:center;
      min-width: 46px;
      padding: 2px 8px;
      border-radius: 999px;
      border:1px solid rgba(30,45,82,.8);
      background: rgba(11,18,32,.5);
      color: var(--text);
      font-weight:800;
      font-size: 11px;
    }
    .tag.good{ border-color: rgba(45,212,191,.45); }
    .tag.warn{ border-color: rgba(251,191,36,.45); }
    .tag.bad{  border-color: rgba(251,113,133,.45); }

    /* sections */
    section{ padding: 26px 0; }
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px; flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 20px;
      letter-spacing: -.2px;
    }
    .sectionHead p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      max-width: 68ch;
    }
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    .card{
      border-radius: var(--radius);
      border:1px solid rgba(30,45,82,.75);
      background: rgba(11,18,32,.55);
      box-shadow: 0 16px 50px rgba(0,0,0,.22);
      padding: 16px;
      overflow:hidden;
      position:relative;
    }
    .card h3{
      margin:0 0 6px;
      font-size: 15px;
      letter-spacing: -.2px;
      color: var(--text) !important;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
    }
    .icon{
      width: 36px; height: 36px;
      border-radius: 14px;
      border:1px solid rgba(30,45,82,.8);
      background: rgba(15,27,50,.65);
      display:flex; align-items:center; justify-content:center;
      margin-bottom: 10px;
      font-weight: 900;
      color: var(--text);
    }

    .usecases{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .rowCase{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:14px; flex-wrap:wrap;
      padding: 14px;
      border-radius: var(--radius);
      border:1px solid rgba(30,45,82,.65);
      background: rgba(15,27,50,.35);
    }
    .rowCase .left{
      display:flex; gap:12px; align-items:flex-start;
      min-width: 260px;
      flex: 1;
    }
    .rowCase .title{ font-weight:900; }
    .rowCase .desc{ color: var(--muted); font-size: 13px; margin-top:3px; }
    .rowCase .right{
      display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
    }

    .arch{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:12px;
      align-items:stretch;
    }
    .arch pre{
      margin:0;
      border-radius: var(--radius);
      border:1px solid rgba(30,45,82,.7);
      background: rgba(15,27,50,.35);
      padding: 14px;
      color: var(--muted);
      overflow:auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.5;
      min-height: 230px;
    }

    section { scroll-margin-top: 200px; }

    .foot{
      padding: 30px 0 46px;
      color: var(--muted);
      font-size: 12px;
      border-top: 1px solid rgba(30,45,82,.55);
      margin-top: 18px;
    }
    .foot .cols{
      display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap;
    }
    .foot a{ color: var(--muted); }
    .foot a:hover{ color: var(--text); }

    .logo-text { font-weight: 700; font-size: 18px; }
    .logo-io { color: var(--muted); font-weight: 700; font-size: 12px; margin-left: 2px; }

    /* responsive */
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
      nav{ display:none; }
      .grid3{ grid-template-columns: 1fr; }
      .arch{ grid-template-columns: 1fr; }
    }