:root {
    --bg: #080b10;
    --bg-secondary: #0c1016;
    --panel: #10161e;
    --panel-light: #141b24;

    --text: #f4f7fb;
    --muted: #8994a4;
    --muted-dark: #596575;

    --accent: #9fffd2;
    --accent-dark: #66dda9;

    --border: rgba(255,255,255,.085);

    --shadow:
        0 30px 90px rgba(0,0,0,.40);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 45% -15%,
            rgba(83,140,120,.12),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;
}


body::before {

    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent 18%
        );

    z-index: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.container {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */


#background-network {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: .6;

    z-index: 0;
}


.noise {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    opacity: .03;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}


/* ==========================================================
   HEADER
   ========================================================== */


.header {

    position: sticky;

    top: 0;

    z-index: 100;

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

    background:
        rgba(8,11,16,.72);

    backdrop-filter:
        blur(18px);
}


.nav {

    height: 78px;

    display: flex;

    align-items: center;

    gap: 28px;
}


.logo {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: max-content;
}


.logo-symbol {

    position: relative;

    width: 34px;
    height: 34px;
}


.logo-symbol span {

    position: absolute;

    width: 15px;
    height: 15px;

    border:
        1px solid rgba(159,255,210,.72);

    transform:
        rotate(45deg);
}


.logo-symbol span:nth-child(1) {

    left: 2px;
    top: 9px;

}


.logo-symbol span:nth-child(2) {

    left: 10px;
    top: 1px;

}


.logo-symbol span:nth-child(3) {

    left: 10px;
    top: 17px;

    border-color:
        rgba(255,255,255,.32);

}


.logo strong {

    display: block;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        .18em;

    line-height:
        1;
}


.logo small {

    display: block;

    margin-top:
        5px;

    color:
        #697482;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .38em;
}


.nav-links {

    display: flex;

    gap: 27px;

    margin-left:
        30px;
}


.nav-links a {

    color:
        #96a1ae;

    font-size:
        13px;

    transition:
        .2s ease;
}


.nav-links a:hover {

    color:
        white;
}


.nav-right {

    margin-left:
        auto;

    display: flex;

    align-items:
        center;

    gap:
        17px;
}


.system-status {

    display: flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #747f8e;

    font-size:
        9px;

    letter-spacing:
        .11em;
}


.system-status i {

    width:
        7px;

    height:
        7px;

    background:
        var(--accent);

    border-radius:
        50%;

    box-shadow:
        0 0 16px rgba(159,255,210,.8);
}


.button {

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 18px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .25s ease;
}


.button:hover {

    transform:
        translateY(-2px);
}


.button.secondary {

    background:
        rgba(255,255,255,.025);
}


.button.primary {

    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        #07100d;

    box-shadow:
        0 15px 40px rgba(100,255,190,.10);
}


.button.primary:hover {

    background:
        #b7ffdf;
}


.text-button {

    border-color:
        transparent;

    color:
        #acb7c3;
}


.mobile-button,
.mobile-menu {

    display:
        none;
}


/* ==========================================================
   HERO
   ========================================================== */


.hero {

    position:
        relative;

    padding:
        110px 0 90px;
}


.hero::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );
}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1.03fr .97fr;

    gap:
        65px;

    align-items:
        center;
}


.eyebrow,
.section-number {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .22em;
}


.hero h1 {

    margin:
        18px 0 0;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        clamp(52px, 6vw, 85px);

    line-height:
        .98;

    letter-spacing:
        -.05em;
}


.hero h1 span {

    color:
        #737e8b;
}


.hero-description {

    max-width:
        620px;

    margin:
        30px 0 0;

    color:
        #909cab;

    font-size:
        17px;

    line-height:
        1.8;
}


.hero-buttons {

    display:
        flex;

    gap:
        12px;

    margin-top:
        34px;
}


.hero-metrics {

    display:
        flex;

    gap:
        35px;

    margin-top:
        52px;

    padding-top:
        27px;

    border-top:
        1px solid var(--border);
}


.hero-metrics > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.hero-metrics strong {

    font-family:
        Manrope,
        sans-serif;

    font-size:
        18px;
}


.hero-metrics span {

    color:
        #606c7b;

    font-size:
        9px;

    letter-spacing:
        .13em;
}


/* ==========================================================
   HERO PANEL
   ========================================================== */


.control-panel {

    position:
        relative;

    min-height:
        535px;

    display:
        flex;

    align-items:
        center;
}


.terminal {

    width:
        100%;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:
        20px;

    background:
        linear-gradient(
            180deg,
            rgba(20,26,35,.97),
            rgba(11,15,21,.97)
        );

    box-shadow:
        var(--shadow);
}


