/* =========================================================
   ZYYRON SERVICE PAGE - COMPLETE RESPONSIVE CSS
========================================================= */

:root {
    --primary: #0878ff;
    --primary-hover: #075fd6;
    --secondary: #00b8d9;

    --text-dark: #101a35;
    --text-heading: #092f4f;
    --text-muted: #678196;

    --blue-light: #e9f5ff;
    --blue-border: rgba(7,95,214,.55);

    --white: #ffffff;
}


/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;

    color: #17324d;

    background:
        radial-gradient(
            circle at 10% 10%,
            #d9f5ff 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 25%,
            #e7edff 0,
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fcff,
            #edf8ff 50%,
            #f7fbff
        );

    overflow-x: hidden;

    padding-top: 75px;
}

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

button {
    font-family: inherit;
}


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

body::before {
    content: "";

    position: fixed;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0,125,210,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,125,210,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;

    z-index: -5;
}


/* =========================================================
   FLOATING ORBS
========================================================= */

.orb {
    position: fixed;

    border-radius: 50%;

    filter: blur(60px);

    pointer-events: none;

    z-index: -3;
}

.orb-one {
    width: 300px;
    height: 300px;

    background: #00c6ff;

    top: 50px;
    left: -130px;

    opacity: .25;

    animation:
        orbOne 10s ease-in-out infinite alternate;
}

.orb-two {
    width: 350px;
    height: 350px;

    background: #5777ff;

    right: -160px;
    top: 500px;

    opacity: .18;

    animation:
        orbTwo 12s ease-in-out infinite alternate;
}

.orb-three {
    width: 220px;
    height: 220px;

    background: #00e0c7;

    left: 35%;
    bottom: 50px;

    opacity: .12;

    animation:
        orbThree 9s ease-in-out infinite alternate;
}


/* =========================================================
   CURSOR GLOW
========================================================= */

.cursor-glow {
    position: fixed;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.15),
            transparent 65%
        );

    pointer-events: none;

    transform:
        translate(-50%, -50%);

    z-index: 999999;

    mix-blend-mode: multiply;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: auto;

    z-index: 99999;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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

    box-shadow:
        0 8px 30px rgba(40,50,90,.08);
}


/* =========================================================
   NAV CONTAINER
========================================================= */

.nav-container {
    width: 100%;

    max-width: 1200px;

    min-height: 75px;

    margin: 0 auto;

    padding: 14px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;
}

.logo img {
    height: 50px;

    width: auto;

    max-width: 180px;

    object-fit: contain;

    border-radius: 8px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-links {
    display: flex;

    align-items: center;

    gap: 4px;

    list-style: none;

    margin: 0;
    padding: 6px;

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

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

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

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(40,50,90,.07),
        inset 0 1px 1px rgba(255,255,255,.80);
}

.nav-links li {
    list-style: none;
}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-links a {
    display: flex;

    align-items: center;

    justify-content: center;

    color: #536078;

    text-decoration: none;

    padding: 10px 13px;

    min-height: 40px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    border-radius: 12px;

    border:
        1px solid transparent;

    transition:
        all .3s ease;
}


/* =========================================================
   NAV HOVER
========================================================= */

.nav-links a:hover {
    color: var(--primary);

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

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

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 5px 15px rgba(70,80,120,.10),
        inset 0 1px 1px rgba(255,255,255,.90);

    transform:
        translateY(-1px);
}


/* =========================================================
   ACTIVE NAV
========================================================= */

.nav-links a.active {
    color: var(--primary);

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

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

    box-shadow:
        0 5px 15px rgba(70,80,120,.10),
        inset 0 1px 2px rgba(255,255,255,.90);
}


/* =========================================================
   NAV CTA
========================================================= */

.nav-links .nav-cta {
    color: #17213b !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.90),
            rgba(240,243,255,.70)
        ) !important;

    border:
        1px solid rgba(255,255,255,.90) !important;

    border-radius: 13px;

    box-shadow:
        0 6px 18px rgba(99,91,255,.16),
        inset 0 1px 2px rgba(255,255,255,1);

    backdrop-filter: blur(12px);

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

.nav-links .nav-cta:hover {
    color: #17213b !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(238,241,255,.90)
        ) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(99,91,255,.22),
        inset 0 1px 2px rgba(255,255,255,1);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

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

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

    color: #17213b;

    font-size: 26px;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 5px 15px rgba(40,50,90,.08);

    transition:
        all .3s ease;
}

