:root {
    --bg: #080b10;
    --bg-soft: #0c1118;
    --bg-card: rgba(16, 22, 31, .78);
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(78, 255, 179, .22);
    --text: #f1f5f8;
    --muted: #8f9bab;
    --accent: #55f7b0;
    --accent-2: #28bfff;
    --accent-soft: rgba(85, 247, 176, .12);
    --danger: #ff6e7d;
    --success: #55f7b0;
    --shadow: 0 30px 90px rgba(0, 0, 0, .38);
    --radius: 22px;
    --container: 1180px;
    --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 16% -10%, rgba(85, 247, 176, .08), transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(40, 191, 255, .07), transparent 28%),
        var(--bg);
    line-height: 1.55;
    overflow-x: hidden;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--accent); color: #04100b; }

.container {
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
}

.noise {
    position: fixed;
    inset: 0;
    opacity: .045;
    pointer-events: none;
    z-index: 100;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-h);
    z-index: 90;
    border-bottom: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.site-header.scrolled {
    background: rgba(8, 11, 16, .76);
    border-bottom-color: var(--line);
    backdrop-filter: blur(18px);
}

.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: -.02em;
    position: relative;
    z-index: 3;
}

.brand-mark {
    display: grid;
    place-items: center;
    min-width: 50px;
    height: 34px;
    padding: 0 9px;
    color: var(--accent);
    background: rgba(85, 247, 176, .08);
    border: 1px solid rgba(85, 247, 176, .22);
    border-radius: 8px;
    font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-shadow: inset 0 0 24px rgba(85, 247, 176, .03);
}

.brand-name { font-size: 18px; }
.brand-name b { color: var(--accent); }

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #c5cdd6;
    font-size: 14px;
}

.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--accent); }

.nav-cta {
    padding: 11px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--accent-soft);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.nav-toggle span {
    width: 19px;
    height: 1px;
    background: var(--text);
    transition: .25s ease;
}

.hero {
    min-height: 100svh;
    display: grid;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-h) + 58px) 0 76px;
    border-bottom: 1px solid var(--line);
}

#tech-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: .52;
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 92%);
}

.hero::before {
    content: "";
    position: absolute;
    width: 740px;
    height: 740px;
    right: -270px;
    top: 0;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40,191,255,.08), transparent 65%);
    filter: blur(10px);
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    align-items: center;
    gap: clamp(50px, 7vw, 100px);
}

.eyebrow,
.section-index {
    color: var(--accent);
    font: 700 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(85, 247, 176, .14);
    border-radius: 999px;
    background: rgba(85, 247, 176, .04);
    margin-bottom: 22px;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(85,247,176,.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(85,247,176,.45); }
    70% { box-shadow: 0 0 0 8px rgba(85,247,176,0); }
    100% { box-shadow: 0 0 0 0 rgba(85,247,176,0); }
}

h1, h2, h3, p { margin-top: 0; }

h1 {
    margin-bottom: 24px;
    font-size: clamp(47px, 6.4vw, 86px);
    line-height: .98;
    letter-spacing: -.055em;
    max-width: 900px;
}

.gradient-text {
    color: transparent;
    background: linear-gradient(90deg, var(--accent), #74d9ff 62%, #c5b9ff);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-lead {
    max-width: 650px;
    color: #aab4c0;
    font-size: clamp(17px, 1.5vw, 20px);
    margin-bottom: 23px;
}

.type-line {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9aa5b1;
    font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-bottom: 30px;
}

.type-line .prompt,
.type-line strong { color: var(--accent); }
.type-line strong { font-weight: 600; }

.caret {
    width: 8px;
    height: 17px;
    display: inline-block;
    background: var(--accent);
    animation: blink .85s step-end infinite;
}

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

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
}

.btn {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 11px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn-primary {
    color: #03100a;
    background: linear-gradient(135deg, var(--accent), #8effc8);
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(85,247,176,.12);
}
.btn-primary:hover { box-shadow: 0 16px 50px rgba(85,247,176,.22); }
.btn-ghost {
    color: #dbe2e9;
    border-color: var(--line);
    background: rgba(255,255,255,.025);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }

.hero-meta {
    display: flex;
    gap: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.hero-meta > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.meta-label {
    color: var(--accent);
    font: 700 10px/1.4 ui-monospace, monospace;
}

.hero-meta p {
    margin: 0;
    color: #788595;
    font-size: 12px;
    line-height: 1.5;
}

.hero-code { position: relative; }

.code-window {
    position: relative;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 90px),
        rgba(7, 10, 15, .82);
    box-shadow: var(--shadow), 0 0 0 1px rgba(85,247,176,.025) inset;
    overflow: hidden;
    backdrop-filter: blur(14px);
}

.code-window::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(85,247,176,.8), transparent);
    animation: scan 5.6s linear infinite;
    opacity: .45;
}

@keyframes scan {
    from { transform: translateY(0); }
    to { transform: translateY(475px); }
}

