/* =========================
   VARIABLES
========================= */
:root {
    --color-primary: #ff8210;
    --color-primary-light: #ff9f45;
    --color-primary-dark: #d85e00;
    --color-background: #080808;
    --color-background-soft: #0d0d0e;
    --color-surface: #121214;
    --color-surface-light: #18181b;
    --color-text: #f8f8f8;
    --color-text-muted: #a1a1aa;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-accent: rgba(255, 130, 16, 0.35);
    --color-success: #53d18a;
    --container: 1180px;
    --header-height: 76px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    --transition: 180ms ease;
}

/* =========================
   RESET & BASE
========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--color-background); color: var(--color-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.45rem, 5.3vw, 4.75rem); }
h2 { margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3.55rem); }
h3 { font-size: 1.2rem; }
h1 span, h2 span { color: var(--color-primary); }
::selection { background: var(--color-primary); color: #080808; }
:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 4px; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: clamp(88px, 10vw, 150px) 0; }
.section-dark { background: var(--color-background); }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; transform: translateY(-150%); padding: 12px 18px; border-radius: 8px; background: var(--color-primary); color: #080808; font-weight: 800; transition: transform var(--transition); }
.skip-link:focus { transform: translateY(0); }

/* =========================
   REUSABLE COMPONENTS
========================= */
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--color-primary-light); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.centered .eyebrow, .cta-inner .eyebrow { justify-content: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 5px rgba(83, 209, 138, 0.12); }
.section-heading { max-width: 790px; margin-bottom: 60px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading > p:last-child { color: var(--color-text-muted); font-size: 1.08rem; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: #0a0a0a; font-weight: 800; line-height: 1.25; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.button:hover { transform: translateY(-2px); background: var(--color-primary-light); box-shadow: 0 12px 30px rgba(255, 130, 16, 0.22); }
.button-secondary { border-color: var(--color-border); background: rgba(255, 255, 255, 0.035); color: var(--color-text); }
.button-secondary:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.button-small { min-height: 44px; padding: 10px 17px; font-size: 0.87rem; }
.button-large { min-height: 60px; padding-inline: 30px; }
.button-group { display: flex; flex-wrap: wrap; gap: 12px; }
.card-grid { display: grid; gap: 18px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================
   HEADER
========================= */
.site-header { position: fixed; z-index: 100; top: 0; width: 100%; border-bottom: 1px solid transparent; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled { border-color: var(--color-border); background: rgba(8, 8, 8, 0.88); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header-inner { display: flex; height: var(--header-height); align-items: center; gap: 24px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--color-border-accent); border-radius: 10px; background: linear-gradient(145deg, rgba(255,130,16,.18), rgba(255,130,16,.03)); color: var(--color-primary); font-size: 0.77rem; font-weight: 900; letter-spacing: -0.04em; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 1rem; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; color: var(--color-text-muted); font-size: .67rem; letter-spacing: .06em; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-left: auto; }
.main-nav a { position: relative; color: #c6c6cc; font-size: 0.86rem; font-weight: 600; white-space: nowrap; transition: color var(--transition); }
.main-nav a::after { position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; transform: scaleX(0); border-radius: 2px; background: var(--color-primary); content: ""; transition: transform var(--transition); }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a.active::after { transform: scaleX(1); }
.header-cta { margin-left: 4px; }
.menu-toggle { display: none; width: 46px; height: 46px; margin-left: auto; padding: 11px; border: 1px solid var(--color-border); border-radius: 9px; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 100%; height: 2px; margin: 5px 0; background: #fff; transition: transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================
   HERO
========================= */
.hero { position: relative; min-height: 760px; overflow: hidden; padding: calc(var(--header-height) + 90px) 0 90px; }
.hero::before { position: absolute; top: -230px; right: -150px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(255,130,16,.12), transparent 67%); content: ""; pointer-events: none; }
.hero-grid-bg { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%); mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(48px, 7vw, 96px); }
.hero-content { max-width: 700px; }
.hero h1 { margin-bottom: 28px; }
.hero-lead { max-width: 650px; margin-bottom: 34px; color: #b7b7be; font-size: clamp(1.05rem, 1.8vw, 1.23rem); }
.service-strip { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 42px 0 0; color: #9b9ba2; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.service-strip span { display: inline-flex; align-items: center; }
.service-strip span:not(:last-child)::after { margin: 0 9px; color: var(--color-primary); content: "•"; }
.monitor-panel { position: relative; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(30,30,33,.92), rgba(14,14,15,.98)); box-shadow: var(--shadow); }
.monitor-panel::before { position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(145deg, rgba(255,130,16,.28), transparent 32%); content: ""; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }
.panel-top, .security-score, .activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-top > div { display: flex; flex-direction: column; }
.panel-kicker, .panel-label { color: var(--color-text-muted); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-top strong { margin-top: 4px; font-size: .93rem; }
.online-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(83,209,138,.18); border-radius: 99px; background: rgba(83,209,138,.08); color: #8be5b2; font-size: .63rem; font-weight: 700; }
.online-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.security-score { justify-content: flex-start; margin: 28px 0; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.score-ring { display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--color-primary) 0 94%, rgba(255,255,255,.09) 94%); }
.score-ring::before { width: 65px; height: 65px; border-radius: 50%; background: var(--color-surface); content: ""; }
.score-ring span { position: absolute; color: #fff; font-size: 1.25rem; font-weight: 800; }
.security-score > div:last-child { display: flex; flex-direction: column; }
.security-score strong { margin: 3px 0; font-size: 1.07rem; }
.security-score small { color: var(--color-text-muted); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { display: flex; min-width: 0; flex-direction: column; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: rgba(255,255,255,.02); }
.metric-icon { color: var(--color-primary); }
.metric small { margin: 10px 0 2px; overflow: hidden; color: var(--color-text-muted); font-size: .63rem; text-overflow: ellipsis; }
.metric strong { font-size: .78rem; }
.activity-card { margin-top: 10px; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: rgba(255,255,255,.02); }
.activity-heading { font-size: .7rem; font-weight: 700; }
.activity-heading small { color: var(--color-text-muted); }
.activity-bars { display: flex; height: 58px; align-items: flex-end; gap: 6px; margin-top: 17px; }
.activity-bars i { width: 100%; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(to top, rgba(255,130,16,.22), var(--color-primary)); }
.shield-orbit { position: absolute; right: -24px; bottom: 80px; display: grid; width: 58px; height: 64px; place-items: center; clip-path: polygon(50% 0, 94% 18%, 85% 73%, 50% 100%, 15% 73%, 6% 18%); background: var(--color-primary); color: #111; box-shadow: 0 12px 30px rgba(255,130,16,.28); font-weight: 900; }

/* =========================
   RISKS & SOLUTIONS
========================= */
.pain-section { background: #0c0c0d; }
.four-columns { grid-template-columns: repeat(4, 1fr); }
.risk-card, .solution-card { position: relative; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.risk-card:hover, .solution-card:hover { transform: translateY(-5px); border-color: var(--color-border-accent); background: #161617; }
.risk-card { min-height: 300px; padding: 28px; border-radius: var(--radius-md); }
.risk-card::after { position: absolute; right: -35px; bottom: -35px; width: 95px; height: 95px; border: 1px solid rgba(255,130,16,.14); border-radius: 50%; content: ""; }
.card-number { position: absolute; top: 24px; right: 25px; color: #3d3d42; font-size: .72rem; font-weight: 800; }
.icon-box, .solution-icon { display: grid; place-items: center; color: var(--color-primary); font-weight: 700; }
.icon-box { width: 48px; height: 48px; margin-bottom: 46px; border: 1px solid var(--color-border-accent); border-radius: 12px; background: rgba(255,130,16,.08); font-size: 1.4rem; }
.risk-card h3, .solution-card h3 { margin-bottom: 13px; }
.risk-card p, .solution-card p { margin-bottom: 0; color: var(--color-text-muted); font-size: .92rem; }
.section-conclusion { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 42px 0 0; color: #d3d3d7; text-align: center; }
.section-conclusion span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,130,16,.12); color: var(--color-primary); font-size: .75rem; }
.solutions-section { background: var(--color-background); }
.solutions-grid { grid-template-columns: repeat(3, 1fr); }
.solution-card { padding: 32px; border-radius: var(--radius-md); }
.solution-icon { width: 52px; height: 52px; margin-bottom: 30px; border-radius: 14px; background: linear-gradient(145deg, rgba(255,130,16,.16), rgba(255,130,16,.03)); font-size: 1.5rem; }
.solution-card > p { min-height: 74px; }
.solution-card ul { display: grid; gap: 8px; margin-top: 22px; list-style: none; }
.solution-card li { position: relative; padding-left: 19px; color: #c5c5ca; font-size: .82rem; }
.solution-card li::before { position: absolute; left: 0; color: var(--color-primary); content: "✓"; font-weight: 800; }

/* =========================
   BENEFITS
========================= */
.benefits-section { border-block: 1px solid var(--color-border); background: linear-gradient(110deg, #101011, #0a0a0b); }
.benefits-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 8vw, 110px); }
.benefits-intro { position: sticky; top: calc(var(--header-height) + 45px); align-self: start; }
.benefits-intro > p:not(.eyebrow) { color: var(--color-text-muted); }
.text-link { display: inline-flex; gap: 10px; margin-top: 18px; color: var(--color-primary-light); font-weight: 800; }
.text-link:hover { color: #fff; }
.benefits-list { display: grid; grid-template-columns: 1fr 1fr; }
.benefit-item { display: flex; gap: 18px; padding: 27px 24px; border-bottom: 1px solid var(--color-border); }
.benefit-item:nth-child(odd) { border-right: 1px solid var(--color-border); }
.benefit-item > span { color: var(--color-primary); font-size: .68rem; font-weight: 800; }
.benefit-item h3 { margin-bottom: 9px; font-size: 1.05rem; }
.benefit-item p { margin: 0; color: var(--color-text-muted); font-size: .86rem; }

/* =========================
   PROCESS
========================= */
.process-section { background: #090909; }
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 76px; list-style: none; }
.process-step { position: relative; padding-right: 30px; }
.step-number { display: grid; width: 54px; height: 54px; margin-bottom: 33px; place-items: center; border: 1px solid var(--color-border-accent); border-radius: 50%; background: #101011; color: var(--color-primary); font-size: .72rem; font-weight: 900; }
.step-line { position: absolute; top: 27px; left: 54px; width: calc(100% - 54px); height: 1px; background: linear-gradient(to right, var(--color-border-accent), var(--color-border)); }
.process-step h3 { max-width: 210px; }
.process-step p { max-width: 235px; color: var(--color-text-muted); font-size: .9rem; }
.centered-cta { margin-top: 54px; text-align: center; }

/* =========================
   ABOUT
========================= */
.about-section { overflow: hidden; background: #0d0d0e; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(60px, 9vw, 130px); }
.about-content > p:not(.eyebrow) { color: var(--color-text-muted); }
.about-visual { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #0b0b0c; box-shadow: var(--shadow); }
.about-visual img { width: 100%; height: 100%; object-fit: contain; }

/* =========================
   PRIMARY CTA
========================= */
.cta-section { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 145px) 0; border-block: 1px solid rgba(255,130,16,.25); background: #100b07; }
.cta-section::before { position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(rgba(255,130,16,.6) 1px, transparent 1px); background-size: 24px 24px; content: ""; -webkit-mask-image: radial-gradient(circle at center, black, transparent 65%); mask-image: radial-gradient(circle at center, black, transparent 65%); }
.cta-glow { position: absolute; top: 50%; left: 50%; width: 700px; height: 350px; border-radius: 50%; background: rgba(255,130,16,.12); filter: blur(100px); transform: translate(-50%, -50%); }
.cta-inner { position: relative; max-width: 820px; text-align: center; }
.cta-inner > p:not(.eyebrow) { margin: 0 auto 30px; color: #c2c2c6; font-size: 1.08rem; }
.cta-inner small { display: block; margin-top: 15px; color: var(--color-text-muted); }

/* =========================
   CONTACT
========================= */
.contact-section { background: #0a0a0b; }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 8vw, 100px); }
.contact-copy > p:not(.eyebrow, .privacy-note) { color: var(--color-text-muted); }
.contact-direct { display: grid; gap: 18px; margin-top: 40px; }
.contact-direct div { display: flex; flex-direction: column; }
.contact-direct span { margin-bottom: 3px; color: var(--color-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-direct a { font-weight: 700; word-break: break-word; transition: color var(--transition); }
.contact-direct a:hover { color: var(--color-primary); }
.privacy-note { margin-top: 36px; color: #85858c; font-size: .78rem; }
.privacy-note button, .footer-bottom button { padding: 0; border: 0; background: none; color: var(--color-primary-light); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.contact-form { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; color: #d8d8db; font-size: .82rem; font-weight: 700; }
.field label span { color: var(--color-primary); }
.field input, .field textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 9px; outline: none; background: #0b0b0c; color: #fff; transition: border-color var(--transition), box-shadow var(--transition); }
.field input { height: 50px; padding: 0 14px; }
.field textarea { min-height: 130px; padding: 13px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #66666d; }
.field input:focus, .field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,130,16,.1); }
.field input[aria-invalid="true"] { border-color: #ff6b6b; }
.field-error { display: block; min-height: 18px; margin-top: 5px; color: #ff9292; font-size: .72rem; }
.form-submit { width: 100%; border: none; }
.form-status { min-height: 24px; margin: 10px 0 0; color: var(--color-success); font-size: .8rem; text-align: center; }

/* =========================
   FOOTER
========================= */
.site-footer { padding-top: 72px; border-top: 1px solid var(--color-border); background: #070707; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 55px; }
.footer-brand p { max-width: 360px; margin-top: 22px; color: var(--color-text-muted); font-size: .88rem; }
.footer-grid h2 { margin: 0 0 19px; color: #eee; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid ul { display: grid; gap: 9px; list-style: none; }
.footer-grid li, .footer-grid a { color: var(--color-text-muted); font-size: .82rem; }
.footer-grid a:hover { color: var(--color-primary-light); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 21px; border-top: 1px solid var(--color-border); }
.footer-bottom p, .footer-bottom button { margin: 0; color: #75757c; font-size: .75rem; }

/* =========================
   WHATSAPP & PRIVACY MODAL
========================= */
.whatsapp-float { position: fixed; z-index: 90; right: max(20px, calc((100vw - var(--container)) / 2)); bottom: 22px; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: #25d366; box-shadow: 0 12px 35px rgba(0,0,0,.35); transition: transform var(--transition), box-shadow var(--transition); }
.whatsapp-float:hover { transform: translateY(-4px); box-shadow: 0 15px 38px rgba(37,211,102,.24); }
.whatsapp-float svg { width: 30px; fill: #fff; }
.whatsapp-tooltip { position: absolute; right: 70px; width: max-content; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 7px; background: #161618; color: #fff; font-size: .73rem; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity var(--transition), transform var(--transition); }
.whatsapp-float:hover .whatsapp-tooltip, .whatsapp-float:focus-visible .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
.privacy-modal { width: min(calc(100% - 32px), 620px); max-height: min(780px, calc(100vh - 40px)); padding: 28px; border: 1px solid var(--color-border-accent); border-radius: var(--radius-md); background: #121214; color: var(--color-text); box-shadow: var(--shadow); }
.privacy-modal::backdrop { background: rgba(0,0,0,.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.modal-header h2 { margin: 0; font-size: 1.7rem; }
.modal-close { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: #fff; font-size: 1.7rem; cursor: pointer; }
.modal-content { max-height: 52vh; margin: 24px 0; overflow-y: auto; color: var(--color-text-muted); font-size: .9rem; }
.modal-content h3 { margin: 25px 0 8px; color: #fff; font-size: 1rem; }
.modal-content a { color: var(--color-primary-light); }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1080px) {
    .main-nav { gap: 17px; }
    .main-nav a { font-size: .8rem; }
    .header-cta { display: none; }
    .hero-grid { grid-template-columns: 1fr 0.86fr; gap: 46px; }
    .four-columns { grid-template-columns: 1fr 1fr; }
    .risk-card { min-height: 260px; }
    .solutions-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 820px) {
    :root { --header-height: 68px; }
    .container { width: min(calc(100% - 32px), var(--container)); }
    .menu-toggle { display: block; }
    .main-nav { position: fixed; z-index: -1; inset: var(--header-height) 0 auto; display: flex; max-height: 0; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; border-bottom: 1px solid transparent; background: rgba(8,8,8,.98); opacity: 0; transition: max-height 320ms ease, opacity var(--transition), border-color var(--transition); }
    .main-nav.is-open { max-height: calc(100vh - var(--header-height)); padding: 12px 20px 22px; border-color: var(--color-border); opacity: 1; }
    .main-nav a { padding: 14px 4px; border-bottom: 1px solid var(--color-border); font-size: .96rem; }
    .main-nav a::after { display: none; }
    .hero { min-height: auto; padding-top: calc(var(--header-height) + 66px); }
    .hero-grid, .benefits-layout, .about-layout, .contact-layout { grid-template-columns: 1fr; }
    .monitor-panel { max-width: 570px; margin-inline: auto; }
    .benefits-intro { position: static; }
    .process-list { grid-template-columns: 1fr 1fr; gap: 45px 0; }
    .process-step:nth-child(2) .step-line { display: none; }
    .about-visual { order: 2; }
    .contact-copy { max-width: 650px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid > div:last-child { grid-column: auto; }
}

@media (max-width: 560px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .section { padding: 78px 0; }
    .brand-copy { display: none; }
    .hero { padding-bottom: 72px; }
    .hero h1 { font-size: clamp(2.25rem, 11vw, 3.35rem); }
    .button-group { flex-direction: column; }
    .button-group .button { width: 100%; }
    .service-strip { line-height: 1.8; }
    .monitor-panel { padding: 16px; border-radius: 20px; }
    .panel-top { align-items: flex-start; }
    .online-badge { max-width: 110px; text-align: center; }
    .security-score { padding: 16px; }
    .score-ring { width: 72px; height: 72px; }
    .score-ring::before { width: 57px; height: 57px; }
    .shield-orbit { display: none; }
    .metric { padding: 10px; }
    .four-columns, .solutions-grid, .benefits-list, .process-list, .field-row, .footer-grid { grid-template-columns: 1fr; }
    .risk-card { min-height: auto; }
    .solution-card > p { min-height: 0; }
    .benefit-item:nth-child(odd) { border-right: 0; }
    .process-list { gap: 0; margin-top: 45px; }
    .process-step { padding: 0 0 40px 76px; }
    .step-number { position: absolute; left: 0; margin: 0; }
    .step-line { top: 54px; left: 27px; width: 1px; height: calc(100% - 54px); background: linear-gradient(to bottom, var(--color-border-accent), var(--color-border)); }
    .process-step:nth-child(2) .step-line { display: block; }
    .process-step:last-child { padding-bottom: 0; }
    .contact-form { padding: 22px 18px; border-radius: 18px; }
    .footer-grid { gap: 35px; }
    .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .whatsapp-tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .reveal { opacity: 1; transform: none; }
}