.menu-btn:hover {
    background:
        rgba(255,255,255,.75);

    transform:
        translateY(-1px);
}


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

.trust-strip {
    max-width: 1150px;

    margin: 0 auto 25px;

    padding: 18px 25px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    gap: 15px;

    flex-wrap: wrap;

    border-radius: 20px;

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

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

    backdrop-filter: blur(16px);

    box-shadow:
        0 12px 35px rgba(0,80,150,.07);
}

.trust-item {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #577489;

    font-size: 12px;

    font-weight: 700;
}

.trust-item i {
    color: #008bdd;
}

.trust-item h2 {
    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.section {
    max-width: 1250px;

    margin: auto;

    padding: 65px 6%;
}

.section-heading {
    text-align: center;

    margin-bottom: 38px;
}

.tag {
    display: inline-flex;

    align-items: center;

    padding: 9px 15px;

    border-radius: 50px;

    color: #007bc9;

    background:
        rgba(0,145,234,.08);

    border:
        1px solid rgba(0,145,234,.12);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 12px;
}

.section-heading h2 {
    font-family: 'Space Grotesk', sans-serif;

    font-size:
        clamp(38px,5vw,64px);

    color: #092f4f;

    letter-spacing: -2.5px;

    margin-bottom: 16px;

    font-weight: 800;
}

.section-heading p {
    max-width: 700px;

    margin: auto;

    color: #678196;

    line-height: 1.65;

    font-size: 15px;
}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {
    display: grid;

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

    gap: 25px;
}

.service-card {
    position: relative;

    min-height: 360px;

    padding: 30px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.35)
        );

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

    backdrop-filter: blur(20px);

    box-shadow:
        14px 14px 35px rgba(0,80,140,.08),
        -8px -8px 25px rgba(255,255,255,.8),
        inset 0 1px 1px white;

    transition:
        transform .45s,
        box-shadow .45s;
}

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

    position: absolute;

    width: 140px;
    height: 140px;

    top: -70px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(0,184,255,.15);

    filter: blur(20px);

    transition: .5s;
}

.service-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 500px;

    top: -100px;
    left: -180px;

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

    transform:
        rotate(25deg);

    transition: .8s;
}

.service-card:hover {
    transform:
        translateY(-14px)
        scale(1.015);

    box-shadow:
        20px 25px 50px rgba(0,80,140,.13),
        -10px -10px 30px white,
        0 0 30px rgba(0,170,255,.07);
}

.service-card:hover::after {
    left: 120%;
}

.service-card:hover::before {
    transform: scale(1.8);
}


/* =========================================================
   SERVICE ICON
========================================================= */

.service-icon {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    color: #0086dc;

    font-size: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(0,150,240,.13),
            rgba(255,255,255,.7)
        );

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

    box-shadow:
        6px 6px 13px rgba(0,70,120,.08),
        -5px -5px 12px white,
        inset 0 1px 1px white;

    transition: .4s;
}

.service-card:hover .service-icon {
    transform:
        translateY(-4px)
        rotate(-7deg);

    color: white;

    background:
        linear-gradient(
            145deg,
            #08a9f1,
            #006bc5
        );

    box-shadow:
        0 12px 25px rgba(0,120,210,.25);
}

.service-number {
    position: absolute;

    top: 25px;
    right: 28px;

    font-family: 'Space Grotesk';

    font-size: 13px;

    color: #9ab1c1;

    font-weight: 700;
}

.service-card h3 {
    margin-top: 25px;

    font-family: 'Space Grotesk';

    font-size: 21px;

    color: #173b57;
}

.service-card p {
    margin-top: 13px;

    color: #678094;

    line-height: 1.75;

    font-size: 13px;
}

.service-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: #007acb;

    font-size: 12px;

    font-weight: 800;

    transition: .3s;
}

.service-link:hover {
    gap: 14px;
}


/* =========================================================
   FEATURE PANEL
========================================================= */

.feature-panel {
    margin-top: 60px;

    padding: 45px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 35px;

    align-items: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.75),
            rgba(255,255,255,.35)
        );

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

    backdrop-filter: blur(22px);

    box-shadow:
        18px 18px 50px rgba(0,70,130,.10),
        -10px -10px 30px white,
        inset 0 1px 1px white;
}

.feature-panel h3 {
    font-family: 'Space Grotesk';

    font-size: 32px;

    color: #0a3151;

    margin: 15px 0;
}

