/* ============================================================
   MBX Robotics — design tokens
   Palette pulled from the MBX Robotics mark: ink black field,
   electric teal wordmark edge, coral-red rocket trail, warm amber
   for accents lifted from the Mekong Maker Faire deck.
   ============================================================ */

:root{
  --ink:        #0a0d10;
  --ink-2:      #10151a;
  --panel:      #161c22;
  --panel-2:    #1c242c;
  --hairline:   #2a343d;

  --teal:       #26c9ab;
  --teal-deep:  #0f8f7b;
  --teal-dim:   #143530;

  --amber:      #f2a83e;
  --coral:      #ec5a45;

  --white:      #f3f6f5;
  --muted:      #93a3ab;
  --muted-2:    #5c6a72;

  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Inter', sans-serif;

  --max: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:.01em;
}

h1{ font-size:clamp(2.4rem,6vw,4.4rem); text-transform:uppercase; }
h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); text-transform:uppercase; }
h3{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em; }

p{ margin:0 0 1em; color:var(--muted); max-width:60ch; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--coral);
  display:inline-block;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------------- header ---------------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,13,16,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand img{ height:34px; width:auto; }

.nav{ display:flex; align-items:center; gap:1.7em; }
.nav li{ list-style:none; margin:0; padding:0; }
.nav a{
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding:.3em 0;
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--teal);
  transition:width .2s ease;
}
.nav a:hover, .nav a.active{ color:var(--white); }
.nav a.active::after, .nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--hairline);
  color:var(--white); width:42px; height:38px;
  border-radius:6px; cursor:pointer;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--white);
  margin:4px auto; transition:transform .2s ease, opacity .2s ease;
}

