/*
Theme Name: Hostyt
Theme URI: https://host.yt
Description: Hostyt — a premium, Framer-inspired child theme based on Hello Elementor. Dark-first with light mode support, glass surfaces, soft depth and a FossBilling-ready product layer.
Author: Hostyt
Author URI: https://host.yt
Template: hello-elementor
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hostyt
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ---------------------------------------------------------- Base */

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: var(--hy-bg, #030508);
	color: var(--hy-text);
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Safety: a full-viewport Elementor hero whose content is shorter than the
   viewport would otherwise leave a visible empty band before the next section. */
.elementor .e-con.e-parent[style*="--min-height:100vh"] {
	--min-height: auto;
}

::selection { background: var(--hy-primary); color: #fff; }

/* ---------------------------------------------------------- Light-mode overrides
   for hard-coded-inline-style HTML blocks on the home page.
   Inline style attributes beat normal selectors so we use !important here. */

/* Global Elementor heading + body text: page CSS hard-codes #FFFFFF,
   so we force readable dark ink in light mode. Scoped to Elementor. */
[data-theme="light"] .elementor-heading-title,
[data-theme="light"] .elementor-widget-heading h1,
[data-theme="light"] .elementor-widget-heading h2,
[data-theme="light"] .elementor-widget-heading h3,
[data-theme="light"] .elementor-widget-heading h4,
[data-theme="light"] .elementor-widget-heading h5,
[data-theme="light"] .elementor-widget-heading h6 {
	color: #0C1220 !important;
}
[data-theme="light"] .elementor-widget-text-editor,
[data-theme="light"] .elementor-widget-text-editor p,
[data-theme="light"] .elementor-widget-text-editor span:not([style*="color"]),
[data-theme="light"] .elementor-widget-icon-list .elementor-icon-list-text {
	color: #364152 !important;
}
[data-theme="light"] .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: #0C1220 !important;
}

/* Secondary Elementor buttons: light-mode styling is applied per-widget via
   Elementor Advanced → Custom CSS ([data-theme="light"] selector .elementor-button { ... })
   so each button carries its own rules. */

/* Hero infrastructure dashboard (.hy-hd2) */
[data-theme="light"] .hy-hd2 {
	background: #FFFFFF !important;
	border-color: #D9E2F0 !important;
	color: #0C1220 !important;
	box-shadow: 0 40px 80px rgba(12, 18, 32, .12) !important;
}
[data-theme="light"] .hy-hd2 > div:first-child { color: #475569 !important; border-bottom-color: #E4EAF3 !important; }
[data-theme="light"] .hy-hd2 strong { color: #0C1220 !important; }
[data-theme="light"] .hy-hd2 .hy-cyc,
[data-theme="light"] .hy-hd2 .hy-typ { color: #6B7280 !important; }
[data-theme="light"] .hy-hd2 .hy-dr {
	background: #F6F8FC !important;
	border-color: #E4EAF3 !important;
}

/* Our Stack hardware cards (.hy-hw-card) */
[data-theme="light"] .hy-hw-card {
	background: #FFFFFF !important;
	border-color: #D9E2F0 !important;
	box-shadow: 0 20px 40px rgba(12, 18, 32, .05);
}
[data-theme="light"] .hy-hw-card__sub  { color: #0C1220 !important; }
[data-theme="light"] .hy-hw-card__desc { color: #6B7280 !important; }

/* Free migration callout (.hy-mig) */
[data-theme="light"] .hy-mig {
	background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(45,212,255,0.05) 60%, #FFFFFF) !important;
	border-color: rgba(124,92,255,0.25) !important;
}
[data-theme="light"] .hy-mig__title  { color: #0C1220 !important; }
[data-theme="light"] .hy-mig__desc   { color: #364152 !important; }
[data-theme="light"] .hy-mig__icon   {
	background: rgba(124,92,255,0.12) !important;
	border-color: rgba(124,92,255,0.32) !important;
	color: #6B4AE6 !important;
}
[data-theme="light"] .hy-mig__kicker { color: #0EA5C9 !important; }
[data-theme="light"] .hy-mig__kicker::before { background: #0EA5C9 !important; box-shadow: 0 0 10px #0EA5C9 !important; }

/* Hostyt badge (used by widget; inline styles on .hostyt-badge via widget controls) */
[data-theme="light"] .hostyt-badge {
	background: #FFFFFF !important;
	color: #6B4AE6 !important;
	border-color: rgba(124,92,255,0.35) !important;
}

/* Secondary Elementor buttons (transparent with border in dark → invisible in light) */
[data-theme="light"] .elementor-button[style*="background-color:transparent"],
[data-theme="light"] .elementor-element[class*="button"] .elementor-button[style*="transparent"] {
	color: #0C1220 !important;
	border-color: #D9E2F0 !important;
}
[data-theme="light"] .elementor-button[style*="background-color:transparent"]:hover {
	background-color: #F6F8FC !important;
	border-color: #7C5CFF !important;
	color: #7C5CFF !important;
}

/* Trust-bar (.hy-trust-bar) — values already use var(--hy-text-strong) but labels can lean lighter */
[data-theme="light"] .hy-trust-label { color: #6B7280 !important; }

/* Pricing cards — hostyt-pr rows hardcode dark-ish bg; already theme-aware via widget, but safety */
[data-theme="light"] .hostyt-pr__row { background: #FFFFFF; border-color: #E4EAF3; }

/* World Map container — widget is light-aware, but the .hostyt-worldmap wrapper was
   given a dark gradient by the Elementor section; just make sure borders track theme. */
[data-theme="light"] .hostyt-worldmap__list-dot {
	background: #7C5CFF;
	box-shadow: 0 0 8px rgba(124,92,255,0.35);
}
[data-theme="light"] .hostyt-worldmap__list-item { color: #364152; }

/* ---------------------------------------------------------- Sticky glass header
   The Elementor header template renders two nested <header> tags:
     <header class="elementor elementor-location-header"> (outer, body child)
       <header class="elementor-element elementor-element-0727a6c"> (inner container)
   Sticky must apply to the OUTER (body-child) to actually stick during scroll.
   We still style the inner for the blurred glass look. */
header.elementor.elementor-location-header {
	position: sticky !important;
	top: 0;
	z-index: 100;
	isolation: isolate;
}
header.elementor.elementor-location-header > .elementor-element.elementor-element-0727a6c,
header.elementor.elementor-location-header .elementor-element.elementor-element-0727a6c {
	background: rgba(7, 11, 20, 0.65) !important;
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-bottom: 1px solid rgba(36, 49, 74, 0.45);
	transition: background .25s ease, border-color .25s ease;
}
[data-theme="light"] header.elementor.elementor-location-header > .elementor-element.elementor-element-0727a6c,
[data-theme="light"] header.elementor.elementor-location-header .elementor-element.elementor-element-0727a6c {
	background: rgba(255, 255, 255, 0.7) !important;
	border-bottom-color: rgba(217, 226, 240, 0.6);
}
/* Prevent overflow clipping on ancestors from breaking sticky */
body, html { overflow-x: clip; }

/* Give the page some breathing room under the sticky header on scroll */
html { scroll-padding-top: 80px; }

/* ---------------------------------------------------------- More than just hosting
   — dark card backgrounds hardcoded via page CSS, overridden for light. */
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-a58b7a0,
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-65081f3,
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-a58b7a0:not(.elementor-motion-effects-element-type-background),
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-65081f3:not(.elementor-motion-effects-element-type-background),
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-a58b7a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
[data-theme="light"] .elementor-3641 .elementor-element.elementor-element-65081f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #FFFFFF !important;
	border-color: #D9E2F0 !important;
	box-shadow: 0 20px 40px rgba(12, 18, 32, .05);
}

/* Chips inside Business Email (96929d9) and Domains & DNS (46b31de) */
[data-theme="light"] .elementor-3641 .elementor-element-96929d9 span,
[data-theme="light"] .elementor-3641 .elementor-element-46b31de span {
	background: #F6F8FC !important;
	border-color: #E4EAF3 !important;
}
[data-theme="light"] .elementor-3641 .elementor-element-96929d9 > div {
	color: #6B7280 !important;
}

/* ---------------------------------------------------------- Reusable classes */

.hostyt-glass {
	background: var(--hy-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--hy-border);
	border-radius: var(--hy-radius-lg);
	box-shadow: var(--hy-shadow-md);
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hostyt-glass:hover {
	transform: translateY(-6px);
	border-color: var(--hy-accent-soft);
	box-shadow: var(--hy-shadow-lg);
}

.hostyt-elevated {
	background: var(--hy-elevated);
	border: 1px solid var(--hy-border);
	border-radius: var(--hy-radius-lg);
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hostyt-elevated:hover {
	transform: translateY(-4px);
	border-color: var(--hy-primary-soft);
	box-shadow: var(--hy-shadow-md);
}

.hostyt-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--hy-border);
	border-radius: 999px;
	background: var(--hy-elevated);
	color: var(--hy-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.hostyt-cta-wrap {
	position: relative;
	overflow: hidden;
}
.hostyt-cta-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 30%);
	pointer-events: none;
}

.hostyt-orb {
	position: absolute;
	pointer-events: none;
	filter: blur(80px);
	opacity: .55;
	border-radius: 50%;
}
.hostyt-orb--primary { background: #7C5CFF; }
.hostyt-orb--accent  { background: #2DD4FF; }

/* ---------------------------------------------------------- Galaxy: default transparent sections */
/* Low specificity — any Elementor inline bg or custom class overrides this */

.elementor .e-con {
	background-color: transparent;
}

/* Scroll reveal: removed — breaks Elementor editor (elements opacity:0 until JS).
   Use Elementor's native Motion Effects → Entrance Animation on widgets instead. */

/* ---------------------------------------------------------- Elementor button polish */

.elementor-button {
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease !important;
	border-radius: 14px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
}
.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(124, 92, 255, .24);
}

.elementor-image img { transition: transform .7s ease, opacity .3s ease; }
.elementor-image:hover img { transform: scale(1.03); }

.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
	border-color: var(--hy-primary) !important;
	box-shadow: 0 0 0 3px rgba(124, 92, 255, .18) !important;
	outline: none;
}

/* ---------------------------------------------------------- Light mode adjustments */

[data-theme="light"] .hostyt-glass {
	background: var(--hy-glass);
	border-color: var(--hy-border);
}
[data-theme="light"] .hostyt-pill {
	color: var(--hy-text);
}

/* ---- Light mode: Elementor transparent containers inherit light bg ---- */
[data-theme="light"] body {
	background: var(--hy-bg);
}

/* ---- Light mode: Inline HTML dark surfaces ---- */
[data-theme="light"] [style*="background:#0E1422"],
[data-theme="light"] [style*="background: #0E1422"] {
	background: #FFFFFF !important;
}
[data-theme="light"] [style*="background:#131C2E"],
[data-theme="light"] [style*="background: #131C2E"] {
	background: #EEF3FB !important;
}
[data-theme="light"] [style*="background:#070B14"],
[data-theme="light"] [style*="background: #070B14"] {
	background: #F6F8FC !important;
}

/* ---- Light mode: Inline HTML borders ---- */
[data-theme="light"] [style*="border:1px solid #24314A"],
[data-theme="light"] [style*="border: 1px solid #24314A"],
[data-theme="light"] [style*="border-color:#24314A"],
[data-theme="light"] [style*="border-color: #24314A"] {
	border-color: #D9E2F0 !important;
}

/* ---- Light mode: Inline HTML text colors ---- */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#FFFFFF"],
[data-theme="light"] [style*="color: #FFFFFF"],
[data-theme="light"] [style*="color:#E8ECF4"],
[data-theme="light"] [style*="color: #E8ECF4"] {
	color: #0C1220 !important;
}
[data-theme="light"] [style*="color:#C7D2E3"],
[data-theme="light"] [style*="color: #C7D2E3"] {
	color: #364152 !important;
}
[data-theme="light"] [style*="color:#8A97AD"],
[data-theme="light"] [style*="color: #8A97AD"],
[data-theme="light"] [style*="color:#6B7A90"],
[data-theme="light"] [style*="color: #6B7A90"] {
	color: #6B7280 !important;
}

/* ---- Light mode: Elementor widget headings & text ---- */
[data-theme="light"] .elementor-heading-title {
	color: #0C1220 !important;
}
[data-theme="light"] .elementor-widget-text-editor {
	color: #364152 !important;
}

/* ---- Light mode: Elementor containers with dark bg set via Elementor ---- */
[data-theme="light"] .e-con {
	background-color: transparent;
}

/* ---- Light mode: Buttons keep brand colors ---- */
[data-theme="light"] .elementor-button {
	/* Primary buttons stay purple, ghost buttons adapt */
}
[data-theme="light"] .elementor-button[style*="background-color:transparent"],
[data-theme="light"] .elementor-button[style*="background-color: transparent"] {
	color: #364152 !important;
	border-color: #D9E2F0 !important;
}

/* ---- Light mode: FAQ details ---- */
[data-theme="light"] details {
	background: #FFFFFF !important;
	border-color: #D9E2F0 !important;
}
[data-theme="light"] details summary {
	color: #0C1220 !important;
}
[data-theme="light"] details > div {
	color: #364152 !important;
}

/* ---- Light mode: Stats / metric cards ---- */
[data-theme="light"] [style*="font-weight:800"][style*="color:#fff"] {
	color: #0C1220 !important;
}

/* ---- Light mode: Galaxy canvas dimmed ---- */
[data-theme="light"] #hy-galaxy {
	opacity: 0.08;
	mix-blend-mode: multiply;
}

/* ---- Light mode: CTA wrap glow ---- */
[data-theme="light"] .hostyt-cta-wrap {
	background: #FFFFFF !important;
	border-color: #D9E2F0 !important;
}
[data-theme="light"] .hostyt-cta-wrap::before {
	background: radial-gradient(circle at top right, rgba(124,92,255,0.06), transparent 40%);
}

/* ---- Light mode: Orbs ---- */
[data-theme="light"] .hostyt-orb { opacity: 0.15; }

/* ---- Light mode: Icon list items ---- */
[data-theme="light"] .elementor-icon-list-text {
	color: #364152 !important;
}
[data-theme="light"] .elementor-icon-list-icon svg {
	fill: #7C5CFF !important;
}

/* ---------------------------------------------------------- Shared components (FAQ, grids, pricing)
   These were previously inline in Elementor HTML widgets — moved here so every
   page that uses the utility classes gets the styling automatically. */

/* ---- FAQ accordion (used on every product/info page) ---- */
.hy-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 820px;
	margin: 20px auto 0;
	font-family: "Inter", sans-serif;
}
.hy-faq details {
	background: var(--hy-elevated);
	border: 1px solid var(--hy-border);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	transition: border-color .25s;
}
.hy-faq details[open] {
	border-color: var(--hy-primary-soft);
}
.hy-faq summary {
	cursor: pointer;
	padding: 22px 60px 22px 26px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--hy-text-strong);
	list-style: none;
	letter-spacing: -.2px;
	position: relative;
}
.hy-faq summary::-webkit-details-marker { display: none; }
.hy-faq summary::marker { display: none; content: ""; }
.hy-faq summary::before {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background: rgba(124, 92, 255, .12);
	border-radius: 50%;
}
.hy-faq summary::after {
	content: "";
	position: absolute;
	right: 33px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid #7C5CFF;
	border-bottom: 2px solid #7C5CFF;
	transform: rotate(45deg);
	transition: transform .25s, margin-top .25s;
}
.hy-faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.hy-faq details > div {
	padding: 0 26px 24px;
	color: var(--hy-text);
	font-size: 14px;
	line-height: 1.75;
}
.hy-faq details > div a {
	color: #7C5CFF;
	font-weight: 600;
	text-decoration: underline;
}

/* ---- Features grid (3x2 cards with icon + heading + copy) ---- */
.hy-feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	align-items: stretch;
	font-family: "Inter", sans-serif;
}
@media (max-width: 860px) { .hy-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hy-feat-grid { grid-template-columns: 1fr; } }
.hy-feat {
	background: var(--hy-elevated);
	border: 1px solid var(--hy-border);
	border-radius: 18px;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hy-feat:hover {
	transform: translateY(-4px);
	border-color: var(--hy-accent-soft);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
}
.hy-feat__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg, rgba(124, 92, 255, .12));
}
.hy-feat__h {
	font-size: 16px;
	font-weight: 700;
	color: var(--hy-text-strong);
	letter-spacing: -.3px;
}
.hy-feat__p {
	font-size: 13.5px;
	color: var(--hy-muted);
	line-height: 1.65;
}
.hy-feat__p code {
	background: rgba(124, 92, 255, .12);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
}

/* ---- Pricing cards (reused on Web/WP/Reseller/Email) ---- */
.hy-wh-pricing {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
	align-items: stretch;
	font-family: "Inter", sans-serif;
}
@media (max-width: 1100px) { .hy-wh-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hy-wh-pricing { grid-template-columns: 1fr; } }
.hy-wh-plan {
	background: var(--hy-elevated);
	border: 1px solid var(--hy-border);
	border-radius: 22px;
	padding: 32px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	transition: transform .3s, border-color .3s, box-shadow .3s;
	position: relative;
}
.hy-wh-plan:hover {
	transform: translateY(-4px);
	border-color: var(--hy-accent-soft);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .22);
}
.hy-wh-plan--feat {
	border-color: #7C5CFF;
	box-shadow: 0 30px 80px rgba(124, 92, 255, .35);
}
.hy-wh-plan__pop {
	position: absolute;
	top: -10px;
	right: 20px;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, #7C5CFF, #2DD4FF);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hy-wh-plan__name { display: flex; align-items: center; gap: 10px; }
.hy-wh-plan__ico {
	width: 34px; height: 34px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
}
.hy-wh-plan__h {
	font-size: 18px; font-weight: 700;
	color: var(--hy-text-strong); letter-spacing: -.3px;
}
.hy-wh-plan__price {
	display: flex; align-items: baseline; gap: 4px; margin-top: 4px;
}
.hy-wh-plan__big {
	font-size: 40px; font-weight: 800;
	background: linear-gradient(135deg, #2DD4FF, #7C5CFF);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	letter-spacing: -1px; line-height: 1;
}
.hy-wh-plan__per { font-size: 13px; color: var(--hy-muted); font-weight: 500; }
.hy-wh-plan__sub { font-size: 12px; color: var(--hy-muted); }
.hy-wh-plan__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hy-wh-plan__chip {
	padding: 5px 10px; border-radius: 8px;
	background: rgba(124, 92, 255, .08);
	color: var(--hy-text-strong); font-size: 12px; font-weight: 600;
}
.hy-wh-plan__chip--ok { background: rgba(20, 209, 155, .12); color: #14D19B; }
.hy-wh-plan__list {
	list-style: none; padding: 0; margin: 6px 0 0;
	display: flex; flex-direction: column; gap: 8px;
	font-size: 13.5px; color: var(--hy-text); flex: 1;
}
.hy-wh-plan__list li { display: flex; gap: 8px; align-items: flex-start; }
.hy-wh-plan__list svg { flex: 0 0 16px; margin-top: 2px; }
.hy-wh-plan__btn {
	margin-top: auto; display: block; text-align: center;
	padding: 12px 18px; border-radius: 12px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	transition: transform .25s, box-shadow .25s, background .25s;
}
.hy-wh-plan__btn--g {
	background: rgba(124, 92, 255, .12); color: #9B87FF;
	border: 1px solid rgba(124, 92, 255, .3);
}
.hy-wh-plan__btn--g:hover { background: rgba(124, 92, 255, .2); }
.hy-wh-plan__btn--p {
	background: #7C5CFF; color: #fff;
	box-shadow: 0 16px 36px rgba(124, 92, 255, .45);
}
.hy-wh-plan__btn--p:hover { background: #9B87FF; transform: translateY(-2px); }

/* ---- Stats / metric grid (Technology, About, Contact) ---- */
.hy-net-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	align-items: stretch;
	font-family: "Inter", sans-serif;
}
@media (max-width: 900px) { .hy-net-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hy-net-grid { grid-template-columns: 1fr; } }
.hy-net-c {
	background: var(--hy-elevated);
	border: 1px solid var(--hy-border);
	border-radius: 16px;
	padding: 24px;
	display: flex; flex-direction: column; gap: 6px;
	height: 100%;
	transition: border-color .3s, transform .3s;
}
.hy-net-c:hover { border-color: var(--hy-accent-soft); transform: translateY(-3px); }
.hy-net-c__v {
	font-size: 32px; font-weight: 800;
	background: linear-gradient(135deg, #7C5CFF, #2DD4FF);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	letter-spacing: -1px; line-height: 1;
}
.hy-net-c__u { font-size: 13px; color: var(--hy-muted); font-weight: 500; margin-bottom: 8px; }
.hy-net-c__h { font-size: 14px; color: var(--hy-text-strong); font-weight: 700; letter-spacing: -.2px; }
.hy-net-c__d { font-size: 12px; color: var(--hy-muted); line-height: 1.5; }

/* ---------------------------------------------------------- Global polish
   Rhythm, alternating section tint, pill centering, step badge calming,
   inline grid centering, equal card heights. */

/* Cap boxed sections at 1180px and center */
.elementor .e-con.e-con-boxed,
.elementor .e-con-inner {
	max-width: 1180px !important;
	margin-left: auto;
	margin-right: auto;
}

/* Subtle alternating section background for visual rhythm */
[data-elementor-type="wp-page"] > section.e-con:nth-of-type(even),
[data-elementor-type="wp-page"] > .e-con:nth-of-type(even) {
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(124, 92, 255, .012) 40%,
		rgba(124, 92, 255, .012) 60%,
		transparent 100%);
}

/* Pills — centered by default, consistent letter-spacing */
.hostyt-pill { display: inline-flex; letter-spacing: .12em; }
.elementor-widget-html .hostyt-pill { display: inline-flex; }

/* Any inline grid with max-width auto-centered */
.hy-perf-grid, .hy-stack, .hy-cmp, .hy-tld-grid, .hy-os-grid,
.hy-kb-cats, .hy-kb-list, .hy-ct-grid, .hy-val, .hy-wh-inc,
.hy-steps, .hy-why-t, .hy-loc-wrap {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Equal heights on any grid children */
.hy-feat-grid, .hy-net-grid, .hy-wh-pricing, .hy-kb-cats,
.hy-ct-grid, .hy-val, .hy-stack, .hy-os-grid, .hy-perf-grid, .hy-wh-inc {
	align-items: stretch;
}
.hy-feat, .hy-net-c, .hy-wh-plan, .hy-kb-cat, .hy-ct,
.hy-val__c, .hy-stack__c, .hy-os-tile, .hy-perf-cell, .hy-wh-inc__c {
	height: 100%;
}

/* Step-flow number badges — calmer size */
.hy-step { padding-top: 36px; }
.hy-step__num {
	width: 36px !important;
	height: 36px !important;
	font-size: 14px !important;
	top: -18px !important;
	left: 26px !important;
}

/* Heading defaults */
.elementor-heading-title { margin: 0; }

/* Mobile polish */
@media (max-width: 600px) {
	.hy-feat, .hy-wh-plan, .hy-net-c {
		padding: 22px 20px;
	}
	.hy-faq summary {
		padding: 18px 52px 18px 20px;
		font-size: 14px;
	}
	.hy-faq details > div {
		padding: 0 20px 18px;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hostyt-glass, .hostyt-elevated, .elementor-button, .elementor-image img {
		transition: none !important;
	}
}