:root {
    --teal: #173F42;
    --mint: #9AD6C4;
    --paper: #F7F8F6;
    --slate: #4B5563;
    --warm: #E8A05A;
    --ink: #173039;
    --line: #dae5e0;
    --white: #fff;
    --teal-2: #1B484B;
    --teal-3: #123437;
    --mint-ink: #2A8A71;
    --mint-wash: #E4F3EE;
    --soft: #F7F8F6;
    --card: #FFFFFF;
    --slate-2: #7A828C;
    --tile-line: #E3E7E4;
    --on-dark: #FFFFFF;
    --on-dark-muted: #B9CFCB;
    --display: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    --shadow-product: rgba(18, 52, 55, .22) 3px 5px 30px 0
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6
}

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

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

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

button {
    cursor: pointer
}

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

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

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: .73rem;
    font-weight: 800;
    color: #3b9984
}

.section {
    padding: 105px 0
}

.section-head {
    max-width: 680px;
    margin-bottom: 44px
}

.section-head h2 {
    margin: 12px 0 16px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.14;
    letter-spacing: -.045em
}

.section-head p {
    color: var(--slate);
    font-size: 1.08rem
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 14px 23px;
    min-height: 49px;
    font-weight: 700;
    font-size: .92rem;
    border: 1px solid transparent;
    transition: transform .2s, background .2s
}

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

.btn-primary {
    background: var(--teal);
    color: white
}

.btn-primary:hover {
    background: #245b58
}

.btn-outline {
    border-color: #a9c7bc;
    color: var(--teal);
    background: transparent
}

.btn-mint {
    background: var(--mint);
    color: var(--teal)
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(247, 248, 246, .96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(23, 63, 66, .09)
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 18px
}

.brand img {
    width: 154px;
    height: auto
}

.navlinks {
    display: flex;
    gap: 31px;
    align-items: center
}

.navlinks a {
    font-size: .88rem;
    font-weight: 650;
    color: #365156
}

.navlinks a:hover {
    color: #178772
}

.nav-action {
    display: flex;
    gap: 12px;
    align-items: center
}

.menu-btn {
    display: none;
    border: 0;
    background: transparent;
    color: var(--teal);
    font-size: 1.6rem
}

.hero {
    padding: 65px 0 90px;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: 34px
}

.hero h1 {
    font-size: clamp(3rem, 5.1vw, 5.4rem);
    line-height: 1.07;
    letter-spacing: -.065em;
    margin: 22px 0 22px;
    font-weight: 750
}

.hero h1 em {
    font-style: normal;
    color: #319d88
}

.hero p {
    font-size: 1.14rem;
    color: #586970;
    max-width: 540px;
    margin-bottom: 28px
}

.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero-note {
    display: flex;
    gap: 25px;
    color: #647775;
    font-size: .83rem;
    margin-top: 33px;
    flex-wrap: wrap
}

.hero-note span:before {
    content: '✓';
    color: #258a74;
    font-weight: 900;
    margin-right: 7px
}

.hero-visual {
    position: relative
}

.hero-visual>img {
    border-radius: 24px;
    aspect-ratio: 5/5.15;
    object-fit: cover;
    background: #e7f3ed
}

.floating-stat {
    position: absolute;
    background: #fff;
    border: 1px solid #e8efeb;
    border-radius: 15px;
    box-shadow: 0 14px 48px #173f4223;
    padding: 15px 19px;
    bottom: 8%;
    left: -8%;
    min-width: 190px
}

.floating-stat b {
    font-size: 1.45rem;
    color: var(--teal)
}

.floating-stat small {
    display: block;
    color: #6b7a7a
}

.floating-stat .bars {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 31px;
    margin-top: 8px
}

.bars i {
    background: var(--mint);
    width: 15px;
    border-radius: 4px 4px 0 0
}

.bars i:nth-child(1) {
    height: 12px
}

.bars i:nth-child(2) {
    height: 21px
}

.bars i:nth-child(3) {
    height: 17px
}

.bars i:nth-child(4) {
    height: 30px;
    background: #2d9c84
}

.floating-tag {
    position: absolute;
    right: -3%;
    top: 10%;
    background: var(--teal);
    color: #fff;
    padding: 12px 16px;
    border-radius: 13px;
    font-size: .81rem;
    font-weight: 700;
    box-shadow: 0 10px 25px #173f4240
}

.trustline {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 23px 0
}

.trust-inner {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap
}

.trust-inner strong {
    font-size: .89rem;
    color: var(--teal)
}

.trust-inner span {
    font-size: .84rem;
    color: #687b7d
}

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

.value-card {
    background: #fff;
    border: 1px solid #e7eeeb;
    border-radius: 17px;
    padding: 30px
}

.iconbox {
    width: 52px;
    height: 52px;
    background: #e1f3eb;
    color: #217e6e;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 20px
}

.iconbox svg {
    width: 26px;
    height: 26px
}

.value-card h3 {
    font-size: 1.2rem;
    margin: 0 0 9px
}

.value-card p {
    color: var(--slate);
    font-size: .95rem;
    margin: 0
}

.modules {
    background: #fff
}

.module-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px
}

