/*
Theme Name:   GeneratePress Child - MIL SPIL
Template:     generatepress
Version:      1.0.0
Description:  MIL SPIL — Developer Portfolio. IDE 50/50 concept.
Author:       Yuriy | MIL SPIL
Author URI:   https://milspil.net
*/

/* =====================================================
   GOOGLE FONTS
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700&family=JetBrains+Mono:wght@300;400;500;700&family=Montserrat:wght@700;800&display=swap');

/* =====================================================
   GLOBAL
   ===================================================== */
html,
body {
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* ── Mobile-only line break ─────────────────────────── */
.ms-mob-br {
  display: none;
}

@media (max-width: 768px) {
  .ms-mob-br {
    display: block;
  }
}

/* ── Back to top button (custom) ─────────────────────── */
button.ms-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #1a1a2e;
  border: 1px solid rgba(78, 201, 176, 0.25);
  border-radius: 8px;
  color: #4EC9B0;
  padding: 0;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ms-back-to-top.visible {
  opacity: 0.85;
  visibility: visible;
}

.ms-back-to-top svg {
  width: 18px;
  height: 18px;
}

.ms-back-to-top:hover {
  background: #232340;
  border-color: #4EC9B0;
  color: #fff;
  opacity: 1;
  box-shadow: 0 0 12px rgba(78, 201, 176, 0.25);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .ms-back-to-top:hover {
    background: #1a1a2e;
    border-color: rgba(78, 201, 176, 0.25);
    color: #4EC9B0;
    box-shadow: none;
    transform: none;
  }

  .ms-back-to-top:active {
    background: #232340;
    border-color: #4EC9B0;
    color: #fff;
  }
}

/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {
  --ms-dark: #1E1E2E;
  --ms-dark-2: #252537;
  --ms-dark-3: #2D2D3F;
  --ms-accent: #00D4AA;
  --ms-accent-dim: #00b891;
  --ms-error: #FF6B6B;
  --ms-info: #4FC1FF;
  --ms-warning: #FFB86C;
  --ms-success: #50FA7B;
  --ms-light: #F5F5F5;
  --ms-white: #FFFFFF;
  --ms-text-dark: #CCCCCC;
  --ms-text-muted: #555570;
  --ms-text-code: #E8E8F0;
  --ms-syn-green: #00D4AA;
  --ms-syn-blue: #4FC1FF;
  --ms-syn-orange: #FFB86C;
  --ms-syn-purple: #BD93F9;
  --ms-syn-pink: #FF79C6;
  --ms-syn-red: #FF6B6B;
  --ms-syn-yellow: #F1FA8C;
  --ms-syn-comment: #6272A4;
  --ms-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --ms-font-sans: 'Inter', system-ui, sans-serif;
  --ms-radius: 6px;
  --ms-radius-lg: 12px;
  --ms-max-width: 1280px;
  --ms-transition: 0.2s ease;
  --accent: #00D4AA;
  --base-2: #F5F5F5;
}

/* =====================================================
   BASE
   ===================================================== */
body {
  font-family: var(--ms-font-sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ms-font-sans);
  font-weight: 600;
  line-height: 1.25;
}

code,
pre,
kbd {
  font-family: var(--ms-font-mono);
}

a {
  color: var(--ms-accent);
}

a:hover {
  color: var(--ms-accent-dim);
}

a,
button,
.main-navigation .main-nav ul li a {
  transition: color var(--ms-transition), background-color var(--ms-transition), opacity var(--ms-transition);
}

.grid-container {
  max-width: var(--ms-max-width);
}

/* =====================================================
   LOGO — HIDDEN
   ===================================================== */
.site-branding,
.site-branding-container,
.site-logo,
.header-image.is-logo-image {
  display: none !important;
}

/* =====================================================
   HEADER — Thin dark IDE bar
   ===================================================== */
.site-header {
  background-color: var(--ms-dark) !important;
  border-bottom: 1px solid var(--ms-dark-3);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.inside-header {
  padding: 0 !important;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 769px) {

  .main-navigation.mobile-menu-control-wrapper,
  .mobile-menu-control-wrapper,
  .menu-toggle {
    display: none !important;
  }
}

/* =====================================================
   NAVIGATION — VS Code IDE style
   ===================================================== */
.main-navigation {
  background-color: transparent !important;
  width: 100%;
}

.main-navigation .inside-navigation {
  display: flex;
  justify-content: center;
  padding: 0;
}

/* Reset submenu background */
.main-navigation ul ul {
  background-color: transparent;
}

/* Top-level list */
.main-navigation .main-nav>ul {
  counter-reset: nav-counter;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 52px;
  gap: 4px;
}

.main-navigation .main-nav>ul>li {
  counter-increment: nav-counter;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  /* Needed for ::after bridge */
}

/* ── Transparent bridge ── fills the 8px gap between header and dropdown.
   Mouse hovering over ::after is still "on" the li → SuperFish keeps menu open. */
.main-navigation .main-nav>ul>li::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 12px;
  /* 8px margin-top + 4px buffer */
  background: transparent;
  z-index: 99998;
  pointer-events: all;
}

/* Nav link */
.main-navigation .main-nav>ul>li>a {
  font-family: var(--ms-font-mono) !important;
  font-size: 1.05rem !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 16px !important;
  height: 52px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  text-transform: none !important;
  position: relative;
}

/* Number badge — macOS rounded pill */
.main-navigation .main-nav>ul>li>a::before {
  content: "0" counter(nav-counter);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--ms-font-mono);
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  /* macOS-style rounded */
  padding: 2px 5px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* ── VS Code syntax color per position ── */
/* 01 Головна  → teal   (function name) */
.main-navigation .main-nav>ul>li:nth-child(1)>a {
  color: #4EC9B0 !important;
}

/* 02 Портфоліо → orange (string) */
.main-navigation .main-nav>ul>li:nth-child(2)>a {
  color: #CE9178 !important;
}

/* 03 Послуги  → blue   (variable) */
.main-navigation .main-nav>ul>li:nth-child(3)>a {
  color: #9CDCFE !important;
}

/* 04 Блог     → green  (keyword) */
.main-navigation .main-nav>ul>li:nth-child(4)>a {
  color: #4EC9B0 !important;
}

/* 05 Про мене → purple (type/class) */
.main-navigation .main-nav>ul>li:nth-child(5)>a {
  color: #C586C0 !important;
}

/* 06 Контакти → yellow (constant) */
.main-navigation .main-nav>ul>li:nth-child(6)>a {
  color: #DCDCAA !important;
}

/* Hover — same as dropdown: subtle teal row + teal number badge */
.main-navigation .main-nav>ul>li>a:hover {
  color: #FFFFFF !important;
  opacity: 1;
  background: rgba(78, 201, 176, 0.10) !important;
}

.main-navigation .main-nav>ul>li>a:hover::before {
  background: #4EC9B0 !important;
  color: #1E1E2E !important;
  border-color: #4EC9B0 !important;
}

/* Active / current page — bright + underline accent */
.main-navigation .main-nav>ul>li[class*="current-menu-"]>a {
  opacity: 1 !important;
  font-weight: 700;
}

.main-navigation .main-nav>ul>li[class*="current-menu-"]>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
}

