:root {
    --bg: #f6f7fb;
    --panel: #ffffff;
    --panel-2: #f0f2f8;
    --line: #e1e4ee;
    --text: #131722;
    --muted: #636b80;
    --accent: #4f7cff;
    --accent-2: #7c5cff;
    --accent-soft: rgba(79,124,255,.10);
    --good: #1a9d66;
    --danger: #d63a56;
    --radius: 14px;
    --font-display: "Idesk Display", "Segoe UI", system-ui, sans-serif;
    --font-body: "Idesk Body", "Segoe UI", system-ui, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(1200px 600px at 85% -10%, rgba(124,92,255,.10), transparent 60%),
      radial-gradient(900px 500px at -10% 10%, rgba(79,124,255,.08), transparent 55%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 0, 0 0;
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .2px;
}

    .brand .dot-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg,var(--accent),var(--accent-2));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 15px;
        color: #fff;
        box-shadow: 0 6px 18px rgba(79,124,255,.35);
    }

nav {
    display: flex;
    gap: 28px;
    align-items: center;
}
nav a {
        color: var(--muted);
        font-size: 14.5px;
        font-weight: 500;
        transition: color .15s;
    }

nav a:hover {
            color: var(--text);
        }

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

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}

    .user-chip .dot-mark {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: linear-gradient(135deg,var(--accent),var(--accent-2));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 13px;
        color: #fff;
    }

.btn {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    transition: .15s border-color, .15s background, .15s transform;
}

.btn:hover {
        border-color: #c9cee0;
        transform: translateY(-1px);
    }

.btn-primary {
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(79,124,255,.3);
}

.btn-primary:hover {
        filter: brightness(1.08);
    }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
}

.btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

.btn-lg {
    padding: 14px 26px;
    font-size: 15.5px;
}

/* Hero */
.hero {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 64px 0 48px;
}

.hero .eyebrow {
        margin-left: auto;
        margin-right: auto;
    }

.hero p.lead {
        margin-left: auto;
        margin-right: auto;
    }

.hero-ctas {
    justify-content: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 20px;
}

h1 {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 18px;
    letter-spacing: -.5px;
}

h1 span {
        background: linear-gradient(135deg,var(--accent),var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero p.lead {
    color: var(--muted);
    font-size: 17px;
    max-width: 520px;
    margin: 0 0 30px;
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
/* Quick connect card - mirrors the app UI */
.app-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 60px -20px rgba(16,20,30,.14);
}
.app-card .titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }
.app-card .titlebar-label {
        font-size: 12.5px;
        color: var(--muted);
        font-weight: 600;
    }
.app-card .dots {
        display: flex;
        gap: 6px;
    }

        .app-card .dots span {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #d7dbe6;
        }

.id-field {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

    .id-field label {
        font-size: 12px;
        color: var(--muted);
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .id-field .value {
        font-family: var(--font-mono);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 1px;
    }

.connect-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

    .connect-row input {
        flex: 1;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--text);
        border-radius: 10px;
        padding: 13px 14px;
        font-size: 15px;
        font-family: var(--font-mono);
        letter-spacing: .5px;
    }

        .connect-row input::placeholder {
            color: #9198ab;
            letter-spacing: normal;
            font-family: var(--font-body);
        }

/* Sections */
section {
    padding: 64px 0;
}

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}

    .section-head .eyebrow {
        margin-bottom: 14px;
    }

    .section-head h2 {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 12px;
        letter-spacing: -.4px;
    }

    .section-head p {
        color: var(--muted);
        font-size: 15.5px;
        margin: 0;
    }

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

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    transition: .2s border-color, .2s transform;
}

    .card:hover {
        border-color: #c9cee0;
        transform: translateY(-2px);
    }

    .card .icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: var(--accent-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;d
        color: var(--accent);
        font-size: 20px;
    }

    .card h3 {
        font-size: 17px;
        margin: 0 0 8px;
        font-weight: 700;
    }

    .card p {
        color: var(--muted);
        font-size: 14px;
        margin: 0;
        line-height: 1.6;
    }

/* Pricing */
.pricing-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.seat-control {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
}

    .seat-control button {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--text);
        font-size: 20px;
        font-weight: 700;
    }

    .seat-control .count {
        font-size: 28px;
        font-weight: 800;
        min-width: 60px;
        text-align: center;
        font-family: var(--font-mono);
    }

.price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

    .price-line .big {
        font-family: var(--font-display);
        font-size: 40px;
        font-weight: 800;
    }

    .price-line .per {
        color: var(--muted);
        font-size: 14px;
    }

.price-breakdown {
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 8px;
}

.company-name-field {
    margin: 18px 0;
}

    .company-name-field label {
        font-size: 13px;
        color: var(--muted);
        font-weight: 600;
        display: block;
        margin-bottom: 8px;
    }

    .company-name-field input {
        width: 100%;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--text);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 15px;
    }

.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

    .pricing-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 9px 0;
        color: var(--muted);
        font-size: 14.5px;
    }

        .pricing-list li .check {
            color: var(--good);
            font-weight: 800;
        }

footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    color: var(--muted);
    font-size: 13.5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Neden Idesk - karşılaştırma tablosu */
.compare-table {
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}

    .compare-row:last-child {
        border-bottom: none;
    }

    .compare-row > div:not(:first-child) {
        text-align: center;
    }

    .compare-row.compare-head {
        background: var(--panel-2);
        font-weight: 700;
        color: var(--muted);
        font-size: 13px;
        letter-spacing: .3px;
    }

    .compare-row .cross {
        color: var(--muted);
    }

    .compare-row .highlight {
        color: var(--text);
        font-weight: 600;
    }

.compare-head .highlight {
    color: var(--accent);
}

/* Nasıl Çalışıyor - adımlar */
.steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}

.step {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.step h3 {
    font-size: 16px;
    margin: 0 0 6px;
}

.step p {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}

.step-arrow {
    color: var(--muted);
    font-size: 22px;
    padding-top: 36px;
}

@media (max-width:700px) {
    .steps-row {
        flex-direction: column;
    }

    .step-arrow {
        display: none;
    }
}

/* SSS accordion */
.faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 20px;
}

    .faq-item summary {
        cursor: pointer;
        font-weight: 600;
        font-size: 15px;
        list-style: none;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::before {
            content: "+";
            color: var(--accent);
            font-weight: 800;
            margin-right: 10px;
        }

    .faq-item[open] summary::before {
        content: "−";
    }

    .faq-item p {
        color: var(--muted);
        font-size: 14px;
        margin: 12px 0 0;
        line-height: 1.6;
    }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,7,12,.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

    .modal-overlay.open {
        display: flex;
    }

.modal {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    padding: 30px;
    position: relative;
    box-shadow: 0 40px 80px -20px rgba(16,20,30,.18);
    max-height: 90vh;
    overflow-y: auto;
}

    .modal.wide {
        max-width: 520px;
    }

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    padding: 4px;
}

.modal h2 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 6px;
    font-weight: 800;
}

.modal .sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 24px;
}

.field {
    margin-bottom: 16px;
}

    .field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 7px;
    }

    .field input, .field select {
        width: 100%;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--text);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14.5px;
    }

        .field input:focus, .field select:focus {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }

.toggle-row {
    display: flex;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 22px;
}

    .toggle-row button {
        flex: 1;
        background: none;
        border: none;
        color: var(--muted);
        padding: 9px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 600;
    }

        .toggle-row button.active {
            background: var(--accent);
            color: #fff;
        }

.form-error {
    color: var(--danger);
    font-size: 13px;
    margin: -8px 0 14px;
    display: none;
}

.form-note {
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
    margin-top: 16px;
}

    .form-note a {
        color: var(--accent);
        font-weight: 600;
    }

.status-msg {
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
    display: none;
}

    .status-msg.ok {
        color: var(--good);
    }

    .status-msg.err {
        color: var(--danger);
    }

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

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

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

    nav {
        display: none;
    }

    h1 {
        font-size: 32px;
    }

    .compare-row {
        grid-template-columns: 1.4fr .8fr .8fr;
        font-size: 13px;
        padding: 12px 14px;
    }
}

nav a.active-nav {
    color: var(--text);
}

.img-slider{position:relative;max-width:1080px;margin:0 auto;border-radius:20px;overflow:hidden;aspect-ratio:16/6;background:var(--panel);border:1px solid var(--line);}
.img-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;align-items:flex-end;}
.img-slider .slide.active{opacity:1;}
.img-slider .slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05);}
.img-slider .slide-caption{position:absolute;left:28px;bottom:22px;right:28px;color:#fff;font-size:15px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.img-slider .slide-caption span{display:block;font-size:12.5px;font-weight:500;opacity:.85;margin-top:4px;}
.img-slider .dots{position:absolute;bottom:16px;right:20px;display:flex;gap:7px;z-index:4;}
.img-slider .dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;}
.img-slider .dots button.active{background:#fff;width:20px;border-radius:5px;transition:width .3s;}
.img-slider .glass-overlay{position:absolute;top:0;right:0;bottom:0;width:44%;z-index:3;
  background:rgba(15,18,28,.42);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-left:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:34px 30px;color:#fff;}
.img-slider .glass-overlay h3{margin:0;font-size:19px;font-weight:700;line-height:1.3;}
.img-slider .glass-overlay ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.img-slider .glass-overlay li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.92);}
.img-slider .glass-overlay li svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--accent);}
@media (max-width:700px){
  .img-slider{aspect-ratio:4/5;}
  .img-slider .glass-overlay{width:100%;height:52%;top:auto;bottom:0;border-left:none;border-top:1px solid rgba(255,255,255,.14);padding:22px 22px;}
  .img-slider .slide-caption{display:none;}
}
/* Decorative visual utilities */
.bg-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.5;}

