/* Basic Styles */
body {
    background-color: #0a0f1e;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container {
    width: 90%;
    margin: 0 auto;
}

/* Fonts */
.font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.font-dm-sans {
    font-family: 'DM Sans', sans-serif;
}

/* Gradients */
.bg-dominion-gradient {
    background: linear-gradient(135deg, #0a0f1e 0%, #1a2332 50%, #2a3441 100%);
}

.bg-eagle-gradient {
    background: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 50%, #a855f7 100%);
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-cyan-400 {
    --tw-gradient-from: #22d3ee;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 211, 238, 0));
}

.to-purple-500 {
    --tw-gradient-to: #a855f7;
}

.via-purple-500 {
    --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to, rgba(168, 85, 247, 0));
}

.to-pink-500 {
    --tw-gradient-to: #ec4899;
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}

@keyframes eagle-soar {
    0% { transform: translateX(-100px) translateY(20px) rotate(-5deg); }
    50% { transform: translateX(50vw) translateY(-30px) rotate(5deg); }
    100% { transform: translateX(calc(100vw + 100px)) translateY(10px) rotate(-2deg); }
}

@keyframes hexagon-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
}

@keyframes scroll-indicator {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up-delay-1 {
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-in-up-delay-1.animate-complete {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in-up-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-in-up-delay-2.animate-complete {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in-up-delay-3 {
    animation: fadeInUp 0.8s ease-out 0.9s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-in-up-delay-3.animate-complete {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in-up-delay-4 {
    animation: fadeInUp 0.8s ease-out 1.2s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-in-up-delay-4.animate-complete {
    opacity: 1;
    transform: translateY(0);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Ensure button with both classes runs fade-in and then pulse (override inline single-class rule) */
.animate-fade-in-up-delay-3.animate-pulse-glow {
    animation: fadeInUp 0.8s ease-out 0.9s forwards, pulse-glow 3s ease-in-out infinite 1.7s;
}

.animate-fade-in-up-delay-4.animate-pulse-glow {
    animation: fadeInUp 0.8s ease-out 1.2s forwards, pulse-glow 3s ease-in-out infinite 2s;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

.animate-eagle-soar {
    animation: eagle-soar 15s linear infinite;
}

.animate-hexagon-pulse {
    animation: hexagon-pulse 4s ease-in-out infinite;
}

.animate-scroll-indicator {
    animation: scroll-indicator 2s ease-in-out infinite;
}

/* Logo contour glow (follows transparent edges of PNG via drop-shadows) */
.logo-glow {
    will-change: filter;
    filter: drop-shadow(0 0 6px rgba(34,211,238,0.22)) drop-shadow(0 0 12px rgba(34,211,238,0.12));
    animation: logoPulse 3.2s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(34,211,238,0.18)) drop-shadow(0 0 12px rgba(34,211,238,0.10)); }
    50% { filter: drop-shadow(0 0 10px rgba(34,211,238,0.40)) drop-shadow(0 0 18px rgba(34,211,238,0.25)); }
}

/* Layout */
.min-h-screen {
    min-height: 100vh;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0; right: 0; bottom: 0; left: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

.max-w-4xl {
    max-width: 56rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem;
}

/* Text */
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.md\:text-8xl {
    font-size: 6rem;
    line-height: 1;
}

.font-bold {
    font-weight: 700;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-gray-300 {
    color: #d1d5db;
}

.leading-relaxed {
    line-height: 1.625;
}

/* Buttons */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-cyan-400 {
    --tw-gradient-from: #22d3ee;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 211, 238, 0));
}

.to-purple-500 {
    --tw-gradient-to: #a855f7;
}

.text-white {
    color: #ffffff;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.font-semibold {
    font-weight: 600;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Hexagon */
.hexagon-large {
    width: 200px;
    height: 173.2px;
    margin: 86.6px 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-cyan-400\/20 {
    --tw-gradient-from: rgba(34, 211, 238, 0.2);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 211, 238, 0));
}

.to-purple-500\/20 {
    --tw-gradient-to: rgba(168, 85, 247, 0.2);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.border {
    border-width: 1px;
}

.border-cyan-400\/30 {
    border-color: rgba(34, 211, 238, 0.3);
}

.group:hover .group-hover\:border-purple-500\/50 {
    border-color: rgba(168, 85, 247, 0.5);
}

.group:hover .group-hover\:text-purple-400 {
    color: #c084fc;
}

/* Lucide Icons */
.lucide {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
}



/* ---------------------------------------------------- */
/* Imported styles from speed-v2 (scoped to #speed-v2)  */
/* ---------------------------------------------------- */
#speed-v2 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#speed-v2 {
    font-family: 'DM Sans', sans-serif;
    background: #000000;
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
}

/* When strictly pinned, raise above hero to avoid tiny overlap line */
#speed-v2.sv2-pinned {
    z-index: 30;
}

/* Typography */
#speed-v2 .space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

#speed-v2 .dm-sans {
    font-family: 'DM Sans', sans-serif;
}

/* Background and Canvas */
#speed-v2 .particle-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: visible;
    will-change: opacity;
    transition: opacity 300ms ease;
    /* Force its own layer to avoid Firefox opacity flicker */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Ensure hero arrow container area is clickable and above overlays */
#dominion .animate-scroll-indicator { cursor: pointer; z-index: 30; }

/* Prevent hero visual layers from blocking clicks */
#dominion .hex-background { pointer-events: none; }
#dominion .hero-hex-bg { pointer-events: none; }

#speed-v2.sv2-active .particle-bg {
    opacity: 1;
}

#speed-v2 .container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Shift the centered container slightly left on wide screens (desktop mode only) */
@media (min-width: 1280px) {
    #speed-v2:not(.sv2-compact):not(.sv2-mid) .container { transform: translateX(-10%); }
}

/* Keep content truly centered between tablet/desktop mid widths */
@media (min-width: 801px) and (max-width: 1279px) {
    #speed-v2 .container { transform: none; margin-left: auto; margin-right: auto; }
    #speed-v2 .content-grid { margin-left: auto; margin-right: auto; }
}

/* Header */
#speed-v2 .header {
    text-align: center;
    padding: 2rem;
}

#speed-v2 .main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out;
}

#speed-v2 .subtitle {
    font-size: 1.25rem;
    opacity: 0.8;
    animation: fadeIn 1s ease-out 0.5s both;
}

/* Main Content */
#speed-v2 .main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    height: 100vh;
}

#speed-v2 .content-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Optical centering on very wide/zoomed screens */
@media (min-width: 1440px) {
    #speed-v2 .content-grid {
        padding-right: calc(var(--hex-w) * 1.2);
    }
}

/* Hexagon Navigation */
#speed-v2 .hexagon-navigation {
    --hex-w: 120px;
    --hex-h: calc(var(--hex-w) * 1.1547);
    --hex-gap: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hex-gap);
    overflow-y: hidden;
    overflow-x: visible;
    height: calc(
        var(--hex-h) * 3 +
        var(--hex-gap) * 2 +
        max(12px, var(--hex-h) * 0.08) +
        16vh
    );
    padding-right: calc(var(--hex-w) * 0.7);
    padding-bottom: 8px;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
}

