@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --bg:#080e19;
    --bg2:#0b1422;
    --panel:#101c2c;
    --line:rgba(154,196,235,.15);
    --text:#f2f8ff;
    --muted:#91a2b9;
    --blue:#32c8ff;
    --cyan:#75edff;
    --font-display:'Barlow Condensed',Impact,sans-serif;
    --font-body:'DM Sans',Arial,sans-serif;
}

* {
    box-sizing:border-box;
}

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

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

body.menu-open {
    overflow:hidden;
}

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

button {
    font:inherit;
}

::selection {
    background:var(--blue);
    color:#07111d;
}

.container {
    width:min(1240px,calc(100% - 80px));
    margin:auto;
}

.site-progress {
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    z-index:1000;
    background:linear-gradient(90deg,#1e91ff,#75edff);
    box-shadow:0 0 18px rgba(50,200,255,.6);
}

.ambient {
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    filter:blur(100px);
    opacity:.16;
    z-index:-1;
}

.ambient-one {
    width:500px;
    height:500px;
    background:#0968ff;
    left:-300px;
    top:400px;
}

.ambient-two {
    width:500px;
    height:500px;
    background:#0ac5ff;
    right:-320px;
    top:1300px;
}

/* NAVIGATION */

.site-header {
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    right:0;
    height:88px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(7,13,23,.72);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:background .3s,height .3s;
}

.site-header.scrolled {
    height:76px;
    background:rgba(7,13,23,.96);
    box-shadow:0 12px 35px rgba(0,0,0,.2);
}

.nav-container {
    width:min(1380px,calc(100% - 80px));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.brand-symbol {
    display:flex;
    width:44px;
    color:#f4f9ff;
}

.brand-symbol svg {
    width:100%;
}

.brand-wordmark {
    font-family:var(--font-display);
    font-size:35px;
    font-weight:900;
    letter-spacing:-.6px;
    line-height:.8;
}

.brand-wordmark>span,
.footer-brand>span {
    color:var(--blue);
}

.brand-wordmark small {
    display:block;
    margin-top:8px;
    font-family:var(--font-body);
    font-size:8px;
    font-weight:700;
    letter-spacing:2.2px;
    color:#91a6bf;
}

.desktop-nav {
    display:flex;
    align-items:center;
    gap:29px;
    margin-left:auto;
}

.desktop-nav a {
    font-size:12px;
    font-weight:700;
    color:#b4c4d7;
    transition:color .2s;
    white-space:nowrap;
}

.desktop-nav a:hover,
.footer-links a:hover {
    color:var(--blue);
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:24px;
}

.remote-link {
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    color:#e0e9f5;
}

.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#44efb0;
    box-shadow:0 0 12px #44efb0;
    margin-right:8px;
}

.nav-call {
    padding:14px 19px;
    background:var(--blue);
    color:#071321;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    white-space:nowrap;
    transition:background .2s,transform .2s;
}

.nav-call:hover {
    background:#80e7ff;
    transform:translateY(-2px);
}

.nav-call span {
    margin-left:12px;
    font-size:17px;
}

.menu-toggle {
    display:none;
    width:45px;
    height:45px;
    border:1px solid var(--line);
    background:#111f31;
    padding:11px;
    cursor:pointer;
}

.menu-toggle span {
    display:block;
    height:2px;
    background:#fff;
    margin:5px 0;
}

.mobile-nav {
    display:none;
}

/* HERO */

.hero {
    position:relative;
    min-height:760px;
    height:min(880px,100svh);
    padding-top:88px;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 76% 45%,rgba(11,81,152,.25),transparent 42%),
        linear-gradient(125deg,#0a1422 0%,#070d18 55%,#091523 100%);
}

#networkCanvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.56;
    pointer-events:none;
}

.hero-grid {
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(66,152,223,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(66,152,223,.045) 1px,transparent 1px);
    background-size:65px 65px;
    mask-image:linear-gradient(90deg,transparent 10%,black 100%);
    pointer-events:none;
}

.hero-inner {
    width:min(1240px,calc(100% - 80px));
    height:100%;
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    position:relative;
    z-index:2;
}

.hero-content {
    padding-bottom:25px;
    position:relative;
    z-index:4;
}

.eyebrow,
.section-kicker {
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:2.8px;
}

.eyebrow-line,
.section-kicker span {
    width:27px;
    height:2px;
    background:var(--blue);
    box-shadow:0 0 15px rgba(50,200,255,.5);
}

.hero h1 {
    font-family:var(--font-display);
    font-size:clamp(86px,8.3vw,135px);
    font-weight:900;
    line-height:.87;
    letter-spacing:-2px;
    margin:33px 0 30px;
    position:relative;
    white-space:nowrap;
}

.gradient-text {
    background:linear-gradient(115deg,#ffffff 0%,#35caff 50%,#89f3ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.outlined-text {
    color:transparent;
    -webkit-text-stroke:1.5px rgba(217,237,255,.7);
}

.hero-description {
    color:#a9b9ce;
    max-width:510px;
    font-size:16px;
    line-height:1.9;
    margin:0;
}

.hero-description strong {
    color:#f5f9ff;
    font-weight:700;
}

.hero-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:33px;
}

.btn {
    min-height:54px;
    padding:16px 23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    transition:transform .25s,background .25s,border-color .25s;
}

.btn:hover {
    transform:translateY(-3px);
}

.btn-primary {
    background:var(--blue);
    color:#071321;
    box-shadow:0 8px 30px rgba(18,160,236,.13);
}

.btn-primary:hover {
    background:#87e8ff;
}

.btn-outline {
    background:rgba(255,255,255,.025);
    color:#f0f6ff;
    border:1px solid rgba(160,206,242,.27);
}

.btn-outline:hover {
    border-color:var(--blue);
    background:rgba(50,200,255,.08);
}

.btn-arrow {
    font-size:20px;
    line-height:0;
}

.phone-icon {
    font-size:20px;
    color:var(--blue);
}

.hero-proof {
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:54px;
}

.proof-item {
    display:flex;
    align-items:center;
    gap:10px;
}

.proof-item strong {
    font-family:var(--font-display);
    font-size:43px;
    font-weight:800;
    line-height:1;
    color:#fff;
}

.proof-item>span {
    font-size:9px;
    font-weight:700;
    letter-spacing:.6px;
    line-height:1.65;
    color:#91a6be;
}

.proof-divider {
    width:1px;
    height:36px;
    background:rgba(255,255,255,.14);
}

.location-marker {
    font-size:35px!important;
    color:var(--blue)!important;
}

.hero-visual {
    height:600px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translateX(24px);
}

.orbit {
    position:absolute;
    border:1px solid rgba(71,173,247,.16);
    border-radius:50%;
    box-shadow:inset 0 0 30px rgba(0,114,255,.025);
}

.orbit-one {
    width:550px;
    height:550px;
    animation:orbitSpin 55s linear infinite;
    border-style:dashed;
}

.orbit-two {
    width:440px;
    height:440px;
    border-color:rgba(80,187,255,.23);
    animation:orbitSpin 35s linear infinite reverse;
}

.orbit-three {
    width:340px;
    height:340px;
    border-color:rgba(80,187,255,.1);
}

.orbit-one:before,
.orbit-two:before {
    content:"";
    position:absolute;
    top:50%;
    left:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 25px var(--blue);
}

.tech-core {
    position:relative;
    width:280px;
    height:280px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at center,rgba(30,150,255,.2),rgba(6,20,39,.95) 70%);
    border:1px solid rgba(81,183,255,.45);
    box-shadow:
        0 0 70px rgba(14,127,229,.16),
        inset 0 0 65px rgba(13,112,205,.14);
}

.core-ring {
    position:absolute;
    inset:15px;
    border-radius:50%;
    border:2px dashed rgba(58,188,255,.35);
    animation:orbitSpin 40s linear infinite;
}

