:root{--bg:#070a14;--surface:#0d1324;--surface2:#121a30;--line:#24304e;--text:#eef1ff;--muted:#91a0c3;--purple:#8b5cf6;--blue:#3b82f6;--cyan:#22d3ee;--green:#34d399;--red:#fb7185;--shadow:0 24px 80px rgba(0,0,0,.34)}*{box-sizing:border-box}html{color-scheme:dark}body.studio{margin:0;background:radial-gradient(circle at 10% -10%,rgba(59,130,246,.2),transparent 32%),radial-gradient(circle at 100% 0,rgba(139,92,246,.2),transparent 28%),var(--bg);color:var(--text);font:15px/1.55 Inter,"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}.studio-shell{width:min(1180px,calc(100% - 28px));margin:auto}.studio-header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(123,142,190,.18);background:rgba(7,10,20,.82);backdrop-filter:blur(18px)}.studio-nav{height:68px;display:flex;align-items:center;gap:22px}.studio-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.04em}.studio-logo{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 10px 30px rgba(97,79,246,.3)}.studio-links{display:flex;align-items:center;gap:18px;color:#b4c0dc}.studio-links a:hover{color:#fff}.studio-nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.studio-token{padding:8px 12px;border:1px solid var(--line);border-radius:12px;color:#c9d2e9;background:rgba(255,255,255,.025)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:11px 16px;font:inherit;font-weight:800;color:var(--text);background:var(--surface2);cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px);border-color:#53658f}.btn-primary{border:0;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 12px 30px rgba(78,90,246,.28)}.btn-ghost{background:transparent}.btn-danger{background:#431827;border-color:#7d2942}.btn-block{width:100%}.hero{padding:78px 0 52px;text-align:center}.eyebrow{display:inline-flex;padding:6px 11px;border:1px solid rgba(96,165,250,.35);border-radius:999px;color:#a9c8ff;background:rgba(59,130,246,.08);font-weight:750;font-size:13px}.hero h1{max-width:900px;margin:20px auto 16px;font-size:clamp(38px,7vw,72px);line-height:1.04;letter-spacing:-.045em}.gradient-text{background:linear-gradient(90deg,#74b8ff,#a78bfa,#e879f9);background-clip:text;color:transparent}.hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:clamp(16px,2vw,20px)}.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}.section{padding:54px 0}.section-head{max-width:700px;margin-bottom:26px}.section-head h2{font-size:clamp(28px,4vw,44px);margin:0 0 10px;letter-spacing:-.03em}.section-head p{color:var(--muted);margin:0}.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:linear-gradient(180deg,rgba(18,26,48,.9),rgba(11,17,32,.9));border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}.card h3{margin:0 0 8px;font-size:19px}.card p{color:var(--muted);margin:0}.price-card{position:relative;display:flex;flex-direction:column}.price-card.featured{border-color:#755bea;box-shadow:0 25px 80px rgba(91,74,224,.16)}.badge{position:absolute;right:15px;top:15px;border-radius:999px;padding:5px 9px;background:rgba(139,92,246,.18);color:#c7b7ff;font-size:12px;font-weight:800}.price{font-size:34px;font-weight:900;margin:16px 0 2px}.price small{font-size:13px;color:var(--muted)}.meta{color:var(--muted);font-size:13px}.checklist{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:9px;color:#cbd5ed}.checklist li:before{content:'✓';color:var(--green);margin-right:9px;font-weight:900}.price-card .btn{margin-top:auto}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}.auth-card{width:min(460px,100%);padding:28px;border-radius:24px;background:rgba(13,19,36,.94);border:1px solid var(--line);box-shadow:var(--shadow)}.auth-card h1{margin:12px 0 6px;font-size:29px}.auth-card .sub{color:var(--muted);margin-bottom:20px}.field{display:grid;gap:7px;margin:14px 0}.field label{font-weight:780;color:#dbe3f7}.input,.select,.textarea{width:100%;border:1px solid #2b3859;border-radius:12px;padding:12px 13px;background:#090e1d;color:#f4f6ff;font:inherit;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#6c71f8;box-shadow:0 0 0 3px rgba(99,102,241,.13)}.textarea{min-height:110px;resize:vertical}.alert{border-radius:12px;padding:11px 13px;margin:12px 0}.alert-error{color:#fecdd3;background:rgba(190,24,93,.15);border:1px solid rgba(251,113,133,.3)}.alert-ok{color:#a7f3d0;background:rgba(5,150,105,.15);border:1px solid rgba(52,211,153,.3)}.muted{color:var(--muted)}.small{font-size:13px}.split{display:flex;justify-content:space-between;gap:14px;align-items:center}.dashboard{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 68px)}.sidebar{border-right:1px solid var(--line);padding:20px 14px;background:rgba(8,12,24,.62)}.side-links{display:grid;gap:6px}.side-links a{padding:10px 12px;border-radius:11px;color:#aab7d6}.side-links a:hover,.side-links a.active{background:#18213a;color:#fff}.main{padding:26px;min-width:0}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.page-head h1{margin:0;font-size:30px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.stat{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:17px}.stat .value{font-size:28px;font-weight:900}.stat .label{color:var(--muted);font-size:13px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}.table{width:100%;border-collapse:collapse;min-width:720px;background:rgba(13,19,36,.75)}.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(36,48,78,.75)}.table th{color:#91a0c3;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.pill{display:inline-flex;border-radius:999px;padding:4px 8px;background:#1d2844;color:#cbd7f4;font-size:12px}.pill.ok{background:rgba(16,185,129,.14);color:#86efac}.pill.warn{background:rgba(245,158,11,.14);color:#fcd34d}.footer{border-top:1px solid var(--line);margin-top:50px;padding:34px 0;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}.footer h4{color:#fff;margin:0 0 10px}.footer a{display:block;margin:6px 0}.mobile-bar{display:none}
@media(max-width:860px){.studio-links{display:none}.grid-3,.grid-4{grid-template-columns:1fr 1fr}.dashboard{display:block}.sidebar{display:none}.stats{grid-template-columns:1fr 1fr}.main{padding:18px 14px 84px}.mobile-bar{position:fixed;display:flex;z-index:40;bottom:0;left:0;right:0;height:64px;background:rgba(8,12,24,.94);border-top:1px solid var(--line);backdrop-filter:blur(15px);justify-content:space-around;align-items:center}.mobile-bar a{font-size:12px;color:#aab7d6;text-align:center}.footer-grid{grid-template-columns:1fr 1fr}.hero{padding-top:54px}}
@media(max-width:560px){.studio-shell{width:min(100% - 20px,1180px)}.grid-3,.grid-4,.stats{grid-template-columns:1fr}.studio-nav{height:60px}.studio-nav-actions .btn-ghost,.studio-token{display:none}.hero h1{font-size:42px}.card{padding:18px}.auth-card{padding:22px 18px}.page-head{display:block}.page-head .btn{margin-top:12px}.footer-grid{grid-template-columns:1fr}.split.mobile-stack{display:grid}}

/* Marketing home v2 — product-led, mobile first */
.home-hero{min-height:720px;padding:86px 0 76px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);gap:60px;align-items:center}.home-hero-copy h1{font-size:clamp(50px,6vw,78px);line-height:.99;letter-spacing:-.055em;margin:22px 0 20px}.home-hero-copy>p{max-width:620px;color:#9daacc;font-size:18px;line-height:1.7}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 16px #34d399}.btn-lg{min-height:50px;padding:14px 20px;border-radius:14px}.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#7f8dac;font-size:13px;font-weight:650}.hero-trust span:first-letter{color:#5ee2ab}.product-preview{position:relative;border:1px solid rgba(125,145,200,.3);border-radius:22px;background:#0a1020;box-shadow:0 42px 100px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.018);overflow:hidden;transform:perspective(1200px) rotateY(-2deg)}.product-preview:before{content:'';position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(59,130,246,.18),transparent 35%,rgba(139,92,246,.14));pointer-events:none}.preview-top{height:48px;border-bottom:1px solid #263451;padding:0 15px;display:flex;align-items:center;justify-content:space-between;color:#dfe6fa;font-size:12px}.preview-dots{display:flex;gap:5px}.preview-dots i{width:7px;height:7px;border-radius:50%;background:#33415d}.preview-dots i:first-child{background:#fb7185}.preview-dots i:nth-child(2){background:#fbbf24}.preview-dots i:nth-child(3){background:#34d399}.preview-credit{border:1px solid #344461;border-radius:8px;padding:4px 8px;color:#c4b5fd}.preview-body{min-height:400px;display:grid;grid-template-columns:54px 1fr}.preview-side{border-right:1px solid #222f49;display:flex;flex-direction:column;align-items:center;padding-top:17px;gap:12px}.preview-side i{font-style:normal;width:31px;height:31px;display:grid;place-items:center;color:#7180a3;border-radius:9px}.preview-side i.on{background:linear-gradient(135deg,#3b82f6,#8058ef);color:#fff}.preview-canvas{padding:42px 34px}.preview-label{display:block;color:#8090b5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.preview-canvas h3{font-size:23px;margin:9px 0 18px}.prompt-demo{min-height:84px;padding:15px;border:1px solid #33425f;border-radius:14px;background:#0d1528;color:#6f7e9e;font-size:13px;display:flex;justify-content:space-between;align-items:flex-end}.prompt-demo span{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;padding:7px 10px;border-radius:8px;font-weight:750}.workflow-chips{display:flex;gap:7px;margin:10px 0 28px;flex-wrap:wrap}.workflow-chips b{padding:6px 9px;border:1px solid #293753;border-radius:8px;color:#9aa8c8;font-size:10px}.recent-demo{display:grid;grid-template-columns:1fr 1fr;gap:10px}.recent-demo>div{display:flex;align-items:center;gap:9px;padding:9px;background:#10182b;border:1px solid #24314b;border-radius:11px;font-size:11px}.recent-demo small{color:#57d8a2}.thumb{width:38px;height:48px;border-radius:7px;background:linear-gradient(155deg,#233559,#7c3aed);flex:0 0 auto}.thumb.t2{background:linear-gradient(155deg,#164e63,#2563eb)}
.proof-strip{border-block:1px solid rgba(125,145,190,.14);background:rgba(10,15,29,.62)}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:22px}.proof-grid>div{display:flex;align-items:center;justify-content:center;gap:9px;border-right:1px solid #202c45}.proof-grid>div:last-child{border:0}.proof-grid strong{font-size:22px;color:#fff}.proof-grid span{color:#7f8dad;font-size:12px}.centered{text-align:center;margin-inline:auto}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{position:relative;min-height:340px;padding:25px;border:1px solid #283653;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#11192d,#0b1121);display:flex;flex-direction:column}.feature-card:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 5%,var(--glow,rgba(99,102,241,.18)),transparent 40%);pointer-events:none}.feature-card.blue{--glow:rgba(59,130,246,.28)}.feature-card.purple{--glow:rgba(139,92,246,.28)}.feature-card.cyan{--glow:rgba(34,211,238,.2)}.feature-card.orange{--glow:rgba(251,146,60,.2)}.feature-card.pink{--glow:rgba(236,72,153,.2)}.feature-large{grid-row:span 2;min-height:696px}.feature-wide{grid-column:span 2;min-height:340px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:18px}.feature-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #3a496b;border-radius:13px;background:rgba(255,255,255,.04);color:#c4b5fd;font-size:18px;margin-bottom:42px}.feature-kicker{position:absolute;right:18px;top:18px;padding:5px 8px;border-radius:999px;background:rgba(59,130,246,.13);color:#91c3ff;font-size:10px;font-weight:850}.feature-card h3{font-size:25px;letter-spacing:-.025em;margin:0 0 10px}.feature-card p{color:#91a0c1;margin:0 0 16px;max-width:480px}.feature-card ul{list-style:none;padding:0;margin:8px 0;display:grid;gap:9px;color:#c5cee2}.feature-card li:before{content:'✓';margin-right:8px;color:#67e8b2}.feature-card>a{position:relative;margin-top:auto;color:#b8c7f3;font-weight:800}.feature-card>a b{color:#8b8dfc;margin-left:5px}.feature-visual{margin-top:34px}.timeline-visual{height:285px;padding:15px;border:1px solid #2c3c5c;border-radius:15px;background:#080d19;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:end;position:relative}.timeline-visual i{height:178px;border-radius:9px;background:linear-gradient(160deg,#182e57,#315ea4)}.timeline-visual i:nth-child(2){height:220px;background:linear-gradient(160deg,#293064,#7c4bcc)}.timeline-visual i:nth-child(3){height:150px;background:linear-gradient(160deg,#153a4d,#2585a0)}.timeline-visual span{position:absolute;left:15px;right:15px;bottom:14px;height:23px;border-radius:6px;background:repeating-linear-gradient(90deg,#6d5ae7 0 35px,#342d6c 35px 39px)}.cut-visual{display:flex;gap:5px;align-items:flex-end}.cut-visual i{height:50px;flex:1;border-radius:8px;background:#30255f}.cut-visual i:nth-child(2){height:76px;background:#6d4dd1}.cut-visual i:nth-child(3){height:61px;background:#43308a}.language-visual{display:flex;align-items:center;justify-content:center;gap:15px;height:90px}.language-visual span{display:grid;place-items:center;width:62px;height:46px;border:1px solid #31506a;background:#102a38;border-radius:12px;font-weight:900}.language-visual span:last-child{border-color:#4f46a4;background:#252154}.asset-visual{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.asset-visual i{height:66px;border-radius:9px;background:linear-gradient(145deg,#243655,#6343a2)}.asset-visual i:nth-child(even){background:linear-gradient(145deg,#173b4c,#297d86)}.avatar-visual{height:220px;border:1px solid #343553;border-radius:17px;background:radial-gradient(circle at 50% 30%,#713e87,#1d1934 55%,#0b0f1b);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px}.avatar-visual i{width:85px;height:125px;border-radius:45px 45px 18px 18px;background:linear-gradient(180deg,#e4b39d 0 35%,#2c4d81 36%);box-shadow:0 0 35px rgba(216,125,194,.24)}.avatar-visual span{width:100%;display:flex;justify-content:space-between;align-items:center;padding:9px 11px;margin-top:10px;background:rgba(8,12,23,.8);border-radius:9px;font-size:10px}.avatar-visual small{color:#8896b3}.usecases{border-block:1px solid #1d2941;background:rgba(12,18,34,.66)}.usecase-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.usecase-row span{padding:10px 14px;border:1px solid #2c3956;border-radius:999px;background:#0d1425;color:#aab7d3;font-weight:700}.how-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}.steps-list{display:grid}.steps-list article{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid #26334d}.steps-list article>b{font-size:13px;color:#8775ee}.steps-list h3{margin:0 0 6px;font-size:21px}.steps-list p{margin:0;color:#8e9cbb}.faq-list{max-width:850px;margin:auto;display:grid;gap:10px}.faq-list details{border:1px solid #283550;border-radius:15px;background:#0d1425;padding:0 18px}.faq-list summary{padding:18px 0;font-weight:800;cursor:pointer}.faq-list p{color:#91a0c1;margin:0 0 18px}.final-cta{text-align:center;margin-top:50px;margin-bottom:70px;padding:70px 22px;border:1px solid #37406a;border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(112,78,220,.35),transparent 55%),#0d1224}.final-cta h2{font-size:clamp(34px,5vw,58px);line-height:1.08;letter-spacing:-.04em;margin:18px 0 12px}.final-cta p{color:#9aa7c4;margin-bottom:24px}
@media(max-width:940px){.home-hero{grid-template-columns:1fr;gap:42px;padding-top:58px}.home-hero-copy{text-align:center}.home-hero-copy>p{margin-inline:auto}.hero-trust{justify-content:center}.product-preview{max-width:680px;margin:auto;transform:none}.workflow-grid{grid-template-columns:1fr 1fr}.feature-large{grid-row:auto;min-height:500px}.feature-wide{grid-column:span 2}.how-layout{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){.studio-header .studio-nav{gap:8px}.studio-brand span{font-size:13px}.studio-nav-actions .btn-primary{font-size:12px;padding:9px 11px}.home-hero{min-height:auto;padding:46px 0 52px}.home-hero-copy h1{font-size:45px}.home-hero-copy>p{font-size:16px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-trust{gap:9px 15px}.product-preview{border-radius:16px}.preview-body{grid-template-columns:40px 1fr;min-height:330px}.preview-side{gap:7px}.preview-side i{width:27px;height:27px}.preview-canvas{padding:26px 16px}.preview-canvas h3{font-size:18px}.recent-demo{grid-template-columns:1fr}.recent-demo>div:nth-child(2){display:none}.proof-grid{grid-template-columns:1fr 1fr;row-gap:16px}.proof-grid>div:nth-child(2){border-right:0}.workflow-grid{grid-template-columns:1fr}.feature-card,.feature-large{min-height:400px}.feature-wide{grid-column:auto;grid-template-columns:1fr;min-height:540px}.feature-icon{margin-bottom:30px}.timeline-visual{height:190px}.timeline-visual i{height:120px}.timeline-visual i:nth-child(2){height:145px}.timeline-visual i:nth-child(3){height:100px}.how-layout{gap:12px}.steps-list article{grid-template-columns:40px 1fr}.final-cta{border-radius:20px;padding:48px 16px}}
.example-section{padding-top:78px}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.example-card{padding:10px 10px 16px;border:1px solid var(--line);border-radius:22px;background:rgba(13,19,36,.75);transition:.2s}.example-card:hover{transform:translateY(-4px);border-color:#53658f;box-shadow:0 24px 70px rgba(0,0,0,.28)}.example-frame{position:relative;min-height:430px;border-radius:15px;overflow:hidden;background:#141d35;isolation:isolate}.example-frame:before,.example-frame:after{content:'';position:absolute;inset:0;z-index:-1}.example-frame:before{background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.28),transparent 14%),linear-gradient(155deg,#1c3159 0 45%,#8b5cf6 100%)}.example-commerce .example-frame:after{background:linear-gradient(160deg,transparent 42%,rgba(251,113,133,.52)),radial-gradient(circle at 72% 30%,#fbbf24 0 9%,transparent 10%)}.example-personal .example-frame:before{background:radial-gradient(ellipse at 50% 32%,#9ba8d0 0 11%,transparent 12%),radial-gradient(ellipse at 50% 64%,#4c3fa3 0 27%,transparent 28%),linear-gradient(145deg,#14284b,#663cc1)}.example-training .example-frame:before{background:linear-gradient(165deg,rgba(34,211,238,.22),transparent 45%),repeating-linear-gradient(0deg,#0e2945 0 40px,#143453 41px 42px)}.example-tag{position:absolute;top:14px;left:14px;padding:6px 9px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(5,9,19,.58);backdrop-filter:blur(8px);font-size:11px;font-weight:800}.example-frame button{position:absolute;inset:0;margin:auto;width:54px;height:54px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(7,10,20,.55);color:#fff;font-size:17px;backdrop-filter:blur(8px);cursor:pointer}.example-caption{position:absolute;left:14px;right:14px;bottom:14px;padding:13px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(6,10,21,.72);backdrop-filter:blur(10px);display:grid}.example-caption small{color:#a9b5d1;margin-top:3px}.example-card>a{display:flex;justify-content:space-between;padding:14px 7px 0;font-weight:800;color:#cdd6f3}.example-card>a b{color:#8fb4ff}.page-kicker{display:block;margin-bottom:8px;color:#7ea7ff;font-size:11px;font-weight:900;letter-spacing:.12em}@media(max-width:860px){.example-grid{grid-template-columns:1fr 1fr}.example-card:last-child{grid-column:1/-1}.example-frame{min-height:380px}}@media(max-width:560px){.example-grid{grid-template-columns:1fr}.example-card:last-child{grid-column:auto}.example-frame{min-height:390px}.example-section{padding-top:56px}}
