/* =========================================================================
   WTL TECH — sections.css  (section components; loaded after main.css)
   ========================================================================= */

/* ---------- Glass utility ---------- */
.glass { background: rgba(255, 255, 255, .055); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }

/* ---------- Hero ---------- */
/* position:relative was missing here (bug): the inherited .section--glow::before
   glow had no positioned ancestor to anchor to and escaped to the page's initial
   containing block instead of staying confined to the hero box. Also required
   now to host the network-canvas backdrop and technical grid layer below. */
.hero { position: relative; padding-block: clamp(40px, 6vw, 76px) clamp(56px, 8vw, 110px); overflow: hidden; }
.hero__net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .6; }
/* Faint technical grid, fading toward the edges so it reads as infrastructure
   texture rather than a literal graph-paper background. */
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(153, 202, 224, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(153, 202, 224, .06) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask-image: radial-gradient(72% 65% at 50% 38%, #000 40%, transparent 78%);
	mask-image: radial-gradient(72% 65% at 50% 38%, #000 40%, transparent 78%);
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__title { font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -.03em; margin-top: 4px; }
.lang-ar .hero__title { letter-spacing: 0; }
.hero__lead { margin-top: 22px; font-size: clamp(16px, 1.7vw, 20px); color: var(--muted); max-width: 46ch; }
.hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.hero__trust .wtl-icon { width: 16px; height: 16px; color: var(--cyan); }

/* ---------- Hero orbital system scene ----------
   The mark is the core of a live system: containment rings, five service
   pillars orbiting as network nodes, data pulses travelling the links.
   Node coordinates are generated once in template-parts/hero.php and used for
   BOTH the SVG lines and the HTML nodes, so the two can never drift apart. */
.hero__visual {
	position: relative; z-index: 1; display: grid; place-items: center;
	/* Pointer parallax (--mx/--my) and scroll parallax (--sy) compose in one
	   transform; both default to 0 so this is inert without JS or on touch. */
	transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px + var(--sy, 0) * .07px), 0);
	transition: transform .5s var(--ease-out);
}
.hero__scene { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1; margin-inline-start: auto; }

.hero__orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__ring { fill: none; stroke: rgba(120, 190, 225, .16); stroke-width: 1; transform-origin: 50% 50%; }
.hero__ring--1 { stroke-dasharray: 3 9; animation: wtl-spin 46s linear infinite; }
.hero__ring--2 { stroke-dasharray: 2 14; stroke: rgba(120, 190, 225, .13); animation: wtl-spin 72s linear infinite reverse; }
.hero__ring--3 { stroke-dasharray: 1 18; stroke: rgba(120, 190, 225, .10); animation: wtl-spin 100s linear infinite; }
@keyframes wtl-spin { to { transform: rotate(360deg); } }

.hero__link { stroke: rgba(120, 190, 225, .20); stroke-width: 1; }
.hero__pulse {
	stroke: url(#wtl-link); stroke-width: 2.4; stroke-linecap: round;
	stroke-dasharray: 18 520; stroke-dashoffset: 538;
	animation: wtl-travel 3.6s var(--ease) infinite;
}
.hero__pulse--1 { animation-delay: .7s; }
.hero__pulse--2 { animation-delay: 1.4s; }
.hero__pulse--3 { animation-delay: 2.1s; }
.hero__pulse--4 { animation-delay: 2.8s; }
@keyframes wtl-travel { to { stroke-dashoffset: 0; } }

/* Core: the mark inside a glowing containment disc. The logo itself is never
   recoloured or distorted — only lit from behind and swept with a highlight. */
.hero__core {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 46%; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(58, 190, 232, .22) 0%, rgba(43, 177, 222, .10) 45%, transparent 70%);
	animation: wtl-core 9s ease-in-out infinite alternate;
}
.hero__core::before {
	content: ""; position: absolute; inset: -6%; border-radius: 50%;
	border: 1px solid rgba(120, 200, 235, .30);
	box-shadow: 0 0 70px -18px rgba(43, 177, 222, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
@keyframes wtl-core { from { transform: translate(-50%, -50%) scale(.97); } to { transform: translate(-50%, -50%) scale(1.04); } }

/* Lit, not shadowed: a cyan glow reads as an illuminated core, whereas a
   black drop-shadow at this size renders as a muddy disc behind the mark. */
.hero__mark { position: relative; width: 84%; filter: drop-shadow(0 0 26px rgba(95, 214, 242, .38)) drop-shadow(0 12px 26px rgba(2, 12, 25, .45)); }
.hero__core::after {
	content: ""; position: absolute; left: 8%; top: 8%; width: 84%; height: 84%;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
	background-size: 260% 260%; background-position: 130% 0;
	mix-blend-mode: overlay; pointer-events: none;
	-webkit-mask-image: url(../img/logo-mark.png); mask-image: url(../img/logo-mark.png);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	animation: wtl-sweep 6s ease-in-out infinite;
}
@keyframes wtl-sweep { 0%, 32% { background-position: 130% 0; } 72%, 100% { background-position: -45% 0; } }

/* Orbiting service nodes */
.hero__node-chip {
	position: absolute; transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	animation: wtl-bob 7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.hero__node-dot {
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	color: var(--cyan-2);
	background: linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
	border: 1px solid rgba(120, 200, 235, .28);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 16px 34px -18px rgba(2, 10, 22, .8), inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 24px -10px rgba(43, 177, 222, .55);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero__node-dot .wtl-icon { width: 23px; height: 23px; }
.hero__node-chip:hover .hero__node-dot { transform: scale(1.1); box-shadow: 0 18px 38px -16px rgba(2, 10, 22, .8), 0 0 34px -8px rgba(43, 177, 222, .8); }
.hero__node-label {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); white-space: nowrap;
}
.lang-ar .hero__node-label { letter-spacing: .02em; font-size: 10.5px; }
@keyframes wtl-bob { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-8px); } }

/* ---------- Hero stats bar ---------- */
.hero__stats {
	position: relative; z-index: 2; margin-top: clamp(28px, 4vw, 52px);
	display: grid; grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
	background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	box-shadow: var(--shadow), inset 0 1px 0 var(--hairline-top);
}
.hero__stat { padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2vw, 28px); position: relative; }
.hero__stat + .hero__stat::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
	width: 1px; background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.hero__stat-num { display: flex; align-items: baseline; font-family: var(--font-display); line-height: 1; }
.hero__stat-num b { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; color: #fff; }
.hero__stat-num i { font-style: normal; font-size: .58em; font-weight: 600; line-height: 1; color: var(--cyan); margin-inline-start: 3px; align-self: flex-start; margin-top: .12em; }
.hero__stat-label { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }

@keyframes wtl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Marquee ---------- */
.partners-strip { border-block: 1px solid var(--line-2); }
.partners-strip__head { text-align: center; margin-bottom: 22px; }
.partners-strip__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.lang-ar .partners-strip__label { letter-spacing: .04em; }

.marquee { position: relative; overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: inline-flex; gap: 14px; padding-block: 4px; white-space: nowrap; will-change: transform; animation: wtl-marq 46s linear infinite; }
.marquee__track--reverse { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee__row:hover .marquee__track { animation-play-state: paused; }
@keyframes wtl-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee--rows { display: flex; flex-direction: column; gap: 14px; }
.marquee__row { overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track--chips { display: inline-flex; gap: 14px; animation: wtl-marq 66s linear infinite; }

.logo-chip { flex: none; min-width: 200px; padding: 15px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 5px; transition: border-color .25s var(--ease), background .25s var(--ease); }
.marquee__track--chips .logo-chip:hover { border-color: rgba(95, 214, 242, .5); background: rgba(43, 177, 222, .06); }
.logo-chip__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; }
.logo-chip__sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.logo-chip__img { max-height: 40px; width: auto; }
.clients__foot { margin-top: 36px; text-align: center; }

/* ---------- Service cards ---------- */
.cards--services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.card--service { position: relative; background: #fff; border: 1px solid var(--line-ink); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card--service:hover { transform: translateY(-6px); border-color: rgba(43, 177, 222, .5); box-shadow: 0 30px 60px -30px rgba(12, 40, 70, .35); }
.card__index { position: absolute; inset-inline-end: 22px; top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--teal); opacity: .5; }
.card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(43, 177, 222, .16), rgba(30, 110, 140, .1)); color: var(--teal); }
.card__icon .wtl-icon { width: 28px; height: 28px; }
.card__title { font-size: 21px; color: var(--ink-text); }
.card__text { color: var(--ink-muted); font-size: 15px; line-height: 1.65; flex: 1; }
.card__link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 600; font-size: 14.5px; }
.card__link .wtl-icon { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.card--service:hover .card__link .wtl-icon { transform: translateX(4px); }
.lang-ar .card--service:hover .card__link .wtl-icon { transform: translateX(-4px); }

/* ---------- Why + stats ---------- */
.why__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.why__list { margin-top: 26px; }
.why__list li { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line-2); color: var(--text); font-size: 16.5px; }
.why__list .wtl-icon { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--navy); padding: clamp(22px, 3vw, 32px); }
.stat__num { display: flex; align-items: baseline; font-family: var(--font-display); }
.stat__num b { font-size: clamp(38px, 5vw, 54px); color: #fff; line-height: 1; font-weight: 600; }
.stat__num i { font-style: normal; font-size: .55em; color: var(--cyan); margin-inline-start: 3px; }
.stat__label { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }

/* ---------- Sectors ---------- */
.sectors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sector { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 16px; text-align: center; background: #fff; border: 1px solid var(--line-ink); border-radius: var(--r); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sector:hover { transform: translateY(-5px); border-color: rgba(43, 177, 222, .5); box-shadow: 0 24px 46px -26px rgba(12, 40, 70, .3); }
.sector__icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(43, 177, 222, .14), rgba(30, 110, 140, .08)); color: var(--teal); }
.sector__icon .wtl-icon { width: 27px; height: 27px; }
.sector__name { font-weight: 600; font-size: 14.5px; color: var(--ink-text); }