.window-bar,
.mini-terminal-head {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border-bottom: 1px solid var(--line);
    color: #74808f;
    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.window-dots { display: flex; gap: 6px; margin-right: 8px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: #3c4651; }
.window-dots span:nth-child(1) { background: #ff6b78; }
.window-dots span:nth-child(2) { background: #f5c85a; }
.window-dots span:nth-child(3) { background: var(--accent); }
.window-status { margin-left: auto; color: var(--accent); }

.code-block {
    margin: 0;
    padding: 26px 28px 20px;
    overflow: hidden;
    color: #d3dae2;
    font: 500 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.code-muted { color: #404a57; user-select: none; display: inline-block; width: 26px; }
.code-keyword { color: #d49cff; }
.code-var, .code-fn { color: #79d6ff; }
.code-string { color: #9aedb9; }
.code-bool { color: #ffb273; }

.terminal-log {
    display: flex;
    gap: 10px;
    padding: 14px 17px;
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,.22);
    color: #768292;
    font: 500 11px/1.4 ui-monospace, monospace;
}

.terminal-prefix { color: var(--accent); }

.floating-chip {
    position: absolute;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(85,247,176,.2);
    background: rgba(8, 12, 16, .86);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    color: var(--accent);
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .08em;
    backdrop-filter: blur(8px);
}

.chip-one { left: -28px; top: 34%; animation: float 4.6s ease-in-out infinite; }
.chip-two { right: -25px; bottom: 18%; animation: float 5.2s ease-in-out infinite reverse; }

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

.section {
    padding: 118px 0;
    position: relative;
    border-bottom: 1px solid var(--line);
}

.section-alt { background: rgba(255,255,255,.012); }

.section-heading {
    max-width: 770px;
    margin-bottom: 50px;
}

.section-heading h2 {
    margin: 13px 0 18px;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.section-heading p {
    max-width: 690px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.service-card {
    min-height: 325px;
    padding: 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: background .25s ease;
}

.service-card::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -150px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(85,247,176,.11), transparent 65%);
    opacity: 0;
    transition: opacity .3s ease;
}

.service-card:hover {
    background: linear-gradient(135deg, rgba(85,247,176,.045), rgba(255,255,255,.01));
}
.service-card:hover::after { opacity: 1; }

.service-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--accent);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(85,247,176,.045);
    font: 700 14px/1 ui-monospace, monospace;
    margin-bottom: 50px;
}

.card-number {
    position: absolute;
    top: 34px;
    right: 34px;
    color: #495463;
    font: 700 11px/1 ui-monospace, monospace;
}

.service-card h3 {
    font-size: 23px;
    letter-spacing: -.025em;
    margin-bottom: 10px;
}

.service-card > p {
    color: var(--muted);
    max-width: 520px;
    margin-bottom: 21px;
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-card li,
.project-stack span {
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    color: #748190;
    font: 600 10px/1 ui-monospace, monospace;
}

.tech-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.tech-layout .section-heading { margin-bottom: 0; }

.tech-terminal {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(8, 12, 17, .72);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mini-terminal-head {
    justify-content: space-between;
    height: 44px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 28px;
}

.tech-tags span {
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: #c9d0d8;
    font: 650 12px/1 ui-monospace, monospace;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.tech-tags span:hover { transform: translateY(-2px); color: var(--accent); border-color: rgba(85,247,176,.26); }

.tech-tags span[data-tech="backend"] { box-shadow: inset 0 -2px rgba(85,247,176,.28); }
.tech-tags span[data-tech="frontend"] { box-shadow: inset 0 -2px rgba(40,191,255,.30); }
.tech-tags span[data-tech="integration"] { box-shadow: inset 0 -2px rgba(197,185,255,.28); }

.tech-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 15px 28px;
    border-top: 1px solid var(--line);
    color: #697584;
    font: 600 10px/1 ui-monospace, monospace;
}
.tech-legend span { display: flex; align-items: center; gap: 7px; }
.tech-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tech-legend span:nth-child(2) i { background: var(--accent-2); }
.tech-legend span:nth-child(3) i { background: #c5b9ff; }

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.project-card {
    min-width: 0;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(85,247,176,.2);
    background: rgba(17, 24, 33, .88);
}

.project-featured { grid-row: span 2; }

.project-topline {
    display: flex;
    justify-content: space-between;
    color: #65717f;
    font: 700 10px/1 ui-monospace, monospace;
    letter-spacing: .1em;
}

.project-visual {
    height: 205px;
    margin: 25px 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 0, rgba(85,247,176,.065), transparent 45%),
        #090d13;
    overflow: hidden;
    position: relative;
}

.project-featured .project-visual { height: 300px; }

.project-card h3 {
    margin-bottom: 8px;
    font-size: 22px;
    letter-spacing: -.025em;
}
.project-card p { color: var(--muted); }
.project-stack { display: flex; flex-wrap: wrap; gap: 7px; }

.dashboard-mockup { display: flex; padding: 16px; gap: 14px; }
.dash-sidebar {
    width: 47px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.02);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
    padding-top: 18px;
}
.dash-sidebar i {
    width: 15px; height: 15px; border: 1px solid rgba(85,247,176,.22); border-radius: 4px;
}
.dash-main { flex: 1; }
.dash-header { height: 25px; width: 36%; background: rgba(255,255,255,.055); border-radius: 5px; margin: 3px 0 18px; }
.dash-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dash-cards i { height: 54px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.dash-chart {
    height: 120px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; position: relative; padding: 12px;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 100% 25%;
}
.dash-chart svg { width: 100%; height: 100%; }
.dash-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(85,247,176,.3)); }

.browser-mockup { padding: 15px; }
.browser-bar { height: 30px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3d4753; }
.browser-bar b { width: 47%; height: 8px; margin-left: 10px; border-radius: 8px; background: rgba(255,255,255,.045); }
.browser-content { padding: 22px 10px; display: grid; gap: 13px; }
.browser-content div:nth-child(1) { width: 55%; height: 13px; border-radius: 6px; background: rgba(85,247,176,.22); }
.browser-content div:nth-child(2) { width: 86%; height: 8px; border-radius: 6px; background: rgba(255,255,255,.06); }
.browser-content div:nth-child(3) { width: 72%; height: 70px; border: 1px solid var(--line); border-radius: 8px; }

.nodes-mockup svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nodes-mockup line { stroke: rgba(85,247,176,.25); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; }
.node {
    width: 45px; height: 45px; display: grid; place-items: center; position: absolute; z-index: 2;
    border-radius: 50%; border: 1px solid rgba(85,247,176,.25); color: var(--accent);
    background: #0d131a; box-shadow: 0 0 24px rgba(85,247,176,.06); font: 700 9px/1 monospace;
}
.n1 { left: 13%; top: 14%; } .n2 { left: 44%; top: 38%; }
.n3 { right: 12%; top: 12%; } .n4 { right: 17%; bottom: 11%; }

.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}

.process-step {
    padding: 30px 28px 10px 0;
    min-height: 250px;
    position: relative;
}

.process-step:not(:last-child) {
    border-right: 1px solid var(--line);
    padding-right: 28px;
    margin-right: 28px;
}

.step-number {
    display: inline-flex;
    margin-bottom: 55px;
    color: var(--accent);
    font: 700 11px/1 ui-monospace, monospace;
}
.process-step h3 { font-size: 21px; margin-bottom: 8px; }
.process-step p { margin: 0; color: var(--muted); font-size: 14px; }

.contact-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 28%, rgba(85,247,176,.075), transparent 27%),
        radial-gradient(circle at 88% 75%, rgba(40,191,255,.055), transparent 28%);
}

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

.contact-copy h2 {
    margin: 14px 0 18px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.03;
    letter-spacing: -.045em;
}
.contact-copy > p { color: var(--muted); max-width: 490px; }

.contact-links { margin-top: 38px; display: grid; gap: 12px; }
.contact-links a {
    display: flex; flex-direction: column; gap: 3px; width: fit-content;
}
.contact-links span { color: #5f6c7b; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.contact-links strong { font-size: 17px; font-weight: 600; transition: color .2s; }
.contact-links a:hover strong { color: var(--accent); }

.contact-form {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(7, 10, 15, .68);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: block; margin-bottom: 15px; }
.contact-form label > span {
    display: inline-block; margin-bottom: 7px; color: #7c8897;
    font: 650 10px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--text);
    background: rgba(255,255,255,.025);
    padding: 13px 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.contact-form textarea { resize: vertical; min-height: 135px; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #65717f 50%), linear-gradient(135deg, #65717f 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.contact-form option { background: #0c1118; color: var(--text); }

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(85,247,176,.35);
    background: rgba(85,247,176,.025);
    box-shadow: 0 0 0 3px rgba(85,247,176,.05);
}

.contact-form [aria-invalid="true"] { border-color: rgba(255,110,125,.55); }
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.form-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.form-bottom p {
    max-width: 350px;
    margin: 0;
    color: #596675;
    font-size: 11px;
}
.form-status {
    min-height: 22px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 13px;
}
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }

.footer { padding: 28px 0; }
.footer-inner {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #64707f;
    font-size: 12px;
}
.footer-inner p { margin: 0; }
.brand-footer { color: var(--text); transform: scale(.9); transform-origin: left center; }

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-code { max-width: 680px; }
    .tech-layout, .contact-grid { grid-template-columns: 1fr; gap: 45px; }
    .tech-layout .section-heading { margin-bottom: 0; }
    .process { grid-template-columns: repeat(2,1fr); }
    .process-step:nth-child(2) { border-right: 0; margin-right: 0; }
}

@media (max-width: 780px) {
    :root { --header-h: 68px; }
    .container { width: min(calc(100% - 28px), var(--container)); }
    .nav-toggle { display: flex; z-index: 10002;}
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 10001;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        padding:
            calc(var(--header-h) + 45px)
            28px
            40px;
        background:
            rgba(8, 11, 16, .985);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            transform .35s cubic-bezier(.7, 0, .2, 1),
            opacity .25s ease,
            visibility .35s ease;
    }
    body.menu-open .nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .nav-cta { font-size: 18px; }

    .hero { padding-top: calc(var(--header-h) + 55px); }
    h1 { font-size: clamp(44px, 14vw, 69px); }
    .hero-meta { display: none; }
    .code-block { font-size: 11px; padding: 22px 16px 16px; }
    .floating-chip { display: none; }
    .section { padding: 84px 0; }
    .section-heading { margin-bottom: 36px; }

    .services-grid, .project-grid { grid-template-columns: 1fr; }
    .project-featured { grid-row: auto; }
    .project-featured .project-visual { height: 235px; }

    .process { grid-template-columns: 1fr; }
    .process-step,
    .process-step:not(:last-child) {
        margin: 0;
        padding: 24px 0;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .step-number { margin-bottom: 28px; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-bottom { align-items: stretch; flex-direction: column; }
    .form-bottom .btn { width: 100%; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (max-width: 520px) {
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .code-window { border-radius: 13px; }
    .code-block { font-size: 10.3px; line-height: 1.65; }
    .window-bar { padding-inline: 11px; }
    .window-status { display: none; }
    .service-card { padding: 25px; }
    .contact-form { padding: 20px; }
    .project-card { padding: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    #tech-network { display: none; }
}


/* ===== Moje projekty ===== */
.portfolio-section {
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(40,191,255,.04), transparent 26%);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.portfolio-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12, 17, 24, .72);
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    border-color: rgba(85,247,176,.20);
    box-shadow: 0 24px 70px rgba(0,0,0,.26);
}

.portfolio-preview {
    display: block;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 50% 20%, rgba(85,247,176,.06), transparent 38%),
        #090d13;
}

.portfolio-preview > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.portfolio-card:hover .portfolio-preview > img {
    transform: scale(1.025);
    filter: brightness(.72);
}

.portfolio-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    position: relative;
    color: #465260;
    background-image:
        linear-gradient(rgba(255,255,255,.023) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.023) 1px, transparent 1px);
    background-size: 35px 35px;
}

.portfolio-placeholder::before,
.portfolio-placeholder::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    border-color: rgba(85,247,176,.18);
    border-style: solid;
}

.portfolio-placeholder::before {
    left: 24px;
    top: 24px;
    border-width: 1px 0 0 1px;
}

.portfolio-placeholder::after {
    right: 24px;
    bottom: 24px;
    border-width: 0 1px 1px 0;
}

.portfolio-placeholder span {
    color: var(--accent);
    font: 700 10px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.portfolio-placeholder strong {
    color: #d9e0e7;
    font: 700 52px/.95 ui-monospace, monospace;
    letter-spacing: -.08em;
}

.portfolio-placeholder small {
    color: #566270;
    font: 600 10px/1.4 ui-monospace, monospace;
}

.portfolio-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    color: #06120c;
    background:
        linear-gradient(to top, rgba(85,247,176,.88), rgba(85,247,176,.18) 38%, transparent 68%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    font-weight: 800;
}

.portfolio-card:hover .portfolio-preview-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-preview-overlay i {
    font-style: normal;
    font-size: 26px;
}

.portfolio-content {
    padding: 25px;
}

.portfolio-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
    color: #5f6c7a;
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .11em;
}

.portfolio-topline a {
    color: var(--accent);
    transition: opacity .2s ease;
}

.portfolio-topline a:hover {
    opacity: .7;
}

.portfolio-content h3 {
    margin-bottom: 9px;
    font-size: 23px;
    letter-spacing: -.025em;
}

.portfolio-content > p {
    min-height: 48px;
    margin-bottom: 19px;
    color: var(--muted);
}

.portfolio-stack {
    gap: 7px;
}

@media (max-width: 780px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-preview-overlay {
        opacity: 1;
        transform: none;
        background: linear-gradient(to top, rgba(0,0,0,.67), transparent 55%);
        color: var(--text);
        padding: 18px;
    }

    .portfolio-content > p {
        min-height: 0;
    }
}

/* =========================================================
   O MNIE
   ========================================================= */

.about-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(85, 247, 176, .055),
            transparent 30%
        );
}

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