/* Dropdown arrow */
.main-navigation .dropdown-menu-toggle {
  color: rgba(255, 255, 255, 0.3) !important;
  padding: 0 4px !important;
  font-size: 0.6rem !important;
}

/* =====================================================
   DROPDOWN — IDE Terminal window (services.menu)
   ===================================================== */
.main-navigation ul ul {
  background-color: #1E1E2E !important;
  border: 1px solid #2D2D45 !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.8) !important;
  min-width: 360px !important;
  padding: 0 !important;
  /* overflow:hidden + isolation = hover teal stays within border-radius */
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
  /* GPU layer forces correct border-radius clipping */
  margin-top: 8px !important;
  /* 8px gap below header */
  counter-reset: dropdown-counter;
  top: 100% !important;
  left: 0 !important;
}

/* Titlebar: 🔴🟡🟢  +  services.menu */
.main-navigation ul ul::before {
  content: 'services.menu';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  color: #8A8AAA;
  /* Readable light grey */
  font-family: var(--ms-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #1A1A30;
  background-color: #2A2A2A;
  background-image:
    radial-gradient(circle at center, #FF5F57 4px, transparent 4px),
    radial-gradient(circle at center, #FEBC2E 4px, transparent 4px),
    radial-gradient(circle at center, #28C840 4px, transparent 4px);
  background-size: 12px 12px, 12px 12px, 12px 12px;
  background-position: 14px center, 32px center, 50px center;
  background-repeat: no-repeat;
}

/* Row */
.main-navigation ul ul>li {
  counter-increment: dropdown-counter;
  display: flex !important;
  align-items: stretch;
  border-bottom: 1px solid rgba(45, 45, 63, 0.5);
  transition: background-color var(--ms-transition);
  background-color: transparent;
}

/* Line number gutter */
.main-navigation ul ul>li::before {
  content: counter(dropdown-counter);
  color: #70709A;
  /* Readable light-grey */
  font-family: var(--ms-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1px solid #2D2D45;
  background-color: #2A2A2A;
  user-select: none;
  transition: background-color var(--ms-transition), color var(--ms-transition);
}

/* Link — use .main-nav in selector for higher specificity than GP's generated CSS */
.main-navigation .main-nav ul ul li a {
  color: #4EC9B0 !important;
  font-family: var(--ms-font-mono) !important;
  font-size: 0.88rem !important;
  padding: 15px 20px !important;
  height: auto !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex: 1;
  text-decoration: none !important;
  transition: color var(--ms-transition) !important;
  border-left: none !important;
  text-transform: none !important;
  font-weight: 400;
  box-sizing: border-box !important;
}

/* $ prompt */
.main-navigation .main-nav ul ul li a::before {
  content: "$";
  opacity: 0.6;
  font-size: 0.88rem;
  min-width: 12px;
  display: inline-block !important;
  flex-shrink: 0;
}

/* ── VS Code syntax colors per item (like header nav) ── */
/* 1: teal     — function name  */
.main-navigation .main-nav ul ul li:nth-child(1)>a,
.main-navigation .main-nav ul ul li:nth-child(1)>a::before {
  color: #4EC9B0 !important;
}

/* 2: blue     — variable       */
.main-navigation .main-nav ul ul li:nth-child(2)>a,
.main-navigation .main-nav ul ul li:nth-child(2)>a::before {
  color: #9CDCFE !important;
}

/* 3: orange   — string         */
.main-navigation .main-nav ul ul li:nth-child(3)>a,
.main-navigation .main-nav ul ul li:nth-child(3)>a::before {
  color: #CE9178 !important;
}

/* 4: yellow   — function call  */
.main-navigation .main-nav ul ul li:nth-child(4)>a,
.main-navigation .main-nav ul ul li:nth-child(4)>a::before {
  color: #DCDCAA !important;
}

/* 5: magenta  — keyword        */
.main-navigation .main-nav ul ul li:nth-child(5)>a,
.main-navigation .main-nav ul ul li:nth-child(5)>a::before {
  color: #C586C0 !important;
}

/* ── HOVER ── teal gutter + ► arrow + white text */
.main-navigation .main-nav ul ul li:hover::before {
  background-color: #4EC9B0 !important;
  color: #1E1E2E !important;
  font-weight: 700 !important;
}

.main-navigation .main-nav ul ul li:hover>a {
  color: #FFFFFF !important;
}

.main-navigation .main-nav ul ul li:hover>a::before {
  content: "►" !important;
  opacity: 1 !important;
  color: #FFFFFF !important;
}

.main-navigation .main-nav ul ul li:hover {
  background-color: rgba(78, 201, 176, 0.08) !important;
}

/* ── ACTIVE (current page) ── */
.main-navigation .main-nav ul ul li.current-menu-item::before {
  background-color: #4EC9B0 !important;
  color: #1E1E2E !important;
  font-weight: 700 !important;
}

.main-navigation .main-nav ul ul li.current-menu-item a {
  color: #FFFFFF !important;
  font-weight: 600;
}

.main-navigation .main-nav ul ul li.current-menu-item a::before {
  content: "►" !important;
  opacity: 1 !important;
  color: #FFFFFF !important;
}

.main-navigation .main-nav ul ul li.current-menu-item {
  background-color: rgba(78, 201, 176, 0.1) !important;
}

/* =====================================================
   MOBILE

   ===================================================== */
@media (max-width: 768px) {
  .inside-header {
    justify-content: flex-end;
    padding: 0 16px !important;
  }

  .menu-toggle {
    color: var(--ms-text-dark) !important;
    background: transparent !important;
    border: 1px solid var(--ms-dark-3);
    border-radius: var(--ms-radius);
    height: 36px;
    padding: 0 14px !important;
    font-family: var(--ms-font-mono) !important;
    font-size: 0.8rem !important;
  }

  .main-navigation .main-nav ul {
    background-color: var(--ms-dark-2) !important;
  }

  .main-navigation .main-nav>ul>li>a {
    height: auto !important;
    padding: 14px 20px !important;
  }
}

/* =====================================================
   ADMIN BAR STICKY OFFSET
   ===================================================== */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* =====================================================
   BUTTONS
   ===================================================== */
button,
input[type="submit"],
a.button,
.wp-block-button__link {
  background-color: var(--ms-accent);
  color: var(--ms-dark);
  font-family: var(--ms-font-mono);
  font-weight: 700;
  border-radius: var(--ms-radius);
  border: none;
}

button:hover,
input[type="submit"]:hover,
a.button:hover,
.wp-block-button__link:hover {
  background-color: var(--ms-accent-dim);
  color: var(--ms-dark);
}

/* =====================================================
   STICKY FOOTER — body bg matches status bar color
   ===================================================== */
html,
body {
  background-color: #1a1a2e;
}

/* Content area stays white/light */
.site {
  background-color: transparent;
}

footer.ms-footer {
  flex-shrink: 0;
}

/* Hide default GP page content on front page — replaced by ms-hero */
body.home .site-content,
body.home .content-area,
body.home .entry-title,
body.home .page-header {
  display: none !important;
}



/* Hide GP default footer & collapse its wrapper */
.site-footer .site-info,
.site-footer .inside-site-info,
.site-footer .copyright-bar,
.site-footer>.footer-bar,
.site-footer .copyright,
.site-footer>.inside-footer {
  display: none !important;
}

footer.site-footer {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.ms-footer {
  font-family: var(--ms-font-mono);
  background-color: #1A1A2C;
  background-image:
    radial-gradient(circle, rgba(78, 201, 176, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  border-top: 1px solid #2D2D45;
  margin-top: 0;
  width: 100%;
}

/* ── Main body ── */
.ms-footer-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 64px 48px 56px;
}

/* Brand column */
.ms-footer-logo-link {
  display: inline-block;
}

.ms-footer-logo {
  width: 80px;
  height: auto;
  opacity: 0.9;
  margin-bottom: 16px;
  display: block;
}

.ms-footer-comment {
  color: #5DBB7E;
  font-size: 0.88rem;
  margin: 0 0 12px;
  letter-spacing: 0.05em;
}

.ms-footer-desc {
  color: #8A8AAA;
  font-size: 0.88rem;
  line-height: 1.8;
  margin: 0;
}

/* Column titles */
.ms-footer-col-title {
  color: #5DBB7E;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  text-transform: lowercase;
}

/* Nav links */
.ms-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-footer-link {
  font-size: 0.95rem;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  letter-spacing: 0.02em;
}

.ms-footer-link:hover {
  opacity: 0.75;
  transform: translateX(4px);
}

.ms-footer-prompt {
  opacity: 0.45;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* VS Code syntax colors per nav item */
.ms-footer-nav .ms-footer-link:nth-child(1) {
  color: #4EC9B0 !important;
}

.ms-footer-nav .ms-footer-link:nth-child(2) {
  color: #9CDCFE !important;
}

.ms-footer-nav .ms-footer-link:nth-child(3) {
  color: #CE9178 !important;
}

.ms-footer-nav .ms-footer-link:nth-child(4) {
  color: #DCDCAA !important;
}

.ms-footer-nav .ms-footer-link:nth-child(5) {
  color: #C586C0 !important;
}

.ms-footer-nav .ms-footer-link:nth-child(6) {
  color: #F48771 !important;
}

/* Contact column */
.ms-footer-contact-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ms-footer-contact-col .ms-footer-link {
  margin-bottom: 10px;
}

.ms-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.ms-footer-social {
  color: #4EC9B0 !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(78, 201, 176, 0.1);
  border: 1px solid rgba(78, 201, 176, 0.25);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0.08em;
  transition: background 0.2s, border-color 0.2s;
}

.ms-footer-social:hover {
  background: rgba(78, 201, 176, 0.18);
  border-color: rgba(78, 201, 176, 0.5);
}

/* ── VS Code Status Bar ── */
.ms-footer-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #111120;
  border-top: 2px solid #4EC9B0;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ms-font-mono);
  font-size: 0.7rem;
  padding: 0 16px;
  height: 28px;
  letter-spacing: 0.03em;
  user-select: none;
}

.ms-sb-left,
.ms-sb-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ms-sb-center {
  opacity: 0.75;
  font-size: 0.72rem;
}

.ms-sb-branch {
  font-weight: 600;
  color: #4EC9B0;
  opacity: 1;
}

.ms-sb-sync {
  opacity: 0.6;
}

.ms-sb-right span {
  opacity: 0.6;
}

.ms-sb-right span:hover {
  opacity: 0.7;
  cursor: default;
}

/* ── Footer responsive ── */
@media (max-width: 900px) {
  .ms-footer-body {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 40px 24px 36px;
  }
}

@media (max-width: 600px) {
  .ms-footer-body {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 20px 28px;
  }

  .ms-footer-statusbar {
    flex-direction: column;
    height: auto;
    padding: 6px 16px;
    gap: 2px;
    text-align: center;
  }
}

/* =====================================================
   HERO SECTION — IDE / VS Code style (front page)
   ===================================================== */

.ms-hero {
  min-height: calc(100vh - 72px);
  background: linear-gradient(135deg, #0A0A18 0%, #141428 55%, #0D1F1A 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 10vw;
  position: relative;
  overflow: hidden;
}

/* Subtle grid background */
.ms-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(78, 201, 176, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 201, 176, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Glow accent top-left */
.ms-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  left: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(78, 201, 176, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Left content ── */
.ms-hero-content {
  flex: 1;
  max-width: 580px;
  position: relative;
  z-index: 1;
}

.ms-hero-eyebrow {
  font-family: var(--ms-font-mono);
  color: #4A9060;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  margin: 0 0 28px;
}

.ms-hero-logo-link {
  display: inline-block;
  margin-bottom: 28px;
}

.ms-hero-logo {
  width: 72px;
  height: auto;
  display: block;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.ms-hero-logo-link:hover .ms-hero-logo {
  opacity: 1;
}

.ms-hero-title {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: 1.06;
  color: #FFFFFF;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}

.ms-hero-accent {
  color: #4EC9B0;
  display: inline-block;
}

.ms-hero-subtitle {
  font-family: var(--ms-font-mono);
  color: #7A7A9A;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 40px;
}

/* ── CTA Buttons ── */
.ms-hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.ms-hero-btn-primary {
  font-family: var(--ms-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: #1E1E2E !important;
  background: #4EC9B0;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 24px rgba(78, 201, 176, 0.25);
}

.ms-hero-btn-primary:hover {
  background: #5EDAD0;
  transform: translateY(-2px);
  box-shadow: 0 6px 32px rgba(78, 201, 176, 0.4);
}

.ms-hero-prompt {
  opacity: 0.6;
}

/* Blinking cursor */
@keyframes ms-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.ms-hero-cursor {
  animation: ms-blink 1s step-end infinite;
  font-weight: 400;
}

.ms-hero-btn-secondary {
  font-family: var(--ms-font-mono);
  font-size: 0.9rem;
  color: #4EC9B0 !important;
  text-decoration: none !important;
  border: 1px solid rgba(78, 201, 176, 0.3);
  padding: 13px 24px;
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.ms-hero-btn-secondary:hover {
  border-color: #4EC9B0;
  background: rgba(78, 201, 176, 0.07);
  transform: translateY(-2px);
}

/* ── Tech tags ── */
.ms-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ms-hero-tags span {
  font-family: var(--ms-font-mono);
  font-size: 0.72rem;
  color: #5A5A7A;
  border: 1px solid #2D2D45;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  transition: color 0.2s, border-color 0.2s;
  animation: tagPulse 5s ease-in-out infinite;
}

.ms-hero-tags span:nth-child(1) {
  animation-delay: 0s;
}

.ms-hero-tags span:nth-child(2) {
  animation-delay: 0.5s;
}

.ms-hero-tags span:nth-child(3) {
  animation-delay: 1.0s;
}

.ms-hero-tags span:nth-child(4) {
  animation-delay: 1.5s;
}

@keyframes tagPulse {
  0% {
    color: #5A5A7A;
    border-color: #2D2D45;
  }

  8% {
    color: #4EC9B0;
    border-color: rgba(78, 201, 176, 0.4);
  }

  16% {
    color: #5A5A7A;
    border-color: #2D2D45;
  }

  100% {
    color: #5A5A7A;
    border-color: #2D2D45;
  }
}

.ms-hero-tags span:hover {
  color: #4EC9B0;
  border-color: rgba(78, 201, 176, 0.4);
}

/* ── Right: code editor window ── */
.ms-hero-deco {
  flex: 0 0 440px;
  position: relative;
  z-index: 1;
}

.ms-hero-window {
  background: #1E1E2E;
  border-radius: 10px;
  border: 1px solid #2D2D45;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(78, 201, 176, 0.06);
  overflow: hidden;
  font-family: var(--ms-font-mono);
  font-size: 0.82rem;
}

/* Title bar */
.ms-hero-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #2A2A3A;
  border-bottom: 1px solid #373750;
}

.ms-tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.ms-tl-red {
  background: radial-gradient(circle at 35% 35%, #FF7B72, #FF5F57 4px, #FF5F57);
}

.ms-tl-yellow {
  background: radial-gradient(circle at 35% 35%, #FFD97A, #FFBD2E 4px, #FFBD2E);
}

.ms-tl-green {
  background: radial-gradient(circle at 35% 35%, #74E67C, #28C840 4px, #28C840);
}

.ms-hero-window-title {
  flex: 1;
  text-align: center;
  color: #8A8AAA;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Code body */
.ms-hero-window-body {
  padding: 16px 0;
  line-height: 1.8;
}

.ms-code-row {
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  gap: 0;
  white-space: nowrap;
  min-height: 36px;
  line-height: 36px;
}

.ms-code-row.ms-code-active {
  background: rgba(78, 201, 176, 0.06);
  border-left: 2px solid #4EC9B0;
}

.ms-ln {
  min-width: 40px;
  text-align: right;
  padding-right: 20px;
  color: #3A3A58;
  font-size: 0.78rem;
  user-select: none;
  flex-shrink: 0;
}

.ms-code-active .ms-ln {
  color: #5A5A78;
}

/* Syntax token colors */
.ms-kw {
  color: #569CD6;
}

.ms-prop~.ms-kw {
  margin-left: auto;
}

.ms-var {
  color: #9CDCFE;
}

.ms-prop {
  color: #9CDCFE;
  display: inline-block;
  min-width: 80px;
}

.ms-str {
  color: #CE9178;
  margin-left: auto;
}

.ms-num {
  color: #B5CEA8;
  margin-left: auto;
}

.ms-fn {
  color: #DCDCAA;
}

.ms-op {
  color: #D4D4D4;
}

.ms-comment {
  color: #4EC9B0;
  opacity: 0.7;
}

/* Terminal strip */
.ms-hero-terminal {
  background: #111120;
  border-top: 1px solid #2D2D45;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
}

.ms-term-prompt {
  color: #4EC9B0;
}

.ms-term-cmd {
  color: #CCCCCC;
}

.ms-term-ok {
  color: #4EC9B0;
  opacity: 0.7;
  margin-left: auto;
}

/* ── Hero responsive ── */
@media (max-width: 1100px) {
  .ms-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 40px;
    gap: 48px;
  }

  .ms-hero-deco {
    flex: unset;
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  .ms-hero {
    padding: 48px 20px;
    min-height: calc(100svh - 72px);
    justify-content: center;
  }

  .ms-hero-title {
    font-size: 2.6rem;
  }

  .ms-hero-deco {
    display: none;
  }
}

/* =====================================================
   MOBILE NAVIGATION — IDE Dropdown Panel
   ===================================================== */

/* Backdrop */
.ms-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ms-nav-backdrop.ms-active {
  opacity: 1;
  pointer-events: all;
}

/* Lock body scroll */
body.ms-menu-open {
  overflow: hidden !important;
}

@media (max-width: 768px) {

  /* Header stays on top */
  .site-header {
    z-index: 10000 !important;
  }

  /* ── Dropdown panel ─────────────────────────────── */
  .ms-mobile-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #1E1E2E;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 10001;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  }

  .ms-mobile-menu.ms-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  /* ── Title bar ──────────────────────────────────── */
  .ms-mob-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
  }

  .ms-mob-title {
    font-family: var(--ms-font-mono, monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 6px;
    letter-spacing: 0.5px;
  }

  /* ── Nav body ───────────────────────────────────── */
  .ms-mob-body {
    padding: 6px 0 12px;
  }

  /* ── Nav item ───────────────────────────────────── */
  .ms-mob-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: var(--ms-font-ui, Inter, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease, padding-left 0.2s ease;
  }

  .ms-mob-link:hover,
  .ms-mob-has-sub.ms-sub-open>.ms-mob-link {
    background: rgba(255, 255, 255, 0.04);
    padding-left: 26px;
  }

  .ms-mob-num {
    font-family: var(--ms-font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 2px 5px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  .ms-mob-label {
    flex: 1;
  }

  .ms-mob-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }

  .ms-mob-has-sub.ms-sub-open .ms-mob-arrow {
    transform: rotate(90deg);
  }

  /* ── Sub-menu ───────────────────────────────────── */
  .ms-mob-sub {
    display: none;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 0 8px;
  }

  .ms-mob-sub.ms-active {
    display: block;
    animation: ms-sub-open 0.2s ease;
  }

  @keyframes ms-sub-open {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

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

  .ms-mob-sub-link {
    display: block;
    padding: 10px 20px 10px 56px;
    font-family: var(--ms-font-mono, monospace);
    font-size: 0.82rem;
    color: rgba(204, 204, 204, 0.65);
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
  }

  .ms-mob-sub-link:hover {
    color: #4EC9B0;
    padding-left: 62px;
  }

  .ms-mob-prompt {
    color: #4EC9B0;
    margin-right: 8px;
  }
}

/* =====================================================
   MOBILE MENU TRIGGER — IDE Style Button
   ===================================================== */
@media (max-width: 768px) {

  /* Hide the default GP toggle styling */
  .menu-toggle.ms-menu-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    padding: 7px 14px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-left: auto !important;
    /* push to right */
    position: relative !important;
    z-index: 10002;
    box-shadow: none !important;
  }

  .menu-toggle.ms-menu-btn:hover {
    border-color: rgba(78, 201, 176, 0.5) !important;
    background: rgba(78, 201, 176, 0.06) !important;
  }

  .menu-toggle.ms-menu-btn.ms-open {
    border-color: #4EC9B0 !important;
    background: rgba(78, 201, 176, 0.08) !important;
  }

  /* Hamburger lines — 3 bars in teal */
  .menu-toggle.ms-menu-btn::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: #4EC9B0;
    box-shadow: 0 5px 0 #4EC9B0, 0 10px 0 #4EC9B0;
    transition: all 0.25s ease;
    flex-shrink: 0;
  }

  /* When open — show X */
  .menu-toggle.ms-menu-btn.ms-open::before {
    background: #4EC9B0;
    box-shadow: none;
    width: 16px;
    height: 2px;
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.ms-menu-btn.ms-open::after {
    content: '';
    display: block;
    position: absolute;
    left: 14px;
    width: 16px;
    height: 2px;
    background: #4EC9B0;
    transform: rotate(-45deg) translate(0, -1px);
  }

  /* IDE label text */
  .menu-toggle.ms-menu-btn span.ms-menu-label {
    font-family: var(--ms-font-mono, monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    transition: color 0.2s;
  }

  .menu-toggle.ms-menu-btn:hover span.ms-menu-label,
  .menu-toggle.ms-menu-btn.ms-open span.ms-menu-label {
    color: #4EC9B0;
  }
}

@media (max-width: 768px) {

  /* Hide GP's native nav items — our custom panel replaces them */
  .main-navigation.sub-menu-right {
    display: none !important;
  }

  /* Show branding if GP hides it (logo is in mobile-menu-control-wrapper) */
  .mobile-menu-control-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
    right: auto !important;
  }
}

@media (max-width: 768px) {

  /* Mobile header logo */
  .ms-mob-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .ms-mob-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  /* Toggle button — compact, auto width, pushed to right */
  .menu-toggle.ms-menu-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }
}

/* ─── Mobile menu: fonts match desktop nav ─────────── */
@media (max-width: 768px) {
  .ms-mob-link {
    font-family: var(--ms-font-mono, 'JetBrains Mono', 'Fira Code', monospace) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }

  /* ─── Restyle trigger button → // navigation ─────── */
  .menu-toggle.ms-menu-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    font-family: var(--ms-font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.45) !important;
    transition: border-color 0.2s, background 0.2s, color 0.2s !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10001;
  }

  .menu-toggle.ms-menu-btn:hover {
    border-color: rgba(78, 201, 176, 0.45) !important;
    background: rgba(78, 201, 176, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .menu-toggle.ms-menu-btn.ms-open {
    border-color: #4EC9B0 !important;
    background: rgba(78, 201, 176, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* // prefix in teal — like footer comment */
  .menu-toggle.ms-menu-btn::before {
    content: '//';
    color: #4EC9B0;
    margin-right: 6px;
    font-size: inherit;
    /* reset hamburger bars from previous rules */
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Remove X animation for open state — text changes instead */
  .menu-toggle.ms-menu-btn.ms-open::before {
    content: '//';
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .menu-toggle.ms-menu-btn.ms-open::after {
    display: none !important;
  }

  /* Label text — "navigation" or "×" when open */
  .menu-toggle.ms-menu-btn .ms-menu-label {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* =====================================================
   MOBILE UX RULES — принципи для мобільних
   =====================================================
   1. НЕ використовувати :hover на мобільних —
      touch-пристрої не мають hover, ефекти виглядають
      як баги або активуються при тапі.
   2. Замість :hover використовувати :active для фідбеку.
   3. Прибирати browser-дефолтний синій highlight
      через -webkit-tap-highlight-color: transparent.
   4. Додавати user-select: none на інтерактивних
      елементах де вибір тексту не потрібен.

   PATTERN:
    @media (hover: hover) { .el:hover { ... } }  ← тільки для мишей
    @media (max-width: 768px) { .el:active { ... } } ← для тачу
   ===================================================== */

@media (max-width: 768px) {

  /* Remove ALL tap highlights — no blue box on touch */
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Interactive elements: no text selection, clean touch */
  .ms-mob-link,
  .ms-mob-sub-link,
  .menu-toggle.ms-menu-btn,
  .ms-mobile-menu a {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    /* removes 300ms click delay */
  }

  /* Remove hover styles — they don't exist on touch */
  .ms-mob-link:hover,
  .ms-mob-has-sub.ms-sub-open>.ms-mob-link {
    background: transparent !important;
    padding-left: 20px !important;
    /* same as normal state */
  }

  .ms-mob-sub-link:hover {
    color: rgba(204, 204, 204, 0.65) !important;
    /* no color change on hover-touch */
    padding-left: 56px !important;
  }

  .menu-toggle.ms-menu-btn:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  /* Active state feedback (visible on touch) */
  .ms-mob-link:active {
    background: rgba(78, 201, 176, 0.08) !important;
  }

  .ms-mob-sub-link:active {
    color: #4EC9B0 !important;
  }

  .menu-toggle.ms-menu-btn:active {
    border-color: rgba(78, 201, 176, 0.45) !important;
    background: rgba(78, 201, 176, 0.06) !important;
  }

  /* Also remove outline on focus (touch triggers focus) */
  .ms-mob-link:focus,
  .ms-mob-sub-link:focus,
  .menu-toggle.ms-menu-btn:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {

  /* Logo already in header on mobile — hide duplicate in hero section */
  .ms-hero-logo-link {
    display: none;
  }
}

@media (max-width: 768px) {
  .ms-mob-logo {
    gap: 10px;
    text-decoration: none;
  }

  .ms-mob-logo-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 768px) {
  .ms-mob-logo {
    align-items: center;
  }

  .ms-mob-logo-name {
    font-size: 16px;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 768px) {

  /* Logo link — flex row, vertically centered */
  .ms-mob-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  /* Vertically center the logo img itself */
  .ms-mob-logo img {
    display: block;
    flex-shrink: 0;
  }

  /* Larger text, same vertical center as logo image */
  .ms-mob-logo-name {
    font-size: 20px;
    letter-spacing: 0.08em;
    line-height: 1;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .ms-mob-logo {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }
}

/* =====================================================
   HERO — MOBILE LAYOUT (centered)
   ===================================================== */
@media (max-width: 768px) {

  /* Center the whole content column */
  .ms-hero-content {
    align-items: center;
    text-align: center;
  }

  .ms-hero-eyebrow,
  .ms-hero-title,
  .ms-hero-subtitle {
    text-align: center;
  }

  /* CTA buttons — centered column */
  .ms-hero-cta {
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* Tags row — centered, wrap */
  .ms-hero-tags {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Smaller tags to fit one–two rows */
  .ms-hero-tags span {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 0.5px;
  }
}

/* =====================================================
   HERO TAGS — idle shimmer animation (no hover needed)
   Badges light up one by one every 12s, then pause 
   ===================================================== */
@keyframes ms-tag-idle {

  0%,
  86%,
  100% {
    color: rgba(204, 204, 204, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
    box-shadow: none;
  }

  90%,
  94% {
    color: #4EC9B0;
    border-color: rgba(78, 201, 176, 0.55);
    background: rgba(78, 201, 176, 0.09);
    box-shadow: 0 0 8px rgba(78, 201, 176, 0.25);
  }
}

@media (max-width: 768px) {
  .ms-hero-tags span {
    animation: ms-tag-idle 12s ease-in-out infinite;
  }

  .ms-hero-tags span:nth-child(1) {
    animation-delay: 0s;
  }

  .ms-hero-tags span:nth-child(2) {
    animation-delay: 0.4s;
  }

  .ms-hero-tags span:nth-child(3) {
    animation-delay: 0.8s;
  }

  .ms-hero-tags span:nth-child(4) {
    animation-delay: 1.2s;
  }

  .ms-hero-tags span:nth-child(5) {
    animation-delay: 1.6s;
  }
}

/* =====================================================
   SCROLL DOWN INDICATOR
   ===================================================== */
.ms-hero {
  position: relative;
  /* needed for scroll-down abs positioning */
}

.ms-scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #4EC9B0;
  transition: color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ms-scroll-label {
  font-family: var(--ms-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Bounce-down keyframe */
@keyframes ms-chevron-bounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }

  40% {
    transform: translateY(6px);
    opacity: 1;
  }

  60% {
    transform: translateY(3px);
    opacity: 0.8;
  }
}

.ms-scroll-chevron {
  animation: ms-chevron-bounce 2s ease-in-out infinite;
  display: block;
  width: 24px;
  height: 24px;
}

/* Desktop hover — glow + lift (button is already teal by default) */
@media (hover: hover) {
  .ms-scroll-down:hover {
    color: #fff;
    transform: translateX(-50%) translateY(-3px);
    filter: drop-shadow(0 0 12px rgba(78, 201, 176, 0.5));
  }

  .ms-scroll-down:hover .ms-scroll-chevron {
    animation-duration: 1s;
    /* faster bounce on hover */
  }
}

/* Mobile: relative position (below badges), smaller size, no hover */
@media (max-width: 768px) {
  .ms-scroll-down {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    align-self: center;
    margin-top: -20px;
    /* compensate parent gap: 48px → net ~28px spacing */
  }

  .ms-scroll-down:hover {
    color: #4EC9B0;
    /* neutralize hover on touch */
    transform: none;
    filter: none;
  }

  .ms-scroll-down:active {
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(78, 201, 176, 0.4));
  }

  .ms-scroll-label {
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .ms-scroll-chevron {
    width: 20px;
    height: 20px;
  }
}


/* ============================================================
   DIAGNOSTICS SECTION — "Чому ваш сайт не приносить клієнтів?"
   ============================================================ */

.ms-diagnostics {
  background-color: #1a1a2e;
  background-image:
    radial-gradient(circle, rgba(78, 201, 176, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 100px 0 120px;
  position: relative;
}

.ms-diag-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ─────────────────────────────────────────── */

.ms-diag-header {
  text-align: center;
  margin-bottom: 48px;
}

.ms-diag-comment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #4A9060;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.ms-diag-title {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #e0e0e0;
  line-height: 1.2;
  margin: 0 0 20px;
}

.ms-diag-accent {
  color: #FF6B6B;
}

.ms-diag-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #8888a0;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Cards grid ─────────────────────────────────────── */

.ms-diag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 0;
}

.ms-diag-card {
  background: #232340;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

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

/* Card bar (badge row) */
.ms-diag-card-bar {
  margin-bottom: 16px;
}

.ms-diag-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

.ms-diag-critical {
  background: rgba(255, 107, 107, 0.15);
  color: #FF6B6B;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.ms-diag-warning {
  background: rgba(255, 200, 50, 0.12);
  color: #FFC832;
  border: 1px solid rgba(255, 200, 50, 0.25);
}

/* Card content */
.ms-diag-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0 0 10px;
}

.ms-diag-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #8888a0;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Metric line (IDE-style) */
.ms-diag-metric {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: #1a1a2e;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-diag-metric-arrow {
  color: #569CD6;
}

.ms-diag-metric-key {
  color: #9CDCFE;
}

.ms-diag-metric-val {
  font-weight: 700;
}

.ms-diag-red {
  color: #FF6B6B;
}

.ms-diag-metric-norm {
  color: #4A9060;
  margin-left: auto;
}

/* ── Error conclusion block ─────────────────────────── */

.ms-diag-error-block {
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-left: 3px solid #FF6B6B;
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 600px;
  margin: 48px auto 0;
}

.ms-diag-error-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ms-diag-error-icon {
  color: #FF6B6B;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
}

.ms-diag-error-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: #FF6B6B;
}

.ms-diag-error-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4EC9B0;
}

.ms-diag-error-arrow {
  color: #569CD6;
}

/* ── Diagnostics mobile ─────────────────────────────── */

@media (max-width: 768px) {
  .ms-diagnostics {
    padding: 48px 0 120px;
  }

  .ms-diag-title {
    font-size: 28px;
  }

  .ms-diag-subtitle {
    font-size: 15px;
  }

  .ms-diag-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ms-diag-card {
    padding: 22px;
    transition: none;
  }

  .ms-diag-card:hover {
    border-color: #2a2a4a;
    transform: none;
  }

  .ms-diag-card-title {
    font-size: 17px;
  }

  .ms-diag-metric {
    font-size: 11px;
    padding: 8px 10px;
  }

  .ms-diag-metric-norm {
    margin-left: 0;
    width: 100%;
    margin-top: 2px;
  }

  .ms-diag-error-block {
    padding: 18px 20px;
  }

  .ms-diag-error-text {
    font-size: 13px;
  }

  .ms-diag-error-hint {
    font-size: 12px;
  }

  .ms-diag-header {
    margin-bottom: 40px;
  }

  .ms-diag-verdict {
    margin-top: 24px;
    padding: 16px 18px;
  }

  .ms-diag-verdict-comment {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .ms-diag-verdict-options {
    gap: 14px;
  }

  .ms-diag-verdict-line {
    font-size: 12px;
    flex-direction: column;
    gap: 2px;
    align-items: center;
  }

  .ms-diag-verdict-arrow {
    display: none;
  }
}


/* ── Verdict block (fix or rebuild) ─────────────────── */

.ms-diag-verdict {
  margin-top: 48px;
  padding: 20px 24px;
  text-align: center;
}

.ms-diag-verdict-comment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4A9060;
  margin-bottom: 16px;
}

.ms-diag-verdict-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.ms-diag-verdict-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-diag-verdict-key {
  color: #C586C0;
  font-weight: 600;
}

.ms-diag-verdict-cond {
  color: #DCDCAA;
}

.ms-diag-verdict-arrow {
  color: #569CD6;
}

.ms-diag-verdict-val {
  color: #4EC9B0;
}

/* ============================================================
   PROCESS SECTION — "Як ми це лікуємо" (PDF: 4.3)
   Light bg + IDE accents. Git-commit timeline.
   After dark Diagnostics → light Process = "exit from problem"
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   PROCESS — "Як ми це лікуємо"
   Terminal Pipeline: 2×2 grid of terminal windows
   ═══════════════════════════════════════════════════════ */

.ms-process {
  background-color: #F5F5F5;
  padding: 100px 0 80px;
  position: relative;
}

.ms-process::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, #f5f5f5, #ffffff);
  pointer-events: none;
}

.ms-proc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ── Section header ────────────────────────────────── */

.ms-proc-header {
  text-align: center;
  margin-bottom: 64px;
}

.ms-proc-comment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #4A9060;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.ms-proc-title {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #1E1E2E;
  line-height: 1.2;
  margin: 0 0 20px;
}

.ms-proc-accent {
  color: #4EC9B0;
}

.ms-proc-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #666680;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Pipeline grid ─────────────────────────────────── */

.ms-proc-pipeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}


/* ── Terminal window ───────────────────────────────── */

.ms-proc-term {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e0e8;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .ms-proc-term:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(78, 201, 176, 0.4);
  }
}

/* Final terminal — green glow */
.ms-proc-term-final {
  border-color: rgba(78, 201, 176, 0.4);
  background: linear-gradient(135deg, #fff 0%, #f0faf7 100%);
}

.ms-proc-term-final:hover {
  box-shadow: 0 12px 32px rgba(78, 201, 176, 0.15);
}

/* ── Terminal title bar (traffic lights) ───────────── */

.ms-proc-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8f8fa;
  border-bottom: 1px solid #e0e0e8;
}

/* Traffic lights already defined in hero (.ms-tl) */

.ms-proc-term-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

/* ── Terminal body ─────────────────────────────────── */

.ms-proc-term-body {
  padding: 16px 20px 20px;
}

/* Command line */
.ms-proc-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.ms-proc-prompt {
  color: #4EC9B0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
}

.ms-proc-cmd-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #1E1E2E;
  font-weight: 600;
}

/* Output lines */
.ms-proc-output {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.ms-proc-output-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #555;
  margin: 0;
  line-height: 1.7;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-proc-ok {
  color: #4EC9B0;
  font-weight: 700;
  font-size: 13px;
}

/* File changes */
.ms-proc-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.ms-proc-files span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4A9060;
  background: rgba(74, 144, 96, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.ms-proc-files-stat {
  color: #4EC9B0 !important;
  background: rgba(78, 201, 176, 0.1) !important;
}

/* ── Result block (final step) ─────────────────────── */

.ms-proc-result-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ms-proc-result-row {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms-proc-result-key {
  color: #666;
}

.ms-proc-result-val {
  color: #1E1E2E;
  font-weight: 600;
}

.ms-proc-result-ok {
  color: #4EC9B0;
}

.ms-proc-final-msg {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #666;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #eee;
  line-height: 1.5;
}

/* ── CTA ───────────────────────────────────────────── */

.ms-proc-cta {
  margin-top: 64px;
  text-align: center;
}

.ms-proc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #1E1E2E;
  border: 2px solid #1E1E2E;
  border-radius: 10px;
  padding: 16px 32px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ms-proc-cta-btn:hover {
  background: #4EC9B0;
  border-color: #4EC9B0;
  color: #1E1E2E;
  box-shadow: 0 8px 24px rgba(78, 201, 176, 0.3);
  transform: translateY(-2px);
}

.ms-proc-cta-prompt {
  color: #4EC9B0;
  transition: color 0.3s ease;
}

.ms-proc-cta-btn:hover .ms-proc-cta-prompt {
  color: #1E1E2E;
}

.ms-proc-cta-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4A9060;
  margin-top: 16px;
  letter-spacing: 0.02em;
}

/* ── Process — mobile ──────────────────────────────── */

@media (max-width: 768px) {
  .ms-process {
    padding: 40px 0 40px;
  }

  .ms-proc-title {
    font-size: 28px;
  }

  .ms-proc-subtitle {
    font-size: 15px;
  }

  .ms-proc-header {
    margin-bottom: 48px;
  }

  .ms-proc-pipeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ms-proc-term {
    border-radius: 10px;
  }

  .ms-proc-term:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e8;
  }

  .ms-proc-term-body {
    padding: 14px 16px 16px;
  }

  .ms-proc-cmd-text {
    font-size: 12px;
  }

  .ms-proc-output-line {
    font-size: 11px;
  }

  .ms-proc-files span {
    font-size: 10px;
  }

  .ms-proc-result-row {
    font-size: 12px;
  }

  .ms-proc-cta {
    margin-top: 48px;
  }

  .ms-proc-cta-btn {
    font-size: 14px;
    padding: 14px 24px;
  }

  .ms-proc-cta-btn:hover {
    background: #1E1E2E;
    border-color: #1E1E2E;
    color: #fff;
    box-shadow: none;
    transform: none;
  }

  .ms-proc-cta-btn:active {
    background: #4EC9B0;
    border-color: #4EC9B0;
    color: #1E1E2E;
  }

  .ms-proc-cta-hint {
    font-size: 11px;
  }
}


/* ============================================================
   CASES PREVIEW — "Після лікування" (PDF: 4.4)
   Light bg + git-diff IDE style. Before/After as ---/+++
   ============================================================ */

.ms-cases {
  background-color: #fff;
  padding: 48px 0 40px;
  position: relative;
}

.ms-cases::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 201, 176, 0.4), transparent);
}

.ms-cases-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ── Section header ────────────────────────────────── */

.ms-cases-header {
  text-align: center;
  margin-bottom: 24px;
}

.ms-cases-comment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #4A9060;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.ms-cases-title {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1E1E2E;
  line-height: 1.2;
  margin: 0 0 12px;
}

.ms-cases-accent {
  color: #4EC9B0;
}

.ms-cases-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #666680;
  line-height: 1.6;
  max-width: none;
  margin: 0 auto;
}

/* ── Cases grid ────────────────────────────────────── */

.ms-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ── Case card v2 ──────────────────────────────────── */

.ms-case-v2 {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e0e0e8;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease;
  position: relative;
}

@media (hover: hover) {
  .ms-case-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(30, 30, 46, 0.1),
      0 4px 12px rgba(78, 201, 176, 0.08);
    border-color: rgba(78, 201, 176, 0.5);
  }
}

/* ── Top bar: niche + platform ─────────────────────── */

.ms-case-v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #1E1E2E;
}

.ms-case-v2-niche {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}

.ms-case-v2-platform {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #4EC9B0;
  background: rgba(78, 201, 176, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Dashboard image ──────────────────────────────── */

.ms-case-v2-img {
  overflow: hidden;
  border-bottom: 1px solid #f0f0f4;
  background: #1a1a2e;
  border-radius: 12px 12px 0 0;
}

.ms-case-v2-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Work description ──────────────────────────────── */

.ms-case-v2-work {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f0f4;
  min-height: 105px;
}

/* ── Result block ──────────────────────────────────── */

.ms-case-v2-result {
  padding: 14px 16px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ms-case-v2-revenue {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #1E1E2E;
  line-height: 1;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.ms-case-v2-unit {
  font-size: 24px;
  font-weight: 600;
  color: #4EC9B0;
}

.ms-case-v2-revenue-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #999;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ── Metrics list ──────────────────────────────────── */

.ms-case-v2-metrics {
  list-style: none;
  padding: 0 16px 6px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.ms-case-v2-metrics li {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-case-v2-metrics li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: #4EC9B0;
  border-radius: 50%;
  flex-shrink: 0;
}

.ms-case-v2-metrics strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #1E1E2E;
  font-size: 13px;
}

/* ── Footer: tags + duration ───────────────────────── */

.ms-case-v2-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f4;
  align-items: center;
}

.ms-case-v2-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #666;
  background: #f4f4f8;
  padding: 3px 8px;
  border-radius: 4px;
}

.ms-case-v2-duration {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #4EC9B0;
  margin-left: auto;
  background: rgba(78, 201, 176, 0.1);
  padding: 3px 10px;
  border-radius: 4px;
}

/* ── CTA ───────────────────────────────────────────── */

.ms-cases-cta {
  margin-top: 24px;
  text-align: center;
}

.ms-cases-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc((100% - 48px) / 3);
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #1E1E2E;
  border: 2px solid #1E1E2E;
  border-radius: 10px;
  padding: 16px 32px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ms-cases-cta-btn:hover {
  background: #4EC9B0;
  border-color: #4EC9B0;
  color: #1E1E2E;
  box-shadow: 0 8px 24px rgba(78, 201, 176, 0.3);
  transform: translateY(-2px);
}

.ms-cases-cta-prompt {
  color: #4EC9B0;
  transition: color 0.3s ease;
}

.ms-cases-cta-btn:hover .ms-cases-cta-prompt {
  color: #1E1E2E;
}

.ms-cases-cta-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4A9060;
  margin-top: 16px;
  letter-spacing: 0.02em;
}

/* ── Cases — mobile ────────────────────────────────── */

@media (max-width: 768px) {
  .ms-cases {
    padding: 64px 0 56px;
  }

  .ms-cases-title {
    font-size: 28px;
  }

  .ms-cases-subtitle {
    font-size: 15px;
  }

  .ms-cases-header {
    margin-bottom: 48px;
  }

  .ms-cases-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ms-case-v2 {
    border-radius: 12px;
  }

  .ms-case-v2:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e8;
  }

  .ms-case-v2-revenue {
    font-size: 36px;
  }

  .ms-case-v2-unit {
    font-size: 18px;
  }

  .ms-cases-cta {
    margin-top: 24px;
  }

  .ms-cases-cta-btn {
    width: 100%;
    font-size: 14px;
    padding: 14px 24px;
  }

  .ms-cases-cta-btn:hover {
    background: #1E1E2E;
    border-color: #1E1E2E;
    color: #fff;
    box-shadow: none;
    transform: none;
  }

  .ms-cases-cta-btn:active {
    background: #4EC9B0;
    border-color: #4EC9B0;
    color: #1E1E2E;
  }

  .ms-cases-cta-hint {
    font-size: 11px;
  }
}


/* ============================================================
   WHY MIL SPIL — "Чому обирають мене" (PDF: 4.5)
   Human-style section: light bg, clean design, big cards
   ============================================================ */

.ms-why {
  background-color: #fff;
  padding: 48px 0 80px;
  position: relative;
}

.ms-why::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 201, 176, 0.4), transparent);
}

.ms-why-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ── Section header ────────────────────────────────── */

.ms-why-header {
  text-align: center;
  margin-bottom: 56px;
}

.ms-why-comment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #4A9060;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.ms-why-title {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1E1E2E;
  line-height: 1.2;
  margin: 0 0 16px;
}

.ms-why-accent {
  color: #4EC9B0;
}

.ms-why-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #666680;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Cards grid ────────────────────────────────────── */

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

/* ── Card ──────────────────────────────────────────── */

.ms-why-card {
  background: #fff;
  border: 1px solid #e0e0e8;
  border-top: 2px solid rgba(78, 201, 176, 0.3);
  border-radius: 16px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease;
}

@media (hover: hover) {
  .ms-why-card:hover {
    box-shadow: 0 4px 20px rgba(78, 201, 176, 0.1);
    border-color: rgba(78, 201, 176, 0.5);
    border-top-color: #4EC9B0;
  }
}

/* ── Card icon ─────────────────────────────────────── */

.ms-why-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.ms-why-card-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Card content ──────────────────────────────────── */

.ms-why-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1E1E2E;
  margin: 0 0 12px;
  line-height: 1.3;
}

.ms-why-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 16px;
  flex: 1;
}

/* ── Card tags (IDE-accent) ────────────────────────── */

.ms-why-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.ms-why-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4EC9B0;
  background: rgba(78, 201, 176, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ── Why — mobile ──────────────────────────────────── */

@media (max-width: 768px) {
  .ms-why {
    padding: 48px 0 120px;
  }

  .ms-why-header {
    margin-bottom: 40px;
  }

  .ms-why-title {
    font-size: 28px;
  }

  .ms-why-subtitle {
    font-size: 15px;
  }

  .ms-why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ms-why-card {
    padding: 24px 20px 20px;
    border-radius: 12px;
  }

  .ms-why-card:hover {
    box-shadow: none;
    border-color: #e0e0e8;
  }

  .ms-why-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .ms-why-card-title {
    font-size: 18px;
  }

  .ms-why-card-text {
    font-size: 13px;
  }
}


/* ============================================================
   FINAL CTA — Terminal "Start Project" (PDF: 4.6)
   Dark IDE bg — closes the loop: Hero(dark) → Body(light) → CTA(dark)
   ============================================================ */

.ms-cta {
  background-color: #1E1E2E;
  background-image:
    radial-gradient(circle, rgba(78, 201, 176, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 72px;
  position: relative;
}

/* Subtle glow behind content */
.ms-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(78, 201, 176, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ms-cta-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.ms-cta-heading {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.ms-cta-subheading {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 40px;
}

.ms-cta-line-blank {
  height: 8px;
}

/* ── Terminal window ───────────────────────────────── */

.ms-cta-terminal {
  max-width: 640px;
  margin: 0 auto 36px;
  background: #0d1117;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(78, 201, 176, 0.15);
  text-align: left;
}

/* Title bar */
.ms-cta-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-cta-bar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #666;
  margin-left: 8px;
}

/* Terminal body */
.ms-cta-body {
  padding: 20px 24px 24px;
}

.ms-cta-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #e0e0e0;
  margin: 0 0 8px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-cta-line-comment {
  color: #4A9060;
  font-size: 13px;
  margin-bottom: 12px;
}

.ms-cta-prompt {
  color: #4EC9B0;
  font-weight: 700;
}

.ms-cta-cmd {
  color: #DCDCAA;
  font-weight: 600;
}

.ms-cta-line-output {
  color: #aaa;
  font-size: 13px;
  padding-left: 4px;
}

.ms-cta-ok {
  color: #4EC9B0;
  font-weight: 700;
}

.ms-cta-val {
  color: #4EC9B0;
  font-weight: 600;
}

.ms-cta-line-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-cta-status {
  color: #569CD6;
  font-weight: 700;
}

.ms-cta-ready {
  color: #C586C0;
}

.ms-cta-true {
  color: #4EC9B0;
  font-weight: 700;
}

/* ── Action buttons ────────────────────────────────── */

.ms-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto 20px;
}

.ms-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ms-cta-btn-prompt {
  opacity: 0.6;
}

/* Primary — green */
.ms-cta-btn-primary {
  background: #4EC9B0;
  color: #1E1E2E;
  border: 2px solid #4EC9B0;
}

.ms-cta-btn-primary:hover {
  background: #3a9d8a;
  border-color: #3a9d8a;
  color: #fff;
  transform: translateY(-2px);
}

/* Secondary — outline */
.ms-cta-btn-secondary {
  background: transparent;
  color: #e0e0e0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ── Focus states (keyboard a11y) ─────────────────── */
.ms-cta-btn:focus-visible {
  outline: 2px solid #4EC9B0;
  outline-offset: 3px;
}

.ms-cta-btn-secondary:hover {
  border-color: #4EC9B0;
  color: #4EC9B0;
  transform: translateY(-2px);
}

/* ── Hint ──────────────────────────────────────────── */

.ms-cta-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(78, 201, 176, 0.7);
  letter-spacing: 0.02em;
}

/* ── CTA — mobile ──────────────────────────────────── */

@media (max-width: 768px) {
  .ms-cta {
    padding: 64px 0 56px;
  }

  .ms-cta-body {
    padding: 16px 16px 20px;
  }

  .ms-cta-line {
    font-size: 12px;
  }

  .ms-cta-line-output {
    font-size: 11px;
  }

  .ms-cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .ms-cta-btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 14px 20px;
  }

  .ms-cta-btn-primary:hover {
    background: #4EC9B0;
    border-color: #4EC9B0;
    box-shadow: none;
    transform: none;
  }

  .ms-cta-btn-primary:active {
    background: #3db89e;
    border-color: #3db89e;
  }

  .ms-cta-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
    transform: none;
  }

  .ms-cta-btn-secondary:active {
    border-color: #4EC9B0;
    color: #4EC9B0;
  }

  .ms-cta-hint {
    font-size: 11px;
  }
}