/* Design tokens (from Figma) */
:root{
  --brand:#008280;          /* primary (Services link, chips, badges) */
  --brand-bright:#00C9C5;   /* bright accent used on cards */
  --ink:#0F0F0F;
  --bg-deep:#04182F;        /* dark card / hero header */
  --footer-bg:#008280;   /* ← footer color from the design */
  --muted:rgba(0,0,0,.50);
  --surface:#ffffff;
  --band:rgba(0,130,128,.04);
  --radius:10px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#000;
  background:#fff;
}
img{max-width:100%;display:block}
.container{width:min(1200px,100% - 2*24px);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo-box{width:158px;height:35px;background:var(--brand);display:inline-block;border-radius:4px}
.menu{display:flex;gap:56px;align-items:center}
.menu a{
  color:#000;font-weight:600;font-size:14px;text-decoration:none;padding-bottom:10px
}
.menu a.active{color:var(--brand);border-bottom:3px solid var(--brand)}
/* Reset for menu list */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 56px;   /* matches your current spacing */
}

.menu li {
  position: relative;
}

/* Submenu hidden by default */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;    /* just below parent */
  left: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  min-width: 200px;
  padding: 10px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 1000;
}

.menu .submenu li {
  padding: 0;
}

.menu .submenu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.menu .submenu a:hover {
  background: rgba(0,130,128,0.08);
  color: var(--brand);
}

/* Show submenu on hover */
.menu li.has-submenu:hover > .submenu {
  display: block;
}



/* Hero */
.hero{position:relative;background:#04182F;color:#fff}
.hero-bg{position:relative;height:430px;overflow:hidden}
.hero-bg img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.25}
.hero-glow{
  position:absolute;right:-10%;top:0;width:70vw;height:70vw;border-radius:9999px;
  background:radial-gradient(ellipse 55% 55% at 50% 50%, var(--brand) 0%, rgba(0,130,128,0) 80%);
  filter:blur(1px);
}
.hero-inner{position:absolute;inset:0;display:flex;align-items:center}
.hero-copy{max-width:735px;padding-left:10px;gap:10px;display:flex;flex-direction:column}
.hero h1{font-size:38px;font-weight:700;line-height:1.25;margin:0}
.hero p{font-size:16px;font-weight:700;margin:0}

