/* ============================================================
   HALF OFF TELEGRAM - Production CSS v2.0
   Professional UI/UX with animations, responsive, accessible
   ============================================================ */

/* --- Reset & Variables --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#229ED9;--brand-lt:#e8f6fc;--brand-dk:#1a7fb3;--brand-dd:#146590;
  --dark:#0F172A;--dark-2:#1e293b;--dark-3:#334155;
  --txt:#334155;--txt-lt:#64748b;--txt-xl:#94a3b8;
  --light:#F8FAFC;--light-2:#f1f5f9;--light-3:#e2e8f0;
  --card:#fff;--border:#E2E8F0;
  --green:#10b981;--green-bg:#ecfdf5;
  --red:#ef4444;--red-bg:#fef2f2;
  --amber:#f59e0b;--amber-bg:#fffbeb;
  --radius:12px;--radius-lg:16px;--radius-xl:20px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.04);
  --shadow-xl:0 20px 40px rgba(0,0,0,.1);
  --max:1200px;--head-h:68px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--txt);background:var(--light);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block;object-fit:cover}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
h1,h2,h3,h4,h5{color:var(--dark);line-height:1.25;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.05rem;font-weight:600}
p{margin-bottom:1rem}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;box-sizing:border-box}

/* --- Animations --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.animate-in{animation:fadeInUp .6s var(--ease) forwards;opacity:0}
.animate-in:nth-child(2){animation-delay:.1s}
.animate-in:nth-child(3){animation-delay:.2s}
.animate-in:nth-child(4){animation-delay:.3s}
.animate-in:nth-child(5){animation-delay:.4s}
.animate-in:nth-child(6){animation-delay:.5s}

/* --- Header --- */
.site-head{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(226,232,240,.6);height:var(--head-h);transition:box-shadow .3s var(--ease)}
.site-head,.nav,.nav .container{width:100%;box-sizing:border-box}
.site-head.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--head-h)}
.brand{display:flex;align-items:center}
.brand img{height:36px;width:auto;transition:transform .2s var(--ease)}
.brand:hover img{transform:scale(1.02)}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks a{font-size:.9rem;font-weight:500;color:var(--dark-3);transition:all .2s var(--ease);position:relative}
.navlinks a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--brand);transition:width .2s var(--ease);border-radius:1px}
.navlinks a:hover{color:var(--brand)}
.navlinks a:hover::after{width:100%}
.navlinks .cta{background:var(--brand);color:#fff!important;padding:10px 20px;border-radius:var(--radius);font-weight:600;box-shadow:0 2px 8px rgba(34,158,217,.25);transition:all .25s var(--ease)}
.navlinks .cta::after{display:none}
.navlinks .cta:hover{background:var(--brand-dk);box-shadow:0 4px 16px rgba(34,158,217,.35);transform:translateY(-1px)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:70;width:44px;height:44px;position:relative}
.menu-toggle span{display:block;width:24px;height:2.5px;background:var(--dark);border-radius:2px;position:absolute;left:10px;transition:.3s ease}
.menu-toggle span:nth-child(1){top:12px}
.menu-toggle span:nth-child(2){top:20px}
.menu-toggle span:nth-child(3){top:28px}
.menu-toggle.open span:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){top:20px;transform:rotate(-45deg)}
.lang{position:relative}
.lang>button{background:none;border:none;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--dark-3);display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:8px;transition:all .2s var(--ease)}
.lang>button:hover{background:var(--light-2);color:var(--brand)}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xl);min-width:190px;padding:6px;z-index:300;animation:scaleIn .2s var(--ease)}
.lang.open .lang-menu{display:block}
.lang-menu a{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:.85rem;border-radius:8px;transition:all .15s var(--ease)}
.lang-menu a:hover,.lang-menu a.cur{background:var(--brand-lt);color:var(--brand)}