.inner-ring {
    inset:30px;
    border:1px solid rgba(58,188,255,.25);
    animation-duration:25s;
    animation-direction:reverse;
}

.core-center {
    position:relative;
    z-index:2;
    text-align:center;
    font-family:var(--font-display);
    font-size:55px;
    font-weight:900;
    letter-spacing:-1px;
    line-height:.82;
}

.core-center span {
    display:block;
}

.core-center strong {
    display:block;
    color:var(--blue);
    font-weight:900;
}

.core-center small {
    display:block;
    margin-top:17px;
    font-family:var(--font-body);
    font-size:8px;
    letter-spacing:2px;
    color:#a3bed7;
}

.floating-label {
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 16px;
    border:1px solid rgba(84,183,255,.26);
    background:rgba(11,26,46,.84);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    animation:float 6s ease-in-out infinite;
}

.floating-label small {
    display:block;
    margin-top:5px;
    color:#8ea9c5;
    font-size:8px;
    letter-spacing:.8px;
}

.floating-icon {
    color:var(--blue);
    font-size:23px;
}

.label-one {
    left:-30px;
    top:125px;
}

.label-two {
    right:-15px;
    top:185px;
    animation-delay:-2s;
}

.label-three {
    left:0;
    bottom:120px;
    animation-delay:-4s;
}