/* ---------- Vendors ---------- */
.vendors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; }
.vendor { background: #fff; border: 1px solid var(--line-ink); border-radius: var(--r); padding: 24px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.vendor:hover { transform: translateY(-5px); border-color: rgba(43, 177, 222, .5); }
.vendor__img { max-height: 42px; width: auto; }
.vendor__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink-text); }
.vendor__cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Vision 2030 (green accent scope) ---------- */
.vision { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ink), #051710 130%); }
.vision::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 60% at 82% 8%, rgba(42, 165, 121, .16), transparent 62%); pointer-events: none; }
.vision > .wrap { position: relative; z-index: 1; }
.eyebrow--green { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #4fc79a; margin-bottom: 18px; }
.lang-ar .eyebrow--green { letter-spacing: .04em; }
.eyebrow--green .eyebrow__dot { background: var(--green); box-shadow: 0 0 0 4px rgba(42, 165, 121, .2); }
.vision__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.vision__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vision-pillar { background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.vision-pillar:hover { transform: translateY(-4px); border-color: rgba(42, 165, 121, .45); }
.vision-pillar__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(42, 165, 121, .14); color: #5fd0a6; margin-bottom: 16px; }
.vision-pillar__icon .wtl-icon { width: 26px; height: 26px; }
.vision-pillar__title { font-size: 18px; color: #fff; margin-bottom: 8px; }
.vision-pillar__text { color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
.contact__list { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.contact__list li { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.contact__ic { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--cyan); flex: none; }
.contact__list a:hover { color: var(--text); }
.contact__form-wrap { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); }

.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field textarea { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; color: var(--text); transition: border-color .2s var(--ease), background .2s var(--ease); font-size: 15px; font-family: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); background: rgba(255, 255, 255, .06); }
.field textarea { resize: vertical; min-height: 118px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__notice { padding: 13px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.form__notice.is-ok { background: rgba(42, 165, 121, .12); border: 1px solid rgba(42, 165, 121, .4); color: #7fe0b8; }
.form__notice.is-warn { background: rgba(214, 170, 70, .12); border: 1px solid rgba(214, 170, 70, .4); color: #e8c988; }
.form__notice.is-err { background: rgba(232, 93, 66, .12); border: 1px solid rgba(232, 93, 66, .4); color: #f2a293; }
.form .btn { align-self: flex-start; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(60px, 9vw, 120px) clamp(40px, 6vw, 64px); }
.page-hero__in { max-width: 820px; }
.page-hero__title { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.02em; margin-top: 6px; }
.lang-ar .page-hero__title { letter-spacing: 0; }
.page-hero__lead { margin-top: 18px; font-size: clamp(16px, 1.7vw, 19px); color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hero__grid, .why__grid, .contact__grid { grid-template-columns: 1fr; }
	/* width:100% is required, not decorative: `margin-inline:auto` cancels a
	   grid item's default stretch, so without an explicit width this box is
	   sized by its content — and its only in-flow child (.hero__scene) is
	   itself width:100%, making the resolution circular and collapsing the
	   entire scene to 0x0. */
	.hero__visual { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
	.hero__stats { grid-template-columns: 1fr 1fr; }
	/* With two columns the vertical rule must only sit on the right-hand cell
	   of each row, otherwise it draws down the middle of the wrapped row too. */
	.hero__stat:nth-child(odd)::before { display: none; }
	.hero__stat:nth-child(n + 3)::after {
		content: ""; position: absolute; inset-inline: 10%; top: 0; height: 1px;
		background: linear-gradient(90deg, transparent, var(--line), transparent);
	}
	.vision__grid { grid-template-columns: repeat(2, 1fr); }
	.sectors__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.form__row { grid-template-columns: 1fr; }
}

/* ---------- Micro-motion: icons breathe on card hover ---------- */
.card__icon, .sector__icon, .vision-pillar__icon, .contact__ic { transition: transform .35s var(--ease-out); }
.card--service:hover .card__icon,
.sector:hover .sector__icon,
.vision-pillar:hover .vision-pillar__icon { transform: scale(1.09) rotate(-4deg); }
.contact__list li:hover .contact__ic { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
	.marquee__track, .marquee__track--chips { animation: none !important; }
	.hero__ring, .hero__pulse, .hero__core, .hero__core::after, .hero__node-chip { animation: none !important; }
	/* .hero__core keeps its centring transform; only the breathing scale is dropped. */
	.hero__core { transform: translate(-50%, -50%) !important; }
	.hero__node-chip { transform: translate(-50%, -50%) !important; }
	.hero__visual { transform: none !important; transition: none !important; }
	.hero__pulse { stroke-dashoffset: 0 !important; opacity: .35; }
	.card__icon, .sector__icon, .vision-pillar__icon, .contact__ic { transition: none !important; transform: none !important; }
}
@media (max-width: 900px) {
	.hero__net { display: none; } /* canvas particle backdrop: desktop/tablet only, see hero-fx.js */
}