#speed-v2 .hex-row { display: none; }

#speed-v2 .hexagon {
    width: var(--hex-w);
    height: var(--hex-h);
    position: relative;
    margin: 0;
    cursor: pointer;
    transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease, opacity 0.25s ease;
    animation: fadeInScale 0.6s ease-out;
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-origin: center center;
    transform: translateX(var(--hex-shift, 0px)) scale(calc(var(--hex-scale, 1) * var(--hex-active-mult, 1)));
}

#speed-v2 .hexagon.active {
    --hex-shift: calc(var(--hex-w) * 1.2);
    --hex-active-mult: 2;
    box-shadow: 0 0 28px rgba(0, 191, 255, 0.35);
    z-index: 2;
}

#speed-v2 .hexagon-navigation .hex-inner {
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

#speed-v2 .hexagon:nth-child(1) { animation-delay: 0.1s; }
#speed-v2 .hexagon:nth-child(2) { animation-delay: 0.2s; }
#speed-v2 .hexagon:nth-child(3) { animation-delay: 0.3s; }

#speed-v2 .hexagon:before,
#speed-v2 .hexagon:after { content: none; border: 0; }

#speed-v2 .hexagon-inner {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

#speed-v2 .hexagon.hovering {
    transform: translateX(var(--hex-shift, 0px)) scale(calc((var(--hex-scale, 1) * var(--hex-active-mult, 1)) * 1.08));
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.35);
}