.visual-coordinate {
    position:absolute;
    color:rgba(117,189,243,.45);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.coord-one {
    top:20px;
    right:20px;
}

.coord-two {
    bottom:20px;
    right:20px;
}

.hero-bottom {
    position:absolute;
    z-index:3;
    bottom:0;
    left:0;
    right:0;
    padding:23px max(40px,calc((100% - 1240px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.08);
    color:#7790ab;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.8px;
}

.hero-bottom a {
    color:#d3e5f6;
}

.hero-bottom a span {
    color:var(--blue);
    font-size:18px;
    margin-left:8px;
}

/* TICKER */

.service-strip {
    overflow:hidden;
    background:var(--blue);
    color:#061320;
    height:64px;
    display:flex;
    align-items:center;
}

.strip-track {
    display:flex;
    align-items:center;
    gap:35px;
    width:max-content;
    white-space:nowrap;
    animation:marquee 35s linear infinite;
}

.strip-track span {
    font-family:var(--font-display);
    font-size:22px;
    font-weight:900;
    letter-spacing:1px;
}

.strip-track i {
    font-size:20px;
    font-style:normal;
    opacity:.5;
}

/* SHARED */

.section {
    padding:125px 0;
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:55px;
    margin-bottom:54px;
}

.section-heading h2,
.feature-copy h2,
.security-header h2,
.about-copy h2,
.contact-main h2 {
    font-family:var(--font-display);
    font-size:clamp(57px,6.3vw,94px);
    font-weight:900;
    letter-spacing:-.5px;
    line-height:.94;
    margin:25px 0 0;
}

.section-heading h2 em,
.feature-copy h2 em,
.security-header h2 em,
.about-copy h2 em,
.contact-main h2 em {
    color:var(--blue);
    font-style:normal;
}

.section-heading>p {
    width:360px;
    flex-shrink:0;
    color:var(--muted);
    line-height:1.9;
    font-size:14px;
    margin:0 0 7px;
}

/* SERVICE CARDS */

.services-section {
    background:#0a111d;
    position:relative;
}

.services-grid {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:14px;
}

.service-card {
    position:relative;
    grid-column:span 4;
    min-height:385px;
    padding:29px;
    background:
        linear-gradient(145deg,rgba(21,40,61,.8),rgba(11,22,37,.95));
    border:1px solid var(--line);
    overflow:hidden;
    transition:border-color .3s,transform .3s,background .3s;
}

.service-card:before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(90deg,var(--blue),transparent);
    opacity:.4;
}

.service-card:hover {
    transform:translateY(-6px);
    border-color:rgba(60,197,255,.55);
}

.service-card:hover:before {
    opacity:1;
}

.service-card-featured {
    background:
        radial-gradient(circle at 90% 15%,rgba(27,142,233,.18),transparent 50%),
        linear-gradient(145deg,#13283f,#0c192a);
}

.card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.card-number {
    color:#829ab5;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}

.card-arrow {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border:1px solid rgba(132,181,221,.25);
    color:var(--blue);
    font-size:17px;
}

.service-icon {
    width:67px;
    height:67px;
    margin-top:40px;
    color:var(--blue);
}

.service-icon svg {
    width:100%;
    height:100%;
}

.service-card h3 {
    font-family:var(--font-display);
    font-size:38px;
    font-weight:800;
    line-height:1;
    margin:20px 0 14px;
}

.service-card p {
    color:#98abc0;
    font-size:12px;
    line-height:1.8;
    margin:0;
    max-width:300px;
}

.card-link {
    position:absolute;
    left:29px;
    bottom:26px;
    display:flex;
    align-items:center;
    gap:15px;
    color:var(--blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.card-link span {
    font-size:18px;
}

.service-card-small {
    grid-column:span 3;
    min-height:225px;
    padding:25px;
}

.service-card-small h3 {
    font-size:29px;
    margin:18px 0 10px;
}

.service-card-small p {
    font-size:11px;
}

.small-icon {
    font-size:30px;
    color:var(--blue);
    line-height:1;
}

/* FEATURE SECTIONS */

.feature-section {
    padding:125px 0;
    overflow:hidden;
}

.it-feature {
    background:
        radial-gradient(circle at 80% 50%,rgba(12,100,186,.09),transparent 42%),
        #09111d;
}

.phones-feature {
    background:#0d1827;
}

.feature-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:90px;
}

.feature-copy h2 {
    font-size:clamp(65px,6vw,90px);
}

.feature-copy>p {
    color:var(--muted);
    font-size:14px;
    line-height:1.95;
    max-width:530px;
}

.feature-copy .feature-lead {
    color:#e6f0fc;
    font-size:17px;
    font-weight:600;
    line-height:1.8;
    margin-top:30px;
}

.feature-points {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px 12px;
    margin:34px 0 40px;
}

.feature-points span {
    font-size:11px;
    font-weight:700;
    color:#d4e1f0;
}

.feature-points b {
    color:var(--blue);
    margin-right:8px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:22px;
    padding-bottom:12px;
    border-bottom:1px solid var(--blue);
    color:var(--blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}

.text-link span {
    font-size:20px;
}

.feature-art {
    height:490px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(85,158,223,.13);
    background:
        radial-gradient(circle at center,rgba(26,112,204,.15),transparent 60%),
        #0c1929;
    overflow:hidden;
}

.art-grid {
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(83,173,246,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(83,173,246,.06) 1px,transparent 1px);
    background-size:34px 34px;
}

.it-terminal {
    position:relative;
    z-index:2;
    width:82%;
    background:#07111e;
    border:1px solid rgba(72,183,251,.4);
    box-shadow:0 35px 75px rgba(0,0,0,.45),0 0 40px rgba(12,119,210,.1);
    transform:perspective(900px) rotateY(-8deg) rotateX(4deg);
    transition:transform .5s;
}

.it-art:hover .it-terminal {
    transform:perspective(900px) rotateY(0) rotateX(0);
}

.terminal-top {
    height:39px;
    background:#13253a;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
}

.terminal-top>span {
    display:flex;
    gap:5px;
}

.terminal-top i {
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#3e698b;
}

.terminal-top i:first-child {
    background:#ff6b75;
}

.terminal-top small {
    color:#7f9ebc;
    font-size:8px;
    letter-spacing:1px;
}

.terminal-content {
    padding:30px;
}

.terminal-prompt {
    color:#3ddab8;
    font-family:monospace;
    font-size:10px;
    letter-spacing:1px;
}

.terminal-title {
    font-family:var(--font-display);
    font-size:56px;
    font-weight:900;
    margin:12px 0 24px;
}

.terminal-title span {
    color:var(--blue);
    animation:blink 1s step-end infinite;
}

.terminal-line {
    display:flex;
    justify-content:space-between;
    padding:11px 0;
    border-top:1px solid rgba(255,255,255,.07);
    color:#9ab3cc;
    font-family:monospace;
    font-size:10px;
}

.terminal-line b {
    color:#35d6b4;
    font-size:12px;
}

.terminal-footer {
    display:flex;
    justify-content:space-between;
    margin-top:25px;
    color:#55738f;
    font-size:7px;
    letter-spacing:1px;
}

.art-corner {
    position:absolute;
    width:40px;
    height:40px;
    border-color:var(--blue);
    border-style:solid;
}

.corner-tl {
    top:25px;
    left:25px;
    border-width:2px 0 0 2px;
}

.corner-br {
    bottom:25px;
    right:25px;
    border-width:0 2px 2px 0;
}

/* PHONE VISUAL */

.phones-art {
    background:
        radial-gradient(circle at center,rgba(11,128,232,.2),transparent 57%),
        #091421;
}

.phone-rings {
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    border:1px solid rgba(58,187,255,.15);
    box-shadow:
        0 0 0 45px rgba(58,187,255,.025),
        0 0 0 90px rgba(58,187,255,.02);
}

.phone-device {
    width:210px;
    height:390px;
    border:8px solid #263d54;
    border-radius:31px;
    background:#06111f;
    position:relative;
    z-index:2;
    padding:22px 10px;
    box-shadow:20px 25px 45px rgba(0,0,0,.5),inset 0 0 0 1px #4a718f;
    transform:rotate(-8deg);
    transition:transform .4s;
}

.phones-art:hover .phone-device {
    transform:rotate(-3deg) translateY(-5px);
}

.phone-speaker {
    width:50px;
    height:5px;
    border-radius:10px;
    background:#38536d;
    position:absolute;
    top:10px;
    left:calc(50% - 25px);
}

.phone-home {
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid #3a5269;
    position:absolute;
    bottom:7px;
    left:calc(50% - 11px);
}

.phone-screen {
    height:100%;
    background:linear-gradient(155deg,#0b3051,#071523 65%);
    padding:24px 14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(79,171,231,.15);
}

.phone-screen-label {
    position:absolute;
    top:48px;
    font-family:var(--font-display);
    font-size:14px;
    font-weight:800;
    letter-spacing:2px;
    color:var(--blue);
}

.phone-signal {
    width:73px;
    height:73px;
    border:1px solid rgba(67,206,255,.4);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--blue);
    font-size:48px;
    margin-bottom:24px;
    box-shadow:0 0 40px rgba(17,171,240,.15);
}

.phone-screen strong {
    font-family:var(--font-display);
    font-size:33px;
    line-height:1;
}

.phone-screen-small {
    margin-top:13px;
    color:#8ba8c3;
    font-size:7px;
    letter-spacing:1.5px;
}

.phone-screen-bars {
    display:flex;
    gap:4px;
    align-items:end;
    height:26px;
    margin-top:25px;
}

.phone-screen-bars i {
    display:block;
    width:4px;
    background:var(--blue);
    height:10px;
    animation:equalizer 1.3s ease-in-out infinite alternate;
}

.phone-screen-bars i:nth-child(2n) {
    height:20px;
    animation-delay:-.5s;
}

.phone-screen-bars i:nth-child(3n) {
    height:15px;
    animation-delay:-.8s;
}

.phone-badge {
    position:absolute;
    z-index:3;
    background:#102a43;
    border:1px solid rgba(59,192,255,.35);
    padding:13px 15px;
    color:#c9e7fa;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.badge-left {
    left:25px;
    top:115px;
}

.badge-right {
    right:20px;
    bottom:110px;
}

/* SECURITY */

.security-section {
    padding:125px 0 105px;
    background:
        radial-gradient(ellipse at 50% 0%,rgba(16,103,190,.17),transparent 55%),
        #08111e;
}

.security-header {
    text-align:center;
    max-width:850px;
    margin:0 auto 55px;
}

.security-header .section-kicker {
    justify-content:center;
}

.security-header h2 {
    font-size:clamp(70px,7.5vw,112px);
}

.security-header p {
    max-width:610px;
    margin:25px auto 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.9;
}

.security-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.security-stat {
    min-height:310px;
    padding:40px 30px;
    text-align:center;
    background:linear-gradient(150deg,#12253a,#0c1929);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
}

.security-stat:after {
    content:"";
    position:absolute;
    bottom:0;
    left:25%;
    right:25%;
    height:2px;
    background:var(--blue);
    box-shadow:0 0 25px var(--blue);
}

.stat-icon {
    color:var(--blue);
    font-size:27px;
    margin-bottom:15px;
}

.security-stat>strong {
    display:block;
    font-family:var(--font-display);
    font-size:90px;
    font-weight:900;
    line-height:1;
    color:#fff;
}

.security-stat>strong span {
    font-size:24px;
    color:var(--blue);
    margin-left:5px;
}

.security-stat h3 {
    font-family:var(--font-display);
    font-size:24px;
    margin:15px 0 10px;
    letter-spacing:.6px;
}

.security-stat p {
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
    max-width:250px;
    margin:auto;
}

.security-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:40px 0;
    border-bottom:1px solid var(--line);
    margin-top:25px;
}

.security-bottom-copy {
    max-width:570px;
}

.small-label {
    color:var(--blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.security-bottom h3 {
    font-family:var(--font-display);
    font-size:37px;
    margin:10px 0;
}

.security-bottom p {
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
    margin:0;
}

.security-disclaimer {
    color:#647b95;
    font-size:10px;
    line-height:1.7;
    text-align:center;
    margin:24px auto 0;
    max-width:850px;
}

/* ABOUT */

.about-section {
    padding:120px 0;
    background:#0d1827;
}

.about-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px;
    align-items:center;
}

.about-number {
    border-right:1px solid var(--line);
    padding:20px 45px 20px 0;
}

.about-number>span {
    display:block;
    color:var(--blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.about-number strong {
    display:block;
    font-family:var(--font-display);
    font-size:clamp(130px,16vw,230px);
    font-weight:900;
    line-height:1;
    letter-spacing:-7px;
    color:transparent;
    -webkit-text-stroke:2px rgba(72,187,255,.7);
    margin:5px 0;
}

.about-copy h2 {
    font-size:clamp(65px,6vw,90px);
}

.about-copy p {
    color:var(--muted);
    font-size:14px;
    line-height:1.95;
}

.about-copy p:first-of-type {
    color:#d9e7f6;
    font-size:17px;
    margin-top:28px;
}

.about-copy .text-link {
    margin-top:20px;
}

/* CONTACT */

.contact-section {
    padding:110px 0;
    background:#08111d;
}

.contact-shell {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    border:1px solid rgba(73,163,231,.25);
    background:
        linear-gradient(135deg,rgba(18,51,81,.9),rgba(10,23,39,.96));
    box-shadow:0 35px 80px rgba(0,0,0,.2);
}

.contact-main {
    padding:75px 65px;
    border-right:1px solid var(--line);
    position:relative;
    overflow:hidden;
}

.contact-main:after {
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border:1px solid rgba(76,187,255,.08);
    border-radius:50%;
    right:-180px;
    bottom:-190px;
    box-shadow:0 0 0 40px rgba(76,187,255,.025),0 0 0 80px rgba(76,187,255,.02);
    pointer-events:none;
}

.contact-main h2 {
    font-size:clamp(80px,8vw,120px);
}

.contact-main>p {
    color:#9fb3ca;
    font-size:14px;
    line-height:1.9;
    max-width:440px;
    margin:27px 0;
}

.contact-phone {
    display:inline-flex;
    align-items:center;
    gap:20px;
    font-family:var(--font-display);
    font-size:clamp(35px,4vw,55px);
    font-weight:800;
    border-bottom:1px solid rgba(83,190,250,.4);
    padding-bottom:9px;
}

.contact-phone span {
    color:var(--blue);
    font-size:28px;
}

.contact-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:35px;
}

.contact-details {
    padding:65px 50px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px 25px;
    align-content:center;
}

.detail-label {
    display:block;
    color:var(--blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.6px;
    margin-bottom:12px;
}

.contact-detail strong,
.contact-detail>a {
    font-family:var(--font-display);
    font-size:25px;
    font-weight:700;
}

.contact-detail p {
    color:#96abc2;
    font-size:12px;
    margin:8px 0 0;
}

.contact-detail p a {
    color:#dce9f7;
}

.remote-support-card {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:15px;
    padding:21px;
    margin-top:10px;
    border:1px solid rgba(61,191,255,.35);
    background:rgba(23,107,163,.12);
    transition:background .2s;
}

.remote-support-card:hover {
    background:rgba(23,107,163,.25);
}

.remote-icon {
    width:43px;
    height:43px;
    background:var(--blue);
    color:#071523;
    display:grid;
    place-items:center;
    font-size:23px;
}

.remote-support-card strong {
    display:block;
    font-family:var(--font-display);
    font-size:24px;
}

.remote-support-card small {
    color:#90abc4;
    font-size:8px;
    letter-spacing:1px;
}

.remote-arrow {
    margin-left:auto;
    color:var(--blue);
    font-size:25px;
}

/* FOOTER */

.footer {
    background:#060c15;
    border-top:1px solid var(--line);
}

.footer-main {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:55px 0;
}

.footer-brand {
    font-family:var(--font-display);
    font-size:38px;
    font-weight:900;
    line-height:.8;
    white-space:nowrap;
}

.footer-brand small {
    display:block;
    font-family:var(--font-body);
    font-size:8px;
    letter-spacing:2px;
    margin-top:10px;
    color:#7b91a9;
}

.footer-main>p {
    max-width:280px;
    color:#8195ad;
    font-size:12px;
    line-height:1.8;
}

.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.footer-links a {
    color:#9caec2;
    font-size:11px;
    font-weight:700;
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    border-top:1px solid rgba(255,255,255,.07);
    color:#647a94;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.footer-bottom a {
    color:var(--blue);
}

.floating-call {
    display:none;
    position:fixed;
    z-index:90;
    right:20px;
    bottom:20px;
    width:57px;
    height:57px;
    border-radius:50%;
    background:var(--blue);
    color:#071321;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 35px rgba(22,160,236,.35);
    font-size:29px;
}

/* ANIMATION */

@keyframes orbitSpin {
    to {transform:rotate(360deg)}
}

@keyframes float {
    0%,100% {transform:translateY(0)}
    50% {transform:translateY(-12px)}
}

@keyframes marquee {
    to {transform:translateX(-50%)}
}

@keyframes blink {
    50% {opacity:0}
}

@keyframes equalizer {
    to {height:24px}
}

.reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .7s ease;
}

.reveal.visible {
    opacity:1;
    transform:translateY(0);
}

/* TABLETS */

@media(max-width:1250px) {

    .desktop-nav {
        gap:17px;
    }

    .nav-actions {
        gap:12px;
    }

    .hero h1 {
        font-size:clamp(76px,8vw,110px);
    }

    .hero-visual {
        transform:translateX(0) scale(.87);
    }

    .feature-layout {
        gap:50px;
    }

    .contact-main {
        padding:60px 45px;
    }

    .contact-details {
        padding:55px 35px;
    }
}

@media(max-width:1050px) {

    .desktop-nav,
    .nav-actions {
        display:none;
    }

    .menu-toggle {
        display:block;
    }

    .mobile-nav {
        display:flex;
        flex-direction:column;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#0a1625;
        padding:15px 35px 30px;
        border-bottom:1px solid var(--line);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:opacity .25s,transform .25s,visibility .25s;
        max-height:calc(100svh - 76px);
        overflow-y:auto;
    }

    .mobile-nav.open {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .mobile-nav a {
        padding:14px 5px;
        font-size:14px;
        font-weight:700;
        border-bottom:1px solid rgba(255,255,255,.06);
    }

    .hero-inner {
        grid-template-columns:1fr .7fr;
    }

    .hero-visual {
        transform:translateX(-15px) scale(.7);
        margin-left:-100px;
    }

    .hero h1 {
        font-size:clamp(75px,9vw,105px);
    }

    .hero-proof {
        gap:15px;
    }

    .proof-item strong {
        font-size:35px;
    }

    .proof-location {
        display:none;
    }

    .service-card {
        grid-column:span 6;
    }

    .service-card-small {
        grid-column:span 6;
    }

    .feature-layout,
    .about-layout {
        gap:40px;
    }

    .contact-shell {
        grid-template-columns:1fr;
    }

    .contact-main {
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .footer-main {
        flex-wrap:wrap;
    }
}

/* MOBILE */

@media(max-width:760px) {

    .container,
    .nav-container,
    .hero-inner {
        width:calc(100% - 38px);
    }

    .site-header {
        height:74px;
    }

    .brand-symbol {
        width:35px;
    }

    .brand-wordmark {
        font-size:30px;
    }

    .brand-wordmark small {
        font-size:7px;
    }

    .hero {
        height:auto;
        min-height:0;
        padding:125px 0 95px;
    }

    .hero-inner {
        display:block;
    }

    .hero-content {
        padding:0;
    }

    .eyebrow,
    .section-kicker {
        font-size:9px;
        letter-spacing:1.7px;
    }

    .hero h1 {
        font-size:clamp(65px,13.5vw,100px);
        letter-spacing:-1px;
        margin:27px 0 24px;
    }

    .hero-description {
        font-size:14px;
        line-height:1.8;
    }

    .hero-buttons {
        margin-top:28px;
    }

    .hero-proof {
        margin-top:38px;
        gap:18px;
    }

    .hero-visual {
        height:380px;
        transform:scale(.64);
        transform-origin:center;
        margin:-5px 0 -45px;
    }

    .hero-bottom {
        padding:17px 19px;
        font-size:8px;
    }

    .hero-bottom-center {
        display:none;
    }

    .service-strip {
        height:54px;
    }

    .strip-track span {
        font-size:19px;
    }

    .section,
    .feature-section,
    .security-section,
    .about-section,
    .contact-section {
        padding:75px 0;
    }

    .section-heading {
        display:block;
        margin-bottom:35px;
    }

    .section-heading h2,
    .feature-copy h2,
    .security-header h2,
    .about-copy h2 {
        font-size:clamp(58px,10vw,82px);
    }

    .section-heading>p {
        width:auto;
        max-width:500px;
        margin-top:22px;
    }

    .services-grid {
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .service-card {
        grid-column:span 2;
        min-height:345px;
    }

    .service-card-small {
        grid-column:span 1;
        min-height:210px;
        padding:19px;
    }

    .service-card-small h3 {
        font-size:26px;
    }

    .feature-layout {
        grid-template-columns:1fr;
        gap:35px;
    }

    .reverse-layout .feature-art {
        order:2;
    }

    .reverse-layout .feature-copy {
        order:1;
    }

    .feature-art {
        height:390px;
    }

    .feature-points {
        margin:27px 0 32px;
    }

    .security-header {
        margin-bottom:35px;
    }

    .security-stats {
        grid-template-columns:1fr;
    }

    .security-stat {
        min-height:230px;
        padding:28px;
    }

    .security-stat>strong {
        font-size:75px;
    }

    .security-bottom {
        display:block;
    }

    .security-bottom .btn {
        margin-top:25px;
    }

    .about-layout {
        grid-template-columns:1fr;
    }

    .about-number {
        border-right:0;
        border-bottom:1px solid var(--line);
        padding:0 0 25px;
    }

    .about-number strong {
        font-size:150px;
    }

    .contact-main,
    .contact-details {
        padding:40px 25px;
    }

    .contact-main h2 {
        font-size:85px;
    }

    .footer-main {
        display:block;
        padding:45px 0 30px;
    }

    .footer-main>p {
        margin:20px 0;
    }

    .footer-links {
        gap:14px 22px;
    }

    .footer-bottom {
        flex-wrap:wrap;
        line-height:1.7;
    }

    .floating-call {
        display:flex;
    }
}

@media(max-width:420px) {

    .hero h1 {
        font-size:clamp(58px,13.4vw,72px);
    }

    .hero-buttons .btn {
        width:100%;
    }

    .hero-proof {
        gap:12px;
    }

    .proof-item strong {
        font-size:31px;
    }

    .proof-item>span {
        font-size:8px;
    }

    .hero-visual {
        transform:scale(.54);
        margin:-40px 0 -75px;
    }

    .service-card-small h3 {
        font-size:23px;
    }

    .service-card-small p {
        font-size:10px;
    }

    .feature-points {
        grid-template-columns:1fr;
    }

    .it-terminal {
        width:92%;
    }

    .terminal-content {
        padding:20px;
    }

    .terminal-title {
        font-size:43px;
    }

    .phone-badge {
        font-size:7px;
        padding:10px;
    }

    .contact-details {
        grid-template-columns:1fr;
    }

    .contact-main h2 {
        font-size:75px;
    }

    .contact-phone {
        font-size:37px;
    }
}

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

    *,
    *:before,
    *:after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }

    .reveal {
        opacity:1;
        transform:none;
    }
}

/* ===== FORCE REAL COMPNOW LOGO ===== */

.site-header .compnow-real-logo {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:340px !important;
    height:78px !important;
    padding:4px 0 !important;
    overflow:visible !important;
    flex:0 0 340px !important;
}

.site-header .compnow-real-logo img {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:auto !important;
    height:70px !important;
    max-width:340px !important;
    object-fit:contain !important;
    object-position:left center !important;
    filter:none !important;
}

.site-header.scrolled .compnow-real-logo,
.site-header.scrolled .compnow-real-logo img {
    height:64px !important;
}

@media(max-width:1050px) {
    .site-header .compnow-real-logo {
        width:290px !important;
        flex-basis:290px !important;
    }

    .site-header .compnow-real-logo img {
        height:62px !important;
        max-width:290px !important;
    }
}

@media(max-width:760px) {
    .site-header .compnow-real-logo {
        width:240px !important;
        height:66px !important;
        flex-basis:240px !important;
    }

    .site-header .compnow-real-logo img {
        height:58px !important;
        max-width:240px !important;
    }
}

@media(max-width:420px) {
    .site-header .compnow-real-logo {
        width:205px !important;
        flex-basis:205px !important;
    }

    .site-header .compnow-real-logo img {
        height:52px !important;
        max-width:205px !important;
    }
}

/* ===== COMPNOW LOGO 150% SIZE ===== */

.site-header .actual-compnow-logo,
.site-header .compnow-real-logo,
.site-header .brand-logo {
    width:525px !important;
    flex-basis:525px !important;
    height:88px !important;
}

.site-header .actual-compnow-logo img,
.site-header .compnow-real-logo img,
.site-header .brand-logo img {
    width:495px !important;
    max-width:495px !important;
    height:108px !important;
    object-fit:contain !important;
    object-position:left center !important;
}

@media(max-width:1100px) {
    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:435px !important;
        flex-basis:435px !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:412px !important;
        max-width:412px !important;
        height:93px !important;
    }
}

@media(max-width:760px) {
    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:300px !important;
        flex-basis:300px !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:290px !important;
        max-width:290px !important;
        height:78px !important;
    }
}

/* ===== TALLER HEADER FOR LARGE COMPNOW LOGO ===== */

.site-header {
    height:118px !important;
    overflow:visible !important;
}

.site-header.scrolled {
    height:105px !important;
}

.nav-container {
    height:100% !important;
    overflow:visible !important;
}

.actual-compnow-logo,
.compnow-real-logo,
.brand-logo {
    height:112px !important;
    overflow:visible !important;
}

.actual-compnow-logo img,
.compnow-real-logo img,
.brand-logo img {
    height:105px !important;
    width:auto !important;
    max-width:495px !important;
    object-fit:contain !important;
}

/* Push hero down to match taller navigation */
.hero {
    padding-top:118px !important;
}

@media(max-width:1050px) {
    .site-header {
        height:108px !important;
    }

    .site-header.scrolled {
        height:98px !important;
    }

    .hero {
        padding-top:108px !important;
    }
}

@media(max-width:760px) {
    .site-header {
        height:90px !important;
    }

    .site-header.scrolled {
        height:84px !important;
    }

    .hero {
        padding-top:110px !important;
    }

    .actual-compnow-logo img,
    .compnow-real-logo img,
    .brand-logo img {
        height:78px !important;
        max-width:290px !important;
    }
}

/* =========================================================
   PRODUCTION RESPONSIVE / ACCESSIBILITY HARDENING
   ========================================================= */

html,
body {
    max-width:100%;
}

img,
svg,
video,
canvas {
    max-width:100%;
}

img {
    height:auto;
}

a,
button {
    -webkit-tap-highlight-color:transparent;
}

button,
a {
    touch-action:manipulation;
}

:focus-visible {
    outline:3px solid #32c8ff;
    outline-offset:4px;
}

/* Prevent long contact data from creating horizontal overflow */
.contact-detail a,
.contact-phone,
.remote-support-card,
.footer a {
    overflow-wrap:anywhere;
}

/* Tablet */
@media (min-width:761px) and (max-width:1100px) {

    .container {
        width:calc(100% - 56px);
    }

    .nav-container {
        width:calc(100% - 56px);
    }

    .hero-inner {
        width:calc(100% - 56px);
    }

    .hero h1 {
        white-space:normal;
    }

    .services-grid {
        gap:14px;
    }

    .feature-layout {
        gap:42px;
    }

    .contact-shell {
        width:100%;
    }
}

/* Phones */
@media (max-width:760px) {

    body {
        min-width:0;
    }

    .hero {
        overflow:hidden;
    }

    .hero h1 {
        white-space:normal !important;
        overflow-wrap:normal;
    }

    .hero-description {
        max-width:100%;
    }

    .hero-buttons {
        width:100%;
    }

    .hero-buttons .btn {
        min-height:54px;
    }

    .mobile-nav a {
        min-height:48px;
        display:flex;
        align-items:center;
    }

    .services-grid,
    .feature-layout,
    .about-layout,
    .contact-shell {
        max-width:100%;
    }

    .feature-art {
        max-width:100%;
    }

    .security-stat {
        width:100%;
    }

    .contact-phone {
        max-width:100%;
    }

    .footer-main,
    .footer-bottom {
        max-width:100%;
    }
}

/* Small phones */
@media (max-width:480px) {

    .container,
    .nav-container,
    .hero-inner {
        width:calc(100% - 30px);
    }

    .hero-buttons {
        display:grid;
        grid-template-columns:1fr;
    }

    .hero-buttons .btn {
        width:100%;
    }

    .contact-buttons {
        display:grid;
        grid-template-columns:1fr;
    }

    .contact-buttons .btn {
        width:100%;
    }

    .security-bottom .btn {
        width:100%;
    }

    .footer-links {
        line-height:2;
    }
}

/* Respect accessibility preference */
@media (prefers-reduced-motion:reduce) {

    html {
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   COMPNOW — PREMIUM GOLD THEME
   Production: compnow.us
   ========================================================= */

:root {
    --bg:#0b0a07;
    --bg2:#121008;
    --panel:#18150d;
    --line:rgba(255,205,76,.17);
    --text:#fffaf0;
    --muted:#b7ad96;

    --blue:#f5bd24;
    --cyan:#ffe08a;

    --gold:#f5bd24;
    --gold-bright:#ffd75a;
    --gold-light:#ffe9a4;
    --gold-deep:#b87800;
    --gold-dark:#6f4800;
}

/* BASE */

body {
    background:
        radial-gradient(circle at 75% 10%,rgba(218,151,0,.06),transparent 28%),
        #0b0a07;
    color:#fffaf0;
}

::selection {
    background:#f5bd24;
    color:#110d04;
}

.site-progress {
    background:linear-gradient(90deg,#a96a00,#f5bd24,#ffe597);
    box-shadow:0 0 20px rgba(245,189,36,.65);
}

.ambient-one {
    background:#c98500;
}

.ambient-two {
    background:#f5bd24;
}

/* HEADER */

.site-header {
    background:rgba(10,9,6,.80);
    border-bottom-color:rgba(255,205,76,.13);
}

.site-header.scrolled {
    background:rgba(10,9,6,.97);
    box-shadow:0 12px 35px rgba(0,0,0,.35);
}

.desktop-nav a {
    color:#c8bfa9;
}

.desktop-nav a:hover,
.footer-links a:hover {
    color:#f5bd24;
}

.status-dot {
    background:#f5bd24;
    box-shadow:0 0 14px rgba(245,189,36,.85);
}

.nav-call {
    background:linear-gradient(135deg,#ffe071,#e9a913);
    color:#171005;
    box-shadow:0 5px 25px rgba(211,143,0,.18);
}

.nav-call:hover {
    background:#ffe89a;
}

.menu-toggle {
    background:#18150d;
    border-color:rgba(255,205,76,.22);
}

.mobile-nav {
    background:#100e08;
    border-bottom-color:rgba(255,205,76,.18);
}

/* HERO */

.hero {
    background:
        radial-gradient(ellipse at 76% 45%,rgba(192,126,0,.20),transparent 42%),
        radial-gradient(circle at 25% 35%,rgba(255,202,60,.035),transparent 28%),
        linear-gradient(125deg,#100e08 0%,#090806 55%,#141007 100%);
}

.hero-grid {
    background-image:
        linear-gradient(rgba(245,189,36,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(245,189,36,.045) 1px,transparent 1px);
}

.gradient-text {
    background:linear-gradient(
        110deg,
        #fff8db 0%,
        #ffe08a 25%,
        #f5bd24 52%,
        #fff0ae 78%,
        #d99600 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.outlined-text {
    -webkit-text-stroke:1.5px rgba(255,221,132,.75);
}

.hero-description {
    color:#bdb39c;
}

.hero-description strong {
    color:#fff5d9;
}

.eyebrow,
.section-kicker {
    color:#f5bd24;
}

.eyebrow-line,
.section-kicker span {
    background:#f5bd24;
    box-shadow:0 0 15px rgba(245,189,36,.55);
}

.btn-primary {
    background:linear-gradient(135deg,#ffe173,#e8a812);
    color:#171005;
    box-shadow:0 8px 30px rgba(211,143,0,.16);
}

.btn-primary:hover {
    background:#ffe99d;
}

.btn-outline {
    border-color:rgba(255,216,114,.30);
    color:#fff9e9;
    background:rgba(255,205,76,.025);
}

.btn-outline:hover {
    border-color:#f5bd24;
    background:rgba(245,189,36,.09);
}

.phone-icon,
.location-marker {
    color:#f5bd24 !important;
}

.proof-item > span {
    color:#aa9f87;
}

.proof-divider {
    background:rgba(255,218,119,.15);
}

/* HERO TECH ORBITS */

.orbit {
    border-color:rgba(245,189,36,.18);
    box-shadow:inset 0 0 30px rgba(245,189,36,.025);
}

.orbit-two {
    border-color:rgba(255,205,76,.27);
}

.orbit-three {
    border-color:rgba(255,205,76,.12);
}

.orbit-one:before,
.orbit-two:before {
    background:#f5bd24;
    box-shadow:0 0 26px #f5bd24;
}

.tech-core {
    background:
        radial-gradient(circle at center,rgba(224,155,10,.20),rgba(16,12,5,.96) 70%);
    border-color:rgba(245,189,36,.48);
    box-shadow:
        0 0 75px rgba(205,135,0,.17),
        inset 0 0 65px rgba(205,135,0,.14);
}

.core-ring {
    border-color:rgba(245,189,36,.38);
}

.inner-ring {
    border-color:rgba(255,211,91,.25);
}

.core-center strong {
    color:#f5bd24;
}

.core-center small {
    color:#c5b58e;
}

.floating-label {
    border-color:rgba(245,189,36,.29);
    background:rgba(25,19,7,.87);
}

.floating-label small {
    color:#ad9d79;
}

.floating-icon {
    color:#f5bd24;
}

.visual-coordinate {
    color:rgba(245,189,36,.46);
}

.hero-bottom {
    border-top-color:rgba(255,205,76,.10);
    color:#8f846c;
}

.hero-bottom a span {
    color:#f5bd24;
}

/* GOLD SERVICE STRIP */

.service-strip {
    background:linear-gradient(90deg,#c98600,#f5bd24,#ffe079,#f5bd24,#c98600);
    color:#171005;
}

/* SECTIONS */

.services-section {
    background:#0d0c08;
}

.service-card {
    background:
        linear-gradient(145deg,rgba(35,29,14,.90),rgba(15,13,8,.97));
    border-color:rgba(255,205,76,.16);
}

.service-card:before {
    background:linear-gradient(90deg,#f5bd24,transparent);
}

.service-card:hover {
    border-color:rgba(245,189,36,.62);
    box-shadow:0 20px 55px rgba(0,0,0,.25);
}

.service-card-featured {
    background:
        radial-gradient(circle at 90% 15%,rgba(218,150,0,.15),transparent 50%),
        linear-gradient(145deg,#211b0d,#100e08);
}

.card-number {
    color:#9e9174;
}

.card-arrow {
    border-color:rgba(245,189,36,.28);
    color:#f5bd24;
}

.service-icon,
.small-icon,
.card-link {
    color:#f5bd24;
}

.service-card p {
    color:#aaa089;
}

/* IT FEATURE */

.it-feature {
    background:
        radial-gradient(circle at 80% 50%,rgba(191,126,0,.09),transparent 42%),
        #0c0b07;
}

.phones-feature {
    background:#151209;
}

.feature-copy > p {
    color:#b3a990;
}

.feature-copy .feature-lead {
    color:#fff4d8;
}

.feature-points span {
    color:#e4d8bb;
}

.feature-points b,
.text-link {
    color:#f5bd24;
}

.text-link {
    border-bottom-color:#f5bd24;
}

.feature-art {
    border-color:rgba(245,189,36,.15);
    background:
        radial-gradient(circle at center,rgba(193,126,0,.15),transparent 60%),
        #121007;
}

.art-grid {
    background-image:
        linear-gradient(rgba(245,189,36,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(245,189,36,.055) 1px,transparent 1px);
}

.it-terminal {
    background:#0d0b06;
    border-color:rgba(245,189,36,.43);
    box-shadow:
        0 35px 75px rgba(0,0,0,.48),
        0 0 40px rgba(205,137,0,.10);
}

.terminal-top {
    background:#241d0c;
}

.terminal-top small {
    color:#ad9b74;
}

.terminal-title span {
    color:#f5bd24;
}

.terminal-line {
    color:#b7a985;
}

.art-corner {
    border-color:#f5bd24;
}

/* PHONE VISUAL */

.phones-art {
    background:
        radial-gradient(circle at center,rgba(211,141,0,.20),transparent 57%),
        #0e0c06;
}

.phone-rings {
    border-color:rgba(245,189,36,.16);
    box-shadow:
        0 0 0 45px rgba(245,189,36,.025),
        0 0 0 90px rgba(245,189,36,.018);
}

.phone-device {
    border-color:#4a3a17;
    background:#0c0904;
    box-shadow:
        20px 25px 45px rgba(0,0,0,.55),
        inset 0 0 0 1px #806522;
}

.phone-screen {
    background:linear-gradient(155deg,#4a3308,#120e05 65%);
    border-color:rgba(245,189,36,.16);
}

.phone-screen-label,
.phone-screen-small,
.phone-signal {
    color:#f5bd24;
}

.phone-signal {
    border-color:rgba(245,189,36,.43);
    box-shadow:0 0 40px rgba(245,189,36,.16);
}

.phone-screen-bars i {
    background:#f5bd24;
}

.phone-badge {
    background:#2a210c;
    border-color:rgba(245,189,36,.40);
    color:#ffe7a3;
}

/* SECURITY */

.security-section {
    background:
        radial-gradient(ellipse at 50% 0%,rgba(201,132,0,.17),transparent 55%),
        #0b0a06;
}

.security-header p,
.security-stat p,
.security-bottom p {
    color:#ada38c;
}

.security-stat {
    background:linear-gradient(150deg,#211b0d,#100e08);
    border-color:rgba(245,189,36,.16);
}

.security-stat:after {
    background:#f5bd24;
    box-shadow:0 0 25px rgba(245,189,36,.8);
}

.stat-icon,
.security-stat > strong span,
.small-label {
    color:#f5bd24;
}

.security-disclaimer {
    color:#82775e;
}

/* ABOUT */

.about-section {
    background:#151209;
}

.about-number {
    border-right-color:rgba(245,189,36,.16);
}

.about-number > span {
    color:#f5bd24;
}

.about-number strong {
    -webkit-text-stroke:2px rgba(245,189,36,.72);
}

.about-copy p {
    color:#b2a78e;
}

.about-copy p:first-of-type {
    color:#eee2c4;
}

/* CONTACT */

.contact-section {
    background:#0b0a06;
}

.contact-shell {
    border-color:rgba(245,189,36,.28);
    background:
        linear-gradient(135deg,rgba(52,40,13,.94),rgba(16,13,7,.97));
}

.contact-main {
    border-right-color:rgba(245,189,36,.16);
}

.contact-main:after {
    border-color:rgba(245,189,36,.09);
    box-shadow:
        0 0 0 40px rgba(245,189,36,.025),
        0 0 0 80px rgba(245,189,36,.018);
}

.contact-main > p {
    color:#b7ab90;
}

.contact-phone {
    border-bottom-color:rgba(245,189,36,.45);
}

.contact-phone span,
.detail-label {
    color:#f5bd24;
}

.contact-detail p {
    color:#aa9d80;
}

.remote-support-card {
    border-color:rgba(245,189,36,.38);
    background:rgba(181,119,0,.10);
}

.remote-support-card:hover {
    background:rgba(181,119,0,.20);
}

.remote-icon {
    background:#f5bd24;
    color:#151005;
}

.remote-support-card small {
    color:#ad9f7f;
}

.remote-arrow {
    color:#f5bd24;
}

/* FOOTER */

.footer {
    background:#080704;
    border-top-color:rgba(245,189,36,.15);
}

.footer-main > p {
    color:#978c73;
}

.footer-links a {
    color:#b2a78e;
}

.footer-bottom {
    border-top-color:rgba(245,189,36,.10);
    color:#80755d;
}

.footer-bottom a {
    color:#f5bd24;
}

.floating-call {
    background:linear-gradient(135deg,#ffe078,#e9a912);
    color:#171005;
    box-shadow:0 10px 35px rgba(211,143,0,.35);
}

/* LOGO GLOW — temporary logo and future official logo */

.actual-compnow-logo img,
.compnow-real-logo img,
.brand-logo img {
    filter:
        drop-shadow(0 0 5px rgba(245,189,36,.16))
        drop-shadow(0 0 14px rgba(245,189,36,.08)) !important;
}

/* ACCESSIBILITY */

:focus-visible {
    outline-color:#f5bd24 !important;
}


/* =========================================================
   COMPNOW — DOUBLE HEADER LOGO SIZE
   ========================================================= */

.site-header {
    height:190px !important;
    overflow:visible !important;
}

.site-header.scrolled {
    height:165px !important;
}

.nav-container {
    height:100% !important;
    overflow:visible !important;
}

.site-header .actual-compnow-logo,
.site-header .compnow-real-logo,
.site-header .brand-logo {
    width:900px !important;
    max-width:55vw !important;
    height:180px !important;
    flex-basis:900px !important;
    display:flex !important;
    align-items:center !important;
}

.site-header .actual-compnow-logo img,
.site-header .compnow-real-logo img,
.site-header .brand-logo img {
    width:900px !important;
    max-width:100% !important;
    height:175px !important;
    object-fit:contain !important;
    object-position:left center !important;
}

.hero {
    padding-top:190px !important;
}

/* Tablet */
@media (max-width:1100px) {

    .site-header {
        height:145px !important;
    }

    .site-header.scrolled {
        height:130px !important;
    }

    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:570px !important;
        max-width:58vw !important;
        height:135px !important;
        flex-basis:570px !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:570px !important;
        height:130px !important;
    }

    .hero {
        padding-top:145px !important;
    }
}

/* Phones */
@media (max-width:760px) {

    .site-header,
    .site-header.scrolled {
        height:105px !important;
    }

    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:300px !important;
        max-width:72vw !important;
        height:98px !important;
        flex-basis:auto !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:300px !important;
        max-width:100% !important;
        height:94px !important;
    }

    .hero {
        padding-top:125px !important;
    }
}

/* =========================================================
   COMPNOW — THIN HEADER / LARGE LOGO
   Logo may extend outside header. Header does NOT grow.
   ========================================================= */

.site-header,
.site-header.scrolled {
    height:82px !important;
    min-height:82px !important;
    overflow:visible !important;
}

.nav-container {
    height:82px !important;
    min-height:82px !important;
    overflow:visible !important;
}

/* BIG LOGO WITHOUT MAKING HEADER BIGGER */
.site-header .actual-compnow-logo,
.site-header .compnow-real-logo,
.site-header .brand-logo {
    width:650px !important;
    max-width:none !important;
    height:82px !important;
    flex:0 0 650px !important;
    overflow:visible !important;
    position:relative !important;
    z-index:20 !important;
}

.site-header .actual-compnow-logo img,
.site-header .compnow-real-logo img,
.site-header .brand-logo img {
    position:absolute !important;
    left:0 !important;
    top:50% !important;

    width:650px !important;
    max-width:none !important;
    height:auto !important;

    transform:translateY(-50%) !important;

    object-fit:contain !important;
    object-position:left center !important;
}

/* Undo the giant header spacing from previous rule */
.hero {
    padding-top:82px !important;
}

/* TABLET */
@media (max-width:1100px) {

    .site-header,
    .site-header.scrolled,
    .nav-container {
        height:76px !important;
        min-height:76px !important;
    }

    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:430px !important;
        height:76px !important;
        flex:0 0 430px !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:430px !important;
        height:auto !important;
    }

    .hero {
        padding-top:76px !important;
    }
}

/* PHONE */
@media (max-width:760px) {

    .site-header,
    .site-header.scrolled,
    .nav-container {
        height:70px !important;
        min-height:70px !important;
    }

    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:280px !important;
        height:70px !important;
        flex:0 0 280px !important;
    }

    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:280px !important;
        height:auto !important;
    }

    .hero {
        padding-top:70px !important;
    }
}

/* =========================================================
   FINAL HEADER FIX
   Thin header. BIG visible logo. NO gold stripe.
   ========================================================= */

/* Kill the gold stripe underneath the navigation */
.site-header,
.site-header.scrolled {
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.site-header::before,
.site-header::after,
.nav-container::before,
.nav-container::after {
    display:none !important;
}

.nav-container {
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    overflow:visible !important;
}

/* Keep only a small layout footprint for the logo */
.site-header .brand,
.site-header .actual-compnow-logo,
.site-header .compnow-real-logo,
.site-header .brand-logo {
    position:relative !important;
    width:360px !important;
    height:72px !important;
    max-width:none !important;
    flex:0 0 360px !important;
    overflow:visible !important;
    z-index:100 !important;
}

/*
   THIS is the important part:
   enlarge the actual pixels of the logo independently
   from the header/container.
*/
.site-header .brand img,
.site-header .actual-compnow-logo img,
.site-header .compnow-real-logo img,
.site-header .brand-logo img {
    position:absolute !important;

    left:0 !important;
    top:50% !important;

    width:360px !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;

    transform:translateY(-50%) scale(1.75) !important;
    transform-origin:left center !important;

    object-fit:contain !important;

    filter:
        drop-shadow(0 0 5px rgba(255,190,20,.22))
        drop-shadow(0 0 12px rgba(255,175,0,.12)) !important;

    z-index:101 !important;
}

/* Do NOT create extra space underneath the header */
.hero {
    padding-top:72px !important;
}

/* Tablet */
@media (max-width:1100px) {

    .site-header,
    .site-header.scrolled,
    .nav-container {
        height:68px !important;
        min-height:68px !important;
        max-height:68px !important;
    }

    .site-header .brand,
    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:280px !important;
        height:68px !important;
        flex:0 0 280px !important;
    }

    .site-header .brand img,
    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:280px !important;
        transform:translateY(-50%) scale(1.55) !important;
    }

    .hero {
        padding-top:68px !important;
    }
}

/* Phone */
@media (max-width:760px) {

    .site-header,
    .site-header.scrolled,
    .nav-container {
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
    }

    .site-header .brand,
    .site-header .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header .brand-logo {
        width:190px !important;
        height:64px !important;
        flex:0 0 190px !important;
    }

    .site-header .brand img,
    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        width:190px !important;
        transform:translateY(-50%) scale(1.35) !important;
    }

    .hero {
        padding-top:64px !important;
    }
}

/* =========================================================
   LOGO VERTICAL POSITION FIX
   Keep current size. Keep current header. ONLY move logo down.
   ========================================================= */

@media (min-width:1101px) {
    .site-header .brand img,
    .site-header .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header .brand-logo img {
        top:calc(50% + 38px) !important;
    }
}

/* =========================================================
   COMPNOW DEFINITIVE HEADER RESET
   SAME header + SAME logo at every scroll position.
   ========================================================= */

/* HEADER NEVER CHANGES SIZE WHEN SCROLLING */
.site-header,
.site-header.scrolled {
    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;

    padding:0 !important;
    margin:0 !important;

    background:rgba(9,8,4,.96) !important;

    border:0 !important;
    border-bottom:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

    transition:background .25s ease !important;
}

/* REMOVE DECORATIVE HEADER BARS */
.site-header::before,
.site-header::after,
.nav-container::before,
.nav-container::after {
    content:none !important;
    display:none !important;
}

/* NAVIGATION CONTAINER NEVER CHANGES EITHER */
.site-header .nav-container,
.site-header.scrolled .nav-container {
    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;

    padding-top:0 !important;
    padding-bottom:0 !important;

    overflow:visible !important;

    align-items:center !important;
}

/* LOGO'S LAYOUT SPACE */
.site-header .brand,
.site-header.scrolled .brand,
.site-header .actual-compnow-logo,
.site-header.scrolled .actual-compnow-logo,
.site-header .compnow-real-logo,
.site-header.scrolled .compnow-real-logo,
.site-header .brand-logo,
.site-header.scrolled .brand-logo {
    position:relative !important;

    width:520px !important;
    min-width:520px !important;
    max-width:520px !important;

    height:86px !important;
    min-height:86px !important;
    max-height:86px !important;

    flex:0 0 520px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    transform:none !important;
}

/* ACTUAL LOGO IMAGE — NO SCALE TRANSFORM */
.site-header .brand img,
.site-header.scrolled .brand img,
.site-header .actual-compnow-logo img,
.site-header.scrolled .actual-compnow-logo img,
.site-header .compnow-real-logo img,
.site-header.scrolled .compnow-real-logo img,
.site-header .brand-logo img,
.site-header.scrolled .brand-logo img {
    position:absolute !important;

    left:0 !important;
    top:8px !important;

    width:520px !important;
    min-width:520px !important;
    max-width:520px !important;

    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    scale:none !important;

    object-fit:contain !important;
    object-position:left top !important;

    filter:
        drop-shadow(0 0 5px rgba(255,190,20,.22))
        drop-shadow(0 0 14px rgba(255,175,0,.10)) !important;
}

/* HERO STARTS BELOW THE REAL HEADER */
.hero {
    padding-top:86px !important;
}

/* TABLET */
@media (min-width:761px) and (max-width:1100px) {

    .site-header,
    .site-header.scrolled,
    .site-header .nav-container,
    .site-header.scrolled .nav-container {
        height:78px !important;
        min-height:78px !important;
        max-height:78px !important;
    }

    .site-header .brand,
    .site-header.scrolled .brand,
    .site-header .actual-compnow-logo,
    .site-header.scrolled .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header.scrolled .compnow-real-logo,
    .site-header .brand-logo,
    .site-header.scrolled .brand-logo {
        width:350px !important;
        min-width:350px !important;
        max-width:350px !important;
        height:78px !important;
        min-height:78px !important;
        max-height:78px !important;
        flex:0 0 350px !important;
    }

    .site-header .brand img,
    .site-header.scrolled .brand img,
    .site-header .actual-compnow-logo img,
    .site-header.scrolled .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header.scrolled .compnow-real-logo img,
    .site-header .brand-logo img,
    .site-header.scrolled .brand-logo img {
        width:350px !important;
        min-width:350px !important;
        max-width:350px !important;
        top:7px !important;
        transform:none !important;
    }

    .hero {
        padding-top:78px !important;
    }
}

/* PHONE */
@media (max-width:760px) {

    .site-header,
    .site-header.scrolled,
    .site-header .nav-container,
    .site-header.scrolled .nav-container {
        height:70px !important;
        min-height:70px !important;
        max-height:70px !important;
    }

    .site-header .brand,
    .site-header.scrolled .brand,
    .site-header .actual-compnow-logo,
    .site-header.scrolled .actual-compnow-logo,
    .site-header .compnow-real-logo,
    .site-header.scrolled .compnow-real-logo,
    .site-header .brand-logo,
    .site-header.scrolled .brand-logo {
        width:245px !important;
        min-width:245px !important;
        max-width:245px !important;
        height:70px !important;
        min-height:70px !important;
        max-height:70px !important;
        flex:0 0 245px !important;
    }

    .site-header .brand img,
    .site-header.scrolled .brand img,
    .site-header .actual-compnow-logo img,
    .site-header.scrolled .actual-compnow-logo img,
    .site-header .compnow-real-logo img,
    .site-header.scrolled .compnow-real-logo img,
    .site-header .brand-logo img,
    .site-header.scrolled .brand-logo img {
        width:245px !important;
        min-width:245px !important;
        max-width:245px !important;
        top:6px !important;
        transform:none !important;
    }

    .hero {
        padding-top:70px !important;
    }
}