@media (max-width:1000px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:76px; left:0; right:0;
    background:var(--ink-2);
    flex-direction:column; align-items:flex-start;
    gap:0; border-bottom:1px solid var(--hairline);
    max-height:0; overflow:hidden;
  }
  .nav.open{ max-height:520px; }
  .nav a{ width:100%; padding:16px 28px; border-top:1px solid var(--hairline); }
  .nav a::after{ display:none; }
}

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.6em;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--teal); color:#04211c; }
.btn-primary:hover{ background:#33dabb; }
.btn-ghost{ border-color:var(--hairline); color:var(--white); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
.btn-coral{ background:var(--coral); color:#2a0b06; }
.btn-coral:hover{ background:#f16d59; }

/* ---------------- hero ---------------- */

.hero{
  position:relative;
  padding:100px 0 90px;
  overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.18;
  mask-image:radial-gradient(ellipse at 30% 20%, black, transparent 70%);
}
.hero .container{ position:relative; }
.hero-columns{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
@media (max-width:900px){
  .hero-columns{ grid-template-columns:1fr; }
}
.hero-lao{
  font-size:1.05rem; color:var(--amber);
  letter-spacing:.02em; margin-bottom:.4em; display:block;
}
.hero h1{ margin-bottom:.3em; }
.hero h1 .accent{ color:var(--teal); }
.hero-sub{ max-width:52ch; font-size:1.08rem; margin-bottom:2em; }
.hero-actions{ display:flex; gap:1em; flex-wrap:wrap; }

.trail{
  position:absolute; right:-60px; top:40px; width:520px; max-width:60vw;
  opacity:.9;
}
@media (max-width:760px){ .trail{ display:none; } }

.hero-media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-media-frame{
  position:relative;
  background:radial-gradient(circle at 40% 30%, #10201d, var(--ink-2) 70%);
  border:1px solid var(--teal-deep);
  border-radius:14px;
  padding:28px;
  box-shadow:0 0 0 1px rgba(38,201,171,.08), 0 30px 60px -20px rgba(0,0,0,.6);
}
.hero-media-frame img{
  border-radius:8px;
  max-height:420px;
  width:auto;
  margin:0 auto;
}
.hero-media-tag{
  position:absolute; bottom:-14px; left:28px;
  background:var(--coral); color:#2a0b06;
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5em 1em; border-radius:3px;
}

/* photo gallery (programs page) */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:700px){ .gallery{ grid-template-columns:1fr; } }
.gallery-item{
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
}
.gallery-item img{ width:100%; height:260px; object-fit:cover; display:block; }
.gallery-cap{ padding:16px 18px; }
.gallery-cap h3{ font-size:.95rem; margin-bottom:.3em; }
.gallery-cap p{ font-size:.85rem; margin-bottom:0; }

/* featured product (shop page) */
.feature-product{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center;
  background:var(--panel); border:1px solid var(--hairline); border-radius:10px;
  padding:36px;
}
@media (max-width:800px){ .feature-product{ grid-template-columns:1fr; } }
.feature-product img{ border-radius:8px; border:1px solid var(--hairline); }

/* ---------------- sections ---------------- */

section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-alt{ background:var(--ink-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }

.section-head{ max-width:64ch; margin-bottom:3em; }

/* pillar / card grid */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
}

.card{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:32px 28px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--teal-deep); transform:translateY(-3px); }
.card .num{
  font-family:var(--font-display);
  color:var(--coral);
  font-size:.8rem; letter-spacing:.14em;
  margin-bottom:1.2em; display:block;
}
.card h3{ color:var(--white); margin-bottom:.5em; }
.card p{ margin-bottom:0; font-size:.95rem; }

.icon-box{
  width:44px; height:44px;
  border-radius:6px;
  background:var(--teal-dim);
  border:1px solid var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2em;
}
.icon-box svg{ width:22px; height:22px; stroke:var(--teal); }

/* stat strip */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:40px 0;
}
.stat b{
  display:block; font-family:var(--font-display); font-size:2.2rem; color:var(--teal);
}
.stat span{ color:var(--muted); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* CTA banner */
.cta-band{
  background:linear-gradient(120deg, var(--teal-dim), var(--ink-2) 70%);
  border:1px solid var(--teal-deep);
  border-radius:10px;
  padding:48px;
  display:flex; align-items:center; justify-content:space-between; gap:2em;
  flex-wrap:wrap;
}
.cta-band h2{ margin-bottom:.2em; }
.cta-band p{ margin-bottom:0; }

/* footer */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:56px 0 30px;
  background:var(--ink-2);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  margin-bottom:40px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:var(--white); font-size:.8rem; letter-spacing:.1em; margin-bottom:1em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:.6em; }
.footer-grid a{ color:var(--muted); font-size:.92rem; }
.footer-grid a:hover{ color:var(--teal); }
.footer-brand p{ font-size:.9rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--hairline); padding-top:24px;
  font-size:.8rem; color:var(--muted-2); flex-wrap:wrap; gap:1em;
}
.socials{ display:flex; gap:14px; }
.socials a{
  width:34px; height:34px; border:1px solid var(--hairline); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.75rem;
}
.socials a:hover{ border-color:var(--teal); color:var(--teal); }

/* page hero (inner pages) */
.page-hero{
  padding:88px 0 60px;
  border-bottom:1px solid var(--hairline);
}
.page-hero .eyebrow{ margin-bottom:.6em; }
.breadcrumb{ font-size:.8rem; color:var(--muted-2); letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.4em; }
.breadcrumb .sep{ color:var(--muted-2); margin:0 .4em; }
.breadcrumb .current{ color:var(--teal); }

/* tags / pills */
.pill{
  display:inline-block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.35em .8em; border-radius:20px; border:1px solid var(--hairline); color:var(--muted);
  margin:0 .4em .4em 0;
}
.pill.on{ border-color:var(--teal); color:var(--teal); }

/* table-ish list */
.line-item{
  display:flex; justify-content:space-between; gap:1.5em;
  padding:22px 0; border-bottom:1px solid var(--hairline);
}
.line-item:last-child{ border-bottom:none; }
.line-item h3{ margin-bottom:.3em; }
.line-item .meta{ color:var(--muted-2); font-size:.8rem; letter-spacing:.04em; white-space:nowrap; }

/* form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:20px; }
.field.full{ grid-column:1/-1; }
label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
input, select, textarea{
  background:var(--panel);
  border:1px solid var(--hairline);
  color:var(--white);
  padding:.9em 1em;
  border-radius:5px;
  font-family:var(--font-body);
  font-size:.95rem;
}
textarea{ resize:vertical; min-height:120px; }
input::placeholder, textarea::placeholder{ color:var(--muted-2); }

/* map / contact panel */
.contact-panel{
  background:var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:32px;
}
.contact-panel .row{ display:flex; gap:1em; padding:14px 0; border-bottom:1px solid var(--hairline); }
.contact-panel .row:last-child{ border-bottom:none; }
.contact-panel .row .label{ width:100px; flex-shrink:0; color:var(--muted-2); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }

/* utility */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ============================================================
   WordPress block-editor compatibility
   Page content is authored with core blocks (Group/Heading/
   Paragraph/Image/Buttons) carrying the same class names this
   stylesheet already targets. These rules only bridge the few
   places WP's block markup differs structurally from the
   original static HTML (buttons put the className on a wrapper
   div instead of the link itself, and block spacing defaults
   need neutralizing so our own spacing rules apply cleanly).
   ============================================================ */
.wp-block-group{ margin-top:0; margin-bottom:0; }
.wp-block-heading{ margin:0 0 .5em; }
figure.wp-block-image{ margin:0; }
.wp-block-buttons{ margin:0; gap:1em; }
.wp-block-button{ margin:0; }

.wp-block-button .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.6em;
  border-radius:3px;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.wp-block-button .wp-block-button__link:hover{ transform:translateY(-2px); }
.wp-block-button.btn-primary .wp-block-button__link{ background:var(--teal); color:#04211c; }
.wp-block-button.btn-primary .wp-block-button__link:hover{ background:#33dabb; }
.wp-block-button.btn-ghost .wp-block-button__link{ border-color:var(--hairline); color:var(--white); background:transparent; }
.wp-block-button.btn-ghost .wp-block-button__link:hover{ border-color:var(--teal); color:var(--teal); }
.wp-block-button.btn-coral .wp-block-button__link{ background:var(--coral); color:#2a0b06; }
.wp-block-button.btn-coral .wp-block-button__link:hover{ background:#f16d59; }