@font-face {
    font-family:"SmartSolutions";
    src:url("../fonts/segoeprb.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

:root {
    --purple:#660066;
    --purple-dark:#4d004d;
    --purple-light:#f5eaf5;
    --orange:#ff8e3b;
    --orange-light:#fff1e7;
    --blue:#315b72;
    --ink:#18181b;
    --text:#36363d;
    --muted:#71717a;
    --white:#fff;
    --background:#fff;
    --background-soft:#f7f7f8;
    --border:#e7e7eb;
    --container:1180px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --shadow-soft:0 12px 35px rgba(30,20,30,.06);
    --shadow-card:0 18px 45px rgba(32,20,40,.08);
}

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

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

body {
    font-family:"Inter",sans-serif;
    color:var(--text);
    background:var(--background);
    line-height:1.7;
    overflow-x:hidden;
}

body.menu-open {
    overflow:hidden;
}

img {
    display:block;
    max-width:100%;
}

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

button,
input,
textarea,
select {
    font:inherit;
}

button {
    cursor:pointer;
}

.container,
.footer-container {
    width:min(calc(100% - 48px),var(--container));
    margin-inline:auto;
}

.section {
    padding:115px 0;
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    color:var(--purple);
    font-size:12px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.eyebrow::before {
    content:"";
    width:25px;
    height:2px;
    background:var(--orange);
}

.centered {
    margin-inline:auto;
    text-align:center;
}

.centered .eyebrow {
    justify-content:center;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:0 26px;
    border:0;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

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

.btn-primary {
    color:#fff;
    background:var(--purple);
    box-shadow:0 10px 25px rgba(102,0,102,.18);
}

.btn-primary:hover {
    background:var(--purple-dark);
    box-shadow:0 15px 32px rgba(102,0,102,.24);
}

.btn-small {
    min-height:42px;
    padding:0 20px;
    font-size:13px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--purple);
    font-size:14px;
    font-weight:600;
}

.text-link span {
    font-size:18px;
    transition:transform .2s ease;
}

.text-link:hover span {
    transform:translateX(4px);
}

[data-reveal] {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease;
}

[data-reveal].is-visible {
    opacity:1;
    transform:translateY(0);
}

/* HEADER */

.site-header {
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    background:rgba(255,255,255,.91);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.04);
    transition:background .3s ease,box-shadow .3s ease;
}

.site-header.scrolled,
.site-header.is-scrolled {
    background:rgba(255,255,255,.97);
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.header-inner {
    min-height:82px;
    display:flex;
    align-items:center;
    gap:32px;
}

.logo {
    flex-shrink:0;
}

.logo img {
    width:185px;
    height:auto;
}

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

.desktop-nav a {
    color:#4e4e55;
    font-size:14px;
    font-weight:500;
    transition:color .2s ease;
}

.desktop-nav a:hover {
    color:var(--purple);
}

.header-actions {
    display:flex;
    align-items:center;
    gap:20px;
}

.language-switcher {
    display:flex;
    align-items:center;
    gap:7px;
    color:#8a8a91;
    font-size:12px;
    font-weight:600;
}

.language-switcher a:hover,
.language-switcher a.active {
    color:var(--purple);
}

.mobile-menu-button {
    display:none;
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.mobile-menu-button span {
    width:21px;
    height:2px;
    background:var(--purple);
}

.mobile-nav {
    display:none;
}
/* ========================================
   HERO
======================================== */

.hero {
    position:relative;
    min-height:770px;
    padding:175px 0 105px;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 30%,rgba(102,0,102,.08),transparent 30%),
        linear-gradient(135deg,#fff 0%,#fff 58%,#faf7fb 100%);
}

.hero-glow {
    position:absolute;
    width:550px;
    height:550px;
    right:-220px;
    top:80px;
    border-radius:50%;
    background:rgba(255,142,59,.06);
    filter:blur(15px);
}

.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);
    align-items:center;
    gap:70px;
}

.hero-content {
    max-width:680px;
}

.hero h1 {
    max-width:700px;
    color:var(--ink);
    font-size:clamp(46px,5.3vw,72px);
    line-height:1.03;
    letter-spacing:-.055em;
    font-weight:700;
}

.hero h1 span {
    display:block;
    color:var(--purple);
}

.hero-text {
    max-width:610px;
    margin-top:28px;
    color:var(--muted);
    font-size:17px;
    line-height:1.8;
}

.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:27px;
    margin-top:38px;
}

.hero-actions .btn span {
    font-size:17px;
}


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

.hero-visual {
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* ORBITS */

.hero-orbit {
    position:absolute;
    border:1px solid rgba(102,0,102,.12);
    border-radius:50%;
    pointer-events:none;
}

.orbit-one {
    width:430px;
    height:430px;
}

.orbit-two {
    width:320px;
    height:320px;
    border-color:rgba(255,142,59,.20);
}

.orbit-three {
    width:210px;
    height:210px;
    border-color:rgba(102,0,102,.07);
}


/* ORBIT DECORATION */

.orbit-one::before,
.orbit-two::before,
.orbit-three::before {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
}

.orbit-one::before {
    top:48px;
    left:70px;
    background:var(--orange);
    box-shadow:0 0 0 6px rgba(255,142,59,.10);
}

.orbit-two::before {
    right:-4px;
    bottom:155px;
    background:var(--purple);
    box-shadow:0 0 0 6px rgba(102,0,102,.08);
}

.orbit-three::before {
    left:28px;
    bottom:30px;
    width:5px;
    height:5px;
    background:#315B72;
}


/* ========================================
   CENTER
======================================== */

.hero-center {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:145px;
    height:145px;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(102,0,102,.10);
    box-shadow:
        0 20px 60px rgba(60,20,60,.10),
        0 0 0 12px rgba(255,255,255,.55);
    backdrop-filter:blur(10px);
}

.hero-center-logo {
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    margin-bottom:10px;
    border-radius:16px;
    background:var(--purple-light);
}

.hero-center-logo img {
    width:34px;
    height:34px;
    object-fit:contain;
}

.hero-center span {
    color:var(--muted);
    font-size:10px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-align: center;
}


/* ========================================
   FLOATING CARDS
======================================== */

.floating-card {
    position:absolute;
    z-index:5;
    width:155px;
    padding:16px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:17px;
    background:rgba(255,255,255,.96);
    box-shadow:
        0 20px 50px rgba(50,20,50,.10);
    backdrop-filter:blur(10px);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.floating-card:hover {
    transform:translateY(-5px);
    box-shadow:
        0 25px 60px rgba(50,20,50,.14);
}

.floating-card strong,
.floating-card span {
    display:block;
}

.floating-card strong {
    margin-top:11px;
    color:var(--ink);
    font-size:14px;
}

.floating-card span {
    color:var(--muted);
    font-size:11px;
}


/* POSITIONS */

.floating-card-cloud {
    top:15px;
    left:10;
}

.floating-card-code {
    right:15px;
    bottom:55px;
}

.floating-card-support {
    left:20px;
    bottom:25px;
}


/* ========================================
   ICON IMAGES
======================================== */

.floating-icon svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.floating-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:12px;
}

.floating-icon img {
    width:22px;
    height:22px;
    object-fit:contain;
}

.purple-icon {
    color:var(--purple);
    background:var(--purple-light);
}

.orange-icon {
    color:#d96f21;
    background:var(--orange-light);
}

.blue-icon {
    color:#315B72;
    background:#edf4f7;
}


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

@media (max-width:1000px) {

    .hero-grid {
        grid-template-columns:1fr;
        gap:55px;
    }

    .hero-content {
        max-width:760px;
    }

    .hero-visual {
        width:100%;
        max-width:600px;
        margin-inline:auto;
    }
}


@media (max-width:768px) {

    .hero {
        min-height:auto;
        padding:145px 0 80px;
    }

    .hero-grid {
        gap:40px;
    }

    .hero h1 {
        font-size:clamp(40px,11vw,56px);
    }

    .hero-text {
        font-size:16px;
    }

    .hero-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .hero-visual {
        min-height:390px;
    }

    .orbit-one {
        width:330px;
        height:330px;
    }

    .orbit-two {
        width:250px;
        height:250px;
    }

    .orbit-three {
        width:170px;
        height:170px;
    }

    .floating-card {
        width:145px;
        padding:14px;
    }

    .floating-card-cloud {
        top:30px;
        left:0;
    }

    .floating-card-code {
        right:0;
        bottom:55px;
    }

    .floating-card-support {
        left:5px;
        bottom:15px;
    }

    .hero-center {
        width:125px;
        height:125px;
    }

    .hero-center-logo {
        display:flex;
        align-items:center;
        justify-content:center;
        width:58px;
        height:58px;
        margin-bottom:10px;
        border-radius:16px;
        color:var(--purple);
        background:var(--purple-light);
    }

    .hero-center-logo svg {
        width:34px;
        height:34px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.5;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .hero-center-logo img {
        width:29px;
        height:29px;
    }
}


@media (max-width:480px) {

    .hero-visual {
        min-height:350px;
        transform:scale(.92);
        transform-origin:center;
        margin-top:-10px;
        margin-bottom:-10px;
    }

    .orbit-one {
        width:300px;
        height:300px;
    }

    .orbit-two {
        width:225px;
        height:225px;
    }

    .orbit-three {
        width:155px;
        height:155px;
    }

    .floating-card {
        width:135px;
    }

    .floating-card strong {
        font-size:13px;
    }

    .floating-card span {
        font-size:10px;
    }

    .floating-card-cloud {
        left:-5px;
    }

    .floating-card-code {
        right:-5px;
    }

    .floating-card-support {
        left:0;
        bottom:5px;
    }
}

/* TECHNOLOGY */

.technology-section {
    padding:42px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:#fff;
}

.technology-intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:50px;
    margin-bottom:35px;
}

.technology-intro .eyebrow {
    margin-bottom:12px;
}

.technology-intro h2 {
    color:var(--ink);
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.03em;
}

.technology-intro p {
    max-width:500px;
    justify-self:end;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}

.technology-list {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.tech-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:92px;
    border-right:1px solid var(--border);
    color:#96969c;
    font-size:10px;
    font-weight:500;
    transition:color .2s ease,background .2s ease;
}

.tech-item:last-child {
    border-right:0;
}

.tech-item:hover {
    color:var(--purple);
    background:#fcfafc;
}

.tech-mark {
    color:#55555c;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.04em;
}

.tech-item:hover .tech-mark {
    color:var(--purple);
}

.tech-mark.azure {
    color:#0078d4;
    font-size:16px;
}

.tech-mark.dotnet {
    color:#512bd4;
    font-size:15px;
}

.tech-mark.angular {
    color:#c3002f;
}

.tech-mark.nodejs {
    color:#3c873a;
}


.tech-mark.api {
    color:var(--orange);
    font-size:14px;
}

.tech-mark svg {
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* INTRO */

.intro-section {
    padding:95px 0;
    background:var(--background-soft);
    border-bottom:1px solid var(--border);
}

.intro-grid {
    display:grid;
    grid-template-columns:.35fr 1fr;
    gap:60px;
}

.section-label {
    padding-top:8px;
    color:var(--purple);
    font-size:12px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.intro-section h2 {
    max-width:760px;
    color:var(--ink);
    font-size:clamp(34px,4vw,50px);
    line-height:1.1;
    letter-spacing:-.045em;
}

.intro-section p {
    max-width:730px;
    margin-top:25px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

/* HEADINGS */

.section-heading {
    max-width:720px;
    margin-bottom:58px;
}

.section-heading h2,
.why-content h2,
.about-content h2,
.contact-content h2 {
    color:var(--ink);
    font-size:clamp(35px,4vw,52px);
    line-height:1.08;
    letter-spacing:-.045em;
}

.section-heading p {
    max-width:650px;
    margin-top:18px;
    color:var(--muted);
    font-size:16px;
    line-height:1.75;
}

/* SERVICES */

.services-section {
    background:#fff;
}

.services-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.service-card {
    position:relative;
    min-height:450px;
    padding:34px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:0 6px 25px rgba(30,20,30,.035);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.service-card:hover {
    transform:translateY(-5px);
    border-color:rgba(102,0,102,.17);
    box-shadow:var(--shadow-card);
}

.service-card.featured {
    border-color:rgba(102,0,102,.20);
    box-shadow:0 12px 40px rgba(102,0,102,.07);
}

.service-card.featured::before {
    content:"";
    position:absolute;
    top:0;
    left:34px;
    width:48px;
    height:3px;
    border-radius:0 0 5px 5px;
    background:var(--orange);
}

.featured-label {
    position:absolute;
    top:20px;
    left:95px;
    color:var(--orange);
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.service-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:28px;
}

.service-number {
    color:#b4b4bb;
    font-size:11px;
    font-weight:700;
}

.service-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:15px;
}

.service-icon svg {
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.blue-bg {
    color:#fff;
    background:var(--blue);
}

.orange-bg {
    color:#d96f21;
    background:var(--orange-light);
}

.purple-bg {
    color:var(--purple);
    background:var(--purple-light);
}

.service-card h3 {
    max-width:260px;
    margin-bottom:15px;
    color:var(--ink);
    font-size:24px;
    line-height:1.2;
    letter-spacing:-.03em;
}

.service-card p {
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

.service-card ul {
    margin-top:24px;
    list-style:none;
}

.service-card li {
    position:relative;
    padding-left:19px;
    margin-bottom:9px;
    color:#66666e;
    font-size:13px;
}

.service-card li::before {
    content:"";
    position:absolute;
    top:.7em;
    left:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--orange);
}

/* WHY */

.why-section {
    background:var(--background-soft);
}

.why-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
    align-items:center;
}

.why-content > p {
    max-width:520px;
    margin-top:24px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.why-stat {
    display:flex;
    align-items:center;
    gap:18px;
    max-width:500px;
    margin-top:38px;
    padding-top:25px;
    border-top:1px solid var(--border);
}

.why-stat strong {
    color:var(--purple);
    font-size:42px;
    line-height:1;
    letter-spacing:-.05em;
}

.why-stat span {
    color:var(--ink);
    font-size:14px;
    font-weight:700;
}

.why-stat p {
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.values-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.value-card {
    min-height:190px;
    padding:26px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    transition:transform .2s ease,box-shadow .2s ease;
}

.value-card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow-soft);
}

.value-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:25px;
    border-radius:10px;
    color:var(--purple);
    background:var(--purple-light);
    font-size:10px;
    font-weight:700;
}

.value-card h3 {
    margin-bottom:8px;
    color:var(--ink);
    font-size:17px;
}

.value-card p {
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}

/* PROCESS */

.process-section {
    background:#fff;
}

.process {
    display:grid;
    grid-template-columns:1fr 45px 1fr 45px 1fr 45px 1fr;
    align-items:start;
}

.process-step {
    text-align:center;
}

.process-step > span {
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin:0 auto 20px;
    border:1px solid rgba(102,0,102,.16);
    border-radius:50%;
    color:var(--purple);
    background:var(--purple-light);
    font-size:11px;
    font-weight:700;
}

.process-step h3 {
    color:var(--ink);
    font-size:17px;
}

.process-step p {
    margin:9px auto 0;
    max-width:190px;
    color:var(--muted);
    font-size:12px;
    line-height:1.65;
}

.process-line {
    height:1px;
    margin-top:24px;
    background:var(--border);
}

/* ABOUT */

.about-section {
    background:var(--background-soft);
}

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

.about-visual {
    position:relative;
    min-height:450px;
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:
        radial-gradient(circle at 70% 30%,rgba(255,142,59,.16),transparent 25%),
        radial-gradient(circle at 30% 70%,rgba(102,0,102,.12),transparent 35%),
        #f1edf2;
}

.about-grid-pattern {
    position:absolute;
    inset:0;
    opacity:.55;
    background-image:
        linear-gradient(rgba(102,0,102,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(102,0,102,.06) 1px,transparent 1px);
    background-size:36px 36px;
}

.about-architecture {
    position:absolute;
    inset:0;
}

.about-node {
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:18px;
    background:rgba(255,255,255,.9);
    box-shadow:0 15px 35px rgba(40,20,40,.10);
    color:var(--purple);
    font-size:14px;
    font-weight:700;
}

.about-node svg {
    width:30px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.about-node.cloud {
    top:95px;
    left:50%;
    transform:translateX(-50%);
    background:var(--purple);
    color:#fff;
}

.about-node.app {
    bottom:95px;
    left:20%;
    color:#d96f21;
    background:var(--orange-light);
}

.about-node.database {
    right:20%;
    bottom:95px;
    color:var(--blue);
    background:#edf4f7;
}

.about-node.infrastructure {
    left:50%;
    bottom:45px;
    transform:translateX(-50%);
    color:var(--purple);
}

.about-connector {
    position:absolute;
    z-index:1;
    height:1px;
    width:145px;
    left:50%;
    top:165px;
    background:rgba(102,0,102,.18);
    transform-origin:left;
}

.c1 {
    transform:rotate(120deg);
}

.c2 {
    transform:rotate(60deg);
}

.c3 {
    top:300px;
    width:150px;
    transform:rotate(180deg);
}

.about-brand-card {
    position:absolute;
    z-index:5;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:20px 28px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:17px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--shadow-card);
    text-align:center;
}

.about-brand-card span {
    display:block;
    color:var(--purple);
    font-family:"DM Sans",sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.04em;
}

.about-brand-card strong {
    display:block;
    margin-top:2px;
    color:var(--orange);
    font-family:"SmartSolutions",sans-serif;
    font-size:12px;
}

.about-content p {
    max-width:540px;
    margin-top:20px;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
}

.about-content h2 span {
    color:var(--purple);
}

/* CONTACT */

.contact-section {
    background:#fff;
}

.contact-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:85px;
    align-items:start;
}

.contact-content > p {
    max-width:500px;
    margin-top:22px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.contact-note {
    display:flex;
    align-items:center;
    gap:13px;
    max-width:480px;
    margin-top:30px;
    padding:15px 17px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--background-soft);
}

.contact-note-icon,
.contact-detail-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--purple);
    background:var(--purple-light);
}

.contact-note-icon svg,
.contact-detail-icon svg {
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-note strong {
    display:block;
    color:var(--ink);
    font-size:13px;
}

.contact-note span {
    color:var(--muted);
    font-size:11px;
}

.contact-details {
    display:grid;
    gap:18px;
    margin-top:28px;
}

.contact-detail {
    display:flex;
    align-items:center;
    gap:14px;
}

.contact-detail strong {
    display:block;
    color:var(--ink);
    font-size:13px;
}

.contact-detail span,
.contact-detail a {
    display:block;
    margin-top:1px;
    color:var(--muted);
    font-size:12px;
}

.contact-detail a:hover {
    color:var(--purple);
}

.contact-form-wrapper {
    padding:38px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--background-soft);
}

.contact-form {
    display:grid;
    gap:19px;
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.form-field {
    display:grid;
    gap:7px;
}

.form-field label {
    color:var(--ink);
    font-size:12px;
    font-weight:600;
}

.form-field input,
.form-field textarea,
.form-field select {
    width:100%;
    padding:13px 15px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.form-field input,
.form-field select {
    min-height:48px;
}

.form-field textarea {
    min-height:135px;
    resize:vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color:var(--purple);
    box-shadow:0 0 0 4px rgba(102,0,102,.07);
}

.btn-submit {
    width:fit-content;
    margin-top:3px;
}

.btn-submit span {
    font-size:17px;
}

.honeypot {
    position:absolute;
    left:-9999px;
    opacity:0;
}

/* FOOTER */

.site-footer {
    padding:68px 0 27px;
    background:#202024;
    color:#fff;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:45px;
    padding-bottom:52px;
}

.footer-brand {
    max-width:300px;
}

.footer-logo {
    display:block;
    width:125px;
    margin-bottom:20px;
}

.footer-logo img {
    width:100%;
     opacity:.95;
}

.footer-brand p {
    color:rgba(255,255,255,.55);
    font-size:13px;
    line-height:1.7;
}

.footer-column h3 {
    margin-bottom:19px;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.footer-column a {
    display:block;
    width:fit-content;
    margin-bottom:11px;
    color:rgba(255,255,255,.58);
    font-size:13px;
    transition:color .2s ease,transform .2s ease;
}

.footer-column a:hover {
    color:var(--orange);
    transform:translateX(3px);
}

.footer-contact p {
    margin-bottom:11px;
    color:rgba(255,255,255,.58);
    font-size:13px;
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.11);
}

.footer-copyright {
    color:rgba(255,255,255,.38);
    font-size:11px;
}

.footer-languages {
    display:flex;
    gap:18px;
}

.footer-languages a {
    color:rgba(255,255,255,.48);
    font-size:11px;
    font-weight:600;
}

.footer-languages a:hover,
.footer-languages a.active {
    color:var(--orange);
}

/* RESPONSIVE */

@media (max-width:1050px) {
    .hero-grid {
        grid-template-columns:1fr;
        gap:45px;
    }

    .hero-content {
        max-width:760px;
    }

    .hero-visual {
        width:100%;
        max-width:620px;
        margin:auto;
    }

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

    .service-card:last-child {
        grid-column:1 / -1;
        max-width:calc(50% - 10px);
        width:100%;
        margin:auto;
    }

    .why-grid,
    .about-grid,
    .contact-grid {
        grid-template-columns:1fr;
        gap:55px;
    }

    .about-visual {
        max-width:620px;
        width:100%;
        margin:auto;
    }

    .contact-content {
        max-width:700px;
    }

    .footer-grid {
        grid-template-columns:1.5fr 1fr 1fr;
    }

    .footer-contact {
        grid-column:2 / -1;
    }
}

@media (max-width:800px) {
    .desktop-nav,
    .header-actions {
        display:none;
    }

    .mobile-menu-button {
        display:flex;
        margin-left:auto;
    }

    .mobile-nav {
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:block;
        padding:0 20px 12px;
        background:rgba(255,255,255,.98);
        border-bottom:1px solid var(--border);
        box-shadow:0 20px 40px rgba(0,0,0,.07);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
    }

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

    .mobile-nav > a {
        display:block;
        padding:15px 4px;
        border-bottom:1px solid var(--border);
        color:var(--text);
        font-size:14px;
    }

    .mobile-languages {
        display:flex;
        gap:20px;
        padding:15px 4px 8px;
    }

    .mobile-languages a {
        color:#888;
        font-size:12px;
        font-weight:600;
    }

    .mobile-languages a.active {
        color:var(--purple);
    }

    .technology-intro {
        grid-template-columns:1fr;
        gap:10px;
    }

    .technology-intro p {
        justify-self:start;
    }

    .technology-list {
        grid-template-columns:repeat(4,1fr);
    }

    .tech-item:nth-child(4) {
        border-right:0;
    }

    .process {
        grid-template-columns:1fr;
        gap:25px;
    }

    .process-line {
        display:none;
    }

    .process-step p {
        max-width:350px;
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
    }

    .footer-brand {
        grid-column:1 / -1;
    }

    .footer-contact {
        grid-column:auto;
    }
}

@media (max-width:700px) {
    .container,
    .footer-container {
        width:min(calc(100% - 36px),var(--container));
    }

    .section {
        padding:82px 0;
    }

    .hero {
        min-height:auto;
        padding:135px 0 70px;
    }

    .hero h1 {
        font-size:clamp(40px,11vw,56px);
    }

    .hero-text {
        font-size:15px;
    }

    .hero-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:17px;
    }

    .hero-actions .btn {
        width:auto;
    }

    .hero-visual {
        min-height:410px;
        transform:scale(.92);
        transform-origin:center;
        margin-bottom:-25px;
    }

    .architecture {
        width:310px;
        height:315px;
        top:55px;
    }

    .floating-card {
        width:135px;
        padding:14px;
    }

    .floating-card-cloud {
        left:-3px;
    }

    .floating-card-code {
        right:-4px;
        bottom:68px;
    }

    .floating-card-support {
        left:5px;
        bottom:22px;
    }

    .technology-section {
        padding:35px 0;
    }

    .technology-list {
        grid-template-columns:repeat(2,1fr);
    }

    .tech-item:nth-child(2n) {
        border-right:0;
    }

    .intro-section {
        padding:70px 0;
    }

    .intro-grid {
        grid-template-columns:1fr;
        gap:22px;
    }

    .intro-section h2 {
        font-size:34px;
    }

    .section-heading h2,
    .why-content h2,
    .about-content h2,
    .contact-content h2 {
        font-size:35px;
    }

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

    .service-card,
    .service-card:last-child {
        max-width:none;
        grid-column:auto;
        min-height:auto;
    }

    .values-grid {
        grid-template-columns:1fr;
    }

    .about-visual {
        min-height:380px;
    }

    .contact-form-wrapper {
        padding:27px 21px;
    }

    .form-row {
        grid-template-columns:1fr;
    }

    .btn-submit {
        width:100%;
    }

    .footer-grid {
        grid-template-columns:1fr;
        gap:34px;
    }

    .footer-brand,
    .footer-contact {
        grid-column:auto;
    }

    .footer-bottom {
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:480px) {
    .hero-visual {
        min-height:365px;
        transform:scale(.82);
        width:122%;
        margin-left:-11%;
        margin-bottom:-50px;
    }

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

    .about-visual {
        min-height:330px;
    }

    .about-node {
        width:58px;
        height:58px;
    }

    .about-brand-card {
        padding:17px 22px;
    }

    .contact-note {
        align-items:flex-start;
    }

    .footer-logo {
        width:155px;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    [data-reveal] {
        opacity:1;
        transform:none;
        transition:none;
    }

    .btn,
    .service-card,
    .value-card {
        transition:none;
    }
}


/* Prevent text selection on visual/UI elements */
.hero-visual,
.hero-visual *,
.service-card,
.service-card *,
.value-card,
.value-card *,
.floating-card,
.floating-card *,
.hero-center,
.hero-center *,
.about-visual,
.about-visual *,
.about-card,
.about-card *,
.tech-stack,
.tech-stack *,
.process-step,
.process-step * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Prevent text caret/selection on website content */
body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Keep form fields editable */
input,
textarea,
select {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* ========================================
   404 PAGE
======================================== */

.error-page {
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 24px 60px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(102,0,102,.055),
            transparent 32%
        ),
        var(--background-soft);
}

.error-content {
    width:100%;
    max-width:620px;
    padding:65px 45px;
    text-align:center;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--background);
    box-shadow:var(--shadow-card);
}

.error-code {
    margin-bottom:25px;
    color:var(--purple);
    font-size:clamp(100px,18vw,170px);
    line-height:.8;
    font-weight:700;
    letter-spacing:-.08em;
    opacity:.10;
}

.error-content .eyebrow {
    margin-bottom:14px;
}

.error-content h1 {
    color:var(--ink);
    font-size:clamp(30px,4vw,42px);
    line-height:1.1;
    letter-spacing:-.04em;
}

.error-content p {
    max-width:450px;
    margin:18px auto 30px;
    color:var(--muted);
    font-size:15px;
    line-height:1.75;
}

.error-content .btn {
    margin-top:3px;
}

.error-content .btn span {
    font-size:17px;
}

@media (max-width:600px) {

    .error-page {
        padding:110px 18px 40px;
    }

    .error-content {
        padding:50px 25px;
        border-radius:var(--radius-md);
    }

    .error-code {
        font-size:110px;
    }

    .error-content h1 {
        font-size:30px;
    }

    .error-content p {
        font-size:14px;
    }

    .error-content .btn {
        width:100%;
    }
}

/* ========================================
   THANK YOU PAGE
======================================== */

.thank-you-page {
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 24px 60px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(102,0,102,.055),
            transparent 32%
        ),
        var(--background-soft);
}

.thank-you-content {
    position:relative;
    width:100%;
    max-width:620px;

    padding:65px 45px;

    text-align:center;

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

    background:var(--background);

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

/* ========================================
   SUCCESS ICON
======================================== */

.thank-you-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    margin:0 auto 28px;

    border-radius:50%;

    color:var(--purple);
    background:var(--purple-light);

    border:1px solid rgba(102,0,102,.10);

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

    box-shadow:
        0 0 0 9px rgba(102,0,102,.035);
}

/* pequeno detalhe laranja */

.thank-you-icon::after {
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    margin-left:63px;
    margin-top:-60px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 0 5px rgba(255,142,59,.10);
}

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

.thank-you-content .eyebrow {
    margin-bottom:14px;
}

.thank-you-content h1 {
    max-width:500px;

    margin-inline:auto;

    color:var(--ink);

    font-size:clamp(30px,4vw,42px);

    line-height:1.1;

    letter-spacing:-.04em;
}

.thank-you-text {
    max-width:450px;

    margin:18px auto 30px;

    color:var(--muted);

    font-size:15px;

    line-height:1.75;
}

.thank-you-content .btn {
    margin-top:3px;
}

.thank-you-content .btn span {
    font-size:17px;
}

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

@media (max-width:600px) {

    .thank-you-page {
        padding:110px 18px 40px;
    }

    .thank-you-content {
        padding:50px 25px;
        border-radius:var(--radius-md);
    }

    .thank-you-icon {
        width:64px;
        height:64px;

        margin-bottom:25px;

        font-size:27px;
    }

    .thank-you-content h1 {
        font-size:30px;
    }

    .thank-you-text {
        font-size:14px;
    }

    .thank-you-content .btn {
        width:100%;
    }
}