:root { color-scheme: dark; --bg:#091219; --surface:#111f2a; --surface2:#162936; --edge:#2a4552; --ink:#edf9fa; --muted:#adcad0; --mint:#44e2ce; --mint2:#9afbe7; --gold:#eec78b; --radius:22px; }
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; background:radial-gradient(ellipse 980px 620px at 85% 0%,#14443f65,transparent 70%),radial-gradient(ellipse 850px 850px at -20% 50%,#14344955,transparent 65%),var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
a {color:var(--mint2);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover {color:#fff}
a:focus-visible,button:focus-visible {outline:3px solid var(--mint2);outline-offset:4px}
.container {width:min(1140px,calc(100% - 44px));margin-inline:auto}
.skip {position:absolute;top:-80px;left:12px;background:#fff;color:#10252c;padding:10px 15px;border-radius:9px;z-index:10}
.skip:focus {top:12px}
.site-header {background:#0b171fcc;backdrop-filter:blur(15px);border-bottom:1px solid #25404c;position:relative;z-index:2}
.nav-shell {display:flex;gap:25px;align-items:center;justify-content:space-between;min-height:86px;padding-block:14px}
.brand {display:flex;align-items:center;gap:13px;flex-shrink:0;color:var(--ink);text-decoration:none}
.brand:hover {color:var(--ink)}
.brand-icon {height:43px;width:43px;display:grid;place-items:center;border:1px solid #4fe4ca85;border-radius:13px;background:linear-gradient(135deg,#0c4b4f,#172538);font-weight:900;letter-spacing:-.06em;font-size:1.15rem;color:#a7fff4}
.brand-word {display:grid;line-height:1.05;letter-spacing:-.018em}
.brand-word strong {font-size:1.03rem}
.brand-word small {font-size:.78rem;color:var(--muted);letter-spacing:.05em;margin-top:4px}
.site-nav {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 25px}
.site-nav a {font-size:.92rem;font-weight:650;color:#c8e0e4;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current='page']{color:var(--mint2)}
.site-nav .lang {border:1px solid #4a6874;padding:5px 10px;border-radius:9px;color:#d9edef}
main {min-height:68vh}
.hero {padding:84px 0 86px;display:grid;align-items:center;grid-template-columns:1.14fr .86fr;gap:62px}
.eyebrow {font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.14em;color:var(--mint2)}
h1 {font-weight:840;line-height:1.09;letter-spacing:-.05em;font-size:clamp(2.5rem,5.5vw,4.65rem);margin:17px 0 21px}
h1 .accent {color:var(--mint)}
h2 {font-size:clamp(1.75rem,3vw,2.55rem);line-height:1.15;letter-spacing:-.035em;margin:0 0 17px}
h3 {font-size:1.17rem;line-height:1.3;letter-spacing:-.015em;margin:0 0 9px}
p {margin:0 0 15px}
.lead {font-size:1.11rem;line-height:1.85;color:#b9d0d6;max-width:640px}
.btn-row {display:flex;flex-wrap:wrap;gap:13px;margin-top:31px}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--mint);color:#09282d;border:1px solid var(--mint);border-radius:13px;padding:12px 19px;font-weight:800;text-decoration:none;min-height:48px}
.btn:hover {background:#b5fff5;color:#09282d}
.btn.secondary {background:transparent;color:var(--ink);border-color:#5b7a83}
.btn.secondary:hover {border-color:var(--mint);color:var(--mint2)}
.hero-art {position:relative;min-height:355px;border:1px solid #315864;border-radius:32px;background:radial-gradient(ellipse at 50% 40%,#1d6662,#122d38 50%,#0c1d28 96%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;overflow:hidden;box-shadow:0 28px 75px #0004}
.hero-art:before {content:'';position:absolute;inset:15px;border:1px solid #47868144;border-radius:25px;pointer-events:none}
.hero-art .app-logo {width:min(225px,80%);max-height:225px;object-fit:contain;filter:drop-shadow(0 18px 18px #0006)}
.hero-art .brand-logo {width:min(270px,87%);border-radius:16px;background:#fff;padding:4px}
.small-note {margin-top:20px;font-size:.85rem;font-weight:650;letter-spacing:.02em;color:#d2e7e8}
.stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px;max-width:560px}
.stats span {border-top:1px solid #39525f;padding-top:12px;font-size:.86rem;color:#cadfe0}
.section {padding:67px 0}
.section-alt {background:linear-gradient(180deg,#12242b99,#0e202a33);border-top:1px solid #2e4c5433;border-bottom:1px solid #2e4c5433}
.section-intro {color:var(--muted);max-width:650px;font-size:1.035rem;margin-bottom:30px}
.grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card {border:1px solid var(--edge);background:linear-gradient(160deg,#152b36d9,#0f1e29e6);border-radius:21px;padding:26px;min-width:0}
.card p,.card li {color:#b6ced4}
.card a {font-weight:700}
.icon-round {height:48px;width:48px;border:1px solid #31786d;border-radius:14px;background:#1f615333;display:grid;place-items:center;color:var(--mint2);font-size:1.4rem;font-weight:800;margin-bottom:19px}
.callout {display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 32px;border:1px solid #3c7d77;border-radius:24px;background:linear-gradient(120deg,#134d48aa,#122633)}
.callout h2 {font-size:1.7rem;margin-bottom:7px}
.callout p {color:#cce0e1;margin:0;max-width:670px}
.callout .btn {flex-shrink:0}
.page-lead {padding:66px 0 35px;max-width:810px}
.page-lead h1 {font-size:clamp(2.35rem,4.9vw,4.05rem)}
.page-lead .lead {max-width:780px}
.breadcrumb {font-size:.85rem;color:#9dc4ca;margin-bottom:22px}
.breadcrumb a {color:#9dc4ca}
.content-shell {padding:22px 0 80px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:25px;align-items:start}
.stack {display:grid;gap:18px}
.detail {padding:27px 30px}
.detail h2 {font-size:1.45rem;margin:0 0 15px;letter-spacing:-.02em}
.detail p,.detail li {color:#c0d5d8}
.detail ol,.detail ul {padding-left:22px}
.detail li+li {margin-top:10px}
.side-card {position:sticky;top:20px}
.side-card h3 {color:var(--mint2)}
.contact-email {display:block;font-weight:750;font-size:1rem;overflow-wrap:anywhere}
.contact-caption {font-size:.88rem;color:var(--muted);margin-top:8px}
.mini-links {display:grid;gap:10px;margin-top:16px}
.mini-links a {width:fit-content}
.important {border-left:3px solid var(--mint);background:#0e342f7a;border-radius:0 12px 12px 0;padding:15px 18px;color:#e3f8f4!important}
.detail strong {color:#f1ffff}
.steps {counter-reset:num;list-style:none!important;padding-left:0!important}
.steps li {counter-increment:num;display:flex;gap:13px;margin:0!important;padding:13px 0;border-bottom:1px solid #27414b}
.steps li::before {content:counter(num);display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:10px;background:#214e4a;color:var(--mint2);font-weight:900}
.feature-pill {display:inline-block;color:#c8ede7;border:1px solid #3e726b;border-radius:999px;padding:4px 11px;font-size:.77rem;font-weight:750;margin:4px 5px 0 0}
.site-footer {border-top:1px solid #2b4752;background:#09131b;padding:33px 0 36px}
.footer-inner {display:grid;grid-template-columns:1fr auto;gap:30px}
.site-footer p {font-size:.9rem;color:#a9c2ca;max-width:450px}
.foot-nav {display:flex;flex-wrap:wrap;align-items:start;justify-content:flex-end;gap:8px 18px;font-size:.85rem}
.foot-nav a {color:#b9dbdc}
.legal-note {margin-top:18px;color:#86a8ad;font-size:.78rem}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:28px;padding:53px 0 68px}.hero-art{min-height:295px}.grid{grid-template-columns:repeat(2,1fr)}.content-shell{grid-template-columns:1fr}.side-card{position:static}.nav-shell{align-items:flex-start}.site-nav{gap:8px 15px}}
@media (max-width:600px){.container{width:calc(100% - 32px)}.nav-shell{flex-direction:column;gap:18px}.site-nav{justify-content:flex-start;gap:7px 15px}.hero{padding:45px 0 55px}.hero-art{min-height:260px}.hero-art .app-logo{width:165px}.stats{grid-template-columns:1fr}.stats span{padding-top:8px}.grid{grid-template-columns:1fr}.section{padding:48px 0}.callout{flex-direction:column;align-items:flex-start;padding:25px}.page-lead{padding:42px 0 20px}.content-shell{padding:12px 0 55px}.detail{padding:23px}.footer-inner{grid-template-columns:1fr}.foot-nav{justify-content:flex-start}.btn{width:100%}.btn-row{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Brand-first homepage and expandable app catalogue — v2. */
.studio-hero .lead strong {color:var(--ink)}
.studio-art {background:radial-gradient(ellipse at 50% 35%,#1a5c57,#112b37 55%,#0b1b25 95%)}
.studio-symbol {display:flex;align-items:baseline;justify-content:center;font-size:clamp(7rem,16vw,12rem);letter-spacing:-.13em;line-height:1;font-weight:900;color:#a7fff4;text-shadow:0 15px 50px #0006}
.studio-symbol b {color:#ff8c91;font-size:.65em;margin-left:.05em}
.studio-wordmark {display:flex;flex-direction:column;align-items:center;line-height:1.3;margin-top:5px;font-weight:800;letter-spacing:-.025em}
.studio-wordmark strong {font-size:1.55rem}
.studio-wordmark span {letter-spacing:.35em;font-size:.8rem;color:var(--muted);margin-top:3px}
.studio-art .small-note {margin-bottom:0}
.status-pill {display:inline-flex;border:1px solid #5c827e;background:#19463f;color:#b3fff2;border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:800;letter-spacing:.01em;line-height:1.5}
.app-teaser {display:flex;gap:22px;align-items:center;max-width:790px}
.app-teaser-mark,.app-icon {display:grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,#28685c,#13384b);border:1px solid #518a85;color:#efffff;font-weight:900;letter-spacing:-.07em;border-radius:18px}
.app-teaser-mark {width:100px;height:100px;font-size:2rem}
.app-icon {width:76px;height:76px;font-size:1.5rem}
.app-teaser-copy h3 {font-size:1.55rem;margin:10px 0 6px}
.app-teaser-copy p {margin-bottom:8px}
.apps-grid {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:22px;align-items:stretch}
.apps-section {padding-top:52px}
.app-identity {display:flex;align-items:center;gap:19px;margin-bottom:23px}
.app-identity h3 {font-size:1.5rem;margin:8px 0 0}
.app-category {font-size:.9rem;margin:3px 0 0;color:var(--muted)!important}
.app-actions {margin-top:23px}
.availability-note {font-size:.89rem;margin:16px 0 0;color:#b6ced4}
.future-app {display:flex;flex-direction:column;align-items:start;justify-content:center}
.future-app .icon-round {font-size:1.7rem}
@media (max-width:760px) {.apps-grid{grid-template-columns:1fr}}
@media (max-width:600px) {.app-teaser{align-items:flex-start;flex-direction:column}.studio-symbol{font-size:8rem}.studio-wordmark strong{font-size:1.3rem}}

/* Production branding: the image assets use the official user-provided logos. */
.brand .brand-image {width:64px;height:41px;object-fit:contain;border-radius:7px;background:#fff;padding:3px;flex-shrink:0}
.brand-word small {letter-spacing:.015em}
.official-logo-frame {width:min(410px,94%);aspect-ratio:1;border-radius:24px;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 20px 48px #0005}
.official-logo-frame img {display:block;width:100%;height:100%;object-fit:contain}
.studio-art .small-note {margin-top:18px}
.app-icon-img {width:100%;height:100%;object-fit:contain;display:block}
.app-teaser-logo {width:116px;height:116px;object-fit:contain;flex:0 0 auto}
.app-identity .app-icon {overflow:hidden;background:#091722;border-color:#2f6867;padding:3px}
.app-listing .card-tag {font-size:.77rem;font-weight:750;color:var(--mint2);letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:8px}
.rent-monogram {height:76px;width:76px;border:1px solid #497f7a;display:grid;place-items:center;flex-shrink:0;border-radius:17px;background:linear-gradient(145deg,#114f54,#142936);font-weight:900;font-size:2rem;letter-spacing:-.07em;color:#a9fff4}
.rent-monogram.mini {width:116px;height:116px;font-size:2.7rem}
.app-teasers {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.app-teasers .app-teaser {align-items:center;max-width:none;min-height:200px}
.app-teaser-copy h3 {margin-top:0}
.app-teaser-copy p {line-height:1.65}
.external-link {white-space:normal}
.app-listing {display:flex;flex-direction:column}
.app-listing .app-actions {margin-top:auto;padding-top:16px}
.small-top-gap{margin-top:17px}
.medium-top-gap{margin-top:23px}
.privacy-note {font-size:.85rem;color:var(--muted)}
@media(max-width:800px){.app-teasers{grid-template-columns:1fr}}
@media(max-width:600px){.brand .brand-image{width:55px;height:37px}.app-teaser-logo,.rent-monogram.mini{width:85px;height:85px}.app-teasers .app-teaser{min-height:0}.official-logo-frame{width:min(285px,94%)}}