:root {
  --blue: #0b4f8a;
  --blue-deep: #07345d;
  --blue-soft: #eaf4fb;
  --teal: #0d7b76;
  --teal-deep: #075b57;
  --teal-soft: #e9f7f5;
  --yellow: #f6c445;
  --yellow-soft: #fff7d9;
  --navy: #092d4c;
  --ink: #173247;
  --muted: #637786;
  --line: #dce8ef;
  --surface: #f7fbfd;
  --white: #fff;
  --success: #0d7b5d;
  --danger: #b93b47;
  --shadow: 0 22px 64px rgba(9,45,76,.12);
  --shadow-soft: 0 14px 40px rgba(9,45,76,.08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --container: 1160px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased }
body.menu-open { overflow: hidden }
a { color: inherit; text-decoration: none }
button, input, textarea { font: inherit }
button { cursor: pointer }
img, svg { display: block; max-width: 100% }
::selection { background: var(--yellow); color: var(--navy) }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto }
.section { padding: 108px 0 }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; background: var(--navy); color: #fff; transform: translateY(-150%); transition: transform .2s }
.skip-link:focus { transform: translateY(0) }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--teal); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--yellow); border-radius: 10px }
.eyebrow-light { color: #d4f4ef }
.eyebrow-light::before { background: var(--yellow) }
h1, h2, h3, p { margin-top: 0 }
h1, h2, h3 { color: var(--navy); letter-spacing: -.035em }
h1 { margin-bottom: 24px; font-size: clamp(43px, 5.5vw, 74px); line-height: .98; font-weight: 900 }
h1 span { color: var(--blue) }
h2 { margin-bottom: 20px; font-size: clamp(32px, 4vw, 50px); line-height: 1.04; font-weight: 890 }
h3 { margin-bottom: 12px; font-size: 18px; line-height: 1.15 }
p { color: var(--muted); line-height: 1.75 }

.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 850; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s }
.button:hover { transform: translateY(-2px) }
.button:focus-visible, .site-nav a:focus-visible, .menu-button:focus-visible, .accordion-item button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(246,196,69,.55); outline-offset: 3px }
.button-primary { background: var(--yellow); color: #1d3550; box-shadow: 0 14px 28px rgba(181,136,25,.2) }
.button-primary:hover { background: #ffd260; box-shadow: 0 18px 34px rgba(181,136,25,.26) }
.button-secondary { border-color: #c9dce8; background: rgba(255,255,255,.72); color: var(--navy) }
.button-secondary:hover { border-color: #99b8ca; background: #fff }
.button-light { background: #fff; color: var(--blue-deep) }
.button-small { min-height: 42px; padding-inline: 17px; background: var(--blue); color: #fff; box-shadow: none }
.button-small:hover { background: var(--blue-deep) }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 78px; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background .2s, box-shadow .2s, border-color .2s }
.site-header.is-scrolled { background: rgba(255,255,255,.94); border-color: rgba(206,224,234,.8); box-shadow: 0 10px 32px rgba(9,45,76,.06); backdrop-filter: blur(18px) }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px }
.brand { display: flex; align-items: center; gap: 13px; flex: none }
.hpr-mark { width: 36px; display: flex; align-items: center }
.hpr-mark img { width: 34px; height: auto }
.brand-divider { width: 1px; height: 31px; background: #cfdee7 }
.gvet-mark { width: 148px; height: auto }
.site-nav { display: flex; align-items: center; gap: 25px; color: #385367; font-size: 12px; font-weight: 760 }
.site-nav > a:not(.button):hover { color: var(--blue) }
.menu-button { display: none; width: 44px; height: 44px; border: 0; border-radius: 11px; background: var(--blue-soft); align-items: center; justify-content: center; flex-direction: column; gap: 5px }
.menu-button > span:not(.sr-only) { width: 20px; height: 2px; background: var(--navy); border-radius: 10px; transition: transform .2s, opacity .2s }
.menu-button[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg) }
.menu-button[aria-expanded="true"] > span:nth-of-type(3) { opacity: 0 }
.menu-button[aria-expanded="true"] > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg) }

.hero { position: relative; min-height: 790px; display: flex; align-items: center; padding: 132px 0 84px; overflow: hidden; background: linear-gradient(135deg, #f8fcfe 0%, #eef8fb 48%, #fffaf0 100%) }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(#8cb4c8 .7px, transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(to right, #000, transparent 76%) }
.hero-shape { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none }
.hero-shape-one { width: 430px; height: 430px; right: -150px; top: 50px; background: rgba(13,123,118,.08) }
.hero-shape-two { width: 280px; height: 280px; left: -140px; bottom: -40px; background: rgba(246,196,69,.12) }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: 70px; align-items: center }
.hero-copy { max-width: 650px }
.hero-text { max-width: 610px; margin-bottom: 30px; color: #536b7b; font-size: 17px; line-height: 1.72 }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 29px }
.hero-points { display: flex; flex-wrap: wrap; gap: 9px 20px; padding: 0; margin: 0; list-style: none; color: #4e6675; font-size: 11px; font-weight: 720 }
.hero-points li { display: flex; align-items: center; gap: 8px }
.hero-points li span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(13,123,118,.11) }

.hero-visual { position: relative }
.vet-panel { position: relative; padding: 23px; border: 1px solid rgba(188,216,229,.9); border-radius: 30px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); backdrop-filter: blur(18px) }
.vet-panel::after { content: ""; position: absolute; z-index: -1; inset: 28px -18px -18px 40px; border-radius: 30px; background: var(--teal-soft); transform: rotate(2deg) }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line) }
.panel-logo img { width: 132px; height: auto }
.panel-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 99px; background: var(--teal-soft); color: var(--teal-deep); font-size: 9px; font-weight: 800 }
.panel-status i { width: 7px; height: 7px; border-radius: 50%; background: #2ab58c; box-shadow: 0 0 0 4px rgba(42,181,140,.12) }
.pet-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 18px 0; padding: 16px; border: 1px solid #dceaf0; border-radius: 18px; background: linear-gradient(135deg,#fff,#f6fbfc) }
.pet-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg,var(--blue),var(--teal)) }
.pet-avatar svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.pet-info small, .pet-info strong, .pet-info span { display: block }
.pet-info small { margin-bottom: 4px; color: var(--teal); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em }
.pet-info strong { margin-bottom: 4px; color: var(--navy); font-size: 13px }
.pet-info span { color: var(--muted); font-size: 9px }
.pet-badge { padding: 7px 10px; border-radius: 10px; background: var(--yellow-soft); color: #7a5a08; font-size: 9px; font-weight: 850 }
.clinical-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px }
.clinical-item { display: flex; align-items: center; gap: 11px; min-height: 68px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff }
.clinical-item.is-active { border-color: rgba(13,123,118,.3); background: var(--teal-soft) }
.clinical-symbol { min-width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 900 }
.clinical-item.is-active .clinical-symbol { background: var(--teal); color: #fff }
.clinical-item small, .clinical-item strong { display: block }
.clinical-item small { color: var(--muted); font-size: 8px }
.clinical-item strong { margin-top: 3px; color: var(--navy); font-size: 10px }
.management-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 13px }
.management-bar span { padding: 9px 5px; border-radius: 10px; background: #f2f7fa; color: #486273; text-align: center; font-size: 8px; font-weight: 800 }

.trust-strip { border-block: 1px solid var(--line); background: #fff }
.trust-grid { min-height: 101px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center }
.trust-grid > div { padding: 0 28px; border-right: 1px solid var(--line) }
.trust-grid > div:first-child { padding-left: 0 }
.trust-grid > div:last-child { border-right: 0; padding-right: 0 }
.trust-grid strong, .trust-grid span { display: block }
.trust-grid strong { color: var(--navy); font-size: 15px }
.trust-grid span { margin-top: 6px; color: var(--muted); font-size: 9px }

.split-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 86px; align-items: center }
.section-copy > p, .section-heading > p { max-width: 700px; font-size: 14px }
.feature-list { display: grid; gap: 12px; margin-top: 34px }
.feature-list article { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line) }
.feature-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 900 }
.feature-list strong { display: block; margin: 2px 0 5px; color: var(--navy); font-size: 13px }
.feature-list p { margin: 0; font-size: 11px; line-height: 1.6 }
.clinical-section { overflow: hidden }
.clinical-visual { min-height: 500px; display: grid; place-items: center }
.orbit-card { position: relative; width: 430px; height: 430px; border: 1px dashed #b9d4df; border-radius: 50%; background: radial-gradient(circle at center,#fff 0 29%,#f4fbfb 30% 31%,transparent 32%), linear-gradient(145deg,#f9fcfd,#eef8f8) }
.orbit-card::before, .orbit-card::after { content: ""; position: absolute; border: 1px dashed rgba(11,79,138,.18); border-radius: 50%; inset: 58px }
.orbit-card::after { inset: 113px; border-color: rgba(13,123,118,.22) }
.orbit-center { position: absolute; z-index: 3; inset: 50%; width: 138px; height: 138px; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border-radius: 50%; background: linear-gradient(145deg,var(--blue),var(--teal)); box-shadow: 0 16px 40px rgba(11,79,138,.2); color: #fff }
.orbit-center span, .orbit-center strong, .orbit-center small { display: block }
.orbit-center span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8 }
.orbit-center strong { margin: 3px 0; font-size: 23px }
.orbit-center small { font-size: 9px; opacity: .75 }
.orbit { position: absolute; z-index: 4; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-soft); color: var(--navy); font-size: 10px; font-weight: 850 }
.orbit-one { top: 28px; left: 50%; transform: translateX(-50%) }
.orbit-two { right: -6px; top: 50%; transform: translateY(-50%) }
.orbit-three { bottom: 28px; left: 50%; transform: translateX(-50%) }
.orbit-four { left: -12px; top: 50%; transform: translateY(-50%) }