.tab {
    border: 1px solid #dbe8e2;
    background: var(--paper);
    padding: 12px 19px;
    border-radius: 10px;
    color: #53676a;
    font-weight: 700
}

.tab.active,
.tab[aria-selected=true] {
    color: white;
    background: var(--teal);
    border-color: var(--teal)
}

.module-panel {
    display: grid;
    grid-template-columns: .83fr 1.17fr;
    gap: 36px;
    align-items: center;
    background: var(--paper);
    border: 1px solid #e3ece7;
    border-radius: 22px;
    padding: 36px
}

.module-copy h3 {
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    letter-spacing: -.04em;
    line-height: 1.2;
    margin: 12px 0
}

.module-copy p {
    color: var(--slate)
}

.checks {
    list-style: none;
    padding: 0;
    margin: 22px 0
}

.checks li {
    padding: 6px 0;
    color: #345158
}

.checks li:before {
    content: '✓';
    background: #dbf2e9;
    color: #157966;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    font-weight: 800
}

.screen {
    border: 1px solid #dce7e0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 45px #173f4217;
    min-width: 0
}

.screen-top {
    height: 39px;
    background: #fff;
    border-bottom: 1px solid #e8edeb;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8e2df
}

.screen-top small {
    margin-left: auto;
    color: #91a19e;
    font-size: .65rem
}

.screen-body {
    display: grid;
    grid-template-columns: 120px 1fr;
    min-height: 340px
}

.screen-aside {
    background: var(--teal);
    padding: 23px 11px;
    color: white
}

.screen-aside img {
    filter: brightness(0) invert(1);
    width: 90px;
    margin: 0 auto 24px
}

.side-line {
    height: 9px;
    background: #7eb3a5;
    border-radius: 4px;
    margin: 19px 7px;
    opacity: .75
}

.side-line:nth-child(3) {
    width: 65%
}

.side-line:nth-child(4) {
    width: 80%
}

.side-line:nth-child(5) {
    width: 55%
}

.screen-main {
    padding: 28px;
    overflow: hidden
}

.screen-small {
    font-size: .68rem;
    color: #6e8480;
    letter-spacing: .13em;
    text-transform: uppercase
}

.screen-main h4 {
    font-size: 1.25rem;
    margin: 6px 0 22px
}

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

.metric {
    border: 1px solid #e5ece8;
    border-radius: 9px;
    padding: 12px 10px
}

.metric small {
    font-size: .63rem;
    color: #83928e
}

.metric strong {
    font-size: 1.1rem;
    display: block;
    color: var(--teal)
}

.chart {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    margin-top: 20px;
    padding: 20px 18px;
    background: #f7faf8;
    border-radius: 9px;
    height: 150px
}

.chart span {
    flex: 1;
    background: #9ad6c4;
    border-radius: 5px 5px 0 0
}

.chart span:nth-child(2) {
    background: #51b69e
}

.chart span:nth-child(4) {
    background: #2a8678
}

.placeholder-tag {
    margin-top: 14px;
    text-align: center;
    font-size: .72rem;
    color: #7a8c87
}

.custom {
    background: var(--teal);
    color: white;
    position: relative;
    overflow: hidden
}

.custom:after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border: 70px solid #9ad6c418;
    border-radius: 50%;
    right: -130px;
    top: -190px;
    pointer-events: none
}