.glass-card{
  position:relative;z-index:1;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(16,20,30,.08);
  border-radius:20px;padding:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(16,20,30,.14);
}
.glass-card img{width:100%;border-radius:14px;display:block;}

.mockup-frame{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(16,20,30,.12);}
.mockup-bar{display:flex;gap:6px;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line);}
.mockup-bar i{width:10px;height:10px;border-radius:50%;display:block;}
.mockup-bar i:nth-child(1){background:#ef5a6f;}
.mockup-bar i:nth-child(2){background:#f2c14e;}
.mockup-bar i:nth-child(3){background:#33c481;}
.mockup-frame img{width:100%;display:block;}

.section-pattern{position:relative;}
.section-pattern::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.4' cy='1.4' r='1.4' fill='%23131722' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-repeat:repeat;
  -webkit-mask-image:radial-gradient(circle at 50% 35%, black, transparent 72%);
  mask-image:radial-gradient(circle at 50% 35%, black, transparent 72%);
}
.section-pattern > *{position:relative;z-index:1;}

/* Hero two-column layout with visual */
.hero{max-width:1180px;padding:56px 0 20px;}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left;}
.hero-inner .hero-copy .eyebrow{margin-left:0;}
.hero-inner .hero-copy p.lead{margin-left:0;margin-right:0;}
.hero-inner .hero-ctas{justify-content:flex-start;}
.hero-visual{position:relative;min-height:340px;display:flex;align-items:center;}
.hero-visual .bg-blob.b1{width:260px;height:260px;background:var(--accent);top:-30px;right:-30px;}
.hero-visual .bg-blob.b2{width:220px;height:220px;background:var(--accent-2);bottom:-40px;left:-20px;}
@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-inner .hero-copy .eyebrow,.hero-inner .hero-copy p.lead{margin-left:auto;margin-right:auto;}
  .hero-inner .hero-ctas{justify-content:center;}
  .hero-visual{order:-1;max-width:420px;margin:0 auto;min-height:260px;}
}
/* Platform icon badges (hero) */
.platform-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.platform-badge{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:76px;padding:12px 6px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  transition:.15s border-color, .15s transform;
}
.platform-badge:hover{border-color:var(--accent);transform:translateY(-2px);}
.platform-badge svg{width:22px;height:22px;color:var(--text);}
.platform-badge span{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--muted);text-transform:uppercase;}
@media (max-width:920px){.platform-badges{justify-content:center;}}

/* Photo-based solution cards — Alpemix-style: colored banner + cards sunk into it, middle card raised */
.cozum-banner{
  position:relative;
  background:linear-gradient(115deg, #0d2a63 0%, var(--accent) 55%, var(--accent-2) 100%);
  padding:54px 0 130px;
  overflow:hidden;
}
.cozum-banner::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.4' cy='1.4' r='1.4' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat:repeat;pointer-events:none;
}
.cozum-banner .section-head{position:relative;z-index:1;}
.cozum-banner .section-head .eyebrow{background:rgba(255,255,255,.16);color:#fff;}
.cozum-banner .section-head h2{color:#fff;}
.cozum-banner .section-head p{color:rgba(255,255,255,.8);}

.cozum-cards-wrap{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:-90px;
}
.solution-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s transform,.2s box-shadow;
  box-shadow:0 20px 50px rgba(16,20,30,.14);
}
.solution-card:hover{transform:translateY(-6px);}
.solution-card.is-featured{margin-top:-26px;}
.solution-card .photo{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2);}
.solution-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.solution-card .body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;}
.solution-card h3{margin:0 0 10px;font-size:17px;}
.solution-card p{color:var(--muted);font-size:14px;flex:1;margin:0 0 20px;}
.btn-tab{
  align-self:flex-start;position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:none;padding:11px 20px 11px 26px;border-radius:8px;
  font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;
}
.btn-tab::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  background:#2fd6b8;border-radius:8px 0 0 8px;
}
@media (max-width:920px){
  .cozum-cards-wrap{grid-template-columns:1fr;margin-top:-60px;}
  .solution-card.is-featured{margin-top:0;}
}

/* Neden iDesk - icon feature cards, Alpemix-style */
.feature-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;}
.feature-icon-card{
  position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 24px 24px;text-align:center;
  transition:.2s border-color,.2s transform,.2s box-shadow;
}
.feature-icon-card:hover{transform:translateY(-4px);border-color:#c9cee0;box-shadow:0 18px 40px rgba(16,20,30,.12);}
.feature-icon-card .num-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(79,124,255,.4);
}
.feature-icon-card .icon-wrap{
  width:54px;height:54px;border-radius:14px;margin:6px auto 18px;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.feature-icon-card .icon-wrap svg{width:26px;height:26px;color:var(--accent);}
.feature-icon-card h3{font-size:15.5px;margin:0 0 8px;font-weight:700;}
.feature-icon-card p{color:var(--muted);font-size:13px;margin:0;line-height:1.55;}
.feature-more-wrap{text-align:center;margin-top:36px;}
@media (max-width:900px){
  .feature-icon-grid{grid-template-columns:1fr;}
}