.management-section { background: var(--surface) }
.centered { max-width: 760px; margin: 0 auto 48px; text-align: center }
.centered .eyebrow { justify-content: center }
.centered p { margin-inline: auto }
.management-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.resource-card { min-height: 222px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: transform .22s, box-shadow .22s, border-color .22s }
.resource-card:hover { transform: translateY(-5px); border-color: #bfd8e4; box-shadow: var(--shadow-soft) }
.resource-icon { width: 41px; height: 41px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 900 }
.resource-card h3 { font-size: 16px }
.resource-card p { margin: 0; font-size: 11px }
.resource-card-highlight { border-color: rgba(13,123,118,.24); background: linear-gradient(145deg,#fff,#edf9f7) }
.resource-card-highlight .resource-icon { background: var(--teal); color: #fff }

.workflow-section { padding: 88px 0; background: linear-gradient(135deg,var(--blue-deep),#075863 120%); color: #fff }
.workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center }
.workflow-copy h2 { color: #fff }
.workflow-copy p { max-width: 470px; color: #c4dce7; font-size: 13px }
.workflow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px }
.workflow-steps article { min-height: 132px; padding: 17px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.07) }
.workflow-steps article > span { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 9px; background: rgba(246,196,69,.15); color: var(--yellow); font-size: 9px; font-weight: 900 }
.workflow-steps strong, .workflow-steps small { display: block }
.workflow-steps strong { color: #fff; font-size: 11px }
.workflow-steps small { margin-top: 5px; color: #aac7d3; font-size: 8px; line-height: 1.5 }
.workflow-steps > i { width: 14px; height: 1px; background: rgba(255,255,255,.28) }

.benefits-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 70px; align-items: start }
.benefits-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px }
.benefit-card { min-height: 187px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: #fff }
.benefit-card > span { display: inline-block; margin-bottom: 29px; color: var(--teal); font-size: 10px; font-weight: 900 }
.benefit-card h3 { font-size: 15px }
.benefit-card p { margin: 0; font-size: 10px }

.price-section { padding: 0 0 108px }
.price-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 42px 48px; border: 1px solid #d8e6ec; border-radius: var(--radius-xl); background: linear-gradient(120deg,#f6fbfd,#eef9f7 65%,#fff9e6); box-shadow: var(--shadow-soft) }
.price-card h2 { margin-bottom: 8px; font-size: clamp(29px,3vw,40px) }
.price-card p { margin-bottom: 0; font-size: 12px }
.price-card .eyebrow { margin-bottom: 12px }

.faq-section { background: var(--surface) }
.faq-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 80px; align-items: start }
.accordion { display: grid; gap: 10px }
.accordion-item { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff }
.accordion-item button { width: 100%; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border: 0; background: transparent; color: var(--navy); text-align: left; font-size: 12px; font-weight: 830 }
.accordion-item button i { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--teal-soft) }
.accordion-item button i::before, .accordion-item button i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.5px; border-radius: 5px; background: var(--teal); transform: translate(-50%,-50%); transition: transform .2s }
.accordion-item button i::after { transform: translate(-50%,-50%) rotate(90deg) }
.accordion-item button[aria-expanded="true"] i::after { transform: translate(-50%,-50%) rotate(0) }
.accordion-content { padding: 0 20px 20px }
.accordion-content p { margin: 0; font-size: 11px; line-height: 1.7 }

.lead-section { position: relative; overflow: hidden; padding: 104px 0; background: linear-gradient(135deg,#082f52,#075660); color: #fff }
.lead-section::before { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 50%; right: -140px; top: -180px; background: rgba(246,196,69,.07) }
.lead-layout { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 82px; align-items: center }
.lead-copy h2 { color: #fff }
.lead-copy > p { color: #c2dae5; font-size: 14px }
.lead-assurances { display: grid; gap: 12px; margin-top: 32px; color: #d5e5ec; font-size: 10px; font-weight: 700 }
.lead-assurances span { display: flex; align-items: center; gap: 9px }
.lead-assurances i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow) }
.lead-form { padding: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: #fff; box-shadow: 0 25px 70px rgba(0,18,35,.25); color: var(--ink) }
.form-head { margin-bottom: 23px }
.form-head span, .form-head strong { display: block }
.form-head span { margin-bottom: 5px; color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase }
.form-head strong { color: var(--navy); font-size: 22px; letter-spacing: -.025em }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px }
.field { display: grid; gap: 7px }
.field-full { grid-column: 1 / -1 }
.field > span { color: #446073; font-size: 9px; font-weight: 780 }
.field input, .field textarea { width: 100%; border: 1px solid #d6e3e9; border-radius: 11px; background: #fbfdfe; color: var(--navy); outline: 0; transition: border .2s, box-shadow .2s, background .2s }
.field input { height: 45px; padding: 0 13px }
.field textarea { min-height: 95px; padding: 12px 13px; resize: vertical }
.field input:focus, .field textarea:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(13,123,118,.09) }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(185,59,71,.08) }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important }
.privacy-check { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; margin: 16px 0; color: #607686; font-size: 9px; line-height: 1.55 }
.privacy-check input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--teal) }
.submit-button { width: 100%; position: relative }
.submit-button:disabled { cursor: wait; opacity: .75; transform: none }
.button-loader { display: none; width: 15px; height: 15px; border: 2px solid rgba(29,53,80,.25); border-top-color: #1d3550; border-radius: 50%; animation: spin .7s linear infinite }
.submit-button.is-loading .button-loader { display: block }
.form-status { min-height: 17px; margin: 10px 0 0; text-align: center; font-size: 9px }
.form-status[data-type="success"] { color: var(--success) }
.form-status[data-type="error"] { color: var(--danger) }
.form-status[data-type="neutral"] { color: var(--muted) }

.about-strip { padding: 48px 0; border-top: 1px solid var(--line); background: #fff }
.about-inner { display: flex; align-items: center; justify-content: center; gap: 18px }
.about-inner img { width: 46px; height: auto }
.about-inner strong, .about-inner span { display: block }
.about-inner strong { color: var(--navy); font-size: 13px }
.about-inner span { margin-top: 5px; color: var(--muted); font-size: 10px }
.site-footer { padding: 32px 0; background: #061f36; color: #a9c0cf }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px }
.footer-brand { display: flex; align-items: center; gap: 12px }
.footer-brand img { width: 116px; height: auto; filter: brightness(0) invert(1); opacity: .94 }
.footer-brand span { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.14); font-size: 9px }
.footer-inner nav { display: flex; gap: 20px; font-size: 9px; font-weight: 750 }
.footer-inner nav a:hover { color: #fff }
.footer-inner > p { margin: 0; color: #89a6b8; font-size: 8px }
.mobile-cta { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; min-height: 50px; display: none; align-items: center; justify-content: center; border-radius: 14px; background: var(--yellow); color: var(--navy); box-shadow: 0 18px 40px rgba(67,55,15,.23); font-size: 12px; font-weight: 870; transform: translateY(90px); opacity: 0; transition: transform .25s, opacity .25s }
.mobile-cta.is-visible { transform: translateY(0); opacity: 1 }
.toast { position: fixed; z-index: 150; right: 22px; bottom: 22px; max-width: 360px; padding: 12px 16px; border-radius: 12px; background: #0c584e; color: #fff; box-shadow: var(--shadow); font-size: 11px; transform: translateY(30px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s }
.toast[data-type="error"] { background: #823441 }
.toast.is-visible { transform: translateY(0); opacity: 1 }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .58s ease, transform .58s ease }
.reveal.is-visible { opacity: 1; transform: translateY(0) }
@keyframes spin { to { transform: rotate(360deg) } }

@media (max-width: 1060px) {
  .site-nav { gap: 17px }
  .hero-grid { gap: 40px }
  h1 { font-size: clamp(42px,5.4vw,62px) }
  .workflow-grid, .benefits-layout, .faq-layout, .lead-layout { gap: 45px }
  .workflow-steps { grid-template-columns: repeat(2,1fr); gap: 10px }
  .workflow-steps > i { display: none }
  .trust-grid > div { padding-inline: 16px }
}

@media (max-width: 900px) {
  .site-header { height: 70px }
  .menu-button { display: flex }
  .site-nav { position: fixed; inset: 70px 0 auto; display: grid; gap: 0; padding: 10px 20px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: 0 20px 45px rgba(9,45,76,.1); transform: translateY(-125%); opacity: 0; pointer-events: none; transition: transform .22s, opacity .22s }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto }
  .site-nav > a:not(.button) { padding: 14px 2px; border-bottom: 1px solid #edf2f5 }
  .site-nav .button { margin-top: 12px }
  .hero { min-height: auto; padding: 116px 0 72px }
  .hero-grid, .split-layout, .workflow-grid, .benefits-layout, .faq-layout, .lead-layout { grid-template-columns: 1fr }
  .hero-grid { gap: 54px }
  .hero-copy { max-width: 720px }
  .hero-visual { width: min(100%,600px); margin-inline: auto }
  .trust-grid { grid-template-columns: repeat(2,1fr); padding-block: 16px }
  .trust-grid > div { min-height: 70px; display: grid; align-content: center; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--line) }
  .trust-grid > div:nth-last-child(-n+2) { border-bottom: 0 }
  .trust-grid > div:first-child { padding-left: 20px }
  .clinical-visual { order: -1; min-height: 450px }
  .management-grid { grid-template-columns: repeat(2,1fr) }
  .workflow-copy { max-width: 620px }
  .workflow-steps { grid-template-columns: repeat(4,1fr) }
  .benefits-grid { grid-template-columns: repeat(4,1fr) }
  .benefit-card { min-height: 170px; padding: 18px }
  .benefit-card > span { margin-bottom: 22px }
  .price-card { padding: 34px }
  .faq-layout { gap: 35px }
  .lead-layout { gap: 45px }
  .lead-copy { max-width: 640px }
  .footer-inner { flex-wrap: wrap }
}

@media (max-width: 720px) {
  .container { width: min(calc(100% - 28px), var(--container)) }
  .section { padding: 78px 0 }
  h1 { font-size: clamp(39px,12vw,56px) }
  h2 { font-size: clamp(29px,8vw,40px) }
  .hero-text { font-size: 15px }
  .hero-actions { display: grid; grid-template-columns: 1fr }
  .hero-actions .button { width: 100% }
  .hero-points { display: grid; gap: 10px }
  .vet-panel { padding: 16px; border-radius: 24px }
  .pet-card { grid-template-columns: auto 1fr }
  .pet-badge { grid-column: 1 / -1; justify-self: start }
  .management-bar { grid-template-columns: repeat(2,1fr) }
  .orbit-card { width: min(86vw,390px); height: min(86vw,390px) }
  .management-grid { grid-template-columns: 1fr }
  .resource-card { min-height: auto }
  .workflow-steps { grid-template-columns: repeat(2,1fr) }
  .benefits-grid { grid-template-columns: repeat(2,1fr) }
  .price-card { display: grid; gap: 22px; padding: 28px }
  .form-grid { grid-template-columns: 1fr }
  .field-full { grid-column: auto }
  .lead-form { padding: 22px 17px }
  .about-inner { align-items: flex-start }
  .footer-inner { display: grid; justify-items: start }
  .footer-inner nav { flex-wrap: wrap }
}

@media (max-width: 520px) {
  .gvet-mark { width: 126px }
  .hpr-mark { display: none }
  .brand-divider { display: none }
  .hero { padding-top: 103px }
  .hero::before { opacity: .18 }
  .panel-head { align-items: flex-start }
  .panel-status { max-width: 105px; line-height: 1.35 }
  .clinical-grid { grid-template-columns: 1fr }
  .clinical-item { min-height: 58px }
  .trust-grid { grid-template-columns: 1fr }
  .trust-grid > div, .trust-grid > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) }
  .trust-grid > div:last-child { border-bottom: 0 }
  .clinical-visual { min-height: 350px }
  .orbit-card { width: 310px; height: 310px }
  .orbit-card::before { inset: 43px }
  .orbit-card::after { inset: 82px }
  .orbit-center { width: 112px; height: 112px }
  .orbit-center strong { font-size: 19px }
  .orbit { font-size: 8px; padding: 8px 9px }
  .orbit-one { top: 14px }
  .orbit-three { bottom: 14px }
  .orbit-two { right: -3px }
  .orbit-four { left: -3px }
  .workflow-steps, .benefits-grid { grid-template-columns: 1fr }
  .benefit-card { min-height: auto }
  .mobile-cta { display: flex }
  .toast { left: 14px; right: 14px; bottom: 76px; max-width: none }
  .site-footer { padding-bottom: 86px }
}

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

.not-found { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: linear-gradient(135deg,#f5fbfd,#edf8f6,#fff8df) }
.not-found-card { width: min(100%,520px); padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center }
.not-found-card img { width: 175px; height: auto; margin: 0 auto 25px }
.not-found-card > span { display: block; margin-bottom: 7px; color: var(--teal); font-size: 12px; font-weight: 900; letter-spacing: .14em }
.not-found-card h1 { margin-bottom: 12px; font-size: 38px }
.not-found-card p { margin-bottom: 24px; font-size: 13px }