#speed-v2 .hexagon:hover .hexagon-inner { background: rgba(0, 0, 0, 0.25); }

/* Center Hexagon */
#speed-v2 .hexagon-center { width: 240px; height: 277px; margin: 40px 0; }
#speed-v2 .hexagon-center:before { content: none; }
#speed-v2 .hexagon-center:after { content: none; }
#speed-v2 .hexagon-center .hexagon-inner { background: rgba(0, 0, 0, 0.15); }

/* Hexagon Content */
#speed-v2 .icon { display: none; }
#speed-v2 .hex-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.875rem; font-weight: 600; }
#speed-v2 .logo { width: 6rem; height: 6rem; margin-bottom: 1rem; animation: pulse 2s infinite; }
#speed-v2 .brand-name {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700;
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem;
}
#speed-v2 .brand-subtitle { font-size: 0.875rem; opacity: 0.8; }

/* Content Section */
#speed-v2 .content-section { text-align: left; position: sticky; top: 0; }
#speed-v2 .content-panel { opacity: 0; transform: translateY(30px); transition: all 0.5s ease; display: none; }
#speed-v2 .content-panel.active { opacity: 1; transform: translateY(0); display: block; animation: slideIn 0.5s ease-out; }
#speed-v2 .content-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; font-weight: 700;
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem;
}
#speed-v2 .content-text { font-size: 1.125rem; line-height: 1.7; max-width: 600px; margin-bottom: 2rem; }

/* Buttons */
#speed-v2 .contact-buttons { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
#speed-v2 .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-right: 1rem; margin-bottom: 1rem; }
#speed-v2 .btn-primary { background: linear-gradient(135deg, #00bfff, #8a2be2); color: #000; }
#speed-v2 .btn-outline { background: transparent; color: #00bfff; border: 2px solid #00bfff; }
#speed-v2 .btn:hover { transform: translateY(-2px); }
#speed-v2 .glow-effect { box-shadow: 0 0 20px rgba(0, 191, 255, 0.5); }

/* Footer */
#speed-v2 .footer { text-align: center; padding: 2rem; }
#speed-v2 .footer-content { display: flex; align-items: center; justify-content: center; gap: 1rem; animation: fadeIn 1s ease-out 1s both; }
#speed-v2 .footer-text { opacity: 0.6; }
#speed-v2 .feather-left,
#speed-v2 .feather-right { width: 2rem; height: 2rem; opacity: 0.6; }
#speed-v2 .feather-right { transform: scaleX(-1); }

/* Animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

@keyframes sv2-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
#speed-v2 .floating { animation: sv2-float 3s ease-in-out infinite; }

/* Responsive */
@media (max-width: 1024px) {
    #speed-v2 .content-grid { grid-template-columns: 1fr; gap: 2rem; }
    #speed-v2 .content-section { position: static; }
}