.custom .section-head p {
    color: #c7d9d6
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    position: relative;
    z-index: 1
}

.custom-card {
    background: #ffffff10;
    border: 1px solid #ffffff2a;
    border-radius: 15px;
    padding: 25px
}

.custom-card b {
    display: block;
    margin: 12px 0 8px
}

.custom-card p {
    font-size: .9rem;
    color: #c8dcd7;
    margin: 0
}

.custom-card .n {
    color: var(--mint);
    font-size: 1.7rem;
    font-weight: 750
}

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

.step {
    padding-top: 22px;
    border-top: 2px solid var(--mint)
}

.step strong {
    font-size: .83rem;
    color: #298d7b
}

.step h3 {
    font-size: 1.25rem;
    margin: 14px 0 10px
}

.step p {
    color: var(--slate);
    margin: 0
}

.demo {
    background: #ecf5f0
}

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start
}

.demo h2 {
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    line-height: 1.13;
    letter-spacing: -.045em;
    margin: 14px 0
}

.demo p {
    color: var(--slate)
}

.demo form {
    background: #fff;
    padding: 32px;
    border-radius: 18px;
    border: 1px solid #dbe7e0
}

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

.field {
    margin-bottom: 16px
}

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 750;
    margin-bottom: 6px
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cfded7;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    outline-color: #56ae9c
}

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

.legal {
    font-size: .74rem !important;
    color: #73817d !important
}

.footer {
    background: #103235;
    color: #d1e0dc;
    padding: 55px 0 25px
}

.footgrid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 35px
}

.footer-brand {
    color: white;
    font-size: 2rem;
    letter-spacing: -.06em;
    font-weight: 750
}

.footer-brand img {
    height: 30px;
    width: auto;
    margin-bottom: 4px
}

.footer p {
    max-width: 350px;
    color: #b0c4bf;
    font-size: .9rem
}

.footer h4 {
    color: #fff;
    margin: 9px 0 18px
}

.footer a {
    display: block;
    color: #b0c4bf;
    font-size: .9rem;
    margin: 10px 0
}

.footer a:hover {
    color: #9ad6c4
}

.footbottom {
    border-top: 1px solid #ffffff24;
    margin-top: 50px;
    padding-top: 23px;
    color: #a3bab4;
    font-size: .8rem;
    display: flex;
    justify-content: space-between;
    gap: 14px
}

.reveal {
    animation: show .25s ease
}

@keyframes show {
    from {
        opacity: .5;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ===== Tiles (transferred from index-2) ===== */
.tile {
    padding-block: clamp(64px, 9vw, 104px);
    color: var(--slate);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em
}

.tile.soft {
    background: var(--soft)
}

.tile.white {
    background: #f7f8f6;
}

.tile.dark {
    background: var(--teal);
    color: var(--on-dark-muted)
}

.tile.dark3 {
    background: var(--teal-3);
    color: var(--on-dark-muted)
}

.tile h2,
.tile h3 {
    font-family: var(--display);
    color: var(--teal);
    margin: 0;
    text-wrap: balance;
    font-weight: 600
}

.tile p {
    margin: 0
}

.tile.dark h2,
.tile.dark h3,
.tile.dark3 h2,
.tile.dark3 h3 {
    color: var(--on-dark)
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px
}

.narrow {
    max-width: 820px
}

.center {
    text-align: center
}

.tile .eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--mint-ink)
}

.tile.dark .eyebrow,
.tile.dark3 .eyebrow {
    color: var(--mint)
}

.h-xl {
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.025em
}

.h-lg {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.02em
}

.lead {
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--slate)
}

.tile.dark .lead,
.tile.dark3 .lead {
    color: var(--on-dark-muted)
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.stack.center {
    align-items: center
}

/* hub */
.hub {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    margin-top: 56px
}

.scatter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end
}

.scatter span {
    border: 1px dashed rgba(185, 207, 203, .45);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 15px;
    color: var(--on-dark-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(232, 160, 90, .8)
}

.arrow {
    color: var(--mint);
    width: 56px;
    height: 56px
}

.unified {
    background: var(--teal-2);
    border: 1px solid rgba(154, 214, 196, .25);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.unified .top {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 19px
}

.unified .top img {
    width: 40px;
    height: 40px;
    border-radius: 11px
}

.unified ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    font-size: 15px;
    color: #E1EEEB
}

.unified li {
    display: flex;
    gap: 8px;
    align-items: center
}

.unified li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    flex: none
}

