/* Show page immediately — fonts use display:swap so no blocking */

html { visibility: visible }

html.slow-conn *:not(i) { font-family: system-ui, -apple-system, Arial, sans-serif }

/* Skeleton shimmer for image zones while loading */

@keyframes ht-shimmer {
    0%   { background-position: -400px 0 }
    100% { background-position:  400px 0 }
  }

.section:not(#services):not(#offersSection):not(#featuredSection) { content-visibility: auto; contain-intrinsic-size: 0 500px; }

button, a, [onclick] { touch-action: manipulation; }

/* ══════════════════════════════════════════
     SCROLL FADE HINTS
     ══════════════════════════════════════════ */

.scroll-fade-wrap {
    position: relative;
    overflow: hidden;
    --sfbg: var(--page-bg);
  }

.scroll-fade-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 56px;
    background: linear-gradient(to right, var(--sfbg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 4;
    transition: opacity .25s ease;
  }

.scroll-fade-wrap::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 40px;
    background: linear-gradient(to left, var(--sfbg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 4;
    transition: opacity .25s ease;
  }

.scroll-fade-wrap.at-end::after  { opacity: 0; pointer-events: none; }

.scroll-fade-wrap.at-start::before { opacity: 0; pointer-events: none; }

@media (min-width: 769px) {
    .scroll-fade-wrap::before,
    .scroll-fade-wrap::after { display: none; }
  }

#featuredSection .scroll-fade-wrap { --sfbg: #fff; }

html.dark #featuredSection .scroll-fade-wrap { --sfbg: #0f172a; }

#services .scroll-fade-wrap { --sfbg: var(--page-bg); }

html.dark #services .scroll-fade-wrap { --sfbg: #0a1120; }

@keyframes bounceUp { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) }  }

html.dark { --page-bg: #0f172a;
--surface: #1e293b;
--surface-2: #1a2336;
--surface-3: #243044;
--border: rgba(255,255,255,.09);
--border-em: rgba(255,255,255,.15);
--text: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-dim: #64748b;
--text-micro: #475569;
--blue-50: rgba(59,130,246,.12);
--blue-100: rgba(59,130,246,.18);
--blue-pale: rgba(59,130,246,.12);
--blue-glow: rgba(59,130,246,.3);
--gold-pale: rgba(245,158,11,.1);
--green-pale: rgba(22,163,74,.12);
--red-pale: rgba(220,38,38,.1);
--badge-hot-bg: rgba(200,30,30,.15); --badge-hot-txt: #fca5a5;
--badge-new-bg: rgba(21,128,61,.15); --badge-new-txt: #86efac;
--badge-live-bg: rgba(37,99,235,.15); --badge-live-txt: #93c5fd;
--badge-feat-bg: rgba(180,83,9,.15); --badge-feat-txt: #fcd34d;
--badge-best-bg: rgba(161,98,7,.15); --badge-best-txt: #fde68a;
--badge-exc-bg: rgba(109,40,217,.15); --badge-exc-txt: #c4b5fd;
--badge-sale-bg: rgba(200,30,30,.15); --badge-sale-txt: #fca5a5;
--badge-lim-bg: rgba(154,52,18,.15); --badge-lim-txt: #fdba74;
--shadow: 0 4px 8px rgba(0,0,0,.25);
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow-md: 0 8px 24px rgba(0,0,0,.4);
--shadow-lg: 0 16px 40px rgba(0,0,0,.5);
--ink: #0f172a;
--ink-soft: #1e293b }

html.dark body { background: var(--page-bg) }

html.dark #offersSection { background: #0f172a }

html.dark #reviews { background: #0f172a }

html.dark input, html.dark textarea, html.dark select { background: #243044; border-color: rgba(255,255,255,.1); color: var(--text) }

html.dark .featured-card { background: #1e293b; border-color: rgba(255,255,255,.07) }

html.dark .mobile-nav { background: #1e293b; border-top-color: rgba(255,255,255,.08) }

html.dark .badge-dropdown-menu { background: #1e293b; border-color: rgba(255,255,255,.1) }

html.dark .step { background: #1e293b; border-color: rgba(255,255,255,.07) }

html.dark #featuredSection { background: #0f172a; border-bottom-color: rgba(255,255,255,.07) }

html.dark #services { background: #0a1120 }

html.dark #order { background: #0a1120 }

html.dark .section-bridge { background: #0f172a }

html.dark .step { background: #1e293b; border-color: rgba(255,255,255,.07) }

html.dark .success { background: #1e293b }

html.dark .success-box { background: #243044; border-color: rgba(255,255,255,.1) }

html.dark .featured-content { background: #1e293b }

html.dark .featured-img-panel { background: #243044 }

html.dark #featuredSection .section-header h2 { color: var(--text) }

html.dark #howPopover { background: #1e293b; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 36px rgba(0,0,0,.5) }

html.dark #svcModalScroll { background: #1e293b }

html.dark input,
html.dark textarea,
html.dark select { background: #243044; border-color: rgba(255,255,255,.1); color: var(--text) }

html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text-dim) }

html.dark #reviews { background: #0a1120 }

html.dark #offersSection { background: #0a1120 }

html.dark .badge-dropdown-menu { background: #1e293b; border-color: rgba(255,255,255,.1) }

html.dark .search-dropdown { background: #1e293b; border-color: rgba(255,255,255,.1) }

html.dark .search-result-item:hover { background: #243044 }

html.dark .qr-popup { background: #1e293b; border-color: rgba(255,255,255,.1) }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth; font-size: 16px }

body { font-family: var(--font-body);
background: var(--page-bg);
color: var(--text);
line-height: var(--leading-normal);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale }

a { text-decoration: none; color: inherit }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display);
color: var(--text);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
letter-spacing: -.01em }

h1 { font-size: var(--text-3xl) }

h2 { font-size: var(--text-2xl) }

h3 { font-size: var(--text-md) }

h4 { font-size: var(--text-base); font-weight: var(--weight-semibold) }

p { color: var(--text-muted); line-height: var(--leading-relaxed) }

.label-micro { font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--blue);
display: block }

.caption { font-size: var(--text-xs);
color: var(--text-dim);
line-height: var(--leading-snug) }

::-webkit-scrollbar { width: 4px }

::-webkit-scrollbar-track { background: transparent }

::-webkit-scrollbar-thumb { background: var(--border-em); border-radius: 99px }

::-webkit-scrollbar-thumb:hover { background: var(--blue-500) }

.wrap { width: min(1200px, calc(100% - var(--s4))); margin: auto }

.section { padding: var(--s8) 0 var(--s6); scroll-margin-top: 96px }

#scrollBar { position: fixed; top: 0; left: 0;
height: 2px; width: 0%;
background: linear-gradient(90deg, var(--blue-600), var(--blue-500));
z-index: 300; transition: width .04s linear;
box-shadow: 0 0 8px rgba(37,99,235,.4) }

@keyframes mq-scroll { 0% { transform: translateX(0) } 100% { transform: translateX(50%) }  }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }

.brand img { width: 38px; height: 38px; border-radius: 10px;
object-fit: contain; flex-shrink: 0;
border: 1px solid var(--border) }

.brand-text b { font-family: var(--font-display);
font-size: 16px; color: var(--text); display: block; line-height: 1.1 }

.brand-text span { font-size: 10px; color: var(--text-muted) }

.badge-dropdown-wrap { flex-shrink: 0 }

.badge-dropdown-wrap { position: relative; display: inline-flex }

.badge-dropdown-menu { position: fixed;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 0 0 var(--r3) var(--r3);
box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
min-width: 200px; z-index: 9999;
display: none; flex-direction: column;
overflow: hidden; padding: 0 }

.badge-dropdown-menu.open { display: flex }

@media (max-width: 768px) { .badge-dropdown-menu { border-radius: 14px;
left: 8px;
right: 8px;
min-width: unset;
box-shadow: 0 12px 40px rgba(0,0,0,.18) }  }

.news-banner { display: none;
position: relative; width: 100%;
aspect-ratio: 16/9; max-height: 500px;
overflow: hidden; z-index: 97;
animation: newsFadeIn .5s ease }

@keyframes newsFadeIn { from { opacity:0; transform:translateY(-12px) } to { opacity:1; transform:translateY(0) }  }

.news-banner-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 8s ease }

.news-banner:hover .news-banner-img { transform: scale(1.04) }

.news-banner-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 50%, transparent 100%) }

.news-banner-overlay-side { position:absolute; inset:0; background:linear-gradient(to left, transparent 40%, rgba(0,0,0,.3) 100%) }

.news-banner-content { position:absolute; bottom:0; right:0; left:0; padding:clamp(18px,4vw,52px); display:flex; align-items:flex-end; justify-content:space-between; gap:20px }

.news-banner-tag { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:5px 14px; font-size:12px; font-weight:800; color:#fff; margin-bottom:10px; backdrop-filter:blur(8px) }

.news-banner-tag-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 2s infinite }

.news-banner-title { font-family:var(--font-display); font-size:clamp(18px,3.5vw,38px); font-weight:800; color:#fff; line-height:1.15; text-shadow:0 2px 16px rgba(0,0,0,.4); max-width:720px }

.news-banner-text { font-size:clamp(13px,1.6vw,17px); color:rgba(255,255,255,.85); margin-top:8px; line-height:1.65; max-width:580px }

.news-banner-link { flex-shrink:0; padding:12px 22px; border-radius:var(--radius); background:#fff; color:var(--blue); font-weight:800; font-size:14px; white-space:nowrap; transition:var(--trans); display:flex; align-items:center; gap:8px; align-self:flex-end; box-shadow:var(--shadow-md) }

.news-banner-link:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg) }

.news-banner-close { position:absolute; top:16px; left:16px; width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45); backdrop-filter:blur(12px); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:13px; transition:var(--trans); z-index:110 }

.news-banner-close:hover { background:rgba(0,0,0,.6) }

.news-banner.no-img { aspect-ratio:unset; min-height:60px; background:linear-gradient(135deg,var(--blue-pale),rgba(29,78,216,.04)); border-bottom:1px solid var(--border) }

.news-banner.no-img .news-banner-overlay, .news-banner.no-img .news-banner-overlay-side { display:none }

.news-banner.no-img .news-banner-content { position:relative; padding:16px clamp(18px,4vw,52px); align-items:center }

.news-banner.no-img .news-banner-tag { background:var(--blue-pale); border-color:rgba(29,78,216,.2); color:var(--blue) }

.news-banner.no-img .news-banner-title { color:var(--text) }

.news-banner.no-img .news-banner-text { color:var(--text-muted) }

.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 6px 14px; border-radius: 999px;
border: 1px solid rgba(29,78,216,.2);
background: var(--blue-pale);
color: var(--blue);
font-size: 12px; font-weight: 800; letter-spacing: .5px;
width: fit-content; margin-bottom: var(--sp-5) }

.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
animation: pulse 2s infinite }

@keyframes pulse { 0%, 100% { opacity: .6; transform: scale(.85) } 50% { opacity: 1; transform: scale(1.15) }  }

.slider-wrap img { position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; opacity: 0;
transition: opacity .6s ease, transform .6s ease;
transform: scale(1.04) }

.slider-wrap img.active { opacity: 1; transform: scale(1) }

.slider-dot { display: block;
flex: 0 0 6px; flex-shrink: 0; flex-grow: 0;
width: 6px; height: 6px;
min-width: 6px; max-width: 6px;
min-height: 6px; max-height: 6px;
border-radius: 50%;
box-sizing: content-box;
padding: 0; margin: 0;
background: var(--border-em);
border: none; cursor: pointer;
-webkit-appearance: none; appearance: none; outline: none;
transition: width .28s ease, border-radius .28s ease, background .2s ease }

.slider-dot.active,
.slider-dot.on { width: 18px; min-width: 18px; max-width: 18px;
flex: 0 0 18px;
height: 6px;
border-radius: 3px;
background: var(--blue) }

.slider-prev { right: 12px }

.slider-next { left: 12px }

.btn-primary, a.btn-primary { display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px;
background: var(--blue);
color: #fff; font-weight: 800; font-size: 14.5px;
border-radius: 999px; border: none; cursor: pointer;
font-family: var(--font-body);
transition: background .2s, transform .2s, box-shadow .2s;
box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 4px 16px var(--blue-glow);
text-decoration: none }

.btn-primary:hover, a.btn-primary:hover { background: var(--blue-mid);
transform: translateY(-2px);
box-shadow: 0 6px 24px var(--blue-glow) }

.btn-primary:active, a.btn-primary:active { transform: translateY(0) }

.btn-secondary, button.btn-secondary { display: inline-flex; align-items: center; gap: 8px;
padding: 11px 22px;
background: #fff; color: var(--text-muted);
font-weight: 700; font-size: 14.5px;
border-radius: 999px;
border: 1.5px solid var(--border-em);
cursor: pointer; font-family: var(--font-body);
transition: var(--trans); text-decoration: none }

.btn-secondary:hover, button.btn-secondary:hover { color: var(--blue);
border-color: var(--blue-light);
background: var(--blue-pale) }

.btn-send { display: flex; align-items: center; justify-content: center;
gap: 9px; width: 100%; padding: 15px 20px;
background: var(--blue); color: #fff;
font-weight: 800; font-size: 16px;
border-radius: var(--radius); border: none; cursor: pointer;
font-family: var(--font-body); letter-spacing: .3px;
transition: background .2s, transform .15s, box-shadow .2s;
box-shadow: 0 3px 0 #1e40af }

.btn-send:hover { background: var(--blue-mid); transform: translateY(-1px); box-shadow: 0 5px 0 #1e40af }

.btn-send:active { transform: translateY(2px); box-shadow: 0 0 0 #1e40af }

.btn-gold { display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px; background: var(--gold-light); color: #fff;
font-weight: 900; font-size: 13.5px; border-radius: 10px;
border: none; cursor: pointer; font-family: var(--font-body);
transition: opacity .15s, transform .15s; box-shadow: 0 2px 0 rgba(0,0,0,.15);
white-space: nowrap }

.btn-gold:hover { opacity: .9; transform: scale(1.02) }

.btn-ghost-full { display: flex; align-items: center; justify-content: center;
gap: 8px; width: 100%; padding: 11px 16px;
background: transparent; color: var(--text-muted);
font-weight: 700; font-size: 13.5px; border-radius: var(--radius);
border: 1.5px dashed var(--border-em); cursor: pointer;
font-family: var(--font-body); transition: color .2s, border-color .2s }

.btn-ghost-full:hover { color: var(--blue); border-color: var(--blue-light); border-style: solid }

.section-header { display: flex; justify-content: space-between;
align-items: flex-end; gap: 32px; margin-bottom: 40px }

.section-header h2 { font-family: var(--font-display);
font-size: clamp(24px, 3.5vw, 38px);
color: var(--text) }

.section-header > p { font-size: 14px; line-height: 1.8;
color: var(--text-muted); max-width: 300px;
text-align: left }

.section-label { font-size: 11px; font-weight: 800;
letter-spacing: 2.5px; text-transform: uppercase;
display: block; margin-bottom: 10px; color: var(--blue) }

#featuredSection { background: linear-gradient(180deg, #fffbf0 0%, #fff 100%);
border-bottom: 1px solid var(--border) }

.featured-grid { display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 14px;
align-items: stretch }

.featured-grid:has(> :only-child) { grid-template-columns: minmax(0, 480px);
justify-content: center }

.featured-card { background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
display: flex; flex-direction: column;
cursor: pointer; overflow: hidden;
transition: transform .24s cubic-bezier(.34,1.4,.64,1),
box-shadow .24s ease,
border-color .18s ease;
box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
position: relative }

.featured-card:hover { border-color: rgba(245,158,11,.4);
box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
transform: translateY(-4px) }

.featured-img-panel { width: 100%;
aspect-ratio: 16 / 9;
position: relative; overflow: hidden; flex-shrink: 0;
background: linear-gradient(135deg, #fef9ec 0%, #fef3c7 60%, #fde68a 100%);
display: flex; align-items: center; justify-content: center }

.featured-img-panel img { width: 100%; height: 100%; object-fit: cover;
transition: transform .5s ease; display: block }

.featured-card:hover .featured-img-panel img { transform: scale(1.05) }

.featured-img-panel::after { content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 56px;
background: linear-gradient(to top, rgba(255,255,255,.9) 0%, transparent 100%);
pointer-events: none }

.feat-icon-fallback { font-size: 52px; color: var(--amber-400); opacity: .45 }

.featured-img-badge { position: absolute; top: 10px; right: 10px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff; font-size: 10px; font-weight: 800;
padding: 4px 10px; border-radius: 6px;
border: 1px solid rgba(255,255,255,.18);
letter-spacing: .02em }

.featured-img-badge i { color: var(--amber-400); font-size: 9px }

.featured-content { flex: 1; padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 4px;
min-width: 0 }

.featured-type-label { font-size: 10px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--blue);
display: flex; align-items: center; gap: 5px;
margin-bottom: 2px }