.mockup-page{--mock-violet:#6c5ce7;--mock-mint:#00b894;--mock-ink:#24263d;--mock-muted:#6d7086;--mock-border:#e2e0ec;background:#fff;color:var(--mock-ink)}
.mockup-hero{position:relative;overflow:hidden;padding:38px 0 66px;background:radial-gradient(circle at 8% 9%,rgba(0,184,148,.1),transparent 25%),radial-gradient(circle at 92% 18%,rgba(108,92,231,.14),transparent 29%),linear-gradient(180deg,#fcfbff 0%,#f6f4fc 100%)}
.hero-glow{position:absolute;pointer-events:none;border-radius:999px}.glow-one{top:235px;left:-90px;width:190px;height:190px;border:30px solid rgba(108,92,231,.055)}.glow-two{top:520px;right:-52px;width:118px;height:118px;background:rgba(0,184,148,.065)}
.intro{position:relative;max-width:850px;margin:0 auto 34px;text-align:center}.crumbs{display:flex;justify-content:center;gap:9px;margin-bottom:20px;color:#9798a8;font-size:.78rem}.crumbs a{color:var(--mock-violet);font-weight:800}.intro .eyebrow{padding:0;border:0;background:transparent;box-shadow:none;color:#65677c;font-size:.73rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.intro h1{margin:17px auto 14px;font-size:clamp(2.4rem,6vw,4.55rem);line-height:1.01;letter-spacing:-.06em}.lead{max-width:760px}.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 27px;margin-top:20px;color:#77798d;font-size:.76rem;font-weight:750}.trust-row span:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--mock-mint)}
.mockup-studio{position:relative;overflow:hidden;border:1px solid rgba(218,215,231,.96);border-radius:26px;background:#fff;box-shadow:0 32px 85px rgba(48,40,100,.14)}.studio-topbar{display:flex;align-items:center;gap:18px;min-height:66px;padding:12px 18px;border-bottom:1px solid var(--mock-border);background:#fcfbff}.studio-topbar>div:first-child{display:flex;align-items:center;min-width:180px;gap:8px}.studio-topbar strong{font-size:.82rem}.studio-topbar small{color:#9293a5;font-size:.66rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mock-mint);box-shadow:0 0 0 5px rgba(0,184,148,.11)}.quick-presets{display:flex;justify-content:center;flex:1;gap:7px}.preset{display:flex;align-items:center;gap:7px;min-height:37px;padding:0 11px;border:1px solid var(--mock-border);border-radius:10px;background:#fff;color:#696b7e;font-size:.7rem;font-weight:800;transition:.2s}.preset:hover,.preset.active{border-color:#c9c3ee;color:var(--mock-violet);background:#f3f1ff}.preset i{width:15px;height:15px;border-radius:5px}.preset i.aurora{background:linear-gradient(135deg,#6c5ce7,#00c2a8)}.preset i.sunset{background:linear-gradient(135deg,#ff8a65,#f54291)}.preset i.midnight{background:linear-gradient(135deg,#151735,#6149cc)}.preset i.paper{border:1px solid #dedbe7;background:linear-gradient(135deg,#fffdf8,#ded9ee)}.reset-button{min-height:37px;padding:0 12px;border:1px solid var(--mock-border);border-radius:10px;background:#fff;color:#77798c;font-size:.68rem;font-weight:800}
.studio-grid{display:grid;grid-template-columns:1.2fr .8fr;min-height:720px}.preview-panel{padding:20px;border-right:1px solid var(--mock-border);background:#f8f7fc}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-heading>div,.download-card>div{display:flex;align-items:center;gap:10px}.panel-heading strong,.panel-heading small,.download-card strong,.download-card small{display:block}.panel-heading strong,.download-card strong{font-size:.82rem}.panel-heading small,.download-card small{margin-top:3px;color:#9293a5;font-size:.66rem}.step-number{display:grid;flex:0 0 31px;height:31px;place-items:center;border-radius:9px;background:#ece9ff;color:var(--mock-violet);font-size:.65rem;font-weight:900}.live-badge{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(0,184,148,.18);border-radius:999px;background:#edf9f6;color:#087966;font-size:.64rem;font-weight:850}.live-badge i{width:6px;height:6px;border-radius:50%;background:var(--mock-mint);animation:pulse 1.8s infinite}
.canvas-wrap{display:grid;min-height:575px;place-items:center;padding:24px;border:1px solid #ddd9e8;border-radius:20px;background-color:#e9e7f0;background-image:linear-gradient(45deg,#dedbe8 25%,transparent 25%),linear-gradient(-45deg,#dedbe8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dedbe8 75%),linear-gradient(-45deg,transparent 75%,#dedbe8 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px;overflow:hidden}#mockupCanvas{display:block;max-width:100%;max-height:545px;width:auto;height:auto;border-radius:10px;box-shadow:0 18px 45px rgba(42,37,76,.17)}.upload-row{display:flex;align-items:center;gap:10px;margin-top:14px}.upload-button{display:flex;align-items:center;flex:1;gap:10px;min-height:54px;padding:9px 12px;border:1px dashed #bbb5d9;border-radius:13px;background:#fff;cursor:pointer;transition:.2s}.upload-button:hover{border-color:var(--mock-violet);background:#f7f5ff}.upload-button input{position:absolute;width:1px;height:1px;opacity:0}.upload-button>span:first-of-type{display:grid;width:33px;height:33px;place-items:center;border-radius:9px;background:#ece9ff;color:var(--mock-violet);font-size:1rem;font-weight:900}.upload-button strong,.upload-button small{display:block}.upload-button strong{font-size:.75rem}.upload-button small{margin-top:3px;color:#9293a5;font-size:.62rem}.sample-button{min-height:45px;padding:0 12px;border:1px solid var(--mock-border);border-radius:11px;background:#fff;color:#65677a;font-size:.66rem;font-weight:850}
.canvas-wrap.dragging{border-color:var(--mock-violet);box-shadow:inset 0 0 0 4px rgba(108,92,231,.12)}
.controls-panel{padding:20px;background:#fff}.controls-panel>.panel-heading{padding-bottom:14px;border-bottom:1px solid var(--mock-border)}.control-section{padding:15px 0;border-bottom:1px solid var(--mock-border)}.control-title{display:block;margin-bottom:9px;color:#54566b;font-size:.67rem;font-weight:850}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.segment{display:grid;min-width:0;gap:6px;place-items:center;padding:9px 4px;border:1px solid var(--mock-border);border-radius:10px;background:#fff;color:#7d7e90;font-size:.61rem;font-weight:800;transition:.2s}.segment:hover,.segment.active{border-color:#bfb8ea;background:#f2efff;color:var(--mock-violet);box-shadow:0 5px 15px rgba(108,92,231,.09)}.device-icon{display:block;border:2px solid currentColor}.device-icon.phone,.device-icon.android{width:15px;height:25px;border-radius:5px}.device-icon.android{border-radius:3px}.device-icon.tablet{width:21px;height:26px;border-radius:4px}.device-icon.none{width:22px;height:24px;border-width:1px;border-radius:5px;background:linear-gradient(145deg,rgba(108,92,231,.18),rgba(0,184,148,.15))}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two-fields label{min-width:0}.two-fields select,.headline-fields input[type="text"]{width:100%;height:40px;padding:0 10px;border:1px solid var(--mock-border);border-radius:10px;outline:none;background:#fbfbfd;color:#3f4156;font-size:.69rem;font-weight:700}.two-fields select:focus,.headline-fields input:focus{border-color:var(--mock-violet);box-shadow:0 0 0 3px rgba(108,92,231,.1)}.control-heading{display:flex;align-items:center;justify-content:space-between}.control-heading>span:last-child{color:#888a9d;font-size:.63rem;font-weight:800}.color-pair{display:flex;align-items:center;gap:8px;margin-bottom:10px}.color-pair>span{color:#aaa9b5}.color-pair label{display:flex;align-items:center;flex:1;gap:8px;height:38px;padding:0 9px;border:1px solid var(--mock-border);border-radius:10px;color:#6d6f82;background:#fbfbfd;font:800 .61rem ui-monospace,SFMono-Regular,Consolas,monospace}.color-pair input{width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent}.range{width:100%;height:4px;margin:4px 0;accent-color:var(--mock-violet)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:.74rem}.toggle-row small{margin-top:3px;color:#9293a5;font-size:.62rem}.toggle-row input{position:absolute;opacity:0}.toggle-row i{position:relative;flex:0 0 36px;height:21px;border-radius:999px;background:#d8d7e1;transition:.2s}.toggle-row i:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.toggle-row input:checked+i{background:var(--mock-violet)}.toggle-row input:checked+i:after{transform:translateX(15px)}.headline-fields{display:grid;grid-template-columns:1fr 45px;gap:8px;margin-top:12px}.headline-fields label:last-child input{width:100%;height:40px;padding:2px;border:1px solid var(--mock-border);border-radius:10px;background:#fff}.headline-fields.hidden{display:none}.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.range-grid label>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.range-grid strong,.range-grid output{font-size:.64rem}.range-grid strong{color:#56586c}.range-grid output{color:var(--mock-violet);font-weight:850}.download-card{margin-top:15px;padding:14px;border-radius:15px;background:linear-gradient(135deg,#282450,#44368d);color:#fff}.download-card small{color:rgba(255,255,255,.6)}.download-card .step-number{color:#fff;background:rgba(255,255,255,.12)}.download-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;margin-top:13px;padding:0 14px;border:0;border-radius:11px;background:linear-gradient(135deg,#7b6bf0,#9b79f1);color:#fff;font-size:.73rem;font-weight:900;box-shadow:0 10px 25px rgba(0,0,0,.18);transition:.2s}.download-button:hover{transform:translateY(-2px);filter:brightness(1.06)}.download-button b{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;background:rgba(255,255,255,.14);font-size:1rem}.privacy-note{margin:15px 0 0;text-align:center;color:#85869a;font-size:.74rem}
.content-section{padding:74px 0;background:#fff}.content-section.alt{background:#f8f7fc}.content{max-width:1000px}.content-intro{max-width:775px}.section-kicker{color:var(--mock-violet);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.content h2{margin:10px 0 14px;color:var(--mock-ink);font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.04em}.content p{color:#66687c;line-height:1.75}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.feature-grid article,.tip-card,.how-to li{border:1px solid var(--mock-border);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(52,42,120,.055)}.feature-grid article{padding:22px}.feature-grid article>span,.how-to li>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#efedff;color:var(--mock-violet);font-size:.69rem;font-weight:900}.feature-grid h3{margin:16px 0 7px;font-size:1rem}.feature-grid p{margin:0;font-size:.86rem}.how-to{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}.how-to ol{display:grid;gap:10px;padding:0;margin:0;list-style:none}.how-to li{display:flex;gap:15px;padding:18px}.how-to li>span{flex:0 0 34px}.how-to h3{margin:1px 0 5px;font-size:.91rem}.how-to li p{margin:0;font-size:.83rem}.prose-content{max-width:880px}.tip-card{display:flex;align-items:center;gap:20px;margin-top:28px;padding:22px}.tip-card>span{display:grid;flex:0 0 90px;height:74px;place-items:center;border-radius:18px;background:linear-gradient(135deg,#ece9ff,#dff8f1);color:var(--mock-violet);font:900 .75rem ui-monospace,SFMono-Regular,Consolas,monospace}.tip-card h3{margin:0 0 5px;font-size:1rem}.tip-card p{margin:0;font-size:.86rem}.faq{display:grid;gap:10px;margin-top:24px}.faq details{border:1px solid var(--mock-border);border-radius:14px;background:#fff}.faq summary{padding:17px 20px;cursor:pointer;color:#35374d;font-size:.91rem;font-weight:800}.faq details p{margin:0;padding:0 20px 18px;font-size:.86rem}.try-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.try-heading h2{margin-bottom:5px}.try-heading p{margin:0}.try-heading>a{color:var(--mock-violet);font-size:.82rem;font-weight:850;white-space:nowrap}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.try-card{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--mock-border);border-radius:16px;background:#fff;color:#34364c;box-shadow:0 8px 24px rgba(52,42,120,.05);transition:.2s}.try-card:hover{border-color:#c9c3ef;transform:translateY(-3px);box-shadow:0 14px 30px rgba(52,42,120,.1)}.try-icon{display:grid;flex:0 0 47px;height:47px;place-items:center;border-radius:13px;background:#efedff;color:var(--mock-violet);font-size:.64rem;font-weight:900}.try-card strong,.try-card small{display:block}.try-card strong{font-size:.84rem}.try-card small{margin-top:4px;color:#85869a;font-size:.71rem}
.toast{position:fixed;left:50%;bottom:28px;z-index:60;padding:11px 16px;border-radius:999px;background:#20213a;color:#fff;font-size:.78rem;font-weight:800;box-shadow:0 12px 35px rgba(31,33,58,.25);opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.sparkle-layer{position:fixed;inset:0;z-index:55;overflow:hidden;pointer-events:none}.sparkle{position:absolute;top:-18px;width:9px;height:13px;border-radius:3px;animation:sparkle-fall 1.25s ease-in forwards}
@keyframes pulse{50%{opacity:.45;transform:scale(.78)}}@keyframes sparkle-fall{to{opacity:.1;transform:translate(var(--drift),105vh) rotate(680deg)}}
@media(max-width:1020px){.studio-topbar{align-items:flex-start;flex-wrap:wrap}.quick-presets{order:3;justify-content:flex-start;flex-basis:100%;overflow-x:auto}.studio-grid{grid-template-columns:1fr}.preview-panel{border-right:0;border-bottom:1px solid var(--mock-border)}.canvas-wrap{min-height:520px}.feature-grid{grid-template-columns:1fr}.how-to{grid-template-columns:1fr}.try-grid{grid-template-columns:1fr}}
@media(max-width:640px){.mockup-hero{padding:28px 0 50px}.mockup-studio{border-radius:19px}.studio-topbar,.preview-panel,.controls-panel{padding:14px}.studio-topbar>div:first-child{min-width:0}.preset{white-space:nowrap}.canvas-wrap{min-height:410px;padding:12px}#mockupCanvas{max-height:385px}.upload-row{align-items:stretch;flex-direction:column}.sample-button{width:100%}.segmented{grid-template-columns:1fr 1fr}.two-fields,.range-grid{grid-template-columns:1fr}.content-section{padding:56px 0}.try-heading,.tip-card{align-items:flex-start;flex-direction:column}.tip-card>span{width:90px;flex-basis:60px}.trust-row{gap:9px 18px}.intro h1{font-size:clamp(2.35rem,13vw,3.6rem)}}
@media(prefers-reduced-motion:reduce){.mockup-page *{scroll-behavior:auto!important}.preset,.segment,.download-button,.try-card,.toast{transition:none}.live-badge i,.sparkle{animation:none}}