:root { --experience-surface:#fffdf9; --experience-panel:#fff; --experience-glass:#fffc; --experience-shadow:#40311e20; --studio-paper:#f8f6f0; --studio-focus:#b63812; color-scheme:light; }
:root[data-theme=dark] { --studio-paper:#101315; --studio-white:#1a1e20; --studio-ink:#f5f3ee; --studio-muted:#b4b7b8; --studio-line:#363c3f; --studio-soft:#22282b; --studio-focus:#ff9971; --experience-surface:#14191c; --experience-panel:#1b2226; --experience-glass:#192024e8; --experience-shadow:#0008; color-scheme:dark; }
html { scroll-padding-top:88px; }
.home-offers, .home-offers .catalog-anchor { scroll-margin-top:0; }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
.studio, .studio:has(.studio-home-catalog), .studio:has(.studio-visual-catalog) { background:var(--studio-paper); }
.studio-header { min-height:88px; gap:24px; }
.studio-theme-toggle { display:grid; place-items:center; width:42px; height:42px; flex:none; border:1px solid var(--studio-line); border-radius:50%; background:transparent; color:var(--studio-ink); cursor:pointer; }
.studio-theme-toggle svg { width:20px; height:20px; }
.theme-sun, [data-theme=dark] .theme-moon { display:none; }
[data-theme=dark] .theme-sun { display:block; }
.studio-home-catalog .studio-intro { display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:24px; min-height:calc(100svh - 88px); padding-block:60px 110px; isolation:isolate; }
.studio-intro::before { content:''; position:absolute; z-index:-1; inset:0 calc(-1 * var(--studio-gutter)); pointer-events:none; background:radial-gradient(ellipse at 78% 45%,#e7d4b34d,transparent 60%); }
.studio-home-catalog .studio-intro .studio-hero-copy { display:block; position:relative; z-index:2; animation:none; }
.studio-home-catalog .studio-intro h1 { font-size:clamp(42px,4.7vw,72px); line-height:1.03; margin-top:28px; padding:0; letter-spacing:-.055em; }
.studio-intro .studio-lead { font-size:16px; max-width:440px; margin-top:28px!important; }
.studio-intro .studio-actions { justify-content:start; margin-top:32px; gap:14px; }
.studio-intro .studio-button { background:#f4511e; border-color:#f4511e; color:#fff!important; border-radius:10px; padding:17px 23px; }
.studio-intro .studio-button:hover { background:#d73e10; }
.intro-contact { border:1px solid var(--studio-line); border-radius:10px; padding:15px 22px; }
.studio-intro .studio-hero-note { margin-top:38px!important; font-size:12px; }
.intro-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.07em; white-space:nowrap; }
.intro-scroll span { font-size:22px; }
.hero-showcase { min-width:0; position:relative; }
.hero-stage { position:relative; aspect-ratio:1.08; perspective:1300px; }
.stage-grid { position:absolute; inset:0 -4% 0 0; opacity:.35; background-image:linear-gradient(#b7976030 1px,transparent 1px),linear-gradient(90deg,#b7976030 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse,#000,transparent 73%); transform:rotate(-7deg); }
.stage-browser { position:absolute; top:12%; left:8%; width:85%; border-radius:13px; overflow:hidden; background:#fff; border:1px solid #b4ac9d70; box-shadow:0 25px 65px var(--experience-shadow); transform:rotateY(-9deg) rotateZ(2deg); }
.stage-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px; font-size:9px; color:#635e55; background:#f5f3ed; border-bottom:1px solid #dedbd3; }
.stage-dots { color:#f47651; letter-spacing:3px; font-size:9px; }
.stage-screen { aspect-ratio:1.18; position:relative; overflow:hidden; background:#eeece3; }
.stage-image { position:absolute; top:0; left:0; width:100%; height:auto; opacity:0; visibility:hidden; }
.stage-image.is-current { opacity:1; visibility:visible; }
.stage-wireframe { pointer-events:none; position:absolute; inset:0; background:#f0eee7; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:35px 22px; opacity:0; }
.stage-wireframe i { background:#dad7cd; border-radius:4px; }
.stage-wireframe i:first-child { grid-column:span 2; height:28px; width:80%; }
.stage-wireframe i:last-child { grid-column:span 2; }
.stage-scan { position:absolute; inset:0; border-top:2px solid #fa7c4c; background:linear-gradient(#f8804520,transparent 30%); opacity:0; pointer-events:none; }
.stage-tools, .stage-palette { position:absolute; z-index:2; background:var(--experience-glass); border:1px solid var(--studio-line); box-shadow:0 8px 30px var(--experience-shadow); backdrop-filter:blur(12px); border-radius:10px; }
.stage-tools { top:3%; left:0; padding:16px; display:grid; gap:12px; font-size:10px; transform:rotate(-3deg); }
.stage-palette { top:30%; right:-2%; padding:15px; display:grid; gap:10px; }
.stage-palette small { font-size:7px; letter-spacing:.13em; }
.stage-palette div { display:flex; gap:6px; }
.stage-palette i { width:17px; height:17px; border-radius:50%; background:#f66b38; }
.stage-palette i:nth-child(2) { background:#d9c7a8; }.stage-palette i:nth-child(3) { background:#eee8dc; }.stage-palette i:nth-child(4) { background:#6d7864; }
.stage-palette strong { font-size:24px; font-family:Georgia,serif; font-weight:400; }.stage-palette>span { font-size:8px; }
.stage-phone { position:absolute; z-index:3; left:1%; bottom:2%; width:24%; height:48%; padding:7px; background:#24282b; border:2px solid #626667; border-radius:22px; transform:rotate(-7deg); box-shadow:0 15px 35px #0003; overflow:hidden; }
.phone-camera { position:absolute; top:8px; left:35%; width:30%; height:9px; background:#24282b; border-radius:0 0 8px 8px; z-index:3; }
.phone-screen { position:relative; overflow:hidden; height:86%; border-radius:14px 14px 0 0; background:#f5f0e6; }
.phone-screen .stage-image { width:190%; max-width:none; left:-45%; }
.stage-phone>span { display:block; color:#eae7df; text-align:center; font-size:6px; padding-top:8px; }
.stage-code { position:absolute; z-index:4; right:0; bottom:2%; width:51%; background:#1e252a; color:#ecdfc6; border:1px solid #ffffff30; border-radius:10px; padding:15px; transform:rotate(3deg); box-shadow:0 18px 35px #0003; }
.stage-code>div { display:flex; justify-content:space-between; font-size:8px; color:#b3bdc3; margin-bottom:12px; }
.stage-code code { font:clamp(8px,.78vw,11px)/1.9 monospace; white-space:nowrap; }.stage-code code>span { color:#8ed7e1; }.code-cursor { color:#ff8357; font-weight:400; }
.stage-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; position:relative; z-index:4; }
.stage-choices { display:flex; gap:5px; flex-wrap:wrap; }
.stage-choices button, .stage-pause { background:transparent; border:1px solid var(--studio-line); color:var(--studio-muted); border-radius:20px; min-height:36px; padding:7px 10px; font:inherit; font-size:9px; cursor:pointer; }
.stage-choices button[aria-pressed=true] { background:var(--studio-ink); color:var(--studio-paper); border-color:var(--studio-ink); }
.stage-pause { width:36px; flex:none; }.stage-pause:disabled { opacity:.5; cursor:default; }
.stage-caption { text-align:center; font-size:10px; color:var(--studio-muted); margin-top:12px!important; }
[data-paused=true] *, [data-paused=true] *::before { animation-play-state:paused!important; }
@media(prefers-reduced-motion:no-preference) {
    .stage-image { transition:opacity .8s ease,visibility .8s; }
    .stage-running .stage-tools { animation:stage-float 8s ease-in-out infinite; }
    .stage-running .stage-palette { animation:stage-float 8s ease-in-out infinite reverse; }
    .stage-running .code-cursor { animation:cursor-blink 1.2s steps(2) infinite; }
    .stage-running .stage-wireframe { animation:stage-build 8s ease-in-out infinite; }
    .stage-running .stage-scan { animation:stage-scan 8s ease-in-out infinite; }
    @keyframes stage-float { 50% { translate:0 -9px; } }
    @keyframes cursor-blink { 50% { opacity:0; } }
    @keyframes stage-build { 0%,100% { opacity:0; } 3%,8% { opacity:1; } 23%,95% { opacity:0; } }
    @keyframes stage-scan { 0%,18%,85%,100% { opacity:0; transform:translateY(-100%); } 25% { opacity:1; transform:translateY(0); } 65% { opacity:0; transform:translateY(100%); } }
}
/* Keep the catalogue below the introduction; retain natural demo colours. */
.home-offers { padding-top:70px; border-top:1px solid var(--studio-line); }
[data-theme=dark] .studio-intro::before { background:radial-gradient(ellipse at 78% 55%,#ea692228,transparent 55%); }
[data-theme=dark] .stage-browser { border-color:#e97d4560; box-shadow:0 0 65px #f77b2420,0 30px 60px #0008; }
[data-theme=dark] .stage-toolbar { background:#232a2e; color:#c3c7c8; border-color:#444; }
[data-theme=dark] .stage-grid { opacity:.65; }
[data-theme=dark] .visual-package.home-offer-card { background:var(--experience-panel); border-color:var(--studio-line); box-shadow:0 8px 28px #0003; }
[data-theme=dark] .demo-gallery, [data-theme=dark] [data-visual-package] .demo-gallery { background:#252d2e; }
[data-theme=dark] .demo-window { border-color:#ffffff25; }
[data-theme=dark] .demo-toolbar { background:#202628; color:#bdc3c4; }
[data-theme=dark] .demo-open, [data-theme=dark] .visual-package-details.home-offer-link { background:#30393c; color:#f2f3ed; border-color:#53605c; }
[data-theme=dark] .demo-open-preview, [data-theme=dark] .package-catalog .demo-open-preview { background:#ce4316; border-color:#ce4316; color:#fff; }
[data-theme=dark] .demo-open-choice { background:transparent; border-color:var(--studio-line); color:var(--studio-ink); }
[data-theme=dark] .package-catalog .demo-open-secondary { background:transparent; border-color:#a7b5ae88; color:#f2f3ed; }
[data-theme=dark] .demo-choice { color:#e3e8df; border-color:#647369; }
[data-theme=dark] .demo-choice[aria-pressed=true] { background:#e2e9de; color:#1e3028; }
[data-theme=dark] :is(.home-offers-intro,.visual-package-description,.visual-package-scope,.visual-package-price>span,.visual-package-bottom small,.visual-costs,.demo-caption div>span,.demo-unavailable,.visual-package-header .studio-status,.home-offers .home-section-heading .studio-eyebrow,.visual-catalog-heading>p:last-child) { color:#b8bfbc; }
[data-theme=dark] .visual-package-category { color:#ff9a75; }
[data-theme=dark] .studio-button { background:#e75b30; border-color:#e75b30; color:#fff!important; }
[data-theme=dark] .studio .contact-form :is(input:not([type=checkbox]):not([type=hidden]),textarea,select) { background:#1d2427; color:#f4f3ef; border-color:#626b6d; }
[data-theme=dark] .studio .contact-form button { background:#e75b30; color:#fff; }
[data-theme=dark] .studio .contact-form .field-error { color:#ffb4a3; }
[data-theme=dark] .studio .contact-errors { color:#ffcec4; background:#3f2421; }
[data-theme=dark] .studio .contact-success { color:#c7edd2; background:#203d2a; }
[data-theme=dark] :is(.studio-package-price,.studio-example-list article,.studio-package-maintenance,.studio-catalog-invite,.home-example-card,.studio-mobile-menu-content) { background:var(--experience-panel); color:var(--studio-ink); border-color:var(--studio-line); }
[data-theme=dark] .studio-header-cta:hover { background:#e75b30; color:#fff; }
@media(max-width:1000px) {
    .studio-header { gap:14px; }.studio-brand { font-size:19px; }
    .studio-home-catalog .studio-intro { gap:20px; }.studio-home-catalog .studio-intro h1 { font-size:clamp(38px,5.5vw,56px); }
    .stage-tools { padding:10px; font-size:8px; }.stage-palette { padding:9px; right:-1%; }.stage-code { padding:10px; }
}
@media(max-width:800px) {
    html { scroll-padding-top:82px; }
    .studio-header { min-height:82px; flex-wrap:nowrap; }.studio-brand { max-width:none; flex:1; font-size:18px; }.studio-brand-mark { width:32px; height:32px; }
    .studio-theme-toggle { width:44px; height:44px; }.studio-mobile-menu { margin-left:0; }
    .studio-home-catalog .studio-intro { grid-template-columns:1fr; gap:24px; padding-top:32px; padding-bottom:36px; min-height:0; }
    .studio-home-catalog .studio-intro h1 { font-size:clamp(38px,8vw,60px); margin-top:20px; max-width:650px; }
    .studio-intro .studio-lead { margin-top:20px!important; max-width:540px; font-size:15px; }.studio-intro .studio-actions { margin-top:24px; }
    .studio-intro .studio-hero-note { margin-top:20px!important; }
    .hero-showcase { width:min(100%,520px); justify-self:center; }.hero-stage { aspect-ratio:auto; }
    .stage-code code { font-size:clamp(7px,1.8vw,10px); }.stage-palette { right:0; }.stage-phone { left:3%; }
    .stage-controls { margin-top:12px; }.stage-caption { font-size:12px; }.home-offers { padding-top:45px; }
}
@media(max-width:380px) { .studio-header { gap:9px; }.studio-brand { font-size:16px; gap:7px; }.studio-brand-mark { width:28px; height:28px; }.stage-controls { gap:6px; }.stage-palette { display:none; }.studio-intro .studio-button { padding:13px 16px; }.intro-contact { padding:12px 15px; } }
@media(prefers-reduced-motion:reduce) { .hero-showcase *, .hero-showcase *::before { animation:none!important; transition:none!important; } }
/* Keep the complete introduction inside a normal desktop viewport. */
@media(min-width:801px) {
 .studio-home-catalog .studio-intro { padding-block:35px 85px; }
 .hero-showcase { min-width:0; justify-self:end; }
}
.studio-header { position:sticky; top:0; }
.studio-header::before { content:''; position:absolute; z-index:-1; inset:0 calc(-1 * var(--studio-gutter)); background:var(--studio-paper); border-bottom:1px solid var(--studio-line); }
@media(min-width:801px) {
 .hero-showcase { width:min(100%,calc((100svh - 310px) * 1.4)); min-width:0; }
 .hero-stage { aspect-ratio:1.4; }
 .stage-browser { top:8%; }
 .stage-screen { aspect-ratio:1.45; }
 .stage-phone { height:58%; }
}
[data-theme=dark] .home-example-image>span { background:#242b2e; color:#f5f3ee; }
.studio-intro .studio-button, [data-theme=dark] .studio-button, [data-theme=dark] .studio .contact-form button { background:#ce4316; border-color:#ce4316; }
@media(max-width:800px) {
    .hero-stage { overflow:visible; padding:0; }
    .stage-grid, .stage-tools, .stage-palette, .stage-code, .stage-wireframe, .stage-scan, .stage-caption, .intro-scroll { display:none; }
    .stage-browser { position:relative; inset:auto; width:100%; transform:none; border-radius:10px; box-shadow:0 10px 28px var(--experience-shadow); }
    .stage-screen { aspect-ratio:2; }
    .stage-toolbar { padding:8px 12px; font-size:11px; }
    .stage-controls { gap:8px; }
    .stage-choices { flex:1; min-width:0; flex-wrap:nowrap; gap:4px; }
    .stage-choices button { flex:1; min-width:0; font-size:12px; line-height:1.3; min-height:44px; padding:5px 6px; border-radius:8px; }
    .stage-pause { width:44px; min-height:44px; font-size:14px; }
}
.phone-screen .stage-image { width:100%; left:0; }

/* Use wide displays without allowing short desktop windows to enlarge the hero. */
:root { --studio-width:1760px; }
.studio-header::before { left:calc((100vw - 100%) / -2); right:calc((100vw - 100%) / -2); }
@media(min-width:801px) and (max-height:800px) {
    .studio-home-catalog .studio-intro { padding-block:20px 90px; }
    .studio-home-catalog .studio-intro h1 { font-size:clamp(38px,4.1vw,60px); margin-top:18px; }
    .studio-intro .studio-lead { margin-top:18px!important; }
    .studio-intro .studio-actions { margin-top:22px; }
    .studio-intro .studio-hero-note { margin-top:20px!important; }
    .intro-scroll { bottom:18px; }
}