/* iNTENS – site.css
   Színek a logóból: cián #22c3e6, kék #2f6fe0, sötét palakék #1f3a4d */
:root {
    --bg: #f3f8fb;
    --card: #fff;
    --ink: #12283a;
    --mut: #506678;
    --line: #d5e2ea;
    --navy: #1f3a4d;
    --blue: #2f6fe0;
    --accent: #2f6fe0;
    --cyan: #22c3e6;
    --tint: #e0f5fb;
    --amb: #f0a500;
    --r: 14px;
    color-scheme: light;
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a1822;
        --card: #11252f;
        --ink: #e6f1f5;
        --mut: #93aab6;
        --line: #234352;
        --accent: #5aa2ff;
        --tint: #12363f;
        color-scheme: dark
    }
}

:root[data-theme="dark"] {
    --bg: #0a1822;
    --card: #11252f;
    --ink: #e6f1f5;
    --mut: #93aab6;
    --line: #234352;
    --accent: #5aa2ff;
    --tint: #12363f;
    color-scheme: dark
}

*, *::before, *::after {
    box-sizing: border-box
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}

a {
    color: inherit
}

h1, h2, h3 {
    line-height: 1.12;
    margin: 0;
    letter-spacing: -.02em
}

h1 {
    font-size: clamp(2.3rem,5.4vw,4rem);
    font-weight: 800
}

h2 {
    font-size: clamp(1.7rem,3.4vw,2.5rem);
    font-weight: 800;
    max-width: 22ch
}

h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em
}

p {
    margin: 0
}

section {
    padding: 84px 0
}

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 22px
}

.lead {
    color: var(--mut);
    max-width: 60ch;
    margin-top: 14px
}

    .lead b {
        color: var(--ink)
    }

.mt-md {
    margin-top: 16px
}

.mt-lg {
    margin-top: 44px
}

.mt-xl {
    margin-top: 70px
}

/* Fejléc */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

nav {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 68px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.35rem;
    text-decoration: none;
    letter-spacing: -.03em
}

    .logo img {
        height: 36px;
        display: block
    }

    .logo i {
        font-style: normal;
        color: var(--accent)
    }

.menu {
    display: flex;
    gap: 22px;
    margin-left: 12px
}

    .menu a {
        font-size: 12px !important;
        text-decoration: none;
        font-weight: 500;
        color: var(--mut);
        font-size: .96rem;
        padding: 4px 0;
        border-bottom: 2px solid transparent
    }

        .menu a:hover {
            color: var(--ink);
            border-color: var(--cyan)
        }

.sp {
    flex: 1
}

.show-m {
    display: none
}

.btn {
    font-size: 12px !important;
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: .95rem;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit
}

    .btn.pri {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff
    }

        .btn.pri:hover {
            filter: brightness(1.1)
        }

    .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 2px
    }

.burger {
    display: none;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    cursor: pointer
}

/* Hero */
.hero {
    padding: 64px 0 72px
}

.hgrid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 48px;
    align-items: center
}

.hero p.lead {
    font-size: 1.12rem
}

.cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
}

.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 26px
}

.tag {
    font-size: .85rem;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--tint);
    color: var(--accent);
    font-weight: 500
}

.dash {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 50px -24px rgba(31,58,77,.4)
}

.dtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

    .dtabs button {
        border: 1px solid var(--line);
        background: transparent;
        color: var(--mut);
        padding: 6px 13px;
        border-radius: 99px;
        font: 500 .85rem inherit;
        font-family: inherit;
        cursor: pointer
    }

        .dtabs button[aria-pressed=true] {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy)
        }

.kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 14px 0
}

.kpi {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px
}

    .kpi small {
        color: var(--mut);
        display: block;
        font-size: .76rem
    }

    .kpi b {
        font-size: 1.35rem;
        letter-spacing: -.02em
    }

        .kpi b span {
            font-size: .8rem;
            font-weight: 500;
            color: var(--mut)
        }

.chart {
    width: 100%;
    height: auto;
    display: block
}

.alert {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    font-size: .88rem;
    background: color-mix(in srgb,var(--amb) 16%,transparent);
    border-radius: 10px;
    padding: 9px 12px
}

    .alert::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--amb);
        flex: none
    }

.chart-line {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2.5;
    stroke-linejoin: round
}

.chart-area {
    fill: var(--cyan);
    opacity: .16
}

.chart-grid {
    stroke: var(--line)
}

.chart-lbl {
    font-size: 11px;
    fill: var(--mut);
    text-anchor: middle
}

.chart-dot {
    fill: var(--amb)
}

/* Mit mérünk */
.mm {
    background: var(--card);
    border-block: 1px solid var(--line);
    padding: 40px 0
}

    .mm h2 {
        max-width: none;
        font-size: clamp(1.4rem,2.6vw,1.9rem)
    }