/* ===== lewa karta ===== */

.about-code-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            transparent 100px
        ),
        rgba(8,12,17,.75);

    box-shadow: var(--shadow);

    overflow: hidden;
    position: relative;

    backdrop-filter: blur(12px);
}


.about-code-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 50%;
    top: 60px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(85,247,176,.12),
            transparent 65%
        );

    pointer-events: none;
}


.about-code-head {
    height: 48px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

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

    color: #697585;

    font:
        600 10px/1
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}


.about-code-head span:last-child {
    color: var(--accent);
}


.about-avatar {
    width: 210px;
    height: 210px;

    margin: 55px auto 42px;

    position: relative;

    display: grid;
    place-items: center;
}


.about-avatar::before,
.about-avatar::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;
}


.about-avatar::before {
    border: 1px solid rgba(85,247,176,.25);

    animation: aboutRotate 12s linear infinite;
}


.about-avatar::after {
    inset: 15px;

    border: 1px dashed rgba(85,247,176,.15);

    animation: aboutRotate 16s linear infinite reverse;
}


.about-avatar img {
    width: 150px;
    height: 150px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    border: 2px solid rgba(85,247,176,.35);

    box-shadow:
        0 0 30px rgba(85,247,176,.16),
        0 0 0 6px rgba(85,247,176,.03);
}


