/* =====================================================================
   modern.css  -  shared modern-CSS layer for index.html, about.html,
   blog.html and prices.php   (loaded AFTER each page's own <style>)

   What is used here (all native CSS, no external download):
   1  Custom properties (variables)  -> design tokens, fluid type, spacing
   2  Flexbox                        -> nav chips, toolbars, carousels
   3  Grid                           -> auto-fit card grids
   4  Container queries              -> tables/cards adapt to their box
   5  Transitions                    -> eased, touch-safe hover effects
   6  Animations                     -> scroll-driven reveal + progress bar
   7  Media queries                  -> size, touch, motion, contrast, print
   8  Utility classes (.u-*)         -> small Bootstrap/Tailwind-style helpers
   ===================================================================== */

/* ---------- 1. variables ---------- */
:root{
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-7:3rem;   --space-8:4.5rem;
  --fs-sm:clamp(.86rem,.83rem + .15vw,.95rem);
  --fs-md:clamp(1rem,.96rem + .2vw,1.1rem);
  --fs-lg:clamp(1.25rem,1.08rem + .75vw,1.65rem);
  --fs-xl:clamp(1.7rem,1.15rem + 2.4vw,2.9rem);
  --ease:cubic-bezier(.22,.8,.2,1);
  --dur:.28s;
  --ring:0 0 0 3px rgba(37,99,168,.3);
  --glass:rgba(248,248,245,.82);
  color-scheme:light;
}

/* ---------- base ---------- */
html{scroll-padding-top:calc(var(--nav-h,72px) + 16px)}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,.section-title,.hero-title{text-wrap:balance}
p,li{text-wrap:pretty}
img,svg,video{max-width:100%;height:auto}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px;box-shadow:var(--ring)}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--blue)}
button{touch-action:manipulation}

/* ---------- 3. grid: auto-fit so cards reflow without breakpoints ---------- */
.services-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(16px,2.5vw,28px)}
.testimonial-grid{gap:clamp(16px,2.5vw,28px)}
.values-grid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.blog-grid{gap:clamp(16px,2.4vw,28px)}
.includes-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(16px,3vw,40px);max-width:760px;margin-inline:auto}
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
@media (min-width:769px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}

/* ---------- 4. container queries: components respond to their own width ---------- */
.pkg-body,.service-card,.blog-card,.value-card{container-type:inline-size}
@container (max-width:520px){
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%}
  .price-table thead{display:none}
  .price-table tr{padding:12px 0;border-bottom:1px solid var(--gray-light)}
  .price-table td{border:0;padding:2px 4px}
  .price-table td.price-amount{padding-top:6px}
}
@container (max-width:260px){.service-card .service-desc{font-size:.85rem}}