.chips {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-top: 22px
}

.chip {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 500;
    background: var(--bg)
}

    .chip.main {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
        font-weight: 700
    }

    .chip svg, .ic svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none
    }

    .chip svg {
        width: 22px;
        height: 22px
    }

/* Mutatók */
.stats {
    background: var(--navy);
    color: #eaf3f6;
    padding: 44px 0
}

.sgrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px
}

    .sgrid b {
        display: block;
        font-size: clamp(2rem,4vw,3rem);
        font-weight: 800;
        letter-spacing: -.03em;
        color: #fff
    }

    .sgrid span {
        color: #a8c0cc;
        font-size: .95rem
    }

/* Kártyák */
.grid {
    display: grid;
    gap: 16px;
    margin-top: 38px
}

.g2 {
    grid-template-columns: repeat(2,1fr)
}

.g3 {
    grid-template-columns: repeat(3,1fr)
}

.g4 {
    grid-template-columns: repeat(4,1fr)
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px
}

    .card p {
        color: var(--mut);
        font-size: .94rem;
        margin-top: 8px
    }

.ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tint);
    color: var(--accent);
    display: grid;
    place-items: center;
    margin-bottom: 14px
}

    .ic svg {
        width: 22px;
        height: 22px
    }

.wide {
    grid-column: span 2
}

.alt {
    background: var(--card);
    border-block: 1px solid var(--line)
}

    .alt .card {
        background: var(--bg)
    }

.charts .card {
    padding: 18px
}

.charts svg {
    width: 100%;
    height: auto;
    margin-top: 10px
}

.f-cyan {
    fill: var(--cyan)
}

.f-blue {
    fill: var(--blue)
}

.f-amb {
    fill: var(--amb)
}

.f-ink {
    fill: var(--navy)
}

.s-cyan {
    stroke: var(--cyan)
}

.s-blue {
    stroke: var(--blue)
}

.s-amb {
    stroke: var(--amb)
}

.nofill {
    fill: none
}

.dash-line {
    fill: none;
    stroke: var(--amb);
    stroke-dasharray: 3 3
}

/* Folyamat */
.steps {
    counter-reset: s;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 38px
}

.step {
    border-top: 3px solid var(--cyan);
    padding-top: 14px;
    counter-increment: s
}

    .step h3::before {
        content: counter(s) ". ";
        color: var(--accent)
    }

    .step p {
        color: var(--mut);
        font-size: .93rem;
        margin-top: 6px
    }

.partners {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-top: 30px
}

    .partners span {
        padding: 12px 22px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--card);
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--mut)
    }

blockquote {
    margin: 0;
    font-size: 1.02rem
}

.who {
    margin-top: 16px;
    font-size: .88rem;
    color: var(--mut)
}

    .who b {
        display: block;
        color: var(--ink)
    }

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

    .ai ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px
    }

    .ai li {
        padding-left: 28px;
        position: relative
    }

        .ai li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .5em;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: var(--cyan)
        }

        .ai li b {
            display: block
        }

        .ai li span {
            color: var(--mut);
            font-size: .94rem
        }

.checks {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 10px
}

    .checks li::before {
        content: "✓";
        color: var(--accent);
        font-weight: 800;
        margin-right: 10px
    }

/* Ajánlatkérés */
.quote {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px
}

form {
    display: grid;
    gap: 16px;
    margin-top: 6px
}

label {
    font-size: .88rem;
    font-weight: 500;
    display: grid;
    gap: 5px
}

input, select, textarea {
    font: inherit;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    width: 100%
}

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

.sl {
    display: grid;
    gap: 6px
}

    .sl .top {
        display: flex;
        justify-content: space-between;
        align-items: baseline
    }

    .sl output {
        font-weight: 800;
        font-size: 1.3rem;
        color: var(--accent)
    }

input[type=range] {
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--blue);
    height: 28px
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px
}

legend {
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: 6px;
    padding: 0
}

.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

    .opts label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 99px;
        padding: 7px 14px;
        cursor: pointer;
        font-weight: 500;
        background: var(--bg)
    }

    .opts input {
        width: auto;
        accent-color: var(--blue);
        margin: 0
    }

    .opts label:has(input:checked) {
        border-color: var(--blue);
        background: var(--tint);
        color: var(--accent)
    }

/* Lábléc */
.site-footer {
    padding: 44px 0;
    border-top: 1px solid var(--line);
    color: var(--mut);
    font-size: .92rem
}

.fgrid {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap
}