@media (max-width: 768px) {
    #speed-v2 .content-title { font-size: 2rem; }
    #speed-v2 .hexagon-navigation { --hex-w: 110px; --hex-gap: 3rem; }
    #speed-v2 .hexagon { width: var(--hex-w); height: calc(var(--hex-w) * 1.1547); }
    #speed-v2 .logo { width: 4rem; height: 4rem; }
    #speed-v2 .brand-name { font-size: 1.25rem; }
    #speed-v2 .hex-title { font-size: 0.9rem; }
    /* Add some extra breathing room on small screens to avoid clipping */
    #speed-v2 .hexagon-navigation { height: calc(var(--hex-h) * 3 + var(--hex-gap) * 2 + 20vh); }
    /* Keep only one arrow on mobile: hide hero arrow */
    #dominion .animate-scroll-indicator { display: none !important; }
}

/* ----------------------------------------------- */
/* Cross-browser layout fixes for right-side panels */
/* ----------------------------------------------- */
#speed-v2 .content-grid {
    align-items: center;
}

/* Prevent content-based min-width from breaking grid columns (Firefox/Edge) */
#speed-v2 .content-grid > * {
    min-width: 0;
}

#speed-v2 .hexagon-navigation {
    min-width: 0;
}

/* Safari sticky-in-grid quirks */
#speed-v2 .content-section {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

/* Normalize panel width and centering */
#speed-v2 .content-panel {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 0; /* prevent internal shift */
    padding-right: 0;
}

/* Make the "Why us?" panel wide like Firefox in all browsers */
#speed-v2 #content-home { max-width: none; width: 100%; }
#speed-v2 #content-home .metrics-list { max-width: none; width: 100%; }

/* Make the "Flight Path" (road map) panel wide across browsers */
#speed-v2 #content-road-map { max-width: none !important; width: 100% !important; }
#speed-v2 #content-road-map .roadmap-container { max-width: none !important; width: 100% !important; margin-left: auto; margin-right: auto; }
#speed-v2 #content-road-map .content-title { text-align: center; }
#speed-v2 #content-road-map .milestone-content { max-width: none !important; }

#speed-v2 .content-panel .content-text,
#speed-v2 .content-panel .metrics-list,
#speed-v2 .content-panel .features-list,
#speed-v2 .content-panel .staking-widget {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Cross-browser: center features rows and their content (Firefox fix) */
#speed-v2 .features-list { justify-items: center; }
#speed-v2 .feature-row { justify-content: center; }

/* Align feature badges to a common start line and texts to a single column */
#speed-v2 #content-features .features-list {
    display: inline-grid !important; /* shrink-wrap to content for consistent centering */
    grid-template-columns: max-content auto;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    justify-items: start;
    align-items: center;
    margin-left: auto; margin-right: auto; /* center the whole sub-block */
}
#speed-v2 #content-features .feature-row {
    display: contents !important; /* allow badge and text to participate in parent grid */
}
#speed-v2 #content-features .feature-badge { justify-self: start; }
#speed-v2 #content-features .feature-text {
    align-self: center;
    justify-self: start;
}

/* Align staking widget to text block center and remove left bias */
#speed-v2 .content-panel .staking-widget {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
#speed-v2 .content-panel .staking-widget .iframe-box {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive iframe wrapper for staking widget */
.iframe-box {
    position: relative;
    width: 472px; /* match widget's intrinsic width to avoid visual offset */
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
}

.iframe-box iframe {
    display: block;
    width: 100% !important;
    height: 302px; /* default desktop height to avoid clipping */
    border: 0;
    overflow: hidden; /* hide any internal scrollbars visually */
}

/* Maintain aspect ratio on mobile to avoid cropping */
@media (max-width: 768px) {
    .iframe-box {
        /* Crop ~30% bottom and allow vertical scroll inside wrapper */
        max-width: 100%;
        width: 100%;
        height: min(calc(88vh * 0.7), calc(100vw * (520 / 472) * 0.7));
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Keep iframe at full intrinsic mobile height so wrapper scrolls */
    .iframe-box iframe {
        height: calc(min(88vh, calc(100vw * (520 / 472))) + 28px) !important;
        display: block;
    }
}

/* Media safety */
#speed-v2 iframe,
#speed-v2 img {
    max-width: 100%;
}

