* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #102038;
    background: #fff;
}

a {
    color: inherit;
}

.container {
    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
}


/* HEADER */

.site-header {
    background: #06182a;
    color: white;
    border-bottom: 1px solid #17344d;
}

.nav-wrapper {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-right: auto;
    text-decoration: none;
}

.brand-mark {
    font-size: 2.2rem;
    color: #16a7ff;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-text strong {
    font-size: 1.25rem;
}

.brand-text small {
    margin-top: 0.15rem;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: #c9d6e2;
}

.main-nav {
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    padding: 1.8rem 0 1.5rem;
    font-size: 0.9rem;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav .active {
    color: #21adff;
}

.main-nav .active {
    border-bottom: 2px solid #21adff;
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phone span:last-child {
    display: flex;
    flex-direction: column;
}

.phone small {
    color: #becbd6;
}

.phone-icon {
    color: #26b0ff;
    font-size: 1.4rem;
}


/* BUTTONS */

.button {
    display: inline-block;
    padding: 0.95rem 1.45rem;
    border: 1px solid #20aaff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    color: white;
    background: #159fe9;
    transition: 0.2s ease;
}

.button:hover {
    background: #35b7fc;
    transform: translateY(-1px);
}

.button-small {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
}

.button-outline {
    background: transparent;
}

.button-outline:hover {
    background: rgba(255,255,255,0.08);
}


/* HERO */

.hero {
    overflow: hidden;
    padding: 4.7rem 0 1.8rem;
    color: white;
    background:
        radial-gradient(
            circle at 76% 35%,
            #173b56 0,
            #0b263d 31%,
            #071828 64%,
            #051321 100%
        );
}

.hero-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    align-items: center;
    gap: 3rem;
}

.eyebrow,
.section-label {
    margin: 0 0 1rem;
    color: #13aaff;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.hero h1 {
    margin: 0;
    font-size: clamp(3rem, 5.2vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero h1 span {
    color: #13aaff;
}

.hero-description {
    max-width: 480px;
    margin: 1.5rem 0 0;
    color: #e0e8ee;
    font-size: 1.05rem;
    line-height: 1.55;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.8rem;
}

.hero-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
}

.benefit {
    display: flex;
    gap: 0.8rem;
    padding-right: 1rem;
    border-right: 1px solid #385067;
}

.benefit:last-child {
    border-right: 0;
}

.benefit-icon {
    color: #10a8ff;
    font-size: 2rem;
}

.benefit strong {
    font-size: 0.9rem;
}

.benefit p {
    margin: 0.35rem 0 0;
    color: #d3dee7;
    font-size: 0.76rem;
    line-height: 1.4;
}


/* WORKSTATION */

.hero-visual {
    min-height: 430px;
    display: flex;
    align-items: center;
}

.workstation {
    width: 100%;
}

.monitor-row {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
}

.monitor {
    width: 47%;
}

.screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 8px solid #111820;
    border-radius: 5px;
    box-shadow: 0 25px 35px rgba(0,0,0,0.45);
}

.linux-screen {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle, #314b5b, #111e27 70%);
}

.tux {
    font-size: clamp(5rem, 10vw, 9rem);
}

.debian-screen {
    padding: 1rem;
    background: #09121a;
}

.terminal-lines {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-family: monospace;
    font-size: 0.75rem;
    color: #38df7e;
}

.debian-name {
    position: absolute;
    right: 1.1rem;
    bottom: 0.8rem;
    color: white;
    font-size: 1.4rem;
}

.monitor-neck {
    width: 15px;
    height: 35px;
    margin: auto;
    background: #10161c;
}

.monitor-base {
    width: 35%;
    height: 8px;
    margin: auto;
    background: #111820;
}

.desk {
    position: relative;
    height: 120px;
    margin-top: 0.8rem;
    border-top: 9px solid #403326;
}

.keyboard {
    position: absolute;
    width: 38%;
    height: 42px;
    left: 30%;
    top: 20px;
    border: 1px solid #35495a;
    transform: perspective(150px) rotateX(15deg);
    background:
        repeating-linear-gradient(
            90deg,
            #171e24 0,
            #171e24 10px,
            #27313a 11px,
            #27313a 12px
        );
}

.router {
    position: absolute;
    right: 3%;
    top: 13px;
    width: 105px;
    height: 35px;
    border-radius: 4px;
    background: #101a22;
}

.router span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 15px 1px 0 8px;
    border-radius: 50%;
    background: #50de77;
}

