:root{
  --canvas:#EAF5FF;
  --surface:rgba(255,255,255,.94);
  --surface-solid:#fff;
  --surface-muted:#F5F8FF;
  --border:#DCE8F7;
  --border-strong:#C9D9EE;
  --ink:#101A47;
  --muted:#66729C;
  --blue:#397DFF;
  --purple:#795BFF;
  --danger:#D94D66;
  --shadow:0 24px 70px rgba(30,66,118,.13);
  --shadow-soft:0 14px 40px rgba(30,66,118,.09);
  --gradient:linear-gradient(135deg,var(--blue),var(--purple));
  --ease:cubic-bezier(.2,.8,.2,1);
  --radius:22px;
  --shell:min(1220px,calc(100vw - 48px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(121,91,255,.16);color:var(--ink)}
.shell{width:var(--shell);margin-inline:auto}.section{padding:122px 0}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.23;background-image:radial-gradient(rgba(16,26,71,.05) .65px,transparent .65px);background-size:12px 12px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--gradient);transform:scaleX(0);transform-origin:left center;z-index:1000}
.site-header{position:fixed;z-index:100;top:14px;left:0;right:0;transition:.32s var(--ease)}.header-inner{width:min(1260px,calc(100vw - 32px));height:64px;margin:auto;display:flex;align-items:center;padding:8px 10px 8px 12px;border:1px solid rgba(220,232,247,.78);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 10px 34px rgba(32,63,110,.06);backdrop-filter:blur(20px) saturate(160%);transition:.32s var(--ease)}.site-header.scrolled{top:8px}.site-header.scrolled .header-inner{box-shadow:0 14px 42px rgba(32,63,110,.11);background:rgba(255,255,255,.88);border-color:rgba(201,217,238,.9)}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}.brand img{width:38px;height:38px;border-radius:9px;box-shadow:0 5px 14px rgba(57,125,255,.2)}.brand span{font-size:19px;letter-spacing:-.45px}.brand b{font-weight:760}.brand em{font-style:normal;font-weight:760;color:var(--purple)}
.nav-links{display:flex;align-items:center;gap:5px;margin:auto}.nav-links a{font-size:12px;font-weight:650;color:var(--muted);padding:10px 11px;border-radius:9px;transition:.22s var(--ease)}.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--surface-muted)}
.header-actions{display:flex;align-items:center;gap:9px}.mac-pill{font-size:10px;font-weight:700;color:var(--muted);padding:8px 9px;border-radius:8px;background:var(--surface-muted);border:1px solid var(--border)}.header-cta{font-size:11px;font-weight:750;color:#fff;padding:10px 13px;border-radius:9px;background:var(--gradient);box-shadow:0 8px 22px rgba(83,94,255,.2);transition:.25s var(--ease)}.header-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(83,94,255,.26)}.header-cta span{padding-left:4px}.menu-button{display:none;width:42px;height:42px;border:0;border-radius:10px;background:var(--surface-muted);cursor:pointer}.menu-button span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto;border-radius:99px}
.hero{min-height:860px;padding-top:172px;padding-bottom:92px;display:grid;grid-template-columns:.84fr 1.16fr;align-items:center;gap:62px;position:relative}.hero:before{content:"";position:absolute;width:760px;height:760px;right:-330px;top:80px;background:radial-gradient(circle,rgba(57,125,255,.13),rgba(121,91,255,.04) 50%,transparent 72%);pointer-events:none}.hero-copy{position:relative;z-index:2}.product-kicker,.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.95px;text-transform:uppercase;color:var(--muted)}.status-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#6ee7b7,#22c55e);box-shadow:0 0 0 5px rgba(34,197,94,.09)}.hero h1{font-size:clamp(54px,5.5vw,82px);line-height:.96;letter-spacing:-4.2px;margin:22px 0 24px;font-weight:780;max-width:690px}.hero h1 span,.section-heading h2 span,.split-heading h2 span,.final-card h2 span,.device-section h2 span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{font-size:17px;line-height:1.65;color:var(--muted);max-width:600px;margin:0}.hero-actions{display:flex;align-items:center;gap:10px;margin-top:34px}.button{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 17px;border-radius:11px;font-weight:720;font-size:12px;cursor:pointer;transition:.25s var(--ease)}.button.primary{color:#fff;background:var(--gradient);box-shadow:0 12px 28px rgba(70,98,255,.22)}.button.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(70,98,255,.28)}.button.soft{background:var(--surface-muted);border:1px solid var(--border);color:var(--ink)}.button.soft:hover{background:#fff;border-color:var(--border-strong);transform:translateY(-1px)}.button.compact{min-height:39px;padding:0 15px}.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:52px;padding-top:22px;border-top:1px solid var(--border)}.hero-meta div{display:flex;flex-direction:column;gap:5px}.hero-meta strong{font-size:20px;letter-spacing:-.5px}.hero-meta span{font-size:9.5px;color:var(--muted);font-weight:650}
.hero-visual{position:relative;min-height:590px;perspective:1600px}.hero-orbit{position:absolute;border:1px solid rgba(121,91,255,.17);border-radius:50%;pointer-events:none}.orbit-one{width:520px;height:520px;right:-90px;top:30px;animation:slowSpin 28s linear infinite}.orbit-two{width:370px;height:370px;right:-15px;top:105px;border-style:dashed;animation:slowSpinReverse 24s linear infinite}.hero-mini-window{position:absolute;left:22px;top:74px;width:610px;border:1px solid rgba(191,210,235,.95);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 34px 90px rgba(27,57,105,.2);overflow:hidden;transform:rotateY(-8deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .3s var(--ease)}.mini-toolbar{height:56px;display:flex;align-items:center;padding:0 13px;border-bottom:1px solid var(--border);gap:13px}.traffic{display:flex;gap:6px}.traffic i{width:8px;height:8px;border-radius:50%;background:#ff605c}.traffic i:nth-child(2){background:#ffbd44}.traffic i:nth-child(3){background:#00ca4e}.mini-title{display:flex;flex-direction:column;gap:1px}.mini-title span{font-size:6px;letter-spacing:1px;font-weight:800;color:var(--muted)}.mini-title b{font-size:10px}.mini-actions{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:8px;color:var(--muted)}.mini-actions b{color:#fff;background:var(--gradient);padding:7px 10px;border-radius:7px}.mini-body{display:grid;grid-template-columns:46px 1fr 128px;height:385px}.mini-rail{border-right:1px solid var(--border);padding:10px 7px;display:flex;flex-direction:column;align-items:center;gap:11px;background:#fff}.mini-rail b{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--gradient);font-size:10px}.mini-rail i{width:27px;height:27px;border-radius:8px;background:var(--surface-muted);border:1px solid var(--border)}.mini-stage{background:var(--canvas);display:flex;flex-direction:column}.mini-stage-top{height:36px;display:flex;align-items:center;padding:0 9px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.95);gap:8px}.mini-stage-top b{font-size:5.8px;letter-spacing:.5px;color:var(--purple);background:rgba(121,91,255,.08);padding:5px 6px;border-radius:6px}.mini-stage-top span{font-size:6px;color:var(--muted)}.mini-canvas{position:relative;margin:18px 18px 10px;background:white;border-radius:10px;box-shadow:0 18px 34px rgba(46,76,120,.14);overflow:hidden;flex:1}.mini-canvas:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.5),transparent 64%);transform:translateX(-120%);animation:sheen 6s ease-in-out infinite}.mini-canvas img{width:100%;height:100%;object-fit:cover}.mini-selection{position:absolute;left:23%;top:20%;width:15%;height:62%;border:1.5px solid var(--purple);animation:miniSelect 7s var(--ease) infinite;z-index:2}.mini-selection i{position:absolute;width:5px;height:5px;border:1px solid var(--purple);background:#fff}.mini-selection i:nth-child(1){left:-3px;top:-3px}.mini-selection i:nth-child(2){right:-3px;top:-3px}.mini-selection i:nth-child(3){left:-3px;bottom:-3px}.mini-selection i:nth-child(4){right:-3px;bottom:-3px}.mini-pages{height:40px;border-top:1px solid var(--border);display:flex;align-items:center;gap:4px;padding:0 10px;background:#fff}.mini-pages>*{font-size:6px;color:var(--muted);padding:5px 7px;border-radius:6px;border:1px solid var(--border)}.mini-pages b{color:var(--purple);border-color:rgba(121,91,255,.35);background:rgba(121,91,255,.07)}.mini-inspector{border-left:1px solid var(--border);padding:14px 11px;background:#fff}.mini-inspector h4{margin:0 0 18px;font-size:11px}.mini-inspector small{display:block;margin:10px 0 5px;font-size:5.5px;font-weight:800;color:var(--muted);letter-spacing:.7px}.mini-field,.color-field{border:1px solid var(--border);background:var(--surface-muted);border-radius:7px;padding:7px 8px;display:flex;justify-content:space-between;font-size:7px}.mini-segments{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:7px;overflow:hidden}.mini-segments>*{font-size:6px;text-align:center;padding:6px 2px}.mini-segments b{background:var(--gradient);color:#fff}.mini-range{height:4px;background:var(--border);border-radius:99px;overflow:hidden}.mini-range i{display:block;width:66%;height:100%;background:var(--gradient)}.mini-range.shorter i{width:42%}.mini-button{font-size:6.5px;text-align:center;background:var(--surface-muted);border:1px solid var(--border);border-radius:7px;padding:7px;margin-top:14px}.float-card{position:absolute;padding:12px 14px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-soft);backdrop-filter:blur(14px);display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:2px;animation:float 4.5s ease-in-out infinite}.float-card>span{grid-row:1/3;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(57,125,255,.1),rgba(121,91,255,.13));color:var(--purple);font-size:10px;font-weight:800}.float-card b{font-size:10px}.float-card small{font-size:7px;color:var(--muted)}.card-themes{right:-18px;top:18px}.card-files{left:-10px;bottom:38px;animation-delay:-2s}
.trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--surface-muted)}.trust-track{height:64px;display:flex;align-items:center;gap:26px;width:max-content;padding-left:30px;font-size:10px;font-weight:750;color:var(--muted);letter-spacing:.15px;animation:ticker 32s linear infinite}.trust-track i{color:var(--purple);font-style:normal}
.section-heading{max-width:760px}.section-heading.center{text-align:center;margin-inline:auto}.section-heading h2,.split-heading h2{font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-3px;margin:15px 0 18px}.section-heading p,.split-heading>p{font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:680px}.split-heading{display:grid;grid-template-columns:1fr .66fr;gap:60px;align-items:end}.split-heading>p{padding-bottom:7px}
.workspace-section{padding-top:132px}.studio-wrap{margin-top:56px}.studio-window{border:1px solid var(--border-strong);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 32px 90px rgba(36,72,124,.15);transform-style:preserve-3d;transition:transform .35s var(--ease)}.studio-topbar{height:66px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--border);gap:14px;background:rgba(255,255,255,.98)}.studio-left,.studio-right{display:flex;align-items:center;gap:8px}.studio-left{min-width:300px}.studio-right{margin-left:auto}.icon-button,.soft-control,.gradient-control,.small-control,.zoom-control,.page-control{border:0;cursor:pointer}.icon-button{width:32px;height:32px;border-radius:8px;background:var(--surface-muted);border:1px solid var(--border);font-size:19px}.studio-icon{width:30px;height:30px;border-radius:8px}.bar-divider{width:1px;height:28px;background:var(--border)}.bar-divider.small{height:20px;margin:0 2px}.project-title{display:flex;flex-direction:column;gap:2px}.project-title span{font-size:7.5px;font-weight:800;letter-spacing:1px;color:var(--muted)}.project-title b{font-size:12px}.family-switch{display:flex;gap:4px;margin-left:8px}.family-switch button{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;padding:7px 9px;font-size:9px;font-weight:700;color:var(--ink);cursor:pointer;transition:.2s var(--ease)}.family-switch button.active{color:#fff;border-color:transparent;background:var(--gradient);box-shadow:0 7px 16px rgba(80,90,255,.18)}.save-state{font-size:8px;color:var(--muted);margin-right:2px}.soft-control{height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface-muted);font-size:8.5px;font-weight:700}.soft-control.square{width:32px;padding:0}.soft-control.save-control{color:#fff;border-color:transparent;background:var(--gradient)}.gradient-control{height:34px;padding:0 12px;border-radius:9px;color:#fff;background:var(--gradient);font-size:9px;font-weight:750;box-shadow:0 7px 18px rgba(80,90,255,.17)}
.studio-body{display:grid;grid-template-columns:72px minmax(0,1fr) 240px;min-height:660px}.tool-rail{border-right:1px solid var(--border);background:#fff;padding:11px 7px;display:flex;flex-direction:column;gap:5px}.tool-rail button{height:58px;border:0;border-radius:10px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink);cursor:pointer;transition:.2s var(--ease)}.tool-rail button b{font-size:16px;font-weight:650}.tool-rail button span{font-size:7.5px;font-weight:650}.tool-rail button:hover{background:var(--surface-muted)}.tool-rail button.active{color:#fff;background:var(--gradient);box-shadow:0 10px 18px rgba(80,90,255,.17)}.studio-center{min-width:0;display:flex;flex-direction:column}.canvas-toolbar{height:48px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--border);background:#fff}.panorama-pill{font:700 7.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px;color:var(--purple);background:rgba(121,91,255,.08);padding:6px 8px;border-radius:99px}.canvas-toolbar code{font-size:7.5px;color:var(--muted)}.toolbar-spacer{flex:1}.small-control,.zoom-control,.page-control{height:28px;border-radius:7px;background:var(--surface-muted);border:1px solid var(--border);font-size:8px;font-weight:700}.small-control{min-width:28px}.small-control.wide{padding:0 8px}.small-control.danger{color:var(--danger)}.page-control{padding:0 9px;min-width:84px}.zoom-control{width:42px}.canvas-workarea{flex:1;display:flex;flex-direction:column;background:var(--canvas);min-height:0}.canvas-surface{flex:1;min-height:510px;position:relative;display:grid;place-items:center;padding:38px 28px;overflow:hidden}.canvas-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(57,125,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,125,255,.035) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at center,#000 20%,transparent 78%)}.artboard{position:relative;width:min(90%,760px);aspect-ratio:3.25/1;border-radius:11px;background:#fff;overflow:hidden;box-shadow:0 18px 46px rgba(32,62,110,.18);transform:scale(var(--zoom,1));transition:transform .25s var(--ease)}.artboard>img{width:100%;height:100%;object-fit:cover;transition:object-fit .25s var(--ease)}.artboard.fit-contain>img{object-fit:contain;background:#fff}.screen-seam{position:absolute;top:0;bottom:0;width:1px;background:rgba(16,26,71,.10);z-index:2}.seam-a{left:16.666%}.seam-b{left:33.333%}.seam-c{left:50%}.seam-d{left:66.666%}.seam-e{left:83.333%}.selection-frame{--angle:8deg;--shadow:24;position:absolute;z-index:4;left:8.5%;top:15%;width:11%;height:70%;border:1.5px solid var(--purple);transform:rotate(var(--angle));transform-origin:center;filter:drop-shadow(0 calc(var(--shadow)*.2px) calc(var(--shadow)*.7px) rgba(24,34,76,calc(var(--shadow)*.008)));transition:left .45s var(--ease),top .45s var(--ease),transform .28s var(--ease),filter .28s var(--ease)}.selection-frame:before{content:"";position:absolute;inset:4%;border:4px solid #151821;border-radius:10px;background:rgba(255,255,255,.08)}.selection-frame:after{content:"";position:absolute;left:30%;right:30%;top:7%;height:5%;border-radius:99px;background:#151821}.selection-frame.clay:before{border-color:#dadce4;background:#f2f3f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.selection-frame.clay:after{background:#b8bdc9}.selection-frame.none:before,.selection-frame.none:after{opacity:0}.selection-frame .h{position:absolute;width:7px;height:7px;border:1.3px solid var(--purple);background:#fff;border-radius:1px}.selection-frame .tl{left:-4px;top:-4px}.selection-frame .tr{right:-4px;top:-4px}.selection-frame .bl{left:-4px;bottom:-4px}.selection-frame .br{right:-4px;bottom:-4px}.selection-frame .ml{left:-4px;top:calc(50% - 3px)}.selection-frame .mr{right:-4px;top:calc(50% - 3px)}.selection-frame .rotate{position:absolute;width:8px;height:8px;border:1.3px solid var(--purple);background:#fff;border-radius:50%;left:calc(50% - 4px);top:-23px}.selection-frame .rotate:after{content:"";position:absolute;width:1px;height:13px;background:var(--purple);left:3px;top:7px}.page-strip{height:76px;border-top:1px solid var(--border);background:#fff;display:flex;align-items:center;padding:9px 12px;gap:12px}.pages{display:flex;gap:6px}.pages button{width:56px;height:48px;border:1px solid var(--border);border-radius:8px;background:#fff;padding:4px;cursor:pointer;transition:.2s var(--ease)}.pages button span{display:block;font-size:7px;color:var(--muted);text-align:left;margin-bottom:3px}.pages button i{display:block;height:24px;border-radius:4px;background:linear-gradient(135deg,#eff5ff,#ede7ff)}.pages button:nth-child(2) i{background:linear-gradient(135deg,#edf8f3,#e6f6ee)}.pages button:nth-child(3) i{background:linear-gradient(135deg,#f5efff,#eadfff)}.pages button:nth-child(4) i{background:linear-gradient(135deg,#fff3ed,#ffe4dc)}.pages button:nth-child(5) i{background:linear-gradient(135deg,#eef3ff,#dde6ff)}.pages button:nth-child(6) i{background:linear-gradient(135deg,#fff2f7,#ffe4ee)}.pages button.active{border:2px solid var(--purple);box-shadow:0 0 0 3px rgba(121,91,255,.06)}.page-summary{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px}.page-summary b{font-size:9px}.page-summary span{font-size:7.5px;color:var(--muted)}
.inspector-panel{border-left:1px solid var(--border);background:#fff;padding:0 13px 14px;overflow:hidden}.inspector-head{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin:0 -13px 12px;padding:0 13px}.inspector-head span{font-size:7px;letter-spacing:.8px;font-weight:800;color:var(--muted)}.inspector-head h3{font-size:14px;margin:2px 0 0}.inspector-head button{border:0;background:transparent;color:var(--muted);cursor:pointer}.inspector-block{padding:10px 0 13px;border-bottom:1px solid var(--border)}.inspector-block label{display:block;font-size:7.5px;font-weight:750;color:var(--muted);margin:0 0 6px}.inspector-value{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);font-size:9px;margin-bottom:11px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:2px;border-radius:8px;background:var(--surface-muted);border:1px solid var(--border)}.segmented button{border:0;background:transparent;border-radius:6px;padding:7px 4px;font-size:8px;font-weight:700;cursor:pointer;color:var(--muted);transition:.2s var(--ease)}.segmented button.active{background:#fff;color:var(--ink);box-shadow:0 4px 11px rgba(38,69,112,.1)}.fit-style{grid-template-columns:1fr 1fr;margin-top:3px}.label-row{display:flex;align-items:center;justify-content:space-between}.label-row output{font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}.native-range{width:100%;height:4px;accent-color:var(--purple);margin:3px 0 9px}.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.preset-row button{border:1px solid var(--border);background:var(--surface-muted);padding:5px 0;border-radius:6px;font-size:6.5px;cursor:pointer}.preset-row button.active{color:#fff;background:var(--gradient);border-color:transparent}.color-field{margin-top:5px;align-items:center;font-size:8px}.color-field i{width:18px;height:18px;border-radius:5px;background:#151821;border:1px solid rgba(16,26,71,.08)}.inspector-block.condensed{padding-bottom:11px}.linked-row{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;background:rgba(121,91,255,.06)}.linked-row>span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#fff;color:var(--purple)}.linked-row div{display:flex;flex-direction:column}.linked-row b{font-size:8px}.linked-row small{font-size:6.5px;color:var(--muted)}.dimension-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;align-items:center;margin-top:8px}.dimension-grid>div{padding:7px;border:1px solid var(--border);border-radius:7px;display:flex;justify-content:space-between}.dimension-grid label{margin:0}.dimension-grid b{font-size:8px}.dimension-grid>span{font-size:8px;color:var(--muted)}.replace-control,.repeat-control{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);padding:8px 6px;font-size:8px;font-weight:700;cursor:pointer;margin-top:9px}.repeat-control{background:#fff}.studio-caption{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;margin:13px 8px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted)}.studio-caption div{display:flex;align-items:center;gap:9px}.studio-caption b{font-size:10px}.studio-caption p{font-size:9px;color:var(--muted);margin:0}
.themes-section{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}.library-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:48px}.library-stats article{padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;box-shadow:0 8px 28px rgba(38,70,116,.04)}.library-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:850}.library-icon.blue{color:var(--blue);background:rgba(57,125,255,.10)}.library-icon.purple{color:var(--purple);background:rgba(121,91,255,.10)}.library-icon.coral{color:#e85c69;background:rgba(232,92,105,.10)}.library-icon.mint{color:#21a179;background:rgba(33,161,121,.10)}.library-stats article>div:nth-child(2){display:flex;flex-direction:column;gap:2px}.library-stats b{font-size:10px}.library-stats span{font-size:7.5px;color:var(--muted)}.library-stats strong{font-size:17px;letter-spacing:-.5px}.theme-browser{margin-top:28px;border:1px solid var(--border-strong);border-radius:20px;background:#fff;overflow:hidden;box-shadow:var(--shadow-soft)}.browser-toolbar{height:70px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border);gap:14px}.browser-title{display:flex;align-items:center;gap:10px}.sparkle-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--purple);background:linear-gradient(135deg,rgba(57,125,255,.11),rgba(121,91,255,.13));font-size:12px}.browser-title>div:last-child{display:flex;flex-direction:column;gap:2px}.browser-title span{font-size:7px;letter-spacing:.8px;font-weight:800;color:var(--muted)}.browser-title b{font-size:11px}.browser-filters{display:flex;gap:4px;margin-left:auto}.browser-filters button{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;padding:7px 10px;font-size:8px;font-weight:700;cursor:pointer;transition:.2s var(--ease)}.browser-filters button.active{color:#fff;background:var(--gradient);border-color:transparent}.browser-count{font-size:8px;color:var(--muted);min-width:64px;text-align:right}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px;background:var(--surface-muted)}.theme-card{display:block;padding:0;border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(34,65,108,.04);transition:.28s var(--ease)}.theme-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(34,65,108,.10);border-color:var(--border-strong)}.theme-card.selected{box-shadow:0 0 0 2px rgba(121,91,255,.18),0 14px 32px rgba(46,72,130,.09);border-color:rgba(121,91,255,.42)}.theme-card.hidden{display:none}.theme-image{display:block;aspect-ratio:2.55/1;overflow:hidden;background:var(--canvas)}.theme-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}.theme-card:hover .theme-image img{transform:scale(1.035)}.theme-meta{display:flex;align-items:center;justify-content:space-between;padding:11px 12px}.theme-meta>span{display:flex;flex-direction:column;gap:2px}.theme-meta b{font-size:9px}.theme-meta small{font-size:7px;color:var(--muted)}.theme-meta i{font-style:normal;width:25px;height:25px;border-radius:8px;background:var(--surface-muted);display:grid;place-items:center;color:var(--purple);font-size:9px}
.precision-section{background:var(--canvas);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.precision-bento{display:grid;grid-template-columns:1.08fr .92fr;grid-template-areas:"resize background" "layers panorama";gap:14px;margin-top:52px}.precision-card{position:relative;overflow:hidden;border:1px solid rgba(201,217,238,.95);border-radius:22px;background:rgba(255,255,255,.91);padding:26px;min-height:500px;box-shadow:0 20px 54px rgba(38,71,116,.07)}.precision-resize{grid-area:resize}.precision-background{grid-area:background}.precision-layers{grid-area:layers;min-height:430px}.precision-panorama{grid-area:panorama;min-height:430px}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:7.5px;letter-spacing:.7px;color:var(--muted);font-weight:800}.card-top b{letter-spacing:0;text-transform:none;color:var(--purple);background:rgba(121,91,255,.08);padding:6px 8px;border-radius:99px}.precision-card h3{font-size:30px;line-height:1.08;letter-spacing:-1.2px;margin:17px 0 10px;max-width:470px}.precision-card>p{color:var(--muted);font-size:12.5px;line-height:1.6;max-width:510px;margin:0}.resize-demo{height:250px;margin-top:24px;position:relative;display:grid;place-items:center;background:linear-gradient(140deg,#edf6ff,#f2edff);border:1px solid var(--border);border-radius:16px;overflow:hidden}.resize-demo:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(57,125,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(57,125,255,.05) 1px,transparent 1px);background-size:18px 18px}.resize-phone{position:relative;width:82px;height:174px;border:7px solid #151821;border-radius:20px;background:#fff;box-shadow:0 24px 40px rgba(35,50,90,.21);transform:rotate(8deg);animation:resizePulse 4.5s var(--ease) infinite}.phone-screen{height:100%;border-radius:12px;background:linear-gradient(160deg,#f8fbff,#eee8ff);padding:15px 7px}.demo-ui{height:100%;display:flex;flex-direction:column;gap:7px}.demo-ui i{width:54%;height:6px;border-radius:4px;background:var(--purple)}.demo-ui b{height:40px;border-radius:8px;background:linear-gradient(135deg,#397dff,#795bff)}.demo-ui span{height:8px;border-radius:4px;background:#d9e5f4}.demo-ui span:last-child{width:70%}.resize-handle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--purple);border-radius:2px}.h1{left:-12px;top:-12px}.h2{right:-12px;top:-12px}.h3{left:-12px;bottom:-12px}.h4{right:-12px;bottom:-12px}.h5{left:calc(50% - 4px);top:-12px}.h6{left:calc(50% - 4px);bottom:-12px}.h7{left:-12px;top:calc(50% - 4px)}.h8{right:-12px;top:calc(50% - 4px)}.measure{position:absolute;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--purple)}.measure-x{left:18%;right:18%;top:19%;border-top:1px dashed rgba(121,91,255,.45);text-align:center}.measure-x span{position:relative;top:-12px;background:#fff;padding:4px 6px;border-radius:6px;border:1px solid var(--border)}.measure-y{top:18%;bottom:18%;left:26%;border-left:1px dashed rgba(121,91,255,.45);display:flex;align-items:center}.measure-y span{position:relative;left:-16px;background:#fff;padding:4px 6px;border-radius:6px;border:1px solid var(--border)}.linked-chip{position:absolute;right:14px;bottom:14px;font-size:8px;font-weight:750;color:var(--purple);padding:7px 9px;border-radius:8px;background:#fff;border:1px solid var(--border);box-shadow:0 7px 18px rgba(54,84,130,.08)}.background-demo{margin-top:23px}.background-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.background-tabs button{border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);padding:8px 4px;font-size:7.5px;font-weight:700;cursor:pointer}.background-tabs button.active{color:#fff;background:var(--gradient);border-color:transparent}.background-preview{height:185px;margin-top:9px;border-radius:14px;border:1px solid var(--border);background:#EAF5FF;display:flex;align-items:center;justify-content:center;gap:9px;transition:.35s var(--ease);overflow:hidden;position:relative}.background-preview:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.75),transparent 35%)}.bg-phone{position:relative;width:46px;height:96px;border:5px solid #151821;border-radius:13px;background:#fff;box-shadow:0 12px 24px rgba(31,45,80,.18)}.bg-phone.b{transform:translateY(-10px) rotate(-5deg)}.bg-phone.c{transform:rotate(6deg)}.swatch-row{display:flex;gap:7px;margin-top:9px}.swatch-row button{width:28px;height:28px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);background:var(--swatch);cursor:pointer}.layer-stack{margin-top:26px;display:flex;flex-direction:column;gap:7px}.layer-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--border);border-radius:11px;background:#fff}.layer-row.active{border-color:rgba(121,91,255,.36);box-shadow:0 0 0 3px rgba(121,91,255,.055)}.layer-icon{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:800}.purple-dot{color:var(--purple);background:rgba(121,91,255,.1)}.blue-dot{color:var(--blue);background:rgba(57,125,255,.1)}.mint-dot{color:#1c9f74;background:rgba(28,159,116,.1)}.coral-dot{color:#e35667;background:rgba(227,86,103,.1)}.layer-row>div{display:flex;flex-direction:column;gap:2px}.layer-row b{font-size:9px}.layer-row small{font-size:7px;color:var(--muted)}.layer-row em{font-style:normal;color:var(--muted);font-size:9px}.panorama-demo{margin-top:28px}.panorama-track{height:165px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(120deg,#edf6ff,#f4edff);display:grid;grid-template-columns:repeat(6,1fr);position:relative;overflow:hidden}.panorama-track>i{border-right:1px dashed rgba(102,114,156,.24)}.panorama-track>i:last-of-type{border:0}.panorama-object{position:absolute;left:11%;top:34px;font-size:42px;line-height:.8;letter-spacing:-3px;font-weight:850;color:rgba(16,26,71,.88);transform:rotate(-7deg)}.panorama-legend{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:6px}.panorama-legend span{text-align:center;font-size:6.5px;color:var(--muted)}
.device-workbench{margin-top:52px;border:1px solid var(--border-strong);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}.device-tabs{height:82px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}.device-tabs button{border:0;border-right:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.2s var(--ease)}.device-tabs button:last-child{border-right:0}.device-tabs button>span{width:34px;height:34px;border-radius:10px;background:var(--surface-muted);border:1px solid var(--border);display:grid;place-items:center;font-size:15px}.device-tabs button>div{display:flex;flex-direction:column;gap:2px;text-align:left}.device-tabs b{font-size:10px}.device-tabs small{font-size:7px;color:var(--muted)}.device-tabs button.active{background:linear-gradient(180deg,#fff,rgba(234,245,255,.8));box-shadow:inset 0 -2px 0 var(--purple)}.device-tabs button.active>span{color:#fff;background:var(--gradient);border-color:transparent}.device-preview-panel{display:grid;grid-template-columns:.78fr 1.22fr;min-height:470px}.device-copy{padding:52px}.device-copy>span{font-size:8px;font-weight:800;letter-spacing:.9px;color:var(--purple)}.device-copy h3{font-size:34px;line-height:1.08;letter-spacing:-1.5px;margin:14px 0 13px}.device-copy>p{font-size:12.5px;line-height:1.6;color:var(--muted)}.preset-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.preset-list button{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;padding:7px 9px;font:700 7.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);cursor:pointer}.preset-list button.active{color:#fff;background:var(--gradient);border-color:transparent}.device-points{display:flex;flex-direction:column;gap:9px;margin-top:25px}.device-points div{display:flex;gap:8px;align-items:center}.device-points i{width:19px;height:19px;border-radius:6px;background:rgba(121,91,255,.09);color:var(--purple);font-style:normal;display:grid;place-items:center;font-size:8px;font-weight:900}.device-points span{font-size:9px;font-weight:650;color:var(--muted)}.device-gallery{position:relative;min-height:470px;background:linear-gradient(145deg,#e9f4ff,#f3edff);display:flex;align-items:center;justify-content:center;gap:20px;overflow:hidden}.device-gallery:before,.device-gallery:after{content:"";position:absolute;border:1px solid rgba(121,91,255,.16);border-radius:50%}.device-gallery:before{width:360px;height:360px}.device-gallery:after{width:500px;height:500px;border-style:dashed}.device-card-art{position:relative;z-index:2;width:124px;height:270px;border:8px solid #151821;border-radius:29px;background:#fff;overflow:hidden;box-shadow:0 28px 48px rgba(28,42,80,.25);transition:.45s var(--ease)}.device-card-art img{width:100%;height:100%;object-fit:cover}.device-card-art .notch{position:absolute;z-index:3;width:43%;height:13px;border-radius:99px;background:#151821;left:28.5%;top:8px}.phone-one{transform:translateY(18px) rotate(-8deg)}.phone-two{transform:translateY(-13px);z-index:3}.phone-three{transform:translateY(20px) rotate(8deg)}.device-shadow{position:absolute;width:350px;height:55px;border-radius:50%;background:rgba(53,44,100,.18);filter:blur(20px);bottom:40px}.device-gallery.tablet-mode{gap:0}.device-gallery.tablet-mode .device-card-art{width:205px;height:285px;border-radius:24px}.device-gallery.android-mode .device-card-art .notch{width:10px;height:10px;left:calc(50% - 5px);border-radius:50%}.duo-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}.duo-copy{padding:42px 48px}.duo-copy h3{font-size:30px;letter-spacing:-1.2px;margin:13px 0 10px}.duo-copy>p{font-size:12px;line-height:1.6;color:var(--muted);max-width:520px}.duo-specs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}.duo-specs span{border:1px solid var(--border);background:var(--surface-muted);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:2px;font-size:7.5px;color:var(--muted)}.duo-specs b{font:750 9px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}.duo-preview{background:var(--surface-muted);padding:24px 30px}.duo-toolbar{display:flex;align-items:center;justify-content:space-between}.duo-toolbar>span{font-size:8px;font-weight:750;color:var(--muted)}.duo-style{width:190px}.duo-frames{height:245px;display:flex;align-items:center;justify-content:center;gap:32px}.duo-item{display:flex;flex-direction:column;align-items:center;gap:3px}.duo-device{position:relative;padding:5px;background:#171922;box-shadow:0 22px 38px rgba(27,32,61,.24);transition:.35s var(--ease)}.duo-device.outer{width:93px;height:136px;border-radius:20px}.duo-device.inner{width:166px;height:117px;border-radius:17px}.duo-screen{width:100%;height:100%;border-radius:15px;background:linear-gradient(150deg,#dae9ff,#e9dcff);display:grid;place-items:center;font-size:8px;font-weight:800;color:var(--purple)}.duo-device.outer .duo-screen{border-radius:15px}.duo-camera{position:absolute;width:7px;height:7px;border-radius:50%;background:#070812;right:12px;top:12px;z-index:2}.hinge{position:absolute;width:3px;height:20px;background:#0b0c12;top:48px;z-index:2}.hinge.left{left:2px}.hinge.right{right:2px}.duo-item b{font-size:8.5px;margin-top:5px}.duo-item span{font-size:7px;color:var(--muted)}.duo-preview.clay .duo-device{background:linear-gradient(145deg,#e2e4eb,#bec4d0);box-shadow:0 22px 38px rgba(35,44,69,.19)}.duo-preview.clay .duo-camera,.duo-preview.clay .hinge{background:#a4a9b4}.duo-preview.none .duo-device{padding:0;background:transparent;box-shadow:0 22px 38px rgba(35,44,69,.13)}.duo-preview.none .duo-camera,.duo-preview.none .hinge{opacity:0}
.workflow-section{background:linear-gradient(180deg,#fbfdff,#fff);border-top:1px solid var(--border)}.workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:50px}.workflow-card{min-height:260px;border:1px solid var(--border);border-radius:18px;background:#fff;padding:22px;position:relative;box-shadow:0 12px 34px rgba(42,72,116,.045)}.workflow-number{font:750 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}.workflow-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin:33px 0 22px;background:var(--surface-muted);border:1px solid var(--border);color:var(--purple);font-size:14px;font-weight:800}.workflow-card h3{font-size:19px;letter-spacing:-.6px;margin:0 0 8px}.workflow-card p{font-size:10.5px;line-height:1.55;color:var(--muted);margin:0}.accent-card{background:linear-gradient(145deg,#edf6ff,#f1edff);border-color:rgba(121,91,255,.22)}.accent-card .workflow-icon{color:#fff;background:var(--gradient);border:0}.accent-card button{margin-top:18px;border:0;background:transparent;color:var(--purple);font-size:9px;font-weight:800;padding:0;cursor:pointer}.feature-ledger{margin-top:18px;border:1px solid var(--border-strong);border-radius:20px;overflow:hidden;background:#fff}.ledger-head{height:78px;display:flex;align-items:center;padding:0 20px;gap:18px;border-bottom:1px solid var(--border)}.ledger-head span{font-size:7.5px;font-weight:800;letter-spacing:.8px;color:var(--purple)}.ledger-head b{font-size:13px}.ledger-head small{margin-left:auto;font-size:8px;color:var(--muted)}.ledger-grid{display:grid;grid-template-columns:repeat(2,1fr)}.ledger-grid>div{display:grid;grid-template-columns:32px 140px 1fr;gap:10px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}.ledger-grid>div:nth-child(odd){border-right:1px solid var(--border)}.ledger-grid>div:nth-last-child(-n+2){border-bottom:0}.ledger-grid i{font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--purple);font-style:normal}.ledger-grid b{font-size:9px}.ledger-grid span{font-size:8.5px;color:var(--muted);line-height:1.45}
.final-section{padding-bottom:90px}.final-card{min-height:500px;border:1px solid var(--border-strong);border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(145deg,#eaf5ff,#f5f0ff 70%,#fff);display:grid;grid-template-columns:.9fr 1.1fr;box-shadow:0 26px 70px rgba(40,72,120,.10)}.final-content{position:relative;z-index:3;padding:70px 0 70px 62px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.final-content>img{width:60px;height:60px;border-radius:15px;box-shadow:0 14px 26px rgba(57,125,255,.22);margin-bottom:22px}.final-card h2{font-size:43px;line-height:1.05;letter-spacing:-2px;margin:14px 0 14px;max-width:590px}.final-card p{font-size:13px;line-height:1.65;color:var(--muted);max-width:520px;margin:0}.hero-actions.center{justify-content:center}.final-art{position:relative;z-index:2;min-height:500px}.final-window{position:absolute;width:480px;border:7px solid #fff;border-radius:18px;box-shadow:0 28px 55px rgba(39,59,104,.18);overflow:hidden;background:#fff}.final-window img{width:100%;height:100%;object-fit:cover}.final-window.back{height:185px;right:-80px;top:70px;transform:rotate(8deg);opacity:.72}.final-window.mid{height:200px;right:18px;top:155px;transform:rotate(-7deg);opacity:.87}.final-window.front{height:205px;right:55px;top:260px;transform:rotate(3deg)}.final-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.45}.glow-a{width:260px;height:260px;background:rgba(57,125,255,.18);right:60px;top:30px}.glow-b{width:220px;height:220px;background:rgba(121,91,255,.14);right:340px;bottom:20px}
.site-footer{border-top:1px solid var(--border);background:#fff}.footer-inner{min-height:110px;display:flex;align-items:center;gap:24px}.footer-inner .brand img{width:34px;height:34px}.footer-inner p{font-size:9px;color:var(--muted);margin:0}.footer-inner nav{margin-left:auto;display:flex;gap:18px}.footer-inner nav a{font-size:9px;font-weight:650;color:var(--muted)}.footer-inner nav a:hover{color:var(--ink)}
.export-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}.export-dialog::backdrop{background:rgba(16,26,71,.28);backdrop-filter:blur(8px)}.export-window{width:min(520px,calc(100vw - 28px));border:1px solid var(--border-strong);border-radius:20px;background:rgba(255,255,255,.98);box-shadow:0 36px 90px rgba(22,42,78,.30);padding:22px;animation:dialogIn .28s var(--ease)}.export-head{display:flex;justify-content:space-between;align-items:flex-start}.export-head span{font-size:7px;font-weight:800;letter-spacing:.9px;color:var(--purple)}.export-head h3{font-size:22px;margin:4px 0 3px}.export-head p{font-size:9px;color:var(--muted);margin:0}.export-head>button{border:0;background:var(--surface-muted);width:30px;height:30px;border-radius:9px;font-size:18px;color:var(--muted);cursor:pointer}.export-section-ui{margin-top:18px}.export-section-ui>label{display:block;font-size:8px;font-weight:750;color:var(--muted);margin-bottom:6px}.export-segment{grid-template-columns:1fr 1fr}.export-slider-row{display:grid;grid-template-columns:50px 1fr 48px;gap:10px;align-items:center;margin-top:14px}.export-slider-row span{font-size:8px;color:var(--muted)}.export-slider-row input{accent-color:var(--purple)}.export-slider-row output{text-align:right;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace}.export-result{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px;border-radius:11px;background:var(--surface-muted);border:1px solid var(--border);font-size:8px;color:var(--muted)}.export-result b,.export-result strong{color:var(--ink)}.export-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.export-toast{height:0;opacity:0;font-size:9px;color:#24765d;font-weight:700;transition:.2s var(--ease)}.export-toast.show{height:18px;opacity:1;margin-top:9px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}
@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes slowSpinReverse{to{transform:rotate(-360deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes ticker{to{transform:translateX(-45%)}}@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}@keyframes miniSelect{0%,16%{left:8%;width:11%}25%,40%{left:24%;width:12%}49%,64%{left:41%;width:11%}73%,88%{left:74%;width:12%}100%{left:8%;width:11%}}@keyframes resizePulse{0%,100%{transform:rotate(8deg) scale(1)}50%{transform:rotate(8deg) scale(1.045)}}@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:1160px){.hero{grid-template-columns:1fr;min-height:0;padding-top:155px}.hero-copy{text-align:center}.product-kicker{justify-content:center}.hero h1,.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-meta{max-width:660px;margin-left:auto;margin-right:auto}.hero-visual{min-height:600px}.hero-mini-window{left:50%;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg)}.card-themes{right:5%}.card-files{left:7%}.nav-links{display:none}.menu-button{display:block;margin-left:4px}.header-actions{margin-left:auto}.nav-links.open{position:absolute;display:flex;flex-direction:column;align-items:stretch;top:72px;left:16px;right:16px;padding:9px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-soft);backdrop-filter:blur(20px)}.nav-links.open a{padding:12px}.studio-topbar{overflow-x:auto}.studio-left{min-width:265px}.family-switch{display:none}.studio-right{min-width:max-content}.studio-body{grid-template-columns:64px minmax(0,1fr) 215px}.canvas-toolbar .small-control.wide,.canvas-toolbar .bar-divider.small{display:none}.split-heading{grid-template-columns:1fr;gap:20px}.split-heading>p{max-width:700px}.theme-grid{grid-template-columns:repeat(2,1fr)}.library-stats{grid-template-columns:repeat(2,1fr)}.precision-bento{grid-template-columns:1fr;grid-template-areas:"resize" "background" "layers" "panorama"}.device-preview-panel{grid-template-columns:1fr}.device-copy{padding:38px}.duo-row{grid-template-columns:1fr}.workflow-grid{grid-template-columns:repeat(2,1fr)}.final-card{grid-template-columns:1fr}.final-content{padding:58px;text-align:center;align-items:center}.final-art{min-height:360px}.final-window.back{right:0}.final-window.mid{right:15%}.final-window.front{right:10%;top:175px}}
@media (max-width:820px){:root{--shell:min(100% - 28px,760px)}.section{padding:86px 0}.header-actions .mac-pill{display:none}.hero{padding-top:132px;gap:34px}.hero h1{font-size:clamp(46px,12vw,66px);letter-spacing:-3px}.hero-meta{grid-template-columns:repeat(2,1fr)}.hero-visual{min-height:470px}.hero-mini-window{width:760px;transform:translateX(-50%) scale(.72);transform-origin:top center;top:30px}.float-card{display:none}.studio-window{border-radius:16px}.studio-topbar{height:58px}.studio-body{grid-template-columns:56px 1fr}.inspector-panel{display:none}.tool-rail{padding:8px 5px}.tool-rail button{height:50px}.tool-rail button span{display:none}.canvas-surface{min-height:430px;padding:28px 18px}.page-strip{overflow-x:auto}.page-summary{display:none}.section-heading h2,.split-heading h2{font-size:clamp(38px,10vw,54px);letter-spacing:-2px}.browser-toolbar{height:auto;padding:13px;flex-wrap:wrap}.browser-filters{order:3;margin:0;width:100%}.browser-filters button{flex:1}.browser-count{margin-left:auto}.device-tabs{height:auto;grid-template-columns:repeat(2,1fr)}.device-tabs button{padding:16px 8px;border-bottom:1px solid var(--border)}.device-tabs button:nth-child(2){border-right:0}.duo-specs{grid-template-columns:1fr}.ledger-grid{grid-template-columns:1fr}.ledger-grid>div{border-right:0!important;grid-template-columns:28px 115px 1fr}.ledger-grid>div:nth-last-child(2){border-bottom:1px solid var(--border)}.final-content{padding:48px 28px}.final-card h2{font-size:37px}.final-window{width:390px}.footer-inner{flex-wrap:wrap;padding:24px 0}.footer-inner nav{width:100%;margin:0;justify-content:space-between}}
@media (max-width:580px){.site-header{top:8px}.header-inner{width:calc(100vw - 16px);height:58px;border-radius:15px}.brand span{font-size:17px}.brand img{width:34px;height:34px}.header-cta{display:none}.hero{padding-top:114px}.hero-copy{text-align:left}.product-kicker{justify-content:flex-start}.hero h1{font-size:47px;line-height:.98;letter-spacing:-2.4px}.hero-actions{justify-content:flex-start;flex-wrap:wrap}.hero-meta{margin-top:35px}.hero-visual{min-height:380px}.hero-mini-window{transform:translateX(-50%) scale(.55);top:10px}.trust-track{height:54px}.section{padding:72px 0}.section-heading h2,.split-heading h2{font-size:41px;line-height:1.02}.studio-caption{align-items:flex-start;gap:8px;flex-direction:column}.studio-caption p{line-height:1.4}.canvas-toolbar{overflow-x:auto}.panorama-pill{white-space:nowrap}.artboard{width:104%;}.pages button{width:50px}.library-stats{grid-template-columns:1fr}.theme-grid{grid-template-columns:1fr;padding:11px}.browser-title b{font-size:10px}.precision-card{padding:21px;min-height:0}.precision-card h3{font-size:27px}.resize-demo{height:225px}.background-preview{height:170px}.device-tabs{grid-template-columns:1fr 1fr}.device-tabs button{justify-content:flex-start;padding-left:18px}.device-copy{padding:28px 22px}.device-copy h3{font-size:29px}.device-gallery{min-height:390px;transform:scale(.92);margin:-15px}.duo-copy{padding:28px 22px}.duo-preview{padding:20px}.duo-frames{gap:16px}.workflow-grid{grid-template-columns:1fr}.workflow-card{min-height:220px}.workflow-icon{margin:25px 0 18px}.ledger-head{height:auto;padding:16px;flex-wrap:wrap;gap:8px}.ledger-head small{width:100%;margin:0}.ledger-grid>div{grid-template-columns:26px 100px 1fr;padding:13px 11px}.ledger-grid span{font-size:7.5px}.final-art{min-height:280px}.final-window{width:310px;height:130px!important}.final-window.back{top:25px}.final-window.mid{top:90px}.final-window.front{top:155px}.footer-inner nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.export-window{padding:18px}.export-result{align-items:flex-start;gap:8px;flex-direction:column}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-orbit,.float-card,.trust-track,.mini-canvas:after,.mini-selection,.resize-phone{animation:none!important}.reveal{opacity:1;transform:none;transition:none}.studio-window,.theme-card,.button,.device-card-art{transition:none}}
/* Contain decorative and internally scrollable UI so it never creates page-level horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden}
.trust-strip,.studio-window,.device-workbench,.final-card{contain:paint}
@supports (overflow:clip){html,body{overflow-x:clip}}
@media (max-width:580px){.hero-visual{overflow:hidden}.hero-mini-window{transform:translateX(-50%) scale(.50)}.hero-orbit{display:none}}


/* ===== Hero section rebuild ===== */
.hero-visual{min-height:660px}
.hero-aura{position:absolute;border-radius:50%;filter:blur(18px);pointer-events:none;opacity:.72}
.hero-aura-one{width:260px;height:260px;right:58px;top:68px;background:radial-gradient(circle,rgba(57,125,255,.18),transparent 68%)}
.hero-aura-two{width:220px;height:220px;left:40px;bottom:66px;background:radial-gradient(circle,rgba(121,91,255,.14),transparent 70%)}
.hero-mini-window.hero-studio-window{left:12px;top:58px;width:684px;border:1px solid rgba(196,214,238,.98);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.97));box-shadow:0 38px 95px rgba(20,43,84,.18),0 10px 28px rgba(57,125,255,.08);overflow:hidden;transform:rotateY(-9deg) rotateX(3deg);will-change:transform}
.hero-mini-window.hero-studio-window:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.48),transparent 22%);pointer-events:none}
.hero-studio-header{height:68px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid rgba(220,232,247,.9);background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(165%)}
.hero-studio-title{display:flex;flex-direction:column;gap:2px}.hero-studio-title span{font-size:8px;font-weight:800;letter-spacing:1.1px;color:var(--muted)}.hero-studio-title b{font-size:13px;letter-spacing:-.2px}
.hero-header-pills,.hero-header-actions{display:flex;align-items:center;gap:8px}.hero-header-pills span{font-size:9px;font-weight:720;color:var(--muted);padding:7px 10px;border-radius:999px;background:#f4f7ff;border:1px solid var(--border)}.hero-header-actions em{font-style:normal;font-size:9px;font-weight:700;color:#3b906c;padding:7px 10px;border-radius:999px;background:rgba(110,231,183,.12)}.hero-header-actions strong{font-size:10px;font-weight:760;color:#fff;padding:10px 14px;border-radius:10px;background:var(--gradient);box-shadow:0 10px 25px rgba(83,94,255,.23)}
.hero-studio-subbar{height:50px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(220,232,247,.9);background:linear-gradient(180deg,rgba(248,251,255,.98),rgba(244,248,255,.92))}
.hero-chip{font-size:8px;font-weight:760;letter-spacing:.45px;padding:8px 10px;border-radius:999px;color:var(--muted);border:1px solid var(--border);background:#fff}.hero-chip.primary{color:var(--purple);background:rgba(121,91,255,.08);border-color:rgba(121,91,255,.16)}.hero-chip.ghost{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hero-studio-body{display:grid;grid-template-columns:60px minmax(0,1fr) 186px;min-height:442px}
.hero-studio-rail{padding:12px 8px;background:rgba(255,255,255,.88);border-right:1px solid rgba(220,232,247,.9);display:flex;flex-direction:column;gap:10px}.hero-studio-rail button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:12px;color:var(--muted);cursor:default}.hero-studio-rail button b{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f5f8ff;border:1px solid var(--border);font-size:12px;font-weight:800}.hero-studio-rail button span{font-size:7px;font-weight:720}.hero-studio-rail button.active{background:rgba(121,91,255,.06);color:var(--ink)}.hero-studio-rail button.active b{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 12px 22px rgba(83,94,255,.18)}
.hero-stage-shell{background:linear-gradient(180deg,#eef6ff 0%,#eaf3ff 100%);display:flex;flex-direction:column}.hero-stage-topline{height:42px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid rgba(220,232,247,.9);background:rgba(255,255,255,.84)}.hero-stage-kicker{font-size:8px;font-weight:760;letter-spacing:.7px;color:var(--purple);text-transform:uppercase;padding:6px 8px;border-radius:999px;background:rgba(121,91,255,.08)}.hero-stage-pages{display:flex;gap:5px}.hero-stage-pages span{font-size:8px;font-weight:700;color:var(--muted);padding:6px 8px;border-radius:999px}.hero-stage-pages span.active{background:#fff;border:1px solid var(--border);color:var(--ink)}.hero-stage-zoom{margin-left:auto;font-size:8px;font-weight:740;color:var(--muted);padding:6px 8px;border-radius:8px;background:#fff;border:1px solid var(--border)}
.hero-stage-canvas{position:relative;flex:1;margin:18px 16px 14px;border-radius:18px;border:1px solid rgba(206,221,242,.96);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 38px rgba(46,76,120,.1);overflow:hidden}
.hero-canvas-grid,.hero-canvas-grid:before,.hero-canvas-grid:after{position:absolute;inset:0;content:""}.hero-canvas-grid{background-image:linear-gradient(rgba(131,155,194,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(131,155,194,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.5));pointer-events:none}
.hero-panorama-panels{position:absolute;left:46px;right:44px;top:30px;bottom:34px;display:grid;grid-template-columns:1.06fr 1fr 1.02fr .96fr;gap:0;overflow:hidden;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.58)}.hero-panorama-panels i:nth-child(1){background:linear-gradient(180deg,#eff2fc,#dfe6fb)}.hero-panorama-panels i:nth-child(2){background:linear-gradient(180deg,#dff1e4,#c8ebd2)}.hero-panorama-panels i:nth-child(3){background:linear-gradient(180deg,#eef2ff,#d7ddfb)}.hero-panorama-panels i:nth-child(4){background:linear-gradient(180deg,#f3f6ff,#dbe4ff)}.hero-panorama-panels i{position:relative}.hero-panorama-panels i+ i:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(121,91,255,.18)}
.hero-device{position:absolute;filter:drop-shadow(0 18px 24px rgba(30,55,100,.14))}.hero-device-frame{position:relative;width:72px;height:146px;padding:4px;border-radius:18px;background:#fdfefe;border:1px solid rgba(27,40,78,.16);box-shadow:inset 0 -2px 3px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.94)}.hero-device-frame:before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:34px;height:9px;border-radius:0 0 9px 9px;background:#121826;z-index:2}.hero-device-screen{height:100%;border-radius:14px;background:linear-gradient(180deg,#f5fbff,#edf5ff);position:relative;overflow:hidden}.hero-device-screen:before{content:"";position:absolute;left:8px;right:8px;top:16px;height:26px;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 7px 18px rgba(49,72,116,.08)}.hero-device-screen:after{content:"";position:absolute;left:8px;right:8px;bottom:12px;top:50px;border-radius:12px;background-image:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55)),linear-gradient(90deg,rgba(57,125,255,.1),rgba(121,91,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}.hero-device-screen.accent-a{background:linear-gradient(180deg,#f2f4ff,#dde8ff)}.hero-device-screen.accent-b{background:linear-gradient(180deg,#edf6ff,#d9f0df)}.hero-device-screen.accent-c{background:linear-gradient(180deg,#f4f5ff,#e2e8ff)}.hero-device-screen.accent-d{background:linear-gradient(180deg,#f6f9ff,#e8efff)}
.hero-device-left{left:70px;bottom:58px;transform:rotate(-7deg) scale(.96)}.hero-device-main{left:164px;bottom:52px;transform:scale(1.08)}.hero-device-right{left:270px;bottom:63px;transform:rotate(7deg) scale(.94)}.hero-device-far{right:74px;bottom:55px;transform:rotate(5deg) scale(.9);opacity:.94}
.hero-device-main .hero-device-frame{width:84px;height:168px}.hero-selection-outline{position:absolute;inset:-8px;border:1.6px solid rgba(121,91,255,.96);border-radius:22px;box-shadow:0 0 0 5px rgba(121,91,255,.08)}.hero-selection-outline i{position:absolute;width:8px;height:8px;border-radius:3px;border:1px solid rgba(121,91,255,.9);background:#fff}.hero-selection-outline i:nth-child(1){left:-4px;top:-4px}.hero-selection-outline i:nth-child(2){right:-4px;top:-4px}.hero-selection-outline i:nth-child(3){left:-4px;bottom:-4px}.hero-selection-outline i:nth-child(4){right:-4px;bottom:-4px}
.hero-floating-note{position:absolute;left:22px;bottom:16px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.82);border:1px solid rgba(220,232,247,.92);backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(45,71,116,.12)}.hero-floating-note span{display:block;font-size:7px;font-weight:800;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}.hero-floating-note b{display:block;font-size:9px;margin-top:4px}
.hero-stage-footer{height:56px;display:flex;align-items:center;gap:12px;padding:0 12px;border-top:1px solid rgba(220,232,247,.9);background:rgba(255,255,255,.86)}.hero-page-thumbs{display:flex;gap:6px}.hero-page-thumbs button{width:34px;height:30px;border:1px solid var(--border);border-radius:9px;background:#fff;display:grid;place-items:center;padding:0;position:relative}.hero-page-thumbs button span{font-size:8px;font-weight:760;color:var(--muted);position:relative;z-index:1}.hero-page-thumbs button i{position:absolute;inset:6px 9px auto 9px;height:7px;border-radius:99px;background:linear-gradient(90deg,rgba(57,125,255,.18),rgba(121,91,255,.22))}.hero-page-thumbs button.active{border-color:rgba(121,91,255,.36);background:rgba(121,91,255,.06)}.hero-page-thumbs button.active span{color:var(--purple)}.hero-footer-meta{display:flex;flex-direction:column;gap:3px;margin-left:auto}.hero-footer-meta b{font-size:9px}.hero-footer-meta span{font-size:7px;color:var(--muted)}
.hero-studio-inspector{padding:14px 12px;background:rgba(255,255,255,.92);border-left:1px solid rgba(220,232,247,.92)}.hero-inspector-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.hero-inspector-head span{font-size:7px;font-weight:800;letter-spacing:.85px;color:var(--muted)}.hero-inspector-head b{font-size:12px;letter-spacing:-.15px}.hero-inspector-group{margin-bottom:12px}.hero-inspector-group label{display:block;margin-bottom:6px;font-size:7px;font-weight:800;letter-spacing:.75px;color:var(--muted);text-transform:uppercase}.hero-field{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border:1px solid var(--border);border-radius:11px;background:#f8fbff;font-size:8px;font-weight:730}.hero-segmented{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:11px;overflow:hidden;background:#fff}.hero-segmented button{border:0;background:#fff;padding:9px 0;font-size:8px;font-weight:760;color:var(--muted)}.hero-segmented button+button{border-left:1px solid var(--border)}.hero-segmented button.active{background:var(--gradient);color:#fff}.hero-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.hero-label-row output{font-size:8px;font-weight:760;color:var(--ink)}.hero-slider{height:6px;border-radius:999px;background:rgba(201,217,238,.9);overflow:hidden}.hero-slider i{display:block;height:100%;border-radius:999px;background:var(--gradient)}.hero-inspector-card{padding:12px;border-radius:13px;background:linear-gradient(180deg,rgba(57,125,255,.06),rgba(121,91,255,.08));border:1px solid rgba(121,91,255,.12);margin:14px 0}.hero-inspector-card strong{display:block;font-size:9px;margin-bottom:5px}.hero-inspector-card small{display:block;font-size:8px;line-height:1.45;color:var(--muted)}.hero-action-button{width:100%;border:1px solid var(--border);background:#f8fbff;border-radius:11px;padding:11px 10px;font-size:8px;font-weight:760;color:var(--ink)}
.card-presets{right:44px;bottom:22px;animation-delay:-1.2s}.card-themes{right:-10px;top:30px}.card-files{left:-10px;bottom:26px}
@media (max-width:1160px){.hero-visual{min-height:645px}.hero-mini-window.hero-studio-window{left:50%;top:34px;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg)}.card-presets{right:8%}.card-themes{right:7%}.card-files{left:7%}}
@media (max-width:820px){.hero-visual{min-height:510px}.hero-mini-window.hero-studio-window{width:820px;top:18px;transform:translateX(-50%) scale(.69)}.hero-studio-inspector{width:182px}.hero-studio-rail button span,.hero-header-pills,.quick-actions,.card-presets{display:none}.hero-studio-header{grid-template-columns:auto minmax(0,1fr) auto}.hero-studio-body{grid-template-columns:56px minmax(0,1fr) 168px}.hero-device-main .hero-device-frame{width:78px;height:156px}.hero-device-frame{width:66px;height:134px}.hero-device-left{left:58px}.hero-device-main{left:150px}.hero-device-right{left:246px}.hero-device-far{right:62px}}
@media (max-width:580px){.hero-visual{min-height:420px;overflow:hidden}.hero-mini-window.hero-studio-window{width:820px;top:0;transform:translateX(-50%) scale(.48)}.hero-aura{display:none}.hero-stage-pages span:nth-child(n+3){display:none}.hero-chip:not(.primary):not(.ghost),.hero-footer-meta,.card-themes,.card-files{display:none}.hero-studio-subbar{padding:0 10px}.hero-studio-body{grid-template-columns:52px 1fr 150px}.hero-studio-inspector{padding:12px 10px}}
@media (prefers-reduced-motion:reduce){.hero-aura{display:none}}

/* ===== Real app hero recreation ===== */
.hero-real-visual{min-height:700px}
.real-app-window{position:absolute;left:10px;top:56px;width:720px;max-width:100%;transform:rotateY(-7deg) rotateX(2.4deg);transform-style:preserve-3d;transition:transform .3s var(--ease);filter:drop-shadow(0 36px 70px rgba(18,35,72,.16))}
.real-app-frame{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(207,219,238,.96);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.96));box-shadow:0 16px 34px rgba(255,255,255,.68) inset,0 0 0 1px rgba(255,255,255,.75) inset}
.real-app-image{display:block;width:100%;height:auto}
.real-app-sheen{position:absolute;inset:0;background:linear-gradient(112deg,transparent 24%,rgba(255,255,255,.05) 36%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.04) 64%,transparent 78%);transform:translateX(-115%);animation:heroSheen 7s ease-in-out infinite;pointer-events:none}
.real-app-glow{position:absolute;border-radius:999px;filter:blur(22px);opacity:.48;pointer-events:none}.glow-main{width:200px;height:120px;left:145px;bottom:120px;background:rgba(108,145,255,.24)}.glow-side{width:170px;height:120px;right:36px;top:210px;background:rgba(191,77,217,.16)}
.ui-hotspot{position:absolute;border:1.5px solid rgba(121,91,255,.92);border-radius:13px;box-shadow:0 0 0 6px rgba(121,91,255,.08),0 12px 24px rgba(69,81,185,.12);animation:heroPulse 3.8s ease-in-out infinite;pointer-events:none}.ui-hotspot span{position:absolute;left:0;bottom:calc(100% + 8px);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid rgba(220,232,247,.96);box-shadow:0 10px 22px rgba(40,61,104,.1);font-size:9px;font-weight:780;letter-spacing:.25px;color:var(--ink);white-space:nowrap}
.hotspot-panorama{left:58px;top:82px;width:214px;height:31px;animation-delay:0s}.hotspot-family{left:275px;top:16px;width:150px;height:33px;animation-delay:.65s}.hotspot-canvas{left:57px;top:164px;width:501px;height:208px;animation-delay:1.3s}.hotspot-inspector{right:16px;top:132px;width:136px;height:274px;animation-delay:1.95s}.hotspot-export{right:12px;top:16px;width:89px;height:34px;animation-delay:2.4s}
.hotspot-inspector span,.hotspot-export span{left:auto;right:0}
.focus-ring{position:absolute;border:2px solid rgba(255,255,255,.72);border-radius:50%;pointer-events:none;mix-blend-mode:screen}.ring-one{width:90px;height:90px;left:164px;bottom:72px;animation:heroRing 4.8s ease-out infinite}.ring-two{width:82px;height:82px;left:422px;bottom:84px;animation:heroRing 4.8s ease-out 1.2s infinite}.ring-three{width:78px;height:78px;right:75px;bottom:58px;animation:heroRing 4.8s ease-out 2.4s infinite}
.hero-real-visual .card-themes{right:-10px;top:28px}.hero-real-visual .card-files{left:-6px;bottom:26px}.hero-real-visual .card-presets{right:32px;bottom:24px}
.hero-real-visual .float-card{padding:13px 15px;border-radius:15px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
.hero-real-visual .float-card>span{font-size:10px}

@keyframes heroSheen{0%,15%{transform:translateX(-115%)}45%{transform:translateX(115%)}100%{transform:translateX(115%)}}
@keyframes heroPulse{0%,100%{opacity:.76;transform:scale(1)}50%{opacity:1;transform:scale(1.01)}}
@keyframes heroRing{0%{opacity:0;transform:scale(.72)}18%{opacity:.5}80%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}

@media (max-width:1160px){
  .hero-real-visual{min-height:650px}
  .real-app-window{left:50%;top:34px;width:760px;transform:translateX(-50%) rotateY(-4.5deg) rotateX(1.8deg)}
  .hero-real-visual .card-themes{right:5%}
  .hero-real-visual .card-files{left:6%}
  .hero-real-visual .card-presets{right:14%;bottom:10px}
}
@media (max-width:820px){
  .hero-real-visual{min-height:470px}
  .real-app-window{width:880px;top:16px;transform:translateX(-50%) scale(.72)}
  .hero-real-visual .card-presets,.hero-real-visual .card-themes,.hero-real-visual .card-files{display:none}
  .ui-hotspot span{font-size:8px;padding:6px 9px}
}
@media (max-width:580px){
  .hero-real-visual{min-height:370px;overflow:hidden}
  .real-app-window{width:920px;top:2px;transform:translateX(-50%) scale(.49)}
  .ui-hotspot span,.focus-ring,.hero-aura{display:none}
  .ui-hotspot{box-shadow:0 0 0 4px rgba(121,91,255,.08)}
}
@media (prefers-reduced-motion:reduce){
  .real-app-sheen,.ui-hotspot,.focus-ring{animation:none}
}

/* ===== Faithful hero workspace ===== */
.hero-faithful-visual{min-height:720px}
.hero-workspace-demo{position:absolute;left:0;top:48px;width:760px;border:1px solid #dbe5f3;border-radius:18px;background:#fbfbfe;box-shadow:0 38px 85px rgba(24,46,88,.16);overflow:hidden;transform:rotateY(-6deg) rotateX(2deg);transform-style:preserve-3d;transition:transform .3s var(--ease)}
.hw-topbar{height:56px;display:grid;grid-template-columns:214px 1fr auto;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid #e1e8f4;background:#fdfdff}
.hw-top-left{display:flex;align-items:center;gap:10px;min-width:0}.hw-icon-btn,.hw-pill-icon{width:30px;height:30px;border-radius:9px;border:1px solid #e2e8f5;background:#f7f4ff;color:#382d4b;display:grid;place-items:center;font-weight:800}.hw-brand-pill{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7d61ff,#a657e8);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}.hw-title-block{display:flex;flex-direction:column;line-height:1.05}.hw-title-block span{font-size:7px;letter-spacing:1px;font-weight:800;color:#7f7796}.hw-title-block b{margin-top:4px;font-size:12px;letter-spacing:-.1px}
.hw-family-tabs{display:flex;align-items:center;justify-content:center;gap:10px}.hw-family-tabs button{height:34px;padding:0 14px;border-radius:10px;border:1px solid #dddff0;background:#f5f1ff;color:#2f2640;font-size:11px;font-weight:760}.hw-family-tabs button.active{background:#8a5bff;color:#fff;border-color:#8a5bff;box-shadow:0 8px 18px rgba(138,91,255,.2)}
.hw-top-right{display:flex;align-items:center;gap:10px}.hw-status{font-size:9px;font-weight:700;color:#8f88a7;min-width:54px;text-align:right}.hw-pill-btn{height:34px;padding:0 14px;border-radius:10px;border:1px solid #e2ddf0;background:#f6f2fe;color:#2f2640;font-size:11px;font-weight:760}.hw-pill-btn.primary{background:#8a5bff;color:#fff;border-color:#8a5bff}.hw-pill-btn.export{padding-inline:16px}.hw-pill-btn.light{height:32px;background:#f7f4ff}.hw-pill-icon.small{width:32px;height:32px}
.hw-toolbar{height:54px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 14px;border-bottom:1px solid #e1e8f4;background:#fcfbff}.hw-toolbar-left{display:flex;align-items:center;gap:14px}.hw-kicker{font-size:8px;font-weight:820;letter-spacing:.8px;color:#aa62f0;background:#f8f1ff;border:1px solid #eadcfb;padding:8px 10px;border-radius:9px}.hw-kicker em{font-style:normal}.hw-toolbar-left code{font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6f6b7a}.hw-toolbar-center{display:flex;align-items:center;gap:10px}.hw-screen-pill{height:34px;padding:0 14px;border-radius:10px;border:1px solid #e2ddf0;background:#fff;color:#2f2640;font-size:11px;font-weight:760}.hw-screen-pill.zoom{min-width:62px}
.hw-body{display:grid;grid-template-columns:76px 1fr 315px;min-height:470px;background:#f7f9ff}
.hw-sidebar{border-right:1px solid #e1e8f4;background:#fcfcff;padding:10px 6px;display:flex;flex-direction:column;gap:8px}.hw-sidebar button{border:0;background:transparent;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#37304d}.hw-sidebar button b{font-size:14px;font-weight:750}.hw-sidebar button span{font-size:10px;font-weight:700}.hw-sidebar button.active{background:#f4f0ff}
.hw-canvas-area{position:relative;padding:0;background:#eef3fb}.hw-canvas-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 28px;background:linear-gradient(180deg,#f2f6fd,#edf3fb)}
.hw-panorama{display:grid;grid-template-columns:repeat(6,1fr);width:100%;max-width:760px;height:380px;border:1px solid #cdd8e8;border-radius:18px;overflow:hidden;background:#f6f8fd;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.hw-slide{position:relative;padding:14px 12px 0;border-right:2px solid rgba(41,45,54,.35);background:#f7f9fd;transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}.hw-slide:last-child{border-right:0}.hw-slide.active{background:#fbfcff;box-shadow:inset 0 0 0 2px rgba(171,116,255,.65);z-index:2}.hw-slide.active .hw-phone{transform:translateY(-2px) scale(1.03)}
.hw-slide-kicker{display:block;text-align:center;font-size:5.7px;letter-spacing:1.1px;font-weight:820;color:#7e7a89;margin-bottom:8px}.hw-slide h4{margin:0;text-align:center;font-size:16px;line-height:1.03;letter-spacing:-.6px}.hw-slide p{margin:12px 0 0;text-align:center;font-size:7px;line-height:1.45;color:#656f83}.hw-slide h4,.hw-slide p{font-family:Georgia,'Times New Roman',serif}.hw-slide:before{content:"";position:absolute;left:14px;right:14px;top:28px;height:1px;background:#cfd4dc}
.hw-arch{position:absolute;left:14px;right:14px;bottom:46px;height:128px;border:2px solid #5b87db;border-bottom:0;border-top-left-radius:999px;border-top-right-radius:999px;background:linear-gradient(180deg,#d5e4ff,#bfd2fb);box-shadow:inset 0 0 0 4px rgba(108,143,219,.18)}.hw-arch:before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:0;border:1.6px solid rgba(108,143,219,.46);border-bottom:0;border-top-left-radius:999px;border-top-right-radius:999px}.hw-arch.wide{left:8px;right:8px}.hw-arch.short{left:28px;right:28px;height:108px}
.hw-phone{position:absolute;left:50%;bottom:54px;width:64px;height:136px;transform:translateX(-50%);background:#fff;border-radius:13px;border:1px solid #e7eaf2;box-shadow:0 10px 22px rgba(91,108,147,.16);transition:transform .25s var(--ease)}.hw-phone:before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:28px;height:7px;background:#eaeff8;border-radius:99px}.hw-phone i{position:absolute;left:9px;right:9px;height:10px;border-radius:6px;background:#eef2f7}.hw-phone i:nth-child(1){top:24px;background:#5e85da;width:24px;right:auto}.hw-phone i:nth-child(2){top:42px;height:18px}.hw-phone i:nth-child(3){top:66px}.hw-phone i:nth-child(4){top:84px}.hw-phone.mini{position:relative;left:auto;bottom:auto;width:52px;height:114px;transform:none}.hw-phone.small{width:58px;height:125px}.hw-phone.tilt-left{transform:translateX(-50%) rotate(-7deg)}.hw-phone.tilt-right{transform:translateX(-50%) rotate(6deg)}
.hw-duo{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);display:flex;gap:12px;align-items:flex-end}.hw-duo .hw-phone.tilt-left{transform:rotate(-7deg)}.hw-duo .hw-phone.tilt-right{transform:rotate(6deg)}
.hw-laurel{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);font-size:7px;font-weight:800;text-align:center;color:#4d73c5}.hw-laurel:before,.hw-laurel:after{content:"❦";position:absolute;top:4px;font-size:18px;color:#4d73c5}.hw-laurel:before{left:-26px}.hw-laurel:after{right:-26px;transform:scaleX(-1)}.hw-laurel span{display:block;margin-top:6px;font-size:10px;line-height:1.1;color:#26314c}
.hw-inspector{border-left:1px solid #e1e8f4;background:#fbfbfe;padding:18px 14px 16px}.hw-inspector h3{margin:0 0 18px;font-size:17px}.hw-inspector section+section{margin-top:16px;padding-top:16px;border-top:1px solid #e8ecf4}.hw-inspector label{display:block;font-size:8px;font-weight:820;letter-spacing:1.2px;color:#7f769b;margin-bottom:10px}.hw-select{height:34px;border:1px solid #dfdeeb;border-radius:9px;background:#fff;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:720;color:#2f2640}.hw-select.dual span:first-child{margin-right:10px}.hw-inspector small,.hw-inspector p{display:block;margin:10px 0 0;font-size:9px;line-height:1.45;color:#7e7795}.hw-color-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:11px;color:#766f8b}.hw-color-row i{width:34px;height:24px;border-radius:6px;border:1px solid #ddd;background:#fff}.hw-color-row i.light{background:#f1f5fc}.hw-range-label{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11px;color:#766f8b}.hw-range{position:relative;height:4px;border-radius:999px;background:#e6e0f0;margin-top:12px}.hw-range i{position:absolute;left:0;top:0;bottom:0;width:10%;background:#b44ad7;border-radius:999px}.hw-range u{position:absolute;top:50%;left:10%;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #d2c8e7;transform:translate(-50%,-50%);box-shadow:0 5px 12px rgba(77,62,114,.14);text-decoration:none}.hw-ghost-btn{margin-top:12px;height:34px;padding:0 12px;border-radius:10px;border:1px solid #e2dbef;background:#f6f1fe;color:#392f4d;font-size:11px;font-weight:740}.hw-inspector strong{display:block;font-size:12px;color:#2f2640}.hw-check{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#392f4d}.hw-check i{width:16px;height:16px;border-radius:4px;border:1px solid #ddd;background:#fff}.hw-inspector-actions{display:flex;gap:10px;margin-top:12px}.hw-inspector-actions button{height:32px;padding:0 12px;border-radius:10px;border:1px solid #e2dbef;background:#f6f1fe;color:#392f4d;font-size:11px;font-weight:740}
.hero-faithful-visual .card-themes{right:-12px;top:16px}.hero-faithful-visual .card-files{left:10px;bottom:26px}
[data-hw-panorama].animating .hw-slide.active{animation:hwSlidePulse 1.8s ease}
[data-hw-save].saved{color:#3e9d6f}

@keyframes hwSlidePulse{0%{box-shadow:inset 0 0 0 2px rgba(171,116,255,.25)}45%{box-shadow:inset 0 0 0 3px rgba(171,116,255,.78),0 0 0 8px rgba(171,116,255,.09)}100%{box-shadow:inset 0 0 0 2px rgba(171,116,255,.65)}}

@media (max-width:1160px){
  .hero-faithful-visual{min-height:690px}
  .hero-workspace-demo{left:50%;top:26px;transform:translateX(-50%) rotateY(-3deg) rotateX(1.5deg)}
  .hero-faithful-visual .card-themes{right:6%}
  .hero-faithful-visual .card-files{left:7%}
}
@media (max-width:820px){
  .hero-faithful-visual{min-height:500px}
  .hero-workspace-demo{width:920px;top:14px;transform:translateX(-50%) scale(.73)}
  .hero-faithful-visual .card-themes,.hero-faithful-visual .card-files{display:none}
}
@media (max-width:580px){
  .hero-faithful-visual{min-height:385px;overflow:hidden}
  .hero-workspace-demo{width:940px;top:2px;transform:translateX(-50%) scale(.51)}
  .hero-aura{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-hw-panorama].animating .hw-slide.active{animation:none}
}

/* ===== Exact app screenshot hero (authoritative) ===== */
.hero.shell{width:min(1380px,calc(100vw - 72px));grid-template-columns:minmax(440px,.82fr) minmax(650px,1.18fr);gap:48px}
.hero-exact-visual{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;perspective:none;padding:20px 0 10px;isolation:isolate}
.hero-exact-glow{position:absolute;z-index:-1;width:94%;aspect-ratio:1.55;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:44%;background:radial-gradient(circle at 48% 48%,rgba(93,122,255,.15),rgba(121,91,255,.055) 46%,transparent 72%);filter:blur(18px);pointer-events:none}
.hero-exact-shot{position:relative;width:min(100%,820px);aspect-ratio:8/5;margin:0;border:1px solid rgba(204,218,238,.95);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 34px 82px rgba(24,49,91,.18),0 8px 22px rgba(57,125,255,.08);animation:heroExactEnter .8s var(--ease) both;transform-origin:center center}
.hero-exact-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.hero-exact-shot:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.86);pointer-events:none}
.hero-shot-note{position:absolute;left:-6px;bottom:-10px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:1px;align-items:center;padding:11px 13px;border:1px solid rgba(215,229,246,.96);border-radius:13px;background:rgba(255,255,255,.92);box-shadow:0 13px 32px rgba(31,59,104,.1);backdrop-filter:blur(14px)}
.hero-shot-note .status-dot{grid-row:1/3;margin-left:1px}.hero-shot-note b{font-size:9.5px}.hero-shot-note small{font-size:7px;color:var(--muted);font-weight:650}
.hero-demo-pointer{position:absolute;z-index:4;left:64.5%;top:4.8%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #795BFF;box-shadow:0 3px 10px rgba(48,52,101,.25);animation:heroProductTour 11s var(--ease) infinite;pointer-events:none}
.hero-demo-pointer:before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border:1.5px solid rgba(121,91,255,.45);border-radius:50%;transform:translate(-50%,-50%) scale(.35);opacity:0;animation:heroPointerPulse 11s ease-in-out infinite}
.hero-demo-pointer i{position:absolute;width:5px;height:5px;border-radius:50%;left:2px;top:2px;background:#795BFF}
@keyframes heroExactEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes heroProductTour{
  0%,12%{left:64.5%;top:4.8%}
  18%,31%{left:54.5%;top:9.1%}
  38%,52%{left:29.5%;top:58%}
  59%,74%{left:91.5%;top:47.4%}
  82%,100%{left:96%;top:4.8%}
}
@keyframes heroPointerPulse{
  0%,7%,18%,25%,38%,45%,59%,66%,82%,89%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  10%,21%,41%,62%,85%{opacity:.82;transform:translate(-50%,-50%) scale(1)}
  13%,24%,44%,65%,88%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}
}
@media (max-width:1280px){
  .hero.shell{width:min(1220px,calc(100vw - 48px));grid-template-columns:.84fr 1.16fr;gap:42px}
  .hero-exact-shot{width:100%}
}
@media (max-width:1160px){
  .hero.shell{grid-template-columns:1fr;width:var(--shell);gap:46px}
  .hero-exact-visual{min-height:0;padding:8px 0 28px}
  .hero-exact-shot{width:min(900px,100%)}
  .hero-shot-note{left:4%;bottom:4px}
}
@media (max-width:820px){
  .hero-exact-visual{min-height:0;padding:0 0 22px}
  .hero-exact-shot{width:100%;border-radius:16px}
  .hero-shot-note{display:none}
  .hero-demo-pointer{width:11px;height:11px}
}
@media (max-width:580px){
  .hero-exact-visual{min-height:0;overflow:visible;padding:0 0 12px}
  .hero-exact-shot{width:100%;border-radius:13px;box-shadow:0 20px 46px rgba(24,49,91,.14)}
  .hero-demo-pointer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-exact-shot,.hero-demo-pointer,.hero-demo-pointer:before{animation:none!important}
}

/* ===== Final hero cleanup / exact screenshot sizing ===== */
.hero.shell{width:min(1420px,calc(100vw - 56px));grid-template-columns:minmax(500px,.78fr) minmax(760px,1.22fr);gap:36px;min-height:880px}
.hero-exact-visual{position:relative;min-width:0;min-height:560px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible}
.hero-exact-shot{width:min(100%,860px);height:auto;aspect-ratio:8/5;border-radius:18px;overflow:hidden;margin:0;background:#fff;border:1px solid rgba(202,216,236,.98);box-shadow:0 34px 82px rgba(23,48,90,.17),0 8px 24px rgba(74,96,160,.07);transform:none}
.hero-exact-shot img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;background:#fff}
.hero-shot-caption{margin-top:13px;display:flex;align-items:center;gap:8px;font-size:9px;font-weight:720;color:var(--muted)}
.hero-shot-caption .status-dot{width:6px;height:6px;box-shadow:0 0 0 4px rgba(34,197,94,.08)}
.hero-exact-glow{width:100%;max-width:900px;aspect-ratio:1.6;opacity:.9}
@media (max-width:1380px){
  .hero.shell{width:min(1280px,calc(100vw - 48px));grid-template-columns:minmax(450px,.82fr) minmax(650px,1.18fr);gap:34px}
  .hero-exact-shot{width:min(100%,800px)}
}
@media (max-width:1160px){
  .hero.shell{width:var(--shell);grid-template-columns:1fr;min-height:0;gap:42px}
  .hero-exact-visual{min-height:0}
  .hero-exact-shot{width:min(940px,100%)}
}
@media (max-width:820px){
  .hero-exact-shot{width:100%;border-radius:15px}
  .hero-shot-caption{font-size:8px}
}
@media (max-width:580px){
  .hero-exact-shot{border-radius:12px}
  .hero-shot-caption{display:none}
}

/* ===== Hero update: exact library screenshot with relevant animation ===== */
.hero-library-visual .hero-exact-glow{background:radial-gradient(circle at 42% 38%,rgba(82,118,255,.18),rgba(153,89,255,.08) 52%,transparent 74%)}
.hero-library-shot{position:relative;animation:heroLibraryFloat 8s ease-in-out infinite}
.hero-library-shot img{object-fit:contain;object-position:center center}
.hero-library-pointer{left:17.5%;top:17.6%;animation:heroLibraryTour 14s cubic-bezier(.22,.61,.36,1) infinite}
.hero-library-pointer:before{animation:heroLibraryPointerPulse 14s ease-in-out infinite}
.hero-hotspot{position:absolute;border:1.5px solid rgba(121,91,255,.72);border-radius:14px;box-shadow:0 0 0 6px rgba(121,91,255,.08),0 12px 28px rgba(53,73,129,.08);background:linear-gradient(180deg,rgba(121,91,255,.05),rgba(121,91,255,.02));opacity:.25;animation:heroHotspotPulse 14s ease-in-out infinite;pointer-events:none}
.hero-hotspot span{position:absolute;left:12px;bottom:calc(100% + 8px);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid rgba(216,227,244,.96);font-size:9px;font-weight:760;color:var(--ink);line-height:1;box-shadow:0 10px 24px rgba(35,58,100,.08);white-space:nowrap}
.hero-hotspot.hs-search{left:17%;top:1.8%;width:56%;height:5.3%;animation-delay:0s}
.hero-hotspot.hs-banner{left:16.9%;top:7.3%;width:61.2%;height:34.4%;animation-delay:3.2s}
.hero-hotspot.hs-grid{left:16.8%;top:61%;width:81%;height:32.6%;animation-delay:7.1s}
.hero-hotspot.hs-cta{left:89.7%;top:1.9%;width:8%;height:4.9%;animation-delay:10.6s}
.hero-hotspot.hs-cta span{left:auto;right:0}
.hero-library-visual .hero-shot-caption .status-dot{background:#795BFF;box-shadow:0 0 0 4px rgba(121,91,255,.09)}

@keyframes heroLibraryFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes heroLibraryTour{
  0%,10%{left:17.5%;top:17.6%}
  16%,28%{left:47%;top:3.8%}
  34%,48%{left:44%;top:24%}
  56%,72%{left:77%;top:18%}
  79%,91%{left:66%;top:74%}
  100%{left:17.5%;top:17.6%}
}
@keyframes heroLibraryPointerPulse{
  0%,7%,16%,23%,34%,41%,56%,63%,79%,86%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  10%,20%,38%,60%,82%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  13%,26%,45%,67%,89%{opacity:0;transform:translate(-50%,-50%) scale(1.48)}
}
@keyframes heroHotspotPulse{
  0%,100%{opacity:.18;transform:scale(1)}
  12%,26%,40%,54%,68%,82%{opacity:.22;transform:scale(1)}
  18%,46%,74%,90%{opacity:.88;transform:scale(1.005)}
}
@media (max-width:820px){
  .hero-hotspot span{font-size:8px;padding:7px 9px}
}
@media (max-width:580px){
  .hero-library-shot{animation:none}
  .hero-hotspot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-library-shot,.hero-library-pointer,.hero-library-pointer:before,.hero-hotspot{animation:none!important}
}

/* ===== Workspace section: exact app screenshot (authoritative) ===== */
.workspace-screenshot-wrap{position:relative;margin-top:42px}
.workspace-shot-shell{position:relative;width:100%}
.workspace-shot-glow{position:absolute;left:6%;right:6%;top:9%;bottom:0;border-radius:40px;background:radial-gradient(circle at 42% 28%,rgba(57,125,255,.14),rgba(121,91,255,.08) 48%,transparent 76%);filter:blur(28px);pointer-events:none}
.workspace-shot-frame{position:relative;width:100%;aspect-ratio:8/5;margin:0;overflow:hidden;border:1px solid rgba(198,214,237,.98);border-radius:24px;background:#fff;box-shadow:0 36px 90px rgba(25,48,91,.16),0 10px 28px rgba(75,95,150,.07);isolation:isolate}
.workspace-shot-frame>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.workspace-shot-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);pointer-events:none;z-index:10}

.workspace-tour-focus{position:absolute;z-index:3;border:2px solid rgba(121,91,255,.78);border-radius:14px;background:rgba(121,91,255,.04);box-shadow:0 0 0 0 rgba(121,91,255,0);opacity:0;pointer-events:none}
.focus-library{left:16.8%;top:7.1%;width:61.1%;height:34.8%;animation:workspaceFocusLibrary 14s ease-in-out infinite}
.focus-filters{left:16.8%;top:42%;width:81%;height:15.7%;animation:workspaceFocusFilters 14s ease-in-out infinite}
.focus-card{left:37.7%;top:65.5%;width:18.8%;height:31%;animation:workspaceFocusCard 14s ease-in-out infinite}
.focus-project{left:89.6%;top:1.8%;width:8.8%;height:4.8%;animation:workspaceFocusProject 14s ease-in-out infinite}

.workspace-tour-cursor{position:absolute;z-index:5;left:32%;top:20%;width:24px;height:30px;pointer-events:none;animation:workspaceCursorTour 14s cubic-bezier(.22,.61,.36,1) infinite;filter:drop-shadow(0 4px 8px rgba(30,35,70,.18))}
.cursor-arrow{display:block;width:0;height:0;border-top:15px solid #fff;border-right:9px solid transparent;transform:rotate(-22deg);filter:drop-shadow(0 0 0 #3b3151)}
.cursor-arrow:after{content:"";position:absolute;left:-1px;top:-15px;width:2px;height:17px;background:#3b3151;transform:rotate(22deg);transform-origin:top left}
.cursor-pulse{position:absolute;left:1px;top:1px;width:18px;height:18px;border:2px solid rgba(121,91,255,.72);border-radius:50%;opacity:0;transform:scale(.4);animation:workspaceCursorPulse 14s ease-out infinite}

.workspace-shot-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:0 4px;color:var(--muted)}
.workspace-shot-caption>div{display:flex;align-items:center;gap:9px;white-space:nowrap}
.workspace-shot-caption b{font-size:10px;color:var(--ink)}
.workspace-shot-caption p{max-width:680px;margin:0;text-align:right;font-size:10px;line-height:1.5}

@keyframes workspaceFocusLibrary{
  0%,8%,27%,100%{opacity:0;box-shadow:0 0 0 0 rgba(121,91,255,0)}
  11%,23%{opacity:1;box-shadow:0 0 0 7px rgba(121,91,255,.09)}
}
@keyframes workspaceFocusFilters{
  0%,29%,51%,100%{opacity:0;box-shadow:0 0 0 0 rgba(121,91,255,0)}
  33%,47%{opacity:1;box-shadow:0 0 0 7px rgba(121,91,255,.09)}
}
@keyframes workspaceFocusCard{
  0%,53%,76%,100%{opacity:0;box-shadow:0 0 0 0 rgba(121,91,255,0)}
  57%,72%{opacity:1;box-shadow:0 0 0 7px rgba(121,91,255,.09)}
}
@keyframes workspaceFocusProject{
  0%,78%,97%,100%{opacity:0;box-shadow:0 0 0 0 rgba(121,91,255,0)}
  82%,93%{opacity:1;box-shadow:0 0 0 7px rgba(121,91,255,.09)}
}
@keyframes workspaceCursorTour{
  0%,7%{left:31%;top:20%}
  12%,23%{left:46%;top:22%}
  29%,33%{left:37%;top:48%}
  39%,49%{left:58%;top:49%}
  55%,59%{left:46%;top:78%}
  64%,73%{left:48%;top:91%}
  80%,84%{left:92%;top:4%}
  89%,96%{left:94%;top:3.7%}
  100%{left:31%;top:20%}
}
@keyframes workspaceCursorPulse{
  0%,10%,15%,31%,36%,57%,62%,82%,87%,100%{opacity:0;transform:scale(.4)}
  12%,33%,59%,84%{opacity:.9;transform:scale(1)}
  14%,35%,61%,86%{opacity:0;transform:scale(1.65)}
}

@media (max-width:820px){
  .workspace-screenshot-wrap{margin-top:28px}
  .workspace-shot-frame{border-radius:18px}
  .workspace-shot-caption{align-items:flex-start;flex-direction:column;gap:7px}
  .workspace-shot-caption p{text-align:left}
}
@media (max-width:580px){
  .workspace-shot-frame{border-radius:13px;box-shadow:0 22px 52px rgba(25,48,91,.13)}
  .workspace-tour-focus,.workspace-tour-cursor{display:none}
  .workspace-shot-caption{margin-top:10px}
  .workspace-shot-caption p{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .workspace-tour-focus,.workspace-tour-cursor,.cursor-pulse{animation:none!important}
  .workspace-tour-focus{opacity:0!important}
}

/* --------------------------------------------------------------------------
   Device story — rebuilt visual system
   -------------------------------------------------------------------------- */
.device-workbench{
  border-color:rgba(189,207,232,.9);
  box-shadow:0 34px 90px rgba(37,68,116,.13);
}
.device-tabs{
  height:88px;
  background:rgba(250,252,255,.94);
}
.device-tabs button{
  position:relative;
  overflow:hidden;
  background:transparent;
}
.device-tabs button:before{
  content:"";
  position:absolute;
  inset:auto 18px 0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:var(--gradient);
  transform:scaleX(0);
  transition:transform .26s var(--ease);
}
.device-tabs button.active{
  background:linear-gradient(180deg,#fff 0%,rgba(244,248,255,.95) 100%);
  box-shadow:none;
}
.device-tabs button.active:before{transform:scaleX(1)}
.device-tabs button>span{
  position:relative;
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:0;
  background:#f4f7fd;
  border:1px solid rgba(204,217,236,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.device-tabs button>span:before,
.device-tabs button>span:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1.6px solid currentColor;
  color:#6f7ba3;
  transition:.25s var(--ease);
}
.device-tabs button:nth-child(1)>span:before{width:11px;height:21px;border-radius:4px}
.device-tabs button:nth-child(1)>span:after{width:4px;height:1px;border-width:1px 0 0;top:70%}
.device-tabs button:nth-child(2)>span:before{width:18px;height:23px;border-radius:4px}
.device-tabs button:nth-child(2)>span:after{width:1px;height:1px;border-radius:50%;top:75%}
.device-tabs button:nth-child(3)>span:before{width:12px;height:22px;border-radius:5px}
.device-tabs button:nth-child(3)>span:after{width:3px;height:3px;border-radius:50%;top:34%;background:currentColor}
.device-tabs button:nth-child(4)>span:before{width:20px;height:16px;border-radius:4px}
.device-tabs button:nth-child(4)>span:after{width:1px;height:1px;border-radius:50%;left:79%}
.device-tabs button.active>span{
  color:#fff;
  background:linear-gradient(145deg,#397dff,#795bff);
  border-color:transparent;
  box-shadow:0 10px 22px rgba(80,95,255,.23),inset 0 1px 0 rgba(255,255,255,.24);
}
.device-tabs button.active>span:before,
.device-tabs button.active>span:after{color:#fff}
.device-tabs b{font-size:10.5px;letter-spacing:-.08px}
.device-tabs small{font-size:7.4px;margin-top:1px}

.device-preview-panel{grid-template-columns:.76fr 1.24fr;min-height:520px}
.device-copy{padding:58px 52px 54px}
.device-copy>span{display:inline-flex;align-items:center;gap:7px}
.device-copy>span:before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#397dff,#795bff);box-shadow:0 0 0 4px rgba(121,91,255,.08)}
.device-copy h3{font-size:36px;line-height:1.055;letter-spacing:-1.8px;margin:16px 0 14px}
.device-copy>p{font-size:12.8px;line-height:1.66;max-width:440px}
.preset-list{margin-top:23px;gap:7px}
.preset-list button{padding:8px 10px;border-radius:9px;background:#f7f9fd;border-color:#dfe8f5;transition:.2s var(--ease)}
.preset-list button:hover{transform:translateY(-1px);border-color:#c8d7ed;color:var(--ink)}
.preset-list button.active{box-shadow:0 8px 18px rgba(84,91,255,.16)}
.device-points{margin-top:27px;gap:10px}
.device-points i{width:20px;height:20px;border-radius:7px}
.device-points span{font-size:9.4px}

.device-gallery{
  position:relative;
  min-height:520px;
  isolation:isolate;
  display:block;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 18%,rgba(118,91,255,.34),transparent 28%),
    radial-gradient(circle at 20% 76%,rgba(57,125,255,.24),transparent 29%),
    linear-gradient(145deg,#111733 0%,#0d1230 47%,#131735 100%);
  border-left:1px solid rgba(220,232,247,.9);
}
.device-gallery:before,.device-gallery:after{display:none}
.device-stage-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%);
}
.device-stage-glow{position:absolute;border-radius:50%;filter:blur(18px);opacity:.68;pointer-events:none;z-index:-1}
.device-stage-glow.glow-a{width:250px;height:250px;right:-70px;top:-70px;background:rgba(121,91,255,.24)}
.device-stage-glow.glow-b{width:240px;height:240px;left:22%;bottom:-125px;background:rgba(57,125,255,.18)}
.device-project-source{
  position:absolute;
  left:28px;
  top:28px;
  width:290px;
  height:92px;
  padding:12px 13px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(2,8,31,.24),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.project-source-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#fff}
.project-source-head div{display:flex;align-items:baseline;gap:7px}
.project-source-head span{font-size:6.5px;font-weight:850;letter-spacing:1px;color:rgba(213,222,255,.7)}
.project-source-head b{font-size:9px;letter-spacing:-.1px}
.project-source-head small{font-size:6.5px;color:rgba(219,227,255,.66)}
.project-source-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;height:43px}
.project-source-strip i{position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(155deg,#eef4ff,#e9e0ff);border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 10px rgba(0,0,0,.08)}
.project-source-strip i:before{content:"";position:absolute;left:6px;right:6px;top:7px;height:3px;border-radius:99px;background:#55638d;box-shadow:0 7px 0 rgba(85,99,141,.24)}
.project-source-strip i:after{content:"";position:absolute;width:14px;height:17px;left:50%;bottom:5px;transform:translateX(-50%);border-radius:4px 4px 3px 3px;background:#fff;border:1px solid rgba(86,100,150,.13);box-shadow:0 3px 6px rgba(47,57,100,.12)}
.project-source-strip i:nth-child(2){background:linear-gradient(155deg,#efe7ff,#f8edff)}
.project-source-strip i:nth-child(3){background:linear-gradient(155deg,#e9f7ff,#e8efff)}
.project-source-strip i:nth-child(4){background:linear-gradient(155deg,#fff0ed,#f4e8ff)}
.project-source-strip i:nth-child(5){background:linear-gradient(155deg,#eefce6,#edf7ff)}
.project-source-strip i:nth-child(6){background:linear-gradient(155deg,#f8edff,#e6efff)}
.project-source-strip span{position:absolute;z-index:2;right:3px;bottom:2px;font:800 4.8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8a94b3}
.device-sync-path{position:absolute;left:334px;top:70px;width:122px;display:flex;align-items:center;gap:7px;color:rgba(224,231,255,.64)}
.device-sync-path i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(130,116,255,.65))}
.device-sync-path i:last-child{background:linear-gradient(90deg,rgba(130,116,255,.65),rgba(255,255,255,.12))}
.device-sync-path span{font-size:6px;font-weight:800;letter-spacing:.85px;text-transform:uppercase;white-space:nowrap}
.device-output-meta{
  position:absolute;
  right:25px;
  top:27px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(2,8,31,.16);
  color:#fff;
  backdrop-filter:blur(16px);
}
.device-output-meta span{display:flex;align-items:center;gap:6px;font-size:6.5px;color:rgba(224,231,255,.72);font-weight:760}
.device-output-meta span i{width:6px;height:6px;border-radius:50%;background:#7cf2b0;box-shadow:0 0 0 4px rgba(124,242,176,.08)}
.device-output-meta b{font:780 7.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px}

.device-composition{
  position:absolute;
  left:50%;
  top:54%;
  width:100%;
  height:350px;
  transform:translate(-50%,-50%);
  perspective:1200px;
}
.device-card-art{
  position:absolute;
  z-index:3;
  width:127px;
  height:277px;
  top:45px;
  left:50%;
  border:7px solid #090c17;
  border-radius:31px;
  background:#0a0c15;
  overflow:hidden;
  box-shadow:0 34px 52px rgba(0,0,0,.38),0 4px 10px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .48s var(--ease),width .48s var(--ease),height .48s var(--ease),border-radius .48s var(--ease),left .48s var(--ease),top .48s var(--ease),opacity .3s var(--ease);
  transform-style:preserve-3d;
}
.device-card-art img{display:none}
.device-card-art .notch{z-index:5;width:42%;height:14px;top:6px;left:29%;border-radius:0 0 10px 10px;background:#090c17}
.device-shell-detail{position:absolute;z-index:6;left:-9px;top:65px;width:2px;height:31px;border-radius:2px;background:#1d2230;box-shadow:0 42px 0 #1d2230}
.device-screen{position:absolute;inset:0;border-radius:23px;overflow:hidden;padding:32px 14px 12px;color:#101a47}
.device-screen:before{content:"";position:absolute;width:116px;height:116px;border-radius:50%;right:-50px;top:62px;border:17px solid rgba(255,255,255,.3)}
.device-screen:after{content:"";position:absolute;width:70px;height:70px;left:-30px;bottom:28px;transform:rotate(32deg);background:rgba(255,255,255,.3);border-radius:18px}
.device-screen.story-one{background:linear-gradient(155deg,#eff8df 0%,#eff8e7 54%,#e8f3ff 100%)}
.device-screen.story-two{background:linear-gradient(155deg,#eee7ff 0%,#f4e6ff 48%,#e7efff 100%)}
.device-screen.story-three{background:linear-gradient(155deg,#fff0ea 0%,#fce9f0 52%,#efe7ff 100%)}
.device-screen small{position:relative;z-index:2;display:block;font-size:5px;font-weight:850;letter-spacing:.75px;color:#69749b;margin-bottom:7px}
.device-screen strong{position:relative;z-index:2;display:block;font-size:11px;line-height:1.04;letter-spacing:-.45px}
.mini-product-ui{position:absolute;z-index:2;left:50%;top:52%;width:58px;height:97px;transform:translate(-50%,-50%);border:1px solid rgba(98,111,151,.15);border-radius:9px;background:rgba(255,255,255,.96);box-shadow:0 14px 24px rgba(47,57,100,.15);padding:13px 8px 8px}
.mini-product-ui:before{content:"";position:absolute;left:50%;top:5px;width:17px;height:3px;transform:translateX(-50%);border-radius:99px;background:#e5e9f2}
.mini-product-ui i{display:block;height:4px;border-radius:99px;background:#cfd7e7;margin-bottom:5px}
.mini-product-ui i:nth-child(1){width:70%;background:#52608e}
.mini-product-ui i:nth-child(2){width:92%}
.mini-product-ui i:nth-child(3){width:60%}
.mini-product-ui em{position:absolute;left:8px;right:8px;bottom:9px;height:30px;border-radius:5px;background:linear-gradient(145deg,rgba(57,125,255,.13),rgba(121,91,255,.15));border:1px solid rgba(121,91,255,.09)}
.mini-product-ui em:before,.mini-product-ui em:after{content:"";position:absolute;bottom:6px;width:7px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#7c72e8,#6278f0)}
.mini-product-ui em:before{height:11px;left:10px}.mini-product-ui em:after{height:18px;left:23px}
.screen-index{position:absolute;z-index:3;right:10px;bottom:9px;font:800 5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7b84a5}
.phone-one{left:calc(50% - 156px);transform:translateY(19px) rotateY(12deg) rotateZ(-7deg)}
.phone-two{left:calc(50% - 63px);z-index:5;transform:translateY(-5px) scale(1.06)}
.phone-three{left:calc(50% + 43px);transform:translateY(19px) rotateY(-12deg) rotateZ(7deg)}
.device-shadow{z-index:1;width:385px;height:58px;left:50%;bottom:62px;transform:translateX(-50%);background:rgba(2,4,20,.52);filter:blur(22px)}
.device-stage-foot{position:absolute;left:28px;right:28px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:17px;color:rgba(220,227,255,.62)}
.device-stage-foot:before,.device-stage-foot:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11))}
.device-stage-foot:after{background:linear-gradient(90deg,rgba(255,255,255,.11),transparent)}
.device-stage-foot span{display:flex;align-items:center;gap:6px;font-size:6.5px;white-space:nowrap}
.frame-swatch{display:block;width:10px;height:10px;border-radius:3px;border:2px solid #090c17;background:#eef2f9}
.frame-swatch.clay{border-color:#d3d8e2;background:#fff}
.frame-swatch.none{border:1px dashed rgba(255,255,255,.38);background:transparent}

/* Family transforms keep the same story while changing the hardware language. */
.device-gallery.tablet-mode .device-composition{height:360px;top:55%}
.device-gallery.tablet-mode .device-card-art{width:196px;height:274px;border-width:6px;border-radius:23px;top:46px}
.device-gallery.tablet-mode .device-card-art .notch{width:6px;height:6px;border-radius:50%;left:calc(50% - 3px);top:7px}
.device-gallery.tablet-mode .device-screen{border-radius:17px;padding:27px 19px 13px}
.device-gallery.tablet-mode .device-screen strong{font-size:13px}
.device-gallery.tablet-mode .mini-product-ui{width:78px;height:104px}
.device-gallery.tablet-mode .phone-one{left:calc(50% - 250px);transform:translateY(14px) rotateY(12deg) rotateZ(-4deg)}
.device-gallery.tablet-mode .phone-two{left:calc(50% - 98px);transform:translateY(-8px) scale(1.02)}
.device-gallery.tablet-mode .phone-three{left:calc(50% + 58px);transform:translateY(14px) rotateY(-12deg) rotateZ(4deg)}
.device-gallery.android-mode .device-card-art{border-radius:27px;border-width:6px;background:#12151f}
.device-gallery.android-mode .device-card-art .notch{width:7px;height:7px;left:calc(50% - 3.5px);top:7px;border-radius:50%;background:#090c17}
.device-gallery.android-mode .device-screen{border-radius:21px;padding-top:29px}
.device-gallery.tablet-mode.android-mode .device-card-art{border-radius:18px}
.device-gallery.tablet-mode.android-mode .device-screen{border-radius:13px}

/* Duo artwork now uses the same product-story visual language as the main stage. */
.duo-row{background:linear-gradient(180deg,#fff,#fbfcff)}
.duo-copy{padding:46px 48px}
.duo-preview{position:relative;overflow:hidden;background:linear-gradient(145deg,#f3f7ff,#f7f4ff);padding:26px 30px}
.duo-preview:before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;right:-120px;top:-110px;background:radial-gradient(circle,rgba(121,91,255,.14),transparent 68%)}
.duo-toolbar{position:relative;z-index:2}
.duo-frames{position:relative;z-index:2;height:250px;gap:20px}
.duo-device{background:#0a0c15;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 42px rgba(27,32,61,.22),inset 0 0 0 1px rgba(255,255,255,.05)}
.duo-device.outer{width:104px;height:151px;border-radius:24px;padding:6px}
.duo-device.inner{width:183px;height:126px;border-radius:18px;padding:6px}
.duo-screen{position:relative;display:block;overflow:hidden;height:100%;padding:18px 10px 10px;color:#101a47;background:linear-gradient(150deg,#eef8df,#e7efff)}
.duo-screen:before{content:"";position:absolute;width:86px;height:86px;border:14px solid rgba(255,255,255,.34);border-radius:50%;right:-38px;bottom:-12px}
.duo-screen small{position:relative;z-index:2;display:block;font-size:4.5px;font-weight:850;letter-spacing:.65px;color:#7580a0;margin-bottom:5px}
.duo-screen strong{position:relative;z-index:2;display:block;font-size:8px;line-height:1.05;letter-spacing:-.25px}
.duo-inner-art{background:linear-gradient(150deg,#efe9ff,#e8f2ff);padding-left:16px}
.duo-inner-art strong{font-size:9px}
.duo-ui-card{position:absolute;z-index:2;left:50%;bottom:10px;width:43%;height:47%;transform:translateX(-50%);border-radius:7px;background:#fff;border:1px solid rgba(103,115,155,.13);box-shadow:0 9px 18px rgba(55,66,106,.14)}
.duo-ui-card:before{content:"";position:absolute;left:7px;right:14px;top:8px;height:3px;border-radius:99px;background:#5b668e;box-shadow:0 7px 0 #d7ddea,0 14px 0 #d7ddea}
.duo-inner-art .duo-ui-card{width:34%;height:49%;left:67%}
.duo-transform{display:flex;flex-direction:column;align-items:center;gap:4px;color:#7b87aa}
.duo-transform span{font-size:5.8px;font-weight:800;letter-spacing:.75px;text-transform:uppercase;white-space:nowrap}
.duo-transform i{font-style:normal;font-size:16px;color:var(--purple)}
.duo-item span{font-size:6.6px}
.duo-preview.clay .duo-device{background:linear-gradient(145deg,#dfe3eb,#bdc5d2);border-color:#c8ced9}
.duo-preview.none .duo-device{border-color:transparent}

@keyframes deviceStoryFloat{
  0%,100%{transform:translateY(-5px) scale(1.06)}
  50%{transform:translateY(-12px) scale(1.06)}
}
@media (prefers-reduced-motion:no-preference){
  .device-gallery:not(.tablet-mode) .phone-two{animation:deviceStoryFloat 5.5s ease-in-out infinite}
}

@media (max-width:1100px){
  .device-preview-panel{grid-template-columns:1fr}
  .device-copy{padding:40px 44px}
  .device-copy>p{max-width:700px}
  .device-gallery{min-height:500px;border-left:0;border-top:1px solid var(--border)}
  .device-project-source{left:36px}
  .device-output-meta{right:36px}
}
@media (max-width:820px){
  .device-tabs{height:auto}
  .device-gallery{min-height:470px}
  .device-project-source{left:22px;top:22px;width:250px}
  .device-output-meta{right:22px;top:22px}
  .device-sync-path{display:none}
  .device-composition{transform:translate(-50%,-48%) scale(.9)}
  .device-gallery.tablet-mode .device-composition{transform:translate(-50%,-48%) scale(.82)}
  .duo-frames{gap:14px}
}
@media (max-width:580px){
  .device-workbench{margin-top:38px;border-radius:18px}
  .device-tabs button>span{width:34px;height:34px}
  .device-tabs b{font-size:9.5px}.device-tabs small{font-size:6.7px}
  .device-copy{padding:30px 22px 32px}
  .device-copy h3{font-size:30px;letter-spacing:-1.25px}
  .device-gallery{min-height:430px;transform:none;margin:0}
  .device-project-source{left:16px;top:16px;width:215px;height:82px;padding:10px}
  .project-source-strip{height:37px}
  .project-source-head small{display:none}
  .device-output-meta{right:15px;top:15px;padding:8px 9px}
  .device-output-meta span{display:none}
  .device-composition{top:58%;transform:translate(-50%,-50%) scale(.76)}
  .device-gallery.tablet-mode .device-composition{top:58%;transform:translate(-50%,-50%) scale(.64)}
  .device-stage-foot{left:16px;right:16px;bottom:14px;gap:9px}
  .device-stage-foot span{font-size:5.8px}
  .duo-copy{padding:30px 22px}
  .duo-frames{height:238px;gap:9px;transform:scale(.92)}
  .duo-transform span{display:none}
  .duo-device.inner{width:165px;height:116px}
}

/* ===== Header navigation rebuild ===== */
.site-header{
  top:16px;
  padding-inline:16px;
}
.header-inner{
  position:relative;
  width:min(1240px,100%);
  height:68px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"brand nav menu";
  align-items:center;
  padding:9px 10px 9px 14px;
  border:1px solid rgba(208,222,241,.78);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,252,255,.76));
  box-shadow:0 10px 32px rgba(26,52,98,.07),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
}
.site-header.scrolled{top:8px}
.site-header.scrolled .header-inner{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(249,251,255,.9));
  border-color:rgba(194,212,237,.92);
  box-shadow:0 16px 42px rgba(25,52,99,.12),inset 0 1px 0 rgba(255,255,255,.96);
}
.site-header .brand{
  grid-area:brand;
  justify-self:start;
  gap:10px;
  padding:4px 7px 4px 3px;
  border-radius:13px;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.site-header .brand:hover{background:rgba(245,248,255,.86)}
.site-header .brand:active{transform:scale(.985)}
.site-header .brand img{
  width:38px;
  height:38px;
  border-radius:11px;
  box-shadow:0 7px 18px rgba(75,91,230,.18);
}
.site-header .brand span{font-size:18.5px;letter-spacing:-.5px}

.nav-links{
  grid-area:nav;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:4px;
  border:1px solid rgba(216,227,242,.78);
  border-radius:14px;
  background:rgba(243,247,253,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
.nav-links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border-radius:10px;
  color:#69749b;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:-.08px;
  white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.nav-links a:hover{
  color:var(--ink);
  background:rgba(255,255,255,.65);
}
.nav-links a.active{
  color:var(--ink);
  background:#fff;
  box-shadow:0 5px 14px rgba(33,61,111,.09),inset 0 0 0 1px rgba(217,226,240,.74);
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:14px;
  height:2px;
  border-radius:99px;
  background:var(--gradient);
  transform:translateX(-50%);
}
.nav-links a:focus-visible,.site-header .brand:focus-visible,.menu-button:focus-visible{
  outline:3px solid rgba(57,125,255,.2);
  outline-offset:2px;
}

.menu-button{
  grid-area:menu;
  justify-self:end;
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(214,225,240,.9);
  border-radius:12px;
  background:rgba(246,249,254,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.menu-button:hover{background:#fff;border-color:var(--border-strong)}
.menu-button:active{transform:scale(.96)}
.menu-button span{
  position:absolute;
  left:50%;
  width:18px;
  height:1.8px;
  margin:0;
  border-radius:99px;
  background:var(--ink);
  transform:translateX(-50%);
  transition:top .24s var(--ease),transform .24s var(--ease),opacity .18s var(--ease);
}
.menu-button span:nth-child(1){top:14px}
.menu-button span:nth-child(2){top:21px}
.menu-button span:nth-child(3){top:28px}
.menu-button[aria-expanded="true"] span:nth-child(1){top:21px;transform:translateX(-50%) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(.3)}
.menu-button[aria-expanded="true"] span:nth-child(3){top:21px;transform:translateX(-50%) rotate(-45deg)}

@media (min-width:921px){
  .nav-links{display:flex!important}
  .menu-button{display:none!important}
}

@media (max-width:920px){
  .site-header{top:10px;padding-inline:10px}
  .site-header.scrolled{top:6px}
  .header-inner{
    width:100%;
    height:62px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand menu";
    padding:8px 9px 8px 11px;
    border-radius:18px;
  }
  .site-header .brand img{width:36px;height:36px}
  .site-header .brand span{font-size:18px}
  .menu-button{display:block;margin:0}
  .nav-links{
    position:absolute;
    z-index:2;
    display:none;
    top:calc(100% + 10px);
    left:0;
    right:0;
    width:100%;
    padding:7px;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    border:1px solid rgba(204,219,239,.94);
    border-radius:17px;
    background:rgba(255,255,255,.96);
    box-shadow:0 20px 48px rgba(24,49,94,.14),inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter:blur(24px) saturate(170%);
    -webkit-backdrop-filter:blur(24px) saturate(170%);
    transform-origin:top center;
  }
  .nav-links.open{display:flex;animation:headerMenuIn .2s var(--ease) both}
  .nav-links a{
    min-height:44px;
    width:100%;
    padding:0 13px;
    justify-content:flex-start;
    border-radius:11px;
    font-size:12.5px;
  }
  .nav-links a.active::after{
    left:auto;
    right:11px;
    top:50%;
    bottom:auto;
    width:7px;
    height:7px;
    transform:translateY(-50%);
    border-radius:50%;
  }
}

@media (max-width:580px){
  .site-header{padding-inline:8px}
  .header-inner{height:58px;border-radius:16px;padding:7px 8px 7px 10px}
  .site-header .brand img{width:34px;height:34px;border-radius:10px}
  .site-header .brand span{font-size:17px}
  .menu-button{width:42px;height:42px;border-radius:11px}
  .menu-button span:nth-child(1){top:13px}
  .menu-button span:nth-child(2){top:20px}
  .menu-button span:nth-child(3){top:27px}
  .menu-button[aria-expanded="true"] span:nth-child(1),
  .menu-button[aria-expanded="true"] span:nth-child(3){top:20px}
}

@keyframes headerMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== Rumi Mock colorful header rebrand ===== */
.site-header .header-inner{
  overflow:visible;
  border-color:rgba(182,207,239,.76);
  background:
    linear-gradient(135deg,rgba(236,248,255,.92) 0%,rgba(248,243,255,.9) 48%,rgba(255,246,251,.88) 100%);
  box-shadow:
    0 16px 42px rgba(50,77,128,.1),
    0 4px 14px rgba(121,91,255,.05),
    inset 0 1px 0 rgba(255,255,255,.96);
}
.site-header .header-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 20%,rgba(57,125,255,.14),transparent 27%),
    radial-gradient(circle at 52% 10%,rgba(121,91,255,.13),transparent 25%),
    radial-gradient(circle at 84% 72%,rgba(217,77,102,.09),transparent 28%);
}
.site-header.scrolled .header-inner{
  border-color:rgba(177,202,236,.9);
  background:
    linear-gradient(135deg,rgba(240,249,255,.97),rgba(249,245,255,.96) 48%,rgba(255,248,252,.95));
  box-shadow:0 18px 48px rgba(38,66,119,.14),inset 0 1px 0 rgba(255,255,255,.98);
}
.site-header .brand{
  position:relative;
  z-index:2;
  padding:5px 10px 5px 5px;
  border:1px solid transparent;
}
.site-header .brand:hover{
  border-color:rgba(255,255,255,.82);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(244,240,255,.72));
  box-shadow:0 8px 20px rgba(70,91,143,.08);
}
.site-header .brand img{
  box-shadow:0 8px 20px rgba(78,87,224,.22),0 0 0 1px rgba(255,255,255,.74);
}
.site-header .brand b{font-weight:790;color:var(--ink)}
.site-header .brand em{
  font-weight:790;
  color:transparent;
  background:linear-gradient(120deg,#397DFF 0%,#795BFF 58%,#D94D66 115%);
  -webkit-background-clip:text;
  background-clip:text;
}

.site-header .nav-links{
  position:relative;
  z-index:2;
  gap:4px;
  padding:5px;
  border-color:rgba(194,211,237,.72);
  background:rgba(255,255,255,.56);
  box-shadow:0 6px 18px rgba(46,74,126,.06),inset 0 1px 0 rgba(255,255,255,.94);
}
.site-header .nav-links a{
  --nav-accent:#397DFF;
  --nav-wash:rgba(57,125,255,.10);
  --nav-ring:rgba(57,125,255,.13);
  gap:7px;
  padding-inline:12px;
  color:#63709A;
}
.site-header .nav-links a:nth-child(1){--nav-accent:#397DFF;--nav-wash:rgba(57,125,255,.11);--nav-ring:rgba(57,125,255,.14)}
.site-header .nav-links a:nth-child(2){--nav-accent:#795BFF;--nav-wash:rgba(121,91,255,.11);--nav-ring:rgba(121,91,255,.14)}
.site-header .nav-links a:nth-child(3){--nav-accent:#D94D66;--nav-wash:rgba(217,77,102,.10);--nav-ring:rgba(217,77,102,.13)}
.site-header .nav-links a:nth-child(4){--nav-accent:#5167F3;--nav-wash:rgba(81,103,243,.10);--nav-ring:rgba(81,103,243,.13)}
.site-header .nav-links a:nth-child(5){--nav-accent:#22A66A;--nav-wash:rgba(34,166,106,.10);--nav-ring:rgba(34,166,106,.13)}
.site-header .nav-links a::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--nav-accent);
  box-shadow:0 0 0 3px var(--nav-ring);
  opacity:.76;
  transform:scale(.78);
  transition:opacity .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.site-header .nav-links a:hover{
  color:var(--nav-accent);
  background:var(--nav-wash);
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px var(--nav-ring);
}
.site-header .nav-links a:hover::before{opacity:1;transform:scale(1)}
.site-header .nav-links a.active{
  color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.94),var(--nav-wash));
  box-shadow:0 6px 16px rgba(38,63,111,.08),inset 0 0 0 1px var(--nav-ring);
}
.site-header .nav-links a.active::before{opacity:1;transform:scale(1.05);box-shadow:0 0 0 4px var(--nav-ring)}
.site-header .nav-links a.active::after{
  width:18px;
  height:2px;
  background:var(--nav-accent);
  box-shadow:0 1px 6px var(--nav-ring);
}

.site-header .menu-button{
  border-color:rgba(188,205,234,.86);
  background:linear-gradient(135deg,rgba(240,248,255,.94),rgba(243,236,255,.94));
  box-shadow:0 7px 18px rgba(75,87,158,.08),inset 0 1px 0 rgba(255,255,255,.95);
}
.site-header .menu-button:hover{
  border-color:rgba(121,91,255,.24);
  background:linear-gradient(135deg,#f6fbff,#f3efff);
}
.site-header .menu-button span{background:linear-gradient(90deg,#397DFF,#795BFF)}

@media (max-width:920px){
  .site-header .nav-links{
    background:
      linear-gradient(145deg,rgba(242,250,255,.98),rgba(249,245,255,.98) 48%,rgba(255,248,252,.98));
    border-color:rgba(185,205,235,.92);
    box-shadow:0 22px 52px rgba(30,56,108,.16),inset 0 1px 0 rgba(255,255,255,.98);
  }
  .site-header .nav-links a{
    min-height:46px;
    padding-inline:15px;
  }
  .site-header .nav-links a.active::after{
    right:14px;
    width:8px;
    height:8px;
    background:var(--nav-accent);
    box-shadow:0 0 0 4px var(--nav-ring);
  }
}


/* ===== Precision section visual retune ===== */
.precision-section{position:relative;overflow:hidden;background:
  radial-gradient(circle at 12% 18%, rgba(57,125,255,.14), transparent 0 24%),
  radial-gradient(circle at 84% 14%, rgba(121,91,255,.12), transparent 0 22%),
  radial-gradient(circle at 82% 82%, rgba(236,72,153,.08), transparent 0 18%),
  linear-gradient(180deg,#f7fbff 0%,#eff5ff 52%,#f8f1ff 100%);border-top:1px solid rgba(220,232,247,.82);border-bottom:1px solid rgba(220,232,247,.82)}
.precision-section:before,.precision-section:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.precision-section:before{width:380px;height:380px;left:-120px;top:140px;background:radial-gradient(circle,rgba(57,125,255,.12),transparent 68%)}
.precision-section:after{width:340px;height:340px;right:-90px;bottom:20px;background:radial-gradient(circle,rgba(121,91,255,.11),transparent 70%)}
.precision-section .shell{position:relative;z-index:1}
.precision-card{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,250,255,.9));border:1px solid rgba(201,217,238,.92);box-shadow:0 20px 54px rgba(38,71,116,.08),0 4px 18px rgba(121,91,255,.04)}
.precision-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(57,125,255,0),rgba(57,125,255,.28),rgba(121,91,255,.24),rgba(57,125,255,0))}
.resize-demo{background:linear-gradient(145deg,rgba(234,245,255,.96),rgba(243,236,255,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.background-preview{background:linear-gradient(140deg,#eff6ff,#f3eeff)}
.background-preview:before{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.78),transparent 36%),radial-gradient(circle at 82% 76%,rgba(121,91,255,.12),transparent 28%)}
.panorama-track{background:linear-gradient(120deg,#eef6ff,#f5eeff)}
.layer-row{background:linear-gradient(180deg,#ffffff,#f8fbff)}
.linked-chip,.measure-x span,.measure-y span{background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}


/* ===== Precision section heading/background continuity fix ===== */
.precision-section{
  background:#fff;
  border-top:1px solid rgba(220,232,247,.72);
  border-bottom:1px solid rgba(220,232,247,.72)
}
.precision-section:before,
.precision-section:after{display:none}
.precision-section .split-heading{
  position:relative;
  z-index:2;
  margin-bottom:28px
}
.precision-bento{
  position:relative;
  isolation:isolate;
  margin-top:0
}
.precision-bento:before{
  content:"";
  position:absolute;
  inset:-26px -18px auto;
  height:320px;
  z-index:-1;
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 22%, rgba(57,125,255,.12), transparent 0 24%),
    radial-gradient(circle at 88% 18%, rgba(121,91,255,.11), transparent 0 20%),
    linear-gradient(180deg, #f7fbff 0%, #eff6ff 56%, rgba(247,241,255,.92) 100%);
  border:1px solid rgba(223,234,247,.9);
  box-shadow:0 18px 44px rgba(38,71,116,.05)
}
@media (max-width:1160px){
  .precision-bento:before{height:260px; inset:-18px -10px auto}
}
@media (max-width:580px){
  .precision-section .split-heading{margin-bottom:22px}
  .precision-bento:before{height:210px; border-radius:24px}
}