.terminal-header {

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 18px;

    border-bottom:
        1px solid var(--border);

    color:
        #667281;

    font-size:
        9px;

    letter-spacing:
        .12em;
}


.window-buttons {

    display:
        flex;

    gap:
        5px;

    margin-right:
        15px;
}


.window-buttons i {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #38414c;
}


.terminal-header strong {

    margin-left:
        auto;

    color:
        var(--accent);

    font-size:
        9px;
}


.network-map {

    height:
        310px;

    position:
        relative;

    background:

        radial-gradient(
            circle at 50% 43%,
            rgba(100,255,190,.05),
            transparent 43%
        ),

        linear-gradient(
            transparent 23px,
            rgba(255,255,255,.024) 24px
        ),

        linear-gradient(
            90deg,
            transparent 23px,
            rgba(255,255,255,.024) 24px
        );

    background-size:
        auto,
        24px 24px,
        24px 24px;
}


.network-map svg {

    width:
        100%;

    height:
        100%;
}


.connection-lines path {

    fill:
        none;

    stroke:
        rgba(159,255,210,.24);

    stroke-width:
        1.3;

    stroke-dasharray:
        6 7;

    animation:
        dash 14s linear infinite;
}


.node-ring {

    fill:
        rgba(159,255,210,.025);

    stroke:
        rgba(159,255,210,.15);
}


.main-ring {

    stroke:
        rgba(159,255,210,.30);
}


.node-core {

    fill:
        var(--accent);

    filter:
        drop-shadow(
            0 0 10px rgba(159,255,210,.85)
        );
}


.network-nodes text {

    fill:
        #798493;

    font:
        700 9px Inter;

    letter-spacing:
        .11em;
}


.map-status {

    position:
        absolute;

    left:
        19px;

    bottom:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        8px;

    letter-spacing:
        .12em;
}


.map-status span {

    color:
        #5e6977;
}


.map-status strong {

    color:
        var(--accent);
}


.terminal-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid var(--border);
}


.terminal-stats div {

    padding:
        18px;

    border-right:
        1px solid var(--border);
}


.terminal-stats div:last-child {

    border-right:
        0;
}


.terminal-stats span {

    display:
        block;

    color:
        #647080;

    font-size:
        8px;

    letter-spacing:
        .12em;
}


.terminal-stats strong {

    display:
        block;

    margin-top:
        7px;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        16px;
}


.floating-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 14px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        rgba(17,23,31,.94);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);
}


.floating-card span {

    display:
        block;

    color:
        #667282;

    font-size:
        8px;

    letter-spacing:
        .1em;
}


.floating-card strong {

    display:
        block;

    margin-top:
        4px;

    font-size:
        11px;
}


.float-icon {

    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--accent);

    background:
        rgba(159,255,210,.08);
}


.floating-left {

    left:
        -28px;

    bottom:
        48px;
}


.floating-right {

    right:
        -25px;

    top:
        65px;
}


/* ==========================================================
   STRIP
   ========================================================== */


.technology-strip {

    border-bottom:
        1px solid var(--border);

    background:
        rgba(255,255,255,.012);
}


.technology-inner {

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}


.technology-inner span {

    color:
        #4f5b69;

    font-size:
        8px;

    letter-spacing:
        .18em;
}


.technology-inner strong {

    color:
        #626d7b;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        .11em;
}


/* ==========================================================
   SECTIONS
   ========================================================== */


.section {

    padding:
        120px 0;
}


.section-heading {

    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        58px;
}


.section h2 {

    margin:
        15px 0 0;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        clamp(42px, 5vw, 67px);

    line-height:
        1.04;

    letter-spacing:
        -.045em;
}


.section-heading > p,
.network-copy > p,
.architecture-copy > p {

    margin:
        0;

    color:
        #84909f;

    font-size:
        15px;

    line-height:
        1.8;
}


/* ==========================================================
   PLATFORM
   ========================================================== */


.platform-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:
        18px;
}


.feature {

    min-height:
        340px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        27px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #101720,
            #0d1218
        );
}


.feature-main {

    grid-row:
        span 2;

    min-height:
        700px;
}


.feature-label {

    color:
        #5e6977;

    font-size:
        8px;

    letter-spacing:
        .15em;
}


.feature h3 {

    margin:
        20px 0 10px;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        24px;

    letter-spacing:
        -.025em;
}


.feature p {

    max-width:
        520px;

    color:
        #778393;

    font-size:
        14px;

    line-height:
        1.7;
}


.dashboard {

    position:
        absolute;

    left:
        27px;

    right:
        27px;

    bottom:
        27px;

    height:
        350px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    background:
        #090e13;
}