.feature-panel p {
    color: #698196;

    line-height: 1.8;
}


/* =========================================================
   DEVICE
========================================================= */

.device-wrap {
    min-height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1000px;
}

.device {
    width: 300px;
    height: 210px;

    padding: 12px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #d9e4eb,
            #aebec9
        );

    box-shadow:
        15px 20px 35px rgba(0,60,100,.22),
        inset 2px 2px 5px white,
        inset -3px -3px 6px #91a3af;

    transform:
        rotateY(-15deg)
        rotateX(8deg)
        rotateZ(-2deg);

    animation:
        deviceFloat 5s ease-in-out infinite;
}

.device-screen {
    width: 100%;
    height: 100%;

    padding: 15px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #061f36,
            #083e64
        );

    overflow: hidden;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.6);
}

.screen-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #82ddff;

    font-size: 9px;
}

.screen-grid {
    margin-top: 18px;

    display: grid;

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

    gap: 8px;
}

.screen-box {
    height: 45px;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(0,190,255,.25),
            rgba(255,255,255,.05)
        );

    border:
        1px solid rgba(0,190,255,.15);
}

.screen-chart {
    height: 65px;

    margin-top: 10px;

    border-radius: 8px;

    background:
        linear-gradient(
            160deg,
            transparent 55%,
            rgba(0,211,255,.8) 56%,
            transparent 58%
        );
}


/* =========================================================
   PROCESS
========================================================= */

.process {
    display: grid;

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

    gap: 18px;
}

.process-card {
    padding: 28px 20px;

    text-align: center;

    border-radius: 24px;

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

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

    backdrop-filter: blur(16px);

    box-shadow:
        8px 12px 30px rgba(0,80,150,.06);

    transition: .4s;
}

.process-card:hover {
    transform:
        translateY(-10px);

    background: white;
}

.process-number {
    width: 58px;
    height: 58px;

    margin: auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    font-family: 'Space Grotesk';

    font-weight: 800;

    background:
        linear-gradient(
            145deg,
            #09a6ef,
            #0067bf
        );

    box-shadow:
        5px 6px 12px rgba(0,70,130,.18),
        inset 2px 2px 3px rgba(255,255,255,.45);
}

.process-card h3 {
    margin-top: 17px;

    font-family: 'Space Grotesk';

    color: #173d59;
}

.process-card p {
    margin-top: 8px;

    color: #71889a;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.tech-wrapper {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;
}

.tech {
    padding: 13px 19px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 50px;

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

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

    backdrop-filter: blur(15px);

    box-shadow:
        5px 7px 15px rgba(0,80,140,.06),
        inset 0 1px 1px white;

    color: #47677c;

    font-size: 12px;

    font-weight: 700;

    transition: .35s;
}

.tech i {
    color: #0088dc;
}

.tech:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    color: #0075c7;

    background: white;

    box-shadow:
        8px 12px 25px rgba(0,80,140,.10);
}


/* =========================================================
   SERVICE PAGE HERO
========================================================= */

.zyyron-image-hero {
    position: relative;

    width: 100%;
    max-width: none;

    min-height:
        calc(100vh - 70px);

    margin: 0;

    padding:
        80px 5vw;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255,255,255,.92) 0 7%,
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(255,255,255,.80),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #e9f5ff 43%,
            #cfe9ff 100%
        );
}

.zyyron-image-hero::before,
.zyyron-image-hero::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(47,143,230,.12);

    pointer-events: none;
}

.zyyron-image-hero::before {
    width: 900px;
    height: 900px;

    right: -430px;
    top: -420px;
}

.zyyron-image-hero::after {
    width: 760px;
    height: 760px;

    left: -500px;
    bottom: -620px;
}


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

.zyyron-image-hero-inner {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    align-items: center;

    gap:
        clamp(40px,6vw,100px);
}


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

.zyyron-image-hero-content {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 720px;
}

.zyyron-image-badge {
    display: inline-block;

    padding: 9px 16px;

    margin-bottom: 27px;

    border-radius: 9px;

    background: #dceeff;

    color: #075fd6;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .3px;
}

.zyyron-image-hero h1 {
    margin: 0 0 24px;

    font-family:
        'Space Grotesk',
        sans-serif;

    font-size:
        clamp(42px,5.1vw,72px);

    line-height: 1.08;

    letter-spacing: -3px;

    color: #101a35;
}