@keyframes aboutRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.about-code {
    padding: 0 30px 34px;

    display: grid;

    gap: 11px;

    font:
        500 12px/1.5
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}


.about-code > div {
    display: flex;
    gap: 10px;
}


.code-key {
    color: #798695;

    min-width: 95px;
}


.code-value {
    color: #c7d0da;
}


.code-success {
    color: var(--accent);
}


/* ===== prawa strona ===== */

.about-content h2 {
    margin: 14px 0 22px;

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

    line-height: 1.04;

    letter-spacing: -.045em;
}


.about-content > p {
    max-width: 720px;

    color: var(--muted);

    font-size: 15px;

    margin-bottom: 14px;
}


.about-content .about-lead {
    color: #c8d0d8;

    font-size: 18px;

    line-height: 1.6;
}


/* ===== specjalizacje ===== */

.about-specializations {
    display: grid;

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

    gap: 1px;

    margin-top: 34px;

    background: var(--line);

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


.about-specializations > div {
    padding: 19px;

    background: var(--bg);

    display: flex;
    flex-direction: column;

    gap: 4px;

    transition:
        background .2s ease;
}


.about-specializations > div:hover {
    background:
        rgba(85,247,176,.035);
}


.about-specializations strong {
    color: #dce3e9;

    font-size: 14px;
}


.about-specializations span {
    color: #647180;

    font-size: 11px;
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.social-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.social-link {
    flex: 1;

    min-width: 160px;

    min-height: 68px;

    padding: 12px 14px;

    display: flex;
    align-items: center;

    gap: 12px;

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

    border-radius: 11px;

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

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.social-link:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(85,247,176,.25);

    background:
        rgba(85,247,176,.035);
}


.social-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 9px;

    border: 1px solid rgba(85,247,176,.18);

    color: var(--accent);

    background: rgba(85,247,176,.05);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.social-icon i {
    font-size: 20px;
    line-height: 1;
}


.social-link:hover .social-icon {
    color: #04100b;

    background: var(--accent);

    border-color: var(--accent);

    transform: scale(1.05);
}


.social-link > span:nth-child(2) {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.social-link small {
    color: #5d6977;

    font:
        700 8px/1
        ui-monospace,
        monospace;

    letter-spacing: .12em;
}


.social-link strong {
    color: #dbe2e8;

    font-size: 13px;

    font-weight: 650;
}


.social-arrow {
    margin-left: auto;

    color: #566270;

    font-size: 15px;

    transition:
        color .2s ease,
        transform .2s ease;
}


.social-link:hover .social-arrow {
    color: var(--accent);

    transform: translate(2px,-2px);
}


/* ===== responsive ===== */

@media (max-width: 950px) {

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

        gap: 50px;
    }


    .about-visual {
        max-width: 520px;
    }

}


@media (max-width: 600px) {

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


    .social-links {
        flex-direction: column;
    }


    .social-link {
        width: 100%;
    }


    .about-code {
        padding-left: 20px;
        padding-right: 20px;
    }

}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 18px;
}


.footer-socials a {
    color: #687585;

    font-size: 12px;

    transition:
        color .2s ease;
}


.footer-socials a:hover {
    color: var(--accent);
}


@media (max-width: 780px) {

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

}


.brand-logo-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    border: none;
    background: transparent;
    box-shadow: none;
}