/* dual value */
.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 52px
}

.duo-card {
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0
}

.duo-card.mgr {
    background: white;
    border: 1px solid var(--tile-line)
}

.duo-card.res {
    background: var(--mint-wash)
}

.duo-card .who {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--teal)
}

.icon-chip {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--teal);
    flex: none;
    border: 1px solid var(--tile-line)
}

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

.duo-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.duo-checks li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start
}

.duo-checks li svg {
    width: 20px;
    height: 20px;
    color: var(--mint-ink);
    margin-top: 2px
}

.duo-checks b {
    color: var(--teal);
    font-weight: 600
}

/* configurator */
.config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 48px
}

.panel {
    background: var(--card);
    border: 1px solid var(--tile-line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0
}

.tile .panel h3 {
    font-size: 19px
}

.cfg-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cfg-field label,
.cfg-field .lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--teal)
}

.range-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.range-row output {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 600;
    color: var(--teal);
    font-variant-numeric: tabular-nums
}

input[type=range] {
    width: 100%;
    accent-color: var(--teal)
}

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

.chip {
    font-size: 14px;
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid var(--tile-line);
    background: var(--soft);
    color: var(--slate);
    transition: all .15s
}

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

.chip.core {
    cursor: default;
    background: var(--mint-wash);
    border-color: transparent;
    color: var(--mint-ink);
    font-weight: 600
}

.seg {
    display: inline-flex;
    align-self: flex-start;
    background: var(--soft);
    border: 1px solid var(--tile-line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap
}

.seg button {
    font-size: 14px;
    border: 0;
    background: none;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--slate)
}

.seg button[aria-pressed=true] {
    background: #fff;
    color: var(--teal);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--tile-line)
}

.result {
    background: var(--teal);
    color: var(--on-dark-muted);
    border-color: var(--teal)
}

.result .plan {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 38px);
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1
}

.result .plan small {
    display: block;
    font-size: 15px;
    color: var(--mint);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px
}

.result dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0
}

.result dt {
    font-size: 13px;
    color: var(--on-dark-muted)
}

.result dd {
    margin: 2px 0 0;
    font-size: 19px;
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.result .chips span {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(154, 214, 196, .14);
    color: #E1EEEB
}

.result .chips span.core {
    background: var(--mint);
    color: var(--teal);
    font-weight: 600
}

.result .btn-primary {
    background: var(--mint);
    color: var(--teal)
}

.result .btn-primary:hover {
    background: #b3e2d4
}

/* audience */
.aud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center
}

.photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 536/616;
    max-height: 560px;
    width: 100%;
    box-shadow: var(--shadow-product)
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aud-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px
}

.aud-item {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, .03)
}

.aud-item b {
    color: #fff;
    font-size: 16px
}

.aud-item span {
    font-size: 14px;
    line-height: 1.4
}

@media(max-width:900px) {
    .hub {
        grid-template-columns: 1fr
    }

    .scatter {
        justify-content: center
    }

    .arrow {
        transform: rotate(90deg);
        justify-self: center
    }

    .duo,
    .config,
    .aud {
        grid-template-columns: 1fr
    }

    .photo {
        max-height: 420px;
        aspect-ratio: 4/3
    }
}

@media(max-width:640px) {

    .unified ul,
    .aud-list,
    .result dl {
        grid-template-columns: 1fr
    }
}

@media(max-width:960px) {
    .navlinks {
        gap: 16px
    }

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

    .hero h1 {
        font-size: 3.7rem
    }

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

    .module-panel {
        grid-template-columns: 1fr
    }

    .demo-grid {
        gap: 35px
    }
}

