/* 1HOST refresh 2026-10 — modern cards, softer buttons, light motion hooks. Colours = existing brand. */
@font-face { font-family: "Commissioner"; src: url("../fonts/commissioner-greek.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; src: url("../fonts/commissioner-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--oh-blue: #1e95d1;
	--oh-blue-dark: #0f6fa3;
	--oh-navy: #012e44;
	--oh-line: #e3ebf2;
	--oh-radius: 14px;
	--oh-shadow: 0 1px 2px rgba(1, 46, 68, .06), 0 6px 18px rgba(1, 46, 68, .07);
	--oh-shadow-up: 0 2px 4px rgba(1, 46, 68, .08), 0 16px 36px rgba(1, 46, 68, .14);
}

h1, h2, h3, h4, h5,
.elementor-heading-title,
.product-title,
.elementor-icon-box-title,
.elementor-image-box-title { font-family: "Commissioner", "Roboto", system-ui, sans-serif !important; letter-spacing: -0.01em; }
h1, .elementor-widget-wdes-section-header-widget h2 { font-weight: 700; }

/* ---------- Pricing cards (WHMCS plugin) ---------- */
.service-tabs-data .products > .product, .service-data .products-group > .product {
	background: #fff;
	border: 1px solid var(--oh-line);
	border-radius: var(--oh-radius);
	box-shadow: var(--oh-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-tabs-data .products > .product:hover, .service-data .products-group > .product:hover,
.service-tabs-data .products > .product:focus-within, .service-data .products-group > .product:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--oh-shadow-up);
	border-color: rgba(30, 149, 209, .45);
}
.service-tabs-data .product-title, .service-data .product-title { font-weight: 700; }
.service-tabs-data .price, .service-data .price { font-weight: 700; color: var(--oh-navy); }
.service-tabs-data .features-items, .service-data .features-items { transition: color .2s ease; }
.service-tabs-data .features-items .fa-check, .service-data .features-items .fa-check { color: var(--oh-blue); }
/* Packages pages: the cards touch each other; a gap lets the rounded, shadowed cards read as cards. */
.service-data .products-group { row-gap: 20px; }
@media (min-width: 1200px) {
	.service-data .products-group { column-gap: 16px; flex-wrap: nowrap; }
	.service-data .products-group > .col-xl-3 { flex: 1 1 0; max-width: calc(25% - 12px); }
}

/* ---------- Buttons ---------- */
.product-button,
.elementor-button {
	border-radius: 999px !important;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.product-button:hover,
.elementor-button:hover {
	background-color: var(--oh-blue-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(30, 149, 209, .35);
}
.product-button:focus-visible,
.elementor-button:focus-visible,
a:focus-visible { outline: 3px solid rgba(30, 149, 209, .5); outline-offset: 2px; }

/* ---------- Feature boxes ---------- */
.elementor-widget-icon-box .elementor-widget-container,
.elementor-widget-image-box .elementor-widget-container {
	border-radius: var(--oh-radius);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.elementor-widget-icon-box:hover .elementor-widget-container,
.elementor-widget-image-box:hover .elementor-widget-container {
	transform: translateY(-4px);
	background-color: #fff;
	box-shadow: var(--oh-shadow);
}
.elementor-widget-icon-box .elementor-icon { transition: transform .3s ease; }
.elementor-widget-icon-box:hover .elementor-icon { transform: scale(1.08); }
.elementor-widget-image-box img { transition: transform .4s ease; }
.elementor-widget-image-box:hover img { transform: scale(1.04); }

/* ---------- FAQ / accordion ---------- */
.elementor-accordion .elementor-accordion-item,
.elementor-toggle .elementor-toggle-item { border-radius: 10px; overflow: hidden; }

/* ---------- Motion hooks (JS adds .oh-motion only when motion is allowed) ---------- */
.oh-motion .oh-reveal { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
	.service-tabs-data .products > .product, .service-data .products-group > .product,
	.product-button, .elementor-button,
	.elementor-widget-icon-box .elementor-widget-container,
	.elementor-widget-image-box .elementor-widget-container,
	.elementor-widget-image-box img,
	.elementor-widget-icon-box .elementor-icon { transition: none !important; transform: none !important; }
}
@media (hover: none) {
	.service-tabs-data .products > .product:hover, .service-data .products-group > .product:hover,
	.elementor-widget-icon-box:hover .elementor-widget-container,
	.elementor-widget-image-box:hover .elementor-widget-container { transform: none; }
}

/* ===================== Phase 2 (19/10): header, hero, dark sections, footer ===================== */
:root { --oh-deep: #062638; --oh-deep-2: #0a3550; }

/* Header: frosted glass, soft edge instead of the hard dark line */
#Top_bar { border-bottom: 1px solid rgba(1, 46, 68, .08) !important; transition: box-shadow .3s ease, background-color .3s ease; }
#Top_bar.element-is-sticky, .sticky-element-cloned { box-shadow: 0 8px 30px rgba(1, 46, 68, .10); }
@media (min-width: 992px) {
	#Top_bar { background-color: rgba(255, 255, 255, .86) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
	#menu-header > li > a:not(.supportbutton):not(.loginbutton) {
		background: linear-gradient(var(--oh-blue), var(--oh-blue)) 0 calc(100% + 6px) / 0 2px no-repeat;
		transition: background-size .25s ease, color .2s ease;
	}
	#menu-header > li:hover > a:not(.supportbutton):not(.loginbutton), #menu-header > li > a:not(.supportbutton):not(.loginbutton):focus-visible { background-size: 100% 2px; color: var(--oh-blue) !important; }
}
#Top_bar .supportbutton, #Top_bar .loginbutton {
	border-radius: 999px !important;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#Top_bar .supportbutton:hover, #Top_bar .loginbutton:hover { background-color: var(--oh-blue-dark) !important; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(30, 149, 209, .35); }

/* Home hero: living gradient with soft light, floating illustration */
.elementor-element-23c05315 > .elementor-background-overlay {
	background:
		radial-gradient(55% 75% at 82% 18%, rgba(255, 255, 255, .20), transparent 60%),
		radial-gradient(45% 60% at 8% 95%, rgba(1, 46, 68, .38), transparent 70%),
		linear-gradient(135deg, #2aa8e2 0%, #1e95d1 42%, #0c679c 100%) !important;
	background-size: 140% 140%, 140% 140%, 100% 100% !important;
	animation: oh-glow 14s ease-in-out infinite alternate;
}
@keyframes oh-glow { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 100% 60%, 0% 40%, 0 0; } }
.elementor-element-23c05315 .elementor-widget-image img { animation: oh-float 6s ease-in-out infinite; will-change: transform; }
@keyframes oh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Dark sections and footer: deep brand navy instead of flat grey-black */
.elementor-section.elementor-element-cee3055,
.elementor-section.elementor-element-3d28116,
.elementor-section.elementor-element-ee27a79,
.elementor-section.elementor-element-47a41f99,
.elementor-section.elementor-element-84ea628,
.elementor-section.elementor-element-cbfa2d4,
.elementor-section.elementor-element-8ab5166,
.elementor-section.elementor-element-33c2274,
.elementor-section.elementor-element-9844a93,
.elementor-section.elementor-element-7981834,
.elementor-section.elementor-element-a4335d3,
.elementor-section.elementor-element-bfdefcc,
.elementor-section.elementor-element-d1621e6,
.elementor-section.elementor-element-ddf3a92,
.elementor-section.elementor-element-0eb1093,
.elementor-section.elementor-element-41af1a7,
.elementor-section.elementor-element-dc55477,
.elementor-section.elementor-element-b609808,
.elementor-section.elementor-element-415a4f5
 { background-color: var(--oh-deep) !important; background-image: linear-gradient(180deg, var(--oh-deep-2) 0%, var(--oh-deep) 100%) !important; }
.maindivfooter a, .elementor-element-8ab5166 a, .elementor-element-33c2274 a { transition: color .2s ease, padding-left .2s ease; }
.maindivfooter .elementor-icon-list-item a:hover, .maindivfooter li a:hover, .maindivfooter p a:hover { color: #6cc8f2 !important; padding-left: 4px; }

/* Domain search: pill field with a soft glow */
.domain-search-area-main .sea-dom { border-radius: 999px 0 0 999px !important; padding-left: 26px !important; }
.domain-search-area-main .reg-dom { border-radius: 0 999px 999px 0 !important; transition: background-color .2s ease; }
.domain-search-area-main .reg-dom:hover { background-color: var(--oh-blue-dark) !important; }
.domain-search-area-main { border-radius: 999px; box-shadow: 0 10px 40px rgba(30, 149, 209, .28); }

/* Cookie bar: floating card */
@media (min-width: 768px) {
	#moove_gdpr_cookie_info_bar { left: 16px !important; right: 16px !important; bottom: 16px !important; width: auto !important; border-radius: 16px; box-shadow: 0 12px 40px rgba(1, 46, 68, .18); border: 1px solid var(--oh-line) !important; }
}

/* Hero entrance (JS adds .oh-hero-in; transform only, text is never invisible) */
.oh-motion .oh-hero-item { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.elementor-element-23c05315 > .elementor-background-overlay, .elementor-element-23c05315 .elementor-widget-image img { animation: none !important; }
	#Top_bar .supportbutton, #Top_bar .loginbutton { transform: none !important; }
}
/* Footer is several stacked sections: one flat navy so no seams show between them */
.elementor-section.elementor-element-47a41f99, .elementor-section.elementor-element-84ea628,
.elementor-section.elementor-element-cbfa2d4, .elementor-section.elementor-element-8ab5166,
.elementor-section.elementor-element-33c2274 { background-image: none !important; }

/* ===================== Phase 3 (20/10): youthful "wow" layer ===================== */
/* Floating colour orbs behind the home hero (JS injects .oh-blobs; gradients, no blur filter → cheap on mobile) */
.oh-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.oh-blobs i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.oh-blobs i:nth-child(1) { width: 520px; height: 520px; left: -120px; top: -160px; background: radial-gradient(circle, rgba(127, 220, 255, .65), transparent 65%); animation: oh-drift1 16s ease-in-out infinite alternate; }
.oh-blobs i:nth-child(2) { width: 460px; height: 460px; right: -80px; top: 20%; background: radial-gradient(circle, rgba(255, 140, 66, .55), transparent 65%); animation: oh-drift2 19s ease-in-out infinite alternate; }
.oh-blobs i:nth-child(3) { width: 380px; height: 380px; left: 35%; bottom: -160px; background: radial-gradient(circle, rgba(166, 120, 255, .50), transparent 65%); animation: oh-drift3 13s ease-in-out infinite alternate; }
@keyframes oh-drift1 { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes oh-drift2 { to { transform: translate(-160px, 60px) scale(.9); } }
@keyframes oh-drift3 { to { transform: translate(-120px, -110px) scale(1.2); } }

/* Shimmering first word of the hero title */
.oh-shine-text {
	background: linear-gradient(100deg, #fff 20%, #ffe29a 40%, #8fe3ff 55%, #fff 75%);
	background-size: 250% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: oh-shimmer 6s linear infinite;
}
@keyframes oh-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.oh-word { display: inline-block; will-change: transform; }

/* Light sweep across the hero call-to-action */
.elementor-element-23c05315 .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.elementor-element-23c05315 .elementor-button::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg); animation: oh-sweep 3.8s ease-in-out infinite;
}
@keyframes oh-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Wave edge between the blue hero and the domain search block */
.elementor-section.elementor-element-cee3055 { position: relative; }
.elementor-section.elementor-element-cee3055::before {
	content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C180 2 360 0 540 14S900 44 1080 32S1350 4 1440 2L1440 40L0 40Z' fill='%230a3550'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* Pricing cards: 3D tilt + light glare (JS sets --mx/--my), glowing ring on the "trending" plan */
.service-tabs-data .products > .product, .service-data .products-group > .product { position: relative; }
.oh-tilt::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(30, 149, 209, .09), transparent 45%);
}
.oh-tilt:hover::after { opacity: 1; }
.service-data .products-group > .product.trending {
	border-color: transparent;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1e95d1, #8fe3ff, #ff8c42, #1e95d1) border-box;
	background-size: 100% 100%, 300% 300%;
	border: 2px solid transparent;
	animation: oh-ring 6s linear infinite;
}
@keyframes oh-ring { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }

/* Dark sections: soft light that follows the mouse (JS sets --sx/--sy and .oh-spot) */
.elementor-section.elementor-section.oh-spot {
	background-image: radial-gradient(520px circle at var(--sx, -999px) var(--sy, -999px), rgba(30, 149, 209, .20), transparent 45%), linear-gradient(180deg, var(--oh-deep-2) 0%, var(--oh-deep) 100%) !important;
}
.elementor-section.elementor-section.oh-spot.oh-flat {
	background-image: radial-gradient(520px circle at var(--sx, -999px) var(--sy, -999px), rgba(30, 149, 209, .20), transparent 45%) !important;
}

/* Scroll progress bar */
.oh-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #1e95d1, #8fe3ff, #ff8c42); }

@media (prefers-reduced-motion: reduce) {
	.oh-blobs, .oh-progress { display: none !important; }
	.oh-shine-text, .elementor-element-23c05315 .elementor-button::after, .service-data .products-group > .product.trending { animation: none !important; }
	.elementor-element-23c05315 .elementor-button::after { display: none; }
}
/* The hero blue is painted by its column; clear it so the living gradient and orbs underneath show */
.elementor-element-4addfa82 > .elementor-widget-wrap { background-color: transparent !important; }
.elementor-element-4addfa82 > .elementor-widget-wrap > .elementor-background-overlay { display: none !important; }
.elementor-element-23c05315 .elementor-element-22a4d84 > .elementor-widget-container { background-color: transparent !important; }