@media (max-width:900px) {
    .hgrid, .ai, .quote {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .g3, .g4 {
        grid-template-columns: repeat(2,1fr)
    }

    .sgrid, .steps, .chips {
        grid-template-columns: repeat(2,1fr)
    }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg);
        padding: 14px 22px;
        border-bottom: 1px solid var(--line);
        margin: 0
    }

        .menu.open {
            display: flex
        }

    .burger {
        display: block
    }

    .hide-m {
        display: none
    }

    .show-m {
        display: block
    }

    section {
        padding: 60px 0
    }
}

@media (max-width:560px) {
    .g2, .g3, .g4, .steps, .row, .chips {
        grid-template-columns: 1fr
    }

    .wide {
        grid-column: auto
    }

    .kpis {
        grid-template-columns: 1fr 1fr
    }

    .kpi:last-child {
        display: none
    }
}

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

    * {
        transition: none !important;
        animation: none !important
    }
}

/* GYIK */
.faq {
    display: grid;
    gap: 10px;
    margin-top: 32px;
    max-width: 820px
}

    .faq details {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px 18px
    }

    .faq summary {
        cursor: pointer;
        font-weight: 700;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 16px
    }

        .faq summary::after {
            content: "+";
            color: var(--accent);
            font-size: 1.3rem;
            line-height: 1
        }

    .faq details[open] summary::after {
        content: "–"
    }

    .faq p {
        color: var(--mut);
        margin-top: 10px;
        font-size: .96rem
    }

.prose {
    max-width: 760px
}

    .prose h2 {
        max-width: none;
        font-size: 1.5rem;
        margin-top: 40px
    }

    .prose p {
        margin-top: 12px;
        color: var(--mut)
    }

/* ---- Topológia animáció (témafüggő, a site.css változóit használja) ---- */
.t-panel {
    margin-top: 34px;
    overflow-x: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px
}

#topo {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
    overflow: visible
}

.t-wire-base {
    stroke: color-mix(in srgb,var(--ink) 18%,transparent);
    stroke-width: 6;
    fill: none;
    stroke-linecap: round
}

.t-wire-flow {
    stroke: var(--amb);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 6 14;
    animation: t-flow 1s linear infinite
}

.t-air path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-dasharray: 3 8;
    stroke-linecap: round;
    animation: t-flow 1.4s linear infinite
}

.t-net path {
    fill: none;
    stroke: color-mix(in srgb,var(--ink) 30%,transparent);
    stroke-width: 2.5
}

.t-node {
    transition: filter .25s
}

    .t-node.hit {
        filter: drop-shadow(0 0 10px var(--cyan))
    }

        .t-node.hit .t-box {
            stroke: var(--cyan)
        }

.t-box {
    fill: var(--card);
    stroke: var(--accent);
    stroke-width: 2
}

.t-slot {
    fill: color-mix(in srgb,var(--ink) 12%,transparent)
}

.t-clamp {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4
}

.t-hang, .t-ant {
    stroke: var(--accent);
    stroke-width: 3
}

.t-ant-dot {
    fill: var(--accent)
}

.t-ant-wave {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    animation: t-blink 1.4s infinite
}

.t-led {
    fill: var(--cyan);
    animation: t-blink 1.4s infinite
}

.t-l2 {
    animation-delay: .25s
}

.t-l3 {
    animation-delay: .5s
}

.t-bars {
    stroke: var(--blue);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none
}

.t-grid {
    stroke: var(--line);
    stroke-width: 1;
    fill: none
}

.t-c-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linejoin: round
}

.t-c-area {
    fill: var(--cyan);
    opacity: .2
}

.t-foot {
    fill: color-mix(in srgb,var(--ink) 25%,transparent)
}

.t-lbl {
    fill: var(--mut);
    font: 600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing: .08em;
    text-transform: uppercase
}

.t-cap {
    fill: var(--ink);
    font: 700 14px system-ui,sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase
}

.t-small {
    fill: var(--mut);
    font: 600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.t-val {
    fill: var(--accent);
    font: 700 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.t-pk {
    fill: var(--amb);
    stroke: var(--card);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 5px var(--amb))
}

.t-legend {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    color: var(--mut);
    font-size: .86rem;
    font-weight: 500
}

    .t-legend i {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px
    }

.t-k-wire {
    width: 26px;
    border-top: 3px dotted var(--amb)
}

.t-k-air {
    width: 26px;
    border-top: 2px dashed var(--cyan)
}

.t-k-net {
    width: 26px;
    border-top: 3px solid color-mix(in srgb,var(--ink) 30%,transparent)
}

.t-k-pk {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--amb)
}

.t-pause {
    display: block;
    margin: 26px auto 0
}

.t-panel.paused * {
    animation-play-state: paused !important
}

@keyframes t-flow {
    to {
        stroke-dashoffset: -22
    }
}

@keyframes t-blink {
    0%,100% {
        opacity: .3
    }

    50% {
        opacity: 1
    }
}