:root{
    --bg-1:#0f0d18; --bg-2:#161225; --bg-3:#11101a;
    --surface: rgba(35, 28, 50, 0.55);
    --surface-strong: rgba(45, 36, 62, 0.92);
    --surface-hover: rgba(52, 40, 72, 0.85);
    --border: rgba(167, 139, 250, 0.16);
    --border-strong: rgba(167, 139, 250, 0.35);
    --text: #ede9fe;
    --text-soft: #c4b5fd;
    --text-faint: #8b7fc0;
    --accent: #a78bfa;
    --accent-soft: #c4b5fd;
    --indigo: #818cf8;
    --indigo-deep: #6366f1;
    --accent-grad: linear-gradient(120deg, #7c3aed, #6366f1);
    --ok:#34d399; --warn:#fbbf24; --err:#f87171;
    --radius: 18px;
    --shadow: 0 14px 40px -14px rgba(0,0,0,.55);
    --shadow-sm: 0 6px 18px -8px rgba(0,0,0,.45);
    --maxw: 1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--text); font-family:'Quicksand','Segoe UI',system-ui,'Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;
    background:
      radial-gradient(1200px 800px at 85% -10%, rgba(99,102,241,.22), transparent 60%),
      radial-gradient(1000px 700px at -10% 110%, rgba(124,58,237,.18), transparent 55%),
      linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-1) 100%) fixed;
    line-height:1.55;
  }
  a{color:var(--accent-soft)}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .num{font-family:'JetBrains Mono',monospace}

  /* nav */
  header.top{
    position:sticky; top:0; z-index:20; backdrop-filter: blur(14px);
    background: rgba(15,13,24,.72); border-bottom:1px solid var(--border);
  }
  .topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
  .brand-icon{
    width:36px;height:36px;border-radius:11px; background:var(--accent-grad);
    display:flex;align-items:center;justify-content:center; color:#fff; flex-shrink:0;
    box-shadow: var(--shadow-sm);
  }
  .brand-name{font-weight:700; font-size:19px; line-height:1}
  .brand-tag{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em}
  nav.links{display:flex; gap:22px; align-items:center}
  nav.links a{color:var(--text-soft); text-decoration:none; font-weight:600; font-size:14px}
  nav.links a:hover{color:var(--text)}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:12px;
    font-weight:700; font-size:14px; text-decoration:none; border:1px solid var(--border-strong);
    color:var(--text); background:var(--surface-strong); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--accent-grad); border:none; color:#fff; box-shadow:0 8px 22px -6px rgba(99,102,241,.55)}
  .btn.sm{padding:7px 13px; font-size:12.5px; border-radius:10px}

  /* hero */
  .hero{padding:76px 0 40px; text-align:center}
  .chip{
    display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:99px;
    background:rgba(167,139,250,.12); border:1px solid var(--border-strong); color:var(--accent-soft);
    font-size:12.5px; font-weight:700; margin-bottom:22px;
  }
  .chip .dot{width:7px;height:7px;border-radius:99px; background:var(--ok)}
  h1.hero-title{font-size:clamp(32px,5vw,54px); margin:0 0 18px; line-height:1.12; font-weight:700}
  h1.hero-title .grad{background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .hero-sub{max-width:680px; margin:0 auto 34px; color:var(--text-soft); font-size:18px}
  .hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
  .hero-note{font-size:13px; color:var(--text-faint)}
  .hero-note a{color:var(--text-faint); text-decoration:underline}

  /* status banner */
  .status-banner{
    max-width:820px; margin:44px auto 0; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px 22px; display:flex; gap:14px; align-items:flex-start;
    box-shadow: var(--shadow-sm);
  }
  .status-banner .ico{font-size:20px; flex-shrink:0}
  .status-banner p{margin:0; color:var(--text-soft); font-size:14px}
  .status-banner b{color:var(--text)}
  .status-banner a{color:var(--accent-soft)}

  section{padding:70px 0}
  .section-head{text-align:center; max-width:680px; margin:0 auto 46px}
  .eyebrow{color:var(--accent-soft); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px}
  h2{font-size:clamp(26px,3.4vw,36px); margin:0 0 14px}
  .section-head p{color:var(--text-soft); font-size:15.5px; margin:0}

  /* feature grid */
  .grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:18px}
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow-sm); transition:transform .18s ease, border-color .18s ease;
  }
  .card:hover{transform:translateY(-3px); border-color:var(--border-strong)}
  .card .f-icon{
    width:42px;height:42px;border-radius:12px; background:rgba(167,139,250,.14);
    display:flex;align-items:center;justify-content:center; color:var(--accent-soft); margin-bottom:14px;
  }
  .card h3{margin:0 0 8px; font-size:16px}
  .card p{margin:0; color:var(--text-soft); font-size:13.8px}
  .badge-new{
    display:inline-block; margin-left:8px; padding:2px 8px; border-radius:99px; font-size:10px;
    font-weight:800; letter-spacing:.04em; background:var(--accent-grad); color:#fff; vertical-align:middle;
  }

  /* assistant spotlight */
  .spotlight{
    background:linear-gradient(160deg, rgba(124,58,237,.14), rgba(99,102,241,.06));
    border:1px solid var(--border-strong); border-radius:24px; padding:48px; display:grid;
    grid-template-columns:1.1fr 1fr; gap:44px; align-items:center;
  }
  .spotlight-copy h2{margin-top:0}
  .spotlight-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
  .spotlight-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text-soft)}
  .spotlight-list .tick{
    flex-shrink:0; width:22px;height:22px;border-radius:7px; background:var(--accent-grad);
    display:flex;align-items:center;justify-content:center; margin-top:1px;
  }
  .spotlight-list .tick svg{width:13px;height:13px}
  .spotlight-list b{color:var(--text)}

  /* chat mockup */
  .chat-mock{
    background:var(--surface-strong); border:1px solid var(--border); border-radius:18px;
    padding:18px; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow);
  }
  .chat-mock .bubble{max-width:82%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.4}
  .chat-mock .u{align-self:flex-end; background:var(--accent-grad); color:#1c1022; border-bottom-right-radius:4px}
  .chat-mock .a{align-self:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--border); border-bottom-left-radius:4px; color:var(--text)}
  .chat-mock .a.card-a{background:rgba(167,139,250,.1); border:1px solid var(--border-strong)}
  .chat-mock .a.card-a .t{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:5px}
  .chat-mock .a.card-a .b{display:flex; gap:8px; margin-top:9px}
  .chat-mock .a.card-a button{font-size:11px; padding:5px 10px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; color:var(--text-soft); font-weight:700}
  .chat-mock .a.card-a button.go{background:var(--accent-grad); border:none; color:#fff}

  /* screenshots */
  .shots{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px}
  .shot{
    border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--surface);
    box-shadow:var(--shadow-sm); display:block; text-decoration:none; color:inherit;
  }
  .shot img{display:block; width:100%; height:200px; object-fit:cover; object-position:top;}
  .shot .cap{padding:14px 16px}
  .shot .cap b{font-size:14px; display:block; margin-bottom:3px}
  .shot .cap span{font-size:12.5px; color:var(--text-faint)}

  /* separation diagram */
  .sep-diagram{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .sep-col{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px}
  .sep-col h4{margin:0 0 12px; font-size:14px; display:flex; align-items:center; gap:8px}
  .sep-col .swatch{width:10px;height:10px;border-radius:3px}
  .sep-col dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px}
  .sep-col dt{color:var(--text-faint)}
  .sep-col dd{margin:0; color:var(--text-soft)}

  /* platform table */
  table.platforms{width:100%; border-collapse:collapse; font-size:14px}
  table.platforms th, table.platforms td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--border)}
  table.platforms th{color:var(--text-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700}
  table.platforms tr:last-child td{border-bottom:none}
  .yes{color:var(--ok); font-weight:700}
  .no{color:var(--text-faint)}

  /* languages */
  .lang-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
  .lang-chip{
    padding:9px 18px; border-radius:99px; background:var(--surface); border:1px solid var(--border);
    font-weight:700; font-size:14px;
  }

  /* roadmap */
  .roadmap-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
  .roadmap-col{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px}
  .roadmap-col h4{margin:0 0 14px; font-size:15px; display:flex; align-items:center; gap:8px}
  .roadmap-col ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:13.8px; color:var(--text-soft)}
  .roadmap-col ul li::marker{color:var(--text-faint)}

  /* client internals */
  .kv-list{display:flex; flex-direction:column; gap:16px}
  .kv-list .item{display:flex; gap:14px; align-items:flex-start}
  .kv-list .dot2{width:8px;height:8px; border-radius:99px; background:var(--accent-grad); margin-top:7px; flex-shrink:0}
  .kv-list b{display:block; margin-bottom:3px}
  .kv-list span{color:var(--text-soft); font-size:13.8px}

  /* cta */
  .cta{
    text-align:center; background:linear-gradient(160deg, rgba(124,58,237,.18), rgba(99,102,241,.08));
    border:1px solid var(--border-strong); border-radius:24px; padding:60px 24px;
  }
  .cta h2{margin-top:0}
  .cta p{color:var(--text-soft); max-width:520px; margin:0 auto 28px}

  footer{padding:44px 0 60px; border-top:1px solid var(--border)}
  .foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:26px}
  .foot-links{display:flex; gap:22px; flex-wrap:wrap}
  .foot-links a{color:var(--text-soft); text-decoration:none; font-size:14px; font-weight:600}
  .foot-links a:hover{color:var(--text)}
  .foot-legal{color:var(--text-faint); font-size:12.5px}

  @media (max-width:900px){
    nav.links{display:none}
    .spotlight{grid-template-columns:1fr; padding:30px}
    .sep-diagram{grid-template-columns:1fr}
    .roadmap-grid{grid-template-columns:1fr}
  }

  /* language switcher */
  .actions{display:flex; align-items:center; gap:10px}
  .lang-select{
    background:var(--surface-strong); color:var(--text); border:1px solid var(--border-strong);
    border-radius:10px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  }
  .lang-select option{background:#161225; color:#ede9fe}
  @media (max-width:520px){
    .brand-tag{display:none}
    .btn.sm{padding:7px 10px}
    .actions{gap:6px}
  }

/* language menu (plain links: crawlable, no JS) */
.langmenu{position:relative}
.langmenu summary{list-style:none;cursor:pointer;color:var(--text-soft);border:1px solid var(--border-strong);border-radius:10px;padding:8px 12px;font-weight:600;font-size:13px;background:var(--surface-strong)}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu .lm{position:absolute;right:0;top:calc(100% + 6px);display:grid;gap:2px;min-width:150px;padding:6px;border-radius:12px;background:var(--surface-strong);border:1px solid var(--border-strong);box-shadow:var(--shadow);z-index:30}
.langmenu .lm a{padding:7px 10px;border-radius:8px;color:var(--text-soft);text-decoration:none;font-size:14px}
.langmenu .lm a:hover,.langmenu .lm a[aria-current]{background:var(--surface-hover);color:var(--text)}
a.lang-chip{text-decoration:none}
a.lang-chip:hover{border-color:var(--border-strong)}