/* MockupFlow UI and photorealistic device system */
:root {
  --ink: #0f1428;
  --muted: #687286;
  --brand: #6f5cff;
  --brand-dark: #4c37cc;
  --mint: #43dfbf;
  --line: rgba(15,20,40,.1);
  --surface: #fff;
  --panel-width: 360px;
  --app-header-height: 66px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.visually-hidden {
  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;
}
.skip-link {
  position: fixed; top: -80px; left: 16px; z-index: 9999;
  padding: 12px 16px; border-radius: 10px; background: #fff; color: #11162a;
  font-weight: 800; box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
.skip-link:focus { top: 16px; }

/* Shared brand */
.brand { display: inline-flex; align-items: center; gap: 11px; color: #11162a; text-decoration: none; font-weight: 900; letter-spacing: -.035em; }
.brand > span:last-child > span { color: var(--brand); }
.brand-icon { position: relative; display: block; width: 31px; height: 27px; flex: 0 0 auto; }
.brand-icon i {
  position: absolute; bottom: 0; width: 8px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(155deg,#9589ff,#5844dc);
  box-shadow: 0 5px 13px rgba(96,76,220,.25);
}
.brand-icon i:nth-child(1) { left: 0; height: 15px; }
.brand-icon i:nth-child(2) { left: 11px; height: 25px; }
.brand-icon i:nth-child(3) { right: 0; height: 20px; background: linear-gradient(155deg,#65ead1,#25ad93); }

/* Landing */
.site-body { background: #f7f8fc; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(17,22,42,.07);
  background: rgba(248,249,253,.84); backdrop-filter: blur(18px);
}
.nav-wrap {
  display: flex; max-width: 1200px; min-height: 70px; margin: 0 auto; padding: 0 24px;
  align-items: center; justify-content: space-between; gap: 24px;
}
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav > a:not(.primary-button), .mobile-nav > a:not(.primary-button) {
  color: #5f687a; text-decoration: none; font-size: 14px; font-weight: 760;
}
.desktop-nav > a:not(.primary-button):hover { color: #151a30; }
.mobile-menu-button {
  display: none; width: 43px; height: 43px; place-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.mobile-menu-button i { display:block; width: 20px; height: 2px; border-radius: 99px; background: #151a30; }
.mobile-nav { padding: 10px 24px 20px; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav a:not(.primary-button) { display: block; padding: 12px 0; }

.primary-button, .secondary-button, .light-button {
  display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 15px; padding: 14px 20px; text-decoration: none;
  font-size: 14px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button { color: #fff; background: linear-gradient(135deg,#7b6bff,#533eda); box-shadow: 0 14px 34px rgba(85,65,211,.29); }
.primary-button:hover, .secondary-button:hover, .light-button:hover { transform: translateY(-2px); }
.secondary-button { color: #171b31; border: 1px solid var(--line); background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(20,24,47,.07); }
.light-button { color: #15182d; background: #fff; box-shadow: 0 16px 38px rgba(10,14,32,.18); }
.small-button { min-height: 42px; padding: 11px 15px; border-radius: 12px; font-size: 13px; }

.hero-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 8% 12%, rgba(111,92,255,.13), transparent 30%),
    radial-gradient(circle at 93% 10%, rgba(67,223,191,.15), transparent 29%),
    linear-gradient(180deg,#fbfbff,#f1f0fd);
}
.hero-section::before {
  position:absolute; inset:0; z-index:-2; content:"";
  background-image: linear-gradient(rgba(86,69,172,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(86,69,172,.05) 1px,transparent 1px);
  background-size: 42px 42px; mask-image: linear-gradient(to bottom,#000,transparent 82%);
}
.hero-grid {
  display:grid; max-width:1200px; min-height:720px; margin:0 auto; padding:80px 24px 95px;
  grid-template-columns:.92fr 1.08fr; gap:58px; align-items:center;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid rgba(111,92,255,.16);
  border-radius:999px; background:rgba(255,255,255,.75); color:#5d4dcf;
  font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 10px 28px rgba(17,20,41,.06);
}
.eyebrow span { width:8px; height:8px; border-radius:50%; background:#36cdaa; box-shadow:0 0 0 5px rgba(54,205,170,.13); }
.hero-copy h1 { margin:25px 0 0; font-size:clamp(50px,6vw,78px); line-height:.97; letter-spacing:-.06em; font-weight:950; }
.hero-copy h1 em { font-style:normal; color:transparent; background:linear-gradient(105deg,#5440d5,#957eff 54%,#22b392); -webkit-background-clip:text; background-clip:text; }
.hero-copy > p { max-width:600px; margin:25px 0 0; color:#626d81; font-size:18px; line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.trust-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; color:#687286; font-size:13px; font-weight:700; }
.trust-row span { display:inline-flex; align-items:center; gap:7px; }
.trust-row span::before { display:grid; width:19px; height:19px; place-items:center; content:"✓"; border-radius:50%; background:rgba(67,223,191,.17); color:#168c72; font-size:10px; font-weight:900; }

/* Landing photorealistic preview */
.landing-device-card {
  position:relative; min-height:490px; border:1px solid rgba(111,92,255,.14); border-radius:38px; overflow:hidden;
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.95),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(224,221,255,.76));
  box-shadow:0 40px 100px rgba(48,39,105,.19);
}
.landing-device-card::before {
  position:absolute; inset:0; content:""; opacity:.4;
  background-image:radial-gradient(rgba(85,68,190,.16) 1px,transparent 1px); background-size:22px 22px;
  mask-image:linear-gradient(135deg,#000,transparent 78%);
}
.preview-shine { position:absolute; right:2%; bottom:-15%; width:55%; aspect-ratio:1; border-radius:50%; background:rgba(67,223,191,.24); filter:blur(55px); }
.landing-device-stage { position:absolute; top:50%; left:50%; width:94%; aspect-ratio:1.56; transform:translate(-50%,-48%); }
.landing-device-stage > div { position:absolute; filter:drop-shadow(0 20px 19px rgba(17,19,39,.25)); }
.mini-imac { z-index:1; top:0; left:15%; width:67%; aspect-ratio:1.58; }
.mini-imac-glass { position:absolute; inset:0 0 19%; overflow:hidden; border:7px solid #181b24; border-bottom:0; border-radius:11px 11px 0 0; background:#090b11; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.mini-imac-glass::after { position:absolute; inset:0; content:""; background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 23%,transparent 72%,rgba(255,255,255,.06)); pointer-events:none; }
.mini-imac-chin { position:absolute; right:0; bottom:10%; left:0; height:17%; border-radius:0 0 11px 11px; background:linear-gradient(180deg,#d8dadd,#b9bcc2 58%,#a2a5ac); box-shadow:inset 0 1px 0 rgba(255,255,255,.85); }
.mini-imac-chin i { position:absolute; top:30%; left:50%; width:7px; height:8px; border-radius:55% 45% 50% 50%; background:#7b7e84; transform:translateX(-50%); opacity:.7; }
.mini-imac-neck { position:absolute; z-index:-1; bottom:1%; left:43%; width:14%; height:14%; background:linear-gradient(90deg,#8c9098,#e1e3e6 50%,#979aa1); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.mini-imac-foot { position:absolute; bottom:0; left:31%; width:38%; height:4%; border-radius:50%; background:linear-gradient(90deg,#8f929a,#e4e5e7 50%,#858890); }
.mini-ipad { z-index:3; top:34%; left:3%; width:29%; aspect-ratio:.76; border:2px solid #8e9299; border-radius:18px; background:linear-gradient(145deg,#e6e8eb,#93979f 35%,#f5f5f6 67%,#81858d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75); }
.mini-ipad::before { position:absolute; inset:4px; content:""; border-radius:14px; background:#11131a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.mini-ipad-screen { position:absolute; inset:9px 7px; overflow:hidden; border-radius:8px; background:#fff; }
.mini-ipad-camera { position:absolute; z-index:4; top:5px; left:50%; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle,#1a2741,#06080e); transform:translateX(-50%); }
.mini-iphone { z-index:5; top:56%; left:8%; width:14%; aspect-ratio:.48; border:2px solid #8e929a; border-radius:19px; background:linear-gradient(100deg,#777c84,#f1f2f3 25%,#888c94 51%,#e9eaeb 78%,#6d7179); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.mini-iphone::before { position:absolute; inset:3px; content:""; border-radius:15px; background:#080a10; }
.mini-iphone-screen { position:absolute; inset:6px; overflow:hidden; border-radius:13px; background:#111; }
.mini-island { position:absolute; z-index:6; top:8px; left:50%; width:36%; height:8px; border-radius:99px; background:#050607; transform:translateX(-50%); box-shadow:0 0 0 1px rgba(255,255,255,.03); }
.mini-macbook { z-index:4; right:0; bottom:2%; width:49%; aspect-ratio:1.47; }
.mini-macbook-lid { position:absolute; inset:0 4% 13%; border:3px solid #9da1a8; border-radius:10px 10px 3px 3px; background:linear-gradient(145deg,#c9ccd1,#898d95 45%,#e7e8ea 80%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.mini-macbook-lid::before { position:absolute; inset:3px; content:""; border-radius:7px 7px 2px 2px; background:#11131a; }
.mini-macbook-screen { position:absolute; inset:8px 7px 10px; overflow:hidden; border-radius:3px; background:#fff; }
.mini-macbook-camera { position:absolute; z-index:4; top:5px; left:50%; width:3px; height:3px; border-radius:50%; background:#263047; transform:translateX(-50%); }
.mini-macbook-deck { position:absolute; right:-3%; bottom:0; left:-3%; height:16%; border-radius:2px 2px 15px 15px; background:linear-gradient(180deg,#e8e9eb,#afb3bb 52%,#7f838c); clip-path:polygon(5% 0,95% 0,100% 63%,94% 100%,6% 100%,0 63%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.mini-macbook-deck i { position:absolute; top:2%; left:50%; width:16%; height:24%; border-radius:0 0 8px 8px; background:#969aa2; transform:translateX(-50%); }
.mini-site { position:absolute; inset:0; overflow:hidden; color:#fff; }
.purple-site { background:linear-gradient(135deg,#6b59e7,#291e68); }
.mint-site { color:#153935; background:linear-gradient(145deg,#f1fffb,#91e4d1); }
.dark-site { background:linear-gradient(155deg,#18243b,#080b13); }
.light-site { color:#282145; background:#faf9ff; }
.mini-nav { display:flex; align-items:center; gap:6%; height:15%; padding:0 7%; }
.mini-nav b { width:14%; height:26%; border-radius:99px; background:currentColor; opacity:.9; }
.mini-nav i { width:9%; height:12%; border-radius:99px; background:currentColor; opacity:.35; }
.mini-copy { display:flex; width:58%; height:56%; flex-direction:column; justify-content:center; padding-left:8%; }
.mini-copy.compact { width:72%; padding-left:10%; }
.mini-copy small { font-size:clamp(3px,.58vw,8px); font-weight:900; letter-spacing:.13em; opacity:.65; }
.mini-copy strong { display:block; margin:6% 0; font-size:clamp(6px,1.35vw,18px); line-height:1.05; }
.mini-copy span { display:block; width:80%; height:4%; margin-top:3%; border-radius:99px; background:currentColor; opacity:.22; }
.mini-panels { position:absolute; right:7%; bottom:9%; display:grid; width:42%; grid-template-columns:repeat(3,1fr); gap:5%; }
.mini-panels i { aspect-ratio:.84; border-radius:8%; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.phone-art { width:80%; aspect-ratio:1; margin:20% auto 0; border-radius:20%; background:linear-gradient(135deg,#806dff,rgba(67,223,191,.55)); }
.phone-copy { position:absolute; right:0; bottom:8%; left:0; width:auto; height:auto; padding:10%; }
.phone-copy strong { font-size:clamp(4px,.75vw,10px); }
.laptop-mini-layout { display:grid; height:85%; padding:3% 6%; grid-template-columns:1.1fr .9fr; align-items:center; gap:5%; }
.laptop-mini-layout .mini-copy { width:100%; height:auto; padding:0; }
.mini-art { aspect-ratio:1; border-radius:16%; background:radial-gradient(circle at 35% 35%,#4de0c1 0 18%,transparent 19%),linear-gradient(135deg,#7967f4,#d6d0ff); box-shadow:0 12px 24px rgba(78,59,183,.2); }

.value-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:26px 55px; border-top:1px solid rgba(17,22,42,.06); border-bottom:1px solid rgba(17,22,42,.06); background:rgba(255,255,255,.65); padding:19px 24px; color:#737c8d; font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.section { padding:100px 24px; }
.section-alt { background:#fff; }
.section-heading { max-width:800px; margin:0 auto; text-align:center; }
.section-heading > span, .social-card > div:first-child > span, .cta-section > div > span { color:#5d4fd5; font-size:12px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.section-heading h2, .social-card h2, .cta-section h2 { margin:12px 0 0; font-size:clamp(36px,5vw,58px); line-height:1.04; letter-spacing:-.05em; font-weight:930; }
.section-heading p { max-width:680px; margin:18px auto 0; color:#697386; font-size:17px; line-height:1.75; }
.feature-grid { display:grid; max-width:1200px; margin:46px auto 0; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-height:250px; border:1px solid rgba(15,20,40,.08); border-radius:24px; background:#fff; padding:28px; box-shadow:0 20px 60px rgba(35,31,70,.06); transition:transform .2s ease,box-shadow .2s ease; }
.feature-card:hover { transform:translateY(-5px); box-shadow:0 28px 70px rgba(35,31,70,.11); }
.accent-card { color:#fff; background:linear-gradient(145deg,#6958e8,#382591); }
.feature-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:14px; background:rgba(111,92,255,.11); color:#6654db; font-size:20px; font-weight:900; }
.accent-card .feature-icon { color:#fff; background:rgba(255,255,255,.13); }
.feature-card h3 { margin:22px 0 10px; font-size:19px; letter-spacing:-.02em; }
.feature-card p { margin:0; color:#6c7585; line-height:1.7; }
.accent-card p { color:rgba(255,255,255,.75); }
.how-grid { display:grid; max-width:1200px; margin:0 auto; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.left-heading { margin:0; text-align:left; position:sticky; top:115px; }
.left-heading p { margin-left:0; }
.left-heading .primary-button { margin-top:25px; }
.steps { display:grid; gap:15px; }
.steps article { display:grid; grid-template-columns:auto 1fr; gap:22px; border:1px solid rgba(15,20,40,.08); border-radius:24px; background:#fafaff; padding:27px; }
.steps article > b { display:grid; width:60px; height:60px; place-items:center; border-radius:17px; color:#fff; background:linear-gradient(135deg,#7868f2,#4c36c1); box-shadow:0 13px 28px rgba(76,54,193,.22); }
.steps h3 { margin:3px 0 8px; font-size:20px; }
.steps p { margin:0; color:#697386; line-height:1.7; }
.social-card { display:grid; max-width:1200px; margin:0 auto; padding:60px; grid-template-columns:1.12fr .88fr; align-items:center; gap:45px; border-radius:34px; color:#fff; background:radial-gradient(circle at 90% 8%,rgba(67,223,191,.21),transparent 30%),linear-gradient(135deg,#13142b,#35226e); box-shadow:0 35px 90px rgba(24,20,62,.22); }
.social-card > div:first-child > span { color:#bdb5ff; }
.social-card h2 { color:#fff; }
.social-card p { max-width:580px; color:rgba(255,255,255,.7); line-height:1.7; }
.size-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.size-grid article { border:1px solid rgba(255,255,255,.11); border-radius:17px; background:rgba(255,255,255,.07); padding:18px; backdrop-filter:blur(10px); }
.size-grid strong, .size-grid span { display:block; }
.size-grid span { margin-top:4px; color:rgba(255,255,255,.58); font-size:12px; }
.faq-wrap { max-width:880px; margin:0 auto; }
.faq-list { display:grid; gap:10px; margin-top:42px; }
.faq-list details { border:1px solid rgba(15,20,40,.09); border-radius:18px; background:#fbfbfe; padding:0 21px; }
.faq-list summary { position:relative; list-style:none; cursor:pointer; padding:21px 38px 21px 0; font-weight:830; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { position:absolute; right:0; top:50%; content:"+"; color:#6756dd; font-size:22px; transform:translateY(-50%); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { margin:0; padding:0 0 21px; color:#687286; line-height:1.75; }
.cta-section { display:flex; max-width:1152px; margin:70px auto 100px; padding:58px; align-items:center; justify-content:space-between; gap:35px; border-radius:32px; color:#fff; background:radial-gradient(circle at 90% 5%,rgba(67,223,191,.28),transparent 26%),linear-gradient(135deg,#7766f3,#4d38c6); box-shadow:0 30px 80px rgba(70,53,188,.26); }
.cta-section > div > span { color:rgba(255,255,255,.7); }
.cta-section h2 { max-width:770px; color:#fff; }
.site-footer, .app-footer { border-top:1px solid rgba(15,20,40,.08); background:#fff; padding:28px 24px; color:#737c8c; font-size:13px; text-align:center; }
.site-footer a, .app-footer a { color:#5645cf; font-weight:800; text-decoration:none; }
.site-footer a:hover, .app-footer a:hover { text-decoration:underline; }

/* Application shell */
.app-page { min-height:100vh; background:#e8eaf1; overflow-x:hidden; }
.app-header {
  position:sticky; top:0; z-index:300; display:flex; min-height:var(--app-header-height);
  align-items:center; justify-content:space-between; gap:16px; padding:0 16px;
  color:#fff; background:rgba(10,13,27,.97); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px);
}
.app-header-left, .app-header-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.app-brand { color:#fff; }
.workspace-badge { padding:6px 9px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.58); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.icon-button, .toolbar-menu-button, .zoom-controls button {
  display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center;
  border:1px solid rgba(255,255,255,.12); border-radius:11px; color:inherit; background:rgba(255,255,255,.08); text-decoration:none; font-weight:850;
}
.ghost-button, .download-button {
  display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:7px; border-radius:11px; padding:10px 14px; font-size:12px; font-weight:850;
}
.ghost-button { border:1px solid rgba(255,255,255,.12); color:#fff; background:rgba(255,255,255,.08); }
.download-button { border:0; color:#fff; background:linear-gradient(135deg,#7a6aff,#5744df); box-shadow:0 10px 25px rgba(85,66,220,.3); }
.workspace { display:grid; min-height:calc(100vh - var(--app-header-height)); grid-template-columns:var(--panel-width) minmax(0,1fr); }
.control-panel { position:relative; z-index:120; width:var(--panel-width); border-right:1px solid var(--line); background:#fff; transition:transform .24s ease,width .24s ease; }
.control-panel-heading { display:flex; min-height:82px; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); }
.control-panel-heading span { color:#6151d7; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.control-panel-heading h1 { margin:3px 0 0; font-size:18px; letter-spacing:-.035em; }
.panel-close-button { display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:#f6f6fb; font-size:20px; }
.control-scroll { display:grid; max-height:calc(100vh - var(--app-header-height) - 82px); gap:10px; overflow-y:auto; padding:11px; scrollbar-width:thin; }
.control-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(25,27,56,.035); }
.control-title { display:flex; width:100%; min-height:49px; align-items:center; justify-content:space-between; border:0; background:#fbfbfe; padding:11px 13px; color:#22263a; font-size:12px; font-weight:850; text-align:left; }
.control-title span { display:flex; align-items:center; gap:8px; }
.control-title b { display:grid; width:23px; height:23px; place-items:center; border-radius:7px; color:#5d4fd2; background:rgba(111,92,255,.1); font-size:10px; }
.control-title i { font-style:normal; }
.control-title[aria-expanded="false"] + .control-body { display:none; }
.control-title[aria-expanded="false"] i { transform:rotate(180deg); }
.control-body { padding:13px; }
.control-body > label, .two-fields label > span, .compact-fields label > span { display:block; margin-bottom:6px; color:#525b6d; font-size:10px; font-weight:800; }
.control-body input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.control-body select,
.control-body textarea {
  width:100%; min-height:41px; border:1px solid #dfe2eb; border-radius:10px; outline:none; background:#fff; padding:10px 11px; color:#202337; font-size:12px;
}
.control-body textarea { min-height:78px; resize:vertical; }
.control-body input:focus, .control-body select:focus, .control-body textarea:focus { border-color:#7a6af0; box-shadow:0 0 0 3px rgba(111,92,255,.1); }
.input-action { display:grid; grid-template-columns:1fr auto; gap:7px; }
.input-action button { border:0; border-radius:10px; background:#1b2033; color:#fff; padding:0 13px; font-size:11px; font-weight:850; }
.field-help { margin:6px 0 0; color:#8b93a1; font-size:10px; line-height:1.5; }
.divider { display:flex; align-items:center; gap:8px; margin:12px 0; color:#9ba2ae; font-size:9px; font-weight:760; }
.divider::before,.divider::after { height:1px; flex:1; content:""; background:#eceef3; }
.upload-control { display:flex !important; min-height:42px; cursor:pointer; align-items:center; justify-content:center; gap:7px; border:1px dashed #8f81ed; border-radius:11px; background:#f5f3ff; color:#5c4ed1 !important; font-size:11px !important; font-weight:850 !important; }
.secondary-upload { border-color:#cfd3de; background:#fafbfc; color:#4e5768 !important; }
.status-box { margin:8px 0 0; border-radius:9px; background:#f3f4f8; padding:8px 9px; color:#697285; font-size:9px; line-height:1.45; }
.status-box[data-status="success"] { color:#18765e; background:#e9f9f4; }
.status-box[data-status="warning"] { color:#92610b; background:#fff5e3; }
.status-box[data-status="error"] { color:#a03434; background:#ffeded; }
.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.compact-fields select { padding:8px !important; font-size:10px !important; }
.toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.toggle-card { display:flex; align-items:center; gap:7px; cursor:pointer; border:1px solid #e3e6ed; border-radius:11px; padding:9px; }
.toggle-card input { position:absolute; opacity:0; pointer-events:none; }
.toggle-card > i { position:relative; width:30px; height:17px; flex:0 0 auto; border-radius:99px; background:#d8dbe4; transition:background .18s ease; }
.toggle-card > i::after { position:absolute; top:3px; left:3px; width:11px; height:11px; content:""; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.17); transition:transform .18s ease; }
.toggle-card input:checked + i { background:#7363ed; }
.toggle-card input:checked + i::after { transform:translateX(13px); }
.toggle-card strong,.toggle-card small { display:block; }
.toggle-card strong { font-size:10px; }
.toggle-card small { margin-top:2px; color:#999faa; font-size:8px; }
.color-control { width:100%; height:41px; cursor:pointer; border:1px solid #dfe2eb; border-radius:10px; background:#fff; padding:4px; }
.wide-color { margin-bottom:0; }
.gradient-presets { display:flex; gap:7px; margin-top:9px; }
.gradient-presets button { width:34px; height:34px; border:2px solid #fff; border-radius:9px; background:var(--swatch); box-shadow:0 0 0 1px #d9dce5; }
.range-control { display:grid !important; gap:7px; margin-top:11px; }
.range-control > span { display:flex; align-items:center; justify-content:space-between; margin:0 !important; }
.range-control output { color:#6758de; font-size:9px; font-weight:850; }
input[type="range"] { width:100%; accent-color:#6f5ce9; }
.check-line { display:flex !important; cursor:pointer; align-items:center; gap:7px; margin-top:10px !important; color:#596274 !important; }
.check-line input { accent-color:#6d5ce6; }

.canvas-area { display:grid; min-width:0; grid-template-rows:auto minmax(480px,1fr) auto; background:#e8eaf1; }
.canvas-toolbar { display:flex; min-height:62px; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid rgba(20,24,44,.08); background:rgba(249,250,253,.94); padding:10px 14px; }
.toolbar-menu-button { display:none; width:35px; height:35px; border-color:var(--line); color:#2a2e42; background:#fff; }
.canvas-toolbar > div:nth-child(2) { flex:1; }
.canvas-toolbar strong,.canvas-toolbar span { display:block; }
.canvas-toolbar strong { font-size:12px; }
.canvas-toolbar > div:nth-child(2) > span { margin-top:2px; color:#89909d; font-size:9px; }
.zoom-controls { display:flex; align-items:center; gap:6px; }
.zoom-controls button { width:34px; height:34px; border-color:var(--line); color:#303447; background:#fff; }
.zoom-controls span { min-width:36px; color:#6e7686; font-size:10px; font-weight:800; text-align:center; }
.canvas-viewport {
  position:relative; display:grid; min-height:560px; overflow:auto; place-items:center; padding:30px;
  background-color:#e6e8ef;
  background-image:linear-gradient(45deg,#dce0e7 25%,transparent 25%),linear-gradient(-45deg,#dce0e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce0e7 75%),linear-gradient(-45deg,transparent 75%,#dce0e7 75%);
  background-position:0 0,0 9px,9px -9px,-9px 0; background-size:18px 18px;
}
.canvas-scaler { position:relative; flex:0 0 auto; transform-origin:top left; }
.generation-canvas {
  position:relative; overflow:hidden; container-type:size; background:#715dff;
  box-shadow:0 26px 75px rgba(23,26,49,.25);
}
.canvas-background,.canvas-shade,.canvas-light { position:absolute; inset:0; }
.canvas-background { background:linear-gradient(135deg,#725cff,#17104f); background-position:center; background-size:cover; }
.canvas-background::after { position:absolute; inset:0; content:""; opacity:.24; background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(135deg,#000,transparent 73%); }
.canvas-shade { z-index:1; background:rgba(4,7,22,.1); }
.canvas-light { z-index:2; border-radius:50%; filter:blur(60px); pointer-events:none; }
.canvas-light-one { top:-15%; left:-8%; right:auto; bottom:auto; width:42%; aspect-ratio:1; background:rgba(255,255,255,.27); }
.canvas-light-two { top:auto; left:auto; right:-7%; bottom:-17%; width:48%; aspect-ratio:1; background:rgba(67,223,191,.21); }

/* Photorealistic device composition */
.device-composition {
  position:absolute; z-index:5; top:49%; left:50%; width:88%; aspect-ratio:1.64;
  transform:translate(-50%,-50%);
}
.landscape-canvas .device-composition { width:78%; top:49%; }
.portrait-canvas .device-composition { width:92%; top:45%; }
.real-device {
  position:absolute; transition:opacity .2s ease,transform .2s ease;
  filter:drop-shadow(0 3.2cqw 2.4cqw rgba(8,10,24,.34));
}
.real-device.device-hidden { opacity:0; pointer-events:none; transform:scale(.92); }
.screen-glass { position:absolute; overflow:hidden; background:#f9f9fb; }
.screen-glass iframe,.screen-glass img,.screen-empty,.glass-reflection { position:absolute; inset:0; width:100%; height:100%; border:0; }
.screen-glass iframe { display:none; background:#fff; pointer-events:none; }
.screen-glass img { display:none; object-fit:cover; object-position:top center; }
.screen-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#5045a8; text-align:center; background:radial-gradient(circle at 80% 20%,rgba(67,223,191,.3),transparent 27%),linear-gradient(145deg,#fff,#e8e5ff); }
.screen-empty::before { width:17%; max-width:58px; aspect-ratio:1; margin-bottom:4%; content:""; border-radius:23%; background:linear-gradient(90deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(135deg,#745ff0,#32c7a8); box-shadow:0 .9cqw 2cqw rgba(83,68,201,.23); }
.screen-empty b { font-size:clamp(7px,1.15cqw,18px); }
.screen-empty span { margin-top:3%; color:#74798b; font-size:clamp(5px,.7cqw,11px); font-weight:650; }
.glass-reflection { z-index:8; pointer-events:none; background:linear-gradient(112deg,rgba(255,255,255,.18),transparent 18%,transparent 67%,rgba(255,255,255,.055)); mix-blend-mode:screen; }

/* iMac */
.real-imac { z-index:1; top:0; left:15%; width:67%; aspect-ratio:1.58; }
.imac-shell {
  position:absolute; inset:0 0 15%;
  border:.18cqw solid #8e9299; border-radius:1.25cqw 1.25cqw .75cqw .75cqw;
  background:
    linear-gradient(110deg,rgba(255,255,255,.9),transparent 12%,transparent 83%,rgba(255,255,255,.5)),
    linear-gradient(145deg,#dfe1e4,#a8abb2 42%,#eef0f1 67%,#8f939a);
  box-shadow:inset 0 0 0 .09cqw rgba(255,255,255,.75),inset 0 -.35cqw .6cqw rgba(70,73,81,.3);
}
.imac-shell::before {
  position:absolute; inset:.42cqw .42cqw 15%; content:""; border-radius:.86cqw .86cqw .12cqw .12cqw;
  background:linear-gradient(145deg,#12151d,#020307 72%); box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.1),0 .18cqw .4cqw rgba(0,0,0,.35);
}
.imac-shell .screen-glass { inset:1.35cqw 1.25cqw 17%; border-radius:.18cqw; box-shadow:0 0 1.1cqw rgba(63,103,202,.12),inset 0 0 .18cqw rgba(255,255,255,.13); }
.imac-camera { position:absolute; z-index:10; top:.72cqw; left:50%; width:.42cqw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#435777,#08101f 45%,#010204 75%); box-shadow:0 0 0 .05cqw rgba(255,255,255,.1); transform:translateX(-50%); }
.imac-camera i { position:absolute; inset:28%; border-radius:50%; background:rgba(70,120,185,.6); }
.imac-chin { position:absolute; right:.42cqw; bottom:.42cqw; left:.42cqw; height:14%; border-radius:0 0 .7cqw .7cqw; background:linear-gradient(180deg,#e3e4e6,#c2c5ca 58%,#a9acb2); box-shadow:inset 0 .1cqw 0 rgba(255,255,255,.9); }
.imac-mark { position:absolute; top:29%; left:50%; width:1.05cqw; height:1.2cqw; border-radius:55% 45% 52% 48%; background:linear-gradient(145deg,#82858a,#6c6f74); transform:translateX(-50%); opacity:.75; }
.imac-mark::before { position:absolute; top:-20%; left:49%; width:35%; height:31%; content:""; border-radius:100% 0; background:#707378; transform:rotate(-35deg); }
.imac-stand { position:absolute; z-index:-1; bottom:3.2%; left:43%; width:14%; height:15%; background:linear-gradient(90deg,#838790,#dfe1e4 47%,#a1a4ab 72%,#777b84); clip-path:polygon(17% 0,83% 0,100% 100%,0 100%); box-shadow:inset .12cqw 0 .22cqw rgba(255,255,255,.5); }
.imac-base { position:absolute; bottom:0; left:30%; width:40%; height:4.2%; border-radius:50%; background:linear-gradient(90deg,#7f838b,#e9eaec 48%,#8a8d95); box-shadow:0 .35cqw .55cqw rgba(0,0,0,.22),inset 0 .08cqw .08cqw rgba(255,255,255,.85); }

/* iPad */
.real-ipad { z-index:3; top:33%; left:2%; width:29%; aspect-ratio:.765; }
.ipad-metal { position:absolute; inset:0; border:.18cqw solid #878b93; border-radius:2.15cqw; background:linear-gradient(115deg,#8a8e96,#f2f3f4 18%,#9da1a9 45%,#f6f6f7 72%,#7b7f87); box-shadow:inset 0 0 0 .09cqw rgba(255,255,255,.82),inset -.22cqw 0 .38cqw rgba(65,68,76,.32); }
.ipad-metal::after { position:absolute; inset:.33cqw; content:""; border-radius:1.78cqw; background:linear-gradient(145deg,#181b23,#050609 70%); box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.1); }
.ipad-bezel { position:absolute; z-index:2; inset:1.05cqw .72cqw; border-radius:1.08cqw; overflow:hidden; background:#07090d; }
.ipad-bezel .screen-glass { inset:0; border-radius:.78cqw; }
.ipad-camera { position:absolute; z-index:8; top:.59cqw; left:50%; width:.48cqw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#44668f,#07101c 45%,#010203 78%); transform:translateX(-50%); box-shadow:0 0 0 .05cqw rgba(255,255,255,.11); }
.ipad-camera i { position:absolute; inset:28%; border-radius:50%; background:#395f93; }
.ipad-power { position:absolute; z-index:5; top:-.15cqw; right:1.7cqw; width:2cqw; height:.18cqw; border-radius:99px; background:#8d9198; }

/* iPhone */
.real-iphone { z-index:5; top:55%; left:8%; width:14%; aspect-ratio:.485; }
.iphone-metal { position:absolute; inset:0; border:.14cqw solid #71757d; border-radius:2.4cqw; background:linear-gradient(105deg,#696e76,#f2f3f4 18%,#777c84 43%,#f6f6f7 71%,#676b73); box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.75),inset -.2cqw 0 .3cqw rgba(42,45,52,.4); }
.iphone-metal::after { position:absolute; inset:.3cqw; content:""; border-radius:2.08cqw; background:#050609; }
.iphone-bezel { position:absolute; z-index:2; inset:.62cqw .47cqw; border-radius:1.72cqw; overflow:hidden; background:#050609; }
.iphone-bezel .screen-glass { inset:0; border-radius:1.48cqw; }
.dynamic-island { position:absolute; z-index:10; top:.48cqw; left:50%; width:42%; height:1.15cqw; border-radius:99px; background:#020304; transform:translateX(-50%); box-shadow:inset 0 0 .15cqw rgba(255,255,255,.04),0 0 .1cqw rgba(0,0,0,.5); }
.dynamic-island i { position:absolute; right:14%; top:34%; width:.3cqw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#365c85,#07111e 55%,#000); }
.dynamic-island b { position:absolute; left:18%; top:44%; width:31%; height:.16cqw; border-radius:99px; background:#0b0d11; }
.iphone-side-button,.iphone-volume-one,.iphone-volume-two { position:absolute; z-index:8; border-radius:.1cqw; background:linear-gradient(90deg,#777b83,#bbbfc5,#737780); box-shadow:inset 0 .04cqw .04cqw rgba(255,255,255,.5); }
.iphone-side-button { right:-.17cqw; top:27%; width:.22cqw; height:13%; }
.iphone-volume-one { left:-.17cqw; top:22%; width:.22cqw; height:8%; }
.iphone-volume-two { left:-.17cqw; top:34%; width:.22cqw; height:8%; }
.real-iphone .screen-empty b { font-size:clamp(5px,.82cqw,12px); }
.real-iphone .screen-empty span { display:none; }

/* MacBook */
.real-macbook { z-index:4; right:0; bottom:1%; width:49%; aspect-ratio:1.47; }
.macbook-lid { position:absolute; inset:0 4% 14%; border:.18cqw solid #858990; border-radius:1.15cqw 1.15cqw .28cqw .28cqw; background:linear-gradient(130deg,#92969e,#f0f1f2 20%,#a1a5ad 53%,#e9eaec 78%,#7a7e86); box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.75),inset 0 -.25cqw .35cqw rgba(54,57,64,.3); }
.macbook-lid::after { position:absolute; inset:.31cqw; content:""; border-radius:.82cqw .82cqw .14cqw .14cqw; background:linear-gradient(145deg,#151820,#030407 74%); box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.09); }
.macbook-bezel { position:absolute; z-index:2; inset:.98cqw .78cqw 1.12cqw; overflow:hidden; border-radius:.3cqw; background:#050609; }
.macbook-bezel .screen-glass { inset:0; }
.macbook-camera { position:absolute; z-index:10; top:.55cqw; left:50%; width:.39cqw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#456584,#08111d 48%,#010204 80%); transform:translateX(-50%); }
.macbook-camera i { position:absolute; inset:29%; border-radius:50%; background:#31547d; }
.macbook-hinge { position:absolute; z-index:3; right:11%; bottom:12%; left:11%; height:2.2%; border-radius:99px; background:linear-gradient(180deg,#5e626a,#1d2027 54%,#777b83); box-shadow:0 .08cqw .12cqw rgba(0,0,0,.35); }
.macbook-deck { position:absolute; z-index:2; right:-4%; bottom:0; left:-4%; height:17%; border-radius:.18cqw .18cqw 1.45cqw 1.45cqw; background:linear-gradient(180deg,#e7e8ea,#b6bac1 48%,#82868f 83%,#6d7179); clip-path:polygon(4.5% 0,95.5% 0,100% 64%,94% 100%,6% 100%,0 64%); box-shadow:inset 0 .1cqw 0 rgba(255,255,255,.92),0 .5cqw .7cqw rgba(0,0,0,.2); }
.keyboard-suggestion { position:absolute; top:18%; left:20%; display:grid; width:60%; height:29%; grid-template-columns:repeat(6,1fr); gap:2%; opacity:.35; }
.keyboard-suggestion span { border-radius:.08cqw; background:#6f737b; box-shadow:inset 0 .03cqw .04cqw rgba(255,255,255,.35); }
.trackpad-suggestion { position:absolute; top:51%; left:39%; width:22%; height:28%; border:.06cqw solid rgba(106,110,118,.45); border-radius:.18cqw; }
.deck-lip { position:absolute; top:0; left:50%; width:16%; height:22%; border-radius:0 0 .55cqw .55cqw; background:#999da5; transform:translateX(-50%); box-shadow:inset 0 .08cqw .1cqw rgba(255,255,255,.55); }

.headline-overlay {
  position:absolute; z-index:20; top:82%; left:7%; max-width:78%; color:#fff;
  font-size:58px; font-weight:950; line-height:1.02; letter-spacing:-.045em; white-space:pre-wrap; text-wrap:balance;
  transform:translateY(-50%); text-shadow:0 6px 26px rgba(7,9,26,.42); user-select:none;
}
.headline-overlay:empty { display:none; }
.logo-overlay { position:absolute; z-index:21; top:6%; right:6%; width:14%; max-height:20%; object-fit:contain; filter:drop-shadow(0 9px 20px rgba(7,9,24,.24)); user-select:none; }
.movable-element { cursor:move; touch-action:none; }
.movable-element:focus-visible { outline:5px solid rgba(255,255,255,.78); outline-offset:5px; }
.canvas-note { display:flex; gap:8px; border-top:1px solid rgba(20,24,44,.08); background:#f8f9fc; padding:11px 14px; color:#697285; font-size:10px; line-height:1.5; }
.canvas-note span { color:#5e50d6; font-weight:900; }
.canvas-note p { margin:0; }
.toast { position:fixed; z-index:1000; right:16px; bottom:16px; max-width:min(370px,calc(100vw - 32px)); border:1px solid rgba(255,255,255,.1); border-radius:13px; background:#171a2d; padding:13px 15px; color:#fff; font-size:11px; font-weight:750; line-height:1.45; box-shadow:0 17px 45px rgba(14,17,32,.28); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease; }
.toast.visible { opacity:1; transform:translateY(0); }
.toast[data-status="success"] { background:#155c49; }
.toast[data-status="warning"] { background:#79510d; }
.toast[data-status="error"] { background:#792828; }
.export-loader { position:fixed; z-index:1300; inset:0; display:grid; place-content:center; gap:15px; background:rgba(9,11,25,.78); color:#fff; text-align:center; backdrop-filter:blur(8px); }
.export-loader > div { width:46px; height:46px; margin:auto; border:4px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:1020px) {
  .hero-grid { grid-template-columns:1fr; padding-top:65px; }
  .hero-copy { max-width:760px; }
  .landing-device-card { min-height:540px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .workspace { display:block; }
  .control-panel { position:fixed; top:var(--app-header-height); bottom:0; left:0; width:min(var(--panel-width),92vw); transform:translateX(-105%); box-shadow:20px 0 50px rgba(18,21,42,.2); }
  .control-panel.open { transform:translateX(0); }
  .control-panel-heading { position:sticky; top:0; z-index:4; }
  .control-scroll { max-height:calc(100vh - var(--app-header-height) - 82px); }
  .panel-close-button,.toolbar-menu-button { display:grid; place-items:center; }
}
@media (max-width:760px) {
  .desktop-nav { display:none; }
  .mobile-menu-button { display:grid; }
  .hero-grid { min-height:auto; padding:52px 18px 75px; }
  .hero-copy h1 { font-size:clamp(45px,13vw,68px); }
  .landing-device-card { min-height:390px; border-radius:27px; }
  .section { padding:74px 18px; }
  .feature-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; gap:38px; }
  .left-heading { position:static; }
  .social-card { padding:32px 22px; grid-template-columns:1fr; }
  .cta-section { margin:50px 18px 75px; padding:34px 24px; flex-direction:column; align-items:flex-start; }
  .canvas-viewport { min-height:470px; padding:18px; }
  .workspace-badge,.ghost-button { display:none; }
  .app-brand { max-width:125px; overflow:hidden; }
  .headline-overlay { font-size:50px; }
}
@media (max-width:520px) {
  .landing-device-card { min-height:300px; }
  .value-strip { gap:18px; }
  .size-grid { grid-template-columns:1fr; }
  .steps article { grid-template-columns:1fr; }
  .toggle-grid,.two-fields { grid-template-columns:1fr; }
  .app-header { padding:0 10px; }
  .download-button { padding:10px 11px; font-size:10px; }
  .canvas-toolbar { padding:9px 10px; }
  .canvas-note { padding:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}