/* ----------------------------------------------- */
/* Floating hex decorations from quality-v8 (used) */
/* ----------------------------------------------- */
.floating-hexagons {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-hex {
    position: absolute;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(0, 191, 255, 0.2);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hexFloat 8s ease-in-out infinite;
}

/* Hotfix: remove short vertical line artifacts on hero load */
#dominion .floating-hex { border: 0 !important; }

@keyframes hexFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    33% { transform: translateY(-20px) rotate(2deg); opacity: 0.5; }
    66% { transform: translateY(5px) rotate(-1deg); opacity: 0.2; }
}

/* ----------------------------------------------- */
/* Background below hero for Speed section          */
/* ----------------------------------------------- */
#speed-v2 .below-hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/bg_down.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    visibility: visible;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 300ms ease;
    /* Layerize to prevent cross-section flicker */
    backface-visibility: hidden;
    transform: translateZ(0);
}

#speed-v2.sv2-active .below-hero-bg {
    opacity: 0.2;
}

/* Also enable below-hero background when section is merely near viewport (Firefox large screens) */
#speed-v2.sv2-active-bg .below-hero-bg {
    opacity: 0.2;
}

/* ----------------------------------------------- */
/* Compact mode: <1280x800 (tablet/desktop small)  */
/* ----------------------------------------------- */
#speed-v2.sv2-compact .hexagon-navigation {
    display: none !important;
}

#speed-v2.sv2-compact .main-content {
    height: 100%;
    padding: 0;
}

#speed-v2.sv2-compact .content-grid {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
}

#speed-v2.sv2-compact .content-section {
    position: static;
    top: auto;
    height: 100%;
    overflow: hidden;
}

#speed-v2.sv2-compact .content-panel {
    display: none;
    opacity: 1 !important;
    transform: none !important;
    min-height: 100%;
    padding: 2rem 1rem;
}

#speed-v2.sv2-compact .content-panel.active {
    display: block;
}

#speed-v2.sv2-compact {
    height: 100vh;
    overflow: hidden;
    overscroll-behavior-y: contain;
    position: relative;
    z-index: 40;
}

/* In compact mode, hide the external hero section (#dominion) */
@media (max-width: 768px) {
    #dominion { display: none !important; }
}

/* Mobile persistent hero-style hex bg overlay (mobile only) */
#speed-v2 .mobile-hex-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 0;
    display: none;
    pointer-events: none;
}

#speed-v2.sv2-mobile .mobile-hex-bg {
    display: block;
}

/* Unify background on mobile: hide other backgrounds */
#speed-v2.sv2-mobile .below-hero-bg { display: none !important; }
#speed-v2.sv2-mobile .particle-bg { display: none !important; }

/* Ensure main content text is fully opaque on mobile */
#speed-v2.sv2-mobile.sv2-active .content-panel { opacity: 1 !important; }

/* Mobile top hex nav */
#speed-v2 .mobile-hex-nav {
    position: fixed;
    top: 14px; left: 0; right: 0;
    display: none;
    z-index: 55;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#speed-v2.sv2-mobile .mobile-hex-nav { display: flex; }

/* Hide the Start hex on mobile */
#speed-v2.sv2-compact .mobile-hex-nav .mobile-hex[data-section="start"] {
    display: none !important;
}

/* Mobile left/right nav arrows */
#mobile-hex-prev,
#mobile-hex-next {
    position: fixed;
    top: 56px;
    z-index: 56;
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #22d3ee;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(34,211,238,0.4);
    border-radius: 9999px;
    backdrop-filter: blur(6px);
}

#mobile-hex-prev { left: 8px; }
#mobile-hex-next { right: 8px; }