/* --- Hero --- */
.hero{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 50%,#0c4a6e 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;color:#fff;padding:100px 0 80px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(34,158,217,.08) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(34,158,217,.05) 0%,transparent 40%);animation:float 6s ease-in-out infinite}
.hero .container{position:relative;z-index:1}
.hero .pill{display:inline-flex;align-items:center;gap:6px;background:rgba(34,158,217,.15);color:var(--brand);padding:8px 20px;border-radius:24px;font-size:.85rem;font-weight:600;margin-bottom:24px;border:1px solid rgba(34,158,217,.25);animation:fadeInUp .6s var(--ease)}
.hero h1{color:#fff;margin-bottom:20px;animation:fadeInUp .6s var(--ease) .1s forwards;opacity:0}
.hero .lead{font-size:1.15rem;color:rgba(148,163,184,.9);max-width:660px;margin:0 auto 32px;line-height:1.7;animation:fadeInUp .6s var(--ease) .2s forwards;opacity:0}
.hero .cta-btns{animation:fadeInUp .6s var(--ease) .3s forwards;opacity:0}

/* --- Buttons --- */
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--radius);font-weight:600;font-size:.95rem;transition:all .25s var(--ease);cursor:pointer;border:none;font-family:inherit;line-height:1.4}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(34,158,217,.25)}
.btn-primary:hover{background:var(--brand-dk);box-shadow:0 6px 20px rgba(34,158,217,.35);transform:translateY(-2px)}
.btn{background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-dk);transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,158,217,.35)}
.btn-outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--dark);box-shadow:var(--shadow-md)}
.btn-white:hover{background:var(--light-2);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:8px}
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}

/* --- Sections --- */
.block{padding:80px 0}
.block.alt{background:var(--light-2)}
.block.dark{background:var(--dark);color:#fff}
.block.dark h2,.block.dark h3{color:#fff}
.sec{text-align:center;margin-bottom:8px;position:relative}
.sub{text-align:center;color:var(--txt-lt);margin-bottom:40px;max-width:620px;margin-left:auto;margin-right:auto;font-size:1.05rem;line-height:1.7}

/* --- CTA Band --- */
.cta-band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dk) 50%,#0369a1 100%);background-size:200% 200%;animation:gradientShift 6s ease infinite;padding:60px 0;text-align:center;color:#fff;position:relative}
.cta-band h2{color:#fff;margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:24px}

/* --- Steps --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.step{text-align:center;padding:36px 28px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);transition:all .3s var(--ease);position:relative;overflow:hidden}
.step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dk));transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:left}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step:hover::before{transform:scaleX(1)}
.step .num{width:60px;height:60px;border-radius:50%;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 18px;transition:all .3s var(--ease)}
.step:hover .num{background:var(--brand);color:#fff;transform:scale(1.08)}
.step h3{margin-bottom:8px}
.step p{color:var(--txt-lt);font-size:.92rem;margin:0}

/* --- Grid & Cards --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:24px}
.card{background:var(--card);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);transition:all .3s var(--ease);border:1px solid var(--border);display:block;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dk));transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:left}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(34,158,217,.2)}
.card:hover::after{transform:scaleX(1)}
.card .logo{width:52px;height:52px;border-radius:12px;margin-bottom:14px;object-fit:contain;background:var(--light-2);padding:4px}
.card h3{margin-bottom:8px;transition:color .2s}
.card:hover h3{color:var(--brand)}
.card p{font-size:.9rem;color:var(--txt-lt);margin-bottom:14px;line-height:1.6}
.card .more{font-size:.85rem;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.card .more i{transition:transform .2s}
.card:hover .more i{transform:translateX(3px)}
.card.svc .more{opacity:0;transition:opacity .25s,transform .25s}
.card.svc:hover .more{opacity:1}
.card.cat{text-align:center}
.card.cat i{font-size:2rem;color:var(--brand);margin-bottom:14px;transition:transform .3s var(--ease-bounce)}
.card.cat:hover i{transform:scale(1.15) rotate(-5deg)}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* --- City Image Cards --- */
.card.city{padding:0;overflow:hidden;min-height:280px;display:flex;flex-direction:column}
.card.city .city-img{width:100%;height:180px;object-fit:cover;transition:transform .4s var(--ease)}
.card.city:hover .city-img{transform:scale(1.05)}
.card.city .city-body{padding:20px;flex:1;display:flex;flex-direction:column}
.card.city h3{margin-bottom:4px}
.card.city p{margin:0;flex:1}
.card.city .more{margin-top:12px}

/* --- Chips / Tags --- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.chip{background:var(--card);border:1px solid var(--border);padding:8px 18px;border-radius:24px;font-size:.88rem;font-weight:500;color:var(--txt);transition:all .25s var(--ease);cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-lt);transform:translateY(-1px);box-shadow:0 2px 8px rgba(34,158,217,.1)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* --- Utility classes --- */
.center{text-align:center;margin-top:28px}
.link{color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.link:hover{text-decoration:underline;gap:8px}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.text-center{text-align:center}
.text-sm{font-size:.88rem}

/* --- Stat Badges --- */
.stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin:32px 0}
.stat{text-align:center}
.stat .num{font-size:2rem;font-weight:800;color:var(--brand);display:block;line-height:1}
.stat .lbl{font-size:.82rem;color:var(--txt-lt);margin-top:4px}

/* --- Badges --- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:.78rem;font-weight:600}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-blue{background:var(--brand-lt);color:var(--brand)}
.badge-amber{background:var(--amber-bg);color:var(--amber)}

/* --- Alert/Info Boxes --- */
.info-box{background:var(--brand-lt);border:1px solid rgba(34,158,217,.2);border-radius:var(--radius);padding:20px 24px;margin:24px 0;display:flex;gap:12px;align-items:flex-start}
.info-box i{color:var(--brand);font-size:1.2rem;margin-top:2px;flex-shrink:0}
.alert-box{background:var(--amber-bg);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius);padding:20px 24px;margin:24px 0;display:flex;gap:12px;align-items:flex-start}
.alert-box i{color:var(--amber);font-size:1.2rem;margin-top:2px;flex-shrink:0}

/* --- Article / Blog --- */
.article{max-width:800px;margin:0 auto;padding:48px 20px}
.article h1{margin-bottom:20px}
.article h2{margin:40px 0 16px;font-size:1.4rem;padding-top:8px}
.article h3{margin:28px 0 10px}
.article p{margin-bottom:18px;line-height:1.75}
.article ol,.article ul{margin:0 0 18px 24px}
.article li{margin-bottom:10px;line-height:1.65}
.article .breadcrumb{font-size:.85rem;color:var(--txt-lt);margin-bottom:24px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.article .breadcrumb a{color:var(--brand);font-weight:500}
.article .breadcrumb a:hover{text-decoration:underline}
.article .breadcrumb span{color:var(--txt-xl)}
.article-meta{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-size:.85rem;color:var(--txt-lt)}

/* --- FAQ --- */
.faq-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;margin:32px 0;box-shadow:var(--shadow)}
.faq-box h3{margin-bottom:20px;font-size:1.2rem}
.faq-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--light-3)}
.faq-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.faq-item strong{display:block;margin-bottom:6px;color:var(--dark);font-size:1rem}
.faq-item p{margin:0;color:var(--txt-lt);font-size:.92rem;line-height:1.7}

