/* =========================================================
   RunetToday — Components
   ========================================================= */


/* ---------------------------------------------------------
   Glass surfaces
   --------------------------------------------------------- */

.site-header,
.install-command,
.dashboard-window,
.feature-card,
.cli-terminal,
.cta-card {
    isolation: isolate;
}


.site-header::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.brand-mark {
    position: relative;

    overflow: hidden;
}


.brand-mark::before {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    top: -8px;
    left: -8px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.25);

    filter: blur(10px);

    pointer-events: none;
}


.brand-mark {
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}


.brand:hover .brand-mark {
    transform: translateY(-1px) rotate(-2deg);

    border-color:
        rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.09);
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
    overflow: hidden;
}


.hero::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    top: -550px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.018) 38%,
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;

    z-index: -1;
}


.hero::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 460px;

    top: 280px;
    left: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.14),
            transparent
        );

    opacity: 0.25;

    pointer-events: none;

    z-index: -1;
}


.hero-badge {
    position: relative;

    overflow: hidden;
}


.hero-badge::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: 50%;
    left: -80px;

    transform:
        translateY(-50%)
        rotate(25deg);

    background:
        rgba(255, 255, 255, 0.12);

    filter: blur(20px);

    opacity: 0;

    transition:
        left 600ms ease,
        opacity 300ms ease;
}


.hero-badge:hover::before {
    left: calc(100% + 20px);

    opacity: 1;
}


/* ---------------------------------------------------------
   Install command
   --------------------------------------------------------- */

.install-command {
    position: relative;
}


.install-command::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.045),
            transparent 80%
        );

    transform:
        translateX(-100%);

    transition:
        transform 900ms ease;

    pointer-events: none;
}


.install-command:hover::before {
    transform:
        translateX(100%);
}


.install-command-body {
    position: relative;

    z-index: 1;
}


/* ---------------------------------------------------------
   Dashboard
   --------------------------------------------------------- */

.dashboard-window {
    position: relative;
}


.dashboard-window::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -260px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.045);

    filter: blur(100px);

    pointer-events: none;
}


.dashboard-window > * {
    position: relative;

    z-index: 1;
}


.dashboard-topbar {
    position: relative;
}


.dashboard-topbar::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.12),
            transparent
        );

    opacity: 0.35;
}


.dashboard-status {
    transition:
        opacity 180ms ease;
}


.dashboard-status:hover {
    opacity: 0.8;
}


/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

.sidebar-item {
    position: relative;

    overflow: hidden;
}


.sidebar-item::before {
    content: "";

    position: absolute;

    left: 0;

    width: 2px;
    height: 16px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(-4px);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.7);

    opacity: 0;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}


.sidebar-item.active::before {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);
}


/* ---------------------------------------------------------
   Metric cards
   --------------------------------------------------------- */

.metric-card {
    position: relative;

    overflow: hidden;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}


.metric-card::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -55px;
    right: -35px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    filter: blur(20px);

    pointer-events: none;
}


.metric-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.045);
}


.metric-card > * {
    position: relative;

    z-index: 1;
}


.metric-bar span {
    transform-origin: left center;

    animation:
        metric-load 1.2s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ) both;
}


@keyframes metric-load {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* ---------------------------------------------------------
   System panels
   --------------------------------------------------------- */

.system-panel {
    transition:
        border-color 200ms ease,
        background 200ms ease;
}


.system-panel:hover {
    border-color:
        rgba(255, 255, 255, 0.11);

    background:
        rgba(255, 255, 255, 0.038);
}


.security-row {
    transition:
        padding-left 180ms ease,
        color 180ms ease;
}


.security-row:hover {
    padding-left: 5px;

    color: var(--text-secondary);
}


/* ---------------------------------------------------------
   Traffic graph
   --------------------------------------------------------- */

.traffic-graph {
    position: relative;
}


.traffic-graph::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.08);
}


.traffic-graph span {
    transform-origin: bottom;

    animation:
        graph-rise 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;

    transition:
        background 180ms ease;
}


.traffic-graph span:hover {
    background:
        rgba(255, 255, 255, 0.5);
}


.traffic-graph span:nth-child(1) {
    animation-delay: 40ms;
}


.traffic-graph span:nth-child(2) {
    animation-delay: 70ms;
}


.traffic-graph span:nth-child(3) {
    animation-delay: 100ms;
}


.traffic-graph span:nth-child(4) {
    animation-delay: 130ms;
}


.traffic-graph span:nth-child(5) {
    animation-delay: 160ms;
}


.traffic-graph span:nth-child(6) {
    animation-delay: 190ms;
}


.traffic-graph span:nth-child(7) {
    animation-delay: 220ms;
}


.traffic-graph span:nth-child(8) {
    animation-delay: 250ms;
}


.traffic-graph span:nth-child(9) {
    animation-delay: 280ms;
}


.traffic-graph span:nth-child(10) {
    animation-delay: 310ms;
}


.traffic-graph span:nth-child(11) {
    animation-delay: 340ms;
}


.traffic-graph span:nth-child(12) {
    animation-delay: 370ms;
}


@keyframes graph-rise {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }

}


/* ---------------------------------------------------------
   Feature cards
   --------------------------------------------------------- */

.feature-card {
    position: relative;

    overflow: hidden;
}


