/* KOMODO_KIT_STUDIO_3D_MOCKUP_V3 */
:root{--studio-red:#d7193f;--studio-acid:#f2ff00;--studio-dark:#080808;--studio-card:#141414;--studio-line:#2a2a2a}
*{box-sizing:border-box}.studio-body{background:#090909;color:#fff;min-height:100vh}.studio-body .nav{position:fixed}.studio-nav{background:rgba(8,8,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid #222}.studio-topnav{display:flex!important;gap:28px}.studio-topnav a{color:#ddd;font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.studio-topnav a.active{color:var(--studio-acid)}
.studio-hero{min-height:66vh;padding:160px 7vw 90px;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:40px;background:radial-gradient(circle at 82% 25%,#341019 0,transparent 30%),linear-gradient(135deg,#0a0a0a,#111);position:relative;overflow:hidden}.studio-hero:after{content:"";position:absolute;inset:auto -10% -22% 25%;height:65%;background:linear-gradient(90deg,transparent,#d7193f33,transparent);transform:skewY(-10deg)}.studio-hero-copy{position:relative;z-index:2;max-width:920px}.studio-kicker{text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:900;color:var(--studio-acid)}.studio-hero h1,.send-card h2{font-family:Anton,sans-serif;font-size:clamp(72px,10vw,150px);line-height:.83;margin:24px 0}.studio-hero h1 em,.send-card h2 em{font-style:normal;color:var(--studio-red)}.studio-hero p{max-width:720px;color:#bbb;font-size:17px;line-height:1.75}.studio-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.studio-badges span{border:1px solid #333;border-radius:30px;padding:10px 13px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.studio-hero-mark{font-family:Anton;font-size:360px;line-height:.7;color:#ffffff08;text-align:right;position:relative;z-index:1}
.studio-shell{padding:90px 5vw 110px;display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:28px;align-items:start;background:#0b0b0b}.studio-controls,.studio-preview-panel{background:#121212;border:1px solid #262626}.studio-controls{padding:28px;position:sticky;top:94px}.step-label{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#ddd;margin:6px 0 22px;padding-top:16px;border-top:1px solid #2b2b2b}.step-label:first-child{border-top:0;padding-top:0}.step-label b{font-family:Anton;font-size:26px;color:var(--studio-red)}.studio-controls label,.send-card label{display:block;margin:0 0 17px;font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#bfbfbf}.studio-controls input,.studio-controls select,.studio-controls textarea,.send-card input,.send-card textarea{margin-top:8px;border-radius:0;background:#090909;border:1px solid #343434;color:#fff;padding:13px 14px}.studio-controls small{display:block;margin-top:7px;color:#777;text-transform:none;letter-spacing:0;font-weight:500}.colour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.colour-grid label{font-size:9px}.colour-grid input[type=color]{height:48px;padding:5px;cursor:pointer}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.studio-btn{border:0;padding:15px 17px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.2s;font-size:11px}.studio-btn:hover{transform:translateY(-1px)}.studio-btn.primary{background:var(--studio-red);color:#fff}.studio-btn.secondary{background:#2a2a2a;color:#fff;width:100%;margin-bottom:9px}.concept-disclaimer{font-size:10px!important;color:#707070!important;line-height:1.55!important;margin:13px 0 0!important}
.studio-preview-panel{overflow:hidden}.preview-head{height:76px;padding:0 22px;border-bottom:1px solid #282828;display:flex;justify-content:space-between;align-items:center;gap:20px}.preview-head>div:first-child{display:flex;flex-direction:column;gap:3px}.preview-head span{font-size:9px;color:#777;letter-spacing:.15em}.preview-head strong{font-size:14px}.preview-status{border:1px solid #3b3b3b;border-radius:30px;padding:8px 11px;font-size:10px;color:#aaa}.canvas-wrap{position:relative;aspect-ratio:16/11;background:radial-gradient(circle at 50% 18%,#fff 0,#f7f8fa 28%,#eceef1 66%,#d7dbe0 100%);overflow:hidden;padding:18px}.canvas-wrap:before{content:"";position:absolute;inset:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 26px 80px rgba(0,0,0,.13);pointer-events:none}.canvas-wrap canvas{display:block;width:100%;height:100%;position:relative;z-index:1;border-radius:20px;background:transparent}.preview-actions{display:flex;gap:10px;padding:18px;background:#101010}.preview-actions .primary{flex:1}.request-result{font-size:12px;line-height:1.5;margin-top:13px}.request-result.ok{color:#a9ff9f}.request-result.err{color:#ff9aa8}
.send-panel{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.87);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}.send-panel[hidden]{display:none}.send-card{background:#121212;border:1px solid #333;width:min(760px,100%);padding:38px;position:relative}.send-card h2{font-size:60px;margin:16px 0 20px}.send-card>p{color:#aaa;line-height:1.6}.send-close{position:absolute;right:18px;top:14px;background:none;border:0;color:#fff;font-size:36px;cursor:pointer}.studio-btn.full{width:100%;margin-top:5px}
.studio-how{padding:100px 6vw;background:#f2f2f2;color:#111}.studio-how .studio-kicker{color:#d7193f}.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ccc;margin-top:35px}.how-grid article{background:#f2f2f2;padding:28px}.how-grid b{font-family:Anton;font-size:50px;color:#ccc}.how-grid h3{font-family:Anton;font-size:34px;margin:7px 0}.how-grid p{color:#666;line-height:1.55;font-size:13px}
@media(max-width:1050px){.studio-topnav{display:none!important}.studio-hero{grid-template-columns:1fr}.studio-hero-mark{display:none}.studio-shell{grid-template-columns:1fr}.studio-controls{position:static}.how-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.studio-hero{padding:120px 22px 65px;min-height:auto}.studio-hero h1{font-size:66px}.studio-hero p{font-size:14px}.studio-shell{padding:45px 14px 75px;gap:14px}.studio-controls{padding:20px}.preview-head{height:auto;min-height:72px;padding:14px}.preview-actions{flex-direction:column}.two-col,.colour-grid{grid-template-columns:1fr}.send-card{padding:28px 19px}.send-card h2{font-size:48px}.how-grid{grid-template-columns:1fr}.studio-how{padding:70px 22px}.canvas-wrap{padding:10px}}