/* --- Service Detail Page --- */
.svc-header{display:flex;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.svc-header img{width:72px;height:72px;border-radius:16px;background:var(--light-2);padding:6px;object-fit:contain}
.svc-header h1{margin:0;flex:1}
.svc-header .badges{display:flex;gap:8px;flex-wrap:wrap}

/* --- Location Hero --- */
.loc-hero{background:linear-gradient(135deg,var(--dark),var(--dark-2));padding:60px 0;color:#fff;text-align:center;position:relative;overflow:hidden}
.loc-hero::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15}
.loc-hero h1{color:#fff;margin-bottom:12px;position:relative;z-index:1}
.loc-hero p{color:rgba(255,255,255,.8);position:relative;z-index:1}

/* --- Footer --- */
.site-foot{background:var(--dark);color:var(--txt-xl);padding:60px 0 0}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot h4{color:#fff;font-size:.95rem;margin-bottom:18px;font-weight:600}
.foot ul{list-style:none}
.foot li{margin-bottom:10px}
.foot a{font-size:.88rem;transition:all .2s}
.foot a:hover{color:var(--brand);padding-left:4px}
.foot .tag{font-size:.88rem;margin-top:14px;line-height:1.6;color:var(--txt-xl)}
.social{display:flex;gap:12px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--txt-xl);transition:all .25s var(--ease)}
.social a:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(34,158,217,.3)}
.copy{text-align:center;padding:24px 0;font-size:.82rem;border-top:1px solid rgba(255,255,255,.06);margin-top:40px;color:var(--txt-xl)}

/* --- Scroll to Top --- */
.scroll-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 16px rgba(34,158,217,.3);opacity:0;transform:translateY(20px);transition:all .3s var(--ease);z-index:900}
.scroll-top.visible{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:var(--brand-dk);transform:translateY(-2px)}