.zyyron-image-hero h1 span {
    color: #1268e5;
}

.zyyron-image-hero-content > p {
    max-width: 650px;

    margin: 0;

    color: #53657d;

    font-size: 17px;

    line-height: 1.75;
}


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

.zyyron-image-points {
    display: flex;

    flex-wrap: wrap;

    gap: 26px 34px;

    margin:
        28px 0 30px;
}

.zyyron-image-points div {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #14213a;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 600;
}

.zyyron-image-points i {
    display: grid;

    place-items: center;

    width: 23px;
    height: 23px;

    flex:
        0 0 23px;

    border-radius: 50%;

    background: #1670e9;

    color: #fff;

    font-size: 11px;

    box-shadow:
        0 4px 10px rgba(22,112,233,.2);
}


/* =========================================================
   HERO BUTTON CONTAINER
========================================================= */

.zyyron-image-hero .hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 0;
}


/* =========================================================
   HERO COMMON BUTTON
========================================================= */

.zyyron-image-hero .hero-buttons .btn {

    min-width: 185px;

    height: 54px;

    padding:
        0 27px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 15px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


/* =========================================================
   PRIMARY BLUE BUTTON
========================================================= */

.zyyron-image-hero .btn-primary {

    background:
        linear-gradient(
            135deg,
            #0878ff 0%,
            #168cff 50%,
            #00b8d9 100%
        );

    color: #ffffff !important;

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

    box-shadow:
        0 8px 20px rgba(0,114,255,.25),
        0 3px 8px rgba(0,114,255,.15),
        inset 0 1px 1px rgba(255,255,255,.35);
}


/* =========================================================
   PRIMARY BUTTON SHINE
========================================================= */

.zyyron-image-hero .btn-primary::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

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

    transform:
        skewX(-20deg);

    transition:
        left .6s ease;

    pointer-events: none;
}

.zyyron-image-hero .btn-primary:hover::before {
    left: 140%;
}


/* =========================================================
   PRIMARY BUTTON HOVER
========================================================= */

.zyyron-image-hero .btn-primary:hover {

    transform:
        translateY(-3px);

    color: #ffffff !important;

    box-shadow:
        0 14px 30px rgba(0,114,255,.32),
        0 5px 12px rgba(0,114,255,.18);
}


/* =========================================================
   SECOND WHITE / GLASS BUTTON
========================================================= */

.zyyron-image-hero .btn-glass {

    min-width: 185px;

    height: 54px;

    padding:
        0 27px;

    color: #075fd6 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.65)
        );

    border:
        1.5px solid rgba(7,95,214,.55);

    border-radius: 15px;

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 7px 20px rgba(40,100,160,.10),
        inset 0 1px 2px rgba(255,255,255,.95);
}


/* =========================================================
   GLASS BUTTON HOVER
========================================================= */

.zyyron-image-hero .btn-glass:hover {

    transform:
        translateY(-3px);

    color: #075fd6 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,1),
            rgba(238,248,255,.92)
        );

    border-color:
        #0878ff;

    box-shadow:
        0 12px 28px rgba(0,114,255,.16),
        inset 0 1px 2px rgba(255,255,255,1);
}


/* =========================================================
   HERO BUTTON ICON
========================================================= */

.zyyron-image-hero .hero-buttons .btn i {

    font-size: 13px;

    transition:
        transform .3s ease;
}

.zyyron-image-hero .btn-primary:hover i,
.zyyron-image-hero .btn-glass:hover i {

    transform:
        translateX(4px);
}


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

.zyyron-image-visual {
    position: relative;

    width: 100%;

    height: 535px;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   SERVICE ORBITS
========================================================= */

.zyyron-service-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    border:
        2px solid rgba(32,126,235,.23);

    border-radius: 50%;
}

.orbit-1 {
    width: 410px;
    height: 410px;
}

.orbit-2 {
    width: 570px;
    height: 570px;

    border-style: dashed;

    border-color:
        rgba(32,126,235,.18);
}


/* =========================================================
   SERVICE LINES
========================================================= */

.zyyron-service-line {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 150px;
    height: 2px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            #5ca6ef,
            transparent
        );

    opacity: .75;
}

.line-1 {
    transform:
        rotate(-153deg);
}

.line-2 {
    transform:
        rotate(-93deg);
}

.line-3 {
    transform:
        rotate(-30deg);
}

