:root {
    --cs-green: #20c889;
    --cs-green-dark: #0c8f63;
    --cs-green-soft: #eafaf4;
    --cs-ink: #07141b;
    --cs-ink-2: #0d2027;
    --cs-text: #16272d;
    --cs-muted: #687a80;
    --cs-line: #dce7e3;
    --cs-bg: #f5f8f7;
    --cs-white: #fff;
    --cs-radius: 24px;
    --cs-shadow: 0 24px 70px rgba(6, 39, 32, .12);
}

.cs-site, .cs-site * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cs-text); background: var(--cs-white); font-family: Sora, Manrope, Inter, Arial, sans-serif; }
.cs-site a { text-decoration: none; }
.cs-site .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.cs-nav-wrap { position: fixed; inset: 0 0 auto 0; z-index: 1000; background: rgba(4, 15, 21, .82); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.cs-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cs-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; letter-spacing: .08em; }
.cs-brand img { width: 42px; height: 42px; object-fit: contain; }
.cs-menu { display: flex; align-items: center; gap: 26px; }
.cs-menu > a:not(.cs-btn) { color: rgba(255,255,255,.76); font-size: .92rem; font-weight: 600; transition: .2s ease; }
.cs-menu > a:not(.cs-btn):hover { color: var(--cs-green); }
.cs-lang { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.16); }
.cs-menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: transparent; }
.cs-menu-toggle span { width: 20px; height: 2px; display: block; margin: 4px auto; background: #fff; }

.cs-hero { position: relative; overflow: hidden; padding: 150px 0 30px; color: #fff; background:
    radial-gradient(circle at 76% 25%, rgba(15,159,108,.27), transparent 28%),
    linear-gradient(135deg, #061018 0%, #07171b 47%, #051015 100%); }
.cs-hero::after { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.cs-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 54px; }
.cs-eyebrow, .cs-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--cs-green-dark); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cs-eyebrow { color: var(--cs-green); }
.cs-hero h1 { margin: 18px 0 0; font-size: clamp(3.7rem, 8vw, 6.6rem); line-height: .88; letter-spacing: -.07em; font-weight: 800; }
.cs-hero h1 span { color: var(--cs-green); }
.cs-hero h2 { margin: 18px 0; font-size: clamp(1.45rem, 2.7vw, 2.5rem); line-height: 1.15; }
.cs-hero-copy > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.72); font-size: 1.08rem; line-height: 1.8; }
.cs-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.cs-btn { min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 750; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn-primary { color: #fff; background: linear-gradient(135deg, #23d095, #0fa971); box-shadow: 0 14px 34px rgba(24, 185, 129, .28); }
.cs-btn-outline { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.03); }
.cs-btn-outline:hover { border-color: var(--cs-green); background: rgba(32,200,137,.08); }
.cs-btn-small { min-height: 42px; padding: 0 18px; }
.cs-hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.cs-hero-visual img { position: relative; z-index: 2; width: 118%; max-width: none; filter: drop-shadow(0 32px 50px rgba(0,0,0,.5)); transform: perspective(1300px) rotateY(-7deg) rotateX(2deg); }
.cs-device-glow { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: rgba(21,196,131,.22); filter: blur(70px); }
.cs-trustbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.cs-trustbar article { display: flex; align-items: center; gap: 14px; padding: 21px 24px; }
.cs-trustbar article + article { border-left: 1px solid rgba(255,255,255,.1); }
.cs-icon { color: var(--cs-green); font-size: 2rem; }
.cs-trustbar strong, .cs-trustbar small { display: block; }
.cs-trustbar strong { font-size: .92rem; }
.cs-trustbar small { margin-top: 4px; color: rgba(255,255,255,.57); line-height: 1.4; }

.cs-section { padding: 110px 0; }
.cs-section-soft { background: var(--cs-bg); }
.cs-section-head { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.cs-section-head h2, .cs-split-copy h2, .cs-showcase h2, .cs-contact h2 { margin: 14px 0 16px; color: var(--cs-ink); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.07; letter-spacing: -.045em; }
.cs-section-head p, .cs-split-copy p { color: var(--cs-muted); font-size: 1.06rem; line-height: 1.8; }
.cs-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cs-feature-card { position: relative; min-height: 360px; padding: 34px; overflow: hidden; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: #fff; box-shadow: 0 14px 44px rgba(7, 39, 31, .07); transition: .25s ease; }
.cs-feature-card:hover { transform: translateY(-7px); box-shadow: var(--cs-shadow); }
.cs-feature-card-highlight { color: #fff; border-color: transparent; background: linear-gradient(145deg, #0d8f64, #073f37); }
.cs-feature-number { position: absolute; top: 22px; right: 26px; color: rgba(10,89,66,.08); font-size: 4.6rem; font-weight: 900; }
.cs-feature-card-highlight .cs-feature-number { color: rgba(255,255,255,.08); }
.cs-feature-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 17px; color: var(--cs-green-dark); background: var(--cs-green-soft); font-size: 1.8rem; }
.cs-feature-card-highlight .cs-feature-icon { color: #fff; background: rgba(255,255,255,.13); }
.cs-feature-card h3 { position: relative; margin: 28px 0 14px; font-size: 1.45rem; }
.cs-feature-card p { position: relative; min-height: 90px; color: var(--cs-muted); line-height: 1.75; }
.cs-feature-card-highlight p { color: rgba(255,255,255,.72); }
.cs-feature-card a { position: relative; color: var(--cs-green-dark); font-weight: 750; }
.cs-feature-card-highlight a { color: #6cf0bf; }

.cs-showcase, .cs-contact { color: #fff; background: linear-gradient(135deg, #06161d, #0b2a27); }
.cs-showcase { padding: 105px 0; overflow: hidden; }
.cs-showcase-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
.cs-showcase h2, .cs-contact h2 { color: #fff; }
.cs-showcase p, .cs-contact p { max-width: 590px; color: rgba(255,255,255,.66); line-height: 1.8; }
.cs-kicker-dark { color: #52d7aa; }
.cs-mini-dashboard { min-height: 400px; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: rgba(255,255,255,.06); box-shadow: 0 30px 70px rgba(0,0,0,.28); transform: rotate(2deg); }
.cs-mini-top { height: 34px; display: flex; gap: 8px; align-items: center; }
.cs-mini-top span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.cs-mini-content { height: calc(100% - 34px); padding: 30px; border-radius: 18px; background: #f7fbf9; color: var(--cs-ink); }
.cs-stat small, .cs-stat strong, .cs-stat em { display: block; }
.cs-stat strong { margin: 6px 0; font-size: 2rem; }
.cs-stat em { color: #0a9e6c; font-style: normal; }
.cs-chart { height: 130px; display: flex; align-items: end; gap: 14px; margin: 28px 0; }
.cs-chart i { flex: 1; border-radius: 10px 10px 3px 3px; background: linear-gradient(#25cc92, #0d8f64); }
.cs-chart i:nth-child(1) { height: 34%; }.cs-chart i:nth-child(2) { height: 51%; }.cs-chart i:nth-child(3) { height: 44%; }.cs-chart i:nth-child(4) { height: 72%; }.cs-chart i:nth-child(5) { height: 65%; }.cs-chart i:nth-child(6) { height: 90%; }.cs-chart i:nth-child(7) { height: 82%; }
.cs-mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-mini-cards b { height: 74px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; }

.cs-split { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 70px; }
.cs-image-frame { position: relative; }
.cs-image-frame::before { content: ''; position: absolute; inset: -18px 18px 18px -18px; border-radius: 28px; background: linear-gradient(135deg, #1fd093, #0d765a); }
.cs-image-frame img { position: relative; width: 100%; min-height: 500px; object-fit: cover; border-radius: 24px; box-shadow: var(--cs-shadow); }
.cs-split-copy .cs-btn { margin-top: 16px; }

.cs-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cs-benefit-grid article { padding: 32px; border-top: 3px solid var(--cs-green); border-radius: 0 0 20px 20px; background: var(--cs-bg); }
.cs-benefit-grid span { color: var(--cs-green-dark); font-size: .76rem; font-weight: 900; letter-spacing: .15em; }
.cs-benefit-grid h3 { margin: 18px 0 10px; color: var(--cs-ink); }
.cs-benefit-grid p { color: var(--cs-muted); line-height: 1.75; }

.cs-contact { padding: 105px 0; }
.cs-contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; }
.cs-contact-info { display: grid; gap: 10px; margin-top: 32px; }
.cs-contact-info a { color: #60e0b2; font-weight: 750; }
.cs-contact-info span { color: rgba(255,255,255,.62); }
.cs-form { display: grid; gap: 14px; padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(255,255,255,.06); }
.cs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-form input, .cs-form textarea { width: 100%; padding: 16px 18px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; outline: none; background: rgba(3,15,18,.42); font: inherit; }
.cs-form input::placeholder, .cs-form textarea::placeholder { color: rgba(255,255,255,.48); }
.cs-form input:focus, .cs-form textarea:focus { border-color: var(--cs-green); box-shadow: 0 0 0 3px rgba(32,200,137,.12); }
.cs-form .cs-btn { justify-self: start; cursor: pointer; }

@media (max-width: 992px) {
    .cs-menu-toggle { display: block; }
    .cs-menu { position: absolute; top: 68px; left: 20px; right: 20px; display: none; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #091920; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
    .cs-menu.is-open { display: grid; }
    .cs-lang { padding-left: 0; border-left: 0; }
    .cs-hero-grid, .cs-showcase-grid, .cs-split, .cs-contact-grid { grid-template-columns: 1fr; }
    .cs-hero-copy { text-align: center; }
    .cs-hero-copy > p { margin-inline: auto; }
    .cs-actions { justify-content: center; }
    .cs-hero-visual { min-height: 360px; }
    .cs-hero-visual img { width: 100%; transform: none; }
    .cs-trustbar { grid-template-columns: 1fr 1fr; }
    .cs-trustbar article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .cs-trustbar article:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); }
    .cs-card-grid, .cs-benefit-grid { grid-template-columns: 1fr; }
    .cs-showcase-grid, .cs-split, .cs-contact-grid { gap: 42px; }
}

@media (max-width: 620px) {
    .cs-site .container { width: min(100% - 24px, 1180px); }
    .cs-brand span { font-size: .84rem; }
    .cs-hero { padding-top: 118px; }
    .cs-hero h1 { font-size: clamp(3.2rem, 18vw, 4.5rem); }
    .cs-trustbar { grid-template-columns: 1fr; }
    .cs-trustbar article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .cs-section { padding: 78px 0; }
    .cs-form-row { grid-template-columns: 1fr; }
    .cs-image-frame img { min-height: 330px; }
    .cs-mini-dashboard { min-height: 320px; }
    .cs-mini-content { padding: 20px; }
}