:root{
  --bg-void:#050b18;
  --bg-deep:#0a1424;
  --bg-surface:#0f1e36;
  --bg-card:#132845;
  --bg-card-hover:#18335a;
  --bg-raised:#1c3a63;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);
  --border-gold:rgba(212,175,55,.3);
  --text-primary:#e8edf3;
  --text-secondary:#9baec8;
  --text-muted:#5a7392;
  --gold:#d4af37;
  --gold-soft:#c9a961;
  --gold-dim:rgba(212,175,55,.08);
  --gold-glow:rgba(212,175,55,.15);
  --blue:#4a8fd9;
  --blue-dim:rgba(74,143,217,.1);
  --red:#e05656;
  --green:#4ade80;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --font-display:'Fraunces','Noto Serif SC',serif;
  --font-body:'Sora','Noto Sans SC',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --transition:.25s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:15px}
body{
  font-family:var(--font-body);
  background:var(--bg-void);color:var(--text-primary);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--gold-glow);color:var(--gold)}
.bg-env{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 20% 0%,rgba(212,175,55,.04),transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(74,143,217,.06),transparent),
    linear-gradient(180deg,var(--bg-void),var(--bg-deep));}
.bg-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 40px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(5,11,24,.75);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);}
.nav-logo{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.3px}
.nav-logo span{color:var(--gold)}
.nav-right{display:flex;gap:20px;align-items:center}
.nav-link{color:var(--text-secondary);text-decoration:none;font-size:13px;transition:var(--transition)}
.nav-link:hover{color:var(--gold)}
.nav-icon-btn{background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  color:var(--text-secondary);padding:6px 12px;cursor:pointer;font-size:12px;
  font-family:var(--font-body);transition:var(--transition);display:flex;align-items:center;gap:6px}
.nav-icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta{padding:8px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--bg-void);border:none;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--gold-glow)}
@media(max-width:768px){.nav{padding:10px 16px}.nav-right .nav-link{display:none}}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:100px 40px 80px;text-align:center;position:relative}
.hero-tag{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:20px;opacity:0;animation:fu .7s .1s both}
.hero h1{font-family:var(--font-display);font-size:clamp(42px,7vw,80px);font-weight:300;
  line-height:1.08;letter-spacing:-1.5px;margin-bottom:24px;max-width:820px;
  opacity:0;animation:fu .7s .2s both}
.hero h1 em{font-style:italic;font-weight:600;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(15px,1.8vw,18px);color:var(--text-secondary);max-width:580px;
  line-height:1.7;margin-bottom:40px;opacity:0;animation:fu .7s .4s both}
.hero-sub strong{color:var(--gold);font-weight:500}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fu .7s .6s both}
.btn-primary{padding:13px 28px;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--bg-void);border:none;border-radius:var(--radius);font-family:var(--font-body);
  font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--gold-glow)}
.btn-secondary{padding:13px 28px;background:transparent;color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:var(--radius);font-family:var(--font-body);
  font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{padding:10px 20px;background:transparent;color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);
  font-size:13px;cursor:pointer;transition:var(--transition)}
.btn-ghost:hover{color:var(--text-secondary);border-color:var(--border-strong)}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);font-size:11px;
  opacity:0;animation:fu .7s .9s both}
.hero-scroll-line{width:1px;height:32px;background:linear-gradient(180deg,var(--gold),transparent)}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.section{padding:90px 40px;max-width:1100px;margin:0 auto}
.section-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:14px}
.section-title{font-family:var(--font-display);font-size:clamp(28px,4.5vw,46px);font-weight:400;
  line-height:1.2;letter-spacing:-.8px;margin-bottom:20px}
.section-title em{font-style:italic;color:var(--gold)}
.section-desc{font-size:16px;color:var(--text-secondary);max-width:640px;line-height:1.7;margin-bottom:40px}

.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.insight-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;transition:var(--transition)}
.insight-card:hover{background:var(--bg-card);border-color:var(--border-gold);transform:translateY(-3px)}
.insight-num{font-family:var(--font-display);font-size:13px;color:var(--gold);font-weight:600;margin-bottom:14px}
.insight-card h4{font-size:16px;font-weight:600;margin-bottom:8px}
.insight-card p{font-size:13px;color:var(--text-secondary);line-height:1.65}
.insight-card .code-inline{font-family:var(--font-mono);font-size:12px;color:var(--gold);
  background:var(--gold-dim);padding:2px 6px;border-radius:3px}
@media(max-width:768px){.insight-grid{grid-template-columns:1fr}}

.forge-section{background:linear-gradient(180deg,transparent,rgba(212,175,55,.02));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:90px 40px}
.forge-inner{max-width:1100px;margin:0 auto}
.forge-hero{text-align:center;margin-bottom:48px}
.forge-hero h2{font-family:var(--font-display);font-size:clamp(28px,4.5vw,46px);font-weight:400;margin-bottom:16px}
.forge-hero h2 em{font-style:italic;color:var(--gold)}
.forge-hero p{color:var(--text-secondary);font-size:16px;max-width:600px;margin:0 auto}