.line-4 {
    transform:
        rotate(31deg);
}

.line-5 {
    transform:
        rotate(91deg);
}

.line-6 {
    transform:
        rotate(151deg);
}


/* =========================================================
   LAPTOP
========================================================= */

.zyyron-laptop {

    position: relative;

    width:
        min(355px,72%);

    z-index: 4;

    filter:
        drop-shadow(
            0 25px 30px rgba(29,86,145,.2)
        );
}

.zyyron-laptop-screen {

    height: 235px;

    border:
        8px solid #13223c;

    border-bottom-width:
        11px;

    border-radius:
        12px 12px 5px 5px;

    background:
        linear-gradient(
            145deg,
            #fafdff,
            #dceeff
        );

    display: grid;

    place-items: center;

    box-shadow:
        inset 0 0 0 2px #8db9e8;
}

.zyyron-laptop-base {

    position: relative;

    height: 24px;

    border-radius:
        0 0 18px 18px;

    background:
        linear-gradient(
            #d9e5ef,
            #94abc2
        );

    box-shadow:
        0 8px 0 #6e8299;
}

.zyyron-laptop-base::after {

    content: "";

    position: absolute;

    width: 85px;

    height: 5px;

    left: 50%;
    top: 0;

    transform:
        translateX(-50%);

    border-radius:
        0 0 8px 8px;

    background:
        #8399af;
}


/* =========================================================
   SERVICE NODES
========================================================= */

.zyyron-service-node {

    position: absolute;

    z-index: 6;

    width: 100px;
    height: 100px;

    border:
        3px solid #b8d8fb;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    line-height: 1.05;

    color: #111c32;

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

    box-shadow:
        0 10px 25px rgba(47,120,196,.12);
}

.zyyron-service-node i {

    margin-bottom: 6px;

    color: #0e62d0;

    font-size: 29px;
}

.zyyron-service-node b {
    font-size: 14px;
}

.zyyron-service-node span {

    margin-top: 3px;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   SERVICE NODE POSITIONS
========================================================= */

.node-web {
    top: 18px;
    left: 50%;

    transform:
        translateX(-50%);
}

.node-seo {
    top: 82px;
    right: 2%;
}

.node-ai {
    right: -1%;
    bottom: 73px;
}

.node-software {
    bottom: -2px;
    left: 50%;

    transform:
        translateX(-50%);
}

.node-app {
    top: 96px;
    left: 1%;
}

.node-marketing {
    left: -1%;
    bottom: 78px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    max-width: 1150px;

    margin:
        40px auto 100px;

    padding:
        70px 40px;

    text-align: center;

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #007fd4,
            #6795c3
        );

    box-shadow:
        20px 25px 60px rgba(211,227,245,.2);
}

.final-cta::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -220px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(237,246,247,.25);

    filter: blur(30px);
}

.final-cta::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    bottom: -150px;

    border-radius: 50%;

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

    filter: blur(20px);
}

.final-cta h2 {

    position: relative;

    z-index: 2;

    font-family:
        'Space Grotesk';

    font-size:
        clamp(32px,4vw,50px);

    margin-bottom: 15px;
}

.final-cta p {

    position: relative;

    z-index: 2;

    max-width: 650px;

    margin: auto;

    line-height: 1.8;

    opacity: .82;
}

.final-cta .btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 28px;

    padding:
        14px 28px;

    background: #ffffff;

    color: #0d72c6;

    font-weight: 600;

    border-radius: 50px;

    text-decoration: none;

    box-shadow:
        0 4px 15px rgba(0,0,0,.15);

    transition:
        all .3s ease;
}

.final-cta .btn:hover {

    background:
        #0d72c6;

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0,0,0,.25);
}


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

footer.site-footer {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    padding:
        80px 7% 25px;

    color: white;

    background-image:
        radial-gradient(
            rgba(255,255,255,.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            135deg,
            #0069c9,
            #008fe8 45%,
            #0056a8
        );

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

.site-footer::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -230px;
    left: -130px;

    background:
        rgba(0,238,255,.35);

    border-radius: 50%;

    filter: blur(55px);

    z-index: -1;

    animation:
        footerBlob1 8s ease-in-out infinite;
}

.site-footer::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -160px;
    bottom: -190px;

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

    border-radius: 50%;

    filter: blur(60px);

    z-index: -1;

    animation:
        footerBlob2 10s ease-in-out infinite;
}

