/* ==========================================================================
   Central Gas — "sky & glass" skin. Loaded after main.css (and landing.css
   is followed by landing-skin.css). Logical properties throughout so the
   Farsi (RTL) version mirrors automatically.
   ========================================================================== */

/* Brand logo -------------------------------------------------------------- */
.brand-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; text-decoration: none; }
.brand-logo__text { display: flex; flex-direction: column; gap: 4px; direction: ltr; text-align: start; } /* the name is English in both languages */
.brand-logo__text strong { font: 800 1.25rem/1 var(--font-head); color: var(--navy); letter-spacing: -.02em; white-space: nowrap; }
.brand-logo__text small { font: 600 .6875rem/1.1 var(--font-body); color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.brand-logo--footer .brand-logo__text strong { color: #fff; }
.brand-logo--footer .brand-logo__text small { color: #c3d0f0; }
.site-footer__brand .brand-logo { margin-block-end: 18px; }

.logo-anim { position: relative; display: block; width: 88px; aspect-ratio: 600 / 376; flex: none; direction: ltr; } /* the artwork is never mirrored */
.brand-logo--footer .logo-anim { width: 120px; }
.logo-anim img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.logo-anim__flame { transform-origin: 50% 72%; animation: cg-flame 2.4s ease-in-out infinite; }
.logo-anim__water { transform-origin: 50% 85%; animation: cg-water 3.6s ease-in-out infinite; }
.logo-anim__drop {
	position: absolute; left: 54.5%; top: 61.9%;
	width: 3.2%; aspect-ratio: 3 / 4; margin-left: -1.6%;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: radial-gradient(circle at 35% 35%, #ffd0d0, #e33 45%, #b11f1f);
	opacity: 0;
	animation: cg-drop 6s cubic-bezier(.5, 0, .9, .5) infinite;
}
@keyframes cg-flame {
	0%, 100% { transform: scale(1, 1); filter: brightness(1); }
	30% { transform: scale(1.01, 1.035); filter: brightness(1.08); }
	60% { transform: scale(.995, .985); filter: brightness(.97); }
}
@keyframes cg-water {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-1.5%) rotate(-.6deg); }
}
@keyframes cg-drop {
	0%, 78% { opacity: 0; transform: translateY(0) scale(.4); }
	84% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(420%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-anim__flame, .logo-anim__water, .logo-anim__drop { animation: none; }
}
@media (max-width: 640px) {
	.logo-anim { width: 64px; }
	.brand-logo--header .brand-logo__text strong, .brand-logo--landing .brand-logo__text strong { font-size: 1.0625rem; }
	.brand-logo--header .brand-logo__text small, .brand-logo--landing .brand-logo__text small { display: none; }
}

/* Tokens ------------------------------------------------------------------ */
:root {
	--ink-body: #0f1b3d;
	--sky-halo: radial-gradient(90% 60% at 85% 0%, #d9efff 0%, #eef6ff 40%, rgb(255 255 255 / 0) 75%);
	--glass: linear-gradient(145deg, rgb(255 255 255 / .88), rgb(255 255 255 / .55));
	--glass-line: rgb(255 255 255 / .95);
	--glass-shadow: 0 24px 50px -28px rgb(30 58 138 / .30), 0 2px 6px -2px rgb(30 58 138 / .06), inset 0 1px 0 #fff;
	--radius: 20px;
	--radius-lg: 28px;
	--shadow: 0 18px 40px -22px rgb(30 58 138 / .30);
	--ease: cubic-bezier(.22, .61, .21, 1);
}
body { color: var(--ink-body); }
h1, h2, h3, h4 { color: var(--navy); letter-spacing: -.025em; font-weight: 800; }
.lang-fa h1, .lang-fa h2, .lang-fa h3, .lang-fa h4 { letter-spacing: 0; }

.glass {
	background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: var(--glass-shadow);
}

/* Header ------------------------------------------------------------------ */
.topbar { background: var(--navy); }
.site-header {
	background: rgb(255 255 255 / .75);
	-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
	border-block-end: 1px solid rgb(30 58 138 / .06);
}
.brand img { width: auto; } /* the logo sizes itself (.logo-anim) */
.admin-bar .site-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { inset-block-start: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { inset-block-start: 0; } } /* the admin bar scrolls away here */

/* Buttons ----------------------------------------------------------------- */
.btn { font-weight: 700; letter-spacing: -.005em; }
.btn--red { box-shadow: 0 12px 28px -12px rgb(214 40 40 / .65); }
.btn--light, .btn--ghost-dark {
	--bg: #fff; --bg-h: #fff; --fg: var(--navy);
	border: 1px solid rgb(30 58 138 / .08); box-shadow: 0 8px 22px -12px rgb(30 58 138 / .35);
}
.eyebrow--light { background: #fff; color: var(--navy); border: 1px solid rgb(30 58 138 / .08); box-shadow: 0 6px 16px -10px rgb(30 58 138 / .4); }

/* Sections & cards -------------------------------------------------------- */
.site-main { background: var(--sky-halo) no-repeat, #fff; }
.section--tint { background: linear-gradient(180deg, #f3f8ff, #fff); }
.section--navy { background: radial-gradient(120% 120% at 0% 0%, #e3f1ff, #f4f9ff 55%, #fff); color: var(--ink-body); }
.section--navy h2, .section--navy h3 { color: var(--navy); }
.section--navy .section__lead { color: var(--muted); }
.section__head--light .section__title { color: var(--navy); }

.service-card, .reason, .step, .faq__item, .tool, .price-tile {
	background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: var(--glass-shadow);
}
.service-card:hover, .reason:hover, .tool:hover { box-shadow: 0 36px 60px -30px rgb(30 58 138 / .42); border-color: #fff; }
.service-card__icon { background: linear-gradient(145deg, #e6f3ff, #fff); color: var(--navy); box-shadow: 0 10px 20px -12px rgb(47 164 231 / .6); }
.reason:hover { background: #fff; }
.step__text { color: var(--muted); }
.step:not(:last-child)::after { border-color: rgb(30 58 138 / .18); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: linear-gradient(160deg, var(--navy), var(--navy-900)); }

/* Hero -------------------------------------------------------------------- */
.hero {
	color: var(--ink-body);
	background: radial-gradient(80% 90% at 88% 8%, #d4ecff 0%, #eaf5ff 40%, rgb(255 255 255 / 0) 78%), linear-gradient(180deg, #f7fbff, #fff);
	padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 88px);
}
.hero__glow--flame { opacity: .16; }
.hero__glow--water { opacity: .3; }
.hero__title { color: var(--navy); font-weight: 800; letter-spacing: -.035em; }
.lang-fa .hero__title { letter-spacing: 0; }
.hero__title .text-flame { background: linear-gradient(100deg, #f77f00, #d62828); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { color: var(--muted); }
.hero__trust { color: var(--ink-2); }
.hero__trust .icon { color: var(--green); }
.hero .eyebrow { background: #fff; color: var(--navy); border: 1px solid rgb(30 58 138 / .1); box-shadow: 0 6px 16px -10px rgb(30 58 138 / .4); }
.hero .pc-check {
	background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink-body);
}
.hero .pc-check__label .icon { color: var(--red); }
.hero .pc-check__input { border-color: var(--line); background: #fff; }
.hero .pc-check__input:focus { border-color: var(--navy); }

.hero__visual { aspect-ratio: 1; }
.hero3d { position: absolute; inset: -4%; }
.hero3d__still, .hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero3d__canvas { opacity: 0; transition: opacity .8s var(--ease); }
.hero3d.is-live .hero3d__canvas { opacity: 1; }
.hero3d__still { transition: opacity .8s var(--ease); }
.hero3d.is-live .hero3d__still { opacity: 0; }
.float-card.glass { padding: 12px 16px; border-radius: 18px; color: var(--ink-body); }
.float-card.glass strong { color: var(--navy); }
@media (max-width: 960px) {
	.hero__visual { max-width: 420px; margin-inline: auto; }
}