.forge-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px}
.forge-step{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 16px;text-align:center;transition:var(--transition);cursor:default;position:relative}
.forge-step.active{border-color:var(--gold);background:var(--bg-card);box-shadow:0 0 20px var(--gold-glow)}
.forge-step.done{opacity:.7}
.forge-step-icon{width:40px;height:40px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-dim);border-radius:50%;color:var(--gold)}
.forge-step.active .forge-step-icon{background:var(--gold);color:var(--bg-void)}
.forge-step-icon svg{width:18px;height:18px}
.forge-step h5{font-size:13px;font-weight:600;margin-bottom:4px}
.forge-step p{font-size:11px;color:var(--text-muted);line-height:1.4}
@media(max-width:768px){.forge-steps{grid-template-columns:repeat(2,1fr);gap:8px}}

.forge-panel{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  overflow:hidden}
.forge-panel-header{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.forge-panel-header h3{font-family:var(--font-display);font-size:18px;font-weight:600}
.forge-panel-body{padding:28px;min-height:320px}

.forge-input-group{margin-bottom:20px}
.forge-input-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:8px;font-weight:500}
.forge-input-group textarea,.forge-input-group input,.forge-input-group select{width:100%;padding:12px 16px;
  background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:var(--radius);
  color:var(--text-primary);font-family:var(--font-body);font-size:14px;transition:var(--transition);resize:vertical}
.forge-input-group textarea{min-height:120px;line-height:1.6}
.forge-input-group textarea:focus,.forge-input-group input:focus,.forge-input-group select:focus{
  outline:none;border-color:var(--gold)}
.forge-input-group select{appearance:none;cursor:pointer}
.forge-input-group .hint{font-size:12px;color:var(--text-muted);margin-top:6px}
.preset-personas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.preset-card{background:var(--bg-deep);border:2px solid var(--border);border-radius:var(--radius);
  padding:16px 12px;text-align:center;cursor:pointer;transition:var(--transition)}
.preset-card:hover,.preset-card.selected{border-color:var(--gold);background:var(--bg-card)}
.preset-avatar{width:40px;height:40px;margin:0 auto 8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:16px;font-weight:600;color:var(--bg-void);
  background:linear-gradient(135deg,var(--gold),var(--gold-soft))}
.preset-card h6{font-size:12px;font-weight:600;margin-bottom:2px}
.preset-card p{font-size:10px;color:var(--text-muted)}
@media(max-width:768px){.preset-personas{grid-template-columns:repeat(2,1fr)}}

.forge-output{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  min-height:200px;max-height:400px;overflow-y:auto;font-family:var(--font-body);font-size:14px;
  line-height:1.8;color:var(--text-secondary);white-space:pre-wrap}
.forge-output::-webkit-scrollbar{width:4px}
.forge-output::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.forge-cursor{display:inline-block;width:8px;height:16px;background:var(--gold);
  animation:blink 0.8s infinite;vertical-align:text-bottom;margin-left:2px}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.forge-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}

.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.persona-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 20px;text-align:center;transition:var(--transition);cursor:pointer}
.persona-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.persona-card .avatar{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:600;
  color:var(--bg-void);background:linear-gradient(135deg,var(--gold),var(--gold-soft))}
.persona-card h4{font-size:15px;font-weight:600;margin-bottom:3px}
.persona-card .title{font-size:12px;color:var(--gold);margin-bottom:10px}
.persona-card p{font-size:12px;color:var(--text-muted);line-height:1.5;font-style:italic}
.persona-card .chat-btn{margin-top:14px;padding:6px 16px;background:var(--gold-dim);border:1px solid var(--border-gold);
  border-radius:20px;color:var(--gold);font-size:12px;cursor:pointer;font-family:var(--font-body);transition:var(--transition)}
.persona-card .chat-btn:hover{background:var(--gold);color:var(--bg-void)}
@media(max-width:768px){.persona-grid{grid-template-columns:1fr 1fr;gap:12px}}

.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.method-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;transition:var(--transition)}
.method-card:hover{border-color:var(--border-gold)}
.method-card h4{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:12px}
.method-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:12px}
.method-card ul{list-style:none;padding:0}
.method-card li{padding:8px 0;font-size:13px;color:var(--text-secondary);display:flex;gap:10px;align-items:flex-start}
.method-card li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:8px;flex-shrink:0}
@media(max-width:768px){.method-grid{grid-template-columns:1fr}}

.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.scene-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;transition:var(--transition)}
.scene-card:hover{border-color:var(--border-gold);background:var(--bg-card)}
.scene-card h5{font-size:14px;font-weight:600;margin-bottom:6px}
.scene-card p{font-size:12px;color:var(--text-muted);line-height:1.5}
@media(max-width:768px){.scene-grid{grid-template-columns:1fr 1fr}}

.cta-block{text-align:center;padding:80px 40px}
.cta-block h2{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-weight:400;margin-bottom:16px}
.cta-block h2 em{font-style:italic;color:var(--gold)}
.cta-block p{color:var(--text-secondary);font-size:16px;margin-bottom:28px}