.footer-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 25px;

    position: relative;

    z-index: 2;
}

.footer-card {

    position: relative;

    padding: 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.19),
            rgba(255,255,255,.06)
        );

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.12),
        inset 0 1px 1px rgba(255,255,255,.35);

    transition:
        .4s ease;
}

.footer-card:hover {

    transform:
        translateY(-10px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25),
            rgba(255,255,255,.09)
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.18),
        0 0 25px rgba(255,255,255,.12);
}

.footer-brand img {

    height: 52px;

    width: auto;

    padding: 5px;

    margin-bottom: 15px;

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

    border-radius: 12px;

    object-fit: contain;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    transition:
        .4s ease;
}

.footer-brand img:hover {

    transform:
        translateY(-5px)
        rotate(-2deg)
        scale(1.05);
}

.footer-brand p {

    color:
        rgba(255,255,255,.82);

    line-height: 1.8;

    max-width: 330px;

    margin-top: 5px;

    font-size: 14px;
}

.site-footer h3 {

    margin-bottom: 22px;

    font-size: 17px;

    color: white;

    position: relative;
}

.site-footer h3::after {

    content: "";

    display: block;

    width: 32px;

    height: 3px;

    margin-top: 9px;

    border-radius: 20px;

    background: white;

    transition:
        .4s ease;
}

.footer-card:hover h3::after {
    width: 62px;
}

.site-footer ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.site-footer li {
    margin-bottom: 13px;
}

.site-footer li a {

    color:
        rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 14px;

    transition:
        .3s ease;
}

.site-footer li a:hover {

    color: white;

    padding-left: 7px;
}


/* =========================================================
   SOCIALS
========================================================= */

.socials {

    display: flex;

    gap: 12px;

    margin-top: 22px;
}

.socials a {

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: white;

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

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

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.25);

    transition:
        .4s ease;
}

.socials a:hover {

    transform:
        translateY(-7px)
        rotate(5deg);

    background: white;

    color: #0074c8;

    box-shadow:
        0 12px 25px rgba(0,0,0,.20);
}


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

.footer-cta {

    max-width: 1250px;

    margin:
        45px auto 0;

    padding:
        32px 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.07)
        );

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

    backdrop-filter: blur(20px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.4);

    position: relative;

    overflow: hidden;
}

.footer-cta h2 {

    margin:
        0 0 8px;

    font-size: 26px;

    color: white;
}

.footer-cta p {

    margin: 0;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;
}

.footer-cta a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        14px 24px;

    border-radius: 50px;

    background: white;

    color:
        #0069c9 !important;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    transition:
        .4s ease;
}

.footer-cta a:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {

    max-width: 1250px;

    margin:
        38px auto 0;

    padding-top: 22px;

    border-top:
        1px solid rgba(255,255,255,.20);

    text-align: center;

    color:
        rgba(255,255,255,.78);

    font-size: 13px;

    position: relative;

    z-index: 2;
}

.copyright strong {
    color: white;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.show {

    opacity: 1;

    transform:
        translateY(0);
}


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

@keyframes orbOne {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(120px,80px);
    }
}

@keyframes orbTwo {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(-100px,80px);
    }
}

@keyframes orbThree {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(80px,-80px);
    }
}

@keyframes dashboardFloat {

    0%,100% {
        transform:
            perspective(1000px)
            rotateY(-7deg)
            rotateX(4deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1000px)
            rotateY(-7deg)
            rotateX(4deg)
            translateY(-12px);
    }
}

@keyframes deviceFloat {

    0%,100% {
        transform:
            rotateY(-15deg)
            rotateX(8deg)
            rotateZ(-2deg)
            translateY(0);
    }

    50% {
        transform:
            rotateY(-15deg)
            rotateX(8deg)
            rotateZ(-2deg)
            translateY(-12px);
    }
}

@keyframes floatOne {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-15px);
    }
}

@keyframes floatTwo {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(12px);
    }
}

@keyframes graphMove {

    from {
        transform:
            rotate(-5deg)
            translateY(5px);
    }

    to {
        transform:
            rotate(-2deg)
            translateY(-5px);
    }
}

@keyframes livePulse {

    0%,100% {
        box-shadow:
            0 0 0 4px
            rgba(0,201,139,.10);
    }

    50% {
        box-shadow:
            0 0 0 9px
            rgba(0,201,139,.02);
    }
}

