/* Shared navigation-first layout. Campaign colors and commercial data stay in
   their existing sources; both seasonal editions use the same composition. */
:root { --header-height: 72px; }
html { scroll-padding-top: calc(var(--header-height) + 18px); }
body { background: #090a10; }
.container { width: min(1200px, calc(100% - 64px)); }
.section, [data-theme="standard"] .section {
  min-height: 0;
  padding: 76px 0;
  background: #0b0c13;
  border-bottom: 1px solid #ffffff0d;
}
.section:not(.hero)::before, .section:not(.hero)::after { background-image: none; }
[data-theme="halloween"] .section { background-color: #0d0a13; }
.section-heading { max-width: 820px; margin-bottom: 30px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.eyebrow, [data-theme="standard"] .eyebrow {
  min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; backdrop-filter: none; font-size: .7rem;
  letter-spacing: .15em; color: #bda3f3;
}
.section-title, [data-theme="standard"] .section-title {
  max-width: 830px; font-size: clamp(1.9rem, 3.4vw, 3.05rem);
  line-height: 1.12; letter-spacing: -.045em; margin-bottom: 14px;
}
.section-copy { max-width: 680px; font-size: 1rem; line-height: 1.7; }
.section-title .accent { color: #baa4eb; background: none; -webkit-text-fill-color: currentColor; }
.btn { min-height: 48px; border-radius: 12px; padding: 13px 20px; font-size: .85rem; }
.btn-primary { box-shadow: none; background: #8251e8; }
.btn-primary:hover { background: #9465f2; box-shadow: 0 8px 24px #8251e82b; }
.site-header, [data-theme="standard"] .site-header { background: #0a0b12f5; }
.nav-shell { gap: 20px; }
.brand-logo img { width: 115px; }
.nav-links { gap: 4px; }
.nav-links a { padding: 10px; font-size: .78rem; border-radius: 8px; }
.nav-cta { min-height: 40px; padding: 8px 15px; }

/* A compact first screen shows the service and a real example together. */
.hero, [data-theme="standard"] .hero, [data-theme="halloween"] .hero {
  min-height: 0; padding: 136px 0 70px;
}
.hero > .container { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; }
.hero-content, [data-theme="standard"] .hero-content { width: 100%; padding: 0; margin: 0; }
.hero-title, [data-theme="standard"] .hero-title {
  max-width: 640px; font-size: clamp(2.8rem, 4.65vw, 4.5rem);
  line-height: 1.04; letter-spacing: -.055em; margin: 21px 0;
}
.hero-copy, [data-theme="standard"] .hero-copy { max-width: 510px; font-size: 1.04rem; line-height: 1.75; margin-bottom: 25px; }
.hero-title .accent { display: block; }
.hero-actions { gap: 10px; margin: 0; }
.hero-proof, [data-theme="standard"] .hero-proof { gap: 10px 18px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hero-proof span { font-size: .62rem; letter-spacing: .04em; }
.hero-campaign { padding: 13px 16px; margin: 0 0 22px; gap: 7px; border-radius: 12px; }
.hero-campaign strong { font-size: .86rem; line-height: 1.55; }
.hero-campaign-label { width: fit-content; font-size: .57rem; }
.hero-stage { position: relative; min-width: 0; padding: 65px 0 10px; }
.hero-stage .hero-art, [data-theme="standard"] .hero-stage .hero-art, [data-theme="halloween"] .hero-stage .hero-art {
  position: absolute; top: -65px; right: -18px; width: 200px; margin: 0;
  transform: none; opacity: .95; z-index: 0;
}
.hero-stage .hero-art-label { display: none; }
.hero-stage .hero-orbit { opacity: .4; }
.hero-work { position: relative; display: block; overflow: hidden; color: #e9e7ef; text-decoration: none; border: 1px solid #b49ad345; border-radius: 14px; background: #15131f; box-shadow: 0 24px 80px #0005; transform: perspective(1400px) rotateY(-5deg) rotateZ(1deg); transition: transform .3s ease; }
.hero-work:hover { transform: perspective(1400px) rotateY(0) rotateZ(0); }
.hero-work-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px; color: #c2b9d2; font-size: .53rem; letter-spacing: .12em; font-weight: 700; }
.window-dots { color: #8d75b5; letter-spacing: 3px; }
.hero-work > img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.hero-work-caption { display: grid; gap: 6px; padding: 17px 20px; font-size: .76rem; color: #ada6bb; }
.hero-work-caption b { color: #e6dafa; font-size: .82rem; }
.hero-demo-peek { position: relative; display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin: 18px 0 0 auto; padding: 9px 18px 9px 9px; border: 1px solid #ffffff24; border-radius: 12px; background: #11141c; text-decoration: none; }
.hero-demo-peek img { width: 90px; height: 58px; object-fit: cover; border-radius: 6px; }
.hero-demo-peek span { display: grid; gap: 5px; color: #aaa7b7; font-size: .72rem; }
.hero-demo-peek b { color: #f2eff8; font-size: .78rem; }
[data-theme="halloween"] .hero-stage .hero-art::before, [data-theme="halloween"] .hero-stage .hero-art::after { inset: -10%; }
[data-theme="halloween"] .night-web-hero { opacity: .3; width: 290px; top: 70px; }
[data-theme="halloween"] .hero-work { border-color: #e2945766; }

/* Clear choices rather than full-screen explanations. */
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.services-grid .service-card:nth-child(n) { grid-column: auto; min-height: 0; padding: 25px; border: 1px solid #ffffff21; border-radius: 16px; background: #12141e; display: flex; flex-direction: column; }
.services-grid .service-card:nth-child(1) { border-top: 2px solid #79c4a1; }
.services-grid .service-card:nth-child(2) { border-top: 2px solid #8eaaf5; }
.services-grid .service-card:nth-child(3) { border-top: 2px solid #c2a1ed; }
.service-card .service-number { color: #a8a3b6; font-size: .63rem; }
.service-card .service-plan, .service-signature { display: none; }
.service-card h3 { font-size: 1.3rem; line-height: 1.3; margin: 18px 0 12px; max-width: 270px; }
.service-card p { font-size: .88rem; line-height: 1.65; }
.service-card .service-link { margin-top: auto; padding-top: 24px; font-size: .76rem; }
.service-system-footer { display: contents; }
.service-system-footer > strong, .service-system-footer > span { display: none; }
.service-system-footer .service-link { margin: auto 0 0; }

/* Real behavior showcase, shared by both seasonal editions. */
.system-demos, [data-theme="standard"] .system-demos { background: radial-gradient(circle at 55% 0, #6f4daa22, transparent 45%), #0d0e16; }
.system-demos-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; max-width: none; }
.system-demos-heading .btn { flex: 0 0 auto; }
.system-demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.system-demo-card { --tool-accent: #b9a4ed; display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #ffffff24; border-top: 2px solid var(--tool-accent); border-radius: 13px; background: #13141d; }
.system-demo-card--tables { --tool-accent: #e9a479; }
.system-demo-card--bookings { --tool-accent: #8cb2f3; }
.system-demo-card--orders { --tool-accent: #bd9ced; }
.system-demo-card--stock { --tool-accent: #75d6aa; }
.system-demo-index { color: var(--tool-accent); font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.system-demo-preview { display: grid; gap: 5px; margin: 18px 0 20px; padding: 17px; border: 1px solid #ffffff20; border-radius: 9px; background: linear-gradient(140deg, color-mix(in srgb, var(--tool-accent) 16%, #0d0e17), #0d0e17); }
.system-demo-preview span { color: var(--tool-accent); font-size: .55rem; font-weight: 800; letter-spacing: .13em; }
.system-demo-preview strong { color: #fff; font-size: .9rem; }
.system-demo-preview small { color: #b9b4c5; font-size: .65rem; }
.system-demo-card h3 { font-size: 1.15rem; letter-spacing: -.03em; margin: 0 0 7px; }
.system-demo-card p { color: #c3c0cb; font-size: .78rem; line-height: 1.6; margin: 0 0 21px; }
.system-demo-card a { margin-top: auto; width: fit-content; min-height: 44px; display: inline-flex; align-items: center; color: var(--tool-accent); font-size: .76rem; font-weight: 800; text-decoration: none; }
.system-demo-card a:hover { text-decoration: underline; }
.system-demo-disclaimer { margin: 17px 0 0; color: #aaa6b5; font-size: .73rem; }

.portfolio-heading { max-width: none; }
.portfolio-list--clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-list--clients .portfolio-card { display: flex; flex-direction: column; border-radius: 16px; }
.portfolio-list--clients .portfolio-card:nth-child(even) .portfolio-visual { order: 0; }
.portfolio-visual { min-height: 0; aspect-ratio: 16/9; }
.portfolio-visual img { object-fit: cover; }
.portfolio-content { padding: 24px; }
.portfolio-content h3 { font-size: 1.65rem; margin: 8px 0; }
.portfolio-content p { font-size: .88rem; }
.portfolio-group-heading { margin: 26px 0 16px; }
.portfolio-group-heading h3 { font-size: .85rem; }
.portfolio-tags { margin: 16px 0; }
.portfolio-links a { min-height: 44px; display: inline-flex; align-items: center; }
.portfolio-more { min-height: 44px; display: inline-flex; align-items: center; }

.demo-section-intro { max-width: none; gap: 36px; }
.demo-section-note { max-width: 250px; font-size: .8rem; }
.demo-jump { margin: 20px 0; }
.demo-jump a { min-height: 44px; }
.demo-group-heading { margin: 25px 0 16px; }
.demo-group-heading h3 { font-size: 1.1rem; }
.demo-group-heading > span { font-size: .6rem; }
.demo-card, .demo-card--premium { border-radius: 16px; box-shadow: none; }
.demo-card--premium .demo-image-shell, .demo-image-shell { margin: 0; border: 0; border-radius: 0; }
.demo-card--premium .demo-content, .demo-content { padding: 22px; }
.demo-card--premium h4 { font-size: 1.85rem; }
.demo-meta { margin-bottom: 12px; font-size: .6rem; }
.demo-link { padding-top: 18px; }
.more-demos { margin-top: 26px; border: 1px solid #ffffff25; border-radius: 14px; padding: 0 24px; background: #10121c; }
.more-demos summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 23px 0; cursor: pointer; list-style: none; }
.more-demos summary::-webkit-details-marker { display: none; }
.more-demos summary strong { display: block; font-size: 1rem; }
.more-demos summary small { display: block; margin-top: 6px; color: #b9b3c5; line-height: 1.6; }
.disclosure-icon { color: #c5a8fa; font-size: 1.8rem; transition: transform .2s; }
.more-demos[open] .disclosure-icon { transform: rotate(45deg); }
.more-demos .collection-title { margin: 8px 0 20px; font-size: 1rem; }
.more-demos .demo-grid { padding-bottom: 24px; }
.demo-bottom-cta { padding: 24px; margin-top: 24px; }

.custom-offer { padding: 30px; gap: 28px; border-radius: 18px; box-shadow: none; }
.custom-offer-main h3 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
.custom-offer-main p { font-size: .9rem; }
.custom-offer-steps div { padding: 14px; font-size: .82rem; border-radius: 10px; }
.web-starting-points article { padding: 20px; border-radius: 13px; border-top: 2px solid var(--price-accent, #ba9fe7); }
.web-starting-points article:nth-child(1) { --price-accent: #78d5a8; }
.web-starting-points article:nth-child(2) { --price-accent: #78b3f3; }
.web-starting-points article:nth-child(3) { --price-accent: #e5c47c; }
.web-starting-points article h3 { color: var(--price-accent, #d1b9f6); }
[data-theme="standard"] .web-starting-points article strong { color: #eee8f8; }
.payment-policy { padding: 20px; }
.care-panel { margin-top: 24px; padding: 25px; }
.care-heading h3 { font-size: 1.6rem; }
.care-heading p, .care-note { font-size: .85rem; }
.process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 14px; }
.process-list li { min-height: 0; padding: 25px; background: #12131c; }
.process-list li span { font-size: .8rem; }
.process-list li strong { font-size: .96rem; }
.process-list li p { font-size: .82rem; }
.tools-product { grid-template-columns: 1.3fr 1fr; border-radius: 18px; }
.tools-product-main, .tools-product-offer { padding: 30px; }
.tools-product h3 { font-size: 2.5rem; }
.tools-tagline { font-size: 1.15rem; }
.tools-description { font-size: .9rem; }
.tools-price { font-size: 2.3rem; }
#ecosistema { padding-top: 0; }
.ecosystem-features { gap: 24px; }
.ecosystem-feature { min-height: 0; border-radius: 18px; }
.ecosystem-feature-copy { padding: 32px; }
.ecosystem-feature h3 { font-size: clamp(2rem, 3vw, 3rem); }
.ecosystem-feature-copy > p { font-size: .94rem; }
.ecosystem-feature-art { min-height: 0; }
.ecosystem-pos-form { gap: 13px; margin-top: 22px; }
.ecosystem-feature-tags { margin: 18px 0; }
.studio-note-inner { display: flex; align-items: center; gap: 35px; }
.studio-symbol { font-size: 3rem; font-weight: 800; color: #b899ed; }
.studio-note h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); margin: 10px 0; letter-spacing: -.03em; }
.studio-note p { max-width: 700px; color: var(--muted); font-size: .9rem; }
.studio-note .portfolio-more { margin-left: auto; white-space: nowrap; }
.contact-form { padding: 28px; }
.contact-card { padding: 22px; }
.contact-card strong { overflow-wrap: anywhere; }
footer { padding: 32px 0; }
.mobile-dock { display: none; }
summary:focus-visible, .hero-work:focus-visible, .hero-demo-peek:focus-visible { outline: 3px solid #c5a8fa; outline-offset: 5px; }

@media (max-width: 1050px) {
  .system-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero > .container { gap: 32px; }
  .hero-stage .hero-art, [data-theme] .hero-stage .hero-art { width: 155px; top: -40px; right: 0; }
  .hero-title, [data-theme="standard"] .hero-title { font-size: 3.2rem; }
  .service-card h3 { font-size: 1.15rem; }
  .portfolio-heading { align-items: start; flex-direction: column; gap: 8px; }
  .studio-note-inner { flex-wrap: wrap; }
  .studio-note .portfolio-more { margin-left: 0; }
}
@media (max-width: 860px) {
  .system-demos-heading { align-items: start; flex-direction: column; }
  .container { width: calc(100% - 40px); }
  .nav-links { gap: 3px; padding: 16px; align-items: stretch; }
  .nav-links a { display: block; padding: 14px 16px; font-size: .95rem; }
  .nav-links a.is-active { padding-left: 13px; }
  .hero, [data-theme="standard"] .hero, [data-theme="halloween"] .hero { padding: 110px 0 48px; }
  .hero > .container { grid-template-columns: 1fr; gap: 30px; }
  .hero-content, [data-theme="standard"] .hero-content { width: 100%; padding: 0; }
  .hero-title, [data-theme="standard"] .hero-title { max-width: 630px; font-size: clamp(2.65rem, 7.5vw, 4rem); }
  .hero-copy { max-width: 570px; }
  .hero-stage { padding-top: 0; max-width: 550px; width: 100%; margin: 0 auto; }
  .hero-stage .hero-art, [data-theme] .hero-stage .hero-art { display: none; }
  .hero-work { transform: none; }
  .hero-demo-peek { margin-top: 12px; }
  .hero-proof { margin-top: 20px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .services-grid .service-card:nth-child(n) { padding: 22px; }
  .service-card h3 { font-size: 1.3rem; max-width: none; margin: 10px 0; }
  .service-card .service-link { padding-top: 16px; }
  .portfolio-content { padding: 20px; }
  .portfolio-tags { gap: 6px; }
  .demo-section-intro { display: block; }
  .demo-section-note { max-width: 600px; margin-top: 12px; }
  .custom-offer { grid-template-columns: 1fr; }
  .web-starting-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-product { grid-template-columns: 1fr; }
  .ecosystem-feature-copy { padding: 26px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .system-demo-grid { grid-template-columns: 1fr; }
  .system-demo-card { padding: 18px; }
  .system-demo-preview { margin: 13px 0 16px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .mobile-dock { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; align-items: center; gap: 3px; position: fixed; z-index: 4800; bottom: 0; left: 0; right: 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: #11121cf5; border-top: 1px solid #ffffff26; backdrop-filter: blur(12px); }
  .mobile-dock a { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: #d3cedf; text-decoration: none; font-size: .73rem; font-weight: 700; }
  .mobile-dock .mobile-dock-contact { background: #8251e8; color: #fff; }
  body.menu-open .mobile-dock, body:has(input:focus, textarea:focus, select:focus) .mobile-dock { display: none; }
  .mobile-dock a:hover { background: #302040; color: white; }
  .section, [data-theme="standard"] .section { padding: 48px 0; }
  .hero, [data-theme="standard"] .hero, [data-theme="halloween"] .hero { padding: 104px 0 40px; }
  .section-title, [data-theme="standard"] .section-title { font-size: 1.9rem; }
  .section-heading { margin-bottom: 24px; }
  .hero-title, [data-theme="standard"] .hero-title { font-size: clamp(2.35rem, 9.5vw, 3.6rem); margin: 18px 0; }
  .hero-copy { font-size: .95rem; line-height: 1.65; margin-bottom: 22px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-proof span { font-size: .57rem; }
  .hero-work-bar { font-size: .45rem; padding: 12px; }
  .hero-work-caption { padding: 13px; font-size: .7rem; }
  .hero-demo-peek { width: 100%; margin-top: 12px; }
  .hero-demo-peek img { width: 75px; height: 47px; }
  .portfolio-list--clients, .demo-grid--premium, .demo-grid--collection { grid-template-columns: 1fr; }
  .portfolio-content h3 { font-size: 1.5rem; }
  .portfolio-group-heading > span { font-size: .6rem; }
  .demo-card--premium h4 { font-size: 1.7rem; }
  .demo-group-heading { flex-wrap: wrap; gap: 6px; }
  .demo-jump { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .demo-jump a { justify-content: space-between; }
  .more-demos { padding: 0 16px; }
  .more-demos summary strong { font-size: .92rem; }
  .more-demos summary small { font-size: .75rem; }
  .web-starting-points { grid-template-columns: 1fr; }
  .web-starting-points article { min-height: 0; }
  .custom-offer { padding: 24px; }
  .custom-offer-main h3 { font-size: 1.85rem; }
  .process-list { grid-template-columns: 1fr; }
  .process-list li { padding: 20px; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
  .process-list li span { margin: 0; grid-row: span 2; }
  .process-list li strong { margin: 0 0 6px; }
  .process-list li p { grid-column: 2; }
  .tools-product-main, .tools-product-offer { padding: 24px; }
  .ecosystem-feature-copy { padding: 24px; }
  .ecosystem-feature-art { aspect-ratio: 3/2; }
  .studio-note-inner { gap: 18px; }
  .studio-symbol { display: none; }
  .contact-form { padding: 22px; }
  .contact-card { padding: 18px; }
  .contact-card strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-work, .hero-work:hover { transform: none; transition: none; }
  .disclosure-icon { transition: none; }
}