#mobile-hex-prev svg,
#mobile-hex-next svg {
    width: 22px; height: 22px;
}

#speed-v2.sv2-mobile #mobile-hex-prev,
#speed-v2.sv2-mobile #mobile-hex-next {
    display: inline-flex;
}

/* Crisper small hexes: pointy-top regular hex proportions */
#speed-v2 .mobile-hex {
    --hex-w-mobile: 36px;
    width: var(--hex-w-mobile);
    height: calc(var(--hex-w-mobile) * 1.1547);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    box-shadow: none;
    opacity: 0.65;
    filter: brightness(0.95);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease, filter 180ms ease;
    cursor: pointer;
    will-change: transform;
}

#speed-v2 .mobile-hex.active {
    background: linear-gradient(135deg, #00bfff, #8a2be2);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 16px rgba(0,191,255,0.9);
    transform: scale(1.08);
    opacity: 1;
    filter: brightness(1.15);
}

/* Mobile-only: show logo instead of active highlight for nav hex */
#speed-v2.sv2-mobile .mobile-hex.active {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    background-image: url('assets/logo.webp') !important;
    background-size: 90% 90% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: scale(1.5) !important;
    z-index: 2;
}

/* Mobile: increase spacing between nav hexes to accommodate enlarged active */
#speed-v2.sv2-mobile .mobile-hex-nav {
    gap: clamp(12px, 3.5vw, 18px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar in WebKit browsers for mobile hex nav */
#speed-v2.sv2-mobile .mobile-hex-nav::-webkit-scrollbar { display: none; }

#speed-v2 .mobile-hex:hover { transform: scale(1.06); }
#speed-v2 .mobile-hex:active { transform: scale(0.96); }

/* Center compact panels content and remove extra scrollbars */
#speed-v2.sv2-compact .content-section {
    display: block;
}

#speed-v2.sv2-compact .content-panel.active {
    display: block !important;
}

/* Compact/mobile: hide duplicate start panel to use real hero instead */

/* Allow contact panel to stretch inner grid to full width instead of centering */
#speed-v2.sv2-compact #content-contact.content-panel.active {
    display: block !important;
}

#bottom-scroll-indicator {
    display: none !important;
}

#bottom-scroll-indicator svg { display: none !important; }

/* Compact mode spacing */
#speed-v2.sv2-compact .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    height: 100vh;
}

#speed-v2.sv2-compact .content-panel {
    padding: clamp(3rem, 6vh, 3.5rem) 1.25rem;
    padding-top: clamp(5rem, 14vh, 8rem);
}

#speed-v2.sv2-compact .content-title {
    margin-bottom: 0.5rem;
}

#speed-v2.sv2-compact .content-text {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    text-align: justify;
    text-justify: inter-word;
}

#speed-v2.sv2-compact .metrics-list,
#speed-v2.sv2-compact .features-list,
#speed-v2.sv2-compact .staking-widget,
#speed-v2.sv2-compact .contact-buttons {
    gap: 1rem;
}

/* Ensure consistent content width and alignment in compact mode */
#speed-v2.sv2-compact .content-panel .content-title,
#speed-v2.sv2-compact .content-panel .content-text,
#speed-v2.sv2-compact .content-panel .metrics-list,
#speed-v2.sv2-compact .content-panel .features-list,
#speed-v2.sv2-compact .content-panel .staking-widget {
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Keep the Start panel centered vertically like the hero */
#speed-v2.sv2-compact #content-start.content-panel.active {
    display: grid !important;
    place-items: center;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
}

/* Start panel text should remain centered (override compact justification) */
#speed-v2.sv2-compact #content-start .content-text {
    text-align: center;
    text-justify: auto;
}

/* Start panel spacing and CTA sizing (compact/mobile) */
#speed-v2.sv2-compact #content-start h1 {
    margin-bottom: clamp(1.5rem, 5.5vh, 2.25rem) !important;
}

