:root {
  --bg: #080b12;
  --surface: #101621;
  --surface-hover: #192334;
  --text: #f4f7fb;
  --muted: #98a6bb;
  --subtle: #66758a;
  --border: rgba(151, 176, 211, 0.25);
  --cyan: #35d6ff;
  --violet: #8a63ff;
  --magenta: #c65dff;
  --green: #45e0b7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-geist-sans, Inter), "Segoe UI Variable", "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
main { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(38, 92, 184, .12), transparent 28%), linear-gradient(180deg, #070a11 0%, #090d15 52%, #080b12 100%); }
.shell { width: min(1340px, calc(100% - 96px)); margin-inline: auto; }

.site-header { position: sticky; z-index: 20; top: 0; height: 88px; width: 100%; padding: 0 max(48px, calc((100% - 1340px)/2)); display: flex; align-items: center; justify-content: space-between; background: rgba(8,11,18,.76); border-bottom: 1px solid rgba(151,176,211,.08); backdrop-filter: blur(18px); }
.wordmark { font-size: 24px; font-weight: 560; letter-spacing: .32em; line-height: 1; }
.site-header nav { display: flex; gap: 42px; height: 100%; align-items: center; }
.site-header nav a { position: relative; color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s ease; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -13px; height: 2px; background: var(--cyan); transition: right .2s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav .active { color: white; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .site-header nav .active::after { right: 0; }

.hero { min-height: 640px; display: grid; grid-template-columns: 54% 46%; align-items: center; position: relative; }
.hero-copy { position: relative; z-index: 2; padding-left: 24px; padding-bottom: 42px; animation: rise .6s cubic-bezier(.22,1,.36,1) both; }
.eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow span { width: 24px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px rgba(53,214,255,.8); }
h1 { max-width: 720px; margin: 0; font-size: clamp(52px, 5.2vw, 74px); line-height: .98; letter-spacing: -.052em; font-weight: 720; }
.hero-subhead { max-width: 620px; margin: 28px 0 30px; color: var(--muted); font-size: 20px; line-height: 1.55; }
.primary-cta { display: inline-flex; min-width: 230px; height: 64px; align-items: center; justify-content: center; gap: 14px; border-radius: 14px; color: #051018; background: linear-gradient(110deg, #35d6ff, #51c9ff); box-shadow: 0 12px 34px rgba(23,190,245,.2), inset 0 1px rgba(255,255,255,.6); font-size: 17px; font-weight: 650; transition: transform .2s ease, box-shadow .3s ease; }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(23,190,245,.32), inset 0 1px rgba(255,255,255,.7); }
.primary-cta:focus-visible, a:focus-visible { outline: 3px solid rgba(53,214,255,.4); outline-offset: 4px; }
.grid-icon { font-size: 24px; line-height: 1; transform: rotate(90deg); }
.platforms { display: flex; gap: 26px; margin-top: 30px; color: var(--subtle); font-size: 13px; }
.platforms span { display: flex; align-items: center; gap: 8px; }
.windows-mark { width: 13px; height: 13px; background: linear-gradient(90deg, transparent 47%, var(--subtle) 47% 53%, transparent 53%), linear-gradient(transparent 47%, var(--subtle) 47% 53%, transparent 53%); border: 1px solid var(--subtle); transform: skewY(-5deg); }
.android-mark { width: 15px; height: 11px; border: 1px solid var(--subtle); border-radius: 7px 7px 3px 3px; }

.hero-art { position: absolute; z-index: 1; width: 55%; height: 100%; right: -2%; top: 0; perspective: 1000px; pointer-events: none; }
.glow { position: absolute; width: 270px; height: 270px; border-radius: 50%; filter: blur(85px); opacity: .55; animation: breathe 9s ease-in-out infinite alternate; }
.glow-cyan { left: 18%; bottom: 14%; background: rgba(53,214,255,.32); }
.glow-violet { right: 8%; bottom: 18%; background: rgba(138,99,255,.42); animation-delay: -3s; }
.pane { position: absolute; border: 1px solid rgba(101,212,255,.65); border-radius: 10px; background: linear-gradient(145deg, rgba(28,120,255,.11), rgba(39,21,105,.05)); box-shadow: inset 0 0 30px rgba(53,214,255,.05), 0 0 30px rgba(53,214,255,.04); transform: rotateY(-14deg) rotateZ(1deg); animation: drift 10s ease-in-out infinite alternate; }
.pane-one { width: 43%; height: 50%; left: 7%; top: 22%; }
.pane-two { width: 38%; height: 56%; left: 40%; top: 11%; border-color: rgba(177,128,255,.65); animation-delay: -2s; }
.pane-three { width: 33%; height: 45%; right: 0; top: 30%; border-color: rgba(127,100,255,.7); animation-delay: -4s; }
.pane-four { width: 28%; height: 38%; left: 22%; top: 38%; background: linear-gradient(145deg, rgba(53,214,255,.3), rgba(30,83,225,.08)); box-shadow: 0 0 48px rgba(53,214,255,.12); animation-delay: -5s; }
.art-floor { position: absolute; width: 78%; height: 24%; right: 4%; bottom: 5%; background: linear-gradient(90deg, transparent, rgba(60,107,245,.13), transparent); transform: rotateX(68deg); filter: blur(2px); }

.featured-section { padding: 10px 0 76px; }
.featured-card { position:relative; isolation:isolate; min-height:560px; display:grid; grid-template-columns:47% 53%; align-items:center; overflow:hidden; border:1px solid rgba(151,176,211,.27); border-radius:30px; background:radial-gradient(circle at 85% 12%,rgba(255,71,125,.24),transparent 30%),radial-gradient(circle at 62% 86%,rgba(53,214,255,.2),transparent 34%),linear-gradient(135deg,#0c111d 0%,#12102a 52%,#170b20 100%); box-shadow:0 34px 90px rgba(0,0,0,.34); }
.featured-card::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.28; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.05) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%); background-size:72px 72px; }
.featured-copy { position:relative; z-index:3; padding:clamp(42px,6vw,78px); }
.featured-badges { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.platform-pill,.price-pill { display:inline-flex; min-height:30px; align-items:center; padding:0 12px; border:1px solid rgba(151,176,211,.22); border-radius:999px; color:#cbd5e3; background:rgba(5,9,17,.42); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.platform-pill.android { border-color:rgba(69,224,183,.34); color:#7aefd0; }
.price-pill { color:#ffc8e5; border-color:rgba(255,92,171,.3); }
.featured-copy h2 { max-width:620px; margin:0; font-size:clamp(46px,5.5vw,72px); line-height:.96; letter-spacing:-.052em; }
.featured-copy > p { max-width:570px; margin:24px 0 26px; color:#bac5d5; font-size:18px; line-height:1.65; }
.feature-chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px; }
.feature-chips span { padding:9px 12px; border:1px solid rgba(151,176,211,.16); border-radius:10px; color:#dce5f0; background:rgba(6,10,18,.42); font-size:12px; }
.featured-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.featured-actions .primary-cta { min-width:176px; height:56px; font-size:15px; }
.featured-secondary { display:inline-flex; min-width:176px; height:56px; align-items:center; justify-content:center; border:1px solid rgba(53,214,255,.48); border-radius:14px; color:#e9f5ff; background:rgba(8,13,23,.58); font-size:15px; font-weight:650; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.featured-secondary:hover { transform:translateY(-2px); border-color:var(--cyan); background:rgba(53,214,255,.09); }
.featured-art { position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; }
.featured-art::before,.featured-art::after { content:""; position:absolute; border:1px solid rgba(99,224,255,.16); border-radius:50%; animation:spin 24s linear infinite; }
.featured-art::before { width:460px; height:460px; border-style:dashed; }
.featured-art::after { width:330px; height:330px; border-color:rgba(255,99,196,.18); animation-direction:reverse; animation-duration:18s; }
.featured-icon { position:relative; z-index:2; width:min(390px,70%); height:auto; border-radius:28%; filter:drop-shadow(0 34px 48px rgba(0,0,0,.48)); animation:float-logo 6s ease-in-out infinite; }
.art-callout { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid rgba(255,255,255,.15); border-radius:12px; color:#e7edf7; background:rgba(8,11,20,.72); box-shadow:0 14px 34px rgba(0,0,0,.28); backdrop-filter:blur(12px); font-size:11px; font-weight:650; letter-spacing:.04em; }
.art-callout::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 13px var(--cyan); }
.callout-one { left:5%; top:24%; }.callout-two { right:4%; top:38%; }.callout-three { left:14%; bottom:17%; }

.apps-section { padding: 76px 0 110px; scroll-margin-top: 84px; border-top:1px solid rgba(151,176,211,.08); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 38px; }
.section-heading h2, .about-card h2, .contact-section h2 { margin: 0; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.section-tools { max-width: 430px; display: flex; align-items: flex-end; gap: 24px; }
.section-tools > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.platform-collection + .platform-collection { margin-top:56px; }
.platform-heading { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.platform-heading i { width:34px; height:1px; background:linear-gradient(90deg,var(--group-accent),transparent); }
.platform-heading h3 { margin:0; font-size:14px; letter-spacing:.16em; text-transform:uppercase; }
.platform-heading span { color:var(--subtle); font-size:12px; }
.platform-collection.windows { --group-accent:var(--cyan); }.platform-collection.android { --group-accent:var(--green); }
.app-showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.windows-grid { grid-template-columns:1fr; }
.app-showcase-card { --card-accent:var(--cyan); position:relative; min-width:0; overflow:hidden; border:1px solid rgba(151,176,211,.22); border-radius:22px; background:linear-gradient(155deg,rgba(17,24,37,.96),rgba(9,14,23,.97)); box-shadow:0 22px 55px rgba(0,0,0,.25); transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .25s; }
.app-showcase-card.android-card { --card-accent:var(--green); }
.app-showcase-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--card-accent) 58%,transparent); box-shadow:0 30px 68px rgba(0,0,0,.36),0 0 32px color-mix(in srgb,var(--card-accent) 8%,transparent); }
.app-card-visual { position:relative; height:238px; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid rgba(151,176,211,.13); background:radial-gradient(circle at center,color-mix(in srgb,var(--card-accent) 18%,transparent),transparent 48%),#090e17; }
.app-card-visual::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -54px 60px rgba(5,8,14,.2); pointer-events:none; }
.app-card-visual img { display:block; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.app-showcase-card:hover .app-card-visual img { transform:scale(1.025); }
.app-card-visual.icon-art img { width:min(190px,58%); height:auto; border-radius:23%; filter:drop-shadow(0 22px 30px rgba(0,0,0,.45)); }
.app-card-visual.wide-art { padding:12px; background:radial-gradient(circle at center,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 58%), #090e17; }
.app-card-visual.wide-art img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:14px; }
.app-card-copy { display:block; padding:25px 25px 27px; }
.app-card-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.app-card-platform { color:var(--card-accent); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.app-card-price { padding:6px 9px; border:1px solid rgba(151,176,211,.17); border-radius:999px; color:#c7d0dd; background:rgba(5,9,16,.46); font-size:10px; }
.app-card-copy h3 { margin:0; font-size:28px; letter-spacing:-.03em; }
.app-card-copy > p { min-height:72px; margin:13px 0 19px; color:var(--muted); font-size:14px; line-height:1.65; }
.card-chips { display:flex; flex-wrap:wrap; gap:7px; }
.card-chips span { padding:7px 9px; border:1px solid rgba(151,176,211,.14); border-radius:8px; color:#b9c5d4; background:rgba(6,10,17,.42); font-size:10px; }
.card-open { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:17px; border-top:1px solid rgba(151,176,211,.11); color:#dce7f3; font-size:13px; font-weight:650; }
.card-open b { color:var(--card-accent); font-size:18px; font-weight:400; transition:transform .2s; }.app-showcase-card:hover .card-open b { transform:translate(3px,-3px); }
.windows-grid .app-showcase-card { display:grid; grid-template-columns:minmax(320px,42%) 1fr; }
.windows-grid .app-card-visual { height:auto; min-height:350px; border-right:1px solid rgba(151,176,211,.13); border-bottom:0; }
.windows-grid .app-card-visual.icon-art img { width:min(265px,58%); }
.windows-grid .app-card-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,64px); }
.windows-grid .app-card-copy > p { min-height:0; max-width:650px; font-size:16px; }

.app-page { min-height: 100vh; background: radial-gradient(circle at 78% 10%, rgba(53,214,255,.09), transparent 27%), var(--bg); }
.app-page-header { width:min(1120px,calc(100% - 48px)); height:100px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(151,176,211,.12); }
.app-page-header > a:last-child { color:var(--muted); font-size:14px; }
.app-page-content { width:min(1120px,calc(100% - 48px)); margin:auto; padding:70px 0 110px; }
.app-identity { display:flex; align-items:center; gap:24px; margin-bottom:42px; }
.app-page-icon { width:112px; height:112px; flex:0 0 auto; padding:6px; object-fit:contain; border-radius:25px; background:#090e17; box-shadow:0 20px 52px rgba(0,0,0,.38); }
.app-page-icon.boardscape { padding:0; background:transparent; border-radius:24px; }
.cruisefi-icon-wrap { position:relative; display:block; padding:0; overflow:hidden; }
.app-platform { margin:0 0 8px; color:var(--cyan); font-size:11px; font-weight:650; letter-spacing:.15em; text-transform:uppercase; }
.app-identity h1 { max-width:none; margin:0; font-size:clamp(44px,6vw,72px); }
.app-tagline { margin:12px 0 0; color:var(--muted); font-size:18px; }
.feature-graphic { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:24px; background:#0b1019; box-shadow:0 28px 75px rgba(0,0,0,.34); }
.feature-graphic img { display:block; width:100%; height:auto; }
.app-description { margin-top:38px; padding:clamp(32px,5vw,58px); border:1px solid rgba(151,176,211,.2); border-radius:24px; background:linear-gradient(145deg,rgba(16,23,34,.94),rgba(10,15,24,.94)); box-shadow:0 22px 60px rgba(0,0,0,.24); }
.app-description .eyebrow { margin-bottom:16px; }
.app-description h2 { margin:0; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.035em; }
.app-description > p:not(.eyebrow) { max-width:880px; margin:22px 0 32px; color:var(--muted); font-size:17px; line-height:1.75; }
.app-feature-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.app-feature-list span { min-height:72px; display:flex; align-items:center; gap:12px; padding:18px; border:1px solid rgba(151,176,211,.15); border-radius:14px; color:#d6deea; background:rgba(7,11,18,.42); font-size:14px; }
.app-feature-list b { color:var(--cyan); font:700 11px/1 var(--font-geist-mono, "Cascadia Mono"),Consolas,monospace; }

.app-page-note { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:32px; padding:28px 0; border-top:1px solid rgba(151,176,211,.12); }
.app-page-note p { max-width:680px; margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.app-page-note .primary-cta { min-width:180px; height:54px; }
.icon-only-showcase { min-height:380px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:24px; background:radial-gradient(circle at center,rgba(138,99,255,.16),transparent 44%),linear-gradient(140deg,#101722,#0b1019); }
.icon-only-showcase img { width:min(260px,52vw); height:auto; padding:18px; border-radius:36px; background:#090e17; box-shadow:0 26px 72px rgba(0,0,0,.42); }
.boardscape-feature { position:relative; isolation:isolate; min-height:500px; display:grid; grid-template-columns:46% 54%; align-items:center; overflow:hidden; border:1px solid rgba(151,176,211,.28); border-radius:24px; background:radial-gradient(circle at 82% 20%,rgba(255,67,126,.26),transparent 28%),radial-gradient(circle at 66% 72%,rgba(33,214,255,.24),transparent 34%),linear-gradient(135deg,#080913 0%,#130b2b 52%,#190b1e 100%); box-shadow:0 28px 75px rgba(0,0,0,.34); }
.boardscape-feature::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.34; background:repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.045) 63px 64px),repeating-linear-gradient(0deg,transparent 0 62px,rgba(255,255,255,.035) 63px 64px); }
.boardscape-feature-copy { padding:clamp(38px,6vw,72px); }
.boardscape-feature-copy small { display:block; margin-bottom:16px; color:#63e9ff; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.boardscape-feature-copy h2 { margin:0; color:white; font-size:clamp(44px,6vw,76px); line-height:.95; letter-spacing:-.055em; }
.boardscape-feature-copy p { margin:22px 0 0; color:#c8c6e8; font-size:clamp(18px,2vw,25px); }
.soundboard-ui { width:min(500px,88%); justify-self:center; padding:24px; border:1px solid rgba(255,255,255,.16); border-radius:30px; background:linear-gradient(145deg,rgba(23,28,49,.96),rgba(7,9,19,.95)); box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(128,78,255,.2); transform:rotate(-2.5deg); }
.soundboard-levels { height:62px; display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:18px; }
.soundboard-levels i { width:12px; height:var(--level); border-radius:4px 4px 2px 2px; background:linear-gradient(#ff4e86,#ffb21b 48%,#54f28b); box-shadow:0 0 12px currentColor; }
.soundboard-pads { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.soundboard-pads span { aspect-ratio:1.35; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:18px; color:white; font-size:24px; font-weight:800; background:linear-gradient(145deg,var(--pad-a),var(--pad-b)); box-shadow:inset 0 1px rgba(255,255,255,.38),0 8px 20px rgba(0,0,0,.35),0 0 22px color-mix(in srgb,var(--pad-a) 38%,transparent); }

.about-section { padding: 40px 0 110px; scroll-margin-top: 88px; }.about-card { position: relative; overflow: hidden; padding: clamp(38px,6vw,78px); border: 1px solid var(--border); border-radius: 26px; background: radial-gradient(circle at 85% 40%, rgba(138,99,255,.16), transparent 27%), linear-gradient(140deg,#101722,#0b1019); }.about-card::after { content:""; position:absolute; width:260px; height:260px; right:-70px; top:-80px; border:1px solid rgba(53,214,255,.32); border-radius:28px; transform:rotate(28deg); }.about-card > p:not(.eyebrow) { max-width: 720px; margin: 24px 0 40px; color: var(--muted); font-size: 17px; line-height: 1.75; }.about-points { display: flex; gap: 42px; flex-wrap: wrap; }.about-points span { display: flex; align-items: center; gap: 11px; color: #c7d0dd; font-size: 13px; }.about-points b { color: var(--cyan); font-size: 11px; font-family: var(--font-geist-mono, "Cascadia Mono"), Consolas, monospace; }
.contact-section { padding: 40px 24px 105px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; scroll-margin-top: 88px; }.secondary-cta { display: flex; align-items: center; gap: 34px; padding: 18px 0 12px; border-bottom: 1px solid var(--cyan); color: #dce8f5; font-size: 17px; }.secondary-cta span { color: var(--cyan); font-size: 21px; transition: transform .2s; }.secondary-cta:hover span { transform: translate(3px,-3px); }
.site-footer { min-height: 140px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 35px; border-top: 1px solid rgba(151,176,211,.12); color: var(--subtle); font-size: 12px; }.site-footer .wordmark { color: var(--text); font-size: 17px; }.site-footer p { margin: 0; }.site-footer div { display: flex; gap: 22px; }.site-footer a:hover { color: white; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { from { translate: 0 -4px; } to { translate: 0 6px; } }
@keyframes breathe { from { opacity: .42; transform: scale(.96); } to { opacity: .62; transform: scale(1.03); } }
@keyframes float-logo { 0%,100% { transform:translateY(-5px) rotate(-1deg); } 50% { transform:translateY(8px) rotate(1deg); } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 1100px) {
  .shell { width: min(100% - 64px, 1040px); }.hero { grid-template-columns: 62% 38%; }.hero-art { width: 50%; opacity: .74; }.section-heading { align-items: flex-start; }.featured-card { grid-template-columns:52% 48%; }.featured-icon { width:min(330px,78%); }.art-callout { display:none; }.app-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.app-showcase-grid .app-showcase-card:last-child { grid-column:1/-1; }.app-showcase-grid .app-showcase-card:last-child { display:grid; grid-template-columns:45% 55%; }.app-showcase-grid .app-showcase-card:last-child .app-card-visual { height:auto; min-height:300px; border-right:1px solid rgba(151,176,211,.13); border-bottom:0; }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 40px); }.site-header { height: 74px; padding: 0 20px; }.site-header nav { gap: 20px; }.site-header nav a:nth-child(2) { display:none; }.wordmark { font-size: 19px; }.hero { min-height: 650px; grid-template-columns: 1fr; }.hero-copy { padding: 45px 0 25px; }.hero-art { width: 100%; height: 63%; top: 22%; right: -20%; opacity: .42; }.hero-subhead { font-size: 18px; }.primary-cta { width: 100%; }.featured-section { padding:0 0 56px; }.featured-card { min-height:0; grid-template-columns:1fr; }.featured-copy { padding:38px 26px 28px; }.featured-copy > p { font-size:16px; }.featured-actions { align-items:stretch; flex-direction:column; }.featured-actions a { width:100%; }.featured-art { min-height:390px; order:-1; }.featured-icon { width:min(270px,62%); }.featured-art::before { width:330px; height:330px; }.featured-art::after { width:235px; height:235px; }.apps-section { padding-top:65px; }.section-heading { display:block; }.section-tools { max-width:none; margin-top:20px; }.section-tools > p { font-size:14px; }.app-showcase-grid,.windows-grid { grid-template-columns:1fr; }.app-showcase-grid .app-showcase-card:last-child,.windows-grid .app-showcase-card { display:block; grid-column:auto; }.app-showcase-grid .app-showcase-card:last-child .app-card-visual,.windows-grid .app-card-visual { height:230px; min-height:0; border-right:0; border-bottom:1px solid rgba(151,176,211,.13); }.windows-grid .app-card-copy { display:block; padding:25px; }.app-card-copy > p { min-height:0; }.platform-heading span { display:none; }.about-section { padding-bottom: 70px; }.about-points { gap: 20px; flex-direction: column; }.contact-section { display: block; padding-inline: 0; }.secondary-cta { margin-top: 28px; width: max-content; max-width: 100%; }.site-footer { padding: 36px 0; grid-template-columns: 1fr; gap: 18px; }.site-footer div { flex-wrap: wrap; }.app-identity { align-items:flex-start; }.app-page-icon { width:86px; height:86px; border-radius:20px; }.app-tagline { font-size:16px; }.feature-graphic { border-radius:16px; }.boardscape-feature { min-height:520px; grid-template-columns:1fr; padding-bottom:38px; }.boardscape-feature-copy { padding:38px 30px 24px; }.soundboard-ui { width:calc(100% - 48px); }.app-description { padding:30px 24px; }.app-feature-list { grid-template-columns:1fr; }.app-page-note { align-items:stretch; flex-direction:column; }.app-page-note .primary-cta { width:100%; }
}
@media (max-width: 430px) {
  h1 { font-size: 42px; }.site-header nav { gap: 14px; }.site-header nav a { font-size: 13px; }.mock { height: 195px; }.app-description { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.legal-page { min-height:100vh; background:radial-gradient(circle at 82% 8%,rgba(53,214,255,.09),transparent 25%),var(--bg); }
.legal-header { width:min(900px,calc(100% - 48px)); height:100px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(151,176,211,.12); }
.legal-header > a:last-child { color:var(--muted); font-size:14px; }
.legal-page article { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:80px 0 120px; }
.legal-page article h1 { font-size:clamp(46px,7vw,72px); }
.legal-page article h2 { margin:44px 0 12px; font-size:22px; }
.legal-page article p { color:var(--muted); font-size:16px; line-height:1.75; }
.legal-page article a { color:var(--cyan); }
.legal-page .legal-updated { color:var(--subtle); font-size:13px; }

/* 2026 homepage and product-page refinements */
.hero { grid-template-columns: 51% 49%; }
.hero-copy { padding-bottom: 26px; }
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-actions .primary-cta { min-width:205px; }
.secondary-hero-cta { display:inline-flex; min-width:185px; height:64px; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(151,176,211,.3); border-radius:14px; color:#e9f2fb; background:rgba(13,19,30,.68); font-size:16px; font-weight:650; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.secondary-hero-cta:hover { transform:translateY(-2px); border-color:rgba(53,214,255,.7); background:rgba(53,214,255,.08); }
.hero-proof { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.hero-proof span { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border:1px solid rgba(151,176,211,.16); border-radius:999px; color:#b8c5d5; background:rgba(8,13,22,.48); font-size:11px; letter-spacing:.03em; }
.hero-proof span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(53,214,255,.8); }
.hero-art { right:-1%; }
.hero-app-tile { position:absolute; z-index:3; display:grid; grid-template-columns:58px 1fr; align-items:center; gap:13px; width:230px; min-height:82px; padding:12px; border:1px solid rgba(151,176,211,.22); border-radius:18px; background:linear-gradient(145deg,rgba(19,27,42,.9),rgba(8,13,22,.86)); box-shadow:0 22px 55px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(16px); animation:tile-float 7s ease-in-out infinite; }
.hero-app-tile img { width:58px; height:58px; object-fit:cover; border-radius:14px; background:#090e17; }
.hero-app-tile strong { display:block; font-size:15px; letter-spacing:-.01em; }
.hero-app-tile small { display:block; margin-top:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.hero-app-tile.tile-boardscape { left:10%; top:16%; }
.hero-app-tile.tile-cruisefi { right:1%; top:31%; animation-delay:-1.8s; }
.hero-app-tile.tile-ridemetrics { left:16%; bottom:15%; animation-delay:-3.4s; }
.hero-app-tile.tile-vidralis { right:8%; bottom:7%; animation-delay:-5s; }
.hero-app-tile.tile-cruisefi img { object-position:left center; }

.app-showcase-card { display:flex; flex-direction:column; }
.app-showcase-card:hover .app-card-visual img { transform:scale(1.025); }
.app-card-copy { flex:1; display:flex; flex-direction:column; }
.app-card-copy .card-chips { margin-bottom:0; }
.app-card-links { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:20px; }
.card-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 15px; border:1px solid rgba(151,176,211,.23); border-radius:11px; color:#dce7f3; background:rgba(7,11,18,.52); font-size:12px; font-weight:700; transition:transform .2s,border-color .2s,background .2s; }
.card-button:hover { transform:translateY(-2px); border-color:var(--card-accent); background:color-mix(in srgb,var(--card-accent) 9%,rgba(7,11,18,.8)); }
.card-button.primary { margin-left:auto; border-color:color-mix(in srgb,var(--card-accent) 55%,transparent); color:#071018; background:var(--card-accent); }
.card-button.primary:hover { background:color-mix(in srgb,var(--card-accent) 88%,white); }
.card-button.disabled { cursor:default; color:var(--subtle); border-style:dashed; background:transparent; }
.windows-grid .app-showcase-card { display:grid; grid-template-columns:minmax(320px,42%) 1fr; }
.windows-grid .app-card-copy { display:flex; }

.app-identity { justify-content:space-between; }
.app-identity-main { display:flex; align-items:center; gap:24px; min-width:0; }
.app-identity-actions { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.app-identity-actions .primary-cta,.app-identity-actions .store-secondary-cta { min-width:160px; height:52px; font-size:14px; }
.app-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:-12px 0 34px; }
.app-meta-card { min-height:82px; padding:17px 18px; border:1px solid rgba(151,176,211,.16); border-radius:15px; background:rgba(12,18,28,.68); }
.app-meta-card small { display:block; color:var(--subtle); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.app-meta-card strong { display:block; margin-top:9px; color:#e4edf7; font-size:14px; line-height:1.35; }
.app-page-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.store-secondary-cta { display:inline-flex; min-width:180px; height:54px; align-items:center; justify-content:center; border:1px solid rgba(53,214,255,.55); border-radius:14px; color:#dce8f5; background:rgba(16,22,33,.78); font-size:16px; font-weight:650; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.store-secondary-cta:hover { transform:translateY(-2px); border-color:var(--cyan); background:rgba(53,214,255,.1); }
.cruisefi-logo { position:absolute; inset:6px; display:block; border-radius:12px; background-image:url('../logos/cruisefi-promo.png'); background-repeat:no-repeat; background-size:720% auto; background-position:14.7% 10.6%; }

.detail-section { margin-top:30px; }
.detail-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:18px; }
.detail-section-heading h2 { margin:0; font-size:clamp(28px,3vw,40px); letter-spacing:-.035em; }
.detail-section-heading p { max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.detail-card { min-height:150px; padding:24px; border:1px solid rgba(151,176,211,.16); border-radius:18px; background:linear-gradient(145deg,rgba(16,23,34,.9),rgba(9,14,23,.94)); }
.detail-card b { color:var(--cyan); font:700 11px/1 var(--font-geist-mono,"Cascadia Mono"),Consolas,monospace; }
.detail-card h3 { margin:16px 0 8px; font-size:18px; }
.detail-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.related-apps { margin-top:56px; padding-top:38px; border-top:1px solid rgba(151,176,211,.12); }
.related-apps h2 { margin:0 0 20px; font-size:28px; letter-spacing:-.03em; }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.related-card { display:flex; align-items:center; gap:14px; min-height:92px; padding:16px; border:1px solid rgba(151,176,211,.16); border-radius:16px; background:rgba(12,18,28,.64); transition:transform .2s,border-color .2s; }
.related-card:hover { transform:translateY(-3px); border-color:rgba(53,214,255,.48); }
.related-card img { width:58px; height:58px; object-fit:cover; border-radius:13px; background:#090e17; }
.related-card strong { display:block; font-size:15px; }
.related-card small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.related-card .arrow { margin-left:auto; color:var(--cyan); font-size:20px; }

@keyframes tile-float { 0%,100% { transform:translateY(-4px) rotate(-.5deg); } 50% { transform:translateY(8px) rotate(.5deg); } }

@media (max-width:1100px) {
  .hero-app-tile { width:205px; grid-template-columns:50px 1fr; }
  .hero-app-tile img { width:50px; height:50px; }
  .app-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .hero { min-height:720px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .secondary-hero-cta { width:100%; }
  .hero-proof { max-width:340px; }
  .hero-app-tile { width:180px; min-height:68px; grid-template-columns:42px 1fr; padding:9px; }
  .hero-app-tile img { width:42px; height:42px; border-radius:10px; }
  .hero-app-tile strong { font-size:13px; }
  .hero-app-tile small { font-size:8px; }
  .hero-app-tile.tile-boardscape { left:1%; top:23%; }
  .hero-app-tile.tile-cruisefi { right:-10%; top:38%; }
  .hero-app-tile.tile-ridemetrics { left:5%; bottom:13%; }
  .hero-app-tile.tile-vidralis { right:-6%; bottom:4%; }
  .app-card-links { align-items:stretch; flex-direction:column; }
  .card-button,.card-button.primary { width:100%; margin-left:0; }
  .app-identity { align-items:stretch; flex-direction:column; }
  .app-identity-main { align-items:flex-start; }
  .app-identity-actions { align-items:stretch; flex-direction:column; }
  .app-identity-actions a { width:100%; }
  .app-meta-grid { grid-template-columns:1fr 1fr; }
  .detail-section-heading { align-items:flex-start; flex-direction:column; }
  .detail-grid,.related-grid { grid-template-columns:1fr; }
}
@media (max-width:430px) {
  .app-meta-grid { grid-template-columns:1fr; }
}


/* Keep the product mosaic below the hero copy on phones so it never obscures text or actions. */
@media (max-width:760px) {
  .hero { display:block; min-height:0; padding-bottom:34px; }
  .hero-copy { width:100%; padding:46px 0 16px; }
  .hero-art { position:relative; width:100%; height:320px; top:auto; right:auto; margin-top:6px; opacity:.9; }
  .hero-app-tile.tile-boardscape { left:0; top:14px; }
  .hero-app-tile.tile-cruisefi { right:0; top:82px; }
  .hero-app-tile.tile-ridemetrics { left:8%; bottom:54px; }
  .hero-app-tile.tile-vidralis { right:4%; bottom:4px; }
}


/* BoardScape playback-focused redesign */
.boardscape-home-feature { background:radial-gradient(circle at 86% 14%,rgba(255,70,129,.25),transparent 29%),radial-gradient(circle at 64% 88%,rgba(48,215,255,.22),transparent 32%),linear-gradient(135deg,#0a0e1a 0%,#15102c 48%,#1e0b21 100%); }
.boardscape-featured-art { isolation:isolate; }
.boardscape-featured-art::before { width:440px; height:440px; border:1px solid rgba(92,225,255,.18); border-style:dashed; }
.boardscape-featured-art::after { width:290px; height:290px; border-color:rgba(255,92,177,.2); }
.featured-app-core { position:relative; z-index:3; width:min(315px,58%); aspect-ratio:1; display:grid; place-items:center; }
.featured-app-core .featured-icon { width:78%; max-width:none; border-radius:28%; animation:float-logo 6s ease-in-out infinite; }
.core-ring { position:absolute; inset:5%; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 68px rgba(126,83,255,.22),inset 0 0 55px rgba(42,209,255,.08); }
.featured-wave { position:absolute; z-index:1; width:86%; height:150px; display:flex; align-items:center; justify-content:center; gap:7px; opacity:.48; transform:rotate(-7deg); }
.featured-wave i { width:7px; height:var(--h,40%); border-radius:999px; background:linear-gradient(180deg,#ff4f92,#8b63ff 50%,#38ddff); box-shadow:0 0 14px rgba(86,211,255,.28); }
.featured-wave i:nth-child(1),.featured-wave i:nth-child(16){--h:18%}.featured-wave i:nth-child(2),.featured-wave i:nth-child(15){--h:31%}.featured-wave i:nth-child(3),.featured-wave i:nth-child(14){--h:55%}.featured-wave i:nth-child(4),.featured-wave i:nth-child(13){--h:78%}.featured-wave i:nth-child(5),.featured-wave i:nth-child(12){--h:48%}.featured-wave i:nth-child(6),.featured-wave i:nth-child(11){--h:92%}.featured-wave i:nth-child(7),.featured-wave i:nth-child(10){--h:66%}.featured-wave i:nth-child(8),.featured-wave i:nth-child(9){--h:100%}
.playback-card { position:absolute; z-index:5; min-width:148px; display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid rgba(255,255,255,.15); border-radius:15px; color:#edf4ff; background:linear-gradient(145deg,rgba(16,20,36,.9),rgba(7,10,19,.82)); box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(14px); }
.playback-card > b { min-width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#09111b; background:linear-gradient(135deg,#5be5ff,#9f79ff); font-size:15px; }
.playback-card strong,.playback-card small { display:block; }
.playback-card strong { font-size:12px; letter-spacing:.02em; }
.playback-card small { margin-top:3px; color:#92a1b7; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.playback-play { left:4%; top:20%; }.playback-loop { right:4%; top:27%; }.playback-reverse { left:8%; bottom:18%; }.playback-speed { right:3%; bottom:15%; gap:9px; }.playback-speed > b:last-child { background:linear-gradient(135deg,#ff69ae,#ffbd45); }

.boardscape-page { background:radial-gradient(circle at 82% 6%,rgba(255,65,133,.1),transparent 22%),radial-gradient(circle at 15% 30%,rgba(54,216,255,.07),transparent 26%),var(--bg); }
.boardscape-studio { min-height:590px; grid-template-columns:43% 57%; background:radial-gradient(circle at 88% 18%,rgba(255,68,134,.27),transparent 28%),radial-gradient(circle at 65% 82%,rgba(34,215,255,.24),transparent 34%),linear-gradient(135deg,#080913 0%,#140b2b 48%,#1c0b20 100%); }
.boardscape-studio .boardscape-feature-copy h2 { max-width:500px; font-size:clamp(48px,5.7vw,76px); }
.boardscape-studio .boardscape-feature-copy p { max-width:470px; color:#c8c6e8; font-size:19px; line-height:1.55; }
.studio-feature-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; }
.soundboard-studio-ui { width:min(570px,92%); padding:17px; transform:rotate(-1.5deg); border-radius:27px; }
.soundboard-window-bar { height:36px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-bottom:12px; padding:0 4px; color:#8490a5; font-size:9px; letter-spacing:.14em; }
.soundboard-window-bar > span { display:flex; gap:6px; }
.soundboard-window-bar i { width:7px; height:7px; border-radius:50%; background:#ff537e; }.soundboard-window-bar i:nth-child(2){background:#ffbd45}.soundboard-window-bar i:nth-child(3){background:#54e894}
.soundboard-window-bar strong { color:#dce7f5; font-size:9px; letter-spacing:.18em; }
.soundboard-window-bar em { justify-self:end; color:#64ebcc; font-style:normal; font-weight:700; }
.soundboard-waveform { height:62px; display:flex; align-items:center; justify-content:center; gap:5px; margin-bottom:13px; padding:8px 12px; border:1px solid rgba(151,176,211,.12); border-radius:13px; background:rgba(4,7,14,.55); }
.soundboard-waveform i { width:5px; height:var(--wave); border-radius:99px; background:linear-gradient(180deg,#ff4e8f,#8a63ff 52%,#41ddff); box-shadow:0 0 8px rgba(76,207,255,.22); }
.studio-pads { gap:10px; }
.studio-pads span { position:relative; aspect-ratio:1.55; justify-items:start; align-content:end; padding:12px; font-size:17px; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.studio-pads span small { display:block; margin-top:3px; font-size:7px; letter-spacing:.13em; opacity:.78; }
.playback-tool-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.playback-tool-row > span { min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px; border:1px solid rgba(151,176,211,.13); border-radius:11px; color:#dce7f4; background:rgba(5,8,16,.6); }
.playback-tool-row b { color:#5fe3ff; font-size:15px; }.playback-tool-row small { font-size:7px; letter-spacing:.1em; color:#9aa8ba; }
.playback-tool-row .speed-tool { justify-content:space-between; }.playback-tool-row .speed-tool b:last-child { color:#ff70b0; }
.boardscape-description { border-color:rgba(178,104,255,.24); background:radial-gradient(circle at 92% 0,rgba(255,75,150,.1),transparent 28%),linear-gradient(145deg,rgba(18,21,38,.95),rgba(9,13,23,.96)); }
.boardscape-detail-grid .detail-card { position:relative; overflow:hidden; }
.boardscape-detail-grid .detail-card::after { content:""; position:absolute; width:95px; height:95px; right:-42px; bottom:-46px; border-radius:50%; background:radial-gradient(circle,rgba(68,218,255,.1),transparent 68%); }

@media (max-width:1100px) {
  .playback-card { min-width:132px; padding:10px 11px; }.playback-play { left:1%; }.playback-loop { right:1%; }.playback-reverse { left:3%; }.playback-speed { right:0; }
  .boardscape-studio { grid-template-columns:42% 58%; }.soundboard-studio-ui { width:94%; }
}
@media (max-width:760px) {
  .boardscape-featured-art { min-height:430px; }.featured-app-core { width:min(270px,58%); }.playback-card { min-width:125px; }.playback-play { left:4%; top:13%; }.playback-loop { right:3%; top:23%; }.playback-reverse { left:4%; bottom:18%; }.playback-speed { right:2%; bottom:10%; }
  .boardscape-studio { min-height:0; grid-template-columns:1fr; padding-bottom:34px; }.boardscape-studio .boardscape-feature-copy { padding-bottom:18px; }.soundboard-studio-ui { width:calc(100% - 38px); transform:none; }.playback-tool-row small { display:none; }
}
@media (max-width:430px) {
  .boardscape-featured-art { min-height:400px; }.featured-app-core { width:220px; }.playback-card { min-width:112px; padding:9px; }.playback-card > b { min-width:27px; height:27px; }.playback-card small { display:none; }.playback-play { left:1%; }.playback-loop { right:0; }.playback-reverse { left:1%; }.playback-speed { right:0; }
  .studio-pads span { padding:9px; font-size:14px; }.soundboard-waveform { gap:4px; padding-inline:8px; }.playback-tool-row { grid-template-columns:repeat(2,1fr); }
}


/* Reliable product-card navigation and corrected homepage feature layouts */
.app-showcase-card[data-href] {
  cursor: pointer;
}
.app-showcase-card[data-href]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent) 60%, transparent);
  outline-offset: 4px;
  border-color: color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.app-card-links,
.app-card-links a,
.app-card-links .card-button {
  position: relative;
  z-index: 3;
}

/* Keep the Vidralis art on the left and its copy on the right. */
.windows-grid #app-vidralis.vidralis-card {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
  grid-template-areas: "vidralis-art vidralis-copy";
}
.windows-grid #app-vidralis .app-card-visual {
  grid-area: vidralis-art;
  order: 0;
  border-right: 1px solid rgba(151,176,211,.13);
  border-bottom: 0;
}
.windows-grid #app-vidralis .app-card-copy {
  grid-area: vidralis-copy;
  order: 1;
}

/* BoardScape controls use explicit columns and block-level copy. */
.playback-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
}
.playback-card.playback-speed {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}
.playback-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #09111b;
  background: linear-gradient(135deg,#5be5ff,#9f79ff);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.playback-icon-end {
  background: linear-gradient(135deg,#ff69ae,#ffbd45);
}
.playback-copy {
  min-width: 0;
  display: grid;
  row-gap: 4px;
  line-height: 1.15;
}
.playback-title {
  display: block;
  color: #edf4ff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  white-space: nowrap;
}
.playback-subtitle {
  display: block;
  color: #92a1b7;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-feature-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
  gap: 10px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}
.studio-feature-tags li {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  color: #d9def1;
  background: rgba(7,9,18,.38);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .windows-grid #app-vidralis.vidralis-card {
    display: block;
  }
  .windows-grid #app-vidralis .app-card-visual {
    border-right: 0;
    border-bottom: 1px solid rgba(151,176,211,.13);
  }
}
@media (max-width: 430px) {
  .playback-card {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
  }
  .playback-card.playback-speed {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }
  .playback-icon {
    width: 27px;
    height: 27px;
  }
  .playback-subtitle {
    display: block;
    font-size: 7px;
    letter-spacing: .04em;
    white-space: normal;
  }
  .studio-feature-tags {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .studio-feature-tags li {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}


/* Real anchor surfaces make every meaningful card area navigable without JavaScript. */
.app-card-visual,
.app-card-main-link {
  color: inherit;
  text-decoration: none;
}
.app-card-main-link {
  display: block;
}
.app-card-main-link > p {
  min-height: 72px;
  margin: 13px 0 19px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.windows-grid .app-card-main-link > p {
  min-height: 0;
  max-width: 650px;
  font-size: 16px;
}
.app-card-visual:focus-visible,
.app-card-main-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent) 58%, transparent);
  outline-offset: -5px;
}
@media (max-width: 760px) {
  .app-card-main-link > p { min-height: 0; }
}


/* Actual BoardScape artwork */
.boardscape-page-feature { margin-top:8px; border-color:rgba(178,104,255,.22); background:radial-gradient(circle at 12% 14%,rgba(48,215,255,.08),transparent 20%),linear-gradient(145deg,rgba(17,22,36,.96),rgba(10,13,22,.98)); }
.boardscape-page-feature img { width:100%; height:auto; display:block; }