/* WebStudioHouse — vijolična, turkizna in tekoče svetlobne linije. */
:root{--bg:#0a0810;--panel:#14101f;--panel2:#1b1527;--text:#f6f4fa;--muted:#b5adc5;--line:rgba(190,165,225,.15);--accent:#8f63ed;--accent-light:#c0a2ff;--mint:#43d5c4}
body{background:var(--bg)}
::selection{background:#7542c6;color:#fff}
.site-header{background:rgba(20,16,31,.79);border-color:#bfa6e721;box-shadow:0 16px 50px #07041045}
.brand svg{stroke:#b799fa}.brand-dot{color:var(--mint)}
.site-header nav a[aria-current]:after{background:var(--mint);box-shadow:0 0 12px #43d5c455}
.hero-shade{background:linear-gradient(90deg,#0a0810 0%,#0a0810ef 25%,#0a08107a 47%,transparent 66%),linear-gradient(0deg,#0a0810,transparent 23%)}
.hero .eyebrow>span{background:var(--mint);box-shadow:0 0 18px #43d5c45c}
.accent-word{color:#bba0fa;background:linear-gradient(105deg,#dfd0ff 1%,#af85f1 40%,#5ed9ca 98%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1{max-width:790px}
.title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.title-line>span{display:inline-block;animation:title-unfold 1.25s cubic-bezier(.22,1,.36,1) both}
.title-line:nth-child(2)>span{animation-delay:.13s}.title-line:nth-child(3)>span{animation-delay:.26s}
@keyframes title-unfold{from{opacity:0;transform:translateY(110%) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.primary{background:#6d3ce8;color:#fff;box-shadow:0 6px 30px #6d3ce835;position:relative;isolation:isolate;overflow:hidden;transition:background .25s,box-shadow .3s,transform .3s}
.primary:hover{background:#7b4df2;box-shadow:0 8px 30px #8b5aed43;transform:translateY(-2px)}
.primary:before{content:'';position:absolute;inset:-40% -65%;z-index:-1;background:linear-gradient(110deg,transparent 35%,#ffffff23 49%,transparent 63%);transform:translateX(-55%);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.primary:hover:before,.primary:focus-visible:before{transform:translateX(55%)}
.primary:hover .button-dot{box-shadow:0 0 11px #d7fff6}
.secondary:hover{border-color:#64d0bf66;background:#191527}
.orb-label{color:#a698bd}.orb-label-bottom{color:#83c2b9}.orb-label-bottom i{background:var(--mint);box-shadow:0 0 15px #43d5c455}.tiny-cross{color:#c7a9ff}
.strip-number{color:var(--mint)}.service-strip>a:hover{background:#43d5c405}
.service-strip>a{position:relative}.service-strip>a:after{content:'';position:absolute;bottom:0;height:1px;left:0;right:0;background:linear-gradient(90deg,#ad7efa,#43d5c4);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.service-strip>a:hover:after,.service-strip>a:focus-visible:after{transform:scaleX(1)}
.services-section,.values-section{background:#0e0b15}
.service-card{background:linear-gradient(150deg,#1c1628,#100d17);border-color:#ad8cd627}
.service-card:hover{border-color:#74c9ba5c}
.service-icon{color:#c1a1ff;background:#8d5acb15;border-color:#b48ce333}
.service-card:nth-child(2) .service-icon{color:#78dece;background:#43d5c40b;border-color:#43d5c42c}
.service-card:nth-child(3) .service-icon{color:#b8addf;background:#876cca11}
.spotlight-card{position:relative;isolation:isolate;--spot-x:50%;--spot-y:50%}
.spotlight-card:before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:radial-gradient(380px circle at var(--spot-x) var(--spot-y),#b889ed13,transparent 64%);opacity:0;transition:opacity .35s;pointer-events:none}
.spotlight-card:hover:before,.spotlight-card:focus-within:before{opacity:1}
.problem-card:hover{transform:none;border-color:#ae8ee25e}
.js-motion .reveal{opacity:0;transform:translateY(34px) scale(.975);transition:opacity .8s,transform .95s cubic-bezier(.16,1,.3,1);transform-origin:50% 100%}
.js-motion .reveal.visible{opacity:1;transform:translateY(0) scale(1)}
.process-number{color:#bba4e9;border-color:#665183;background:#120e1b;box-shadow:0 0 0 9px var(--bg);transition:border-color .6s,box-shadow .6s,color .6s}
.process-step.reached .process-number{border-color:#43d5c487;color:#8ee6d9;box-shadow:0 0 0 9px var(--bg),0 0 30px #43d5c41b}
.process:after{background:linear-gradient(90deg,#9e6ff1,#43d5c4)}
.closing-cta{background:radial-gradient(ellipse at 92% 62%,#218d7c15,transparent 48%),radial-gradient(ellipse at 65% 0,#7041a925,transparent 64%),#110d1b;border-color:#c8a3ed2b}

.about-visual{background:radial-gradient(ellipse,#7541a523,transparent 64%)}
.about-ring{border-color:#aa7ae344;transform:rotate(-28deg) scaleY(.7)}
.ring-one{animation:orbit-breathe 12s ease-in-out infinite}
.ring-two{border-style:solid;border-color:#49bead4f;transform:rotate(38deg) scaleX(.8);animation:orbit-breathe-alt 16s ease-in-out infinite}
@keyframes orbit-breathe{0%,100%{transform:rotate(-28deg) scaleY(.7);opacity:.55}50%{transform:rotate(-14deg) scaleY(.9);opacity:1}}
@keyframes orbit-breathe-alt{0%,100%{transform:rotate(38deg) scaleX(.8);opacity:1}50%{transform:rotate(22deg) scaleX(.64);opacity:.55}}
.about-center strong span{color:var(--mint)}.orbit-word{border-color:#bb93df35;background:#171120;box-shadow:0 0 25px #4c205b1b}
.word-two{color:#9bdfd1;border-color:#43d5c433}
.detail-demo{background:radial-gradient(ellipse at 18% 0,#7041a923,transparent 65%),#15101f}
.demo{background:#0d0b13;border-color:#c4a5e41d}
.browser-bar{background:#251c34}.mini-browser{background:#191321;border-color:#aa8bce3b}
.mini-button{background:#8251d8}.mini-geometric span{background:linear-gradient(155deg,#c09cf4,#4fb8a4)}
.mini-grid i{background:#baa1dd0d;border-color:#b39ad628}
.web-demo .mini-browser{position:relative}
.web-demo.assembling .demo-piece{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.22,1,.36,1)}
.web-demo.assembling .demo-piece.assembled{clip-path:inset(0);transform:none}
.web-demo.assembling .mini-browser:after{content:'';position:absolute;top:0;bottom:0;width:35px;background:linear-gradient(90deg,transparent,#71e4c923,transparent);animation:interface-scan 1.9s ease-in-out both;pointer-events:none}
@keyframes interface-scan{from{left:-35px}to{left:100%}}
.ai-symbol{color:#80e0cf;background:#43d5c416}
.chat-question{background:#6f439a26;border-color:#c39ae432;color:#e6d9f5}
.chat-answer{background:#17121f;color:#c9bfd6;border-color:#c3a2df1b}
.chat-answer.typing{letter-spacing:normal;display:flex;align-items:center;gap:12px}
.thinking-wave{display:flex;gap:4px;align-items:center;height:26px;flex-shrink:0}
.thinking-wave i{display:block;width:3px;height:8px;background:#79d8c6;border-radius:3px;animation:thinking-wave .65s ease-in-out infinite alternate}
.thinking-wave i:nth-child(2){animation-delay:.13s}.thinking-wave i:nth-child(3){animation-delay:.25s}.thinking-wave i:nth-child(4){animation-delay:.38s}.thinking-wave i:nth-child(5){animation-delay:.5s}
.thinking-label{font-size:12px;color:#ada1c1}
@keyframes thinking-wave{to{height:24px;background:#ba96ef}}
.answer-arrives{animation:answer-unfold .55s cubic-bezier(.22,1,.36,1) both}
@keyframes answer-unfold{from{opacity:0;transform:translateX(-8px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateX(0);clip-path:inset(0)}}
.chat-prompts button{background:#231a31;border-color:#b192d531;color:#d1bfe8}
.chat-prompts button:hover,.chat-prompts button[aria-pressed=true]{background:#1b3934;border-color:#53c4ae70;color:#b2f0e2}
.flow-node{background:#1b1424;border-color:#bfa4db2b}
.node-icon{color:#bb9de4}.flow-node>i{background:#5e4b73}
.flow-node.active{background:#18352e;border-color:#5ed6bca8;animation:node-receives .7s ease-out}
.flow-node.active .node-icon{color:#8de6cf}
.flow-node.active>i,.flow-node.complete>i{background:#75dfc4;box-shadow:0 0 12px #43d5c444}
.flow-node.complete{border-color:#6ebc9f5e}.flow-path{width:2px;background:#81669a37}
.flow-path>span{height:8px;top:0;opacity:0;border-radius:4px;background:#a5f8db;box-shadow:0 0 12px #63ebc8;transform:translateY(-8px)}
.flow-demo.running .flow-path>span{animation:none}
.flow-demo.running:has(.flow-node[data-step="0"].active) .flow-path:nth-child(2)>span,.flow-demo.running:has(.flow-node[data-step="1"].active) .flow-path:nth-child(4)>span{animation:packet-travel .75s ease-in-out both}
@keyframes packet-travel{0%{opacity:0;transform:translateY(-8px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
@keyframes node-receives{0%{box-shadow:0 0 0 0 #43d5c42b}100%{box-shadow:0 0 0 7px #43d5c400}}
.config-section{background:radial-gradient(ellipse at 90% 5%,#43d5c40a,transparent 60%),#110e18}
.choice-card{background:#191321;border-color:#b294d431}
.choice-card:has(input:checked){border-color:#b78fea;background:#432b614f}
.choice-card input:checked~.choice-check{border-color:#85d8c4}.choice-card input:checked~.choice-check:after{background:#85d8c4}
.choice-icon{color:#b995ee}.addon-choices label:has(input:checked),.contact-addons label:has(input:checked){border-color:#51b8a180;background:#19342d;color:#c7efe1}
.contact-note{background:linear-gradient(145deg,#25192f,#12121b)}.contact-note-icon{color:#80ddc7}
.contact-form-wrap{background:#14101e}.form-notice{background:#37234233;border-color:#b494d435}.form-notice p{color:#c9bbdb}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#b389e3}
.motion-toggle{background:#16101fa6;color:#c3b2d3;border-color:#ab90c53d}
.motion-toggle:hover{border-color:#6ab9a4;color:#e4fff4}
.back-top{background:#1a1325dd;border-color:#b093d149}
@media(max-width:700px){
 .hero-shade{background:linear-gradient(90deg,#0a0810e8,#0a081078),linear-gradient(0deg,#0a0810,transparent 48%)}
 .hero h1{font-size:clamp(56px,12vw,84px)}
 .title-line>span{animation-duration:.85s}
 .mobile-menu{background:#17111ff7}.mobile-menu a[aria-current]{background:#7856a924;color:#cdb4f3}
 .thinking-label{font-size:11px}.thinking-wave{gap:3px}
 .about-ring{animation-duration:20s}.ring-two{animation-duration:24s}
 .js-motion .reveal{transform:translateY(20px);transition-duration:.65s}
 .js-motion .reveal.visible{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .title-line>span,.js-motion .reveal,.answer-arrives{opacity:1;transform:none;clip-path:none}
 .web-demo.assembling .demo-piece{clip-path:none}
 .primary:hover{transform:none}
}
.motion-paused .title-line>span,.motion-paused .answer-arrives{opacity:1;transform:none;clip-path:none}
.motion-paused .primary:hover{transform:none}

.intake-demo{padding:22px!important;min-height:0!important;text-align:left}
.intake-demo h4{font-size:23px;letter-spacing:-.7px;font-weight:500;margin:18px 0 10px}
.intake-intro{font-size:13px!important;line-height:1.65!important;color:var(--muted);margin:0 0 20px!important}
.intake-pipeline{display:flex;gap:10px;padding:0;margin:0 0 24px;list-style:none;border-bottom:1px solid var(--line);padding-bottom:19px}
.intake-pipeline li{flex:1;font-size:10px;line-height:1.4;color:#c7bfda}
.intake-pipeline span{display:block;color:var(--mint);font-size:10px;margin-bottom:7px}
.intake-demo .field{margin-bottom:14px}.intake-demo .field label{font-size:12px;margin-bottom:7px}
.intake-demo input,.intake-demo textarea{font-size:13px;padding:11px 12px;line-height:1.5}
.intake-demo .button{width:100%;font-size:12px;padding:14px;min-height:46px}
.intake-demo .privacy-note{font-size:10px;line-height:1.6;margin:16px 0}
.privacy-note a{text-decoration:underline;text-underline-offset:3px}
.intake-status{font-size:12px!important;line-height:1.7;color:#d8c6f5!important;min-height:0;margin:12px 0 0!important}
.intake-status:empty{display:none}.intake-trap{display:none!important}
.setup-note{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;font-size:11px;color:var(--muted);line-height:1.7}
.setup-note summary{cursor:pointer;color:#cbb8e3}.setup-note p{font-size:11px!important;margin:9px 0 0!important}
.intake-demo .demo-label{font-size:9px;letter-spacing:1.4px}.intake-demo .field-error{font-size:11px}
.service-card:has(.intake-demo) .service-more{margin-top:24px}.service-card .intake-demo{margin-top:24px}

.live-flow-preview .node-icon{font-size:12px;font-weight:500}.live-flow-preview .text-button{display:inline-flex;gap:16px;align-items:center}

/* Three quiet orbital paths. Only transform and opacity animate. */
.orbital-scene{position:absolute;z-index:-2;pointer-events:none;width:min(65vw,890px);aspect-ratio:1;right:-8%;top:50%;transform:translateY(-50%);contain:layout style}
.orbital-glow{position:absolute;inset:-5%;background:radial-gradient(ellipse at 46% 42%,#8752d921,transparent 48%),radial-gradient(ellipse at 56% 58%,#2fb7aa16,transparent 47%)}
.orbital-composition{position:absolute;inset:0;animation:orbital-float 18s ease-in-out infinite;transform-style:preserve-3d}
.orbital-plane{position:absolute;inset:6%;transform-style:preserve-3d}
.orbit-spin{width:100%;height:100%;animation:orbital-turn 32s linear infinite;will-change:transform}
.orbit-spin svg{display:block;width:100%;height:100%;overflow:visible}
.plane-one{color:#ba91ff;transform:rotate(-29deg) scaleY(.5)}
.plane-two{color:#67e1d0;transform:rotate(41deg) scaleY(.57)}
.plane-two .orbit-spin{animation-duration:42s;animation-direction:reverse;animation-delay:-16s}
.plane-three{color:#d5c8ff;inset:15%;transform:rotate(103deg) scaleY(.7)}
.plane-three .orbit-spin{animation-duration:56s;animation-delay:-30s}
.orbital-core{position:absolute;inset:39%;border-radius:50%;background:radial-gradient(circle at 32% 23%,#c6a4f5 0%,#7753b0 9%,#36204e 31%,#120c1e 60%,#080b13 74%,#267f79 94%,#8ee7d2 100%);box-shadow:inset 2px 2px 14px #e8d5ff28,inset -6px -6px 22px #2caaa72b,0 0 65px #8360c223;transform:rotate(-18deg)}
.orbital-core span{position:absolute;inset:-12%;border-radius:50%;border:1px solid #bb9aec16;animation:orbital-breathe 9s ease-in-out infinite}
.orbital-coordinate{position:absolute;font:300 18px sans-serif;color:#ad93d968}
.coordinate-one{left:24%;top:18%}.coordinate-two{right:22%;bottom:16%;color:#6bd3c565}
@keyframes orbital-turn{to{transform:rotate(360deg)}}
@keyframes orbital-float{0%,100%{transform:translate3d(0,-8px,0) rotate(-3deg)}50%{transform:translate3d(0,9px,0) rotate(3deg)}}
@keyframes orbital-breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:1}}
.orbital-scene[data-running="false"] *{animation-play-state:paused!important}
.hero-shade{background:linear-gradient(90deg,#0a0810 0%,#0a0810f0 26%,#0a081062 51%,transparent 70%),linear-gradient(0deg,#0a0810,transparent 24%)}
@media(min-width:1600px){.orbital-scene{right:-2%}}
@media(max-width:1000px){.orbital-scene{width:80vw;right:-25%}}
@media(max-width:700px){
 .orbital-scene{width:620px;right:-265px;top:43%;opacity:.65}
 .orbital-composition{animation:none;transform:rotate(-12deg)}
 .plane-three,.orbital-coordinate{display:none}
 .plane-two .orbit-spin,.plane-three .orbit-spin,.orbital-core span{animation:none;will-change:auto}
 .plane-one .orbit-spin{animation-duration:48s}
 .hero-shade{background:linear-gradient(90deg,#0a0810f5,#0a081062),linear-gradient(0deg,#0a0810,transparent 55%)}
}
@media(prefers-reduced-motion:reduce){.orbital-scene *{animation:none!important;will-change:auto!important}}
.motion-paused .orbital-scene *{animation:none!important;will-change:auto!important}

/* A small idea becomes a distinct mark — decorative shared closing motif. */
.cta-spark{width:39%;max-width:440px;flex:0 0 39%;margin-right:-16px;pointer-events:none;user-select:none}
.cta-spark svg{display:block;width:100%;height:auto;overflow:visible}
.spark-mark{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.closing-cta:hover .spark-mark,.closing-cta:focus-within .spark-mark{transform:rotate(8deg) scale(1.025)}
@media(max-width:700px){.cta-spark{position:absolute;width:250px;max-width:none;right:-56px;bottom:-20px;margin:0;opacity:.27}.closing-cta>div:first-child{position:relative;z-index:2}}
@media(prefers-reduced-motion:reduce){.spark-mark{transition:none!important}.closing-cta:hover .spark-mark,.closing-cta:focus-within .spark-mark{transform:none}}
.motion-paused .closing-cta .spark-mark{transform:none}

/* Centered footer, framed by two lightweight floating stacks. */
.site-footer{position:relative;isolation:isolate;text-align:center;padding:62px 0 25px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#825ac40a,transparent 55%)}
.footer-center{position:relative;z-index:1;max-width:500px;margin:0 auto;padding:0 24px}
.footer-center .brand{justify-content:center;font-size:27px;letter-spacing:-1px;gap:0}
.footer-center .brand-dot{margin-left:3px}
.footer-center p{font-size:15px;line-height:1.8;color:var(--muted);margin:14px 0 13px}
.footer-email{display:inline-block;color:#d4c6ed;font-size:16px;line-height:1.7;text-underline-offset:5px;transition:color .2s}
.footer-email:hover{color:var(--mint)}
.site-footer .footer-bottom{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:40px;padding-top:27px;border-color:#b395dd16}
.footer-bottom nav{justify-content:center;flex-wrap:wrap;gap:12px 30px;font-size:14px}
.footer-bottom nav a{padding:7px 0;color:#bdb2cc}
.footer-bottom nav a:hover{color:#f6f4fa}
.footer-meta{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px;color:#a294b3}
.footer-motion-toggle{position:static;margin:0;min-height:34px;font-size:12px;padding:7px 12px;background:transparent}
.footer-art{position:absolute;top:22px;width:clamp(160px,20vw,240px);pointer-events:none;z-index:0}
.footer-art-left{left:4%}.footer-art-right{right:4%}
.footer-art svg{display:block;width:100%;height:auto;overflow:visible}
.footer-art-right svg{transform:scaleX(-1)}
.footer-plane{opacity:var(--plane-opacity);animation:footer-float 10s ease-in-out infinite;animation-delay:var(--float-delay);will-change:transform}
.footer-glint{animation:footer-glimmer 6s ease-in-out infinite}
.footer-art-right .footer-glint{animation-delay:-3s}
@keyframes footer-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes footer-glimmer{0%,100%{opacity:.3}50%{opacity:.9}}
.site-footer[data-running="false"] .footer-art *{animation-play-state:paused!important}
@media(max-width:1000px){.footer-art-left{left:0}.footer-art-right{right:0}.footer-art{width:170px;opacity:.8}.footer-center{max-width:420px}.footer-center .brand{font-size:25px}}
@media(max-width:700px){
 .site-footer{padding-top:48px}.footer-center{padding:0 8px;max-width:100%}.footer-center .brand{font-size:24px}
 .footer-center p{font-size:14px;max-width:235px;margin:14px auto 13px}.footer-email{font-size:14px}
 .footer-art{top:32px;width:125px;opacity:.22}.footer-art-left{left:-50px}.footer-art-right{right:-50px}
 .footer-plane{animation:none;will-change:auto}.footer-plane:last-of-type{animation:footer-float 14s ease-in-out infinite;animation-delay:-4s}
 .footer-glint{animation:none}.site-footer .footer-bottom{margin-top:30px;padding-top:20px;gap:18px}
 .footer-bottom nav{gap:10px 23px}.footer-meta{flex-direction:column;gap:7px;font-size:12px}.footer-motion-toggle{font-size:12px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){.footer-art *{animation:none!important;will-change:auto!important}}
.motion-paused .footer-art *{animation:none!important;will-change:auto!important}

/* Only the picture inside the existing website demo changes. */
.web-demo .mini-page[data-preview]{padding:0;height:calc(100% - 23px);overflow:hidden}
.web-demo .mini-page[data-preview]>svg{display:block;width:100%;height:100%}
.web-demo.assembling .mini-page[data-preview] .demo-piece{clip-path:none;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.web-demo.assembling .mini-page[data-preview] .demo-piece.assembled{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.web-demo.assembling .mini-page[data-preview] .demo-piece{opacity:1;transform:none}}
.motion-paused .web-demo.assembling .mini-page[data-preview] .demo-piece{opacity:1;transform:none}

/* Personalization is limited to the existing miniature website demo. */
.preview-form{margin:27px 0 22px;padding:22px;border:1px solid #ab8bd92b;border-radius:15px;background:linear-gradient(135deg,#b68af509,#67d8c406)}
.preview-form[hidden]{display:none}
.preview-form h3{font-size:17px;font-weight:500;letter-spacing:-.4px;margin:0 0 19px;color:#eeebf7}
.preview-form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.preview-field{min-width:0;display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.preview-field label{font-size:12px;line-height:1.6;color:#ded6ec}
.preview-field label>span{color:#b89bed}
.preview-field label>.preview-optional{color:#aaa0b9;font-size:11px;margin-left:5px}
.preview-field input,.preview-field textarea{width:100%;min-width:0;border:1px solid #c0a4e12c;border-radius:8px;background:#0c0a12;color:#efedf8;font-family:inherit;font-size:13px;line-height:1.5;padding:11px 12px;transition:border-color .2s,box-shadow .2s}
.preview-field input{min-height:44px}
.preview-field textarea{resize:vertical;min-height:70px;max-height:140px}
.preview-field input::placeholder,.preview-field textarea::placeholder{color:#a69bb8;opacity:1}
.preview-field input:focus,.preview-field textarea:focus{outline:2px solid #b99aeb;outline-offset:3px;border-color:#b99aeb}
.preview-form .preview-submit{min-height:44px;padding:11px 17px;font-size:12px;gap:16px}
.preview-form .preview-submit:disabled{cursor:wait;opacity:.7}
.preview-form .preview-form-note{font-size:11px;line-height:1.65;color:#aaa0b9;margin:12px 0 0}
.web-demo .demo-step{min-height:18px}
.web-demo .mini-browser{scroll-margin-block:135px 30px}
@media(min-width:701px) and (max-width:1100px){.preview-form-row{grid-template-columns:1fr;gap:0}.preview-form{padding:18px}}
@media(max-width:700px){.preview-form{padding:18px}.preview-form-row{grid-template-columns:1fr;gap:0}.preview-field input,.preview-field textarea{font-size:16px}.preview-form .preview-submit{width:100%;justify-content:center}}