.footer{padding:40px;text-align:center;border-top:1px solid var(--border);margin-top:60px}
.footer p{font-size:12px;color:var(--text-muted)}

.overlay{position:fixed;inset:0;z-index:300;background:rgba(5,11,24,.96);backdrop-filter:blur(24px);
  display:none;flex-direction:column;opacity:0;transition:opacity .25s}
.overlay.active{display:flex;opacity:1}
.overlay-header{padding:12px 24px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-shrink:0}
.overlay-header-left{display:flex;align-items:center;gap:12px}
.back-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:13px;
  display:flex;align-items:center;gap:5px;font-family:var(--font-body);transition:var(--transition);padding:6px}
.back-btn:hover{color:var(--gold)}
.overlay-title{font-family:var(--font-display);font-size:16px;font-weight:600}
.overlay-title span{color:var(--gold)}
.overlay-header-right{display:flex;gap:8px}
.icon-btn{width:34px;height:34px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn svg{width:16px;height:16px}

.api-setup{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.api-setup-box{max-width:480px;width:100%}
.api-setup-box h2{font-family:var(--font-display);font-size:28px;font-weight:400;margin-bottom:8px}
.api-setup-box h2 em{font-style:italic;color:var(--gold)}
.api-setup-box>p{color:var(--text-secondary);font-size:14px;margin-bottom:24px;line-height:1.6}
.api-setup-box .form-group{margin-bottom:16px}
.api-setup-box label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:500;
  text-transform:uppercase;letter-spacing:1px}
.api-setup-box input{width:100%;padding:10px 14px;background:var(--bg-deep);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:14px;transition:var(--transition)}
.api-setup-box input:focus{outline:none;border-color:var(--gold)}
.api-setup-box .api-hint{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.5}
.api-setup-box .api-hint code{font-family:var(--font-mono);font-size:11px;color:var(--gold);background:var(--gold-dim);padding:1px 5px;border-radius:3px}

.chat-wrap{flex:1;display:none;flex-direction:column;max-width:780px;width:100%;margin:0 auto;padding:0 24px}
.chat-wrap.active{display:flex}
.chat-messages{flex:1;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column;gap:14px}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.msg{max-width:82%;padding:12px 16px;border-radius:var(--radius);font-size:14px;line-height:1.7;animation:msgIn .2s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-user{align-self:flex-end;background:var(--bg-raised);color:var(--text-primary);border-bottom-right-radius:3px}
.msg-agent{align-self:flex-start;background:var(--bg-surface);border:1px solid var(--border);
  color:var(--text-primary);border-bottom-left-radius:3px}
.msg-agent .msg-meta{font-family:var(--font-display);font-size:12px;color:var(--gold);font-weight:600;margin-bottom:5px;
  display:flex;align-items:center;gap:8px}
.msg-agent .msg-meta .badge{font-size:10px;padding:1px 6px;background:var(--gold-dim);border:1px solid var(--border-gold);
  border-radius:3px;color:var(--gold);font-family:var(--font-body);font-weight:500}
.msg-typing{align-self:flex-start;background:var(--bg-surface);border:1px solid var(--border);
  padding:14px 18px;border-radius:var(--radius);border-bottom-left-radius:3px}
.typing-dots{display:flex;gap:4px}
.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.3;animation:tb 1.3s infinite}
.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes tb{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.preset-bar{padding:10px 0;display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto}
.preset-chip{padding:6px 12px;background:transparent;border:1px solid var(--border-strong);border-radius:16px;
  color:var(--text-secondary);font-size:12px;cursor:pointer;white-space:nowrap;font-family:var(--font-body);transition:var(--transition);flex-shrink:0}
.preset-chip:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.chat-input-row{padding:12px 0 20px;display:flex;gap:8px;align-items:center}
.chat-input{flex:1;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:14px;transition:var(--transition)}
.chat-input:focus{outline:none;border-color:var(--gold)}
.chat-send{padding:12px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--bg-void);border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:14px;
  font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}
.chat-send:hover{box-shadow:0 4px 16px var(--gold-glow)}
.chat-send:disabled{opacity:.4;cursor:not-allowed}

.sp-viewer{flex:1;display:none;overflow-y:auto;padding:24px}
.sp-viewer.active{display:block}
.sp-viewer-box{max-width:780px;margin:0 auto}
.sp-viewer h3{font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:16px}
.sp-viewer .sp-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px}
.sp-viewer .sp-section h5{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:8px;font-family:var(--font-mono)}
.sp-viewer .sp-section p,.sp-viewer .sp-section li{font-size:13px;color:var(--text-secondary);line-height:1.7}
.sp-viewer .sp-section ul{list-style:none;padding:0}
.sp-viewer .sp-section li{padding:4px 0;display:flex;gap:8px}
.sp-viewer .sp-section li::before{content:'→';color:var(--gold);flex-shrink:0}

@media(max-width:768px){
  .section{padding:60px 16px}.hero{padding:80px 16px 60px}.forge-section{padding:60px 16px}
  .footer{padding:28px 16px}.chat-wrap{padding:0 12px}.overlay-header{padding:10px 14px}
  .forge-panel-body{padding:16px}
}