.dashboard-header {

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 13px;

    border-bottom:
        1px solid var(--border);
}


.dashboard-header i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #35404b;
}


.dashboard-content {

    height:
        calc(100% - 38px);

    display:
        flex;
}


.dashboard aside {

    width:
        57px;

    padding:
        15px 12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    border-right:
        1px solid var(--border);
}


.dashboard aside span {

    height:
        6px;

    border-radius:
        4px;

    background:
        #26303a;
}


.dashboard-main {

    flex:
        1;

    padding:
        20px;
}


.chart-title {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #647080;

    font-size:
        8px;

    letter-spacing:
        .1em;
}


.chart-title strong {

    color:
        var(--accent);
}


.dashboard-main svg {

    width:
        100%;

    height:
        230px;

    margin-top:
        22px;
}


.chart-line {

    fill:
        none;

    stroke:
        var(--accent);

    stroke-width:
        2px;
}


.chart-fill {

    fill:
        rgba(159,255,210,.065);
}


.circle-metrics {

    position:
        absolute;

    left:
        27px;

    bottom:
        27px;

    display:
        flex;

    gap:
        18px;
}


.metric-circle {

    width:
        111px;

    height:
        111px;

    position:
        relative;

    display:
        grid;

    align-content:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(159,255,210,.13);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(159,255,210,.05),
            transparent 67%
        );
}


.metric-circle::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border-radius:
        50%;

    border-top:
        2px solid var(--accent);

    border-right:
        2px solid transparent;

    transform:
        rotate(30deg);
}


.metric-circle strong {

    text-align:
        center;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        17px;
}


.metric-circle span {

    margin-top:
        4px;

    text-align:
        center;

    color:
        #657181;

    font-size:
        8px;

    letter-spacing:
        .12em;
}


.code {

    position:
        absolute;

    left:
        27px;

    right:
        27px;

    bottom:
        28px;

    padding:
        16px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        #090d12;

    color:
        #778393;

    font:
        12px/1.8 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


.code span {

    display:
        block;
}


.code em {

    color:
        #aab9c8;

    font-style:
        normal;
}


.code b {

    color:
        var(--accent);

    font-weight:
        500;
}


/* ==========================================================
   NETWORK
   ========================================================== */


.network-section {

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:
        #090d12;
}


.network-layout {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        100px;
}


.network-copy {

    position:
        sticky;

    top:
        120px;

    height:
        max-content;
}


.network-copy h2 {

    margin:
        15px 0 25px;
}


.network-features {

    border-top:
        1px solid var(--border);
}


.network-features article {

    display:
        grid;

    grid-template-columns:
        55px 1fr 30px;

    gap:
        20px;

    align-items:
        start;

    padding:
        29px 0;

    border-bottom:
        1px solid var(--border);
}


.network-features article > span {

    color:
        #53606e;

    font-size:
        9px;
}


.network-features h3 {

    margin:
        0;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        21px;
}


.network-features p {

    margin:
        8px 0 0;

    color:
        #73808f;

    font-size:
        14px;

    line-height:
        1.65;
}


.network-features article > strong {

    color:
        #606c79;

    font-size:
        20px;

    font-weight:
        400;

    transition:
        .2s ease;
}


.network-features article:hover > strong {

    color:
        var(--accent);

    transform:
        translateX(6px);
}


/* ==========================================================
   SECURITY
   ========================================================== */


.security-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        14px;
}


.security-grid article {

    min-height:
        280px;

    padding:
        25px;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.014);

    transition:
        .25s ease;
}


.security-grid article:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(159,255,210,.17);
}


.security-number {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(159,255,210,.15);

    border-radius:
        10px;

    background:
        rgba(159,255,210,.035);

    color:
        var(--accent);

    font-size:
        9px;
}


.security-grid h3 {

    margin:
        55px 0 12px;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        19px;
}


.security-grid p {

    margin:
        0;

    color:
        #707d8c;

    font-size:
        13px;

    line-height:
        1.75;
}


/* ==========================================================
   ARCHITECTURE
   ========================================================== */


.architecture {

    padding-top:
        0;
}


.architecture-card {

    display:
        grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap:
        60px;

    align-items:
        center;

    padding:
        48px;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #101720,
            #090e14
        );
}


.architecture-copy h2 {

    margin:
        15px 0 22px;

    font-size:
        51px;
}


.architecture-points {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px;

    margin-top:
        29px;
}


.architecture-points span {

    color:
        #929dac;

    font-size:
        12px;
}


.architecture-points i {

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    margin-right:
        8px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 12px rgba(159,255,210,.55);
}


