/* Viswoo — 2026 editorial product website. Shared shell + independent marketing components. */
.viswoo-refresh {
  --bg:#f8f9f6; --bg-2:#eef1ed; --ink:#1e2356; --text:#33394f; --muted:#666e7b;
  --line:#dce1da; --brand:#0a8576; --brand-2:#076a5e; --brand-soft:#e0eee7;
  --navy:#1e2356; --navy-2:#30376b; --dark:#151b35;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
.viswoo-refresh h1,.viswoo-refresh h2,.viswoo-refresh h3,.viswoo-refresh h4 { text-wrap:balance; }
.viswoo-refresh .wrap { max-width:1280px; padding-inline:40px; }
.viswoo-refresh .top { background:rgba(248,249,246,.96); border-bottom:1px solid var(--line); }
.viswoo-refresh .top-in { height:88px; gap:24px; }
.viswoo-refresh .logo { gap:9px; }
.viswoo-refresh .logo img { width:auto; height:30px; }
.viswoo-refresh .foot .logo img { height:26px; }
.viswoo-refresh .menu { gap:0; }
.viswoo-refresh .menu a:not(.btn) { font-size:13px; padding:10px 11px; }
.viswoo-refresh .menu .btn { font-size:13px; padding:12px 16px; border-radius:8px; }
.viswoo-refresh .menu a.lang-link { border:none; color:var(--muted); margin-left:12px; }
.viswoo-refresh .menu .btn.ghost { margin-left:10px; }
.viswoo-refresh .btn { border-radius:8px; box-shadow:none; }
.viswoo-refresh .btn.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.viswoo-refresh .btn.primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
.viswoo-refresh .foot { background:#151b35; padding-top:64px; }
.viswoo-refresh .foot-in { padding-bottom:20px; gap:44px; }
.viswoo-refresh .foot-copy { display:flex; gap:12px; align-items:center; }
.viswoo-refresh .foot-copy a { display:inline; }
.viswoo-refresh .foot b { font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:#edf0f7; }
.viswoo-refresh .foot a:not(.logo), .viswoo-refresh .foot p { font-size:13px; color:#b0b8ce; }
.v-shell { width:min(100%,1360px); padding-inline:56px; margin-inline:auto; }
.v-icon { flex:none; display:inline-block; vertical-align:middle; }
.v-eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:.15em; color:var(--brand-2); }
.v-status-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); }
.v-hero { padding-block:48px 60px; }
.v-hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:34px; align-items:stretch; }
.v-hero-copy { padding-block:20px 0; }
.v-hero h1 { font-size:clamp(56px,5.9vw,84px); font-weight:650; line-height:1.01; letter-spacing:-.055em; margin:26px 0 24px; }
.v-hero h1 em { color:var(--brand); font-style:normal; display:inline-block; position:relative; }
.v-hero h1 em::after { content:''; height:5px; background:#bbd8ca; border-radius:40%; position:absolute; bottom:-6px; left:0; width:100%; transform:rotate(-2deg); }
.v-hero-desc { max-width:395px; font-size:16px; line-height:1.8; color:var(--muted); margin:0 0 29px; }
.v-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.v-btn { gap:26px; padding:16px 22px; font-size:14px; min-height:54px; font-weight:600; }
.v-btn .v-icon { width:18px; height:18px; }
.v-text-link { display:inline-flex; gap:12px; align-items:center; color:var(--ink); font-size:13px; font-weight:650; text-decoration:none; }
.v-text-link .v-icon { width:17px; height:17px; }
.v-text-link:hover { color:var(--brand); }
.v-text-link .v-icon { transition:transform .2s ease; }
.v-text-link:hover .v-icon { transform:translateX(3px); }
.v-trial-note { display:flex; align-items:center; color:var(--muted); font-size:10px; gap:5px; margin:17px 0 0; }
.v-trial-note .v-icon { color:var(--brand); width:13px; height:13px; }
.v-hero-foot { display:flex; gap:16px; align-items:center; margin-top:40px; color:#727987; font-size:10px; line-height:1.7; }
.v-line { width:43px; height:1px; background:#a4aea6; }
.v-hero-visual { position:relative; border-radius:18px; overflow:hidden; min-height:590px; background:#ded3c3; }
.v-hero-photo { width:100%; height:100%; object-fit:cover; object-position:62% center; position:absolute; inset:0; }
.v-hero-visual::after { content:''; position:absolute; inset:70% 0 0; background:linear-gradient(transparent,rgba(17,22,31,.36)); pointer-events:none; }
.v-visual-top { position:absolute; top:22px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; z-index:1; }
.v-onair { border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.9); padding:8px 12px; border-radius:30px; display:inline-flex; align-items:center; gap:7px; font-size:9px; font-weight:600; color:#1e2356; }
.v-onair i,.v-cta-status i { display:block; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.v-photo-index { color:white; font-size:10px; letter-spacing:.1em; }
.v-publish-card { position:absolute; left:24px; right:24px; bottom:44px; z-index:2; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.6); display:flex; align-items:center; gap:13px; padding:16px; border-radius:12px; box-shadow:0 12px 40px #0002; }
.v-publish-icon { display:grid; place-items:center; width:44px; height:44px; background:#e6eee7; color:#0a8576; border-radius:9px; }
.v-publish-card strong { display:block; font-size:13px; color:#1e2356; }
.v-publish-card div>span { display:block; font-size:10px; margin-top:2px; color:#6e7481; }
.v-small-check { margin-left:auto; color:#0a8576; background:#e0eee7; border-radius:50%; padding:5px; display:flex; }
.v-small-check .v-icon { width:14px; height:14px; }
.v-photo-credit { position:absolute; bottom:15px; left:26px; right:26px; color:#fff; z-index:2; font-size:7px; letter-spacing:.13em; }
.v-platforms { padding-block:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.v-platform-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.v-platform-row>p { font-size:11px; color:var(--muted); margin:0; }
.v-platform-names { display:flex; gap:30px; align-items:center; }
.v-platform-names>span { font-size:13px; color:#5d626e; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.v-platform-names b { font-weight:700; letter-spacing:-.03em; }
.v-platform-names .v-icon { width:18px; height:18px; }
.v-platform-row>a { font-size:10px; color:var(--ink); display:flex; align-items:center; gap:7px; text-decoration:none; white-space:nowrap; }
.v-platform-row>a .v-icon { width:14px; height:14px; }
.v-section { padding-block:108px; }
.v-section h2,.v-setup-section h2,.v-last-cta h2 { font-size:clamp(36px,4.1vw,56px); font-weight:600; line-height:1.08; letter-spacing:-.045em; margin:18px 0 0; }
.v-section-top { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:64px; margin-bottom:42px; }
.v-section-desc { max-width:400px; color:var(--muted); font-size:15px; line-height:1.8; margin:0; }
.v-section-top .v-text-link { margin-top:18px; }
.v-industry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 24px; }
.v-industry-card { text-decoration:none; color:inherit; }
.v-industry-photo { position:relative; overflow:hidden; border-radius:12px; background:#e4e1d7; aspect-ratio:1.45; }
.v-industry-photo img { height:100%; width:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.v-industry-card:hover img { transform:scale(1.045); }
.v-industry-number { position:absolute; left:15px; top:15px; color:#fff; background:rgba(18,26,36,.55); border:1px solid #ffffff26; padding:4px 8px; border-radius:5px; font-size:9px; }
.v-industry-arrow { position:absolute; bottom:15px; right:15px; width:31px; height:31px; border-radius:50%; background:#f8f9f6; color:var(--ink); display:grid; place-items:center; transition:background .2s,color .2s; }
.v-industry-arrow .v-icon { width:16px; height:16px; transform:rotate(-35deg); }
.v-industry-card:hover .v-industry-arrow { background:var(--brand); color:#fff; }
.v-industry-caption { padding:17px 1px 0; }
.v-industry-caption h3 { font-family:var(--font); font-size:16px; font-weight:650; margin:0 0 4px; letter-spacing:-.025em; }
.v-industry-caption p { font-size:11px; color:var(--muted); margin:0; }
.v-caption { font-size:10px; color:var(--muted); margin:25px 0 0; line-height:1.8; }
.v-product { background:#151b35; color:#d5d9e4; }
.v-product .v-eyebrow { color:#85c6b4; }
.v-product h2 { color:#f9faf7; }
.v-product .v-section-desc { color:#a7b0c5; }
.v-demo-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.v-demo-tabs button { background:none; border:0; border-bottom:1px solid #465069; border-radius:0; text-align:left; display:flex; align-items:center; gap:14px; color:#a6afc2; font:inherit; font-size:13px; padding:18px 0; cursor:pointer; }
.v-demo-tabs button>span { font-size:10px; color:#67758c; }
.v-demo-tabs button .v-icon { width:16px; height:16px; margin-left:auto; }
.v-demo-tabs button[aria-selected=true] { color:#fff; border-color:#75c6ad; }
.v-demo-tabs button[aria-selected=true]>span { color:#85c6b4; }
.v-demo-browser { background:#fafbf8; color:#33394f; border-radius:14px; overflow:hidden; border:1px solid #ffffff1a; }
.v-browser-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#edf0ea; border-bottom:1px solid #dfe4db; padding:14px 22px; font-size:10px; color:#737d7b; }
.v-window-dots { display:flex; gap:5px; }
.v-window-dots i { display:block; height:6px; width:6px; border-radius:50%; background:#b7bfb5; }
.v-browser-preview { font-size:8px; letter-spacing:.1em; }
.v-demo-panel { display:grid; grid-template-columns:.78fr 1.22fr; min-height:450px; }
.v-demo-panel[hidden] { display:none; }
.v-demo-editor { padding:36px; border-right:1px solid #e4e8e0; display:flex; flex-direction:column; align-items:flex-start; }
.v-demo-label { color:#7d877a; font-size:8px; letter-spacing:.12em; font-weight:600; }
.v-demo-editor h3 { font-size:27px; line-height:1.15; font-weight:600; margin:12px 0; }
.v-demo-editor>p { color:#748071; font-size:12px; line-height:1.7; margin:0 0 16px; }
.v-editor-table { width:100%; font-size:11px; margin-block:4px 22px; }
.v-editor-table>div { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-bottom:1px solid #e2e7dc; gap:12px; }
.v-editor-table>div:first-child { font-size:8px; color:#929b8b; padding-block:6px; }
.v-editor-table>div.v-selected-row { background:#e7f0e7; border:1px solid #a3c9b6; border-radius:6px; color:#0a6758; }
.v-demo-update { background:#1e2356!important; color:#fff!important; border-color:#1e2356!important; font-size:10px; padding:10px 14px; width:100%; display:flex; justify-content:space-between; }
.v-demo-update .v-icon { width:14px; height:14px; }
.v-demo-feedback { font-size:9px; color:#6b7c69; margin-top:12px; min-height:16px; }
.v-demo-stage { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px 44px; background:#e4eae0; }
.v-live-label { color:#72806a; display:flex; align-items:center; gap:7px; letter-spacing:.09em; font-size:8px; margin-bottom:20px; }
.v-live-label i { width:5px; height:5px; background:#0a8576; border-radius:50%; }
.v-demo-tv { width:100%; border:7px solid #222638; border-bottom-width:13px; border-radius:13px; box-shadow:0 20px 35px -20px #0006; position:relative; }
.v-demo-tv::after { content:''; position:absolute; bottom:-9px; left:49%; width:4px; height:4px; background:#f5a70a; border-radius:50%; }
.v-coffee-board { background:#253e32; color:#eef4df; padding:24px 32px 20px; min-height:300px; }
.v-coffee-board>span { display:block; letter-spacing:.2em; font-size:8px; opacity:.7; }
.v-coffee-board h4 { font-family:Georgia,serif; color:#f3eed3; font-size:38px; line-height:1; font-weight:400; letter-spacing:-1px; margin:14px 0 22px; }
.v-coffee-board>div { display:flex; align-items:baseline; gap:18px; justify-content:space-between; padding:6px 0; font-size:11px; border-bottom:1px solid #ffffff26; }
.v-coffee-board>div b { font-weight:500; }
.v-coffee-board small { display:block; font-size:7px; margin-top:15px; opacity:.65; }
.v-demo-stage>p { margin:22px 0 0; font-size:9px; color:#778371; text-align:center; }
.v-demo-disclaimer { text-align:center; font-size:9px; color:#9aa7bb; margin:17px 0 0; }
.v-day-selector { display:flex; gap:8px; margin-top:30px; }
.v-day-selector button { font:inherit; font-size:11px; background:#edf0e8; border:1px solid #d4ddcf; border-radius:6px; padding:8px 13px; cursor:pointer; color:#626f5a; }
.v-day-selector button.active { background:#1e2356; border-color:#1e2356; color:#fff; }
.v-schedule-description { font-size:12px; margin-top:14px; color:#0a8576; font-weight:600; }
.v-schedule-stage,.v-wall-stage { justify-content:center; }
.v-week-head { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; color:#3c4c36; font-size:11px; margin-bottom:24px; }
.v-week-head>span { display:flex; align-items:center; gap:4px; font-size:8px; }
.v-week-head .v-icon { width:12px; height:12px; }
.v-calendar { display:grid; grid-template-columns:28px repeat(5,minmax(0,1fr)); gap:7px; width:100%; }
.v-calendar-hours { display:flex; flex-direction:column; justify-content:space-around; font-size:7px; padding-top:24px; color:#748071; }
.v-calendar-day { display:flex; flex-direction:column; gap:7px; min-width:0; }
.v-calendar-day>b { font-size:8px; text-align:center; color:#697561; padding-bottom:8px; }
.v-calendar-slot { padding:16px 6px; font-size:7px; line-height:1.4; border:1px solid transparent; opacity:.55; border-radius:5px; min-height:65px; overflow-wrap:anywhere; }
.v-calendar-slot.morning { background:#c7dbbb; color:#355529; }
.v-calendar-slot.lunch { background:#d3d8ed; color:#344072; }
.v-calendar-slot.evening { background:#e9d2b8; color:#71532e; }
.v-calendar-slot.selected { opacity:1; border-color:currentColor; }
.v-demo-checks { padding:0; margin:20px 0 0; list-style:none; display:grid; gap:12px; font-size:11px; }
.v-demo-checks li { display:flex; gap:8px; align-items:center; }
.v-demo-checks .v-icon { color:#0a8576; width:14px; height:14px; }
.v-example-wall { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; width:100%; }
.v-wall-monitor { border:4px solid #252b3d; border-bottom-width:7px; border-radius:7px; overflow:hidden; aspect-ratio:16/10; box-shadow:0 10px 18px -10px #0006; }
.v-wall-monitor img { width:100%; height:100%; object-fit:cover; }
.v-example-wall strong { display:block; color:#3f4f3a; font-size:9px; margin-top:7px; }
.v-example-wall>div>span { display:flex; gap:4px; align-items:center; font-size:8px; color:#76836d; margin-top:2px; }
.v-example-wall>div>span i { width:4px; height:4px; background:#0a8576; border-radius:50%; }
.v-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.v-benefit { border-radius:14px; padding:30px; min-width:0; overflow:hidden; }
.v-offline { background:#e4eee4; }
.v-templates { background:#f0e9dd; }
.v-secure { background:#eceef4; }
.v-card-icon { display:flex; align-items:center; color:#496044; margin-bottom:26px; }
.v-card-icon .v-icon { width:27px; height:27px; }
.v-benefit h3 { font-size:27px; line-height:1.12; font-weight:600; margin:0 0 16px; letter-spacing:-.035em; }
.v-benefit>p { font-size:11px; line-height:1.9; margin:0; color:#667360; }
.v-benefit>small { font-size:8px; color:#74806d; display:block; margin-top:18px; }
.v-download-list { display:grid; gap:8px; margin-top:28px; }
.v-download-list>span { display:flex; align-items:center; gap:7px; background:#ffffff80; padding:9px; border:1px solid #d7e1d2; border-radius:6px; font-size:9px; }
.v-download-list .v-icon { width:12px; height:12px; color:#0a8576; }
.v-download-list b { margin-left:auto; font-size:7px; color:#7b8970; font-weight:500; }
.v-template-deck { height:178px; position:relative; margin:32px -5px -20px; }
.v-template-deck>div { width:108px; height:150px; padding:13px; border-radius:5px; position:absolute; border:1px solid #ffffff40; box-shadow:0 10px 25px #51452a1a; }
.v-template-deck>div>span { display:block; font-size:6px; letter-spacing:.1em; }
.v-template-deck>div>b { display:block; font-family:var(--display); font-size:19px; line-height:1; font-weight:600; margin-top:18px; }
.v-template-deck>div>i { display:block; margin-top:18px; font-size:14px; font-style:normal; }
.v-template-one { background:#f5f0d4; color:#40402c; left:0; top:12px; transform:rotate(-12deg); }
.v-template-two { background:#28374e; color:#f8f0da; left:28%; top:0; z-index:2; transform:rotate(-2deg); }
.v-template-three { background:#bdccb1; color:#293c27; right:0; top:16px; transform:rotate(12deg); z-index:3; }
.v-team-list { display:grid; gap:9px; margin-top:30px; }
.v-team-list>span { display:flex; align-items:center; gap:7px; background:#ffffff90; border:1px solid #dce0e9; padding:8px; border-radius:6px; }
.v-team-list i { font-size:8px; font-style:normal; border-radius:50%; background:#dde0ee; padding:6px; color:#5a638b; }
.v-team-list b { font-size:8px; font-weight:600; }
.v-team-list small { font-size:7px; color:#758099; margin-left:auto; }
.v-setup-section { padding:100px 0; background:#eef1e9; }
.v-setup-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:100px; align-items:center; }
.v-setup-art { background:#dbe3d2; border-radius:16px; padding:75px 36px 35px; }
.v-pair-screen { background:#1e2356; color:#c8d5d2; border:8px solid #252a38; border-bottom-width:14px; box-shadow:0 30px 40px -20px #27382166; border-radius:12px; display:flex; flex-direction:column; align-items:center; padding:26px 10px; min-height:235px; }
.v-pair-brand { font-family:var(--display); font-weight:750; font-size:25px; color:#fff; letter-spacing:-1px; }
.v-pair-screen>small { font-size:6px; letter-spacing:.1em; margin-top:22px; }
.v-pair-code { font-size:43px; letter-spacing:4px; font-family:var(--display); font-weight:600; color:#a5d7bf; margin-block:7px; line-height:1.2; }
.v-pair-screen>span:last-child { font-size:7px; opacity:.7; }
.v-pair-stand { height:12px; width:26%; background:#272d38; margin:auto; border-radius:0 0 7px 7px; }
.v-setup-tag { display:flex; gap:8px; font-size:10px; color:#617358; align-items:center; justify-content:center; margin-top:40px; }
.v-setup-tag .v-icon { width:14px; height:14px; }
.v-setup-copy h2 { font-size:clamp(38px,4vw,54px); }
.v-setup-copy ol { counter-reset:setup; padding:0; margin:30px 0 24px; list-style:none; display:grid; gap:22px; }
.v-setup-copy li { counter-increment:setup; position:relative; padding-left:37px; }
.v-setup-copy li::before { content:'0' counter(setup); font-size:9px; position:absolute; left:0; top:4px; color:#0a8576; }
.v-setup-copy li>b { display:block; font-size:12px; color:var(--ink); margin-bottom:4px; }
.v-setup-copy li>span { display:block; font-size:11px; color:#718069; max-width:310px; }
.v-device-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.v-device-card { padding:28px 24px; text-decoration:none; color:inherit; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.v-device-card:last-child { border-right:0; }
.v-device-card:hover { background:#eef2e9; }
.v-device-logo { height:90px; color:#3d444c; font-weight:750; font-size:24px; letter-spacing:-1px; }
.v-device-logo>small { font-size:10px; font-weight:400; letter-spacing:0; color:#93998d; display:block; }
.v-device-card h3 { font-family:var(--font); font-size:12px; letter-spacing:0; margin:0 0 10px; }
.v-device-card p { font-size:10px; line-height:1.8; color:#7b8375; margin:0 0 25px; flex:1; }
.v-device-card>span { display:flex; justify-content:space-between; gap:10px; color:#0a8576; font-size:10px; align-items:center; }
.v-device-card>span .v-icon { width:14px; height:14px; }
.v-centered-head { text-align:center; margin-bottom:56px; }
.v-centered-head .v-eyebrow { justify-content:center; }
.v-centered-head>p { font-size:13px; color:var(--muted); margin:20px auto 0; }
.v-pricing-section { background:#eef1eb; }
.v-pricing-section .plans { gap:18px; }
.v-pricing-section .plan { padding:32px; border:1px solid #d7ddcf; border-radius:12px; background:#f8faf5; }
.v-pricing-section .plan.hl { border-color:#1e2356; background:#1e2356; color:#e0e4f3; box-shadow:none; }
.v-pricing-section .plan h3 { font-size:21px; }
.v-pricing-section .plan-price { font-size:32px; margin-block:12px; }
.v-pricing-section .plan-price .ask { font-size:29px; letter-spacing:-1px; font-weight:650; font-family:var(--display); }
.v-pricing-section .plan-meta { font-size:11px; }
.v-pricing-section .plan li { font-size:11px; line-height:1.7; margin-bottom:4px; padding-left:20px; }
.v-pricing-section .plan.hl h3,.v-pricing-section .plan.hl .plan-price { color:#fff; }
.v-pricing-section .plan.hl .plan-meta,.v-pricing-section .plan.hl .plan-price small { color:#b3bcd7; }
.v-pricing-section .plan.hl li::before { color:#97d1b8; }
.v-pricing-section .plan .btn { font-size:12px; min-height:45px; }
.v-pricing-section .plan.hl .btn { background:#dcecd4; color:#1e2356; border-color:#dcecd4; }
.v-pricing-section .plan-badge { background:#c5dabb; color:#28452d; font-size:8px; padding:5px 11px; top:-12px; left:24px; letter-spacing:.04em; }
.v-pricing-note { text-align:center; color:var(--muted); font-size:10px; margin:25px 0 0; }
.v-faq-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:start; }
.v-faq-layout>div>p { font-size:12px; color:var(--muted); margin-top:25px; }
.v-faq-layout>.faq { gap:0; width:100%; }
.v-faq-layout .faq details { border:none; border-bottom:1px solid var(--line); padding:0; border-radius:0; background:none; }
.v-faq-layout .faq summary { font-size:13px; padding-block:22px; font-weight:600; }
.v-faq-layout .faq details:first-child summary { padding-top:4px; }
.v-faq-layout .faq details p { font-size:12px; line-height:1.8; }
.v-faq-layout .faq summary::after { font-weight:400; font-size:18px; }
.v-last-cta { background:#0b6f62; color:#e3eee5; overflow:hidden; }
.v-last-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center; padding-block:72px; }
.v-last-cta .v-eyebrow { color:#a9cfb9; }
.v-last-cta h2 { color:#f3f5e9; font-size:clamp(36px,4.3vw,58px); }
.v-last-cta p { font-size:13px; color:#c3d9cb; margin-block:20px 28px; }
.v-last-cta .btn { background:#eef1dc; border-color:#eef1dc; color:#1e2356; }
.v-last-cta .v-text-link { color:#edf2e9; }
.v-cta-art { position:relative; width:270px; height:260px; justify-self:center; transform:rotate(7deg); }
.v-cta-word { font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-1px; display:block; margin-bottom:12px; }
.v-cta-status { position:absolute; right:0; top:9px; display:flex; align-items:center; gap:5px; font-size:7px; letter-spacing:.1em; }
.v-cta-screen { height:196px; background:#e6edc9; border:7px solid #174e44; border-bottom-width:13px; border-radius:10px; padding:25px; color:#246457; position:relative; }
.v-cta-screen::after { content:''; height:10px; width:32%; position:absolute; top:100%; left:34%; background:#174e44; border-radius:0 0 5px 5px; }
.v-cta-screen>span { font-family:var(--display); font-size:42px; line-height:1; font-weight:600; letter-spacing:-2px; }
.v-cta-screen>.v-icon { position:absolute; right:24px; bottom:20px; transform:rotate(-35deg); width:35px; height:35px; }
/* Existing sector/help/setup pages inherit the same new shell. */
.viswoo-refresh .hero { background:#eef1e9; }
.viswoo-refresh .hero h1 { font-weight:600; letter-spacing:-.045em; }
.viswoo-refresh .hero .lead { font-size:17px; }
.v-sector-visual { margin:0; border-radius:14px; overflow:hidden; position:relative; }
.v-sector-visual>img { aspect-ratio:4/3; width:100%; height:auto; object-fit:cover; }
.v-sector-visual>figcaption { position:absolute; bottom:12px; right:12px; font-size:8px; background:#fffD; padding:5px 9px; border-radius:5px; color:#273530; }
.v-sector-index-photo { width:calc(100% + 44px); max-width:none; height:190px; object-fit:cover; margin:-22px -22px 20px; }
.viswoo-refresh .sector { overflow:hidden; }
.viswoo-refresh .section.dark { background:#151b35; }
.viswoo-refresh .section-head .kicker,.viswoo-refresh .kicker { font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.viswoo-refresh .help-card,.viswoo-refresh .feature,.viswoo-refresh .step,.viswoo-refresh .recipe { border-radius:12px; }
.viswoo-refresh .page { padding-top:50px; }
@media (min-width:1101px) { .viswoo-refresh .menu { display:flex; position:static; } .viswoo-refresh .menu-btn { display:none; } }
@media (max-width:1100px) {
  .viswoo-refresh .menu-btn { display:block; }
  .viswoo-refresh .menu { display:none; position:absolute; left:0; right:0; top:88px; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:14px 30px 24px; gap:4px; max-height:calc(100dvh - 88px); overflow:auto; }
  .viswoo-refresh .menu.open { display:flex; }
  .viswoo-refresh .menu a:not(.btn) { font-size:14px; padding:12px 8px; }
  .viswoo-refresh .menu .btn { margin:5px 0 0; }
  .viswoo-refresh .menu a.lang-link { margin-left:0; }
  .v-shell { padding-inline:40px; }
  .v-hero h1 { font-size:64px; }
  .v-hero-visual { min-height:570px; }
  .v-hero-grid { gap:20px; }
  .v-hero-foot { margin-top:28px; }
  .v-hero .v-actions { gap:18px; }
  .v-platform-row { flex-wrap:wrap; justify-content:center; gap:20px 30px; }
  .v-platform-row>p { width:100%; text-align:center; }
  .v-platform-names { gap:30px; }
  .v-section { padding-block:85px; }
  .v-demo-editor { padding:28px; }
  .v-demo-stage { padding:28px; }
  .v-benefit { padding:24px; }
  .v-benefit h3 { font-size:24px; }
  .v-template-deck>div { width:95px; height:145px; }
  .v-setup-grid { gap:60px; }
  .v-setup-art { padding:60px 24px 30px; }
  .v-faq-layout { gap:60px; }
}
@media (max-width:760px) {
  .v-shell { padding-inline:24px; }
  .viswoo-refresh .wrap { padding-inline:24px; }
  .viswoo-refresh .top-in { height:72px; }
  .viswoo-refresh .menu { top:72px; max-height:calc(100dvh - 72px); }
  .viswoo-refresh .logo img { height:27px; }
  .v-hero { padding:26px 0 36px; }
  .v-hero-grid { grid-template-columns:1fr; gap:28px; }
  .v-hero-copy { padding-top:0; }
  .v-hero h1 { font-size:clamp(58px,11vw,78px); margin:24px 0; }
  .v-hero-desc { max-width:470px; font-size:15px; margin-bottom:24px; }
  .v-hero-foot { display:none; }
  .v-hero-visual { min-height:430px; border-radius:13px; }
  .v-hero-photo { object-position:center 38%; }
  .v-publish-card { bottom:40px; left:18px; right:18px; padding:13px; }
  .v-visual-top { top:18px; left:18px; right:18px; }
  .v-photo-credit { left:20px; font-size:6px; }
  .v-onair { font-size:8px; }
  .v-platform-row>a { display:none; }
  .v-platform-names { justify-content:center; gap:14px 20px; flex-wrap:wrap; }
  .v-platform-names>span { font-size:12px; }
  .v-section { padding-block:64px; }
  .v-section-top { grid-template-columns:1fr; gap:24px; margin-bottom:30px; }
  .v-section h2,.v-setup-section h2 { font-size:40px; }
  .v-section-desc { font-size:13px; max-width:480px; }
  .v-industry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .v-industry-photo { aspect-ratio:1; border-radius:9px; }
  .v-industry-caption h3 { font-size:13px; }
  .v-industry-caption p { font-size:10px; }
  .v-industry-arrow { width:26px; height:26px; right:10px; bottom:10px; }
  .v-industry-number { top:10px; left:10px; font-size:7px; }
  .v-demo-tabs { gap:12px; margin-bottom:18px; }
  .v-demo-tabs button { font-size:11px; display:block; line-height:1.5; padding:12px 0; }
  .v-demo-tabs button>span { display:block; margin-bottom:5px; }
  .v-demo-tabs button .v-icon { display:none; }
  .v-demo-panel { grid-template-columns:1fr; }
  .v-demo-editor { padding:25px; border-right:0; border-bottom:1px solid #d7dfd1; }
  .v-demo-editor>p br { display:none; }
  .v-demo-editor h3 { font-size:27px; }
  .v-demo-stage { padding:26px; }
  .v-demo-tv { max-width:430px; }
  .v-coffee-board { min-height:260px; }
  .v-browser-bar { padding:13px; font-size:9px; }
  .v-browser-preview { font-size:6px; }
  .v-day-selector { margin-top:10px; }
  .v-calendar { gap:5px; }
  .v-calendar-slot { font-size:7px; padding:16px 4px; }
  .v-benefit-grid { grid-template-columns:1fr; gap:18px; }
  .v-benefit { padding:28px; }
  .v-benefit h3 { font-size:29px; }
  .v-benefit>p { font-size:13px; max-width:430px; }
  .v-benefit>small { font-size:10px; }
  .v-card-icon { margin-bottom:20px; }
  .v-download-list { margin-top:24px; max-width:400px; }
  .v-download-list>span { font-size:11px; padding:12px; }
  .v-download-list b { font-size:9px; }
  .v-template-deck { max-width:340px; margin-inline:auto; height:190px; }
  .v-template-deck>div { width:125px; height:170px; padding:16px; }
  .v-template-deck>div>b { font-size:24px; }
  .v-team-list { max-width:400px; }
  .v-team-list>span { padding:11px; gap:10px; }
  .v-team-list b { font-size:11px; }
  .v-team-list small { font-size:9px; }
  .v-team-list i { font-size:10px; padding:8px; }
  .v-setup-section { padding-block:64px; }
  .v-setup-grid { grid-template-columns:1fr; gap:38px; }
  .v-setup-copy { order:-1; }
  .v-setup-art { padding:45px 30px 30px; }
  .v-pair-screen { max-width:470px; margin:auto; }
  .v-pair-screen>small { font-size:7px; }
  .v-pair-screen>span:last-child { font-size:9px; }
  .v-pair-code { font-size:50px; }
  .v-setup-copy li>b { font-size:14px; }
  .v-setup-copy li>span { font-size:12px; max-width:430px; }
  .v-device-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v-device-card { padding:24px 18px; }
  .v-device-card:nth-child(2) { border-right:0; }
  .v-device-card:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .v-device-logo { font-size:22px; height:75px; }
  .v-device-card h3 { font-size:12px; }
  .v-device-card p { font-size:11px; }
  .v-centered-head { text-align:left; margin-bottom:40px; }
  .v-centered-head .v-eyebrow { justify-content:flex-start; }
  .v-pricing-section .plans { grid-template-columns:1fr; gap:25px; }
  .v-pricing-section .plan h3 { font-size:23px; }
  .v-pricing-section .plan-meta,.v-pricing-section .plan li { font-size:13px; }
  .v-pricing-section .plan .btn { font-size:14px; }
  .v-faq-layout { grid-template-columns:1fr; gap:35px; }
  .v-faq-layout .faq summary { font-size:14px; }
  .v-faq-layout .faq details p { font-size:13px; }
  .v-last-grid { grid-template-columns:1fr; gap:44px; padding-block:55px; }
  .v-last-cta h2 { font-size:42px; }
  .v-cta-art { justify-self:end; margin-right:15px; width:230px; height:225px; }
  .v-cta-screen { height:175px; }
  .v-cta-screen>span { font-size:36px; }
  .viswoo-refresh .foot-in { gap:35px 25px; grid-template-columns:1fr 1fr; }
  .viswoo-refresh .foot-in>div:first-child { grid-column:1/-1; }
  .viswoo-refresh .foot { padding-top:45px; }
  .viswoo-refresh .page { padding-top:32px; }
  .viswoo-refresh .hero-grid { gap:30px; }
  .v-sector-visual>img { aspect-ratio:4/3; }
  .v-sector-index-photo { height:200px; }
}
@media (max-width:380px) {
  .v-shell,.viswoo-refresh .wrap { padding-inline:20px; }
  .v-hero h1 { font-size:56px; }
  .v-hero .v-actions { gap:18px; }
  .v-hero .v-btn { padding:14px 16px; gap:12px; font-size:13px; }
  .v-hero .v-text-link { font-size:11px; gap:6px; }
  .v-hero-visual { min-height:370px; }
  .v-hero .v-trial-note { font-size:8px; }
  .v-section h2,.v-setup-section h2 { font-size:35px; }
  .v-industry-caption h3 { font-size:12px; }
  .v-industry-photo { aspect-ratio:.9; }
  .v-demo-editor,.v-demo-stage { padding:22px; }
  .v-coffee-board { padding:24px; min-height:260px; }
  .v-benefit { padding:24px; }
  .v-template-deck>div { width:105px; height:153px; }
  .v-pair-code { font-size:38px; }
  .v-pair-screen>small { font-size:5px; }
  .v-device-card { padding:22px 14px; }
  .v-device-logo { font-size:19px; }
  .v-last-cta h2 { font-size:36px; }
}
@media (prefers-reduced-motion:reduce) { .v-industry-photo img,.v-text-link .v-icon,.v-industry-arrow { transition:none; } }
@media print { .v-demo-tabs,.v-last-cta { display:none; } .v-hero-visual { min-height:300px; } .v-section { padding-block:25px; } }
/* Comfortable marketing copy sizes; tiny type is limited to mock-interface details. */
.v-industry-caption p { font-size:12px; }
.v-benefit>p { font-size:13px; }
.v-device-card p { font-size:12px; }
.v-demo-editor>p { font-size:13px; }
.v-demo-disclaimer,.v-pricing-note,.v-caption { font-size:11px; }
.v-trial-note { font-size:11px; }
@media (max-width:760px) { .v-industry-caption p { font-size:11px; } .v-hero .v-trial-note { font-size:10px; } }

/* Immersive product experience: Viswoo broadcast control centre. */
.v-command-hero { position:relative; isolation:isolate; overflow:hidden; background:#0c142d; color:#d9e3e9; padding-bottom:0; }
.v-digital-field { position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.8; pointer-events:none; }
.v-command-hero::before { content:''; position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 75% 38%,#19494355 0,transparent 55%),linear-gradient(120deg,#0c142d,#151c3a); }
.v-command-topline { display:flex; justify-content:space-between; align-items:center; gap:25px; border-bottom:1px solid #ffffff14; padding:22px 0; font-size:9px; color:#91b4bd; letter-spacing:.1em; }
.v-command-topline>span:first-child { display:flex; align-items:center; gap:8px; }
.v-command-topline i { width:5px; height:5px; border-radius:50%; background:#8cddc4; box-shadow:0 0 16px #72d6bd; }
.v-command-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:0; min-height:650px; align-items:center; }
.v-command-copy { padding-block:40px; position:relative; z-index:3; }
.v-tech-eyebrow { display:flex; align-items:center; gap:12px; color:#0a8576; font-size:11px; font-weight:600; letter-spacing:.12em; }
.v-tech-eyebrow>span { font-size:10px; border:1px solid currentColor; border-radius:4px; padding:3px 6px; letter-spacing:0; opacity:.8; }
.v-command-copy>.v-tech-eyebrow { color:#8bd5c4; font-size:9px; }
.v-command-copy h1 { font-size:clamp(54px,5.5vw,78px); line-height:1.02; font-weight:650; letter-spacing:-.045em; color:#f7fafb; margin:24px 0; }
.v-command-copy h1 em { font-style:normal; color:#92dfc4; }
.v-command-copy>p { color:#a9bbcf; font-size:15px; line-height:1.9; max-width:390px; margin:0 0 28px; }
.v-command-copy .v-actions { gap:22px; }
.v-electric-btn { background:#93e0c5!important; border-color:#93e0c5!important; color:#0b2524!important; box-shadow:0 0 40px #67c6ae12!important; font-size:14px; padding:15px 20px; gap:20px; transition:box-shadow .2s,transform .2s; }
.v-electric-btn:hover { box-shadow:0 0 35px #93e0c54d!important; transform:translateY(-2px); }
.v-command-secondary { color:#e1edf2; text-decoration:none; font-size:12px; display:flex; align-items:center; gap:12px; }
.v-command-secondary>span { font-size:20px; color:#7ec5b3; }
.v-command-trial { display:flex; align-items:center; gap:10px; color:#a4b8c9; font-size:10px; margin-top:16px; }
.v-command-trial>i { display:block; width:3px; height:3px; border-radius:50%; background:#647c90; }
.v-hero-experiment { margin-top:30px; max-width:340px; }
.v-experiment-label { display:block; font-size:8px; letter-spacing:.08em; color:#6e899f; margin-bottom:8px; }
.v-hero-experiment>button { display:flex; align-items:center; gap:18px; width:100%; background:#ffffff08; border:1px solid #7fbbba38; border-radius:8px; padding:12px 14px; color:#dce8eb; cursor:pointer; font:inherit; font-size:12px; }
.v-hero-experiment>button>b { border:1px solid #8bd5c44d; color:#a2e7cc; background:#78bfa312; border-radius:4px; padding:3px 8px; font-size:12px; }
.v-price-action { margin-left:auto; color:#91caba; font-size:9px; }
.v-hero-experiment>button:hover { border-color:#93e0c5; background:#8bd5c418; }
.v-experiment-feedback { font-size:9px; color:#6e899f; display:block; margin-top:7px; min-height:15px; }
.v-universe { height:580px; min-width:0; position:relative; transform:perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transform-style:preserve-3d; transition:transform .35s ease-out; }
.v-universe::before { content:''; position:absolute; left:5%; right:-20%; bottom:7%; height:45%; background:radial-gradient(ellipse,#3d9a8b22,transparent 65%); filter:blur(20px); transform:rotate(-10deg); }
.v-orbit { position:absolute; border:1px solid #6caaab13; border-radius:50%; width:630px; height:630px; top:-15px; left:15px; pointer-events:none; }
.v-orbit-two { width:470px; height:470px; top:65px; left:95px; border-style:dashed; animation:v-orbit 70s linear infinite; }
.v-signal-lines { width:100%; height:100%; position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }
.v-signal-lines path { stroke:#83cdb4; stroke-width:1.3px; stroke-dasharray:4 8; opacity:.6; animation:v-signal 7s linear infinite; }
.v-signal-lines circle { stroke:#92dfc4; fill:#213f3c; stroke-width:1.3px; }
.v-universe-tv { position:absolute; top:28px; left:14%; right:-1%; z-index:2; transform:rotateY(-8deg) rotateZ(1deg); transform-origin:center; }
.v-hardware-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#88b0bb; font-size:7px; letter-spacing:.12em; margin-bottom:10px; }
.v-hardware-meta>span:first-child { display:flex; align-items:center; gap:6px; }
.v-hardware-meta i { background:#94e4c8; width:4px; height:4px; border-radius:50%; box-shadow:0 0 8px #83cdb4; }
.v-hardware-bezel { border:7px solid #242e40; border-top-color:#384b5d; border-left-color:#3f5260; border-bottom:12px solid #202937; border-radius:11px; box-shadow:0 30px 70px #0008,0 0 0 1px #99d8d42b; position:relative; overflow:hidden; aspect-ratio:16/10; background:#182c2d; }
.v-hardware-bezel::after { content:''; position:absolute; inset:0; background:linear-gradient(130deg,#ffffff0d,transparent 40%); pointer-events:none; }
.v-hero-scene { width:100%; height:100%; position:relative; overflow:hidden; animation:v-scene-in .7s ease both; }
.v-hero-scene[hidden] { display:none; }
.v-hero-scene>img { width:100%; height:100%; object-fit:cover; }
.v-hero-campaign-copy { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; padding:30px 32px; color:#f7f0de; }
.v-hero-campaign-copy>span:first-child { font-size:7px; letter-spacing:.14em; }
.v-hero-campaign-copy>strong { font-family:var(--display); font-weight:500; line-height:1.02; letter-spacing:-1px; font-size:34px; margin:26px 0 12px; }
.v-hero-campaign-copy>span:nth-child(3) { font-size:7px; }
.v-hero-menu-line { margin-top:auto; display:flex; gap:25px; align-items:center; border-top:1px solid #ffffff50; padding-top:10px; font-size:10px; }
.v-hero-menu-line>b:last-child { font-size:19px; font-weight:550; color:#c7dfb7; }
.v-tv-base { width:25%; height:13px; background:linear-gradient(#384353,#151d29); border-radius:0 0 5px 5px; margin:auto; }
.v-universe-panel { position:absolute; left:-2%; right:29%; bottom:37px; z-index:4; transform:rotateZ(-3deg); }
.v-universe-panel .v-hardware-meta { margin-left:10px; }
.v-laptop-screen { border:7px solid #303c4f; border-left-color:#566274; border-top-color:#4b5b6c; border-radius:9px 9px 4px 4px; overflow:hidden; background:#f5f7fa; box-shadow:0 25px 45px #0006,0 0 1px 1px #bddbc43d; }
.v-laptop-screen>img { width:100%; aspect-ratio:1.51; object-fit:cover; object-position:top; }
.v-laptop-base { height:9px; background:linear-gradient(#788998,#303f4f); border-radius:2px 2px 12px 12px; width:110%; margin-left:-5%; position:relative; }
.v-laptop-base::before { content:''; width:20%; height:3px; position:absolute; top:0; left:40%; border-radius:0 0 5px 5px; background:#24303e; }
.v-universe-phone { width:114px; position:absolute; right:-10px; bottom:29px; z-index:5; transform:rotateZ(7deg); background:#222a37; border:5px solid #344456; border-top-width:12px; border-bottom-width:12px; border-radius:19px; box-shadow:0 25px 50px #0008,0 0 0 1px #ffffff30; }
.v-universe-phone>img { width:100%; border-radius:6px; }
.v-phone-speaker { position:absolute; top:-8px; left:35%; width:30%; height:3px; background:#0c1420; border-radius:10px; }
.v-phone-home { position:absolute; bottom:-7px; left:35%; width:30%; height:2px; background:#7e8c98; border-radius:10px; }
.v-sync-notice { display:flex; align-items:center; gap:10px; border:1px solid #a3d7d038; border-radius:10px; background:#152d35e8; backdrop-filter:blur(10px); padding:12px 16px; position:absolute; right:8%; bottom:9px; z-index:6; box-shadow:0 10px 40px #0003; }
.v-sync-icon { width:27px; height:27px; border-radius:8px; background:#8bd5c41a; color:#92dfc4; display:grid; place-items:center; font-size:12px; }
.v-sync-notice strong { font-size:10px; color:#d6eee7; display:block; font-weight:550; }
.v-sync-notice div>span { font-size:8px; color:#83a6ad; display:block; margin-top:2px; }
.v-sync-pulse { width:5px; height:5px; border-radius:50%; background:#92dfc4; margin-left:10px; box-shadow:0 0 0 4px #92dfc415; animation:v-led 3s ease-in-out infinite; }
.v-universe-coordinate { position:absolute; top:4px; left:14%; color:#547684; font-size:7px; letter-spacing:.1em; }
.v-hero-office { background:#193d37; }
.v-office-art { position:absolute; width:210px; height:210px; right:-15px; top:40px; transform:rotate(-25deg); }
.v-office-art>span { position:absolute; border:1px solid #ace3b1; border-radius:50%; width:100%; height:100%; opacity:.7; }
.v-office-art>span:nth-child(2) { width:75%; height:75%; top:12.5%; left:12.5%; border-width:20px; opacity:.2; }
.v-office-art>span:nth-child(3) { width:45%; height:45%; top:27.5%; left:27.5%; background:#c8dfb3; opacity:.5; }
.v-office-clock { position:absolute; right:20px; top:15px; font-size:10px; color:#c8dfb3; }
.v-command-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ffffff14; gap:25px; padding:22px 0 24px; }
.v-scene-picker { display:flex; align-items:center; gap:8px; }
.v-scene-picker>span { font-size:8px; letter-spacing:.1em; color:#698b9d; margin-right:12px; }
.v-scene-picker>button { font:inherit; font-size:10px; padding:8px 14px; border:1px solid #ffffff1c; border-radius:6px; background:#ffffff03; color:#8fa7b9; cursor:pointer; }
.v-scene-picker>button.active { border-color:#8bd5c477; color:#b7f0d8; background:#8bd5c410; }
.v-scroll-cue { color:#65879a; font-size:8px; letter-spacing:.1em; text-decoration:none; display:flex; gap:15px; align-items:center; }
.v-scroll-cue>i { font-style:normal; font-size:18px; color:#92dfc4; animation:v-scroll 2s ease-in-out infinite; }
.viswoo-refresh .v-platforms { background:#f0f4f1; padding-block:31px; }
.v-platform-row>p { font-size:13px; }
.v-platform-names>span { font-size:16px; }
.v-platform-row>a { font-size:12px; }
.v-section h2 { font-size:clamp(40px,4.4vw,62px); }
.v-section-desc { font-size:17px; }
.v-section-top { gap:70px; margin-bottom:52px; }
.v-section .v-eyebrow { font-size:12px; }
.v-product { background:#f4f7f5; color:#3f4e56; }
.v-product h2 { color:#1e2356; }
.v-product .v-eyebrow { color:#0a8576; }
.v-product .v-section-desc { color:#66737b; }
.v-demo-tabs button { font-size:15px; color:#7e8c87; border-bottom-color:#d2ddd4; }
.v-demo-tabs button[aria-selected=true] { color:#0a6758; border-bottom:2px solid #0a8576; }
.v-demo-tabs button[aria-selected=true]>span { color:#0a8576; }
.v-demo-tabs button>span { font-size:12px; }
.v-demo-browser { border:1px solid #ced9d2; box-shadow:0 30px 80px -35px #173e3229; }
.v-demo-disclaimer { color:#7d8b84; }
.v-demo-panel { min-height:500px; }
.v-demo-editor { padding:42px; }
.v-demo-editor h3 { font-size:33px; }
.v-demo-editor>p { font-size:14px; }
.v-editor-table { font-size:14px; }
.v-editor-table>div:first-child { font-size:10px; }
.v-demo-update { font-size:12px; min-height:44px; }
.v-demo-feedback { font-size:11px; }
.v-demo-label { font-size:10px; }
.v-demo-stage>p { font-size:11px; }
.v-browser-bar { font-size:12px; }
.v-browser-preview { font-size:9px; }
.v-live-label { font-size:10px; }
.v-live-story { padding-block:120px; background:#0d1732; overflow:hidden; }
.v-live-story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; align-items:center; }
.v-live-story-copy .v-tech-eyebrow { color:#9fd2c1; font-size:10px; }
.v-live-story h2 { font-size:clamp(40px,4.6vw,63px); line-height:1.05; letter-spacing:-.04em; font-weight:600; color:#f0f5f5; margin:24px 0; }
.v-live-story-copy>p { font-size:15px; color:#9fadc1; line-height:1.9; }
.v-live-steps { display:flex; flex-direction:column; gap:15px; margin-block:30px; }
.v-live-steps>span { display:flex; align-items:center; gap:13px; color:#c2d8d6; font-size:12px; }
.v-live-steps i { font-style:normal; font-size:9px; color:#6ca994; background:#85cbb412; border:1px solid #85cbb42b; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; }
.v-live-story .v-text-link { color:#9ddac4; font-size:12px; }
.v-live-photo { position:relative; min-width:0; }
.v-live-photo>img { width:100%; height:530px; object-fit:cover; object-position:65%; border-radius:14px; }
.v-live-editor { position:absolute; left:-35px; bottom:35px; width:265px; background:#f4f8f3; border:1px solid #c7d9cb; padding:22px; border-radius:10px; box-shadow:0 25px 60px #0006; }
.v-live-editor>div:first-child { display:flex; align-items:center; gap:6px; font-size:8px; letter-spacing:.08em; color:#748976; }
.v-live-dot { width:5px; height:5px; background:#0a8576; border-radius:50%; box-shadow:0 0 0 4px #0a857614; }
.v-live-editor>strong { display:block; color:#1e2356; font-size:17px; margin-block:13px 18px; }
.v-live-edit-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 10px; border:1px solid #8bbda1; border-radius:6px; background:#e5f0e5; color:#31573e; font-size:12px; }
.v-live-edit-row>b { display:flex; align-items:center; gap:3px; font-weight:500; }
.v-caret { display:inline-block; width:1px; height:14px; background:#0a8576; animation:v-caret 1.2s steps(2) infinite; }
.v-live-save { margin-top:13px; color:#4a7955; font-size:9px; display:flex; align-items:center; gap:7px; }
.v-live-save>span { background:#dce9d8; padding:2px 5px; border-radius:4px; }
.v-live-photo-label { position:absolute; top:17px; right:16px; font-size:7px; padding:5px 8px; color:#fff; background:#0005; border-radius:4px; }
.v-reel-section { background:#e7eee9; }
.v-reel-workspace { background:#111b30; border-radius:16px; border:1px solid #31463f; overflow:hidden; box-shadow:0 25px 60px -25px #183a3b3d; }
.v-reel-topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 26px; border-bottom:1px solid #ffffff13; color:#7c9f9e; font-size:10px; letter-spacing:.08em; }
.v-reel-topbar>span:first-child { display:flex; align-items:center; gap:9px; }
.v-reel-topbar i { width:5px; height:5px; background:#b3deb0; border-radius:50%; box-shadow:0 0 10px #b3deb0; }
.v-reel-topbar b { font-weight:500; color:#a7d3bc; }
.v-reel-main { display:grid; grid-template-columns:.6fr 1.4fr; min-height:380px; padding:35px; gap:35px; }
.v-reel-side { padding:15px; }
.v-reel-side>span { color:#7d9f99; font-size:10px; letter-spacing:.1em; }
.v-reel-side h3 { color:#ecf1ef; font-size:36px; line-height:1.05; font-weight:550; letter-spacing:-1px; margin:20px 0; }
.v-reel-side>p { color:#7d93a5; font-size:13px; line-height:1.8; }
.v-reel-stats { display:flex; gap:30px; margin-top:30px; }
.v-reel-stats>span { display:flex; flex-direction:column; color:#6c8f94; font-size:9px; gap:3px; }
.v-reel-stats b { font-family:var(--display); font-size:32px; color:#acd4bd; font-weight:500; }
.v-reel-preview { background:#000; border:5px solid #2d3c4b; border-radius:8px; overflow:hidden; min-height:330px; position:relative; }
.v-reel-scene { position:absolute; inset:0; animation:v-scene-in .5s ease both; }
.v-reel-scene[hidden] { display:none; }
.v-reel-scene>img { width:100%; height:100%; object-fit:cover; }
.v-reel-scene>span { position:absolute; display:flex; gap:7px; align-items:center; bottom:20px; left:20px; font-size:11px; color:#e5eee7; background:#132532cc; padding:8px 12px; border:1px solid #ffffff1a; border-radius:5px; backdrop-filter:blur(7px); }
.v-reel-scene>span>i { background:#d9aa48; width:5px; height:5px; border-radius:50%; }
.v-reel-timeline { display:grid; grid-template-columns:1.2fr .8fr 1.5fr 1fr; gap:8px; padding:8px 35px 20px; }
.v-reel-timeline>button { display:block; position:relative; padding:0; border:1px solid #ffffff1c; background:#1c2e3c; cursor:pointer; border-radius:7px; overflow:hidden; text-align:left; transition:transform .2s,border-color .2s; }
.v-reel-timeline>button>img { width:100%; height:95px; object-fit:cover; opacity:.6; transition:opacity .3s; }
.v-reel-timeline>button>span { display:flex; align-items:center; gap:7px; color:#9eb6b8; font-size:10px; padding:10px; }
.v-reel-timeline>button>span>b { font-weight:500; color:#5c8a8e; font-size:8px; }
.v-reel-timeline>button>span>small { margin-left:auto; white-space:nowrap; color:#72969b; font-size:8px; }
.v-reel-timeline>button.active { border-color:#a3d9bc; box-shadow:0 0 0 1px #a3d9bc; transform:translateY(-5px); }
.v-reel-timeline>button.active>img { opacity:1; }
.v-reel-timeline>button.active>span { color:#d9ece1; }
.v-reel-ruler { display:flex; justify-content:space-between; padding:0 35px 22px; font-size:8px; color:#5f8089; }
.v-world-section { background:#f5f7f4; }
.v-world-explorer { display:grid; grid-template-columns:310px minmax(0,1fr); border:1px solid #d4ded6; border-radius:14px; overflow:hidden; min-height:510px; }
.v-world-tabs { display:flex; flex-direction:column; justify-content:center; background:#e9eeea; padding:20px; }
.v-world-tabs button { border:1px solid transparent; border-bottom-color:#d3dcd3; background:none; font:inherit; display:flex; align-items:center; text-align:left; padding:22px 14px; gap:17px; color:#6d7d77; cursor:pointer; border-radius:0; }
.v-world-tabs button:last-child { border-bottom-color:transparent; }
.v-world-tabs button>span { font-size:10px; color:#9aa69c; }
.v-world-tabs button>strong { font-size:14px; font-weight:550; }
.v-world-tabs button>.v-icon { width:16px; height:16px; margin-left:auto; color:#96a79c; }
.v-world-tabs button[aria-selected=true] { background:#162b30; border:1px solid #162b30; border-radius:7px; color:#e1eee4; }
.v-world-tabs button[aria-selected=true]>span,.v-world-tabs button[aria-selected=true]>.v-icon { color:#8cd5b5; }
.v-world-stage { position:relative; min-width:0; background:#cbd6c9; }
.v-world-panel { height:100%; position:relative; overflow:hidden; min-height:510px; animation:v-scene-in .6s ease both; }
.v-world-panel[hidden] { display:none; }
.v-world-panel>img { width:100%; height:100%; position:absolute; object-fit:cover; }
.v-world-panel::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#071929d9); pointer-events:none; }
.v-world-stamp { position:absolute; top:22px; right:22px; color:#fff; border:1px solid #ffffff50; padding:6px 10px; border-radius:4px; font-size:8px; letter-spacing:.13em; }
.v-world-caption { position:absolute; bottom:35px; left:35px; right:35px; z-index:1; display:flex; justify-content:space-between; gap:25px; align-items:end; }
.v-world-caption>div>span { color:#b9ccbd; font-size:11px; }
.v-world-caption h3 { color:#fff; font-size:31px; line-height:1.1; margin:10px 0 0; max-width:420px; font-weight:550; letter-spacing:-1px; }
.v-world-caption>a { display:flex; padding:15px; border:1px solid #ffffff60; border-radius:50%; color:#f2f6f0; background:#ffffff0d; transition:background .2s; }
.v-world-caption>a:hover { background:#a3d9bc; color:#142d29; }
.v-benefit-grid { gap:24px; }
.v-benefit { padding:35px; }
.v-benefit h3 { font-size:32px; }
.v-benefit>p { font-size:14px; }
.viswoo-refresh .v-last-cta { background:linear-gradient(120deg,#0b4f49,#0b7565); position:relative; }
.viswoo-refresh .v-last-cta::before { content:''; position:absolute; inset:0; background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px); background-size:45px 45px; pointer-events:none; }
.viswoo-refresh .v-last-grid { position:relative; }
.v-scroll-progress { position:fixed; top:0; left:0; height:2px; background:#0a8576; width:100%; transform:scaleX(var(--page-progress,0)); transform-origin:left; z-index:999; }
.v-world-tabs button:focus-visible,.v-scene-picker button:focus-visible,.v-hero-experiment button:focus-visible,.v-reel-timeline button:focus-visible { outline:3px solid #72c6a2; outline-offset:3px; }
.v-universe.price-updated .v-hardware-bezel { animation:v-price-flash .8s ease; }
.v-universe.price-updated .v-hero-menu-line { animation:v-price-flash .8s ease; }
@keyframes v-orbit { to { transform:rotate(360deg); } }
@keyframes v-signal { to { stroke-dashoffset:-120; } }
@keyframes v-led { 50% { box-shadow:0 0 0 7px #92dfc400; } }
@keyframes v-scroll { 50% { transform:translateY(5px); } }
@keyframes v-caret { 50% { opacity:0; } }
@keyframes v-scene-in { from { opacity:.3; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }
@keyframes v-price-flash { 20%,60% { box-shadow:0 0 20px #a3e9c677,0 0 0 1px #a3e9c6; } }
@media (max-width:1100px) {
 .v-command-layout { grid-template-columns:.82fr 1.18fr; min-height:630px; }
 .v-command-copy h1 { font-size:62px; }
 .v-command-copy>p { font-size:14px; }
 .v-universe { height:515px; }
 .v-universe-tv { left:10%; right:-4%; }
 .v-hero-campaign-copy { padding:24px; }
 .v-hero-campaign-copy>strong { font-size:29px; margin-top:20px; }
 .v-universe-panel { bottom:60px; right:24%; }
 .v-universe-phone { width:95px; right:-16px; bottom:55px; }
 .v-sync-notice { bottom:30px; right:7%; padding:10px; }
 .v-orbit { width:520px; height:520px; }
 .v-orbit-two { width:400px; height:400px; top:45px; left:70px; }
 .v-command-copy .v-actions { gap:15px; flex-direction:column; align-items:flex-start; }
 .v-live-story-grid { gap:50px; }
 .v-live-photo>img { height:530px; }
 .v-world-explorer { grid-template-columns:270px 1fr; }
 .v-world-tabs { padding:15px; }
 .v-world-tabs button { padding:22px 10px; gap:10px; }
 .v-world-tabs button>strong { font-size:13px; }
 .v-world-caption { left:25px; right:25px; bottom:25px; }
 .v-world-caption h3 { font-size:28px; }
 .v-reel-main { grid-template-columns:.7fr 1.3fr; padding:25px; gap:20px; }
 .v-reel-timeline { padding-inline:25px; }
 .v-reel-timeline>button>span { font-size:9px; gap:4px; }
 .v-reel-side { padding:10px; }
 .v-reel-side h3 { font-size:30px; }
}
@media (max-width:760px) {
 .v-command-topline { font-size:7px; padding-block:17px; }
 .v-command-topline>span:last-child { display:none; }
 .v-command-layout { grid-template-columns:1fr; min-height:0; }
 .v-command-copy { padding:30px 0 5px; }
 .v-command-copy h1 { font-size:clamp(55px,10vw,70px); margin-block:22px; }
 .v-command-copy>p { font-size:15px; max-width:490px; }
 .v-command-copy .v-actions { flex-direction:row; align-items:center; gap:22px; }
 .v-command-copy>.v-tech-eyebrow { font-size:8px; }
 .v-command-secondary { font-size:11px; }
 .v-hero-experiment { margin-top:27px; max-width:380px; }
 .v-universe { height:500px; width:100%; max-width:600px; margin-inline:auto; transform:none!important; }
 .v-universe-tv { top:50px; left:9%; right:0; }
 .v-hardware-bezel { border-width:6px; border-bottom-width:10px; }
 .v-hero-campaign-copy { padding:22px; }
 .v-hero-campaign-copy>strong { font-size:30px; margin:20px 0 10px; }
 .v-hero-menu-line { font-size:9px; gap:20px; }
 .v-hero-menu-line>b:last-child { font-size:16px; }
 .v-universe-panel { left:0; right:25%; bottom:55px; }
 .v-laptop-screen { border-width:5px; }
 .v-universe-phone { width:88px; right:-2px; bottom:43px; border-radius:15px; }
 .v-sync-notice { bottom:15px; right:5%; padding:10px 12px; }
 .v-universe-coordinate { top:28px; left:9%; font-size:6px; }
 .v-orbit { width:450px; height:450px; left:calc(50% - 225px); top:20px; }
 .v-orbit-two { width:340px; height:340px; top:75px; left:calc(50% - 170px); }
 .v-command-bottom { flex-direction:column; gap:20px; padding-block:20px; }
 .v-scene-picker { width:100%; flex-wrap:wrap; gap:7px; }
 .v-scene-picker>span { width:100%; margin:0 0 4px; }
 .v-scene-picker>button { flex:1; font-size:10px; padding:9px 8px; }
 .v-scroll-cue { display:none; }
 .v-platform-row>p { font-size:12px; }
 .v-platform-names>span { font-size:14px; }
 .v-section h2 { font-size:40px; }
 .v-section-desc { font-size:15px; }
 .v-tech-eyebrow { font-size:9px; gap:8px; }
 .v-section-top { gap:24px; margin-bottom:35px; }
 .v-demo-tabs button { font-size:12px; }
 .v-demo-editor { padding:26px; }
 .v-demo-editor h3 { font-size:30px; }
 .v-demo-panel { min-height:0; }
 .v-demo-update { font-size:12px; }
 .v-live-story { padding-block:65px; }
 .v-live-story-grid { grid-template-columns:1fr; gap:40px; }
 .v-live-story h2 { font-size:44px; }
 .v-live-story-copy>p { font-size:14px; }
 .v-live-photo { padding-bottom:45px; }
 .v-live-photo>img { height:440px; object-position:60%; }
 .v-live-editor { left:16px; bottom:0; width:260px; padding:20px; }
 .v-live-photo-label { font-size:6px; }
 .v-reel-main { grid-template-columns:1fr; padding:22px; gap:20px; }
 .v-reel-side { padding:0; }
 .v-reel-side h3 { font-size:32px; margin-block:15px; }
 .v-reel-side h3 br { display:none; }
 .v-reel-side>p { font-size:13px; }
 .v-reel-stats { gap:25px; margin-top:20px; }
 .v-reel-stats b { font-size:26px; }
 .v-reel-preview { min-height:240px; }
 .v-reel-topbar { padding:16px; font-size:7px; letter-spacing:.03em; }
 .v-reel-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 10px; padding:10px 22px 22px; }
 .v-reel-timeline>button>img { height:90px; }
 .v-reel-timeline>button>span { font-size:9px; flex-wrap:wrap; }
 .v-reel-timeline>button>span>small { font-size:8px; }
 .v-reel-ruler { padding-inline:22px; }
 .v-world-explorer { grid-template-columns:1fr; }
 .v-world-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:4px; }
 .v-world-tabs button { padding:12px 8px; gap:8px; border-bottom-color:transparent; border-radius:5px; }
 .v-world-tabs button>span { font-size:8px; }
 .v-world-tabs button>strong { font-size:11px; }
 .v-world-tabs button>.v-icon { display:none; }
 .v-world-panel { min-height:420px; }
 .v-world-caption { bottom:25px; left:22px; right:22px; gap:15px; }
 .v-world-caption>div>span { font-size:10px; }
 .v-world-caption h3 { font-size:29px; }
 .v-world-caption>a { padding:10px; }
 .v-world-caption>a .v-icon { width:20px; height:20px; }
 .v-world-stamp { top:16px; right:16px; font-size:7px; }
 .v-benefit { padding:30px; }
 .v-benefit h3 { font-size:31px; }
 .v-benefit>p { font-size:14px; }
}
@media (max-width:400px) {
 .v-command-copy h1 { font-size:54px; }
 .v-command-copy>p { font-size:14px; }
 .v-command-copy .v-actions { gap:17px; }
 .v-command-copy .v-btn { font-size:12px; padding:14px 15px; gap:13px; }
 .v-command-secondary { font-size:10px; gap:6px; }
 .v-universe { height:405px; }
 .v-universe-tv { left:7%; top:45px; }
 .v-universe-panel { bottom:50px; right:24%; }
 .v-universe-phone { width:72px; bottom:40px; }
 .v-hero-campaign-copy { padding:18px; }
 .v-hero-campaign-copy>strong { font-size:25px; margin-top:15px; }
 .v-hero-campaign-copy>span:first-child { font-size:6px; }
 .v-hero-campaign-copy>span:nth-child(3) { font-size:6px; }
 .v-sync-notice { padding:8px 10px; right:1%; bottom:10px; gap:8px; }
 .v-sync-notice strong { font-size:9px; }
 .v-sync-notice div>span { font-size:7px; }
 .v-hardware-meta { font-size:6px; }
 .v-section h2 { font-size:35px; }
 .v-world-tabs button>strong { font-size:10px; }
 .v-world-tabs button { gap:5px; padding:12px 6px; }
 .v-world-panel { min-height:380px; }
 .v-world-caption h3 { font-size:26px; }
 .v-reel-preview { min-height:210px; }
 .v-reel-timeline>button>span>small { display:none; }
 .v-live-editor { width:240px; left:12px; }
 .v-live-story h2 { font-size:39px; }
}
@media (prefers-reduced-motion:reduce) {
 .v-orbit-two,.v-signal-lines path,.v-sync-pulse,.v-scroll-cue>i,.v-caret,.v-hero-scene,.v-world-panel,.v-reel-scene,.v-universe.price-updated .v-hardware-bezel,.v-universe.price-updated .v-hero-menu-line { animation:none!important; }
 .v-universe { transform:none!important; transition:none!important; }
}
.v-motion-toggle { background:#ffffff04; border:1px solid #8fc2bc33; color:#6da89c; font:inherit; font-size:8px; padding:6px 8px; border-radius:5px; cursor:pointer; letter-spacing:.03em; }
.v-motion-toggle:hover { color:#c8e8dc; border-color:#8fc2bc; }
.v-effects-paused *, .v-effects-paused *::before, .v-effects-paused *::after { animation-play-state:paused!important; }
@media (max-width:760px) { .v-command-topline { gap:10px; } .v-motion-toggle { font-size:7px; padding:5px 7px; flex:none; } }

/* ================================================================== açılış sahnesi (vs-*)
   Dört katman: vitrin TV'si, kasa üstü dikey ekran, panel penceresi, telefon.
   Ölçüler sahne genişliğine göre (cqw); mobilde katmanlar alt alta dizilir. */
.vs-wrap { container-type:inline-size; position:relative; width:100%; min-width:0; }
.vs-stage { position:relative; width:100%; aspect-ratio:640/560; --rx:0deg; --ry:0deg; }
.vs-stage::before { content:''; position:absolute; left:8%; right:4%; top:30%; bottom:2%; background:radial-gradient(ellipse at 50% 60%,#2b8f8030,transparent 65%); filter:blur(30px); z-index:0; pointer-events:none; }
.vs-layer { position:absolute; will-change:transform; }
.vs-tv { left:0; top:3%; width:71%; z-index:1; }
.vs-menu { right:0; top:4%; width:22.5%; z-index:2; }
.vs-panel { left:3%; top:58%; width:58%; z-index:4; }
.vs-phone { right:5%; top:55%; width:17.5%; z-index:5; }
.vs-body { position:relative; transform-style:preserve-3d; transition:filter .3s; }
.vs-tv .vs-body { transform:perspective(1500px) rotateX(var(--rx)) rotateY(calc(-5deg + var(--ry))); transform-origin:60% 50%; }
.vs-menu .vs-body { transform:perspective(1200px) rotateX(var(--rx)) rotateY(calc(-14deg + var(--ry))); transform-origin:0 50%; }
.vs-panel .vs-body { transform:perspective(1400px) rotateX(calc(6deg + var(--rx))) rotateY(calc(3deg + var(--ry))); }
.vs-phone .vs-body { transform:perspective(1100px) rotateX(var(--rx)) rotateY(calc(-12deg + var(--ry))) rotateZ(4deg); }

/* ekran etiketleri */
.vs-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 .4cqw 1cqw; font-size:max(9px,1.25cqw); letter-spacing:.12em; text-transform:uppercase; color:#8fb3be; white-space:nowrap; }
.vs-meta>span:first-child { display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; }
.vs-led { width:6px; height:6px; border-radius:50%; background:#f5a70a; box-shadow:0 0 10px #f5a70a; flex:none; animation:vs-led 2.4s ease-in-out infinite; }
.vs-sync { color:#92dfc4; letter-spacing:.04em; text-transform:none; font-variant-numeric:tabular-nums; }

/* ekran gövdesi */
.vs-bezel { position:relative; padding:.9cqw .9cqw 1.5cqw; border-radius:1.6cqw; background:linear-gradient(160deg,#262e44,#0c0e1f 40%); box-shadow:0 3cqw 7cqw -1cqw #000c,0 0 0 1px #99d8d433; transition:box-shadow .35s; }
.vs-bezel::after { content:''; position:absolute; inset:.9cqw .9cqw 1.5cqw; border-radius:.8cqw; background:linear-gradient(125deg,#ffffff14,transparent 38%); pointer-events:none; }
.vs-screen { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:.8cqw; background:#13213a; color:#fff; }
.vs-portrait .vs-screen { aspect-ratio:9/16; background:linear-gradient(180deg,#132743,#0b1528); padding:1.6cqw 1.4cqw; display:flex; flex-direction:column; }
.vs-screen>* { transition:opacity .28s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.vs-screen.vs-switch>*:not(.vs-alert) { opacity:0; transform:scale(1.03); }
.vs-stand { width:22%; height:1.5cqw; margin:0 auto; background:linear-gradient(#2a3247,#10162a); border-radius:0 0 .7cqw .7cqw; }

/* TV sahneleri */
.vs-art { position:absolute; inset:0; }
.vs-art img { width:100%; height:100%; object-fit:cover; display:block; }
.vs-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0b1226d9 0,#0b122680 38%,transparent 62%); }
.vs-art-shop { background:radial-gradient(circle at 76% 46%,#f4c19a 0 17%,transparent 17.4%),radial-gradient(circle at 76% 46%,transparent 0 25%,#ffffff33 25.3% 25.8%,transparent 26%),linear-gradient(135deg,#5b2121,#b4513a 55%,#e8a070); }
.vs-art-shop::before { content:'%30'; position:absolute; right:9%; top:26%; font:800 9.6cqw/1 var(--display); letter-spacing:-.05em; color:#3b1210; }
:root[lang="en"] .vs-art-shop::before { content:'30%'; }
.vs-art-shop>span { position:absolute; border-radius:50%; border:1px solid #ffffff44; }
.vs-art-shop>span:nth-child(1) { width:30%; aspect-ratio:1; right:-6%; bottom:-14%; background:#ffffff14; }
.vs-art-shop>span:nth-child(2) { width:9%; aspect-ratio:1; right:38%; top:12%; background:#f6d7b8; border:0; }
.vs-art-shop>span:nth-child(3) { width:52%; aspect-ratio:1; right:-20%; top:-40%; }
.vs-art-office { background:radial-gradient(ellipse at 80% 20%,#3f6fd8 0,transparent 55%),linear-gradient(160deg,#0f2b6b,#0b1840 60%,#081130); }
.vs-art-office>span { position:absolute; border-radius:50%; border:1px solid #ace3b199; width:44%; aspect-ratio:1; right:4%; top:14%; }
.vs-art-office>span:nth-child(2) { width:32%; right:10%; top:25%; border-width:1.8cqw; opacity:.25; }
.vs-art-office>span:nth-child(3) { width:18%; right:17%; top:37%; background:#c8dfb3; opacity:.55; border:0; }
.vs-copy { position:absolute; left:6%; top:13%; width:54%; display:grid; gap:.8cqw; }
.vs-copy>span:first-child { font-size:max(8px,1.1cqw); letter-spacing:.2em; color:#a9e2d2; font-weight:600; }
.vs-copy strong { font:650 4.4cqw/1.02 var(--display); letter-spacing:-.035em; color:#fff; }
.vs-copy>span:last-child { font-size:max(9px,1.35cqw); color:#d4e3ea; }
.vs-tag { position:absolute; left:6%; bottom:9%; display:flex; align-items:baseline; gap:1.4cqw; padding:.8cqw 1.3cqw; border-radius:.9cqw; background:#0b1226cc; border:1px solid #ffffff26; backdrop-filter:blur(6px); font-size:max(9px,1.4cqw); color:#dbe8ee; }
.vs-tag b { font:700 2.4cqw/1 var(--display); color:#92dfc4; font-variant-numeric:tabular-nums; }

/* kasa üstü dikey menü */
.vs-board-k { font-size:max(6px,.85cqw); letter-spacing:.18em; color:#8fd8c4; font-weight:600; }
.vs-board-t { font:650 2cqw/1.1 var(--display); margin:.5cqw 0 1.4cqw; color:#fff; }
.vs-board { list-style:none; margin:0; padding:0; display:grid; gap:1cqw; }
.vs-board li { display:flex; align-items:baseline; gap:.5cqw; font-size:max(7px,1.12cqw); color:#cfdcea; padding:.35cqw .4cqw; border-radius:.4cqw; }
.vs-board li span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vs-board li i { flex:1; min-width:.8cqw; border-bottom:1px dotted #ffffff40; }
.vs-board li b { color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* duyuru bandı (iki ekranda birden) */
.vs-alert { position:absolute; left:0; right:0; bottom:0; display:grid; gap:.2cqw; padding:1cqw 1.6cqw; background:#f5a70a; color:#1f1500; transform:translateY(102%); transition:transform .45s cubic-bezier(.2,.8,.2,1); z-index:3; }
.vs-alert span { font-size:max(7px,.9cqw); letter-spacing:.2em; font-weight:700; }
.vs-alert strong { font:650 max(9px,1.6cqw)/1.15 var(--display); }
.vs-portrait .vs-alert strong { font-size:max(8px,1.1cqw); }
.vs-alerting .vs-alert { transform:none; }

/* panel penceresi */
.vs-window { background:#f7f9f6; color:#1e2356; border-radius:1.4cqw; box-shadow:0 4cqw 8cqw -2cqw #000d,0 0 0 1px #ffffff33; overflow:hidden; font-size:max(11px,1.85cqw); }
.vs-chrome { display:flex; align-items:center; gap:1.2cqw; padding:1cqw 1.4cqw; border-bottom:1px solid #dfe5df; font-size:max(10px,1.5cqw); color:#5d6680; background:#eef2ee; }
.vs-chrome-t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-chrome-t b { color:#1e2356; }
.vs-dots { display:flex; gap:.5cqw; }
.vs-dots i { width:max(6px,.9cqw); height:max(6px,.9cqw); border-radius:50%; background:#cdd5d0; }
.vs-live { display:flex; align-items:center; gap:.6cqw; font-weight:650; color:#8a5a00; background:#fdf0d5; border-radius:999px; padding:.3cqw .9cqw; }
.vs-live i { width:6px; height:6px; border-radius:50%; background:#f5a70a; animation:vs-led 2.4s ease-in-out infinite; }
.vs-rows { list-style:none; margin:0; padding:.8cqw .9cqw; display:grid; gap:.3cqw; }
.vs-rows li { display:flex; align-items:center; justify-content:space-between; gap:1cqw; min-height:max(30px,4.6cqw); padding:0 .3cqw 0 .6cqw; border-radius:.9cqw; border:1px solid transparent; transition:background .25s,border-color .25s; }
.vs-rows li b { font-variant-numeric:tabular-nums; font-weight:650; padding-right:.9cqw; }
.vs-rows li.on { background:#e3f2ec; border-color:#0a857640; }
.vs-row-name { all:unset; cursor:pointer; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.6cqw 0; border-radius:.4cqw; }
.vs-rows li:not(.on) .vs-row-name:hover { color:#0a8576; }
.vs-row-name:focus-visible { outline:2px solid #0a8576; outline-offset:2px; }
.vs-step { display:flex; align-items:center; gap:.5cqw; }
.vs-step button { width:max(28px,4cqw); height:max(28px,4cqw); border-radius:.8cqw; border:1px solid #0a857655; background:#fff; color:#0a8576; font:700 max(14px,2.2cqw)/1 var(--font); cursor:pointer; display:grid; place-items:center; padding:0; transition:background .15s,transform .1s; }
.vs-step button:hover { background:#0a8576; color:#fff; }
.vs-step button:active { transform:scale(.92); }
.vs-step input { width:max(62px,9cqw); height:max(28px,4cqw); border:1px solid #c5d3cc; border-radius:.8cqw; background:#fff; text-align:center; font:700 max(12px,1.9cqw)/1 var(--font); color:#1e2356; font-variant-numeric:tabular-nums; padding:0 .4cqw; }
.vs-step input:focus { outline:2px solid #0a8576; outline-offset:1px; border-color:#0a8576; }
.vs-foot { display:flex; align-items:center; gap:.9cqw; padding:.9cqw 1.5cqw 1.1cqw; border-top:1px solid #e3e8e3; font-size:max(10px,1.45cqw); color:#5d6680; }
.vs-foot-dot { width:7px; height:7px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px #16a34a22; }
.vs-foot-time { margin-left:auto; font-variant-numeric:tabular-nums; color:#0a8576; font-weight:650; }

/* telefon */
.vs-phone .vs-body { background:#0c0e1f; border-radius:3.2cqw; padding:1cqw; box-shadow:0 4cqw 7cqw -2cqw #000d,0 0 0 1px #ffffff2b; aspect-ratio:9/18.5; display:flex; flex-direction:column; }
.vs-notch { width:32%; height:1cqw; border-radius:999px; background:#1c2236; margin:.4cqw auto .8cqw; flex:none; }
.vs-app { flex:1; border-radius:2.2cqw; background:linear-gradient(170deg,#18214a,#0f1532 70%); padding:1.8cqw 1.4cqw; display:flex; flex-direction:column; gap:1cqw; color:#e3e9f6; min-height:0; }
.vs-app-k { font-size:max(7px,1.05cqw); letter-spacing:.16em; text-transform:uppercase; color:#8fb3be; }
.vs-app strong { font:650 max(10px,1.7cqw)/1.2 var(--display); }
.vs-app-screens { list-style:none; margin:.4cqw 0 0; padding:0; display:grid; gap:.7cqw; font-size:max(8px,1.25cqw); }
.vs-app-screens li { display:flex; align-items:center; gap:.7cqw; padding:.8cqw 1cqw; border-radius:1cqw; background:#ffffff0d; }
.vs-app-screens i { width:6px; height:6px; border-radius:50%; background:#f5a70a; box-shadow:0 0 8px #f5a70a; }
.vs-send { margin-top:auto; border:0; border-radius:1.2cqw; background:#93e0c5; color:#0b2524; font:700 max(9px,1.45cqw)/1.2 var(--font); padding:1.2cqw .8cqw; cursor:pointer; transition:transform .15s,box-shadow .2s; }
.vs-send:hover { box-shadow:0 0 24px #93e0c566; transform:translateY(-1px); }
.vs-send:disabled { cursor:default; background:#cfeee2; }
.vs-send:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.vs-app-ann { font-size:max(8px,1.1cqw); color:#9fb2c8; line-height:1.35; }

/* bağlantılar ve akan paketler */
.vs-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:3; }
.vs-link { fill:none; stroke:#83cdb4; stroke-width:1.2; stroke-dasharray:3 7; opacity:.38; animation:vs-dash 9s linear infinite; transition:opacity .3s,stroke .3s,stroke-width .3s; }
.vs-link.vs-hot { opacity:.95; stroke:#c4f5df; stroke-width:1.8; }
.vs-packet circle:last-child { fill:#f2fffa; }
.vs-packet .vs-halo { fill:#92dfc4; opacity:.35; }
.vs-packet.vs-ambient { opacity:.55; }
.vs-packet.vs-ambient .vs-halo { opacity:.2; }

/* geri bildirim animasyonları */
.vs-got .vs-bezel, .vs-got.vs-window { animation:vs-got .9s ease; }
.vs-sending.vs-window, .vs-sending.vs-body { animation:vs-send .5s ease; }
.vs-tag.vs-flip b, .vs-board li.vs-flip b { animation:vs-flip .6s cubic-bezier(.2,.8,.2,1); display:inline-block; }
.vs-board li.vs-flip { animation:vs-row 1.6s ease; }
.vs-rows li.vs-edit { animation:vs-edit .5s ease; }
@keyframes vs-led { 50% { opacity:.45; box-shadow:0 0 2px #f5a70a; } }
@keyframes vs-dash { to { stroke-dashoffset:-200; } }
@keyframes vs-got { 0% { box-shadow:0 3cqw 7cqw -1cqw #000c,0 0 0 1px #99d8d433; } 30% { box-shadow:0 3cqw 7cqw -1cqw #000c,0 0 0 2px #92dfc4,0 0 3cqw #92dfc455; } 100% { box-shadow:0 3cqw 7cqw -1cqw #000c,0 0 0 1px #99d8d433; } }
@keyframes vs-send { 40% { filter:brightness(1.08) drop-shadow(0 0 12px #92dfc466); } }
@keyframes vs-flip { from { transform:rotateX(90deg); opacity:0; } to { transform:none; opacity:1; } }
@keyframes vs-row { 0%,40% { background:#92dfc433; } 100% { background:transparent; } }
@keyframes vs-edit { 40% { background:#c9ecdf; } }

/* sol sütundaki ipucu */
.vs-hint { margin-top:30px; max-width:380px; padding:16px 18px; border:1px solid #7fbbba33; border-radius:12px; background:#ffffff06; }
.vs-hint-k { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.16em; color:#92dfc4; font-weight:650; }
.vs-hint-k i { width:6px; height:6px; border-radius:50%; background:#f5a70a; box-shadow:0 0 10px #f5a70a; animation:vs-led 2.4s ease-in-out infinite; }
.vs-hint p { margin:8px 0 0; font-size:13.5px; line-height:1.6; color:#b4c4d6; }
.vs-hint p b { color:#e6f2f0; font-weight:650; }
.vs-hint .vs-feedback { font-size:12px; color:#92dfc4; min-height:1.6em; margin-top:6px; }

/* senaryo seçici: otomatik oynatma çubuğu */
.v-scene-picker>button { font-size:12px; position:relative; overflow:hidden; }
.v-scene-picker>button>i { position:absolute; left:0; bottom:0; height:2px; width:0; background:#92dfc4; }
.vs-autoplay .v-scene-picker>button.active>i { animation:vs-auto 7s linear forwards; }
@keyframes vs-auto { to { width:100%; } }

/* dar sahne: katmanlar alt alta, ikincil cihazlar gizli */
@container (max-width:560px) {
  .vs-stage { aspect-ratio:auto; display:flex; flex-direction:column; gap:34px; }
  .vs-stage::before { display:none; }
  .vs-layer { position:relative; left:auto; right:auto; top:auto; width:100%; transform:none!important; }
  .vs-menu, .vs-phone { display:none; }
  .vs-body { transform:none!important; }
  .vs-meta { font-size:10px; }
  .vs-copy strong { font-size:7.6cqw; }
  .vs-copy>span:first-child { font-size:9px; }
  .vs-copy>span:last-child { font-size:11px; }
  .vs-tag { font-size:11px; padding:6px 10px; }
  .vs-tag b { font-size:16px; }
  .vs-window { font-size:14px; border-radius:14px; }
  .vs-chrome { font-size:12px; padding:9px 12px; gap:8px; }
  .vs-rows { padding:6px 8px; }
  .vs-rows li { min-height:44px; }
  .vs-step button, .vs-step input { height:38px; }
  .vs-step button { width:38px; font-size:18px; }
  .vs-step input { width:76px; font-size:15px; }
  .vs-foot { font-size:12px; padding:9px 12px; }
  .vs-alert strong { font-size:13px; }
  .vs-alert span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .vs-led, .vs-live i, .vs-hint-k i, .vs-link, .vs-got .vs-bezel, .vs-got.vs-window, .vs-tag.vs-flip b, .vs-board li.vs-flip, .vs-board li.vs-flip b, .vs-rows li.vs-edit, .vs-autoplay .v-scene-picker>button.active>i { animation:none!important; }
  .vs-screen>*, .vs-alert { transition:none; }
}
.v-effects-paused .vs-led, .v-effects-paused .vs-live i, .v-effects-paused .vs-link { animation:none; }

.vs-promo { margin-top:auto; position:relative; overflow:hidden; border-radius:.8cqw; min-height:28%; padding:1.1cqw; display:flex; flex-direction:column; justify-content:flex-end; gap:.2cqw; background:#1d2d52 center/cover no-repeat; }
.vs-promo::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#08102bdd,#08102b33 70%); }
.vs-promo>* { position:relative; }
.vs-promo span { font-size:max(6px,.8cqw); letter-spacing:.16em; text-transform:uppercase; color:#a9e2d2; font-weight:600; }
.vs-promo strong { font:650 max(8px,1.25cqw)/1.15 var(--display); color:#fff; }
.vs-promo-cafe { background-image:url(/site/img/redesign/coffee-art.webp); background-position:72% 40%; }
.vs-promo-tech { background-image:url(/site/img/redesign/device-art.webp); background-position:70% 40%; }
.vs-promo-shop { background:radial-gradient(circle at 80% 30%,#f4c19a 0 22%,transparent 22.5%),linear-gradient(135deg,#5b2121,#c35b3c); }
.vs-promo-office { background:radial-gradient(circle at 78% 30%,#c8dfb3 0 14%,transparent 14.5%),linear-gradient(160deg,#16337a,#0b1840); }
.vs-next { display:grid; gap:.3cqw; margin-top:.6cqw; padding:1cqw; border-radius:1cqw; background:#ffffff0d; }
.vs-next span { font-size:max(7px,.95cqw); letter-spacing:.14em; text-transform:uppercase; color:#8fb3be; }
.vs-next b { font-size:max(8px,1.25cqw); font-weight:650; color:#e3e9f6; }
.vs-next i { display:block; height:3px; border-radius:3px; background:#ffffff1a; overflow:hidden; position:relative; margin-top:.3cqw; }
.vs-next i::after { content:''; position:absolute; inset:0 auto 0 0; width:40%; border-radius:3px; background:#92dfc4; animation:vs-progress 7s linear infinite; }
@keyframes vs-progress { from { width:5%; } to { width:100%; } }
.vs-wrap>.v-scene-picker { justify-content:flex-end; margin:0 0 14px; flex-wrap:wrap; }
.vs-wrap>.v-scene-picker>span { margin-right:auto; }
@media (prefers-reduced-motion:reduce) { .vs-next i::after { animation:none; width:60%; } }
.v-effects-paused .vs-next i::after { animation:none; width:60%; }
@container (max-width:560px) { .vs-wrap>.v-scene-picker>span { width:100%; } .vs-wrap>.v-scene-picker>button { flex:1; } }

.vs-foot-ann { display:none; margin-left:8px; border:0; border-radius:8px; background:#1e2356; color:#fff; font:650 12px/1 var(--font); padding:8px 10px; cursor:pointer; }
.vs-foot-ann:disabled { background:#7b819f; }
.v-command-bottom { justify-content:flex-end; }
@container (max-width:560px) { .vs-foot-ann { display:inline-block; } .vs-foot-time { display:none; } }

.vs-phone .vs-body, .vs-app { overflow:hidden; }
.vs-app-ann { display:none; }
.vs-app { gap:.8cqw; }
@container (max-width:720px) { .vs-next { display:none; } }
@container (max-width:560px) {
  .vs-wrap>.v-scene-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .vs-wrap>.v-scene-picker>span { grid-column:1/-1; margin:0; }
  .vs-wrap>.v-scene-picker>button { white-space:nowrap; }
}