/* ==========================================================================
   Atgler — shared design-system CSS for bespoke sections that can't be
   built with native Elementor widgets (orbit, marquee, AI scroll-scrub,
   sticky column, scroll-reveal). Everything else uses native widget
   styling controls in the Elementor editor.
   ========================================================================== */

.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

/* ---- Mega menu: exact fidelity to the original HTML build ---- */
/* Column heading + arrow-on-hover (mirrors .mega-column h4 from the original styles.css) */
.mega-column h4 { font-size: 1.1rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; width: 100%; color: #0a0a0a; font-weight: 700; }
.mega-column h4 i { font-size: 0.8rem; transition: transform 0.3s; }
.mega-column:hover h4 i { transform: translateX(3px) translateY(-3px); }
/* Plain link list, no icons (mirrors .mega-menu-content a) */
.mega-column a { display: block; color: #0a0a0a !important; font-weight: 500; font-size: 0.95rem; padding: 0.6rem 0; text-decoration: none; transition: color 0.3s, transform 0.3s; }
.mega-column a:hover { color: #fec802 !important; transform: translateX(5px); }

/* Nav item sliding underline on hover (mirrors .nav-links a::after) */
.htmega-menu-area ul > li > a { position: relative; }
.htmega-menu-area ul > li > a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: #fec802; transition: width 0.3s; }
.htmega-menu-area ul > li > a:hover::after { width: 100%; }

/* Chevron SVG has no fill set, so it defaults to SVG's own black — make it follow the link's text color */
.htmega-menu-area ul > li > a .htmenu-icon svg { fill: currentColor; }

/* Center every dropdown under its trigger (mirrors .mega-menu-item:hover .mega-menu / translateX(-50%)) */
.htmega-megamenu > li > .htmegamenu-content-wrapper { left: 50%; right: auto; transform: translateX(-50%); overflow: hidden; }
/* HT Mega's "Sub Menu Width" control also targets .sub-menu (shared with our wrapper) and wins the cascade tie at 250px — force the real width back */
.htmega-menu-area .htmegamenu-content-wrapper.sub-menu { min-width: 850px !important; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Hosting / Tech Stack marquees ---- */
@keyframes atgler-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.atgler-marquee-wrap { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.atgler-marquee-track { display: flex; width: max-content; animation: atgler-marquee 40s linear infinite; align-items: center; }
.atgler-marquee-track:hover { animation-play-state: paused; }
.atgler-marquee-item { display: flex; align-items: center; gap: 11px; margin: 0 7px; background: #fff; border: 1px solid #ebebeb; border-radius: 50px; padding: 16px 26px; font: 700 15px/1 Montserrat, sans-serif; color: #0a0a0a; white-space: nowrap; box-shadow: 0 2px 8px rgba(10,10,10,.05); }
.atgler-marquee-item.dark-pill { background: #fff; }
.atgler-tech-pill i { font-size: 1.6rem; }

/* ---- Orbit (Build/Protect/Grow ecosystem) ---- */
.orbit-container { position: relative; width: min(560px, 84vw); height: min(560px, 84vw); margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.orbit-center { width: 26.8%; height: 26.8%; min-width: 78px; min-height: 78px; background: #fec802; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(254,200,2,.3); z-index: 10; position: relative; border: 4px solid #0a0a0a; }
.orbit-center::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(254,200,2,.35); animation: atgler-pulse-ring 2.4s infinite cubic-bezier(.215,.61,.355,1); }
.orbit-center i { font-size: clamp(1.4rem, 6vw, 2.4rem) !important; margin-bottom: 4px !important; color: #0a0a0a; }
.orbit-center h4 { font-size: clamp(.7rem, 2.6vw, 1rem) !important; margin: 0; color: #0a0a0a; }
@keyframes atgler-pulse-ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.orbit-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(254,200,2,.4); top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 20px rgba(254,200,2,.06); }
.ring-1 { width: 53.6%; height: 53.6%; animation: atgler-orbit-spin 20s linear infinite; }
.ring-2 { width: 78.6%; height: 78.6%; animation: atgler-orbit-spin-rev 32s linear infinite; }
.ring-3 { width: 100%; height: 100%; animation: atgler-orbit-spin 46s linear infinite; }
@keyframes atgler-orbit-spin { 100% { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes atgler-orbit-spin-rev { 100% { transform: translate(-50%,-50%) rotate(-360deg); } }
.orbit-node { position: absolute; width: clamp(46px,13vw,72px); height: clamp(46px,13vw,72px); background: #131313; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,.4); border: 2px solid rgba(254,200,2,.3); top: 0; left: 50%; margin-left: clamp(-36px,-6.5vw,-23px); margin-top: clamp(-36px,-6.5vw,-23px); transition: border-color .3s, transform .3s; }
.orbit-node:hover { border-color: #fec802; transform: scale(1.12); }
.ring-1 .orbit-node { animation: atgler-orbit-spin-rev 20s linear infinite; }
.ring-2 .orbit-node { animation: atgler-orbit-spin 32s linear infinite; }
.ring-3 .orbit-node { animation: atgler-orbit-spin-rev 46s linear infinite; }
.orbit-node i { font-size: clamp(.85rem,3vw,1.3rem); color: #fec802; margin-bottom: 4px; }
.orbit-node span { font-size: clamp(.45rem,1.6vw,.65rem); font-weight: 700; color: #fff; }

/* ---- How We Work: sticky left column ---- */
.atgler-sticky-col { position: sticky; top: 120px; }
@media (max-width: 900px) { .atgler-sticky-col { position: static; } }
.fw-card { transform: scale(.97); opacity: .55; transition: all .4s cubic-bezier(.175,.885,.32,1.275); }
.fw-card.active { transform: scale(1); opacity: 1; box-shadow: 0 25px 55px rgba(254,200,2,.25) !important; }

/* ---- AI-Powered Insights scroll-scrub ---- */
.ai-assemble-section { --p: 0; }
.ai-assemble-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ai-assemble-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ai-frag { position: absolute; top: 50%; left: 50%; width: 128px; margin: -42px 0 0 -64px; background: rgba(17,17,17,.9); border: 1px solid rgba(254,200,2,.35); border-radius: 16px; padding: 14px 10px; text-align: center; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ai-frag i { color: #fec802; font-size: 1.3rem; display: block; margin-bottom: 6px; }
.ai-frag span { color: #fff; font-size: .72rem; font-weight: 700; }
.ai-frag .frag-score { display: block; color: rgba(255,255,255,.4); font-size: .65rem; margin-top: 3px; font-family: 'IBM Plex Mono', monospace; }
.ai-frag-perf { transform: translate(calc(-40vw * (1 - var(--p)) + -92px * var(--p)), calc(-30vh * (1 - var(--p)) + -78px * var(--p))) rotate(calc(-16deg * (1 - var(--p)))); opacity: calc(.35 + var(--p) * .65); }
.ai-frag-seo { transform: translate(calc(38vw * (1 - var(--p)) + 92px * var(--p)), calc(-24vh * (1 - var(--p)) + -78px * var(--p))) rotate(calc(14deg * (1 - var(--p)))); opacity: calc(.35 + var(--p) * .65); }
.ai-frag-sec { transform: translate(calc(-34vw * (1 - var(--p)) + -100px * var(--p)), calc(28vh * (1 - var(--p)) + 66px * var(--p))) rotate(calc(11deg * (1 - var(--p)))); opacity: calc(.35 + var(--p) * .65); }
.ai-frag-a11y { transform: translate(calc(36vw * (1 - var(--p)) + 100px * var(--p)), calc(30vh * (1 - var(--p)) + 66px * var(--p))) rotate(calc(-9deg * (1 - var(--p)))); opacity: calc(.35 + var(--p) * .65); }
.ai-frag-mob { transform: translate(calc(0vw * (1 - var(--p))), calc(-40vh * (1 - var(--p)) + -132px * var(--p))) rotate(calc(6deg * (1 - var(--p)))); opacity: calc(.35 + var(--p) * .65); }
.ai-assemble-core { position: relative; width: 100px; height: 100px; border-radius: 50%; background: rgba(20,20,20,.85); border: 2px solid #fec802; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(254,200,2,.6), inset 0 0 20px rgba(254,200,2,.3); transform: scale(calc(.82 + var(--p) * .18)); z-index: 5; }
.ai-assemble-core::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(254,200,2,.4); animation: atgler-pulse-ring 2.6s infinite cubic-bezier(.215,.61,.355,1); }
.ai-assemble-content { position: absolute; text-align: center; max-width: 640px; padding: 0 2rem; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.ai-assemble-section.assembled .ai-assemble-content { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ai-assemble-section.assembled .ai-assemble-stage-inner { opacity: 0; transition: opacity .4s ease; }
@keyframes atgler-text-shine { to { background-position: 200% center; } }
@media (max-width: 640px) { .ai-frag { width: 100px; margin: -36px 0 0 -50px; padding: 10px 8px; } .ai-frag i { font-size: 1.1rem; } .ai-frag span { font-size: .62rem; } }
@media (prefers-reduced-motion: reduce) { .ai-frag { transform: none !important; opacity: 1 !important; } }

/* ---- Decorative corner icons ---- */
.corner-icon { position: absolute; font-size: 9rem; color: rgba(10,10,10,.045); pointer-events: none; z-index: 0; line-height: 1; }
.corner-icon.on-dark { color: rgba(255,255,255,.045); }
.corner-icon.on-primary { color: rgba(10,10,10,.07); }
.corner-icon-tl { top: -1.5rem; left: -1.5rem; }
.corner-icon-tr { top: -1.5rem; right: -1.5rem; }
.corner-icon-bl { bottom: -1.5rem; left: -1.5rem; }
.corner-icon-br { bottom: -1.5rem; right: -1.5rem; }
@media (max-width: 640px) { .corner-icon { font-size: 5.5rem; } }