/* ════════════════════════════════════════════════════
   app.css — Clomotech global styles
   ════════════════════════════════════════════════════ */

/* ── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    background:  #080a0e;
    color:       #ffffff;
    line-height: 1.6;
    overflow-x:  hidden;
}

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

a { color: inherit; }

/* ── Site shell ───────────────────────────────────── */
.site-wrapper {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.site-main { flex: 1; }

/* ── Layout helpers ───────────────────────────────── */
.container {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 40px;
}

/* ── Sections ─────────────────────────────────────── */
.section {
    padding: 96px 0;
}
.section--dark { background: #060809; }

.section-header {
    text-align:    center;
    margin-bottom: 56px;
}
.section-label {
    display:       inline-block;
    font-size:     11px;
    font-weight:   700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:         #ff6b00;
    background:    rgba(255,107,0,0.10);
    border:        1px solid rgba(255,107,0,0.25);
    border-radius: 20px;
    padding:       4px 14px;
    margin-bottom: 16px;
}
.section-title {
    font-family:   'Syne', sans-serif;
    font-size:     clamp(28px, 4vw, 44px);
    font-weight:   700;
    color:         #ffffff;
    line-height:   1.15;
    letter-spacing:-0.02em;
    margin-bottom: 16px;
}
.section-sub {
    font-size:  16px;
    color:      rgba(255,255,255,0.52);
    max-width:  540px;
    margin:     0 auto;
    line-height:1.7;
}
.accent { color: #ff6b00; }

/* ── Solution cards ───────────────────────────────── */
.cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   24px;
}

.sol-card {
    background:    #0d1117;
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding:       28px 24px 24px;
    transition:    border-color .25s, box-shadow .25s, transform .22s;
}
.sol-card:hover {
    border-color: rgba(255,107,0,0.35);
    box-shadow:   0 0 32px rgba(255,107,0,0.08);
    transform:    translateY(-3px);
}

.sol-icon {
    width:         44px;
    height:        44px;
    background:    rgba(255,107,0,0.12);
    border:        1px solid rgba(255,107,0,0.22);
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content:center;
    margin-bottom: 16px;
}
.sol-icon svg {
    width:  20px;
    height: 20px;
    color:  #ff6b00;
}

.sol-card h3 {
    font-family:   'Syne', sans-serif;
    font-size:     18px;
    font-weight:   700;
    color:         #ffffff;
    margin-bottom: 10px;
}
.sol-card p {
    font-size:   14px;
    color:       rgba(255,255,255,0.52);
    line-height: 1.65;
    margin-bottom:18px;
}
.card-link {
    font-size:       13px;
    font-weight:     500;
    color:           #ff6b00;
    text-decoration: none;
    transition:      opacity .2s;
}
.card-link:hover { opacity: .75; }

/* ── Case study index cards ───────────────────────── */
.cs-index-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap:                   24px;
}

.cs-index-card {
    display:        flex;
    flex-direction: column;
    background:     #0d1117;
    border:         1px solid rgba(255,255,255,0.07);
    border-radius:  16px;
    padding:        32px;
    text-decoration:none;
    color:          inherit;
    transition:     border-color .25s, box-shadow .25s, transform .22s;
}
.cs-index-card:hover {
    border-color: rgba(255,107,0,0.35);
    box-shadow:   0 0 40px rgba(255,107,0,0.08);
    transform:    translateY(-3px);
}

.cs-index-card__label {
    font-size:     10px;
    font-weight:   700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:         #ff6b00;
    margin-bottom: 12px;
}

.cs-index-card__title {
    font-family:   'Syne', sans-serif;
    font-size:     clamp(22px, 3vw, 28px);
    font-weight:   700;
    line-height:   1.15;
    letter-spacing:-0.01em;
    color:         #ffffff;
    margin-bottom: 14px;
}

.cs-index-card__desc {
    font-size:    14px;
    color:        rgba(255,255,255,0.52);
    line-height:  1.72;
    flex:         1;
    margin-bottom:20px;
}

.cs-index-card__tags {
    display:      flex;
    flex-wrap:    wrap;
    gap:          6px;
    margin-bottom:24px;
}
.cs-index-card__tags span {
    font-size:     11px;
    font-weight:   500;
    color:         rgba(255,255,255,0.50);
    background:    rgba(255,255,255,0.05);
    border:        1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding:       3px 10px;
}

.cs-index-card__cta {
    font-size:   13px;
    font-weight: 600;
    color:       #ff6b00;
    transition:  opacity .2s;
}
.cs-index-card:hover .cs-index-card__cta { opacity: .75; }

@media (max-width: 720px) {
    .cs-index-grid { grid-template-columns: 1fr; }
}

/* ── Stats strip ──────────────────────────────────── */
.stats-strip {
    padding:      60px 0;
    background:   #080a0e;
    border-top:   1px solid rgba(255,255,255,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   16px;
    text-align:            center;
}
.stat {
    padding: 16px;
    display: flex;
    flex-direction:column;
    align-items:center;
    gap: 6px;
}
.stat-num {
    font-family:   'Syne', sans-serif;
    font-size:     clamp(28px, 4vw, 40px);
    font-weight:   800;
    color:         #ffffff;
    line-height:   1;
}
.stat-accent { color: #ff6b00; }
.stat-label {
    font-size:  13px;
    color:      rgba(255,255,255,0.42);
    font-weight:400;
    letter-spacing:.02em;
}

/* ── CTA section ──────────────────────────────────── */
.cta-section {
    padding:    96px 0;
    background: linear-gradient(135deg, #0d1117 0%, #080a0e 60%);
    position:   relative;
    overflow:   hidden;
}
.cta-section::before {
    content:    '';
    position:   absolute;
    top:        -120px;
    left:       50%;
    transform:  translateX(-50%);
    width:      600px;
    height:     600px;
    background: radial-gradient(circle, rgba(255,107,0,0.08) 0, transparent 70%);
    pointer-events:none;
}
.cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    flex-wrap:       wrap;
}
.cta-text h2 {
    font-family:   'Syne', sans-serif;
    font-size:     clamp(24px, 3.5vw, 38px);
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 12px;
}
.cta-text p {
    font-size: 15px;
    color:     rgba(255,255,255,0.50);
}
.cta-actions {
    display:    flex;
    gap:        14px;
    flex-wrap:  wrap;
    flex-shrink:0;
}

.btn-primary-lg {
    padding:         13px 26px;
    background:      #ff6b00;
    border:          1px solid #ff6b00;
    border-radius:   8px;
    color:           #ffffff;
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    transition:      background .2s, border-color .2s, box-shadow .2s;
    white-space:     nowrap;
}
.btn-primary-lg:hover {
    background:  #e05c00;
    border-color:#e05c00;
    box-shadow:  0 0 20px rgba(255,107,0,0.35);
}

.btn-outline-lg {
    padding:         13px 26px;
    background:      transparent;
    border:          1px solid rgba(255,107,0,0.40);
    border-radius:   8px;
    color:           #ff6b00;
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    transition:      all .2s;
    white-space:     nowrap;
}
.btn-outline-lg:hover {
    background:  rgba(255,107,0,0.10);
    border-color:#ff6b00;
}

/* ── Error page ───────────────────────────────────── */
.error-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      80vh;
    text-align:      center;
    padding:         40px;
    gap:             16px;
}
.error-page h1 { font-family:'Syne',sans-serif; font-size:48px; color:#ff6b00; }
.error-page p  { color:rgba(255,255,255,0.5); font-size:16px; }
.error-page a  { color:#ff6b00; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .section   { padding: 64px 0; }
    .cta-inner { flex-direction:column; text-align:center; }
    .cta-actions { justify-content:center; }
}