/* Intro */
.intro{padding:80px 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.intro-left h2{font-size:24px;line-height:40px;margin:0 0 14px}
.intro-left p{font-size:14px;line-height:28px;margin:0}
.bullet{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-bottom:30px}
.tick{width:24px;height:24px;border-radius:40px;background:var(--brand);display:inline-grid;place-items:center}
.tick::after{content:"";width:14px;height:9px;background:#fff;mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 9" xmlns="http://www.w3.org/2000/svg"><path d="M1 5l3 3 9-7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain}
.bullet h3{font-size:16px;line-height:28px;margin:0}
.bullet p{font-size:14px;line-height:28px;margin:0}

/* 5 features row */
.features{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:61px}
.feature{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.feature h4{font-size:16px;font-weight:700;line-height:28px;margin:0}
.icn{width:100px;height:100px;border:4px solid var(--brand);border-radius:8px;opacity:.9}

/* Specializations */
.specializations{background:var(--band);padding:80px 0}
.specializations h2{font-size:24px;line-height:40px;margin:0 0 30px}
/* Grids: first row 4 cols; second row 3 cols centered like the design */
.card-grid{display:grid;gap:24px;margin-top:30px}
.card-grid--row1{grid-template-columns:repeat(4,1fr)}
.card-grid--row2{
  grid-template-columns:repeat(3,1fr);
  justify-content:center;          /* center the 3 cards */
}
/* Card base */
.card.dark{
  background:var(--bg-deep); color:#fff; border-radius:var(--radius);
  border-bottom:1px solid var(--brand-bright);
  padding:20px; min-height:327px; display:flex; flex-direction:column; gap:10px
}
.card header{display:flex;gap:10px;align-items:flex-start}
.card h3{font-size:16px;line-height:28px;margin:0;flex:1}

/* Flip card */
.card .flip{position:relative;perspective:1000px;flex:1;min-height:200px}
.card .front,.card .back{
  position:absolute;inset:0;border-radius:var(--radius);
  backface-visibility:hidden;transform-style:preserve-3d;transition:transform .6s ease;
  display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px
}
.card .front{transform:rotateY(0deg)}
.card .back{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transform:rotateY(180deg)
}
.card.is-flipped .front{transform:rotateY(180deg)}
.card.is-flipped .back{transform:rotateY(360deg)}
.card .back h4{margin:0 0 4px;font-size:12px}
.card .back ul{margin:0 0 8px;padding-left:18px;line-height:24px;font-size:11px}
.card .mini-link{color:var(--brand-bright);text-decoration:none;font-weight:600}
.card header .chip{transform:translateZ(1px)} /* keeps button above */

/* Images in card fronts */
.card-art{
  max-width:100%;
  height:auto;
  object-fit:contain;            /* keeps artwork nicely contained */
  display:block;
}

/* The plus (+) flip button */
.chip{
  width:32px;height:32px;border-radius:50%;
  background:var(--brand-bright);border:0;cursor:pointer;display:inline-grid;place-items:center
}
.chip::before{
  content:"";width:14px;height:14px;background:#04182F;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M5 12h14" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center/contain;
}
.chip:focus-visible{outline:2px solid #fff;outline-offset:2px}

.form-mock{background:#C5EBEA;border-top-left-radius:6px;border-bottom-right-radius:10px;padding:16px;margin-top:auto}
.form-mock span{display:block;font-size:14px;line-height:28px;color:#000}
.form-mock input{
  width:100%;border:1px solid rgba(15,15,15,.30);border-radius:6px;padding:6px 10px;margin-top:2px
}
.thumb-1,.bars,.chat-card,.meta-art,.ai-edu,.gov-ux{flex:1}

/* Timeline */
.timeline{padding:80px 0}
.timeline-head .kicker{color:var(--brand);font-weight:700;font-size:20px;line-height:28px;margin:6px 0 0}
/* Timeline 2-column layout with image */
.timeline-grid{
  display:grid;
  grid-template-columns: 1fr 1fr; /* left: header+image, right: steps */
  grid-template-areas:
    "head  head"
    "media steps";
  gap:24px;
}
.timeline-head{grid-area:head}
.timeline-media{grid-area:media;align-self:start}
.timeline-media img{
  width:100%;height:auto;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.steps{grid-area:steps}
.steps .kicker{color:var(--brand);font-weight:700;font-size:20px;line-height:28px;margin:6px 0 0}
/* Responsive stacking */
@media (max-width: 980px){
  .timeline-grid{grid-template-columns:1fr;grid-template-areas:"head" "media" "steps"}
}



.steps{display:grid;gap:14px;margin-top:18px}
.step{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
.step summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;cursor:pointer}
.step summary::-webkit-details-marker{display:none}
.badge{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700}
.step-title{font-weight:700}
.chev{width:22px;height:22px;background:currentColor;mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" fill="currentColor"/></svg>') no-repeat center/contain;opacity:.6}
.step[open] .chev{transform:rotate(180deg)}
.step-body{padding:0 18px 16px;color:#111}

/* CTA */
.cta{background:#04182F;color:#fff;padding:54px 0}
.cta-inner{display:grid;place-items:center;text-align:center;gap:12px}
.cta h2{font-size:24px;line-height:40px;margin:0}
.cta p{font-size:14px;line-height:28px;margin:0 max(10%,24px)}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:12px 22px;border-radius:999px;font-weight:600;margin-top:14px}

/* Footer */
.site-footer{background:var(--footer-bg);color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 3fr 1.5fr;gap:24px;padding:36px 0}
.logo-footer{width:140px;height:32px;background:var(--brand);border-radius:4px;margin-bottom:10px}
.footer-col h4{margin:0 0 8px;font-size:16px}
.footer-col p{margin:0 0 10px;font-size:14px;line-height:28px}
.links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.links a{color:#fff;text-decoration:none;font-size:14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom small{opacity:.9}

/* Utils */
.hide-sm{display:none}

/* Responsive */
@media (max-width: 1100px){
  .features{grid-template-columns:repeat(3,1fr)}
  .card-grid--row1{grid-template-columns:repeat(2,1fr)}
  .card-grid--row2{grid-template-columns:repeat(2,1fr)}
  .intro-grid{grid-template-columns:1fr}
  .hero-copy{padding-left:24px}
}
@media (max-width: 640px){
  .menu{gap:20px}
  .features{grid-template-columns:repeat(2,1fr)}
  .card-grid--row1,.card-grid--row2{grid-template-columns:1fr}
  .hide-sm{display:none}
}

/* Social icons */
.social {
  margin-top: 14px;
  display: flex;
  gap: 12px;
}
.social a img {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform .2s ease;
}
.social a:hover img {
  transform: scale(1.1);
}

/* Mobile Menu Styles */
.menu-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 30;
}

.hamburger {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--brand);
  position: relative;
  transition: background 0.2s ease-out;
}

.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand);
  position: absolute;
  transition: all 0.2s ease-out;
}

.hamburger::before {
  top: -6px;
}

.hamburger::after {
  top: 6px;
}

.menu-toggle.active .hamburger {
  background: transparent;
}

.menu-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* Show on mobile */
  }

  .menu {
    display: none; /* Hidden by default on mobile */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 20;
    padding: 10px 0;
  }

  .menu.active {
    display: block;
  }

  .menu ul {
    flex-direction: column;
    gap: 0;
  }

  .menu li {
    width: 100%;
  }

  .menu a {
    display: block;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* Submenu on mobile: toggle instead of hover */
  .menu li.has-submenu:hover > .submenu {
    display: none; /* Disable hover on mobile */
  }

  .menu li.has-submenu .submenu-toggle::after {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" fill="currentColor"/></svg>') no-repeat center/contain;
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s;
    opacity: 0.6;
  }

  .menu li.has-submenu.active .submenu-toggle::after {
    transform: rotate(180deg);
  }

  .menu .submenu {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    display: none;
  }

  .menu .submenu a {
    padding: 10px 40px; /* Indent subitems */
    font-size: 13px;
    border-bottom: 1px solid rgba(0,0,0,.04);
  }
}