@keyframes footerBlob1 {

    0%,100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(50px,40px)
            scale(1.1);
    }
}

@keyframes footerBlob2 {

    0%,100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(-40px,-30px)
            scale(1.08);
    }
}


/* =========================================================
   LAPTOP / TABLET
========================================================= */

@media (max-width: 1100px) {

    .nav-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-links a {
        padding:
            9px 8px;

        font-size: 13px;
    }

    .logo img {
        height: 42px;
    }


    /* HERO */

    .zyyron-image-hero {

        min-height: auto;

        padding:
            70px 5% 80px;
    }

    .zyyron-image-hero-inner {

        grid-template-columns: 1fr;

        gap: 35px;

        max-width: 850px;
    }

    .zyyron-image-hero-content {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;
    }

    .zyyron-image-hero-content > p {

        margin-left: auto;

        margin-right: auto;
    }

    .zyyron-image-points {

        justify-content: center;
    }

    .zyyron-image-hero .hero-buttons {

        justify-content: center;
    }

    .zyyron-image-visual {

        height: 560px;

        margin-top: 0;
    }


    /* SERVICES */

    .services-grid {

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

    .process {

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

    .feature-panel {

        grid-template-columns: 1fr;
    }

    .footer-grid {

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


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 980px) {

    .navbar {

        height: 70px;
    }

    .nav-container {

        height: 70px;

        min-height: 70px;

        padding:
            0 18px;
    }

    .logo img {

        height: 40px;

        max-width: 160px;
    }

    .nav-links {

        display: none;

        position: absolute;

        top:
            calc(100% + 10px);

        left: 12px;

        right: 12px;

        width: auto;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 10px;

        margin: 0;

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

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);

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

        border-radius: 20px;

        box-shadow:
            0 20px 50px rgba(30,50,80,.18),
            inset 0 1px 2px rgba(255,255,255,1);

        opacity: 0;

        transform:
            translateY(-10px)
            scale(.98);

        pointer-events: none;

        transition:
            opacity .25s ease,
            transform .25s ease;
    }


    /* OPEN MOBILE MENU */

    .nav-links.show {

        display: flex;

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }

    .nav-links li {

        width: 100%;
    }

    .nav-links a {

        width: 100%;

        min-height: 46px;

        justify-content:
            flex-start;

        padding:
            13px 16px;

        font-size: 15px;

        border-radius: 13px;
    }

    .nav-links .nav-cta {

        justify-content: center;

        margin-top: 5px;
    }

    .menu-btn {

        display: flex;

        flex-shrink: 0;
    }

    body {

        padding-top: 70px;
    }
}


/* =========================================================
   MOBILE - 700px
========================================================= */

@media (max-width: 700px) {

    .cursor-glow {
        display: none;
    }

    .orb {
        filter:
            blur(45px);
    }


    /* HERO */

    .zyyron-image-hero {

        min-height: auto;

        padding:
            50px 18px 65px;
    }

    .zyyron-image-hero-inner {

        gap: 35px;
    }

    .zyyron-image-badge {

        margin-bottom: 20px;

        padding:
            8px 13px;

        font-size: 11px;
    }

    .zyyron-image-hero h1 {

        margin-bottom: 20px;

        font-size:
            clamp(34px,10vw,50px);

        line-height: 1.1;

        letter-spacing: -1.5px;
    }

    .zyyron-image-hero-content > p {

        font-size: 15px;

        line-height: 1.7;
    }


    /* POINTS */

    .zyyron-image-points {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            16px 10px;

        margin:
            24px 0 27px;

        text-align: left;
    }

    .zyyron-image-points div {

        font-size: 12px;
    }


    /* =====================================================
       MOBILE HERO BUTTONS
    ===================================================== */

    .zyyron-image-hero .hero-buttons {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 27px;
    }

    .zyyron-image-hero .hero-buttons .btn,
    .zyyron-image-hero .btn-primary,
    .zyyron-image-hero .btn-glass {

        width: 100%;

        min-width: 0;

        height: 56px;

        padding:
            0 20px;

        border-radius: 15px;

        font-size: 14px;

        box-sizing: border-box;
    }


    /* VISUAL */

    .zyyron-image-visual {

        height: 390px;

        margin:
            -10px -4% -5px;
    }

    .orbit-1 {

        width: 300px;

        height: 300px;
    }

    .orbit-2 {

        width: 410px;

        height: 410px;
    }

    .zyyron-laptop {

        width: 265px;
    }

    .zyyron-laptop-screen {

        height: 175px;

        border-width: 6px;
    }

    .zyyron-service-node {

        width: 78px;

        height: 78px;

        border-width: 2px;
    }

    .zyyron-service-node i {

        margin-bottom: 4px;

        font-size: 21px;
    }

    .zyyron-service-node b {

        font-size: 11px;
    }

    .zyyron-service-node span {

        font-size: 9px;
    }

    .node-web {

        top: 12px;
    }

    .node-seo {

        top: 55px;

        right: 0;
    }

    .node-ai {

        right: -3px;

        bottom: 50px;
    }

    .node-software {

        bottom: -5px;
    }

    .node-app {

        top: 64px;

        left: 0;
    }

    .node-marketing {

        left: -3px;

        bottom: 54px;
    }


    /* TRUST */

    .trust-strip {

        margin:
            0 5% 20px;

        padding:
            20px 15px;

        flex-direction: column;

        align-items: flex-start;
    }

    .trust-item {

        width: 100%;
    }

    .trust-item h2 {

        font-size: 13px;
    }


    /* SECTION */

    .section {

        padding:
            20px 5%;
    }

    .section-heading h2 {

        font-size:
            clamp(34px,9vw,48px);

        letter-spacing:
            -1.5px;
    }

    .section-heading p {

        font-size: 14px;
    }


    /* SERVICES */

    .services-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .service-card {

        min-height: auto;

        padding: 25px;
    }

    .service-card h3 {

        font-size: 20px;
    }


    /* FEATURE */

    .feature-panel {

        padding: 25px;

        gap: 20px;
    }

    .feature-panel h3 {

        font-size: 27px;
    }


    /* DEVICE */

    .device-wrap {

        min-height: 250px;
    }

    .device {

        width: 270px;

        height: 190px;

        animation: none;

        transform:
            rotateY(-8deg)
            rotateX(5deg);
    }


    /* PROCESS */

    .process {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    /* TECHNOLOGY */

    .tech-wrapper {

        gap: 9px;
    }

    .tech {

        padding:
            11px 14px;

        font-size: 11px;
    }


    /* CTA */

    .final-cta {

        margin:
            20px 5% 70px;

        padding:
            55px 25px;
    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns: 1fr;
    }

    footer.site-footer {

        padding:
            65px 5% 20px;
    }

    .footer-cta {

        flex-direction: column;

        align-items: flex-start;

        padding: 27px;
    }

    .footer-cta a {

        width: 100%;
    }
}


/* =========================================================
   SMALL PHONE - 420px
========================================================= */

@media (max-width: 420px) {

    .zyyron-image-hero {

        padding-left: 14px;

        padding-right: 14px;
    }

    .zyyron-image-hero h1 {

        font-size: 32px;
    }

    .zyyron-image-hero-content > p {

        font-size: 14px;
    }

    .zyyron-image-points div {

        font-size: 11px;
    }

    .zyyron-image-visual {

        height: 335px;
    }

    .zyyron-laptop {

        width: 225px;
    }

    .zyyron-laptop-screen {

        height: 148px;
    }

    .orbit-1 {

        width: 260px;

        height: 260px;
    }

    .orbit-2 {

        width: 350px;

        height: 350px;
    }

    .zyyron-service-node {

        width: 66px;

        height: 66px;
    }

    .zyyron-service-node i {

        font-size: 17px;
    }

    .zyyron-service-node b {

        font-size: 9px;
    }

    .zyyron-service-node span {

        font-size: 7px;
    }


    /* BUTTONS */

    .zyyron-image-hero .hero-buttons {

        gap: 10px;

        margin-top: 24px;
    }

    .zyyron-image-hero .hero-buttons .btn,
    .zyyron-image-hero .btn-primary,
    .zyyron-image-hero .btn-glass {

        height: 53px;

        font-size: 13px;

        border-radius: 14px;

        padding:
            0 18px;
    }
}


/* =========================================================
   VERY SMALL PHONE - 350px
========================================================= */

@media (max-width: 350px) {

    .zyyron-image-points {

        grid-template-columns: 1fr;
    }

    .zyyron-image-visual {

        transform:
            scale(.92);

        margin-left: -8%;

        margin-right: -8%;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }

    .zyyron-image-hero * {

        animation: none !important;

        transition: none !important;
    }
}