.feature-card::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    top: -120px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.045);

    filter: blur(45px);

    transition:
        transform 400ms ease,
        opacity 400ms ease;

    opacity: 0.5;

    pointer-events: none;
}


.feature-card:hover::before {
    transform: scale(1.5);

    opacity: 0.9;
}


.feature-card > * {
    position: relative;

    z-index: 1;
}


.feature-icon {
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
}


.feature-card:hover .feature-icon {
    transform:
        translateY(-2px)
        rotate(-3deg);

    border-color:
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.075);
}


/* ---------------------------------------------------------
   CLI
   --------------------------------------------------------- */

.cli-terminal {
    position: relative;
}


.cli-terminal::after {
    content: "";

    position: absolute;

    top: 40px;
    left: 0;
    right: 0;

    height: 100px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.025),
            transparent
        );

    pointer-events: none;
}


.cli-terminal-content {
    position: relative;

    z-index: 1;
}


.cli-terminal-bar {
    background:
        rgba(255, 255, 255, 0.018);
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.cta-card {
    position: relative;

    transition:
        border-color 300ms ease;
}


.cta-card:hover {
    border-color:
        rgba(255, 255, 255, 0.15);
}


.cta-card .button-primary {
    box-shadow:
        0 15px 45px rgba(255, 255, 255, 0.1);
}


.cta-card .button-primary:hover {
    box-shadow:
        0 20px 60px rgba(255, 255, 255, 0.15);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer-brand .brand-mark {
    width: 24px;
    height: 24px;

    border-radius: 7px;

    font-size: 10px;
}


.footer-links a {
    position: relative;
}


.footer-links a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -4px;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.35);

    transform:
        scaleX(0);

    transform-origin: right;

    transition:
        transform 200ms ease;
}


.footer-links a:hover::after {
    transform:
        scaleX(1);

    transform-origin: left;
}


/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */

::selection {
    background:
        rgba(255, 255, 255, 0.2);

    color: #ffffff;
}


/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-track {
    background: transparent;
}


::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, 0.12);

    border-radius: 999px;
}


::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.2);
}


/* ---------------------------------------------------------
   Focus states
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);

    outline-offset: 4px;
}


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

@media (prefers-reduced-motion: reduce) {

    .metric-bar span,
    .traffic-graph span {
        animation: none;
    }

}


/* =========================================================
   CONTROL DECK PAGE
   Isolated page styling
   ========================================================= */

.page-hero {
    padding-top: 148px;
    padding-bottom: 72px;
}

.page-hero .hero-content {
    max-width: 860px;
}


/* ---------------------------------------------------------
   Control Deck dashboard
   --------------------------------------------------------- */

.dashboard-large {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.dashboard-large::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 300px;

    top: -180px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(110, 145, 255, 0.12),
            transparent 70%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Page header inside dashboard
   --------------------------------------------------------- */

.dashboard-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.dashboard-page-header h2 {
    margin: 7px 0 5px;

    font-size: 24px;
    line-height: 1.15;

    letter-spacing: -0.035em;
}

.dashboard-page-header p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}

.dashboard-time {
    flex-shrink: 0;

    padding: 6px 10px;

    border: 1px solid rgba(80, 230, 145, 0.16);
    border-radius: 999px;

    background: rgba(80, 230, 145, 0.06);

    color: rgba(150, 255, 190, 0.9);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   Dashboard content grid
   --------------------------------------------------------- */

.dashboard-large .dashboard-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);

    gap: 14px;

    margin-top: 14px;
}


/* ---------------------------------------------------------
   Interface status
   --------------------------------------------------------- */

.dashboard-large .interface-list {
    display: flex;
    flex-direction: column;

    margin-top: 18px;
}

.dashboard-large .interface-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);

    color: var(--text-muted);

    font-size: 12px;
}

.dashboard-large .interface-row:last-child {
    border-bottom: 0;
}

.dashboard-large .interface-row strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 500;
}

.dashboard-large .interface-row strong::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 9px rgba(80, 230, 145, 0.55);
}


/* ---------------------------------------------------------
   Security
   --------------------------------------------------------- */

.dashboard-large .security-list {
    margin-top: 18px;
}

.dashboard-large .security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);

    color: var(--text-muted);

    font-size: 12px;
}

.dashboard-large .security-row:last-child {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   Status badge
   --------------------------------------------------------- */

.dashboard-large .status-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border: 1px solid rgba(80, 230, 145, 0.14);
    border-radius: 6px;

    background: rgba(80, 230, 145, 0.055);

    color: rgba(155, 255, 195, 0.9);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}


/* ---------------------------------------------------------
   Control Deck traffic
   --------------------------------------------------------- */

.dashboard-large .traffic-panel {
    margin-top: 14px;
}

.dashboard-large .traffic-value {
    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Feature section
   --------------------------------------------------------- */

.page-hero + .section .section-heading {
    max-width: 700px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .page-hero {
        padding-top: 120px;
        padding-bottom: 52px;
    }

    .dashboard-large .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-page-header {
        flex-direction: column;
    }

}


@media (max-width: 430px) {

    .page-hero {
        padding-top: 105px;
    }

    .dashboard-page-header h2 {
        font-size: 21px;
    }

}