/* WEB 2 - the OFT Labs design (the tools' Brief 97 design): near-black, liquid chrome drifting behind frosted glass,
   one orange accent #FF6A2B, Inter (bundled, OFL). Loaded after tokens.css and site.css. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: dark;
  --w2-bg: #050506; --w2-lift: #17171a; --w2-glass: rgba(17, 17, 19, .78); --w2-line: rgba(255, 255, 255, .075); --w2-line-2: rgba(255, 255, 255, .12);
  --w2-text: #FAFAFA; --w2-muted: #A1A1AA; --w2-accent: #FF6A2B; --w2-accent-hover: #FF8A55; --w2-on-accent: #160700;
  --w2-ring: rgba(255, 106, 43, .28); --w2-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --w2-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* WEB 1 tokens re-pointed at the new design */
  --bg: var(--w2-bg); --bg-raised: #0B0B0D; --surface: var(--w2-glass); --text: var(--w2-text); --text-muted: var(--w2-muted);
  --primary: var(--w2-accent); --accent: var(--w2-accent); --border: var(--w2-line-2);
}
html { background: radial-gradient(1200px 760px at 100% 0%, var(--w2-lift) 0%, rgba(23, 23, 26, 0) 70%), var(--w2-bg); background-attachment: fixed; }
body { background: transparent !important; color: var(--w2-text); font-family: var(--w2-font); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255, 106, 43, .35); color: #fff; }
a { color: var(--w2-accent-hover); }
:focus-visible { outline: 2px solid var(--w2-accent-hover) !important; outline-offset: 3px; }

