/* Floating sticky header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:50; transition:transform .2s ease; will-change:transform; backface-visibility:hidden}
.header-hidden .site-header{transform:translateY(-120%)}

/* Anchor offset (removed to avoid extra top space under header) */
html{scroll-padding-top:0}
section[id]{scroll-margin-top:0}
.site-header .header-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 22px; background:transparent; border:1px solid transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; box-shadow:none; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1)}
.site-header .container{width:min(1160px, 94%)}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--ink-900)}
.brand-text-logo{font-size:24px; font-weight:800; background:linear-gradient(135deg, var(--brand-600), var(--brand-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.brand-logo-img{height:40px; width:auto; transition:all .3s ease}
.brand-logo-img:hover{transform:scale(1.05)}
.nav{display:flex; align-items:center; gap:16px}
.nav-list{display:flex; gap:14px; list-style:none; padding:0; margin:0}
.nav-list a{display:inline-block; padding:10px 16px; border-radius:var(--radius-lg); color:var(--ink-600); font-weight:500; transition:all .3s ease}
.nav-list a:hover{background:var(--brand-50); color:var(--brand-600); text-decoration:none; transform:translateY(-1px)}
.nav-toggle{display:none; background:none; border:0; font-size:20px}
.header-ctas{display:flex; gap:10px; align-items:center; flex-shrink:0}
.dropdown{position:relative}
.dropdown-menu{position:absolute; right:0; top:110%; background:#fff; border:1px solid rgba(42,140,130,.14); border-radius:12px; box-shadow:var(--shadow-md); padding:6px; min-width:160px; display:none}
.dropdown-menu a{display:block; padding:8px 10px; border-radius:8px; color:var(--ink-700); text-decoration:none}
.dropdown-menu a:hover{background:var(--brand-50)}
.dropdown[aria-expanded="true"] .dropdown-menu{display:block}

/* Header condensed on scroll */
.is-scrolled .site-header{top:20px}
.is-scrolled .header-inner{border-radius:var(--radius-xl); background:rgba(255,255,255,.95); border-color:rgba(15,23,42,.12); box-shadow:var(--shadow-xl); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px)}

/* Hero */
.hero{padding-top:100px; padding-bottom:20px; background:linear-gradient(135deg, var(--bg-0) 0%, rgba(240,249,255,0.6) 50%, var(--bg-1) 100%)}
.hero h1{font-size:clamp(40px, 5.5vw, 64px); background:linear-gradient(135deg, var(--ink-900), var(--brand-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text
;line-height:1;}
.hero .actions .btn{padding:16px 28px; font-size:17px; font-weight:600}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero-stack{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.hero-centered{align-items:center; text-align:center}
.hero-centered .hero-copy{max-width:780px}
.hero .hero-copy{max-width:640px}
.hero .actions{margin-top:4px}
.hero-copy p{margin:10px 0 16px}
.actions{display:flex; gap:12px; flex-wrap:wrap; padding-top: 20px;}
.trust-badges{display:flex; gap:12px; list-style:none; padding:0; margin-top:16px; color:var(--ink-500); flex-wrap:wrap}
.trust-badges li{padding:6px 12px; background:rgba(255,255,255,.7); border:1px solid rgba(15,23,42,.08); border-radius:var(--radius-md); font-size:14px; font-weight:500; backdrop-filter:blur(8px)}
.hero-centered .trust-badges{justify-content:center}
.hero-centered .actions{justify-content:center}
.hero-media{display:flex; justify-content:center}
.hero-media img{width:100%; max-width:560px; height:auto; border-radius:var(--radius-xl)}
.hero-placeholder{width:100%; max-width:560px; height:320px; background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; color:white; text-align:center; box-shadow:var(--shadow-lg)}
.placeholder-content h3{font-size:24px; font-weight:700; margin-bottom:8px}
.placeholder-content p{font-size:16px; opacity:0.9}
.hero-media .media-card{height:320px; border-radius:var(--radius-lg); background:linear-gradient(135deg, #fff, var(--brand-50)); border:1px solid rgba(42,140,130,.15); box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.device-frame{border-radius:22px; border:1px solid rgba(42,140,130,.18); background:#0b1415; box-shadow:var(--shadow-lg)}
.device-frame .device-status{height:16px; background:linear-gradient(90deg, #0b1415, #1b2a2c);}
.device-frame .device-screen{height:calc(100% - 16px); background:#0f1a1b; position:relative}
.device-frame .ui-top{height:44px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.device-frame .ui-grid{position:absolute; inset:64px 16px 16px; border-radius:12px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px)}

/* Spotlights */
.spotlights{background:linear-gradient(135deg, var(--bg-0) 0%, rgba(240,249,255,0.4) 50%, var(--bg-1) 100%); padding:70px 0}
.spotlights .section-header{text-align:center; margin-bottom:40px; position:relative}
.spotlights .section-header h2{font-size:clamp(32px, 4vw, 46px); margin-bottom:10px; color:var(--ink-900); letter-spacing:-0.02em}
.spotlights .section-header::after{content:""; display:block; height:2px; width:120px; margin:14px auto 0; border-radius:999px; background:linear-gradient(90deg, transparent, var(--brand-400), transparent); opacity:.6}
.spotlights .section-subtitle{font-size:16px; color:var(--ink-600); max-width:640px; margin:10px auto 0; line-height:1.6}
.spotlights .spotlights-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch}
.spotlight-card{--card1: var(--brand-500); --card2: var(--brand-600); background:rgba(255,255,255,.58); border:1px solid rgba(15,23,42,.10); border-radius:16px; padding:0; position:relative; overflow:hidden; box-shadow:0 8px 20px rgba(2,6,23,.06); backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.spotlight-card::before{content:""; display:none}
.spotlight-card::after{content:""; display:none}
.spotlight-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.10)}

/* Card Icons */
.spotlight-card .card-icon{width:64px; height:64px; margin:22px auto 8px; background:rgba(255,255,255,.38); border:1px solid rgba(15,23,42,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; box-shadow:0 6px 14px rgba(2,6,23,.08); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px)}
.spotlight-card .card-icon::after{content:""; display:none}
.spotlight-card:hover .card-icon{transform:translateY(-1px)}
.spotlight-card .card-icon svg{width:28px; height:28px}

/* Card Content */
.spotlight-card .card-content{padding:16px 20px 14px; text-align:center; border-top:1px solid rgba(15,23,42,.06)}
.spotlight-card h3{font-size:22px; font-weight:800; margin-bottom:6px; color:var(--ink-900); letter-spacing:-0.01em}
.spotlight-card p{color:var(--ink-700); margin-bottom:12px; line-height:1.55; font-size:15px}

/* Feature Highlights */
.feature-highlights{list-style:none; padding:0; margin:8px 0 0; text-align:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:none}
.feature-highlights li{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12.5px; color:var(--ink-700); font-weight:600; line-height:1; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.5); backdrop-filter:saturate(140%) blur(4px); -webkit-backdrop-filter:saturate(140%) blur(4px); border-radius:999px}

/* Feature Dots */
.feature-dot{width:4px; height:4px; border-radius:50%; background:var(--brand-500); flex-shrink:0}

/* Card Actions */
.spotlight-card .actions{padding:14px 20px 16px; display:flex; gap:10px; justify-content:center; border-top:1px dashed rgba(15,23,42,.08)}
.spotlight-card .actions .btn{transform:translateZ(0); transition:transform .2s ease}
.spotlight-card:hover .actions .btn{transform:translateY(-2px)}
.spotlight-card .actions .btn{padding:14px 24px; font-weight:600; border-radius:12px}

/* Card Variants */
.spotlight-card.is-clinics{--card1: var(--brand-500); --card2: var(--brand-600)}
.spotlight-card.is-owners{--card1: var(--accent-500); --card2: var(--accent-600)}

/* Digital Pet Card - Modern Design */
.digital-pet-card{position:relative; background:linear-gradient(135deg, rgba(2,132,199,0.10) 0%, rgba(139,92,246,0.08) 40%, rgba(255,255,255,0.9) 100%); padding:90px 0; overflow:hidden}
.digital-pet-card::before{content:""; position:absolute; width:680px; height:680px; left:-220px; top:-240px; background:radial-gradient(circle at center, rgba(2,132,199,.18), rgba(2,132,199,0) 60%); filter:blur(6px)}
.digital-pet-card::after{content:""; position:absolute; width:720px; height:720px; right:-260px; bottom:-300px; background:radial-gradient(circle at center, rgba(139,92,246,.16), rgba(139,92,246,0) 60%); filter:blur(8px)}
.digital-pet-card .section-subtitle{font-size:18px; color:var(--ink-800); margin:12px 0 24px; line-height:1.7; position:relative; padding-left:14px}
.digital-pet-card .section-subtitle::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:999px; background:linear-gradient(180deg, var(--brand-500), var(--purple-500))}
.digital-card-media{display:flex; justify-content:center; align-items:center; position:relative; z-index:1}
.pet-card-mockup{position:relative; perspective:1200px}
.pet-card-modern{width:380px; height:250px; background:linear-gradient(135deg, #101827 0%, #0f3460 60%, #1b4d8a 100%); border-radius:22px; box-shadow:0 28px 60px rgba(2,6,23,.28), 0 12px 24px rgba(2,6,23,.18); padding:0; transform:rotateY(-6deg) rotateX(6deg); transition:transform .45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .45s; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden}
.pet-card-modern:hover{transform:rotateY(0deg) rotateX(0deg) translateY(-10px); box-shadow:0 40px 90px rgba(2,6,23,.32), 0 16px 32px rgba(2,6,23,.20)}

/* Card Background Effects */
.card-background{position:absolute; inset:0; border-radius:20px; overflow:hidden}
.card-pattern{position:absolute; inset:0; background:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 50%),
  radial-gradient(circle at 80% 10%, rgba(255,255,255,.06), transparent 50%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 16px);
 opacity:0.6}
.card-glow{position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(14,165,233,.16) 0%, transparent 70%)}

@keyframes glow {
  0% { transform:rotate(0deg) scale(0.8); opacity:0.3 }
  100% { transform:rotate(180deg) scale(1.2); opacity:0.1 }
}

/* Card Layout */
.card-top{display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; position:relative; z-index:2}
.card-brand{display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.9)}
.brand-icon-container{width:24px; height:24px; display:flex; align-items:center; justify-content:center}
.brand-svg-icon{width:100%; height:100%; color:rgba(255,255,255,.9)}
.brand-text{font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:1px}
.qr-code-modern{width:40px; height:40px; background:rgba(255,255,255,.95); border-radius:8px; display:flex; align-items:center; justify-content:center}
.qr-pattern{width:32px; height:32px; background:repeating-linear-gradient(90deg, #1a1a2e 0 2px, transparent 2px 4px), repeating-linear-gradient(0deg, #1a1a2e 0 2px, transparent 2px 4px); border-radius:4px}

.card-middle{display:flex; align-items:center; gap:20px; padding:0 24px 16px; position:relative; z-index:2}
.pet-photo{width:60px; height:60px; border-radius:50%; overflow:hidden; box-shadow:0 4px 12px rgba(42,140,130,.3)}
.photo-container{width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg, var(--brand-400), var(--brand-600)); display:flex; align-items:center; justify-content:center}
.pet-image{width:100%; height:100%; object-fit:cover; border-radius:50%}
.pet-details{flex:1}
.pet-name{margin:0; font-size:20px; font-weight:700; color:white; line-height:1.2}
.pet-breed{color:rgba(255,255,255,.8); font-size:13px; margin:4px 0 2px}
.pet-age{color:rgba(255,255,255,.6); font-size:12px}

.card-bottom{padding:0 24px 20px; position:relative; z-index:2}
.health-indicators{display:flex; gap:16px; margin-bottom:16px}
.indicator{display:flex; align-items:center; gap:6px}
.indicator-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:all .3s ease}
.indicator.active .indicator-dot{background:var(--brand-400); box-shadow:0 0 8px var(--brand-400)}
.indicator span{color:rgba(255,255,255,.7); font-size:10px; font-weight:500}
.indicator.active span{color:rgba(255,255,255,.9)}

.card-footer{display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(255,255,255,.1); padding-top:12px}
.emergency-info{flex:1}
.emergency-label{color:rgba(255,255,255,.5); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px}
.emergency-contact{color:rgba(255,255,255,.8); font-size:11px; font-weight:600}
.card-id{color:rgba(255,255,255,.4); font-size:9px; font-family:monospace; letter-spacing:0.5px}

.card-reflection{position:absolute; top:100%; left:0; right:0; height:50%; background:linear-gradient(to bottom, rgba(26,26,46,.1) 0%, transparent 100%); border-radius:0 0 20px 20px; transform:scaleY(-1); opacity:0.3; filter:blur(1px)}

/* Owners trust */
.owners-trust .owners-trust-media .media-card.small{height:240px}
.owners-trust .container{align-items:center}
.owners-trust .media-card.small{background:linear-gradient(135deg, #fff, var(--brand-50)); border:1px solid rgba(42,140,130,.14)}

/* Key Features */
.key-features{background:linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%)}
.key-features h2{text-align:center; margin-bottom:16px}
.key-features .section-subtitle{font-size:18px; color:var(--ink-600); margin:12px 0 40px; text-align:center; max-width:600px; margin-left:auto; margin-right:auto}
.key-features .features-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.key-features .feature-item{background:rgba(255,255,255,.95); border:1px solid rgba(15,23,42,.06); border-radius:var(--radius-xl); padding:32px 24px; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); text-align:center; position:relative}
.key-features .feature-item:hover{transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-xl); border-color:var(--brand-500)}
.key-features .feature-item.featured{border-color:var(--brand-500); box-shadow:var(--shadow-lg); background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, var(--brand-50) 100%)}
.key-features .feature-item.featured::before{content:'Featured'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:white; padding:4px 12px; border-radius:var(--radius-md); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px}
.key-features .feature-icon{width:64px; height:64px; margin:0 auto 20px; background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); border-radius:16px; display:flex; align-items:center; justify-content:center; color:white; transition:all .3s ease}
.key-features .feature-item:hover .feature-icon{transform:scale(1.1) rotate(5deg)}
.key-features .feature-icon svg{width:32px; height:32px}
.key-features .feature-item h3{font-size:20px; margin-bottom:12px; color:var(--ink-900); font-weight:700}
.key-features .feature-item p{color:var(--ink-600); line-height:1.6; margin:0}

/* (Removed overview/scope styles) */

/* About */
.about .about-media .media-card.small{height:220px; border-radius:var(--radius-md); background:linear-gradient(135deg, #fff, var(--brand-50)); border:1px solid rgba(42,140,130,.15); box-shadow:var(--shadow-sm)}

/* Testimonials */
.testimonials{background:linear-gradient(135deg, var(--bg-0) 0%, rgba(240,249,255,0.3) 100%); padding:80px 0}
.testimonials-header{text-align:center; margin-bottom:60px}
.testimonials-header h2{font-size:clamp(32px, 4vw, 48px); margin-bottom:16px; background:linear-gradient(135deg, var(--ink-900), var(--brand-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.testimonials-header .section-subtitle{font-size:18px; color:var(--ink-600); max-width:600px; margin:0 auto; line-height:1.6}

.testimonials-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; align-items:stretch; grid-auto-rows:1fr}
.testimonial-card{background:rgba(255,255,255,.98); border:1px solid rgba(15,23,42,.06); border-radius:20px; padding:32px; box-shadow:0 10px 30px rgba(42,140,130,.08), 0 2px 8px rgba(42,140,130,.04); position:relative; backdrop-filter:blur(16px); display:flex; flex-direction:column; height:100%}

/* Quote Icon */
.quote-icon{width:48px; height:48px; color:var(--brand-500); margin-bottom:24px; opacity:0.7}
.quote-icon svg{width:100%; height:100%}

/* Quote Content */
.testimonial-card blockquote{font-size:16px; line-height:1.7; color:var(--ink-700); margin:0 0 32px; font-style:italic; position:relative}

/* Author Section */
.testimonial-author{display:flex; align-items:center; gap:16px; margin-top:auto}
.author-avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0}
.author-info{flex:1}
.author-name{font-weight:700; color:var(--ink-900); font-size:16px; margin-bottom:4px}
.author-details{font-size:13px; color:var(--ink-500)}
.rating{flex-shrink:0}
.stars{color:#fbbf24; font-size:14px; letter-spacing:1px}

/* Integrations */
.integrations .logo-row{display:flex; gap:12px; flex-wrap:wrap}
.integrations .logo-chip{padding:10px 14px; border-radius:999px; border:1px solid rgba(42,140,130,.16); background:#fff; color:var(--ink-600); box-shadow:var(--shadow-sm)}
/* Stats */
.section.stats{padding-top:24px; padding-bottom:14px; background:linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%); margin-top:-36px; position:relative; z-index:3}
.stats .stats-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center}
.stat{background:rgba(255,255,255,.95); border:1px solid rgba(15,23,42,.06); border-radius:var(--radius-xl); padding:28px 20px; position:relative; backdrop-filter:blur(16px); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center}
.stat::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(14,165,233,.08)}
.stat:hover{transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--brand-400)}
.stat-value{font-family:"Poppins", system-ui, sans-serif; font-weight:800; font-size:clamp(30px, 3.4vw, 40px); letter-spacing:-0.02em; color:var(--ink-900); background:linear-gradient(135deg, var(--brand-600), var(--purple-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stat-value span{font-weight:800; color:inherit}
.stat-label{color:var(--ink-600); margin-top:10px; font-weight:600; font-size:15px}
.stats .stat:nth-child(1) .stat-value{background:linear-gradient(135deg, var(--brand-600), var(--brand-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stats .stat:nth-child(2) .stat-value{background:linear-gradient(135deg, var(--purple-600), var(--purple-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stats .stat:nth-child(3) .stat-value{background:linear-gradient(135deg, #0ea5e9, #22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stats .stat:nth-child(4) .stat-value{background:linear-gradient(135deg, #16a34a, #22c55e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.stats .stats-row .stat + .stat::before{display:none}

/* Solutions */
.solutions{background:var(--bg-0)}
.solutions .solutions-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:stretch}
.solutions .solution-card{background:linear-gradient(135deg, #fff 0%, var(--brand-50) 100%); border:1px solid rgba(15,23,42,.06); border-radius:var(--radius-xl); padding:28px; display:flex; flex-direction:column; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:var(--shadow-md)}
.solutions .solution-card h3{font-size:22px; color:var(--ink-900); font-weight:700; margin-bottom:12px}
.solutions .solution-card p{color:var(--ink-600); margin:0 0 20px; line-height:1.6; flex-grow:1}
.solutions .solution-card .btn{margin-top:auto; align-self:flex-start}
.solutions .solution-card:hover{transform:translateY(-8px) scale(1.02); border-color:var(--brand-500); box-shadow:var(--shadow-xl)}

/* FAQ */
.faq details{background:var(--bg-1); border:1px solid rgba(42,140,130,.12); border-radius:var(--radius-md); padding:14px 16px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:600}

/* Security */
.security .list-check{margin-top:8px}
.list-check{list-style:none; padding:0}
.list-check li{position:relative; padding-left:26px; margin:8px 0}
.list-check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand-600); font-weight:700}
.digital-pet-card .list-check{display:grid; gap:10px; grid-template-columns:1fr 1fr; max-width:640px}
.digital-pet-card .list-check li{margin:0; padding-left:18px; color:var(--ink-800)}
.digital-pet-card .list-check li::before{content:""; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--brand-500), var(--purple-500))}
@media (max-width: 720px){
  .digital-pet-card .list-check{grid-template-columns:1fr}
}

/* Pricing */
.pricing{background:linear-gradient(135deg, var(--bg-0) 0%, rgba(139,92,246,0.05) 100%); padding:50px 0; position:relative}
.pricing h2{text-align:center; font-size:clamp(32px, 4vw, 48px); margin-bottom:16px; background:linear-gradient(135deg, var(--ink-900), var(--brand-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; position:relative; z-index:10}
.pricing-subtitle{text-align:center; font-size:18px; color:var(--ink-600); margin:0 auto 60px; max-width:600px; line-height:1.6; position:relative; z-index:10}
.pricing .pricing-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; margin-bottom:60px; align-items:stretch; position:relative; z-index:1; grid-auto-rows:1fr}
.price-card{background:rgba(255,255,255,.98); border:1px solid rgba(15,23,42,.06); border-radius:24px; padding:0; box-shadow:0 10px 30px rgba(42,140,130,.08), 0 2px 8px rgba(42,140,130,.04); position:relative; overflow:hidden; height:100%; z-index:2; display:flex; flex-direction:column}

@media (min-width: 981px){
  .price-card{min-height:640px}
}

/* Plan Badges */
.plan-badge{background:linear-gradient(135deg, var(--ink-700), var(--ink-800)); color:white; padding:8px 20px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; text-align:center}
.plan-badge.popular{background:linear-gradient(135deg, var(--brand-500), var(--brand-600))}

/* Card Content */
.price-card h3{font-size:28px; font-weight:800; margin:24px 24px 12px; color:var(--ink-900)}
.price-card .price{margin:0 24px 16px; color:var(--ink-900)}
.price-card .price span{font-size:42px; font-weight:800; background:linear-gradient(135deg, var(--brand-600), var(--purple-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.plan-description{font-size:16px; color:var(--ink-600); margin:0 24px 24px; line-height:1.5}

/* Feature Lists */
.price-card ul{padding:0 24px; margin:0 0 24px; list-style:none; flex-grow:1}
.price-card ul li{position:relative; padding:8px 0 8px 24px; margin:0; font-size:14px; line-height:1.5; color:var(--ink-700); border-bottom:1px solid rgba(15,23,42,.04)}
.price-card ul li:last-child{border-bottom:none}
.price-card ul li::before{content:'✓'; position:absolute; left:0; top:8px; color:var(--brand-600); font-weight:700; font-size:12px}
.price-card ul li strong{color:var(--ink-900); font-weight:700}

/* Card Actions */
.price-card .btn{margin:0 24px 32px; width:calc(100% - 48px); text-align:center; padding:16px; font-weight:700; border-radius:12px; margin-top:auto}

/* Featured Card */
.price-card.featured{border-color:var(--brand-500); box-shadow:0 20px 50px rgba(42,140,130,.15), 0 4px 12px rgba(42,140,130,.08)}

/* Pricing Footer */
.pricing-footer{text-align:center; padding-top:40px; border-top:1px solid rgba(15,23,42,.08); position:relative; z-index:10}
.pricing-footer p{color:var(--ink-600); margin:8px 0; font-size:16px; position:relative; z-index:10}
.pricing-note{font-size:14px !important; position:relative; z-index:10}
.pricing-link{color:var(--brand-600); text-decoration:none; font-weight:600}
.pricing-link:hover{color:var(--brand-700); text-decoration:underline}

/* CTA */
.cta{background:linear-gradient(135deg, var(--brand-500), var(--purple-600)); color:white}
.cta .container{text-align:center}
.cta h2{color:white}
.cta p{margin:8px 0 20px; color:rgba(255,255,255,.9)}
.cta .btn-primary{background:rgba(255,255,255,.2); color:white; border:1px solid rgba(255,255,255,.3)}
.cta .btn-primary:hover{background:rgba(255,255,255,.3); transform:translateY(-2px)}

/* Footer */
.footer{padding:40px 0 22px; border-top:1px solid rgba(42,140,130,.12); background:linear-gradient(180deg, #fff 0%, var(--bg-0) 100%)}
.footer-content{display:flex; flex-direction:column; gap:24px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; align-items:start}
.footer a{color:var(--ink-600); text-decoration:none}
.footer a:hover{color:var(--brand-600)}
.footer-brand .brand{gap:10px}
.footer-tagline{color:var(--ink-600); margin:10px 0 14px; max-width:420px}
.social-links{display:flex; gap:10px}
.social{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid rgba(42,140,130,.14); color:var(--ink-600); background:#fff}
.social:hover{color:#0ea5e9; border-color:#0ea5e9; transform:translateY(-1px)}
.social svg{width:18px; height:18px}
.footer-col h4{margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-800)}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(42,140,130,.12); padding-top:16px; margin-top:8px}

@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; gap:10px; align-items:flex-start}
}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:200}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(10,18,20,.55); backdrop-filter:blur(3px)}
.modal-dialog{position:relative; margin:6vh auto; width:min(680px, 92%); background:#fff; border:1px solid rgba(42,140,130,.14); border-radius:18px; box-shadow:var(--shadow-lg); padding:18px}
.modal-close{position:absolute; right:10px; top:10px; border:0; background:#fff; border-radius:999px; width:32px; height:32px; box-shadow:var(--shadow-sm)}
.modal-header p{color:var(--ink-600); margin-top:6px}
.modal-form{margin-top:10px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px}
label{display:block; font-weight:600; color:var(--ink-700); font-size:14px}
input, textarea{width:100%; margin-top:6px; padding:10px 12px; border:1px solid rgba(42,140,130,.24); border-radius:10px}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}

/* Responsive */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .spotlights .spotlights-grid{grid-template-columns:1fr; gap:30px}
  .spotlights .section-header{margin-bottom:40px}
  .spotlight-card .card-content{padding:0 24px 20px}
  .spotlight-card .actions{padding:20px 24px 28px}
  .key-features .features-grid{grid-template-columns:1fr 1fr}
  .key-features .feature-item{padding:24px 18px}
  .solutions .solutions-grid{grid-template-columns:1fr 1fr}
  .stats .stats-row{grid-template-columns:1fr 1fr}
  /* (overview/scope removed) */
  .stats .stats-row .stat + .stat::before{display:none}
  .services .cards{grid-template-columns:1fr 1fr}
  .pricing .pricing-grid{grid-template-columns:1fr; gap:30px}
  .pricing{padding:80px 0}
  .pricing-subtitle{margin-bottom:40px}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .testimonials{padding:60px 0}
  .testimonials-header{margin-bottom:40px}
  .pet-card-modern{width:320px; height:200px}
  .pet-name{font-size:18px}
  .pet-breed{font-size:12px}
  .pet-age{font-size:11px}
}
@media (max-width: 540px){
  .stats .stats-row{grid-template-columns:repeat(4, 1fr); gap:8px}
  .section.stats{padding-top:20px; padding-bottom:48px}
  .stat{padding:16px 8px; font-size:14px}
  .stat-value{font-size:clamp(20px, 5vw, 28px)}
  .stat-label{font-size:12px; margin-top:6px}
  .trust-badges{display:none}
  
  /* Mobile button centering fix */
  .btn{display:flex; align-items:center; justify-content:center; text-align:center}
  
  /* Spotlights mobile improvements */
  .spotlights{padding:0 0 60px 0}
  .spotlights .section-header{display:none}
  .spotlights .spotlights-grid{gap:20px}
  .spotlight-card{border-radius:12px; margin:0 10px}
  .spotlight-card .card-content{padding:20px 16px 16px}
  .spotlight-card h3{font-size:20px; margin-bottom:8px}
  .spotlight-card p{font-size:14px; line-height:1.5; margin-bottom:16px}
  .spotlight-card .actions{padding:16px; gap:8px}
  .spotlight-card .actions .btn{padding:12px 20px; font-size:14px; display:flex; align-items:center; justify-content:center; text-align:center}
  .feature-highlights{gap:6px; margin-top:12px}
  .feature-highlights li{padding:4px 8px; font-size:11px; border-radius:6px}
  
  /* Digital Pet Card mobile improvements */
  .digital-pet-card{padding:40px 0; background:linear-gradient(135deg, rgba(2,132,199,0.08) 0%, rgba(139,92,246,0.06) 40%, rgba(255,255,255,0.95) 100%)}
  .digital-pet-card::before{width:400px; height:400px; left:-150px; top:-120px}
  .digital-pet-card::after{width:450px; height:450px; right:-180px; bottom:-180px}
  .digital-pet-card h2{font-size:24px; text-align:center; margin-bottom:16px; color:var(--ink-900)}
  .digital-pet-card .section-subtitle{font-size:15px; text-align:center; padding:0 16px; margin:0 auto 28px; max-width:none; line-height:1.5}
  .digital-pet-card .section-subtitle::before{display:none}
  .digital-pet-card .list-check{grid-template-columns:1fr; gap:10px; margin:24px 0; padding:0 16px}
  .digital-pet-card .list-check li{font-size:14px; padding-left:22px; line-height:1.4; color:var(--ink-800)}
  .digital-pet-card .list-check li::before{width:6px; height:6px; top:9px}
  .digital-pet-card .actions{text-align:center; margin-top:28px; padding:0 16px}
  .digital-pet-card .actions .btn{
    width:100%; 
    max-width:300px; 
    padding:16px 24px; 
    font-size:16px; 
    font-weight:600; 
    display:flex !important; 
    align-items:center !important; 
    justify-content:center !important; 
    text-align:center !important;
    margin:0 auto;
  }
  .digital-card-media{margin-bottom:24px; order:1; padding:0 20px}
  .digital-pet-card .container{display:flex; flex-direction:column}
  .digital-pet-card .container > div:first-child{order:2}
  
  /* Enhanced mobile card design */
  .pet-card-modern{
    width:300px; 
    height:190px; 
    transform:none; 
    margin:0 auto;
    background:linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 100%);
    border-radius:16px;
    box-shadow:0 20px 40px rgba(2,6,23,.25), 0 8px 16px rgba(2,6,23,.15);
    border:1px solid rgba(255,255,255,.15);
  }
  .pet-card-modern:hover{transform:translateY(-6px); box-shadow:0 25px 50px rgba(2,6,23,.3), 0 10px 20px rgba(2,6,23,.2)}
  
  /* Mobile card layout adjustments */
  .card-top{padding:16px 20px 12px; gap:12px}
  .card-brand{gap:6px}
  .brand-text{font-size:12px; letter-spacing:0.5px}
  .brand-icon-container{width:20px; height:20px}
  .qr-code-modern{width:32px; height:32px; border-radius:6px}
  
  .card-middle{padding:0 20px 12px; gap:16px}
  .pet-photo{width:50px; height:50px; box-shadow:0 3px 8px rgba(42,140,130,.4)}
  .pet-name{font-size:17px; margin-bottom:3px}
  .pet-breed{font-size:12px; margin:2px 0}
  .pet-age{font-size:11px; opacity:0.8}
  
  .card-bottom{padding:0 20px 16px}
  .health-indicators{gap:12px; margin-bottom:12px; flex-wrap:wrap}
  .indicator{gap:4px}
  .indicator-dot{width:6px; height:6px}
  .indicator span{font-size:9px; font-weight:600}
  
  .card-footer{padding-top:10px; border-top:1px solid rgba(255,255,255,.08)}
  .emergency-label{font-size:8px; margin-bottom:1px}
  .emergency-contact{font-size:10px}
  .card-id{color:rgba(255,255,255,.5); font-size:9px; font-weight:500}
  
  /* Key Features mobile improvements */
  .key-features{padding:50px 0}
  .key-features h2{font-size:26px; margin-bottom:12px}
  .key-features .section-subtitle{font-size:15px; margin:8px 0 32px; padding:0 10px}
  .key-features .features-grid{grid-template-columns:1fr 1fr 1fr; gap:12px; margin:0 8px}
  .key-features .feature-item{padding:16px 12px; border-radius:10px}
  .key-features .feature-item.featured::before{font-size:9px; padding:2px 6px; top:-7px}
  .key-features .feature-icon{width:40px; height:40px; margin:0 auto 10px; border-radius:10px}
  .key-features .feature-icon svg{width:20px; height:20px}
  .key-features .feature-item h3{font-size:14px; margin-bottom:6px; line-height:1.2}
  .key-features .feature-item p{font-size:11px; line-height:1.3}
  .key-features .feature-item:hover{transform:translateY(-2px) scale(1.01)}
  
  /* Pricing mobile slider */
  .pricing{padding:50px 0}
  .pricing h2{font-size:28px; margin-bottom:12px}
  .pricing-subtitle{font-size:16px; margin:0 auto 40px; padding:0 16px}
  .pricing .pricing-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:20px;
    padding:0 16px 20px;
    margin-bottom:40px;
    grid-template-columns:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .pricing .pricing-grid::-webkit-scrollbar{display:none}
  .price-card{
    min-width:280px;
    max-width:280px;
    height:650px;
    flex-shrink:0;
    scroll-snap-align:center;
    margin:0;
    display:flex;
    flex-direction:column;
  }
  .plan-badge{font-size:11px; padding:6px 16px}
  .price-card h3{font-size:20px; margin:12px 16px 6px; flex-shrink:0}
  .price-card .price{font-size:26px; margin:0 16px 8px; flex-shrink:0}
  .price-card .plan-description{font-size:13px; margin:0 16px 12px; line-height:1.3; flex-shrink:0; height:32px; overflow:hidden}
  .price-card ul{font-size:12px; padding:0 16px; margin-bottom:16px; flex-grow:1; overflow:hidden}
  .price-card ul li{padding:3px 0 3px 16px; font-size:12px; line-height:1.3}
  .price-card .btn{margin:0 16px 20px; padding:14px 20px; font-size:15px; width:calc(100% - 32px); display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0}
  
  /* Mobile pricing scroll indicator */
  .pricing .container::after{
    content:"← Swipe to see all plans →";
    display:block;
    text-align:center;
    font-size:13px;
    color:var(--ink-500);
    margin-top:16px;
    font-weight:500;
    opacity:0.8;
  }
  
  /* Enhanced mobile price card styling */
  .price-card.featured{
    transform:scale(1.02);
    border-color:var(--brand-500);
    box-shadow:0 12px 32px rgba(42,140,130,.12), 0 4px 12px rgba(42,140,130,.08);
  }
  
  /* Mobile pricing footer improvements */
  .pricing-footer{
    margin:32px 16px 0;
    padding:24px 20px;
    background:rgba(255,255,255,0.95);
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    box-shadow:0 4px 12px rgba(2,6,23,.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .pricing-footer p{
    font-size:14px;
    line-height:1.5;
    margin:8px 0;
    padding:0;
  }
  .pricing-footer .pricing-note{
    font-size:13px !important;
    color:var(--ink-500);
    margin-top:16px;
  }
  .pricing-link{
    display:inline-block;
    padding:10px 20px;
    background:linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color:white;
    border-radius:24px;
    margin-top:12px;
    font-weight:600;
    text-decoration:none;
    transition:all 0.3s ease;
    box-shadow:0 2px 8px rgba(42,140,130,.2);
  }
  .pricing-link:hover{
    background:linear-gradient(135deg, var(--brand-600), var(--brand-700));
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(42,140,130,.3);
    color:white;
  }
  
  /* Mobile footer improvements */
  .footer{padding:40px 0 20px; background:linear-gradient(180deg, #f8fafc 0%, var(--bg-0) 100%)}
  .footer-content{gap:32px}
  .footer-grid{grid-template-columns:1fr; gap:28px; text-align:center}
  .footer-brand{order:1}
  .footer-brand .brand{justify-content:center; margin-bottom:12px}
  .footer-tagline{font-size:15px; line-height:1.5; margin:12px auto 20px; max-width:280px; color:var(--ink-700)}
  .social-links{justify-content:center; gap:12px; margin-bottom:8px}
  .social{width:44px; height:44px; border:2px solid rgba(42,140,130,.12); background:rgba(255,255,255,.8); transition:all 0.3s ease}
  .social:hover{background:var(--brand-50); border-color:var(--brand-400); transform:translateY(-2px)}
  .social svg{width:20px; height:20px}
  
  .footer-col{order:2; margin-bottom:24px}
  .footer-col h4{font-size:16px; margin-bottom:16px; color:var(--ink-900); font-weight:700; text-transform:none; letter-spacing:0}
  .footer-links{gap:12px; max-width:200px; margin:0 auto}
  .footer-links a{padding:8px 12px; font-size:15px; border-radius:8px; transition:all 0.3s ease; display:block}
  .footer-links a:hover{background:var(--brand-50); color:var(--brand-700); transform:translateX(4px)}
  
  .footer-bottom{
    order:3;
    flex-direction:column;
    gap:16px;
    text-align:center;
    padding-top:24px;
    margin-top:16px;
    border-top:2px solid rgba(42,140,130,.08);
  }
  .footer-bottom p{font-size:14px; color:var(--ink-600); margin:0}
  .footer-bottom nav{display:flex; gap:20px; justify-content:center}
  .footer-bottom nav a{font-size:14px; padding:6px 12px; border-radius:6px; color:var(--ink-500); transition:all 0.3s ease}
  .footer-bottom nav a:hover{background:var(--brand-50); color:var(--brand-600)}
  
  /* Mobile modal improvements */
  .modal{background:rgba(0,0,0,0.6)}
  .modal-backdrop{background:rgba(10,18,20,.7); backdrop-filter:blur(4px)}
  .modal-dialog{
    margin:2vh auto;
    width:95vw;
    max-width:400px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:20px;
    padding:20px;
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
  }
  .modal-close{
    right:12px;
    top:12px;
    width:36px;
    height:36px;
    font-size:18px;
    background:rgba(255,255,255,0.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  .modal-header h3{font-size:20px; margin-bottom:8px; text-align:center}
  .modal-header p{font-size:14px; text-align:center; color:var(--ink-600); margin-bottom:20px}
  
  /* Registration modal mobile */
  .registration-modal{max-width:95vw}
  .registration-options{grid-template-columns:1fr; gap:16px; margin-top:20px}
  .registration-option{
    padding:20px 16px;
    border-radius:16px;
    text-align:center;
    border:2px solid rgba(15,23,42,.08);
    transition:all 0.3s ease;
    background:rgba(255,255,255,0.95);
  }
  .registration-option:hover{
    border-color:var(--brand-400);
    background:var(--brand-50);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(42,140,130,.12);
  }
  .option-icon{
    width:48px;
    height:48px;
    margin:0 auto 12px;
    background:linear-gradient(135deg, var(--brand-500), var(--brand-600));
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
  }
  .option-icon svg{width:24px; height:24px}
  .option-content h4{font-size:18px; margin-bottom:8px; color:var(--ink-900)}
  .option-content p{font-size:13px; line-height:1.4; color:var(--ink-600); margin-bottom:12px}
  .option-features{list-style:none; padding:0; margin:12px 0}
  .option-features li{
    font-size:12px;
    color:var(--ink-600);
    padding:4px 0;
    position:relative;
    padding-left:16px;
  }
  .option-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--brand-500);
    font-weight:600;
  }
  .option-btn{
    width:100%;
    margin-top:16px;
    padding:12px 20px;
    font-size:14px;
    border-radius:10px;
    font-weight:600;
  }
  
  /* Form modal mobile */
  .modal-form{margin-top:16px}
  .form-row{grid-template-columns:1fr; gap:12px; margin-bottom:12px}
  .form-row input, .form-row textarea{padding:12px 16px; border-radius:12px; font-size:14px}
  .form-actions{flex-direction:column; gap:12px; margin-top:20px}
  .form-actions .btn{width:100%; padding:14px 20px; font-size:15px}
  
  /* Mobile testimonials auto-sliding carousel */
  .testimonials{padding:50px 0; overflow:hidden}
  .testimonials-header{margin-bottom:32px; padding:0 16px}
  .testimonials-header h2{font-size:26px; margin-bottom:12px}
  .testimonials-header .section-subtitle{font-size:15px; padding:0 10px}
  
  .testimonials-grid{
    display:flex;
    gap:20px;
    animation:testimonial-slide 18s linear infinite;
  }
  
  /* Hide cloned cards by default (desktop) */
  .testimonial-card.cloned{
    display:none;
  }
  
  .testimonial-card{
    min-width:280px;
    max-width:280px;
    height:380px;
    flex-shrink:0;
    padding:24px 20px;
    border-radius:16px;
    margin:0 10px;
    box-shadow:0 8px 24px rgba(2,6,23,.1);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  
  .testimonial-card .quote-icon{width:36px; height:36px; margin-bottom:16px; flex-shrink:0}
  .testimonial-card blockquote{font-size:13px; line-height:1.4; margin:0 0 16px; color:var(--ink-700); flex-grow:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical}
  .testimonial-author{gap:12px; margin-top:16px; flex-shrink:0}
  .author-avatar{width:40px; height:40px; font-size:14px; flex-shrink:0}
  .author-name{font-size:14px; font-weight:600; margin-bottom:2px}
  .author-details{font-size:12px; color:var(--ink-500)}
  .rating{margin-left:auto}
  .rating .stars{font-size:14px; color:#fbbf24}
  
  @keyframes testimonial-slide{
    0%{transform:translateX(0)}
    100%{transform:translateX(calc(-300px * 3 - 60px))}
  }
  
  /* Show cloned cards on mobile */
  .testimonial-card.cloned{
    display:flex;
  }
  
  /* Pause animation on hover */
  .testimonials-grid:hover{animation-play-state:paused}
}

/* Desktop testimonials - disable animation and clones */
@media (min-width: 541px){
  .testimonials-grid{
    animation:none !important;
  }
  .testimonial-card.cloned{
    display:none !important;
  }
}

@media (max-width: 720px){
  .nav-toggle{display:inline-block}
  .nav-list{display:none}
  .nav[aria-expanded="true"] .nav-list{display:flex; position:absolute; top:70px; right:22px; flex-direction:column; background:#fff; padding:14px; border-radius:14px; box-shadow:var(--shadow-md); border:1px solid rgba(42,140,130,.12); width:92vw; max-width:420px}
  .nav[aria-expanded="true"] .nav-list a{padding:12px 14px}
  .services .cards{grid-template-columns:1fr}
  .key-features .features-grid{grid-template-columns:1fr 1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .testimonial-card{padding:24px}
  .pricing{padding:60px 0}
  .price-card ul li{font-size:13px; padding:6px 0 6px 20px}
  .spotlight-card .actions{flex-direction:column}
  .spotlight-card .card-icon{width:64px; height:64px; margin:24px auto 20px}
  .spotlight-card .card-icon svg{width:32px; height:32px}
  .hero{padding-top:150px; padding-bottom:40px; min-height:520px}
  .hero .container{text-align:center}
  .hero .hero-copy{margin:0 auto; max-width:560px}
  .hero-copy p{font-size:16px}
  .hero .actions{flex-direction:column}
  .hero .actions .btn{width:100%}
  .hero-media{margin-top:10px; display:none}
  .hero-media img{max-width:460px; margin:0 auto}
  .trust-badges{justify-content:center; gap:8px}
  .trust-badges li{font-size:13px; padding:6px 10px}
  /* Mobile hero background image with bottom white gradient fade */
  .hero{position:relative; overflow:hidden; background:#ffffff}
  .hero::before{content:""; position:absolute; inset:0; background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.80) 30%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.20) 85%),
    url('../assets/images/hero-background.png') center/cover no-repeat; opacity:1; z-index:0}
  .hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:50%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 70%); z-index:0}
  .hero .container{position:relative; z-index:1}
  .hero .actions{gap:10px}
  .hero .actions .btn{flex:1 1 auto}
  .hero .trust-badges{gap:8px}
  .form-row{grid-template-columns:1fr}
  .header-inner{justify-content:flex-start}
  .header-ctas{margin-left:auto}
  .pet-card-modern{width:300px; height:180px; transform:none}
  .pet-card-modern:hover{transform:translateY(-6px)}
  .pet-photo{width:50px; height:50px}
  .pet-emoji{font-size:24px}
  .pet-name{font-size:16px}
  .pet-breed{font-size:11px}
  .pet-age{font-size:10px}
  .qr-code-modern{width:32px; height:32px}
  .qr-pattern{width:24px; height:24px}
  .btn{padding:14px 18px; font-size:16px}
  .spotlight-card{border-radius:18px}
  .key-features .feature-item{padding:20px 16px}
  .price-card h3{margin:20px 20px 8px}
  .price-card .price{margin:0 20px 12px}
  .plan-description{margin:0 20px 20px}
  .price-card ul{padding:0 20px; margin-bottom:20px}
  .price-card .btn{margin:0 20px 24px}
  .testimonials-header .section-subtitle{font-size:16px}
  .testimonial-card blockquote{font-size:15px; margin-bottom:24px}
  .footer-links a{padding:6px 0}
  .social{width:40px; height:40px}
}

/* Registration Type Selection Modal */
.registration-modal {
  max-width: 800px;
  width: 90vw;
}

.registration-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.registration-option {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}

.registration-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.registration-option:hover {
  border-color: var(--brand-300);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.registration-option:hover::before {
  opacity: 1;
}

.option-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.option-icon svg {
  width: 32px;
  height: 32px;
  color: var(--brand-600);
  transition: all 0.3s ease;
}

.registration-option:hover .option-icon {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  transform: scale(1.1);
}

.registration-option:hover .option-icon svg {
  color: white;
}

.option-content h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 12px;
}

.option-content p {
  color: var(--ink-600);
  margin-bottom: 20px;
  line-height: 1.5;
}

.option-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
}

.option-features li {
  color: var(--ink-600);
  font-size: 14px;
  padding: 6px 0;
  position: relative;
  padding-left: 20px;
}

.option-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand-600);
  font-weight: bold;
}

.option-btn {
  width: 100%;
  font-weight: 600;
  transition: all 0.3s ease;
}

.registration-option:hover .option-btn {
  background: var(--brand-600);
  transform: translateY(-2px);
}

/* Mobile styles for registration modal */
@media (max-width: 768px) {
  .registration-modal {
    max-width: 95vw;
  }
  
  .registration-options {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .registration-option {
    padding: 24px 20px;
  }
  
  .option-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }
  
  .option-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .option-content h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .option-content p {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .option-features {
    margin-bottom: 20px;
  }
  
  .option-features li {
    font-size: 13px;
    padding: 4px 0;
  }
}