.brand-logo {
    display: block;
    width: auto;
    height: 42px;
    max-width: 220px;
    object-fit: contain;

    filter:drop-shadow(0px 0px 8px rgba(26, 188, 156, 1));
}

.brand-logo-shell-footer {
    padding: 8px 12px;
    min-height: 48px;
}

.brand-logo-footer {
    height: 38px;
}

@media (max-width: 780px) {
    .brand-logo-shell {
        padding: 8px 12px;
        min-height: 48px;
        border-radius: 12px;
    }

    .brand-logo {
        height: 36px;
        max-width: 180px;
    }

    .brand-logo-shell-footer {
        padding: 7px 10px;
        min-height: 44px;
    }

    .brand-logo-footer {
        height: 34px;
    }
}


/* =========================================================
   COOKIE CONSENT
   ========================================================= */

.cookie-consent {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9998;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(30px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}


.cookie-consent.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.cookie-consent-box {
    width: min(1180px, 100%);

    margin: 0 auto;

    padding: 22px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    border:

        1px solid
        rgba(255,255,255,.10);

    border-radius: 18px;

    background:
        rgba(10,15,21,.94);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.50);

    backdrop-filter:
        blur(20px);
}


/* ikonka */

.cookie-consent-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: var(--accent);

    background:
        rgba(85,247,176,.06);

    border:
        1px solid
        rgba(85,247,176,.18);

    font-size: 21px;
}


/* tekst */

.cookie-label {
    display: block;

    margin-bottom: 7px;

    color: var(--accent);

    font:
        700 9px/1
        ui-monospace,
        monospace;

    letter-spacing: .14em;
}


.cookie-consent-content h3 {
    margin-bottom: 6px;

    font-size: 18px;
}


