@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primary: #244cf2;
  --primary-rgb: 36, 76, 242;
  --primary-dark: #1636c8;
  --navy: #09194f;
  --navy-2: #060f34;
  --accent: #40c9ff;
  --accent-rgb: 64, 201, 255;
  --cyan: #27d5e8;
  --success: #19b86d;
  --danger: #d94452;
  --warning: #f0a53b;
  --text: #172746;
  --muted: #6f7f9a;
  --surface: #f6f8ff;
  --border: rgba(36, 76, 242, .12);
  --white: #fff;
  --shadow-sm: 0 12px 36px rgba(9, 25, 79, .08);
  --shadow-md: 0 24px 72px rgba(9, 25, 79, .13);
  --shadow-lg: 0 34px 100px rgba(5, 16, 55, .26);
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 38px;
  --transition: .35s ease;
}

html, body, button, input, textarea, select, option, .btn, .navbar, .nav-link, .accordion-button, .accordion-body {
  font-family: var(--font-family) !important;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  position: relative; overflow-x: hidden; margin: 0; color: var(--text); background: #fff; line-height: 1.9;
  background-image: radial-gradient(circle at 5% 9%, rgba(var(--primary-rgb), .05), transparent 26rem), radial-gradient(circle at 95% 50%, rgba(var(--accent-rgb), .055), transparent 29rem);
}
body::selection { color: #fff; background: var(--primary); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.35; font-weight: 800; }
p:last-child { margin-bottom: 0; }
.number-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .55); outline-offset: 4px; }