/* --- Loading skeleton --- */
.skeleton{background:linear-gradient(90deg,var(--light-2) 25%,var(--light-3) 50%,var(--light-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .foot{grid-template-columns:1fr 1fr}
  .hero{padding:80px 0 60px}
}
@media(max-width:768px){
  .site-head{-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-toggle{display:block;z-index:70}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:var(--shadow-lg);padding:16px 22px 20px;flex-direction:column;align-items:stretch;gap:0;z-index:55}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid #f1f5f9;font-size:1rem;width:100%}
  .navlinks a::after{display:none}
  .navlinks .cta{text-align:center;margin-top:10px;border-bottom:none;border-radius:40px}
  .navlinks .lang{width:100%}
  .navlinks .lang>button{width:100%;text-align:left;display:flex;align-items:center;gap:6px;justify-content:flex-start}
  .navlinks .lang .lang-menu{position:static;width:100%;box-shadow:none;border:1px solid var(--light-3);margin-top:8px}
  .hero{padding:60px 0 50px}
  .hero h1{font-size:clamp(1.8rem,6vw,2.4rem)}
  .block{padding:60px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .foot{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:16px}
  .article{padding:32px 16px}
  .svc-header{flex-direction:column;text-align:center}
  .stats{gap:20px}
  .stat .num{font-size:1.6rem}
  .card{padding:20px}
  .card.city .city-img{height:140px}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .btn{width:100%;justify-content:center;padding:14px 20px}
  .cta-btns{flex-direction:column;align-items:stretch}
  .chips{gap:8px}
  .chip{font-size:.82rem;padding:6px 14px}
  .hero{padding:48px 0 40px}
  .hero .lead{font-size:1rem}
  .block{padding:48px 0}
}
/* --- Overlay for mobile menu --- */
.nav-overlay{display:none}

/* ============================================================
   PAGE COMPONENTS v2.1 - listing, category, location, blog, trust
   ============================================================ */

/* --- Page wrappers --- */
.page-listing{min-height:60vh}
.page-blog{min-height:60vh}
.page-trust{min-height:60vh}

/* --- Generic page hero (category / location / blog post) --- */
.page-hero{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 55%,#0c4a6e 100%);background-size:200% 200%;animation:gradientShift 10s ease infinite;color:#fff;padding:72px 0 64px;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-50%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at 25% 40%,rgba(34,158,217,.14) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(34,158,217,.08) 0%,transparent 40%);animation:float 8s ease-in-out infinite}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.page-hero>div>p{color:rgba(148,163,184,.92);max-width:640px;margin:0 auto;font-size:1.05rem;line-height:1.7}
.page-hero .breadcrumb{margin-bottom:18px;display:flex;align-items:center;gap:8px;justify-content:center;color:rgba(148,163,184,.8);font-size:.85rem;flex-wrap:wrap}
.page-hero .breadcrumb a{color:var(--brand);font-weight:500}
.page-hero .breadcrumb a:hover{color:#d0eaff}

/* --- Alternate hero (listing pages: services/categories/locations/blog index) --- */
.hero-alt{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dk) 55%,#0369a1 100%);background-size:200% 200%;animation:gradientShift 9s ease infinite;color:#fff;padding:72px 0 64px;text-align:center;position:relative;overflow:hidden}
.hero-alt::before{content:'';position:absolute;top:-50%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.12) 0%,transparent 45%),radial-gradient(circle at 20% 80%,rgba(255,255,255,.07) 0%,transparent 40%);animation:float 8s ease-in-out infinite}
.hero-alt .container{position:relative;z-index:1}
.hero-alt h1{color:#fff;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.hero-alt .lead{color:rgba(255,255,255,.92);max-width:640px;margin:0 auto;font-size:1.05rem;line-height:1.7}
.hero-alt .breadcrumb{margin-bottom:18px;display:flex;align-items:center;gap:8px;justify-content:center;color:rgba(255,255,255,.75);font-size:.85rem;flex-wrap:wrap}
.hero-alt .breadcrumb a{color:#fff;font-weight:500}
.hero-alt .breadcrumb a:hover{text-decoration:underline}

/* --- Listing content --- */
.listing-content{padding:60px 0 72px}
.category-group{margin-bottom:60px}
.category-group:last-child{margin-bottom:0}
.category-group>h2{display:flex;align-items:center;gap:12px;font-size:1.4rem;margin-bottom:26px}
.category-group>h2 i{color:var(--brand)}

/* --- Card grids --- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.blog-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.category-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* --- Service card (services index) --- */
.card-service{background:var(--card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;gap:16px;align-items:flex-start;transition:all .3s var(--ease);position:relative;overflow:hidden}
.card-service::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dk));transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:left}
.card-service:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(34,158,217,.2)}
.card-service:hover::after{transform:scaleX(1)}
.card-icon{width:48px;height:48px;border-radius:12px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;transition:all .3s var(--ease)}
.card-service:hover .card-icon{background:var(--brand);color:#fff;transform:scale(1.06)}
.card-body{flex:1;min-width:0}
.card-body h3{font-size:1rem;margin-bottom:6px}
.card-body p{font-size:.88rem;color:var(--txt-lt);line-height:1.6;margin-bottom:12px;margin-top:0}
.card-link{font-size:.85rem;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease)}
.card-link:hover{gap:10px;text-decoration:underline}

/* --- Category card (categories index) --- */
.card-category{background:var(--card);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow);border:1px solid var(--border);display:block;text-align:center;transition:all .3s var(--ease);position:relative;overflow:hidden}
.card-category::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dk));transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:left}
.card-category:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(34,158,217,.2)}
.card-category:hover::after{transform:scaleX(1)}
.card-cat-icon{width:58px;height:58px;border-radius:16px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin:0 auto 16px;transition:all .3s var(--ease)}
.card-category:hover .card-cat-icon{background:var(--brand);color:#fff;transform:scale(1.1) rotate(-5deg)}
.card-category h2{font-size:1.15rem;margin-bottom:6px;transition:color .2s}
.card-category:hover h2{color:var(--brand)}
.card-count{font-size:.75rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.card-category>p{font-size:.88rem;color:var(--txt-lt);line-height:1.65;margin-bottom:14px}
.card-category .card-link{margin-top:4px}

/* --- Blog card --- */
.card-blog{background:var(--card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;gap:16px;align-items:flex-start;transition:all .3s var(--ease);position:relative;overflow:hidden}
.card-blog:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(34,158,217,.2)}
.card-blog-icon{width:48px;height:48px;border-radius:12px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:all .3s var(--ease)}
.card-blog:hover .card-blog-icon{background:var(--brand);color:#fff}
.card-tag{display:inline-block;background:var(--brand-lt);color:var(--brand);font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:12px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.card-blog h2{font-size:1.08rem;margin-bottom:8px;line-height:1.35;transition:color .2s}
.card-blog:hover h2{color:var(--brand)}
.card-blog p{font-size:.88rem;color:var(--txt-lt);line-height:1.6;margin-bottom:12px}
.card-date{font-size:.78rem;color:var(--txt-xl);display:inline-flex;align-items:center;gap:6px}

/* --- Category detail page sections --- */
section.cat-intro{padding:56px 0 40px;background:var(--light)}
.cat-intro p,.loc-intro p,.locations-intro{max-width:820px;margin:0 auto 16px;color:var(--txt-lt);line-height:1.8;font-size:1.02rem}
section.cat-grid{padding:20px 0 72px;background:var(--light-2)}
section.cat-grid .container>h2,section.loc-grid .container>h2,section.loc-deals .container>h2,section.loc-faq .container>h2,section.cat-faq .container>h2{font-size:1.5rem;margin-bottom:26px}
section.cat-faq{padding:60px 0 80px;background:var(--light)}
.cat-faq details,.loc-faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.cat-faq summary,.loc-faq summary{cursor:pointer;padding:18px 52px 18px 22px;font-weight:600;color:var(--dark);list-style:none;position:relative;transition:all .2s var(--ease)}
.cat-faq summary::-webkit-details-marker,.loc-faq summary::-webkit-details-marker{display:none}
.cat-faq summary:hover,.loc-faq summary:hover{color:var(--brand)}
.cat-faq summary::after,.loc-faq summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--txt-lt);transition:transform .3s var(--ease)}
.cat-faq details[open] summary::after,.loc-faq details[open] summary::after{transform:translateY(-50%) rotate(180deg);color:var(--brand)}
.cat-faq details p,.loc-faq details p{padding:0 22px 20px;color:var(--txt-lt);font-size:.92rem;line-height:1.75;margin:0}
.cat-faq details[open] summary{border-bottom:1px solid var(--light-3)}

/* --- Category / location card icons --- */
.cat-grid .cards .card .card-icon,.loc-grid .cards .card .card-icon,.cards .card .card-icon,.cards .card-icon{width:52px;height:52px;border-radius:13px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px;transition:all .3s var(--ease)}
.cards .card:hover .card-icon{background:var(--brand);color:#fff;transform:scale(1.08)}

/* --- Location detail page sections --- */
section.loc-intro{padding:56px 0 40px;background:var(--light)}
section.loc-grid{padding:20px 0 72px;background:var(--light-2)}
section.loc-deals{padding:60px 0;background:var(--light)}
.deal-list{display:flex;flex-direction:column;gap:16px}
.deal-item{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);transition:all .3s var(--ease)}
.deal-item:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.deal-item h3{font-size:1.02rem;margin-bottom:6px}
.deal-item p{margin:0;color:var(--txt-lt);font-size:.9rem;line-height:1.7}
section.loc-faq{padding:60px 0 80px;background:var(--light-2)}
.loc-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 8px}

/* --- Blog post page --- */
.post-meta{display:flex;align-items:center;gap:10px;color:var(--txt-lt);font-size:.85rem;justify-content:center;margin-top:14px}
.blog-content{max-width:800px;margin:0 auto;padding:48px 20px 20px}
.cta-box{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dk) 50%,#0369a1 100%);background-size:200% 200%;animation:gradientShift 6s ease infinite;border-radius:var(--radius-lg);padding:40px 32px;text-align:center;color:#fff;margin:36px 0;box-shadow:var(--shadow-lg)}
.cta-box h2{color:#fff;margin-bottom:8px}
.cta-box p{color:rgba(255,255,255,.92);margin-bottom:22px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--brand-dk);font-weight:700;padding:14px 28px;border-radius:var(--radius);transition:all .25s var(--ease);box-shadow:var(--shadow-md);line-height:1.4}
.btn-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.faq-section{margin-top:8px}
.faq-section .faq-item h3{font-size:1rem;margin-bottom:6px;color:var(--dark)}
.related-posts{margin:44px 0 8px}
.related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.card-related{background:var(--brand-lt);border:1px solid rgba(34,158,217,.2);border-radius:var(--radius);padding:16px 18px;font-size:.88rem;font-weight:500;color:var(--brand);line-height:1.5;transition:all .25s var(--ease);display:block}
.card-related:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* --- Trust pages --- */
.trust-content{max-width:820px;margin:0 auto;padding:56px 20px 64px}
.trust-content h2{margin-bottom:16px}
.trust-content p{line-height:1.8}
.contact-links{background:var(--brand-lt);border-radius:var(--radius);padding:24px;margin:24px 0;border:1px solid rgba(34,158,217,.2)}
.contact-links p{margin:0 0 12px}
.contact-links p:last-child{margin:0}
.contact-links a{color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.contact-links a:hover{text-decoration:underline}
.last-updated{color:var(--txt-lt);font-size:.85rem;margin-bottom:24px;font-style:italic}

/* --- Locations index --- */
.locations-intro{text-align:center;color:var(--txt-lt);font-size:1.02rem;line-height:1.8;max-width:760px;margin:0 auto 36px}
.location-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip-location{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:10px 18px;font-size:.88rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;color:var(--txt);transition:all .25s var(--ease)}
.chip-location:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-lt);transform:translateY(-2px);box-shadow:0 4px 12px rgba(34,158,217,.12)}
.chip-location i{color:var(--brand)}

/* --- Active nav state --- */
.navlinks a.active{color:var(--brand)}
.navlinks a.active::after{width:100%}

/* --- Responsive for page components --- */
@media(max-width:768px){
  .page-hero,.hero-alt{padding:56px 0 48px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .related-grid{grid-template-columns:1fr}
  .listing-content{padding:48px 0 60px}
}
@media(max-width:480px){
  .card-service,.card-blog{flex-direction:column}
  .card-icon,.card-blog-icon{margin-bottom:4px}
}