.cookie-consent-content p {
    margin: 0;

    max-width: 700px;

    color: #8a96a4;

    font-size: 12px;

    line-height: 1.6;
}


.cookie-policy-link {
    margin-top: 5px !important;
}


.cookie-policy-link a {
    color: #bdc7d1;

    text-decoration: underline;

    text-decoration-color:
        rgba(85,247,176,.35);

    text-underline-offset: 3px;
}


/* przyciski */

.cookie-consent-actions {
    display: flex;

    gap: 8px;
}


.cookie-btn {
    min-height: 42px;

    padding: 0 15px;

    border-radius: 9px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    border:
        1px solid
        transparent;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


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


.cookie-btn-primary {
    color: #04100b;

    background:
        var(--accent);

    border-color:
        var(--accent);
}


.cookie-btn-secondary {
    color: #a9b4bf;

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

    border-color:
        var(--line);
}


.cookie-btn-settings {
    color: #d2dae1;

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

    border-color:
        var(--line);
}


/* =========================================================
   COOKIE MODAL
   ========================================================= */

.cookie-settings-modal {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: grid;
    place-items: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

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


.cookie-settings-modal.active {
    opacity: 1;
    visibility: visible;
}


.cookie-settings-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(2,5,8,.80);

    backdrop-filter:
        blur(6px);
}


.cookie-settings-window {
    width:
        min(620px, 100%);

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    position: relative;

    z-index: 1;

    border-radius: 20px;

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

    background:
        #0c1118;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.55);
}


.cookie-settings-header {
    padding: 25px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

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


.cookie-settings-header h3 {
    margin: 0;

    font-size: 23px;
}


.cookie-close {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    cursor: pointer;

    border-radius: 8px;

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

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

    color: #8994a1;

    font-size: 22px;
}


/* kategorie */

.cookie-settings-body {
    padding: 5px 25px;
}


.cookie-category {
    padding: 24px 0;

    display: flex;

    justify-content:
        space-between;

    gap: 30px;

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


.cookie-category:last-child {
    border-bottom: 0;
}


.cookie-category-info strong {
    display: inline-block;

    margin-right: 8px;

    color: #dce3e9;

    font-size: 14px;
}


.cookie-category-info p {
    max-width: 440px;

    margin:
        8px 0 0;

    color: #778493;

    font-size: 12px;

    line-height: 1.55;
}


.cookie-required {
    color: var(--accent);

    font:
        700 9px/1
        ui-monospace,
        monospace;
}


/* switch */

.cookie-switch {
    position: relative;

    width: 45px;
    height: 25px;

    flex-shrink: 0;

    margin-top: 2px;
}


.cookie-switch input {
    position: absolute;

    opacity: 0;
}


.cookie-switch span {
    position: absolute;

    inset: 0;

    cursor: pointer;

    border-radius: 20px;

    background:
        #252d37;

    transition:
        background .2s ease;
}


.cookie-switch span::before {
    content: "";

    position: absolute;

    width: 19px;
    height: 19px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background:
        #8994a0;

    transition:
        transform .2s ease,
        background .2s ease;
}


.cookie-switch input:checked + span {
    background:
        rgba(85,247,176,.22);
}


.cookie-switch input:checked + span::before {
    transform:
        translateX(20px);

    background:
        var(--accent);
}


.cookie-switch-disabled {
    opacity: .65;
}


/* footer */

.cookie-settings-footer {
    padding: 20px 25px;

    display: flex;

    justify-content:
        flex-end;

    gap: 10px;

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


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

@media (max-width: 800px) {

    .cookie-consent {
        padding: 10px;
    }


    .cookie-consent-box {
        grid-template-columns:
            auto 1fr;

        padding: 18px;
    }


    .cookie-consent-actions {
        grid-column:
            1 / -1;

        width: 100%;
    }


    .cookie-consent-actions
    .cookie-btn {
        flex: 1;
    }

}


@media (max-width: 520px) {

    .cookie-consent-icon {
        display: none;
    }


    .cookie-consent-box {
        grid-template-columns: 1fr;
    }


    .cookie-consent-actions {
        flex-direction: column;
    }


    .cookie-category {
        gap: 15px;
    }


    .cookie-settings-footer {
        flex-direction: column;
    }


    .cookie-settings-footer
    .cookie-btn {
        width: 100%;
    }

}

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


.footer-links a {
    color: #64707f;

    font-size: 11px;

    transition:
        color .2s ease;
}


.footer-links a:hover {
    color: var(--accent);
}


/* =========================================================
   CENNIK
   ========================================================= */

.pricing-section {
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(85,247,176,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(40,191,255,.035),
            transparent 26%
        );
}


.pricing-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 36px;

    padding: 6px;

    width: fit-content;

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

    border-radius: 12px;

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


.pricing-tab {
    min-height: 44px;

    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    color: #7e8a98;

    background: transparent;

    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.pricing-tab:hover {
    color: #d7dee5;
}


.pricing-tab.active {
    color: #06120c;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            #8effc8
        );

    box-shadow:
        0 8px 25px
        rgba(85,247,176,.12);
}


.pricing-panel {
    display: none;
}


.pricing-panel.active {
    display: block;
}


.pricing-grid {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


.pricing-card {
    position: relative;

    min-width: 0;

    padding: 30px;

    display: flex;
    flex-direction: column;

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

    border-radius:
        var(--radius);

    background:
        rgba(12,17,24,.72);

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


.pricing-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(85,247,176,.20);

    background:
        rgba(15,21,29,.90);

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


.pricing-card-featured {
    border-color:
        rgba(85,247,176,.28);

    background:
        linear-gradient(
            180deg,
            rgba(85,247,176,.045),
            rgba(12,17,24,.82) 35%
        );

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.22);
}


.pricing-badge {
    position: absolute;

    top: 20px;
    right: 20px;

    padding: 6px 8px;

    border-radius: 6px;

    color:
        var(--accent);

    background:
        rgba(85,247,176,.07);

    border:
        1px solid
        rgba(85,247,176,.15);

    font:
        700 8px/1
        ui-monospace,
        monospace;

    letter-spacing:
        .10em;
}


.pricing-label {
    display: block;

    margin-bottom: 18px;

    color:
        var(--accent);

    font:
        700 10px/1
        ui-monospace,
        monospace;

    letter-spacing:
        .14em;
}


.pricing-card h3 {
    margin-bottom: 9px;

    font-size: 24px;

    letter-spacing: -.025em;
}


.pricing-card-top > p {
    min-height: 70px;

    margin-bottom: 0;

    color:
        var(--muted);

    font-size: 13px;
}


.pricing-price {
    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        28px 0
        25px;

    padding-bottom: 23px;

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


.pricing-price small {
    color:
        #596675;

    font-size: 11px;
}


.pricing-price strong {
    color:
        #eef3f7;

    font-size:
        clamp(30px, 3vw, 40px);

    letter-spacing:
        -.04em;

    line-height: 1;
}


.pricing-price span {
    color:
        #657180;

    font-size: 10px;
}


.pricing-price-custom strong {
    font-size: 25px;
}


.pricing-card ul {
    list-style: none;

    margin:
        0 0 30px;

    padding: 0;

    display: grid;

    gap: 11px;
}


.pricing-card li {
    position: relative;

    padding-left: 20px;

    color:
        #a4aeb9;

    font-size: 13px;

    line-height: 1.45;
}


.pricing-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color:
        var(--accent);

    font-weight: 700;
}


.pricing-card .btn {
    width: 100%;

    margin-top: auto;
}


.pricing-note {
    margin-top: 25px;

    color:
        #626f7d;

    font-size: 11px;
}


.pricing-note span {
    color:
        var(--accent);
}


@media (max-width: 950px) {

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


    .pricing-card-top > p {
        min-height: auto;
    }


    .pricing-card-featured {
        order: -1;
    }

}


@media (max-width: 600px) {

    .pricing-tabs {
        width: 100%;

        display: grid;

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

    .pricing-tab {
        width: 100%;

        min-height: 46px;

        padding: 0 8px;

        font-size: 11px;
    }

}

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

.thank-you-page {
    min-height: 100svh;

    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 60px 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(85,247,176,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(40,191,255,.06),
            transparent 30%
        ),
        var(--bg);
}


.thank-you-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .32;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}


.thank-you-box {
    position: relative;
    z-index: 2;

    width: min(720px, 100%);

    margin: 0 auto;

    padding: 60px;

    text-align: center;

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

    border-radius: 22px;

    background:
        rgba(10,15,21,.82);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.38);

    backdrop-filter:
        blur(16px);
}


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

    display: grid;
    place-items: center;

    margin:
        28px auto
        26px;

    border-radius: 50%;

    border:
        1px solid
        rgba(85,247,176,.30);

    color:
        var(--accent);

    background:
        rgba(85,247,176,.06);

    box-shadow:
        0 0 45px
        rgba(85,247,176,.10);

    font-size: 34px;
    font-weight: 700;
}


.thank-you-box h1 {
    margin-bottom: 18px;

    font-size:
        clamp(36px, 6vw, 58px);

    line-height: 1.05;

    letter-spacing: -.045em;
}


.thank-you-lead {
    max-width: 560px;

    margin:
        0 auto
        28px;

    color:
        var(--muted);

    font-size: 17px;
}


.thank-you-status {
    width: fit-content;

    margin:
        0 auto
        34px;

    display: flex;
    align-items: center;

    gap: 9px;

    color:
        #aeb8c2;

    font:
        600 11px/1
        ui-monospace,
        monospace;

    letter-spacing: .05em;
}


.thank-you-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--accent);

    box-shadow:
        0 0 12px
        rgba(85,247,176,.6);
}


.thank-you-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


@media (max-width: 600px) {

    .thank-you-page {
        padding: 20px 0;
    }

    .thank-you-box {
        padding:
            42px
            22px;
    }

    .thank-you-actions {
        flex-direction: column;
    }

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

}

/* =========================================================
   FLOATING CONTACT — LIGHT / NEON VERSION
   ========================================================= */

.floating-contact {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 9000;

    min-width: 215px;
    min-height: 70px;

    padding: 10px 17px 10px 10px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 19px;

    color: #07120d;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(239,255,248,.98) 0%,
            rgba(199,255,228,.97) 48%,
            rgba(139,255,202,.96) 100%
        );

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

    box-shadow:
        0 18px 55px rgba(0,0,0,.40),
        0 0 0 1px rgba(85,247,176,.18),
        0 0 45px rgba(85,247,176,.30);

    overflow: hidden;

    isolation: isolate;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        filter .28s ease;
}