@media(max-width:760px) {
    .container {
        width: min(100% - 36px, 1180px)
    }

    .section {
        padding: 70px 0
    }

    .nav-inner {
        min-height: 69px
    }

    .brand img {
        width: 128px
    }

    .menu-btn {
        display: block
    }

    .nav-action>.btn {
        display: none
    }

    .navlinks {
        display: none;
        position: absolute;
        top: 69px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 20px 25px;
        background: var(--paper);
        border-bottom: 1px solid var(--line)
    }

    .navlinks.open {
        display: flex
    }

    .navlinks a {
        padding: 9px
    }

    .hero {
        padding: 45px 0 60px
    }

    .hero-grid,
    .demo-grid {
        grid-template-columns: 1fr
    }

    .hero h1 {
        font-size: clamp(2.8rem, 12vw, 4.5rem)
    }

    .hero-visual {
        margin: 25px 8px 0
    }

    .hero-visual>img {
        aspect-ratio: 1.35
    }

    .floating-stat {
        left: -2%;
        bottom: -8%;
        transform: scale(.85);
        transform-origin: left bottom
    }

    .floating-tag {
        right: -2%
    }

    .value-grid,
    .steps {
        grid-template-columns: 1fr
    }

    .module-panel {
        padding: 19px
    }

    .screen-body {
        grid-template-columns: 76px 1fr;
        min-height: 280px
    }

    .screen-aside {
        padding: 19px 8px
    }

    .screen-aside img {
        width: 58px
    }

    .screen-main {
        padding: 14px
    }

    .metrics {
        gap: 5px
    }

    .metric {
        padding: 7px 5px
    }

    .metric strong {
        font-size: .88rem
    }

    .metric small {
        font-size: .52rem
    }

    .chart {
        gap: 7px;
        padding: 12px;
        height: 115px
    }

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

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

    .footgrid>div:first-child {
        grid-column: 1/-1
    }

    .footbottom {
        flex-direction: column
    }

    .section-head h2 {
        font-size: 2.35rem
    }
}

/* ===== Contact page (iletisim.html) ===== */
.ct-hero {
    padding: 80px 0 40px;
    background: var(--paper)
}

.ct-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -.055em;
    margin: 16px 0 14px;
    font-weight: 750
}

.ct-hero p {
    max-width: 620px;
    font-size: 1.1rem;
    color: #586970;
    margin: 0
}

.ct-info {
    padding: 20px 0 10px
}

.ct-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.ct-card {
    background: #fff;
    border: 1px solid #e7eeeb;
    border-radius: 17px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.ct-card .iconbox {
    margin-bottom: 10px
}

.ct-card h3 {
    font-size: 1.1rem;
    margin: 0 0 4px
}

.ct-card p,
.ct-card address {
    margin: 0;
    font-style: normal;
    color: var(--ink);
    overflow-wrap: anywhere
}

.ct-card p a:hover,
.ct-card address a:hover {
    color: #178772
}

.ct-muted {
    color: var(--slate) !important;
    font-size: .9rem
}

.ct-link {
    margin-top: auto;
    padding-top: 10px;
    font-size: .9rem;
    font-weight: 700;
    color: #298d7b
}

.ct-link:hover {
    color: var(--teal)
}

.ct-hours {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ct-hours div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .92rem;
    border-bottom: 1px dashed #e1e9e5;
    padding-bottom: 6px
}

.ct-hours div:last-child {
    border-bottom: 0
}

.ct-hours dt {
    color: var(--slate)
}

.ct-hours dd {
    margin: 0;
    font-weight: 700;
    color: var(--teal)
}

.ct-main {
    padding-top: 50px
}

.ct-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: stretch
}

.ct-map {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #dbe7e0;
    background: #e7f3ed;
    min-height: 420px
}

.ct-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0
}

.ct-form {
    background: #fff;
    padding: 32px;
    border-radius: 18px;
    border: 1px solid #dbe7e0
}

.ct-form h2 {
    font-size: 1.7rem;
    letter-spacing: -.035em;
    margin: 0 0 4px
}

.ct-form>.ct-muted {
    margin: 0 0 22px
}

.navlinks a[aria-current=page] {
    color: #178772
}

@media(max-width:960px) {
    .ct-cards {
        grid-template-columns: repeat(2, 1fr)
    }

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

    .ct-map,
    .ct-map iframe {
        min-height: 340px
    }
}

@media(max-width:560px) {
    .ct-hero {
        padding: 50px 0 24px
    }

    .ct-cards {
        grid-template-columns: 1fr
    }

    .ct-form {
        padding: 22px
    }
}