#speed-v2.sv2-compact #content-start p {
    margin-bottom: clamp(1.25rem, 4.5vh, 2rem) !important;
}

#speed-v2.sv2-compact #content-start .start-logo-gap {
    margin-bottom: clamp(1.25rem, 4vh, 2rem) !important;
}

#speed-v2.sv2-compact #stake-btn-mobile {
    padding: clamp(14px, 3.6vw, 18px) clamp(26px, 7vw, 34px) !important;
    font-size: clamp(1rem, 4.2vw, 1.125rem) !important;
    line-height: 1.25 !important;
    border-radius: 9999px !important;
}

/* Mobile: force contact buttons into 2 columns, override inline styles */
#speed-v2.sv2-compact #content-contact .contact-buttons,
#speed-v2.sv2-mid #content-contact .contact-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --contact-gap: clamp(0.5rem, 2.5vw, 0.875rem);
    gap: var(--contact-gap) !important;
    justify-items: stretch;
    width: 100%;
}

#speed-v2.sv2-compact #content-contact .contact-icon-btn,
#speed-v2.sv2-mid #content-contact .contact-icon-btn {
    width: 100% !important;
    padding: clamp(12px, 2.8vw, 18px) !important;
}

/* Keep single Email button from stretching full width; center it */
#speed-v2 #content-contact .contact-icon-btn.email {
    width: 260px !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Compact/mobile: keep Email button narrow and centered, not full-width */
#speed-v2.sv2-compact #content-contact .contact-icon-btn.email {
    grid-column: 1 / -1;
    justify-self: center !important;
    width: 100% !important;
    max-width: calc((100% - var(--contact-gap, 0.875rem)) / 2) !important;
}

/* Mid mode: same centering and synced width for the single Email button */
#speed-v2.sv2-mid #content-contact .contact-icon-btn.email {
    grid-column: 1 / -1;
    justify-self: center !important;
    width: 100% !important;
    max-width: calc((100% - var(--contact-gap, 0.875rem)) / 2) !important;
}

/* Fit inner content when compressed into 2 columns */
#speed-v2.sv2-compact #content-contact .contact-icon-btn .icon {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1 !important;
}

#speed-v2.sv2-compact #content-contact .contact-icon-btn .label {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    margin-top: 4px !important;
}

/* Make contact panel use full width on mobile to reduce side gutters */
#speed-v2.sv2-compact #content-contact {
    max-width: none !important;
    width: 100% !important;
}

#speed-v2.sv2-compact #content-contact.content-panel {
    padding-left: clamp(10px, 3.5vw, 16px) !important;
    padding-right: clamp(10px, 3.5vw, 16px) !important;
}

/* Compact mode content width limits */
#speed-v2.sv2-compact .container {
    max-width: 960px;
}

#speed-v2.sv2-compact .content-panel {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Override wide panels only in compact */
#speed-v2.sv2-compact #content-home {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

#speed-v2.sv2-compact #content-home .metrics-list {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

#speed-v2.sv2-compact #content-road-map {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

#speed-v2.sv2-compact #content-road-map .roadmap-container {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------- */
/* Mid mode: between desktop and mobile            */
/* - Hide hex nav, keep desktop stepper behavior   */
/* - Single centered content column                */
/* ----------------------------------------------- */
#speed-v2:not(.sv2-compact) #content-start { display: none !important; }
#speed-v2.sv2-mid .hexagon-navigation {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

#speed-v2.sv2-mid .content-grid {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
}

#speed-v2.sv2-mid .content-section {
    position: sticky;
    top: 0;
}

#speed-v2.sv2-mid .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

#speed-v2.sv2-mid .content-panel {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#speed-v2.sv2-mid .content-panel .content-text,
#speed-v2.sv2-mid .content-panel .metrics-list,
#speed-v2.sv2-mid .content-panel .features-list,
#speed-v2.sv2-mid .content-panel .staking-widget {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}