/* =========================================================
   ANIMOWANA POŚWIATA POD PRZYCISKIEM
   ========================================================= */

.floating-contact-glow {
    position: absolute;

    inset: -25px;

    z-index: -2;

    border-radius: 40px;

    background:
        radial-gradient(
            circle at center,
            rgba(85,247,176,.48),
            rgba(85,247,176,.16) 45%,
            transparent 70%
        );

    filter:
        blur(16px);

    opacity: .75;

    animation:
        floatingContactGlow 2.8s
        ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   ANIMOWANA OBRAMÓWKA
   ========================================================= */

.floating-contact::before {
    content: "";

    position: absolute;

    inset: -2px;

    z-index: -1;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--contact-angle),
            #55f7b0,
            #7cfac0,
            #5acbff,
            #ffffff,
            #55f7b0
        );

    animation:
        floatingContactBorder 4s
        linear infinite;
}


/* wewnętrzne jasne tło */

.floating-contact::after {
    content: "";

    position: absolute;

    inset: 1px;

    z-index: -1;

    border-radius:
        calc(19px - 1px);

    background:
        linear-gradient(
            135deg,
            #f3fff9 0%,
            #d7ffec 45%,
            #9effd1 100%
        );

    pointer-events: none;
}


/* =========================================================
   IKONA
   ========================================================= */