/* ===== Footer legal links ===== */
.foot-legal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap
}

.footbottom .foot-legal a {
    display: inline;
    margin: 0;
    font-size: .8rem
}

/* ===== Legal pages (gizlilik-politikasi, kullanim-kosullari) ===== */
.lg-updated {
    margin-top: 14px !important;
    font-size: .85rem !important;
    color: #7a8c87 !important
}

.lg-section {
    padding-top: 40px
}

.lg-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    align-items: start
}

.lg-toc {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #e7eeeb;
    border-radius: 16px;
    padding: 20px
}

.lg-toc strong {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3b9984;
    margin-bottom: 8px
}

.lg-toc a {
    font-size: .88rem;
    color: #4f6468;
    padding: 6px 8px;
    border-radius: 8px
}

.lg-toc a:hover {
    background: #ecf5f0;
    color: var(--teal)
}

.lg-doc {
    background: #fff;
    border: 1px solid #e7eeeb;
    border-radius: 20px;
    padding: clamp(24px, 4vw, 48px);
    max-width: 820px;
    min-width: 0
}

.lg-doc h2 {
    font-size: 1.35rem;
    letter-spacing: -.025em;
    line-height: 1.3;
    margin: 40px 0 12px;
    scroll-margin-top: 100px
}

.lg-doc h2:first-child {
    margin-top: 0
}

.lg-doc p,
.lg-doc li {
    color: #3f5257;
    font-size: .98rem
}

.lg-doc p {
    margin: 0 0 12px
}

.lg-doc ul {
    margin: 0 0 14px;
    padding-left: 22px
}

.lg-doc li {
    margin: 6px 0
}

.lg-doc li::marker {
    color: #3b9984
}

.lg-doc strong {
    color: var(--teal)
}

.lg-doc a {
    color: #178772;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px
}

.lg-doc .lg-facts {
    list-style: none;
    padding: 0;
    border: 1px solid #e3ece7;
    border-radius: 12px;
    overflow: hidden
}

.lg-facts li {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px solid #edf2ef
}

.lg-facts li:last-child {
    border-bottom: 0
}

.lg-facts span {
    font-weight: 700;
    color: var(--teal)
}

.lg-contact {
    margin-top: 40px;
    background: #ecf5f0;
    border-radius: 14px;
    padding: 20px 22px
}

.lg-contact p {
    margin: 6px 0 0
}

@media(max-width:960px) {
    .lg-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .lg-toc {
        position: static
    }
}

@media(max-width:560px) {
    .lg-facts li {
        grid-template-columns: 1fr;
        gap: 2px
    }
}

.footer-tagline {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 6px
}

/* ===== Contact page: offices + map tabs ===== */
.ct-offices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 8px
}

.ct-office {
    transition: border-color .2s, box-shadow .2s
}

.ct-office.is-active {
    border-color: #9ad6c4;
    box-shadow: 0 12px 30px #173f4214
}

.ct-office-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px
}

.ct-office-head .iconbox {
    margin: 0
}

.ct-city {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #3b9984
}

.ct-office h3 {
    margin: 0
}

.ct-office address {
    line-height: 1.7
}

.ct-office-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px
}

.ct-office-actions .ct-link {
    margin: 0;
    padding: 0
}

.ct-show {
    border: 1px solid #a9c7bc;
    background: transparent;
    color: var(--teal);
    font-weight: 700;
    font-size: .85rem;
    border-radius: 8px;
    padding: 8px 14px
}

.ct-show:hover {
    background: #ecf5f0
}

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

.ct-map-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.ct-map-wrap .ct-map {
    flex: 1
}

.ct-map-tabs {
    display: inline-flex;
    align-self: flex-start;
    background: #fff;
    border: 1px solid #dbe8e2;
    border-radius: 10px;
    padding: 4px;
    gap: 4px
}

.ct-map-tabs button {
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: 7px;
    font-weight: 700;
    font-size: .88rem;
    color: #53676a
}

.ct-map-tabs button[aria-selected=true] {
    background: var(--teal);
    color: #fff
}

@media(max-width:960px) {
    .ct-cards-3 {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:700px) {

    .ct-offices,
    .ct-cards-3 {
        grid-template-columns: 1fr
    }
}