.skip-link { position: fixed; top: 12px; right: 12px; z-index: 9999; padding: 10px 16px; color: #fff; background: var(--primary); border-radius: 10px; transform: translateY(-150%); transition: transform var(--transition); }
.skip-link:focus { transform: translateY(0); }
.page-glow { position: fixed; z-index: -1; width: 480px; height: 480px; pointer-events: none; border-radius: 50%; filter: blur(38px); opacity: .22; }
.glow-one { top: 7%; right: -300px; background: radial-gradient(circle, rgba(var(--primary-rgb), .36), transparent 68%); }
.glow-two { top: 46%; left: -310px; background: radial-gradient(circle, rgba(111, 91, 255, .23), transparent 70%); }
.glow-three { bottom: 2%; right: -310px; background: radial-gradient(circle, rgba(var(--accent-rgb), .27), transparent 70%); }

.section-space { position: relative; padding: 108px 0; }
.soft-section { background: linear-gradient(180deg, rgba(var(--primary-rgb), .035), transparent 24%), var(--surface); }
.section-heading { max-width: 780px; margin-bottom: 46px; }
.section-heading.text-center { margin-right: auto; margin-left: auto; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--primary); font-size: .85rem; font-weight: 800; }
.kicker::before { width: 30px; height: 2px; content: ""; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 10px; }
.section-heading h2 { margin-bottom: 18px; color: var(--navy); font-size: clamp(1.9rem, 4vw, 3.25rem); }
.section-heading p { color: var(--muted); font-size: 1rem; }
.light-heading h2, .light-heading p { color: #fff; }
.light-heading p { opacity: .76; }
.light-heading .kicker { color: #9cecff; }
.light-heading .kicker::before { background: linear-gradient(90deg, #fff, var(--accent)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 14px; font-weight: 800; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); }
.btn:hover { transform: translateY(-3px); }
.btn-lg { min-height: 58px; padding: 15px 27px; border-radius: 17px; }
.btn-main { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--accent) 130%); box-shadow: 0 16px 40px rgba(var(--primary-rgb), .28); }
.btn-main::before { position: absolute; top: -50%; left: -35%; width: 30%; height: 200%; content: ""; background: rgba(255,255,255,.25); transform: rotate(22deg); transition: left .65s ease; }
.btn-main:hover { color: #fff; box-shadow: 0 22px 48px rgba(var(--primary-rgb), .36); }
.btn-main:hover::before { left: 120%; }
.btn-soft { color: var(--primary); background: rgba(var(--primary-rgb), .07); border: 1px solid rgba(var(--primary-rgb), .13); }
.btn-soft:hover { color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.btn-whatsapp { color: #fff; background: linear-gradient(135deg, #0d9f58, #22c779); box-shadow: 0 16px 36px rgba(13, 159, 88, .2); }
.btn-whatsapp:hover { color: #fff; box-shadow: 0 20px 44px rgba(13, 159, 88, .3); }

.site-header { z-index: 1030; padding: 12px 0; transition: padding var(--transition), background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); }
.site-header.scrolled { padding: 5px 0; background: rgba(255,255,255,.9); box-shadow: 0 12px 34px rgba(9,25,79,.08); backdrop-filter: blur(18px); }
.navbar { padding: 0; }
.navbar-brand img { width: 190px; max-height: 68px; object-fit: contain; }
.navbar-nav { gap: 3px; }
.nav-link { position: relative; padding: 10px 11px !important; color: #35496c; font-size: .86rem; font-weight: 700; }
.nav-link::after { position: absolute; right: 50%; bottom: 2px; width: 0; height: 2px; content: ""; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 10px; transform: translateX(50%); transition: width var(--transition); }
.nav-link:hover, .nav-link:focus { color: var(--primary); }
.nav-link:hover::after, .nav-link:focus::after { width: 58%; }
.navbar-toggler { display: grid; gap: 5px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; box-shadow: none !important; }
.navbar-toggler i { display: block; width: 24px; height: 2px; background: var(--primary); border-radius: 10px; }
.head-call { gap: 7px; padding: 9px 13px; color: #fff; background: var(--primary); border-radius: 12px; font-size: .8rem; }
.head-call:hover { color: #fff; }
.head-call span { width: 9px; height: 9px; background: #6af2a5; border-radius: 50%; box-shadow: 0 0 0 5px rgba(106,242,165,.15); animation: statusPulse 1.8s infinite; }

.hero-section { position: relative; isolation: isolate; min-height: 830px; padding: 175px 0 132px; overflow: hidden; background: radial-gradient(circle at 80% 28%, rgba(var(--primary-rgb), .21), transparent 24rem), radial-gradient(circle at 96% 82%, rgba(98, 80, 255, .12), transparent 24rem), linear-gradient(135deg, #f8faff, #fff 46%, #eef2ff); }
.hero-section::before { position: absolute; inset: 0; z-index: -2; content: ""; background: radial-gradient(circle at 17% 10%, rgba(var(--accent-rgb), .13), transparent 20rem), radial-gradient(circle at 68% 97%, rgba(98,80,255,.07), transparent 24rem); }
.grid-bg { position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: linear-gradient(rgba(var(--primary-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb), .08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 21px; padding: 8px 14px; color: var(--primary); background: rgba(255,255,255,.75); border: 1px solid rgba(var(--primary-rgb), .12); border-radius: 999px; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); font-size: .84rem; font-weight: 800; }
.eyebrow b { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; }
.hero-content h1 { max-width: 820px; margin-bottom: 24px; color: var(--navy); font-size: clamp(2.3rem, 6vw, 4.25rem); letter-spacing: -.035em; }
.hero-content h1 span { display: block; color: transparent; background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 760px; margin-bottom: 31px; color: #52647f; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.hero-lead strong { color: var(--primary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust > div { display: flex; align-items: center; gap: 10px; min-width: 160px; padding: 10px 14px; background: rgba(255,255,255,.74); border: 1px solid rgba(var(--primary-rgb), .1); border-radius: 15px; box-shadow: 0 10px 30px rgba(9,25,79,.055); backdrop-filter: blur(8px); }
.hero-trust b { color: rgba(var(--primary-rgb), .45); font-size: .72rem; }
.hero-trust span { color: #263a5d; font-size: .77rem; font-weight: 800; }
.hero-visual { position: relative; display: grid; min-height: 500px; place-items: center; }
.hero-card { position: relative; z-index: 3; width: min(390px, 90%); padding: 54px 38px 40px; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.2), transparent 48%), linear-gradient(145deg, var(--navy-2), var(--navy) 48%, var(--primary)); border: 1px solid rgba(255,255,255,.16); border-radius: 42px; box-shadow: var(--shadow-lg); transform: rotate(-2deg); }
.hero-card::after { position: absolute; right: -95px; bottom: -130px; width: 300px; height: 300px; content: ""; background: radial-gradient(circle, rgba(var(--accent-rgb), .65), transparent 68%); border-radius: 50%; filter: blur(10px); }
.hero-card img { position: relative; z-index: 2; width: 180px; margin-bottom: 24px; filter: drop-shadow(0 18px 32px rgba(0,0,0,.2)); }
.hero-card p { position: relative; z-index: 2; margin-bottom: 10px; color: rgba(255,255,255,.73); font-size: .85rem; }
.hero-card > a { position: relative; z-index: 2; display: block; color: #fff; font-size: clamp(3rem, 8vw, 5.2rem); font-weight: 900; line-height: 1; letter-spacing: .03em; }
.hero-card > a:hover { color: #fff; }
.hero-halo { position: absolute; top: -160px; right: 50%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 67%); border-radius: 50%; transform: translateX(50%); }
.orbit { position: absolute; border: 1px solid rgba(var(--primary-rgb), .15); border-radius: 50%; }
.orbit-one { width: 470px; height: 470px; animation: orbitSpin 22s linear infinite; }
.orbit-two { width: 570px; height: 570px; border-style: dashed; animation: orbitSpin 34s linear infinite reverse; }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; min-width: 175px; padding: 12px 15px; background: rgba(255,255,255,.86); border: 1px solid rgba(var(--primary-rgb), .12); border-radius: 18px; box-shadow: 0 18px 50px rgba(9,25,79,.14); backdrop-filter: blur(14px); }
.floating-card span { display: grid; flex: 0 0 39px; width: 39px; height: 39px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; font-size: .7rem; font-weight: 900; }
.floating-card small { color: var(--navy); font-size: .73rem; font-weight: 800; }
.card-gas { top: 7%; right: -4%; animation: floatCard 5s ease-in-out infinite; }
.card-electric { right: -4%; bottom: 7%; animation: floatCard 5.8s ease-in-out .4s infinite; }
.card-instant { bottom: 20%; left: -8%; animation: floatCard 6.4s ease-in-out .8s infinite; }
.hero-wave { position: absolute; right: -5%; bottom: -106px; left: -5%; height: 190px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

.trust-bar { position: relative; z-index: 5; margin-top: -82px; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; background: rgba(255,255,255,.94); border: 1px solid rgba(var(--primary-rgb), .1); border-radius: 24px; box-shadow: var(--shadow-md); backdrop-filter: blur(14px); }
.trust-grid > div { position: relative; padding: 25px 22px; text-align: center; }
.trust-grid > div:not(:last-child)::after { position: absolute; top: 25%; left: 0; width: 1px; height: 50%; content: ""; background: linear-gradient(transparent, rgba(var(--primary-rgb), .18), transparent); }
.trust-grid strong, .trust-grid span { display: block; }
.trust-grid strong { margin-bottom: 5px; color: var(--primary); font-size: 1rem; font-weight: 900; }
.trust-grid span { color: var(--muted); font-size: .74rem; }

.quick-answer { padding-top: 88px; padding-bottom: 20px; }
.quick-answer-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; max-width: 1050px; margin: 0 auto; padding: 30px; background: linear-gradient(100deg, rgba(var(--primary-rgb), .055), rgba(var(--accent-rgb), .07)); border: 1px solid rgba(var(--primary-rgb), .12); border-radius: 24px; box-shadow: var(--shadow-sm); }
.answer-label { padding: 8px 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 999px; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.quick-answer h2 { margin-bottom: 8px; color: var(--navy); font-size: 1.35rem; }
.quick-answer p { color: var(--muted); font-size: .9rem; }
.quick-answer a { color: var(--primary); font-weight: 900; }

.brands-section { padding-top: 85px; }
.brand-search { display: grid; grid-template-columns: auto minmax(280px, 640px) auto; gap: 18px; align-items: center; justify-content: center; margin-bottom: 35px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); }
.brand-search label { color: var(--navy); font-size: .86rem; font-weight: 800; }
.brand-search-box { position: relative; }
.brand-search-box input { width: 100%; min-height: 52px; padding: 12px 48px 12px 16px; color: var(--text); background: var(--surface); border: 1px solid rgba(var(--primary-rgb), .12); border-radius: 15px; outline: 0; transition: border var(--transition), box-shadow var(--transition), background var(--transition); }
.brand-search-box input:focus { background: #fff; border-color: rgba(var(--primary-rgb), .35); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08); }
.brand-search-box span { position: absolute; top: 50%; right: 17px; color: var(--primary); font-size: 1.4rem; transform: translateY(-50%); }
.brand-search p { margin: 0; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.brand-search p strong { color: var(--primary); font-size: 1rem; }
.brands-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.brand-card { min-width: 0; }
.brand-card[hidden] { display: none !important; }
.brand-card > a { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "mark copy arrow" "mark action arrow"; gap: 2px 13px; align-items: center; min-height: 126px; padding: 20px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.brand-card > a::before { position: absolute; top: -90px; left: -90px; width: 190px; height: 190px; content: ""; background: radial-gradient(circle, rgba(var(--primary-rgb), calc(.07 + (var(--brand-index) * 0))), transparent 68%); border-radius: 50%; transition: transform var(--transition); }
.brand-card > a:hover { border-color: rgba(var(--primary-rgb), .28); box-shadow: var(--shadow-md); transform: translateY(-7px); }
.brand-card > a:hover::before { transform: scale(1.28); }
.brand-mark { position: relative; z-index: 1; grid-area: mark; display: grid; width: 53px; height: 53px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary-dark), var(--primary) 52%, var(--accent)); border-radius: 17px; box-shadow: 0 13px 28px rgba(var(--primary-rgb), .22); font-size: .78rem; font-weight: 900; }
.brand-copy { position: relative; z-index: 1; grid-area: copy; min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { color: var(--navy); font-size: .95rem; }
.brand-copy small { color: var(--muted); font-size: .66rem; }
.brand-action { position: relative; z-index: 1; grid-area: action; color: var(--primary); font-size: .68rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-arrow { position: relative; z-index: 1; grid-area: arrow; color: rgba(var(--primary-rgb), .45); font-size: 1.1rem; transition: transform var(--transition), color var(--transition); }
.brand-card > a:hover .brand-arrow { color: var(--primary); transform: translateX(-4px); }
.no-brands { padding: 30px; color: var(--muted); text-align: center; background: var(--surface); border: 1px dashed rgba(var(--primary-rgb), .2); border-radius: 18px; }

.services-section { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(var(--accent-rgb), .15), transparent 26rem), linear-gradient(145deg, var(--navy-2), var(--navy) 58%, #173bc2); }
.services-section::before { position: absolute; inset: 0; z-index: -2; content: ""; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at center, #000 30%, transparent 86%); }
.service-glow { position: absolute; left: -250px; bottom: -250px; z-index: -1; width: 560px; height: 560px; background: radial-gradient(circle, rgba(112,91,255,.3), transparent 68%); border-radius: 50%; filter: blur(10px); }
.service-types-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-type-card { position: relative; min-height: 100%; padding: 32px; overflow: hidden; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); border-radius: 27px; backdrop-filter: blur(12px); transition: transform var(--transition), background var(--transition), border-color var(--transition); }
.service-type-card::after { position: absolute; left: -100px; bottom: -120px; width: 280px; height: 280px; content: ""; border-radius: 50%; }
.gas-card::after { background: radial-gradient(circle, rgba(240,165,59,.23), transparent 68%); }
.electric-card::after { background: radial-gradient(circle, rgba(var(--accent-rgb),.22), transparent 68%); }
.instant-card::after { background: radial-gradient(circle, rgba(112,91,255,.24), transparent 68%); }
.service-type-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); transform: translateY(-8px); }
.service-icon { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; margin-bottom: 24px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 20px; box-shadow: 0 14px 30px rgba(0,0,0,.18); font-size: .66rem; font-weight: 900; }
.gas-card .service-icon { background: linear-gradient(135deg, #d97a1c, #f3ad44); }
.instant-card .service-icon { background: linear-gradient(135deg, #654fe6, #9a6cff); }
.service-type-card h3 { position: relative; z-index: 1; margin-bottom: 13px; color: #fff; font-size: 1.35rem; }
.service-type-card p, .service-type-card li { position: relative; z-index: 1; color: rgba(255,255,255,.72); font-size: .84rem; }
.service-type-card ul { position: relative; z-index: 1; padding-right: 18px; margin: 18px 0; }
.service-type-card li { margin-bottom: 7px; }
.service-type-card > a { position: relative; z-index: 1; color: #9cecff; font-size: .78rem; font-weight: 900; }
.safety-note { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 30px; padding: 25px; background: linear-gradient(100deg, rgba(217,68,82,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; }
.safety-note span { padding: 7px 11px; color: #fff; background: var(--danger); border-radius: 999px; font-size: .7rem; font-weight: 900; }
.safety-note p { color: rgba(255,255,255,.75); font-size: .84rem; }

.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feature-card { position: relative; min-height: 220px; padding: 30px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.feature-card::after { position: absolute; top: -105px; left: -100px; width: 210px; height: 210px; content: ""; background: radial-gradient(circle, rgba(var(--primary-rgb),.11), transparent 68%); border-radius: 50%; }
.feature-card:hover { border-color: rgba(var(--primary-rgb),.25); box-shadow: var(--shadow-md); transform: translateY(-8px); }
.feature-card span { display: grid; width: 51px; height: 51px; margin-bottom: 23px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 17px; box-shadow: 0 12px 28px rgba(var(--primary-rgb),.22); font-size: .74rem; font-weight: 900; }
.feature-card b { display: block; margin-bottom: 10px; color: var(--navy); font-size: 1rem; }
.feature-card p { color: var(--muted); font-size: .82rem; }

.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.steps-grid::before { position: absolute; top: 51px; right: 9%; left: 9%; z-index: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.3), transparent); }
.step-card { position: relative; z-index: 1; min-height: 205px; padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-7px); }
.step-card span { display: grid; width: 48px; height: 48px; margin-bottom: 23px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border: 5px solid #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(var(--primary-rgb),.22); font-size: .72rem; font-weight: 900; }
.step-card h3 { margin-bottom: 9px; color: var(--navy); font-size: 1rem; }
.step-card p { color: var(--muted); font-size: .81rem; }

.contact-section {
  position: relative;
  isolation: isolate;
  padding: 104px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(112, 91, 255, .26), transparent 25rem),
    radial-gradient(circle at 92% 92%, rgba(var(--accent-rgb), .32), transparent 28rem),
    linear-gradient(135deg, var(--navy-2), var(--navy) 52%, var(--primary-dark));
}
.contact-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 88%, transparent);
}
.contact-main {
  position: relative;
  margin-top: 26px;
  padding: 24px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .065));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(1, 8, 32, .22);
  backdrop-filter: blur(16px);
}
.contact-main::after {
  position: absolute;
  left: -85px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  content: "";
  background: radial-gradient(circle, rgba(var(--accent-rgb), .34), transparent 68%);
  border-radius: 50%;
}
.contact-main-head,
.contact-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
}
.contact-main-head small,
.contact-main-head b,
.contact-card-head span,
.contact-card-head small {
  display: block;
}
.contact-main-head small {
  margin-bottom: 2px;
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 600;
}
.contact-main-head b {
  color: #fff;
  font-size: .9rem;
}
.contact-icon {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.contact-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.contact-icon--whatsapp {
  background: linear-gradient(135deg, #0d9955, #29cf7e);
}
.contact-hotline {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin: 22px auto 13px;
  color: #fff;
  font-size: clamp(3.4rem, 7vw, 5.7rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .035em;
  text-shadow: 0 14px 36px rgba(0, 0, 0, .24);
  transition: transform var(--transition), color var(--transition);
}
.contact-hotline:hover {
  color: #fff;
  transform: scale(1.035);
}
.contact-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
}
.contact-status i {
  width: 8px;
  height: 8px;
  background: #6af2a5;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(106, 242, 165, .12);
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contact-card {
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .065));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(1, 8, 32, .12);
  backdrop-filter: blur(15px);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.contact-card:hover {
  border-color: rgba(255, 255, 255, .25);
  background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
  transform: translateY(-5px);
}
.contact-card:last-child {
  grid-column: 1 / -1;
}
.contact-card-head {
  margin-bottom: 17px;
}
.contact-card-head > div {
  min-width: 0;
}
.contact-card-head span {
  margin-bottom: 3px;
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
}
.contact-card-head small {
  color: rgba(255, 255, 255, .58);
  font-size: .7rem;
}
.contact-number-list {
  display: grid;
  gap: 9px;
}
.contact-number-list--landline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 49px;
  padding: 10px 13px;
  color: #fff;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  font-size: clamp(.92rem, 1.55vw, 1.12rem);
  font-weight: 800;
  white-space: nowrap;
  overflow-wrap: normal;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.contact-number:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .23);
  transform: translateY(-2px);
}
.contact-number b {
  color: #bdf4ce;
  font-size: .85rem;
}
.whatsapp-card {
  background: linear-gradient(145deg, rgba(13, 159, 88, .26), rgba(255, 255, 255, .065));
}
.whatsapp-card .contact-number {
  background: rgba(14, 188, 103, .22);
  border-color: rgba(114, 247, 178, .2);
}

.faq-layout { display: grid; grid-template-columns: 315px 1fr; gap: 25px; align-items: start; }
.faq-side { position: sticky; top: 110px; padding: 34px; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.32), transparent 15rem), linear-gradient(145deg, var(--navy-2), var(--primary-dark)); border-radius: 38px; box-shadow: var(--shadow-lg); }
.faq-side::after { position: absolute; left: -105px; bottom: -105px; width: 260px; height: 260px; content: ""; background: radial-gradient(circle, rgba(112,91,255,.28), transparent 68%); border-radius: 50%; }
.faq-side img, .faq-side strong, .faq-side h3, .faq-side p, .faq-side a { position: relative; z-index: 1; }
.faq-side img { width: 80px; margin-bottom: 18px; }
.faq-side strong { display: block; margin-bottom: 17px; color: #fff; font-size: 3.25rem; line-height: 1; }
.faq-side h3 { margin-bottom: 10px; font-size: 1.25rem; }
.faq-side p { margin-bottom: 23px; color: rgba(255,255,255,.7); font-size: .82rem; }
.faq-accordion { display: grid; gap: 13px; }
.faq-accordion .accordion-item { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.faq-accordion .accordion-button { padding: 20px 22px; color: var(--navy); background: #fff; font-size: .9rem; font-weight: 800; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(var(--primary-rgb),.045); }
.faq-accordion .accordion-body { padding: 20px 22px; color: var(--muted); border-top: 1px solid var(--border); font-size: .86rem; }

.final-cta { position: relative; isolation: isolate; padding: 100px 0; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(circle at 15% 0%, rgba(112,91,255,.28), transparent 24rem), radial-gradient(circle at 90% 85%, rgba(var(--accent-rgb),.38), transparent 27rem), linear-gradient(145deg, #040c2a, var(--navy) 48%, var(--primary-dark)); }
.final-cta-content { max-width: 850px; margin: 0 auto; }
.final-cta-content > img { width: 72px; margin-bottom: 12px; filter: drop-shadow(0 14px 25px rgba(0,0,0,.25)); }
.final-cta .kicker { color: #a4edff; }
.final-cta h2 { margin-bottom: 16px; font-size: clamp(2rem,5vw,4.1rem); }
.final-cta p { max-width: 700px; margin: 0 auto 27px; color: rgba(255,255,255,.72); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.site-footer { padding: 72px 0 20px; color: #fff; background: #040b25; }
.footer-logo { width: 210px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .92; }
.site-footer p { max-width: 560px; color: rgba(255,255,255,.62); font-size: .8rem; }
.site-footer h2 { margin-bottom: 17px; font-size: .95rem; }
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { color: rgba(255,255,255,.62); font-size: .78rem; transition: color var(--transition), padding var(--transition); }
.site-footer li a:hover { padding-right: 4px; color: #fff; }
.footer-phone { display: block; margin-bottom: 10px; color: #fff; font-size: 3rem; font-weight: 900; line-height: 1; }
.footer-whatsapp { color: #79e8ad; font-size: .82rem; font-weight: 800; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.footer-bottom p, .footer-bottom a { margin: 0; color: rgba(255,255,255,.48); font-size: .7rem; }
.footer-bottom a:hover { color: #fff; }

.mobile-actions {
  position: fixed;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 1040;
  display: grid;
  grid-template-columns: .86fr 1.28fr;
  gap: 9px;
  padding: 6px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(9, 25, 79, .09);
  border-radius: 22px;
  box-shadow: 0 22px 54px rgba(5, 16, 55, .28);
  backdrop-filter: blur(16px);
}
.mobile-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 12px;
  color: #fff;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(5, 16, 55, .17);
}
.mobile-action-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  font-size: .9rem;
}
.mobile-action-copy {
  min-width: 0;
}
.mobile-action-copy small,
.mobile-action-copy strong {
  display: block;
}
.mobile-action-copy small {
  margin-bottom: 1px;
  color: rgba(255, 255, 255, .72);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.35;
}
.mobile-action-copy strong {
  font-size: .96rem;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}
.mobile-call {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
.mobile-whatsapp {
  background: linear-gradient(135deg, #0d9955, #22c779);
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes floatCard { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(106,242,165,.14); } 50% { box-shadow: 0 0 0 9px rgba(106,242,165,.02); } }

@media (max-width: 1199.98px) {
  .brands-grid { grid-template-columns: repeat(3,1fr); }
  .card-gas, .card-electric { right: 0; }
  .card-instant { left: 0; }
}
@media (max-width: 991.98px) {
  body { padding-bottom: 80px; }
  .section-space { padding: 84px 0; }
  .site-header { background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(9,25,79,.06); backdrop-filter: blur(16px); }
  .navbar-collapse { margin-top: 12px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-md); }
  .hero-section { min-height: auto; padding: 145px 0 115px; }
  .hero-content { text-align: center; }
  .hero-lead { margin-right: auto; margin-left: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-visual { min-height: 450px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .trust-grid > div:nth-child(2)::after { display: none; }
  .brand-search { grid-template-columns: 1fr; text-align: center; }
  .brand-search-box { width: 100%; }
  .service-types-grid, .features-grid, .steps-grid { grid-template-columns: repeat(2,1fr); }
  .service-type-card:last-child { grid-column: 1/-1; }
  .steps-grid::before { display: none; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-side { position: relative; top: auto; }
}
@media (max-width: 767.98px) {
  html { scroll-padding-top: 86px; }
  body { font-size: 16px; line-height: 1.85; }
  .section-space { padding: 70px 0; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2 { font-size: clamp(1.75rem, 8vw, 2.45rem); }
  .section-heading p { font-size: .95rem; line-height: 1.9; }
  .hero-section { padding: 126px 0 95px; }
  .hero-content h1 { font-size: clamp(2.1rem, 11vw, 3.45rem); }
  .hero-lead { font-size: 1rem; line-height: 1.95; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { display: grid; grid-template-columns: 1fr; }
  .hero-trust > div { justify-content: center; }
  .hero-visual { min-height: 410px; }
  .hero-card { width: 88%; padding: 50px 24px 34px; border-radius: 30px; transform: none; }
  .hero-card img { width: 155px; }
  .orbit { display: none; }
  .floating-card { min-width: 148px; padding: 10px 12px; }
  .card-gas { top: 1%; right: 0; }
  .card-electric { right: 0; bottom: 0; }
  .card-instant { bottom: 15%; left: 0; }
  .trust-bar { margin-top: -55px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div:not(:last-child)::after { top: auto; right: 18%; bottom: 0; left: 18%; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.15), transparent); }
  .quick-answer { padding-top: 72px; }
  .quick-answer-card { grid-template-columns: 1fr; gap: 13px; padding: 24px; }
  .answer-label { width: fit-content; }
  .brands-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .brand-card > a { grid-template-columns: auto 1fr; grid-template-areas: "mark copy" "mark action"; min-height: 116px; padding: 16px; }
  .brand-arrow { display: none; }
  .service-types-grid, .features-grid, .steps-grid { grid-template-columns: 1fr; }
  .service-type-card:last-child { grid-column: auto; }
  .service-type-card, .feature-card, .step-card { padding: 24px; }
  .safety-note { grid-template-columns: 1fr; text-align: center; }
  .safety-note span { width: fit-content; margin: 0 auto; }
  .contact-section { padding: 75px 0; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card:last-child { grid-column: auto; }
  .landline-card { grid-template-columns: 1fr; }
  .landline-card span { grid-column: auto; }
  .final-cta { padding: 78px 0; }
  .final-actions .btn { width: 100%; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
  .navbar-brand img { width: 145px; }
  .head-call { padding: 8px 10px; font-size: .73rem; }
  .hero-card > a { font-size: 3.2rem; }
  .floating-card { min-width: 132px; }
  .floating-card small { font-size: .64rem; }
  .brands-grid { grid-template-columns: 1fr; }
  .brand-card > a { min-height: 104px; }
  .brand-mark { width: 48px; height: 48px; }
  .contact-main a { font-size: 3.4rem; }
  .mobile-actions { grid-template-columns: .8fr 1.2fr; }
  .mobile-actions strong { font-size: .85rem; }
}

/* Mobile typography and touch-target refinements */
@media (max-width: 767.98px) {
  body {
    font-size: 16px;
    line-height: 1.82;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  p,
  .section-heading p,
  .hero-lead,
  .service-type-card p,
  .feature-card p,
  .step-card p,
  .faq-accordion .accordion-body,
  .site-footer p {
    font-size: 1rem;
    line-height: 1.85;
  }

  .section-heading h2 {
    font-size: clamp(1.78rem, 8.6vw, 2.35rem);
    line-height: 1.32;
  }

  .hero-content h1 {
    font-size: clamp(2.05rem, 10.8vw, 3.2rem);
    line-height: 1.28;
  }

  .service-type-card h3,
  .feature-card h3,
  .step-card h3,
  .faq-side h3 {
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-copy small,
  .card-copy small,
  .contact-card-head small {
    font-size: .78rem;
    line-height: 1.55;
  }

  .btn,
  .nav-link,
  .faq-accordion .accordion-button {
    font-size: .98rem;
  }

  .btn {
    min-height: 52px;
  }

  .faq-accordion .accordion-button {
    padding: 18px;
    line-height: 1.65;
  }

  .contact-section {
    padding: 76px 0 92px;
  }

  .contact-main {
    padding: 20px;
    border-radius: 22px;
  }

  .contact-main .contact-hotline {
    margin-top: 19px;
    font-size: clamp(3.2rem, 18vw, 4.45rem);
  }

  .contact-cards {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .contact-card,
  .contact-card:last-child {
    grid-column: auto;
  }

  .contact-card {
    padding: 19px;
    border-radius: 20px;
  }

  .landline-card {
    display: block;
  }

  .contact-number-list--landline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-number {
    min-height: 50px;
    padding: 10px 9px;
    font-size: .98rem;
    letter-spacing: .015em;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 15.75px;
  }

  .hero-content h1 {
    font-size: clamp(1.95rem, 10.6vw, 2.7rem);
  }

  .section-heading h2 {
    font-size: clamp(1.65rem, 8.4vw, 2.1rem);
  }

  .contact-number-list--landline {
    grid-template-columns: 1fr;
  }

  .mobile-actions {
    right: 7px;
    bottom: 7px;
    left: 7px;
    grid-template-columns: .78fr 1.22fr;
    gap: 6px;
    padding: 5px;
    border-radius: 19px;
  }

  .mobile-actions a {
    min-height: 56px;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 15px;
  }

  .mobile-action-icon {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    font-size: .78rem;
  }

  .mobile-action-copy small {
    font-size: .58rem;
  }

  .mobile-action-copy strong {
    font-size: .82rem;
  }
}

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