.floating-contact-icon {
    position: relative;

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #dffff0;

    background:
        linear-gradient(
            135deg,
            #08150f,
            #0f2a1d
        );

    box-shadow:
        0 9px 26px
        rgba(0,0,0,.28),
        inset 0 0 0 1px
        rgba(255,255,255,.06);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


.floating-contact-icon::before {
    content: "";

    position: absolute;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(85,247,176,.22),
            transparent 70%
        );

    filter:
        blur(5px);
}


.floating-contact-icon svg {
    position: relative;

    z-index: 1;

    display: block;
}


/* =========================================================
   TEKST
   ========================================================= */

.floating-contact-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    line-height: 1;
}


.floating-contact-status {
    display: flex;
    align-items: center;

    gap: 6px;

    color: rgba(6,36,23,.60);

    font:
        750 9px/1
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.floating-contact-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #07985c;

    box-shadow:
        0 0 0 4px
        rgba(7,152,92,.10),
        0 0 12px
        rgba(7,152,92,.45);

    animation:
        floatingContactDot 1.8s
        ease-in-out infinite;
}


.floating-contact-title {
    color: #06130c;

    font-size: 16px;
    font-weight: 800;

    letter-spacing:
        -.025em;
}


/* =========================================================
   STRZAŁKA
   ========================================================= */

.floating-contact-arrow {
    margin-left: auto;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #dffff0;

    background:
        rgba(6,27,18,.92);

    font-size: 17px;

    transition:
        transform .28s ease,
        background .28s ease;
}


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

.floating-contact:hover {
    transform:
        translateY(-7px)
        scale(1.025);

    filter:
        brightness(1.04);

    box-shadow:
        0 24px 75px
        rgba(0,0,0,.48),
        0 0 55px
        rgba(85,247,176,.42);
}


.floating-contact:hover
.floating-contact-icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 11px 32px
        rgba(0,0,0,.32),
        0 0 24px
        rgba(85,247,176,.22);
}


.floating-contact:hover
.floating-contact-arrow {
    transform:
        translateX(4px);

    background:
        #06130c;
}


.floating-contact:active {
    transform:
        translateY(-2px)
        scale(.99);
}


.floating-contact:focus-visible {
    outline:
        3px solid
        rgba(85,247,176,.75);

    outline-offset: 5px;
}


/* =========================================================
   ANIMACJE
   ========================================================= */

@property --contact-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


@keyframes floatingContactBorder {

    from {
        --contact-angle: 0deg;
    }

    to {
        --contact-angle: 360deg;
    }

}


@keyframes floatingContactGlow {

    0%,
    100% {
        opacity: .55;
        transform: scale(.94);
    }

    50% {
        opacity: .95;
        transform: scale(1.05);
    }

}


@keyframes floatingContactDot {

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

    50% {
        opacity: .55;
        transform: scale(.72);
    }

}


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

@media (max-width: 600px) {

    .floating-contact {
        right: 16px;
        bottom: 16px;

        min-width: 0;
        min-height: 0;

        width: 64px;
        height: 64px;

        padding: 7px;

        border-radius: 19px;
    }


    .floating-contact::after {
        border-radius: 18px;
    }


    .floating-contact-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .floating-contact-content,
    .floating-contact-arrow {
        display: none;
    }

}


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

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

    .floating-contact::before,
    .floating-contact-glow,
    .floating-contact-dot {
        animation: none;
    }

}