/* ---------- 2. flexbox: swipeable chip rows / carousels on phones ---------- */
@media (max-width:700px){
  .testimonial-grid{display:flex;overflow-x:auto;gap:var(--space-4);padding:var(--space-2) var(--space-1) var(--space-4);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .testimonial-grid::-webkit-scrollbar{display:none}
  .testimonial-card{flex:0 0 min(88%,380px);scroll-snap-align:center}
}

/* ---------- 5. transitions: eased everywhere, hover lifts only on real hover devices ---------- */
:where(a,button,.service-card,.testimonial-card,.promo-card,.blog-card,.value-card,.tool-btn){
  transition-timing-function:var(--ease);transition-duration:var(--dur)
}
@media (hover:none){
  .service-card:hover,.testimonial-card:hover,.promo-card:hover,.blog-card:hover,.value-card:hover,
  .btn-primary:hover,.btn-outline:hover,.btn-blog:hover,.cta-btn:hover{transform:none}
}

/* ---------- 6. animations ---------- */
@keyframes mRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mProgress{to{transform:scaleX(1)}}
@keyframes mShimmer{to{background-position:-200% 0}}
.hero-bg{background-size:220% 220%;animation:mGradient 26s ease-in-out infinite}
.hero-badge{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 100%;animation:mShimmer 4.5s linear infinite}
@supports (animation-timeline:view()){
  .reveal{opacity:1;transform:none;transition:none;animation:mRise linear backwards;animation-timeline:view();animation-range:entry 0% cover 30%}
}
@supports (animation-timeline:scroll()){
  body::after{content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:1200;pointer-events:none;
    background:linear-gradient(90deg,var(--gold),var(--blue-light));transform-origin:0 50%;transform:scaleX(0);
    animation:mProgress linear both;animation-timeline:scroll(root)}
}

/* ---------- forms: instant, friendly validation feedback ---------- */
.form-group input,.form-group select,.form-group textarea{font-size:max(16px,1rem)}
@supports selector(:user-invalid){
  .form-group:has(:user-invalid) label{color:#b3261e}
  .form-group :user-invalid{border-color:#b3261e}
  .form-group :user-valid{border-color:#2f7d5b}
}

/* ---------- price page tools (quick-nav, share, print) ---------- */
.pkg-section[id]{scroll-margin-top:calc(var(--nav-h,72px) + 90px)}
.price-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);
  position:sticky;top:calc(var(--nav-h,72px) + 8px);z-index:40;margin-bottom:var(--space-6);padding:10px 12px;
  background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--gray-light);border-radius:16px;box-shadow:var(--shadow)}
.quicknav{display:flex;gap:var(--space-2);overflow-x:auto;flex:1 1 320px;min-width:0;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quicknav::-webkit-scrollbar{display:none}
.quicknav a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;padding:9px 16px;border-radius:99px;text-decoration:none;font-weight:bold;font-size:.9rem;color:var(--navy);background:#fff;border:1px solid var(--gray-light);transition-property:background,color,border-color,transform}
.quicknav a.active{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (hover:hover){.quicknav a:hover{border-color:var(--blue)}}
.tool-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.tool-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:12px;cursor:pointer;font:bold .88rem var(--font);color:var(--navy);background:transparent;border:1.5px solid var(--gray-light)}
@media (hover:hover){.tool-btn:hover{border-color:var(--blue);background:#fff}}
.inc-title{font-weight:bold;color:var(--navy);margin:6px 0 14px;font-size:.98rem}
.add-on-badge{white-space:nowrap}

/* ---------- 7. media queries ---------- */
@media (min-width:1600px){.section-inner,.prices-wrap,.blog-wrap,.about-wrap{max-width:1280px}}
@media (hover:none) and (pointer:coarse){
  .btn-nav,.btn-primary,.btn-outline,.cta-btn,.btn-blog,.faq-q,.mobile-menu a{min-height:44px}
  .nav-links a{padding-block:10px}
}
@media (prefers-contrast:more){
  :root{--gray-dark:#2a3642;--gray:#4a5a6a}
  .service-card,.testimonial-card,.pkg-body,.faq-item{border-color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg,.hero-badge{animation:none}
  body::after{display:none}
  .reveal{opacity:1!important;transform:none!important;animation:none!important}
}
@media print{
  #navbar,.mobile-menu,#schedule-btn,#delete-zone,.toast,#auth-modal,#policy-modal,#page-loader,#ghost-badge,.price-tools,.cta-bar,.page-hero::before,footer,body::after{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .page-hero{margin-top:0!important;background:none!important;color:#000!important;padding:0 0 12px!important}
  .page-hero h1,.page-hero p{color:#000!important}
  .prices-wrap{padding:0!important;max-width:none!important}
  .pkg-section{break-inside:avoid;page-break-inside:avoid;margin-bottom:18px!important;opacity:1!important;transform:none!important;animation:none!important}
  .pkg-header{background:#fff!important;color:#000!important;border:1px solid #000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pkg-body{box-shadow:none!important;border:1px solid #999!important}
  .section-divider{display:none}
  a{color:#000!important;text-decoration:none!important}
}

/* ---------- 8. utility classes (lightweight Bootstrap / Tailwind-style helpers) ---------- */
.u-container{width:min(100% - 2rem,1100px);margin-inline:auto}
.u-flex{display:flex;gap:var(--space-4)}
.u-flex-wrap{flex-wrap:wrap}
.u-between{justify-content:space-between}
.u-center{display:grid;place-items:center}
.u-items-center{align-items:center}
.u-grid{display:grid;gap:var(--space-4)}
.u-grid-2{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.u-grid-3{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.u-stack>*+*{margin-block-start:var(--space-4)}
.u-p-4{padding:var(--space-4)}.u-p-5{padding:var(--space-5)}.u-p-6{padding:var(--space-6)}
.u-mt-4{margin-block-start:var(--space-4)}.u-mt-6{margin-block-start:var(--space-6)}
.u-text-center{text-align:center}
.u-text-lg{font-size:var(--fs-lg)}.u-text-sm{font-size:var(--fs-sm)}
.u-hide-sm{display:initial}
@media (max-width:600px){.u-hide-sm{display:none!important}}
.u-rounded{border-radius:var(--radius,10px)}.u-shadow{box-shadow:var(--shadow)}