/* MET Dijital visual system: a clear engineering studio with flat color signals. */
:root {
  --design-ink: #102235;
  --design-paper: #f8f6ef;
  --design-muted: #5e6c73;
  --design-line: #d7e1df;
  --design-cyan: #46d5d9;
  --design-blue: #3867e8;
  --design-lime: #b8ed5a;
  --design-coral: #ff795f;
  --design-violet: #8f78e8;
}

html { background: var(--design-paper); }
body { color: var(--design-ink); background: var(--design-paper); }
.site-header { background: rgba(248,246,239,.96); border-bottom: 2px solid var(--design-line); box-shadow: 0 5px 0 rgba(16,34,53,.04); }
.brand-mark { border-radius: 8px; color: var(--design-lime); background: var(--design-ink); }
nav a { color: #52646e; }
nav a:hover, nav a:focus-visible { color: var(--design-blue); }
.button { border-radius: 7px; border-width: 2px; }
.button-dark { color: #fff; border-color: var(--design-ink); background: var(--design-ink); }
.button-dark:hover, .button-dark:focus-visible { color: var(--design-ink); border-color: var(--design-lime); background: var(--design-lime); }
.kicker { color: var(--design-muted); letter-spacing: .1em; }
.kicker span { width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--design-coral); }
.hero { padding-block: 76px 92px; }
.hero-copy { padding-left: 28px; border-left: 4px solid var(--design-cyan); }
h1 { color: var(--design-ink); letter-spacing: -.02em; }
h1 i { background: var(--design-coral); }
.hero-copy h2 { max-width: 580px; font-weight: 600; letter-spacing: -.025em; }
.lead { color: var(--design-muted); }
.hero-assistant { padding: 22px; border: 1px solid var(--design-line); border-radius: 10px; background: #fff; box-shadow: 8px 8px 0 #e2ece8; }
.assistant-head small { color: var(--design-blue); }
.assistant-options button { border-radius: 8px; border-color: #cfddda; background: #f3f8f5; }
.assistant-options button:nth-child(2) { background: #f1f5ff; }
.assistant-options button:nth-child(3) { background: #fff1ec; }
.assistant-options button:nth-child(4) { background: #f3efff; }
.assistant-options button:hover, .assistant-options button:focus-visible { border-color: var(--design-blue); background: #fff; }
.architecture { border-radius: 14px; border: 2px solid #75c9c3 !important; box-shadow: 12px 12px 0 #dbe9e3 !important; }
.architecture-head strong { color: var(--design-blue); }
.floor { border-radius: 8px; }
.floor-index { font-variant-numeric: tabular-nums; }
.service-switch button { border-radius: 0; }
.service-switch button:hover, .service-switch button:focus-visible { color: var(--design-blue); background: #eff6ff; }
.solutions { background: #fff; }
.solution { border-bottom-color: var(--design-line); }
.solution:hover, .solution.active { padding-inline: 18px; background: #eef9f6; }
.solution:nth-child(2):hover, .solution:nth-child(2).active { background: #eef3ff; }
.solution:nth-child(3):hover, .solution:nth-child(3).active { background: #fff1ed; }
.solution:nth-child(4):hover, .solution:nth-child(4).active { background: #f2efff; }
.solution > span { color: var(--design-blue); }
.solution i { color: var(--design-coral); }
.journey { border-top: 4px solid var(--design-lime); }
.system-spine { border-radius: 14px; }
.system-spine-visual { border-radius: 10px; }
.system-spine-copy h3 { letter-spacing: -.025em; }
.system-spine-stages li { border-bottom-color: #2d4a60; }
.system-spine-stages li[data-active="true"] { color: #fff; }
.project-portfolio { border-top-width: 4px; border-top-color: var(--design-blue); }
.project-row { margin-bottom: 10px; border: 1px solid var(--design-line); border-radius: 9px; }
.project-row:nth-child(1) { border-left: 4px solid #3ecf9b; }
.project-row:nth-child(2) { border-left: 4px solid var(--design-blue); }
.project-row:nth-child(3) { border-left: 4px solid var(--design-coral); }
.project-row:hover { padding-inline: 18px; box-shadow: 5px 5px 0 rgba(16,34,53,.09); }
.brief { background: #fff8e8; }
.brief-form { border-radius: 10px; border: 2px solid #e7c97a; box-shadow: 8px 8px 0 #f2dfae; }
input, textarea { border-radius: 6px; border-color: #cbd9d6; background: #fff; }
.submit-brief { border-radius: 7px; }

/* Work index: turn each project into a readable, colored case file. */
.projects-hero { padding-block: 96px 84px; border-bottom: 4px solid var(--design-blue); }
.projects-hero-copy { padding-left: 28px; border-left: 4px solid var(--design-cyan); }
.projects-hero h1 { letter-spacing: -.04em; }
.projects-hero h1 em, .project-card h3 em, .projects-cta h2 em { color: var(--design-blue); }
.projects-hero-signal { border-radius: 14px; border: 2px solid #e7c97a; box-shadow: 10px 10px 0 #f2dfae; }
.project-card { margin-bottom: 14px; border: 1px solid var(--design-line); border-top: 4px solid var(--design-blue); border-radius: 12px; background: #fff !important; box-shadow: 7px 7px 0 rgba(16,34,53,.07); }
.project-card:nth-of-type(2) { border-top-color: #3ecf9b; }
.project-card:nth-of-type(3) { border-top-color: var(--design-coral); }
.project-card:nth-of-type(4) { border-top-color: var(--design-violet); }
.project-card:hover { transform: translateY(-3px); box-shadow: 9px 10px 0 rgba(16,34,53,.1); }
.project-card-visual { border-radius: 9px; }
.project-tags li { border-radius: 5px; }
.project-principles { border-top: 4px solid var(--design-cyan); }
.principle-list div { border-left-width: 3px; border-left-color: var(--design-blue); }
.principle-list div:nth-child(2) { border-left-color: var(--design-lime); }
.principle-list div:nth-child(3) { border-left-color: var(--design-coral); }
.projects-cta { padding-block: 112px; }

/* Reference catalog: each live system gets a strong, flat identity. */
.reference-card, .catalog-card { border-radius: 12px; }
.reference-card { border-top: 4px solid var(--design-cyan); }
.reference-sktr { border-top-color: var(--design-coral); }
.catalog-card { border-top-width: 4px; }
.catalog-card:hover, .reference-card:hover { box-shadow: 8px 10px 0 rgba(16,34,53,.1); }
.reference-visual, .catalog-visual { border-radius: 9px; }
.reference-links a, .catalog-link { color: var(--design-blue); }
.reference-links a span, .catalog-link span { color: var(--design-coral); }

@media (max-width: 980px) {
  .hero-copy, .projects-hero-copy { padding-left: 18px; }
  .project-row:hover { padding-inline: 8px; }
}

@media (max-width: 640px) {
  .hero { padding-block: 48px 64px; }
  .hero-copy, .projects-hero-copy { padding-left: 0; border-left: 0; border-top: 4px solid var(--design-cyan); padding-top: 18px; }
  .hero-assistant { padding: 16px; box-shadow: 5px 5px 0 #e2ece8; }
  .architecture { box-shadow: 6px 6px 0 #dbe9e3 !important; }
  .project-card { box-shadow: 4px 5px 0 rgba(16,34,53,.07); }
  .projects-hero-signal { box-shadow: 6px 6px 0 #f2dfae; }
}