:root{
  --bg:#07090d;
  --panel:#0e1218;
  --panel-2:#131923;
  --panel-3:#18202b;
  --text:#f7f9fc;
  --muted:#a8b0bd;
  --soft:#747f8f;
  --silver:#d9dde5;
  --blue:#35b7ff;
  --blue-2:#1687ff;
  --violet:#7257ff;
  --green:#4fe59a;
  --border:rgba(217,221,229,.12);
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-width:320px;color:var(--text);background:
radial-gradient(circle at 12% 0%,rgba(53,183,255,.08),transparent 26%),
radial-gradient(circle at 88% 12%,rgba(114,87,255,.08),transparent 24%),
var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid rgba(53,183,255,.8);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.vs-header{position:sticky;top:0;z-index:1100;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;min-height:68px;padding:10px clamp(18px,3vw,44px);background:rgba(7,9,13,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(20px)}
.vs-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.14em}
.vs-brand img{width:40px;height:40px;object-fit:contain}
.vs-brand small{color:var(--blue);font-size:.62rem;letter-spacing:.18em}
.vs-nav{display:flex;justify-content:center;gap:clamp(13px,1.7vw,24px);overflow-x:auto;scrollbar-width:none}
.vs-nav::-webkit-scrollbar{display:none}
.vs-nav a{position:relative;flex:0 0 auto;padding:10px 0;color:#c5cad2;text-decoration:none;font-size:.84rem;font-weight:800}
.vs-nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--violet));transform:scaleX(0);transition:.2s}
.vs-nav a:hover:after,.vs-nav a.active:after{transform:scaleX(1)}
.vs-header-actions{display:flex;gap:8px}
.vs-header-actions button{width:38px;height:38px;color:#fff;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.035);font-weight:800}
.profile-chip{background:linear-gradient(135deg,var(--blue-2),var(--violet))!important;border:0!important}

main{width:min(1700px,100%);margin:auto;padding:18px 18px 110px}
.vs-hero{position:relative;min-height:560px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr);gap:34px;align-items:end;overflow:hidden;border:1px solid var(--border);border-radius:28px;background:
linear-gradient(90deg,rgba(5,7,10,.96),rgba(5,7,10,.72) 50%,rgba(5,7,10,.28)),
linear-gradient(180deg,rgba(5,7,10,.1),rgba(5,7,10,.84)),
url("../assets/images/studio-creator.jpg") center/cover no-repeat;box-shadow:var(--shadow)}
.vs-hero-overlay{position:absolute;inset:0;background:
radial-gradient(circle at 74% 28%,rgba(53,183,255,.16),transparent 30%),
radial-gradient(circle at 28% 76%,rgba(114,87,255,.14),transparent 36%);pointer-events:none}
.ambient-particles{position:absolute;inset:0;pointer-events:none}
.ambient-particle{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:rgba(255,255,255,var(--alpha));box-shadow:0 0 10px rgba(53,183,255,.65);animation:particleFloat var(--duration) linear var(--delay) infinite}
.vs-hero-copy{position:relative;z-index:2;padding:clamp(38px,5vw,72px)}
.eyebrow,.section-heading p,.operations-card p,.vision-card-top p,.kairos-panel p,.workspace-header p,.workspace-inspector p,.vision-build-header p,.simple-modal-shell>p{margin:0;color:var(--blue);font-size:.7rem;font-weight:900;letter-spacing:.18em}
.vs-hero-copy h1{margin:14px 0 0;font-size:clamp(3.5rem,7vw,7.4rem);line-height:.88;letter-spacing:-.065em;max-width:900px}
.hero-subtitle{max-width:760px;margin:22px 0 0;color:#d0d5dc;font-size:1.08rem;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.hero-actions button{min-height:50px;padding:0 20px;border-radius:12px;font-weight:900}
.primary-action{color:#fff;border:0;background:linear-gradient(135deg,var(--blue-2),var(--violet));box-shadow:0 16px 38px rgba(22,135,255,.24)}
.secondary-action{color:#fff;border:1px solid var(--border);background:rgba(255,255,255,.055);backdrop-filter:blur(12px)}
.hero-trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;color:#9ba4b2;font-size:.76rem}
.hero-trust-row span:before{content:"●";margin-right:7px;color:var(--green);font-size:.62rem}

.vision-card{position:relative;z-index:2;margin:0 34px 34px 0;padding:20px;border:1px solid rgba(217,221,229,.16);border-radius:20px;background:rgba(12,16,22,.78);box-shadow:0 22px 60px rgba(0,0,0,.34);backdrop-filter:blur(18px)}
.vision-card-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.vision-card-top h2{margin:5px 0 0;font-size:1.15rem}
.kairos-online{display:flex;align-items:center;gap:7px;color:#d0d6dd;font-size:.72rem;font-weight:800}
.kairos-online i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(79,229,154,.75)}
.vision-card textarea{width:100%;margin-top:16px;padding:14px;resize:vertical;color:#fff;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.045)}
.vision-prompts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.vision-prompts button{min-height:34px;padding:0 10px;color:#cbd1d9;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);font-size:.72rem;font-weight:800}
.vision-submit{width:100%;min-height:48px;margin-top:12px;color:#fff;border:0;border-radius:11px;background:linear-gradient(135deg,var(--blue-2),var(--violet));font-weight:900}

.vs-section{margin-top:18px;padding:22px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(145deg,rgba(17,22,30,.96),rgba(10,13,18,.96))}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}
.section-heading h2{margin:7px 0 0;font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.04em}
.section-heading>button{min-height:42px;padding:0 14px;color:#fff;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);font-weight:800}

.apps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.app-card{min-height:210px;display:flex;flex-direction:column;padding:18px;color:#fff;border:1px solid var(--border);border-radius:17px;background:
radial-gradient(circle at 100% 0%,rgba(53,183,255,.08),transparent 42%),
linear-gradient(145deg,rgba(27,34,45,.98),rgba(13,17,23,.98));text-align:left;transition:.22s}
.app-card:hover{transform:translateY(-5px);border-color:rgba(53,183,255,.36);box-shadow:0 24px 50px rgba(0,0,0,.28)}
.app-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.05);font-size:1.5rem}
.app-card h3{margin:18px 0 0;font-size:1.1rem}
.app-card p{margin:8px 0 18px;color:var(--muted);font-size:.84rem;line-height:1.5}
.app-card strong{margin-top:auto;color:var(--blue);font-size:.78rem}

.project-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.project-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:#0d1117}
.project-thumb{min-height:190px;display:grid;place-items:center;background:
radial-gradient(circle at 28% 28%,var(--project-a),transparent 36%),
radial-gradient(circle at 76% 72%,var(--project-b),transparent 42%),
#10161e;font-size:4rem}
.project-body{padding:16px}
.project-body h3{margin:0}
.project-body p{color:var(--muted);font-size:.8rem}
.project-progress{height:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
.project-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--violet))}
.project-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.project-footer span{color:var(--soft);font-size:.72rem}
.project-footer button{min-height:36px;padding:0 11px;color:#fff;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.035);font-weight:800}

.template-controls{display:flex;gap:7px;flex-wrap:wrap}
.template-controls button{min-height:36px;padding:0 11px;color:#cbd1d9;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);font-weight:800}
.template-controls button.active{color:#fff;border-color:rgba(53,183,255,.42);background:rgba(53,183,255,.1)}
.templates-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,310px);gap:12px;overflow-x:auto;padding-bottom:4px}
.template-card{min-height:210px;display:flex;flex-direction:column;padding:18px;border:1px solid var(--border);border-radius:16px;background:
linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.05)),
#111720}
.template-card span{font-size:2rem}
.template-card h3{margin:18px 0 0}
.template-card p{color:var(--muted);font-size:.82rem;line-height:1.5}
.template-card button{margin-top:auto;min-height:38px;color:#fff;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.035);font-weight:800}

.studio-operations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;background:transparent;border:0;padding:0}
.operations-card{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(18,24,33,.98),rgba(11,15,21,.98))}
.operations-card h2{margin:8px 0 0;font-size:1.45rem}
.operations-card span{display:block;margin-top:10px;color:var(--muted);line-height:1.55}
.operations-card button{align-self:flex-start;min-height:40px;padding:0 13px;color:#fff;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);font-weight:800}
.signature-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px}
.signature-preview{width:64px;height:64px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#f0f2f5,#7d8591);color:#0c1016;font-size:1.6rem;font-weight:900}
.signature-toggle input{display:none}
.signature-toggle span{position:relative;width:46px;height:26px;display:block;border-radius:999px;background:rgba(255,255,255,.14)}
.signature-toggle span:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.signature-toggle input:checked+span{background:linear-gradient(90deg,var(--blue-2),var(--violet))}
.signature-toggle input:checked+span:after{transform:translateX(20px)}

.kairos-floating-button{position:fixed;right:24px;bottom:24px;z-index:1250;width:62px;height:62px;color:#fff;border:1px solid rgba(53,183,255,.32);border-radius:50%;background:linear-gradient(145deg,var(--violet),#173c58);box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 30px rgba(53,183,255,.18);font-size:1.25rem;font-weight:900}
.kairos-panel{position:fixed;top:82px;right:18px;bottom:18px;z-index:1300;width:min(410px,calc(100% - 36px));display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--border);border-radius:22px;background:rgba(12,16,22,.97);box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.kairos-panel header{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid var(--border)}
.kairos-panel-title{display:flex;align-items:center;gap:11px}
.kairos-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--violet),#173c58);font-weight:900}
.kairos-avatar.large{width:68px;height:68px;font-size:1.3rem}
.kairos-panel h2{margin:4px 0 0;font-size:1.05rem}
.kairos-panel header>button{width:38px;height:38px;color:#fff;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.035)}
.kairos-conversation{overflow-y:auto;padding:16px}
.kairos-message{padding:14px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.035)}
.kairos-message p{color:var(--muted);line-height:1.6}
.kairos-panel form{display:grid;gap:9px;padding:14px;border-top:1px solid var(--border)}
.kairos-panel textarea{width:100%;resize:vertical;color:#fff;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04);padding:12px}
.kairos-panel form button{min-height:42px;color:#fff;border:0;border-radius:10px;background:linear-gradient(135deg,var(--blue-2),var(--violet));font-weight:900}

.vs-modal{position:fixed;inset:0;z-index:1500;overflow-y:auto;padding:20px;background:rgba(3,5,8,.9);backdrop-filter:blur(18px)}
.workspace-shell,.vision-build-shell,.simple-modal-shell{position:relative;width:min(1180px,100%);margin:auto;border:1px solid var(--border);border-radius:24px;background:#0d1219;box-shadow:var(--shadow);overflow:hidden}
.modal-close{position:absolute;top:16px;right:16px;z-index:5;width:42px;height:42px;color:#fff;border:1px solid var(--border);border-radius:50%;background:#0f151d;font-size:1.25rem}
.workspace-header{display:flex;justify-content:space-between;align-items:center;padding:18px 72px 18px 20px;border-bottom:1px solid var(--border)}
.workspace-header h2{margin:5px 0 0}
.workspace-header-actions{display:flex;gap:8px}
.workspace-header-actions button{min-height:38px;padding:0 11px;color:#fff;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.035)}
.workspace-layout{display:grid;grid-template-columns:190px minmax(0,1fr) 250px;min-height:670px}
.workspace-tools{padding:14px;border-right:1px solid var(--border)}
.workspace-tools button{width:100%;min-height:42px;margin-bottom:7px;padding:0 11px;color:#c6ccd5;border:0;border-radius:9px;background:transparent;text-align:left;font-weight:800}
.workspace-tools button.active{color:#fff;background:rgba(53,183,255,.1)}
.workspace-stage{display:grid;place-items:center;padding:28px;background:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#090d12;background-size:24px 24px}
.workspace-preview{width:min(760px,100%);aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:26px;border:1px solid var(--border);border-radius:18px;background:
radial-gradient(circle at 30% 30%,rgba(53,183,255,.16),transparent 35%),
radial-gradient(circle at 75% 70%,rgba(114,87,255,.16),transparent 42%),#121923}
.workspace-preview>span{font-size:5rem}
.workspace-preview h3{margin:10px 0 0;font-size:1.5rem}
.workspace-preview p{color:var(--muted)}
.workspace-inspector{padding:16px;border-left:1px solid var(--border)}
.workspace-inspector button{width:100%;min-height:42px;margin-top:9px;color:#fff;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.035);text-align:left;padding:0 11px}
.vision-build-shell,.simple-modal-shell{padding:42px}
.vision-build-header{display:flex;align-items:center;gap:16px;padding-right:52px}
.vision-build-header h2{margin:7px 0 0;font-size:clamp(2rem,4vw,3.6rem)}
.vision-build-steps{display:grid;gap:10px;margin-top:26px}
.vision-step{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.035)}
.vision-step span:first-child{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(53,183,255,.08)}
.vision-step small{color:var(--muted)}
.vision-step b{color:var(--green);font-size:.72rem}
.vision-build-result{margin-top:18px;padding:18px;border:1px solid rgba(79,229,154,.25);border-radius:14px;background:rgba(79,229,154,.055)}
.vision-build-result button{min-height:42px;margin-top:10px;padding:0 13px;color:#fff;border:0;border-radius:10px;background:linear-gradient(135deg,var(--blue-2),var(--violet));font-weight:900}
.simple-modal-shell>h2{margin:8px 0 20px;font-size:clamp(2rem,4vw,3.2rem)}
.simple-modal-content{display:grid;gap:10px}
.simple-modal-content article{padding:14px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.035)}
.toast{position:fixed;right:22px;bottom:96px;z-index:1800;max-width:min(380px,calc(100% - 44px));padding:14px 17px;color:#fff;border:1px solid var(--border);border-radius:12px;background:#111822;box-shadow:var(--shadow);font-weight:800}

@keyframes particleFloat{from{transform:translateY(12vh)}to{transform:translate3d(var(--drift),-110vh,0)}}

@media(max-width:1180px){
  .vs-header{grid-template-columns:auto minmax(0,1fr)}
  .vs-header-actions{display:none}
  .vs-nav{justify-content:flex-end}
  .vs-hero{grid-template-columns:1fr}
  .vision-card{margin:0 28px 28px}
  .apps-grid{grid-template-columns:repeat(3,1fr)}
  .project-showcase{grid-template-columns:repeat(2,1fr)}
  .studio-operations{grid-template-columns:1fr}
}
@media(max-width:820px){
  .vs-header{grid-template-columns:1fr;gap:7px}
  .vs-nav{justify-content:flex-start}
  .vs-hero{min-height:760px}
  .vs-hero-copy{padding:72px 24px 30px}
  .apps-grid{grid-template-columns:repeat(2,1fr)}
  .project-showcase{grid-template-columns:1fr}
  .workspace-layout{grid-template-columns:1fr}
  .workspace-tools{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border)}
  .workspace-tools button{width:auto;min-width:max-content;margin:0 6px 0 0}
  .workspace-inspector{border-left:0;border-top:1px solid var(--border)}
}
@media(max-width:560px){
  main{padding:10px 10px 100px}
  .vs-brand small{display:none}
  .vs-hero{border-radius:20px}
  .vs-hero-copy h1{font-size:clamp(3.2rem,16vw,5.4rem)}
  .vision-card{margin:0 14px 14px}
  .section-heading{align-items:flex-start;flex-direction:column}
  .apps-grid{grid-template-columns:1fr}
  .signature-card{grid-template-columns:54px 1fr}
  .signature-toggle{grid-column:1/-1}
  .vs-modal{padding:7px}
  .vision-build-shell,.simple-modal-shell{padding:34px 18px}
}