:root {
    --ink: #101828;
    --ink-soft: #344054;
    --muted: #667085;
    --line: #e4e7ec;
    --surface: #ffffff;
    --surface-soft: #f7f8fa;
    --orange: #f08000;
    --orange-dark: #c95b00;
    --orange-soft: #fff3e5;
    --teal: #00cfd5;
    --teal-dark: #007d86;
    --teal-soft: #e5fcfc;
    --navy: #071426;
    --success: #0e9f6e;
    --danger: #d92d20;
    --shadow: 0 20px 60px rgba(16, 24, 40, 0.1);
    --shadow-soft: 0 10px 30px rgba(16, 24, 40, 0.07);
    --radius: 22px;
    --font-body: 'DM Sans', Arial, sans-serif;
    --font-display: 'Manrope', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--surface); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.announcement { background: var(--navy); color: #fff; font-size: 0.88rem; }
.announcement-inner { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 42px; }
.announcement i { color: #ff9d5c; margin-right: 8px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(228,231,236,.9); backdrop-filter: blur(16px); }
.header-inner { height: 82px; display: flex; align-items: center; gap: 34px; }
.brand { flex: 0 0 auto; }
.brand img { width: 220px; height: auto; filter: drop-shadow(0 3px 8px rgba(7,20,38,.14)); }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin-left: auto; }
.desktop-nav a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.desktop-nav a:hover { color: var(--orange); }
.header-cta { margin-left: 10px; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.mobile-nav { display: none; position: absolute; inset: 82px 0 auto; padding: 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.mobile-nav.open { display: grid; gap: 8px; }
.mobile-nav > a:not(.button) { padding: 12px 4px; font-weight: 600; border-bottom: 1px solid var(--line); }

.button { min-height: 46px; padding: 11px 20px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); background: transparent; font-weight: 700; line-height: 1.2; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--orange); box-shadow: 0 8px 20px rgba(240,128,0,.24); }
.button-primary:hover { background: var(--orange-dark); box-shadow: 0 12px 26px rgba(240,128,0,.3); }
.button-secondary { color: var(--ink); background: #fff; border-color: var(--line); box-shadow: 0 4px 12px rgba(16,24,40,.04); }
.button-secondary:hover { border-color: #c5cad3; box-shadow: var(--shadow-soft); }
.button-light { color: var(--orange-dark); background: #fff; }
.button-large { min-height: 54px; padding: 15px 25px; border-radius: 14px; }
.button-small { min-height: 40px; padding: 9px 15px; font-size: .9rem; }
.button-full { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-dark); font-weight: 700; }
.text-link:hover { gap: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: .92rem; }
.back-link:hover { color: var(--orange); }

.hero { overflow: hidden; padding: 80px 0 70px; background: linear-gradient(130deg, #fff 0%, #fff 54%, #f4ffff 100%); }
.hero-grid { min-height: 610px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 56px; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-dark); font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { padding: 8px 12px; border: 1px solid #ffd8bd; border-radius: 999px; background: var(--orange-soft); letter-spacing: .03em; text-transform: none; }
.hero h1 { max-width: 700px; margin: 22px 0; font: 800 clamp(2.8rem, 5vw, 4.6rem)/1.06 var(--font-display); letter-spacing: -.05em; }
.hero h1 span { color: var(--orange); }
.hero-copy > p { max-width: 620px; color: var(--muted); font-size: 1.16rem; line-height: 1.75; }
.hero-actions { margin: 32px 0 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: flex; align-items: center; gap: 14px; }
.avatar-stack { display: flex; padding-left: 10px; }
.avatar-stack span { width: 38px; height: 38px; margin-left: -10px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--navy); font-size: .68rem; font-weight: 800; }
.avatar-stack span:nth-child(2) { background: var(--teal); }
.avatar-stack span:nth-child(3) { background: var(--orange); }
.stars { color: #fdb022; letter-spacing: 1px; line-height: 1; }
.hero-proof p { margin-top: 4px; color: var(--muted); font-size: .88rem; }
.hero-visual { min-height: 560px; position: relative; display: grid; place-items: center; }
.hero-product { width: 100%; min-height: 520px; position: relative; z-index: 2; display: grid; place-items: center; }
.hero-product img { width: min(590px, 112%); height: auto; filter: drop-shadow(0 30px 28px rgba(16,24,40,.2)); }
.carousel-slide { position: absolute; opacity: 0; transition: opacity .6s ease; }
.carousel-slide.active { opacity: 1; }
.hero-shape { position: absolute; border-radius: 50%; }
.hero-shape-one { width: 430px; height: 430px; background: linear-gradient(145deg, #ffe2c2, #dcffff); }
.hero-shape-two { width: 280px; height: 280px; right: -80px; top: 10px; border: 45px solid var(--teal-soft); }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: rgba(255,255,255,.93); box-shadow: var(--shadow-soft); }
.floating-card > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--orange); background: var(--orange-soft); }
.floating-card strong, .floating-card span { display: block; }
.floating-card strong { font-size: .9rem; }
.floating-card span { color: var(--muted); font-size: .76rem; }
.floating-card-top { top: 78px; right: -10px; }
.floating-card-bottom { left: -12px; bottom: 72px; }
.floating-card-bottom > i { color: var(--teal); background: var(--teal-soft); }

.trust-strip { border-block: 1px solid var(--line); background: #fff; }
.trust-grid { min-height: 96px; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > div { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border-right: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.trust-grid > div:last-child { border: 0; }
.trust-grid i { color: var(--orange); font-size: 1.25rem; }
.trust-grid strong { color: var(--ink); }

.section { padding: 108px 0; }
.section-heading { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-heading h2, .quality-copy h2, .faq-grid h2, .contact-copy h2 { margin: 12px 0 16px; font: 800 clamp(2rem, 3.5vw, 3rem)/1.16 var(--font-display); letter-spacing: -.035em; }
.section-heading > p, .quality-copy > p, .faq-grid > div > p { color: var(--muted); font-size: 1.06rem; }
.section-heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; text-align: left; }
.section-heading-row h2 { max-width: 720px; margin-bottom: 0; }

.how-it-works { background: var(--surface-soft); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { min-height: 310px; position: relative; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 22px rgba(16,24,40,.04); }
.step-card.featured { border-color: #ffd1b3; box-shadow: 0 18px 50px rgba(255,100,0,.1); transform: translateY(-8px); }
.step-number { position: absolute; top: 26px; right: 28px; color: #d0d5dd; font: 800 2.2rem var(--font-display); }
.step-icon { width: 58px; height: 58px; margin-bottom: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--orange); background: var(--orange-soft); font-size: 1.35rem; }
.featured .step-icon { color: var(--teal); background: var(--teal-soft); }
.step-card h3 { margin-bottom: 12px; font: 800 1.3rem var(--font-display); }
.step-card p { color: var(--muted); }
.center-action { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.center-action span { color: var(--muted); font-size: .9rem; }

.quality-section { overflow: hidden; }
.quality-grid { display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 76px; }
.quality-image { position: relative; }
.quality-image:before { content: ''; position: absolute; width: 80%; height: 90%; left: -50px; bottom: -35px; z-index: -1; border-radius: 32px; background: var(--teal-soft); }
.quality-image img { width: 100%; min-height: 520px; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); }
.quality-badge { position: absolute; right: -20px; bottom: 34px; width: 118px; height: 118px; display: grid; place-content: center; text-align: center; border: 7px solid #fff; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: var(--shadow-soft); }
.quality-badge strong { font: 800 2rem var(--font-display); line-height: 1; }
.quality-badge span { font-size: .72rem; }
.quality-copy > p { margin-bottom: 28px; line-height: 1.8; }
.feature-list { margin: 26px 0 30px; display: grid; gap: 17px; }
.feature-list > div { display: flex; align-items: flex-start; gap: 13px; }
.feature-list i { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: #eafaf4; font-size: .75rem; }
.feature-list span { color: var(--muted); }
.feature-list strong { color: var(--ink); }

.gallery-section { background: radial-gradient(circle at 85% 10%, rgba(0,232,232,.12), transparent 28%), var(--navy); color: #fff; }
.gallery-section .section-kicker { color: #ffad76; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item, .gallery-placeholder { min-height: 420px; position: relative; overflow: hidden; border-radius: var(--radius); background: #27364f; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-placeholder { display: flex; align-items: end; padding: 24px; background-position: center; background-size: cover; }
.gallery-placeholder:after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(16,24,40,.8)); }
.gallery-placeholder span { position: relative; z-index: 1; font-weight: 700; }
.gallery-placeholder-one { background-image: linear-gradient(rgba(20,184,173,.14), rgba(20,184,173,.14)), url('../img/hero-cases.png'); }
.gallery-placeholder-two { background-image: linear-gradient(rgba(255,100,0,.14), rgba(255,100,0,.14)), url('../img/about-uv.png'); }
.gallery-placeholder-three { background-image: linear-gradient(rgba(16,24,40,.12), rgba(16,24,40,.12)), url('../img/hero-bg-premium.png'); }

.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.faq-grid .text-link { margin-top: 24px; }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 700; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary i { color: var(--orange); transition: transform .2s ease; }
.accordion details[open] summary i { transform: rotate(45deg); }
.accordion details p { padding: 0 38px 24px 4px; color: var(--muted); }

.contact-section { background: var(--surface-soft); }
.contact-shell { display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border-radius: 28px; background: var(--navy); box-shadow: var(--shadow); }
.contact-copy { padding: 58px; color: #fff; background: radial-gradient(circle at 10% 100%, rgba(0,232,232,.2), transparent 36%); }
.section-kicker.light { color: #ffad76; }
.contact-copy p { color: #cbd5e1; }
.contact-points { margin-top: 38px; display: grid; gap: 22px; }
.contact-points > div { display: flex; gap: 14px; align-items: center; }
.contact-points i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); }
.contact-points span, .contact-points strong, .contact-points small { display: block; }
.contact-points small { color: #98a2b3; }
.contact-form { padding: 52px; background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-weight: 700; font-size: .91rem; }
.field label span { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea, select { width: 100%; padding: 13px 14px; color: var(--ink); background: #fff; border: 1px solid #d0d5dd; border-radius: 11px; outline: none; transition: .2s ease; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, select:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,100,0,.1); }
.form-feedback { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: .92rem; }
.form-feedback.success { display: block; color: #087a55; background: #eafaf4; }
.form-feedback.error { display: block; color: #b42318; background: #fef3f2; }

.cta-band { padding: 68px 0; color: #fff; background: var(--orange); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-band span { font-weight: 700; opacity: .85; }
.cta-band h2 { max-width: 720px; margin-top: 5px; font: 800 clamp(1.8rem, 3vw, 2.7rem)/1.2 var(--font-display); }

.site-footer { padding-top: 74px; color: #fff; background: radial-gradient(circle at 10% 0%, rgba(0,232,232,.08), transparent 25%), #050f1e; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .7fr .9fr 1fr; gap: 56px; padding-bottom: 56px; }
.footer-brand img { width: 245px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 5px 15px rgba(0,232,232,.12)); }
.footer-brand p, .footer-grid > div > p { color: #a9b5c6; }
.footer-grid h3 { margin-bottom: 18px; font: 800 1rem var(--font-display); }
.footer-grid > div > a, #legal-links a { display: block; margin: 10px 0; color: #a9b5c6; }
.footer-grid .button-primary { color: #fff; }
.footer-grid a:hover { color: #1ce9ed; }
.social-links { display: flex; gap: 9px; margin-top: 22px; }
.social-links a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #fff; }
.footer-bottom { min-height: 72px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #8997aa; font-size: .9rem; }
.compact-footer { padding: 0; }
.whatsapp-button { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 999px; color: #fff; background: #18a957; box-shadow: 0 12px 30px rgba(24,169,87,.3); font-weight: 700; }
.whatsapp-button i { font-size: 1.3rem; }

/* Builder */
.builder-page { min-height: 100vh; background: var(--surface-soft); }
.builder-header { position: relative; }
.builder-help { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .88rem; }
.builder-help i { color: var(--success); }
.builder-help a { margin-left: 14px; color: var(--orange-dark); font-weight: 700; }
.builder-main { padding: 42px 0 80px; }
.builder-title { position: relative; margin-bottom: 34px; text-align: center; }
.builder-title .back-link { position: absolute; left: 0; top: 5px; }
.builder-title h1 { margin: 8px 0; font: 800 clamp(2rem, 4vw, 3rem) var(--font-display); letter-spacing: -.035em; }
.builder-title p { color: var(--muted); }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(320px, .64fr); gap: 24px; align-items: start; }
.builder-card, .order-summary { border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(16,24,40,.05); }
.builder-card { overflow: hidden; }
.progress-steps { padding: 24px 36px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.progress-steps > div { height: 2px; margin: 0 14px; background: var(--line); }
.progress-step { display: flex; align-items: center; gap: 9px; border: 0; color: var(--muted); background: transparent; }
.progress-step span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-weight: 800; }
.progress-step strong { font-size: .88rem; }
.progress-step.active, .progress-step.complete { color: var(--ink); }
.progress-step.active span { color: #fff; border-color: var(--orange); background: var(--orange); }
.progress-step.complete span { color: var(--success); border-color: #a6f4c5; background: #ecfdf3; }
.builder-stage { display: none; padding: 40px; }
.builder-stage.active { display: block; }
.stage-heading { margin-bottom: 30px; }
.stage-heading > span { color: var(--orange-dark); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.stage-heading h2 { margin: 7px 0 9px; font: 800 1.7rem var(--font-display); }
.stage-heading p { color: var(--muted); }
.selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tip-box { margin: 14px 0 28px; padding: 15px 17px; display: flex; gap: 13px; border: 1px solid #b8ece8; border-radius: 12px; color: #27635f; background: var(--teal-soft); font-size: .9rem; }
.tip-box i { margin-top: 4px; color: var(--teal); }
.stage-actions { margin-top: 28px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.stage-actions-end { justify-content: flex-end; }
.upload-zone { min-height: 190px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #cdd3dc; border-radius: 16px; background: #fbfcfd; cursor: pointer; transition: .2s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--orange); background: var(--orange-soft); }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-icon { width: 50px; height: 50px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 14px; color: var(--orange); background: var(--orange-soft); font-size: 1.3rem; }
.upload-zone strong { font-size: 1.02rem; }
.upload-zone small { margin-top: 5px; color: var(--muted); }
.image-controls { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.image-controls button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: #fff; font-weight: 700; font-size: .84rem; }
.image-controls button:hover { border-color: #b8bec8; }
.image-controls .danger-link { margin-left: auto; color: var(--danger); }
.form-row.compact { grid-template-columns: .6fr 1.4fr; }
.choice-section { margin: 5px 0 20px; border: 0; }
.choice-section legend { margin-bottom: 8px; color: var(--ink-soft); font-weight: 700; font-size: .91rem; }
.choice-grid, .payment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.payment-grid { grid-template-columns: repeat(3, 1fr); }
.choice-card { min-height: 82px; position: relative; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: .2s ease; }
.choice-card:hover { border-color: #c1c7d0; }
.choice-card.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,100,0,.08); }
.choice-card input { position: absolute; opacity: 0; }
.choice-card > i:not(.check) { color: var(--orange); font-size: 1.15rem; }
.choice-card span, .choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: .89rem; }
.choice-card small { color: var(--muted); font-size: .72rem; }
.choice-card .check { display: none; margin-left: auto; color: var(--orange); }
.choice-card.selected .check { display: block; }
.pickup-notice { display: none; margin: -4px 0 18px; padding: 13px 15px; gap: 10px; border-radius: 10px; color: #27635f; background: var(--teal-soft); }
.pickup-notice.visible { display: flex; }
.consent { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .82rem; cursor: pointer; }
.consent input { margin-top: 4px; accent-color: var(--orange); }
.consent a { color: var(--orange-dark); text-decoration: underline; }

.order-summary { position: sticky; top: 106px; padding: 24px; }
.preview-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.preview-label span { font-weight: 800; }
.preview-label small { color: var(--muted); }
.phone-preview { width: min(245px, 80%); aspect-ratio: 1/2; position: relative; overflow: hidden; margin: 0 auto 14px; border: 10px solid #1f2937; border-radius: 34px; background: #eef1f5; box-shadow: 0 18px 35px rgba(16,24,40,.2), inset 0 0 0 2px rgba(255,255,255,.2); touch-action: none; }
.phone-preview.has-model-cover { border: 0; border-radius: 0; box-shadow: 0 18px 35px rgba(16,24,40,.18); }
#case-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
#case-canvas:active { cursor: grabbing; }
.model-cover-overlay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.phone-preview.has-model-cover .model-cover-overlay { opacity: 1; }
.phone-preview.has-model-cover .camera-cutout { display: none; }
.camera-cutout { position: absolute; z-index: 3; top: 12px; left: 12px; width: 78px; height: 88px; padding: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border-radius: 20px; background: #171d28; pointer-events: none; }
.camera-cutout span { border: 3px solid #313b4c; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #61718a 0 8%, #101623 18% 55%, #05070c 58%); }
.camera-cutout span:last-child { width: 15px; height: 15px; align-self: center; justify-self: center; border-width: 2px; }
.preview-placeholder { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #98a2b3; text-align: center; pointer-events: none; }
.preview-placeholder i { font-size: 2rem; }
.preview-placeholder span { max-width: 120px; font-size: .8rem; }
.preview-placeholder.hidden { display: none; }
.preview-note { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.preview-note i { margin-top: 3px; }
.summary-details { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.summary-product, .quantity-row, .summary-line, .summary-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.summary-product strong, .summary-product span { display: block; }
.summary-product > span { flex: 0 0 auto; font-weight: 800; }
.summary-product div span { color: var(--muted); font-size: .78rem; }
.quantity-row { margin: 18px 0 10px; }
.quantity-control { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.quantity-control button { width: 34px; height: 32px; border: 0; background: #fff; font-size: 1.1rem; }
.quantity-control strong { width: 32px; text-align: center; font-size: .9rem; }
.discount-hint { margin: 10px 0 17px; padding: 9px 10px; border-radius: 8px; color: #27635f; background: var(--teal-soft); font-size: .78rem; }
.discount-hint i { margin-right: 5px; }
.summary-line { margin: 8px 0; color: var(--muted); font-size: .9rem; }
.summary-line strong { color: var(--ink); }
.summary-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 800; }
.summary-total strong { color: var(--orange-dark); font: 800 1.35rem var(--font-display); }
.summary-assurance { margin-top: 18px; padding: 13px; display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: .75rem; }
.summary-assurance i { margin-top: 3px; color: var(--success); }
.summary-assurance strong { display: block; color: var(--ink); }
.success-modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px; background: rgba(16,24,40,.72); }
.success-modal.open { display: grid; }
.success-card { width: min(500px, 100%); padding: 42px; text-align: center; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.success-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: 1.8rem; }
.success-card > span { color: var(--success); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.success-card h2 { margin: 8px 0 12px; font: 800 1.8rem var(--font-display); }
.success-card p { color: var(--muted); }
.success-total { margin: 22px 0; padding: 15px; display: flex; justify-content: space-between; border-radius: 10px; background: var(--surface-soft); }

/* Legal pages */
.legal-page { background: var(--surface-soft); }
.legal-main { min-height: calc(100vh - 154px); padding: 70px 0; }
.legal-container { max-width: 850px; }
.legal-container > .section-kicker { margin-top: 36px; }
.legal-container h1 { margin: 8px 0 28px; font: 800 clamp(2.2rem, 5vw, 3.5rem) var(--font-display); }
.legal-content { padding: 44px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); }
.legal-content h2 { margin: 28px 0 10px; font: 800 1.35rem var(--font-display); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { margin: 10px 0; color: var(--muted); }
.legal-content a { color: var(--orange-dark); text-decoration: underline; }
.loader-ring { width: 34px; height: 34px; margin: 20px auto; border: 3px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1020px) {
    .desktop-nav { display: none; }
    .menu-toggle { display: block; }
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .floating-card-top { right: 0; }
    .floating-card-bottom { left: 0; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid > div:nth-child(2) { border-right: 0; }
    .trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .builder-layout { grid-template-columns: minmax(0, 1fr) 330px; }
    .payment-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; }
}

@media (max-width: 820px) {
    .announcement-secondary { display: none; }
    .header-cta { display: none; }
    .header-inner { height: 72px; }
    .brand img { width: 190px; }
    .mobile-nav { top: 72px; }
    .hero { padding: 60px 0; }
    .hero-grid, .quality-grid, .faq-grid, .contact-shell, .builder-layout { grid-template-columns: 1fr; }
    .hero-grid { text-align: center; }
    .hero-copy { display: flex; flex-direction: column; align-items: center; }
    .hero-visual { min-height: 470px; }
    .hero-product { min-height: 450px; }
    .steps-grid { grid-template-columns: 1fr; }
    .step-card.featured { transform: none; }
    .quality-grid { gap: 58px; }
    .quality-image { width: min(600px, 100%); margin: 0 auto; }
    .quality-copy { max-width: 650px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid > :last-child { display: none; }
    .contact-copy, .contact-form { padding: 42px; }
    .cta-band-inner { flex-direction: column; align-items: flex-start; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-grid > div:last-child { display: none; }
    .order-summary { position: static; grid-row: auto; }
    .phone-preview { width: 210px; }
    .builder-title .back-link { width: max-content; position: static; display: flex; margin-bottom: 20px; }
    .builder-help > i, .builder-help > a { display: none; }
}

@media (max-width: 580px) {
    .container { width: min(100% - 28px, 1180px); }
    .announcement-inner { min-height: 34px; font-size: .78rem; }
    .hero h1 { font-size: 2.55rem; }
    .hero-copy > p { font-size: 1rem; }
    .hero-actions { width: 100%; flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .hero-visual { min-height: 360px; }
    .hero-product { min-height: 350px; }
    .hero-shape-one { width: 300px; height: 300px; }
    .floating-card { padding: 10px; }
    .floating-card-top { top: 15px; }
    .floating-card-bottom { bottom: 10px; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-grid > div { justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
    .section { padding: 76px 0; }
    .section-heading-row { align-items: flex-start; flex-direction: column; gap: 24px; }
    .quality-image img { min-height: 400px; }
    .quality-badge { right: 5px; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid > :nth-child(2) { display: none; }
    .gallery-item, .gallery-placeholder { min-height: 390px; }
    .contact-copy, .contact-form { padding: 30px 24px; }
    .form-row, .selection-grid, .form-row.compact, .choice-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { padding: 20px 0; align-items: flex-start; flex-direction: column; gap: 6px; }
    .whatsapp-button span { display: none; }
    .whatsapp-button { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
    .builder-main { padding-top: 26px; }
    .builder-title { text-align: left; }
    .progress-steps { padding: 18px 16px; }
    .progress-step strong { display: none; }
    .builder-stage { padding: 28px 20px; }
    .stage-actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
    .stage-actions .button { width: 100%; }
    .image-controls .danger-link { margin-left: 0; }
    .order-summary { padding: 20px; }
    .success-card { padding: 32px 22px; }
    .legal-content { padding: 28px 22px; }
}

@media (max-width: 360px) {
    .brand img { width: 178px; }
    .builder-help { display: none; }
    .hero h1 { font-size: 2.2rem; }
    .eyebrow { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}