html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: #f2f2f2; color: #191919; font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
.home { min-height: 100vh; background: #f2f2f2; overflow-x: hidden; }

@keyframes sysPulse {
    0% { box-shadow: 0 0 0 0 rgba(92, 134, 98, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(92, 134, 98, 0); }
    100% { box-shadow: 0 0 0 0 rgba(92, 134, 98, 0); }
}

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(22, 26, 43, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.site-header__bar { max-width: none; margin: 0 auto; padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 78px; width: auto; }
.site-nav { display: none; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: #c9ccdb; }
.site-nav a { padding: 8px 14px; border-radius: 8px; transition: background .2s, color .2s; }
.site-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.btn-login { display: inline-flex; align-items: center; border: 1px solid rgba(216, 168, 121, 0.75); color: #d8a879; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; flex-shrink: 0; transition: background .2s, color .2s; }
.btn-login:hover { background: #d8a879; color: #161a2b; }
.btn-start { display: none; align-items: center; gap: 10px; background: #d8a879; color: #161a2b; padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; flex-shrink: 0; transition: background .2s; }
.btn-start:hover { background: #e6c29d; color: #161a2b; }
.btn-start__dot { width: 7px; height: 7px; border-radius: 50%; background: #161a2b; display: block; }
.menu-toggle { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.menu-toggle span { height: 1.5px; background: #f2f2f2; display: block; }
.menu-toggle span:nth-child(1),
.menu-toggle span:nth-child(2) { width: 18px; }
.menu-toggle span:nth-child(3) { width: 12px; background: #d8a879; margin-left: 6px; }
.mobile-nav { display: flex; flex-direction: column; padding: 4px 28px 24px; color: #f2f2f2; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 17px; font-weight: 500; }
.mobile-nav .btn-login { margin-top: 18px; justify-content: center; }
.mobile-nav .btn-wa { margin-top: 12px; background: #d8a879; color: #161a2b; padding: 14px 20px; border-radius: 10px; font-size: 16px; font-weight: 600; text-align: center; border-bottom: 0; }
.mobile-nav .btn-wa:hover { background: #e6c29d; color: #161a2b; }

@media (max-width: 720px) {
    .site-header__bar { padding: 8px 16px; gap: 10px; }
    .site-logo img { height: 52px; }
    .btn-login { padding: 8px 12px; font-size: 13px; }
}

@media (min-width: 1080px) {
    .site-nav, .btn-start { display: flex; }
    .menu-toggle, .mobile-nav { display: none !important; }
}

.hero { position: relative; background: #161a2b; color: #f2f2f2; margin-top: -98px; padding-top: 98px; overflow: hidden; }
.grid-fade, .grid-fade-soft { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 64px 64px; }
.grid-fade-soft { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); }
.hero__glow { position: absolute; width: 900px; height: 900px; left: -260px; top: -200px; background: radial-gradient(circle, rgba(85, 95, 136, 0.38), rgba(85, 95, 136, 0) 62%); pointer-events: none; }
.hero__inner { position: relative; max-width: none; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 28px clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); border-radius: 999px; padding: 7px 14px 7px 16px; font-size: 13px; color: #c9ccdb; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #5c8662; display: block; animation: sysPulse 2s infinite; }
.hero h1 { margin: 0; font-size: clamp(42px, 6.2vw, 80px); line-height: 1.12; font-weight: 700; letter-spacing: -0.5px; text-wrap: balance; }
.gold { color: #d8a879; }
.hero__lead { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.85; color: #b9bdd0; max-width: 560px; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-gold, .btn-ghost { padding: 15px 28px; border-radius: 12px; font-size: 16px; transition: background .2s, transform .2s, border-color .2s; }
.btn-gold { background: #d8a879; color: #161a2b; font-weight: 600; }
.btn-gold:hover { background: #e6c29d; color: #161a2b; transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.18); color: #f2f2f2; font-weight: 500; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); color: #fff; }
.mono { font-family: "IBM Plex Mono", monospace; }
.latin { direction: ltr; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #7e84a6; }
.hero__stage { position: relative; padding: 28px 0 36px; }
.hero-window, .shot-window { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero-window { transform: perspective(1600px) rotateY(8deg) rotateX(2deg); transform-origin: left center; }
.chrome { height: 34px; background: #eceaeb; display: flex; align-items: center; gap: 6px; padding: 0 14px; direction: ltr; }
.chrome i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.chrome i:nth-child(1) { background: #974e4d; }
.chrome i:nth-child(2) { background: #d8a879; }
.chrome i:nth-child(3) { background: #5c8662; }
.chrome span { margin-left: 14px; flex: 1; max-width: 260px; height: 20px; border-radius: 6px; background: #fff; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #8a8a90; display: flex; align-items: center; padding: 0 10px; }
.hero-window .shot { aspect-ratio: 16 / 10.5; overflow: hidden; }
.float-sla { position: absolute; top: 0; right: -8px; background: #fff; color: #191919; border-radius: 12px; padding: 14px 16px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.float-sla small { font-size: 12px; color: #6b6b70; }
.float-sla strong { font-family: "IBM Plex Sans", sans-serif; font-size: 28px; font-weight: 600; color: #262b45; }
.float-sla em { font-style: normal; font-size: 12px; font-weight: 600; color: #5c8662; }
.float-code { position: absolute; bottom: 0; left: -8px; background: #1f2438; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 16px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5); font-family: "IBM Plex Mono", monospace; font-size: 12.5px; line-height: 1.7; direction: ltr; }
.float-code .k { color: #d8a879; }
.float-code .p { color: #6b7194; }
.float-code .s { color: #9fc3a5; }
.stats { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.stats__row { max-width: none; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 200px), 1fr)); }
.stat { padding: 28px; border-left: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 6px; }
.stat b { direction: ltr; text-align: right; font-family: "IBM Plex Sans", sans-serif; font-size: clamp(30px, 3.2vw, 40px); font-weight: 500; color: #fff; line-height: 1; }
.stat span { font-size: 14px; color: #9a9fbb; }

.wrap { max-width: none; margin: 0 auto; padding: clamp(80px, 10vw, 136px) 28px 0; }
.eyebrow { direction: ltr; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #9a6f3f; }
h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.28; font-weight: 700; color: #161a2b; text-wrap: balance; }
.slate { color: #555f88; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.split__title, .prose { display: flex; flex-direction: column; gap: 20px; }
.prose { gap: 18px; font-size: 18px; line-height: 1.95; color: #45454b; padding-top: 36px; }
.prose p { margin: 0; text-wrap: pretty; }
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 72px); }
.vision, .mission { position: relative; border-radius: 20px; padding: clamp(28px, 4vw, 44px); overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.vision { background: #fff; border: 1px solid #e2e0e1; }
.mission { background: #262b45; }
.mark { position: absolute; left: 24px; top: -18px; font-family: "IBM Plex Sans", sans-serif; font-size: 140px; font-weight: 200; line-height: 1; }
.vision .mark { color: #5c8662; opacity: 0.18; }
.mission .mark { color: #d8a879; opacity: 0.22; }
.vision h3, .mission h3 { margin: 0; font-size: 15px; font-weight: 600; }
.vision h3 { color: #5c8662; }
.mission h3 { color: #d8a879; }
.vision p, .mission p { position: relative; margin: 0; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.65; font-weight: 500; text-wrap: pretty; }
.vision p { color: #161a2b; }
.mission p { color: #f2f2f2; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pills span { background: #e9e7e8; color: #262b45; border-radius: 10px; padding: 9px 18px; font-size: 15px; font-weight: 600; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 44px; }
.section-head__title { display: flex; flex-direction: column; gap: 16px; }
.section-head p { margin: 0; max-width: 400px; font-size: 17px; line-height: 1.8; color: #6b6b70; }
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.service { background: #fff; border: 1px solid #e2e0e1; border-radius: 18px; padding: 32px 30px 34px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.service:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(38, 43, 69, 0.35); border-color: #c9cbd8; }
.service__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.service__code { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 500; }
.service__n { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #a3a3a8; }
.service h3 { margin: 0; font-size: 22px; font-weight: 600; color: #161a2b; }
.service p { margin: 0; font-size: 16px; line-height: 1.8; color: #5f5f66; text-wrap: pretty; }

.band { position: relative; background: #161a2b; color: #f2f2f2; margin-top: clamp(80px, 10vw, 136px); overflow: hidden; }
.band__inner { position: relative; max-width: none; margin: 0 auto; padding: clamp(72px, 9vw, 120px) 28px; }
.band h2 { color: #f2f2f2; }
.band .eyebrow { color: #d8a879; }
.band__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 40px 0; }
.step { display: flex; flex-direction: column; gap: 18px; padding-left: 24px; }
.step__rail { position: relative; height: 52px; display: flex; align-items: center; }
.step__line { position: absolute; right: 0; left: -24px; top: 26px; height: 1px; background: rgba(255, 255, 255, 0.14); }
.step:last-child .step__line { background: transparent; }
.step__n { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #161a2b; border: 1px solid rgba(216, 168, 121, 0.45); color: #d8a879; display: flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 500; }
.step:first-child .step__n { background: #d8a879; border-color: #d8a879; color: #161a2b; }
.step h3 { margin: 0; font-size: 21px; font-weight: 600; }
.step p { margin: 0; font-size: 15px; line-height: 1.85; color: #a9aec6; }

.work-meta { display: flex; align-items: center; gap: 12px; }
.badge { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 500; color: #262b45; background: #e9e7e8; border-radius: 8px; padding: 7px 12px; direction: ltr; }
.work-meta span:last-child { font-size: 15px; color: #6b6b70; }
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch; }
.shots { display: flex; flex-direction: column; gap: 8px; }
.shot { text-align: right; background: transparent; border: 1px solid transparent; border-radius: 16px; padding: 20px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; transition: background .2s, border-color .2s; color: inherit; }
.shot[aria-pressed="true"] { background: #fff; border-color: #d6d4d5; }
.shot__row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.shot__title { font-size: 18px; font-weight: 600; color: #55555b; }
.shot[aria-pressed="true"] .shot__title { color: #161a2b; }
.shot__n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #a3a3a8; }
.shot[aria-pressed="true"] .shot__n { color: #9a6f3f; }
.shot__text { font-size: 14.5px; line-height: 1.75; color: #8a8a90; }
.shot[aria-pressed="true"] .shot__text { color: #5f5f66; }
.shot__bar { position: absolute; bottom: 0; right: 0; left: 0; height: 2px; background: transparent; }
.shot[aria-pressed="true"] .shot__bar { background: #d8a879; }
.stage { background: #262b45; border-radius: 22px; padding: clamp(16px, 3vw, 36px); display: flex; align-items: center; position: relative; overflow: hidden; }
.stage__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.shot-window { position: relative; width: 100%; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.shot-window[hidden] { display: none; }
.shot-window .chrome { height: 32px; }
.shot-window .chrome i { width: 8px; height: 8px; background: #c9c7c8; }
.shot-window .chrome span { margin-left: 12px; max-width: none; height: auto; background: transparent; }
.shot-window .frame { aspect-ratio: 16 / 10; overflow: hidden; background: #f7f7f7; }
.shot-window img { width: 100%; height: auto; }

@media (min-width: 960px) {
    .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); }
}

.value-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1px; background: #e2e0e1; border: 1px solid #e2e0e1; border-radius: 20px; overflow: hidden; }
.value { background: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; transition: background .2s; }
.value:hover { background: #fafafa; }
.value h3 { margin: 0; font-size: 18px; font-weight: 600; color: #161a2b; display: flex; align-items: center; gap: 10px; }
.value h3 i { width: 6px; height: 6px; border-radius: 2px; background: #d8a879; display: block; }
.value p { margin: 0; font-size: 15px; line-height: 1.75; color: #6b6b70; }
.built { background: #161a2b; color: #f2f2f2; border-radius: 20px; padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.built__head { display: flex; justify-content: space-between; align-items: center; }
.built__head span { font-size: 15px; font-weight: 600; color: #d8a879; }
.built__head b { direction: ltr; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400; color: #7e84a6; }
.feature { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.feature .n { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #d8a879; }
.feature .t { font-size: 18px; font-weight: 500; flex: 1; }
.feature .ok { width: 22px; height: 22px; border-radius: 6px; background: rgba(92, 134, 98, 0.22); color: #9fc3a5; display: flex; align-items: center; justify-content: center; font-size: 13px; }

.systems-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 36px; }
.model-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #e9e7e8; border-radius: 14px; padding: 5px; }
.model-tabs button { font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 10px; border: none; background: transparent; color: #6b6b70; cursor: pointer; transition: background .2s; }
.model-tabs button[aria-pressed="true"] { background: #fff; color: #161a2b; box-shadow: 0 2px 8px rgba(22, 26, 43, 0.1); }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.modules[hidden] { display: none; }
.module { background: #fff; border: 1px solid #e2e0e1; border-radius: 16px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.module:hover { border-color: #555f88; }
.module .n { direction: ltr; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #9a6f3f; }
.module h3 { margin: 0; font-size: 18px; font-weight: 600; color: #161a2b; }
.module p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #6b6b70; }

.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
.integrations { background: #fff; border: 1px solid #e2e0e1; border-radius: 20px; padding: 8px 28px; }
.integration { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid #efedee; }
.integration:last-child { border-bottom-color: transparent; }
.integration .code { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; background: #f2f2f2; border: 1px solid #e2e0e1; color: #262b45; display: flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; direction: ltr; }
.integration div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.integration strong { font-size: 17px; font-weight: 600; color: #161a2b; }
.integration span { font-size: 14.5px; color: #6b6b70; }
.integration .dot { width: 8px; height: 8px; border-radius: 50%; background: #5c8662; display: block; flex-shrink: 0; }
.terminal { background: #161a2b; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.terminal__bar { direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #974e4d; }
.dots i:nth-child(2) { background: #d8a879; }
.dots i:nth-child(3) { background: #5c8662; }
.terminal__bar span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #7e84a6; }
.terminal pre { margin: 0; padding: 24px 0; font-family: "IBM Plex Mono", monospace; font-size: clamp(13px, 1.3vw, 15px); line-height: 2.05; overflow-x: auto; direction: ltr; }
.terminal pre div { display: flex; white-space: pre; padding-right: 20px; }
.ln { width: 48px; flex-shrink: 0; text-align: right; padding-right: 18px; color: #4a5175; }
.c-p { color: #6b7194; }
.c-k { color: #9fc3a5; }
.c-s { color: #c9cde3; }
.c-c { color: #4f567c; }
.c-r { color: #b8a3d9; }

.security-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 52px; }
.security-head__title { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.enforced { direction: ltr; display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #9fc3a5; border: 1px solid rgba(159, 195, 165, 0.3); border-radius: 999px; padding: 8px 14px; }
.enforced i { width: 7px; height: 7px; border-radius: 50%; background: #5c8662; display: block; animation: sysPulse 2s infinite; }
.security-glow { position: absolute; width: 800px; height: 800px; right: -300px; bottom: -400px; background: radial-gradient(circle, rgba(92, 134, 98, 0.25), rgba(92, 134, 98, 0) 62%); pointer-events: none; }
.security-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.sec { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: background .2s, border-color .2s; }
.sec:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(216, 168, 121, 0.4); }
.sec .code { direction: ltr; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #7e84a6; }
.sec strong { font-size: 18px; font-weight: 600; }
.sec span { font-size: 14.5px; color: #a9aec6; line-height: 1.7; }

.sla-note { margin: 0; max-width: 380px; font-size: 15px; line-height: 1.8; color: #6b6b70; }
.sla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.sla-card { background: #fff; border: 1px solid #e2e0e1; border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.sla-card .bar { position: absolute; top: 0; right: 0; left: 0; height: 3px; }
.sla-card .level { align-self: flex-start; font-size: 14px; font-weight: 700; border-radius: 8px; padding: 5px 12px; }
.sla-card p { margin: 0; font-size: 15px; line-height: 1.75; color: #45454b; min-height: 52px; }
.sla-times { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e9e7e8; padding-top: 16px; gap: 12px; }
.sla-times div { display: flex; flex-direction: column; gap: 4px; }
.sla-times small { font-size: 12.5px; color: #8a8a90; }
.sla-times b { font-size: 19px; font-weight: 700; color: #161a2b; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; margin-top: 16px; }
.support-card, .why-card { border-radius: 20px; padding: clamp(26px, 3.5vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.support-card { background: #fff; border: 1px solid #e2e0e1; }
.why-card { background: #262b45; color: #f2f2f2; }
.support-card h3, .why-card h3 { margin: 0; font-size: 22px; font-weight: 600; }
.support-card h3 { color: #161a2b; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 24px; }
.checks div { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; line-height: 1.6; color: #45454b; }
.checks b { color: #5c8662; }
.why { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); align-items: baseline; }
.why .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #d8a879; }
.why span { font-size: 15.5px; color: #dfe1ea; }

.contact-wrap { max-width: none; margin: 0 auto; padding: clamp(80px, 10vw, 136px) 28px clamp(56px, 6vw, 80px); }
.contact { position: relative; background: #161a2b; color: #f2f2f2; border-radius: 28px; padding: clamp(40px, 7vw, 88px) clamp(28px, 6vw, 80px); overflow: hidden; }
.contact__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.contact__glow { position: absolute; width: 700px; height: 700px; left: -200px; top: -300px; background: radial-gradient(circle, rgba(216, 168, 121, 0.22), rgba(216, 168, 121, 0) 60%); pointer-events: none; }
.contact__mark { position: absolute; left: clamp(16px, 5vw, 64px); bottom: -60px; font-family: "IBM Plex Sans", sans-serif; font-size: clamp(200px, 26vw, 360px); font-weight: 200; color: #5c8662; opacity: 0.25; line-height: 1; pointer-events: none; }
.contact__body { position: relative; display: flex; flex-direction: column; gap: 32px; max-width: 720px; }
.contact h2 { color: #f2f2f2; font-size: clamp(40px, 6vw, 76px); line-height: 1.15; }
.contact .btn-gold, .contact .btn-ghost { padding: 16px 30px; }
.contact-lines { display: flex; flex-wrap: wrap; gap: 20px 56px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 28px; }
.contact-lines div { display: flex; flex-direction: column; gap: 6px; }
.contact-lines small { font-size: 13px; color: #9a9fbb; }
.contact-lines a { direction: ltr; text-align: right; font-family: "IBM Plex Sans", sans-serif; font-size: 19px; color: #f2f2f2; }
.contact-lines a:hover { color: #d8a879; }

.site-footer { background: #161a2b; color: #9a9fbb; }
.site-footer__bar { max-width: none; margin: 0 auto; padding: 40px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer img { height: 64px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.site-footer nav a:hover { color: #d8a879; }
.site-footer .copy { direction: ltr; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: #7e84a6; }


@media (max-width: 720px) {
    .hero-window { transform: none; }
    .float-sla, .float-code { position: static; margin-top: 12px; }
    .hero__stage { display: flex; flex-direction: column; }
}