* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text-primary); background: var(--eventsday-white); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 12px; background: var(--eventsday-navy); color: var(--text-light); padding: 10px 14px; z-index: 10; }
.skip-link:focus { left: 12px; }
.site-header { position: sticky; top: 0; z-index: 8; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--border-light); backdrop-filter: blur(12px); }
.header-inner { min-height: 78px; display: flex; align-items: center; gap: 26px; }
.brand img { width: 168px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; font-weight: 700; font-size: 15px; }
.site-nav a:hover, .link-action:hover { color: var(--eventsday-cyan); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 12px 20px; border-radius: var(--radius); font-weight: 800; border: 1px solid transparent; cursor: pointer; }
.button-primary { background: var(--eventsday-coral); color: var(--text-light); box-shadow: 0 10px 24px rgba(250,91,92,.22); }
.button-primary:hover { background: var(--state-coral-hover); }
.button-secondary { border-color: rgba(2,31,87,.18); background: var(--eventsday-white); color: var(--eventsday-navy); }
.link-action { font-weight: 800; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: var(--background-light); border-radius: var(--radius); }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--eventsday-navy); }
.hero { padding: 86px 0 54px; background: linear-gradient(180deg, var(--background-soft), var(--eventsday-white)); }
.hero-grid, .split-grid, .telao-grid, .flow-grid, .contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow { color: var(--eventsday-cyan); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: 13px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; margin-bottom: 22px; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.2; }
.hero-copy p:not(.eyebrow), .page-hero p, .section-heading p { color: var(--text-secondary); font-size: 19px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.event-preview { min-height: 480px; position: relative; }
.phone-shell { position: absolute; left: 20px; top: 10px; width: 250px; height: 430px; border-radius: 34px; padding: 22px; background: var(--eventsday-navy); box-shadow: var(--shadow-soft); }
.phone-shell::before { content: ""; display: block; width: 84px; height: 7px; margin: 0 auto 18px; border-radius: 20px; background: rgba(255,255,255,.32); }
.photo-card { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, rgba(230,172,75,.95), rgba(250,91,92,.85)); }
.photo-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 24% 24%, rgba(255,255,255,.9) 0 9%, transparent 10%), radial-gradient(circle at 58% 34%, rgba(255,255,255,.8) 0 8%, transparent 9%), radial-gradient(circle at 78% 68%, rgba(255,255,255,.72) 0 12%, transparent 13%), linear-gradient(135deg, transparent 0 46%, rgba(2,31,87,.16) 47% 100%); }
.photo-card span { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: var(--text-light); font-weight: 900; text-shadow: 0 2px 8px rgba(2,31,87,.25); }
.photo-card.large { height: 176px; }
.phone-meta { margin: 14px 0; color: var(--text-light); }
.phone-meta strong, .phone-meta small { display: block; }
.phone-meta strong { font-size: 18px; line-height: 1.1; }
.phone-meta small { color: rgba(255,255,255,.72); font-weight: 800; font-size: 13px; line-height: 1.2; }
.photo-card.small { width: 112px; height: 98px; margin-top: 0; background: linear-gradient(135deg, var(--eventsday-cyan), var(--eventsday-gold)); }
.qr-mark { position: absolute; right: 18px; bottom: 42px; width: 76px; height: 76px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; background: var(--eventsday-white); color: var(--eventsday-navy); font-weight: 900; border-radius: var(--radius); box-shadow: 0 12px 26px rgba(2,31,87,.18); }
.qr-mark i { display: block; border: 6px solid var(--eventsday-navy); border-radius: 3px; }
.qr-mark i:nth-child(2), .qr-mark i:nth-child(3) { border-width: 0; background: repeating-linear-gradient(90deg, var(--eventsday-navy) 0 5px, transparent 5px 10px), repeating-linear-gradient(0deg, var(--eventsday-navy) 0 5px, transparent 5px 10px); }
.screen-wall { position: absolute; right: 0; bottom: 24px; width: 330px; padding: 18px; border-radius: var(--radius); background: var(--eventsday-white); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.screen-wall span { grid-column: 1 / -1; font-weight: 900; color: var(--eventsday-coral); }
.screen-wall div { position: relative; height: 104px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border-light); background: linear-gradient(135deg, rgba(22,161,211,.85), rgba(230,172,75,.8)); }
.screen-wall div::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 34% 32%, rgba(255,255,255,.95) 0 12%, transparent 13%), radial-gradient(circle at 66% 38%, rgba(255,255,255,.75) 0 10%, transparent 11%), linear-gradient(145deg, transparent 0 58%, rgba(2,31,87,.18) 59%); }
.screen-wall div:nth-of-type(2) { background: linear-gradient(135deg, rgba(250,91,92,.85), rgba(230,172,75,.82)); }
.screen-wall div:nth-of-type(3) { background: linear-gradient(135deg, rgba(2,31,87,.85), rgba(22,161,211,.75)); }
.screen-wall div:nth-of-type(4) { background: linear-gradient(135deg, rgba(230,172,75,.9), rgba(2,31,87,.75)); }
.screen-wall strong { position: absolute; left: 10px; bottom: 8px; z-index: 1; color: var(--text-light); font-size: 12px; text-shadow: 0 2px 8px rgba(2,31,87,.35); }
.section { padding: 78px 0; }
.section-heading { max-width: 720px; margin-bottom: 34px; }
.steps, .feature-grid, .audience-grid, .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps article, .feature-card, .plan-card, .audience-grid article, details, .contact-form, .contact-grid aside { border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px; background: var(--eventsday-white); }
.steps strong, .feature-card span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--eventsday-gold); color: var(--eventsday-navy); font-weight: 900; margin-bottom: 16px; }
.feature-card span { background: var(--eventsday-cyan); }
.flow-band, .qr-section { padding: 70px 0; background: var(--eventsday-navy); color: var(--text-light); }
.flow-band .eyebrow, .qr-section .eyebrow { color: var(--eventsday-gold); }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-list li { padding: 14px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); font-weight: 900; }
.telao-section { padding: 78px 0; background: var(--background-light); }
.telao-preview-wrap { position: relative; }
.telao-preview-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); background: var(--eventsday-navy); }
.telao-qr-card { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 118px; display: grid; gap: 8px; justify-items: center; padding: 12px; border-radius: var(--radius); background: var(--eventsday-white); box-shadow: 0 16px 34px rgba(2,31,87,.22); text-align: center; }
.telao-qr-card strong { color: var(--eventsday-navy); font-size: 15px; line-height: 1; }
.telao-qr-card span { color: var(--eventsday-coral); font-size: 10px; line-height: 1.15; font-weight: 900; }
.qr-symbol { width: 82px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: var(--eventsday-white); border: 2px solid var(--eventsday-navy); }
.qr-symbol i { background: var(--eventsday-navy); }
.qr-symbol i:nth-child(2), .qr-symbol i:nth-child(4), .qr-symbol i:nth-child(8) { background: transparent; border: 2px solid var(--eventsday-navy); }
.qr-symbol i:nth-child(5) { background: repeating-linear-gradient(45deg, var(--eventsday-navy) 0 4px, transparent 4px 8px); }
.qr-symbol.large { width: min(220px, 74vw); gap: 8px; padding: 14px; border-width: 4px; box-shadow: inset 0 0 0 10px var(--eventsday-white); }
.qr-symbol.large i { min-height: 48px; }
.qr-symbol.large i:nth-child(1), .qr-symbol.large i:nth-child(3), .qr-symbol.large i:nth-child(7) { background: var(--eventsday-white); border: 14px solid var(--eventsday-navy); box-shadow: inset 0 0 0 12px var(--eventsday-white), inset 0 0 0 28px var(--eventsday-navy); }
.qr-symbol.large i:nth-child(2), .qr-symbol.large i:nth-child(4), .qr-symbol.large i:nth-child(6), .qr-symbol.large i:nth-child(8) { border: 0; background: repeating-linear-gradient(90deg, var(--eventsday-navy) 0 9px, transparent 9px 18px), repeating-linear-gradient(0deg, var(--eventsday-navy) 0 9px, transparent 9px 18px); }
.qr-symbol.large i:nth-child(5), .qr-symbol.large i:nth-child(9) { background: repeating-linear-gradient(45deg, var(--eventsday-navy) 0 8px, transparent 8px 16px), repeating-linear-gradient(-45deg, var(--eventsday-navy) 0 8px, transparent 8px 16px); }
.audience-grid { grid-template-columns: repeat(6, 1fr); }
.audience-grid article { min-height: 96px; display: grid; place-items: center; text-align: center; font-weight: 900; }
.memory-demo { display: grid; gap: 14px; }
.memory-demo span, .memory-demo strong, .qr-demo { border-radius: var(--radius); padding: 26px; background: var(--background-light); border: 1px solid var(--border-light); font-weight: 900; text-align: center; }
.qr-demo { width: min(300px, 100%); aspect-ratio: 1; display: grid; place-items: center; background: var(--eventsday-white); color: var(--eventsday-navy); margin: auto; }
.plan-card.featured { border-color: var(--eventsday-gold); box-shadow: var(--shadow-soft); }
.plan-card strong { display: block; margin: 18px 0; color: var(--eventsday-coral); }
.plan-price { font-size: 30px; }
.plan-badge { display: inline-flex; width: fit-content; border-radius: 999px; padding: 7px 10px; background: var(--eventsday-gold); color: var(--eventsday-navy); font-size: 12px; font-weight: 900; margin-bottom: 12px; }
.plan-card h3 { margin: 18px 0 8px; }
.plan-feature-list { display: grid; gap: 8px; padding-left: 20px; color: var(--text-secondary); }
.plan-feature-list.compact { margin: 14px 0 20px; }
.faq-wrap { max-width: 820px; }
details { margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 900; }
.final-cta { padding: 74px 0; background: var(--eventsday-gold); color: var(--eventsday-navy); text-align: center; }
.page-hero { padding: 86px 0 56px; background: var(--background-soft); }
.timeline { display: grid; gap: 16px; }
.timeline article { border-left: 4px solid var(--eventsday-cyan); padding: 10px 0 10px 22px; }
.contact-form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; font-weight: 800; }
input, textarea { width: 100%; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 13px 14px; font: inherit; color: var(--text-primary); }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(22,161,211,.35); outline-offset: 3px; }
.form-success { color: var(--state-success); font-weight: 900; }
.form-error { color: var(--eventsday-coral); font-weight: 900; }
.legal-content .container { max-width: 860px; }
.site-footer { background: var(--eventsday-navy); color: var(--text-light); padding: 54px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
.footer-logo { width: 160px; background: var(--eventsday-white); border-radius: var(--radius); padding: 8px; margin-bottom: 16px; }
.site-footer nav { display: grid; gap: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: 32px; padding-top: 20px; color: rgba(255,255,255,.78); }
.auth-page { min-height: 100vh; background: var(--background-soft); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 480px; }
.auth-brand { padding: 54px; background: var(--eventsday-navy); color: var(--text-light); display: flex; flex-direction: column; justify-content: center; }
.auth-brand img { width: 180px; background: var(--eventsday-white); border-radius: var(--radius); padding: 8px; margin-bottom: 44px; }
.auth-brand h1 { font-size: clamp(36px, 5vw, 58px); }
.auth-brand p { color: rgba(255,255,255,.78); font-size: 19px; }
.auth-card { padding: 54px; display: flex; flex-direction: column; justify-content: center; background: var(--eventsday-white); }
.auth-card h2 { font-size: 34px; }
.auth-note { margin-top: 18px; color: var(--text-secondary); font-weight: 800; }
.auth-note a { color: var(--eventsday-cyan); }
.consent-list { display: grid; gap: 12px; margin: 4px 0 8px; }
.checkbox-field { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 700; color: var(--text-secondary); line-height: 1.45; }
.checkbox-field input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--eventsday-coral); }
@media (max-width: 900px) {
    .header-inner { flex-wrap: wrap; }
    .nav-toggle { display: block; margin-left: auto; }
    .site-nav, .header-actions { display: none; width: 100%; }
    .site-nav.is-open, .header-actions.is-open { display: grid; gap: 14px; }
    .hero-grid, .split-grid, .telao-grid, .flow-grid, .contact-grid { grid-template-columns: 1fr; }
    .event-preview { min-height: 420px; }
    .screen-wall { width: 260px; }
    .steps, .feature-grid, .plans-grid, .audience-grid, .footer-grid { grid-template-columns: 1fr; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand, .auth-card { padding: 32px; }
    .telao-qr-card { right: 12px; width: 104px; padding: 10px; }
    .qr-symbol { width: 70px; }
}
@media (max-width: 520px) {
    .container { width: min(100% - 24px, 1120px); }
    .hero { padding-top: 54px; }
    .phone-shell { width: 220px; height: 380px; left: 0; padding: 18px; }
    .photo-card.large { height: 160px; }
    .photo-card.small { width: 96px; height: 82px; }
    .qr-mark { width: 66px; height: 66px; right: 16px; bottom: 34px; }
    .screen-wall { right: 0; width: 220px; padding: 14px; gap: 10px; }
    .screen-wall div { height: 88px; }
    .hero-actions .button { width: 100%; }
}