.architecture-diagram {

    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

    background:
        #090d12;
}


.layer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        16px 18px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        9px;

    background:
        #10161e;
}


.layer span {

    color:
        #707d8c;

    font-size:
        8px;

    letter-spacing:
        .13em;
}


.layer strong {

    font-size:
        11px;

    font-weight:
        600;
}


.arrow {

    padding:
        9px 0;

    text-align:
        center;

    color:
        #43505e;
}


.layer-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


/* ==========================================================
   CONTACT
   ========================================================== */


.contact-section {

    padding:
        0 0 120px;
}


.contact-card {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        48px;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:

        radial-gradient(
            circle at 82% 50%,
            rgba(159,255,210,.075),
            transparent 30%
        ),

        #0f151c;
}


.contact-card h2 {

    margin:
        15px 0 0;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        48px;

    line-height:
        1.07;

    letter-spacing:
        -.045em;
}


.contact-button {

    height:
        52px;

    padding:
        0 24px;
}


/* ==========================================================
   FOOTER
   ========================================================== */


footer {

    position:
        relative;

    z-index:
        2;

    padding:
        60px 0 40px;

    border-top:
        1px solid var(--border);
}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr .6fr .6fr .8fr;

    gap:
        50px;
}


.footer-grid p {

    margin-top:
        20px;

    color:
        #5f6b79;

    font-size:
        12px;
}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.footer-links span {

    margin-bottom:
        5px;

    color:
        #596574;

    font-size:
        8px;

    letter-spacing:
        .15em;
}


.footer-links a {

    color:
        #919caa;

    font-size:
        12px;
}


.footer-status {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    align-items:
        flex-end;

    text-align:
        right;
}


.footer-status strong {

    color:
        #8793a1;

    font-size:
        10px;

    letter-spacing:
        .1em;
}


.footer-status i {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-right:
        7px;

    border-radius:
        50%;

    background:
        var(--accent);
}


.footer-status span {

    color:
        #505d6b;

    font-size:
        9px;
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */


@keyframes dash {

    to {

        stroke-dashoffset:
            -160;

    }

}


.reveal-object {

    opacity:
        0;

    transform:
        translateY(18px);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


@media (max-width: 1000px) {

    .nav-links,
    .system-status,
    .nav-right .secondary {

        display:
            none;

    }


    .mobile-button {

        margin-left:
            auto;

        width:
            36px;

        height:
            36px;

        display:
            block;

        border:
            0;

        background:
            none;

    }


    .mobile-button span {

        height:
            1px;

        display:
            block;

        margin:
            7px 0;

        background:
            #d0d7df;

    }


    .mobile-menu.open {

        display:
            flex;

        flex-direction:
            column;

        gap:
            17px;

        padding:
            20px 24px;

        border-top:
            1px solid var(--border);

        background:
            #0b0f15;

    }


    .mobile-menu a {

        color:
            #a4afbc;

        font-size:
            14px;

    }


    .hero-grid,
    .section-heading,
    .network-layout,
    .architecture-card {

        grid-template-columns:
            1fr;

    }


    .control-panel {

        min-height:
            auto;

        margin-top:
            30px;

    }


    .network-layout {

        gap:
            55px;

    }


    .network-copy {

        position:
            relative;

        top:
            auto;

    }


    .security-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-status {

        align-items:
            flex-start;

        text-align:
            left;

        gap:
            20px;

    }

}


@media (max-width: 720px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .nav {

        height:
            68px;

    }


    .hero {

        padding:
            75px 0 70px;

    }


    .hero h1 {

        font-size:
            48px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .hero-metrics {

        flex-wrap:
            wrap;

        gap:
            22px;

    }


    .network-map {

        height:
            240px;

    }


    .floating-card {

        display:
            none;

    }


    .terminal-stats {

        grid-template-columns:
            1fr;

    }


    .terminal-stats div {

        border-right:
            0;

        border-bottom:
            1px solid var(--border);

    }


    .technology-inner {

        justify-content:
            flex-start;

        overflow-x:
            auto;

    }


    .technology-inner strong {

        white-space:
            nowrap;

    }


    .section {

        padding:
            85px 0;

    }


    .section-heading {

        gap:
            28px;

    }


    .platform-grid {

        grid-template-columns:
            1fr;

    }


    .feature-main {

        min-height:
            580px;

    }


    .dashboard {

        height:
            300px;

    }


    .security-grid {

        grid-template-columns:
            1fr;

    }


    .architecture-card {

        padding:
            27px;

    }


    .architecture-copy h2,
    .contact-card h2 {

        font-size:
            38px;

    }


    .architecture-points {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}