.windows-laptop {
    position: absolute;
    right: -5%;
    top: -80px;
    width: 145px;
}

.laptop-screen {
    height: 85px;
    display: grid;
    place-items: center;
    border: 6px solid #151b21;
    color: #168fff;
    background: #08294e;
    font-size: 3rem;
}

.laptop-base {
    height: 8px;
    background: #89939b;
}


/* PLATFORM STRIP */

.platform-strip {
    border-bottom: 1px solid #dce4ea;
    background: #fff;
}

.platform-row {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
}

.platform-title {
    font-size: 0.7rem;
    letter-spacing: 0.13em;
}

.platform {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
}

.platform span {
    font-size: 1.55rem;
}

.windows-symbol {
    color: #168fed;
}


/* SERVICES */

.services {
    padding: 4rem 0 5rem;
    background: #fff;
}

.services .section-label,
.services h2,
.services .section-subtitle,
.why-us .section-label,
.why-us h2,
.why-us .section-subtitle {
    text-align: center;
}

.services h2,
.why-us h2 {
    margin: 0;
    font-size: 2.2rem;
}

.section-subtitle {
    margin: 0.5rem 0 0;
    color: #526171;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 2.5rem;
}

.service-card {
    overflow: hidden;
    border: 1px solid #dce4ea;
    border-radius: 7px;
    background: white;
    box-shadow: 0 7px 20px rgba(13,32,48,0.08);
}

.service-image {
    height: 150px;
    display: grid;
    place-items: center;
    font-size: 4rem;
}

.business-image {
    background:
        linear-gradient(135deg, #172d40, #4784a9);
    color: white;
}

.home-image {
    background:
        linear-gradient(135deg, #e8e1d6, #afc3c7);
}

.server-image {
    background:
        repeating-linear-gradient(
            0deg,
            #0d1822,
            #0d1822 24px,
            #172d40 25px,
            #172d40 48px
        );
    color: #80b8ff;
}

.windows-flower {
    width: 110px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0b7de0;
    background:
        radial-gradient(
            ellipse,
            #59b6ff,
            #1167d5 60%,
            transparent 63%
        );
    font-size: 3rem;
}

.service-content {
    padding: 1.4rem;
}

.service-content h3 {
    margin: 0;
}

.service-content p {
    color: #4b5b68;
    line-height: 1.5;
}

.service-content a {
    color: #087ed1;
    text-decoration: none;
    font-weight: 700;
}


/* WHY */

.why-us {
    padding: 4rem 0;
    color: white;
    background: #05213a;
}

.why-us .section-subtitle {
    color: #cedbe5;
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 2.8rem;
}

.difference {
    padding: 0 1.4rem;
    text-align: center;
    border-right: 1px solid #456077;
}

.difference:last-child {
    border-right: 0;
}

.difference > span {
    color: #11a9ff;
    font-size: 2.5rem;
}

.difference h3 {
    font-size: 0.95rem;
}

.difference p {
    color: #d1dce4;
    font-size: 0.8rem;
    line-height: 1.5;
}
  

/* SERVICE REQUEST FORM */

form {
    max-width: 760px;
    margin-top: 2rem;
}

form label {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.35rem;

    font-weight: 600;
    color: #10213a;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
    display: block;
    width: 100%;
    max-width: 700px;

    padding: 0.85rem 1rem;

    background: #ffffff;
    color: #10213a;

    border: 1px solid #b8c5cf;
    border-radius: 6px;

    font-family: inherit;
    font-size: 1rem;

    box-sizing: border-box;
}

form textarea {
    min-height: 160px;
    resize: vertical;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;

    border-color: #159fe9;

    box-shadow:
        0 0 0 3px rgba(21, 159, 233, 0.15);
}

form select {
    min-height: 46px;
}

form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
}

form button,
form input[type="submit"] {
    margin-top: 1.25rem;

    padding: 0.9rem 1.5rem;

    background: #159fe9;
    color: #ffffff;

    border: none;
    border-radius: 6px;

    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;
}

form button:hover,
form input[type="submit"]:hover {
    background: #1188c8;
}
form .consent-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

form .consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

form .consent-row label {
    margin: 0;
}