/* liquid chrome, fixed behind everything */
.chrome-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.chrome-bg i { position: absolute; display: block; background-repeat: no-repeat; background-size: contain; opacity: .7; will-change: transform; }
.chrome-bg .c1 { width: min(48vw, 780px); aspect-ratio: 1000 / 690; top: -8vh; right: -10vw; animation: w2d1 16s ease-in-out infinite alternate; }
.chrome-bg .c2 { width: min(36vw, 560px); aspect-ratio: 1000 / 678; bottom: -12vh; left: -10vw; opacity: .45; animation: w2d2 18s ease-in-out infinite alternate; }
@keyframes w2d1 { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(-3vw, 4vh, 0) rotate(6deg); } }
@keyframes w2d2 { from { transform: translate3d(0, 0, 0) rotate(3deg); } to { transform: translate3d(3vw, -3vh, 0) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .chrome-bg i { animation: none; } }

.glass { background: var(--w2-glass); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid var(--w2-line); border-radius: 24px; box-shadow: var(--w2-shadow); }

/* header */
.site-header { background: rgba(5, 5, 6, .55) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--w2-line) !important; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--w2-text); }
.brand img { border-radius: 8px; }
.brand-word { font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--w2-text); }
.nav-links a { color: #D4D4D8 !important; font-weight: 500; }
.nav-links a:hover { color: #fff !important; }

/* buttons: one orange */
.btn { font-family: var(--w2-font); border-radius: 14px !important; font-weight: 600; }
.btn-primary, .btn-accent { background: var(--w2-accent) !important; color: var(--w2-on-accent) !important; border: 0 !important; box-shadow: 0 14px 34px -14px rgba(255, 106, 43, .75) !important; }
.btn-primary:hover, .btn-accent:hover { background: var(--w2-accent-hover) !important; }
.btn-primary[disabled] { background: #1A1A1D !important; color: #8A8A93 !important; box-shadow: none !important; border: 1px solid #2A2A2E !important; }
.btn-ghost { background: rgba(255, 255, 255, .05) !important; color: var(--w2-text) !important; border: 1px solid var(--w2-line-2) !important; }
.btn-ghost:hover { background: rgba(255, 255, 255, .09) !important; }
.eyebrow { color: var(--w2-muted) !important; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 15px; }
.badge-live, .badge-soon { background: rgba(255, 106, 43, .12) !important; color: var(--w2-accent-hover) !important; border: 1px solid rgba(255, 106, 43, .35) !important; }
h1, h2, h3, h4 { font-family: var(--w2-font); color: var(--w2-text); letter-spacing: -.02em; }

/* hero = a choice */
.hero2 { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.hero2 h1 { font-size: clamp(40px, 6vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; max-width: 14ch; margin: 8px 0 clamp(32px, 5vw, 56px); }
.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tool-card { overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tool-card:hover, .tool-card:focus-within { transform: translateY(-4px); border-color: rgba(255, 106, 43, .55); box-shadow: 0 0 0 4px var(--w2-ring), var(--w2-shadow); }
.tool-card-link { display: block; color: inherit; text-decoration: none; }
.tool-card-media { aspect-ratio: 16 / 9; background: #0B0B0D; overflow: hidden; }
.tool-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-card-body { position: relative; padding: 22px 24px 26px; }
.tool-logo { position: absolute; top: -34px; right: 20px; width: 64px; height: 64px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.tool-card-name { font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.tool-card-body p { color: var(--w2-muted); margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.tool-card-go { display: inline-flex; align-items: center; gap: 8px; color: var(--w2-accent-hover); font-weight: 600; }

/* one tool */
.tool-page { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--w2-line); scroll-margin-top: 72px; }
.tool-page-head { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.tool-page-head img { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
.tool-page-head h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; margin: 2px 0 8px; letter-spacing: -.035em; }
.tool-page-head .lead { color: var(--w2-muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 62ch; margin: 0; }
.demo { padding: 12px; }
.demo-frame { border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.demo-frame video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.demo-note { color: var(--w2-muted); font-size: 13.5px; margin: 10px 6px 2px; }
.offers-title { font-size: clamp(26px, 3vw, 36px); font-weight: 600; margin: 56px 0 18px; }
.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.offer { padding: 22px 24px; min-width: 0; }
.offer h4 { font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.offer p { color: var(--w2-muted); margin: 0 0 14px; line-height: 1.55; font-size: 15px; }
.offer-styles, .offer-clips, .offer-voices { grid-column: 1 / -1; }
.style-grid, .clip-grid, .voice-grid, .chips { list-style: none; margin: 0; padding: 0; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-items: end; }
.style-grid li, .clip-grid li { min-width: 0; }
.style-grid .frame, .clip-grid .frame { border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--w2-line); }
.style-grid li.tall .frame, .clip-grid li.tall .frame { aspect-ratio: 9 / 16; }
.style-grid video, .clip-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-grid span, .clip-grid span { display: block; margin-top: 8px; font-size: 14px; color: #D4D4D8; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: end; }
.clip-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.clip-grid li.tall { max-width: 300px; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sample { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; cursor: pointer;
  background: #1A1A1D; color: var(--w2-text); border: 1px solid #2A2A2E; font: inherit; text-align: start; }
.sample:hover { border-color: #4A4A52; }
.sample .icon { color: var(--w2-accent); flex: none; }
.sample b { display: block; font-weight: 600; font-size: 15px; }
.sample small { display: block; color: var(--w2-muted); font-size: 12.5px; }
.sample.playing { border-color: var(--w2-accent); box-shadow: 0 0 0 3px var(--w2-ring); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--w2-line-2); color: #E4E4E7; font-size: 14px; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: 15px; }
.specs dt { color: var(--w2-muted); } .specs dd { margin: 0; color: var(--w2-text); }
.shot-fig { margin: 0; } .shot-fig button { display: block; padding: 0; border: 1px solid var(--w2-line); border-radius: 14px; overflow: hidden; background: #000; cursor: zoom-in; width: 100%; }
.shot-fig img { display: block; width: 100%; height: auto; }
.showcase { margin-top: 56px; }
.showcase h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; margin: 0 0 6px; }
.lead-sm { color: var(--w2-muted); margin: 0 0 18px; }
.credits { color: var(--w2-muted); font-size: 13px; margin-top: 12px; }
.tool-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* coming soon: small */
.soon-grid-sm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.soon-sm { padding: 18px 20px; } .soon-sm h3 { font-size: 17px; margin: 10px 0 6px; } .soon-sm p { color: var(--w2-muted); font-size: 14px; margin: 0; }

/* WEB 1 sections kept (download, FAQ, contact) in the new look */
.dl, .faq-item, .contact-card, .price { background: var(--w2-glass) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--w2-line) !important; border-radius: 24px !important; box-shadow: var(--w2-shadow) !important; color: var(--w2-text); }
.section-head h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -.03em; }
.section-head p, .note, .faq-a p, .footer-small { color: var(--w2-muted) !important; }
.site-footer { background: transparent !important; border-top: 1px solid var(--w2-line); }
.lightbox { background: rgba(0, 0, 0, .9) !important; }

@media (max-width: 980px) { .tool-cards { grid-template-columns: 1fr; max-width: 560px; } .offers { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tool-page-head { flex-direction: column; align-items: flex-start; } .tool-page-head img { width: 64px; height: 64px; } .hero2 h1 { font-size: 40px; } }

body > header, body > main, body > footer { position: relative; z-index: 1; }
.site-header { position: sticky !important; z-index: 50 !important; }
.style-grid.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 18px; }
.style-grid.tall-row { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); }
.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; padding: 18px; margin-top: clamp(28px, 4vw, 48px); }
.overview-text { padding: 8px 12px; } .overview h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; margin: 0 0 8px; } .overview p { color: var(--w2-muted); margin: 0; }
@media (max-width: 980px) { .overview { grid-template-columns: 1fr; } }
.tool-card-media, .style-grid .frame, .demo-frame { position: relative; }
.tool-card-media .video-toggle, .frame .video-toggle, .demo-frame .video-toggle { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(17, 17, 19, .78); color: #FAFAFA; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; }
.tool-card-media .video-toggle:hover, .frame .video-toggle:hover { background: rgba(30, 30, 34, .9); }
/* B100: wide screens use the width (content up to 1560 px; text and cards scale up past 1600 px) */
@media (min-width: 1600px) {
  html { font-size: 106.25%; }
  .hero2 h1 { font-size: clamp(84px, 5.2vw, 112px); }
  .tool-cards { gap: 32px; }
  .section-head { max-width: 980px; }
  .tool-head, .tool-page-head .lead { max-width: 980px; }
  .clip-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .style-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 2200px) { html { font-size: 118.75%; } }
/* B100: how to start + the reference video at the top of "What it offers" */
.howto { margin-top: clamp(28px, 4vw, 48px); padding: clamp(18px, 2.4vw, 32px); }
.howto h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; margin: 0 0 6px; }
.howto-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.howto-steps h4 { margin: 0 0 4px; font-size: 17px; } .howto-steps p { margin: 0; color: var(--w2-muted); }
.offer-ref { margin: 0 0 18px; padding: 14px; } .offer-ref .frame { max-width: 960px; margin-inline: auto; }
.offer-ref figcaption { text-align: center; color: var(--w2-muted); font-size: 14px; margin-top: 8px; }
@media (max-width: 760px) { .howto-steps { grid-template-columns: 1fr; } }
/* LAYOUT FIX: one content width for header, hero, cards and every section = 100% minus clamp(20px, 4vw, 72px) each side,
   up to 1760 px (tokens.css --gutter / --container); video grids fill the width; paragraphs stay <= ~75 characters. */
/* 53ch of Inter is ~75 real characters per line (measured: 75ch gave up to 108, 58ch 82) */
main p, .site-footer p, .faq-a { max-width: 53ch !important; }
/* hero: headline left, the chrome shape fills the right side (wide screens); phone = headline only */
.hero2-head { display: grid; gap: clamp(24px, 4vw, 72px); align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.hero2-head h1 { margin-bottom: 0; }
.hero2-visual { display: none; }
@media (min-width: 900px) {
  .hero2-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hero2 h1 { max-width: 15ch; }
  .hero2-visual { display: block; position: relative; aspect-ratio: 1000 / 690; }
  .hero2-visual i { position: absolute; inset: -4% -2%; display: block; background: center / contain no-repeat; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
    will-change: transform; animation: w2hv 16s ease-in-out infinite alternate; }
  .chrome-bg .c1 { display: none; }
}
@keyframes w2hv { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(-1.5%, 2%, 0) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .hero2-visual i { animation: none; } }
/* tool cards: 1 per row on phone, 3 per row from 900 px, full width */
.tool-cards { grid-template-columns: 1fr; max-width: none; }
@media (min-width: 900px) { .tool-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* video rows: --n per row, rows filled edge to edge, a short last row centred */
.style-grid.wide, .style-grid.tall-row, .clip-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; --g: 14px; gap: 16px var(--g); }
.style-grid.wide > li, .style-grid.tall-row > li, .clip-grid > li, .clip-grid > li.tall { flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); max-width: none; }
/* 9:16: phone 2, tablet 3, desktop 5 */
.style-grid.tall-row, .clip-grid.tall-row { --n: 2; }
@media (min-width: 600px) { .style-grid.tall-row, .clip-grid.tall-row { --n: 3; } }
@media (min-width: 1024px) { .style-grid.tall-row, .clip-grid.tall-row { --n: 5; } }
/* 16:9: phone 1 (full width), tablet 2, desktop 3; one or two clips fill the row */
.style-grid.wide, .clip-grid:not(.tall-row) { --n: 1; }
@media (min-width: 600px) { .style-grid.wide, .clip-grid:not(.tall-row) { --n: 2; } }
@media (min-width: 1024px) { .style-grid.wide, .clip-grid:not(.tall-row) { --n: 3; } }
.style-grid.wide > li:only-child, .clip-grid:not(.tall-row) > li:only-child { flex-basis: 100%; }
@media (min-width: 600px) { .style-grid.wide:has(> li:nth-child(2):last-child), .clip-grid:not(.tall-row):has(> li:nth-child(2):last-child) { --n: 2; } }
/* coming soon: the cards share the row instead of leaving empty columns */
.soon-grid-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* a card holding only 2-3 tall videos: text on the left, the videos at the 5-per-row size on the right (no empty strip) */
@media (min-width: 1024px) {
  .offer:has(> ul.tall-row > li:nth-child(2):last-child):not(:has(> ul ~ ul)) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 28px; align-items: center; }
  .offer:has(> ul.tall-row > li:nth-child(3):last-child):not(:has(> ul ~ ul)) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 28px; align-items: center; }
  .offer:has(> ul.tall-row > li:nth-child(2):last-child):not(:has(> ul ~ ul)) > ul.tall-row { --n: 2; }
  .offer:has(> ul.tall-row > li:nth-child(3):last-child):not(:has(> ul ~ ul)) > ul.tall-row { --n: 3; }
  /* showcase with three 16:9 + three 9:16: the 16:9 stacked on the left, the 9:16 beside them, same height, full width */
  .showcase:has(> ul.wide > li:nth-child(3):last-child):has(> ul.tall-row > li:nth-child(3):last-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.85fr); gap: 0 14px; align-items: start; }
  .showcase:has(> ul.wide > li:nth-child(3):last-child) > :not(ul) { grid-column: 1 / -1; }
  .showcase:has(> ul.wide > li:nth-child(3):last-child):has(> ul.tall-row > li:nth-child(3):last-child) > ul.wide { --n: 1; }
  .showcase:has(> ul.wide > li:nth-child(3):last-child):has(> ul.tall-row > li:nth-child(3):last-child) > ul.tall-row { --n: 3; }
}
/* a card holding one 16:9 clip, and the reference video: text on the left, the video filling the rest (desktop) */
@media (min-width: 1024px) {
  .offer:has(> ul.clip-grid:not(.tall-row) > li:only-child):not(:has(> ul ~ ul)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 28px; align-items: center; }
  .offer-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 28px; align-items: center; }
  .offer-ref .frame { max-width: none; margin: 0; grid-column: 2; grid-row: 1; }
  .offer-ref figcaption { grid-column: 1; grid-row: 1; text-align: start; font-size: clamp(16px, 1.3vw, 20px); margin: 0 0 0 10px; }
}
.offer-ref .frame video { width: 100%; height: auto; display: block; }
@media (min-width: 600px) { .style-grid.wide:has(> li:nth-child(3):last-child), .clip-grid:not(.tall-row):has(> li:nth-child(3):last-child) { --n: 3; } }