/* ==========================================================================
   Cynai — Global Styles
   ========================================================================== */

/* --- CSS Variables (palette + tokens) ----------------------------------- */
:root{
  --brand:#033858;            /* deep blue from logo */
  --brand-2:#587386;          /* secondary slate/steel */
  --brand-3:#cfe9ff;          /* light blue accent */
  --text:#0b2e44;             /* dark text */
  --muted:#4b6675;            /* muted text */
  --bg:#f6f8fa;               /* page background */
  --card:#ffffff;             /* cards */
  --border:#e5ecef;           /* borders */
  --radius:12px;
  --shadow:0 8px 30px rgba(0,0,0,.08);

  /* header height (used for anchor offset) */
  --header-h: 76px;
}

/* --- Reset / Base -------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }

/* Offset for in-page anchors (AI/Cyber/etc.) so titles aren't hidden */
html{ scroll-padding-top: var(--header-h); }

body{
  margin:0; background:var(--bg); color:var(--text);
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--brand-3); outline-offset:2px; }

/* --- Containers ---------------------------------------------------------- */
.site-header, .site-footer { background:#0f2d43; color:#fff; }
.header-inner, .footer-inner, main > section{
  width:min(1120px, 92vw); margin-inline:auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; box-shadow:0 6px 22px rgba(0,0,0,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; min-height: var(--header-h);
}

/* Hide any leftover nav checkbox (old mobile toggle) */
#nav-toggle, header input[type="checkbox"]{ display:none !important; }

/* LOGO ONLY */
.logo{ display:flex; align-items:center; padding:0; }
.logo-img{
  width:150px; height:50px; object-fit:contain; display:block; vertical-align:middle;
  mix-blend-mode:normal;  /* no multiply on dark header */
  background:transparent; filter:none; border-radius:8px;
}
/* If you ever keep a text span, this keeps it hidden */
.logo-text{ display:none !important; }

/* Nav */
.site-nav{ display:flex; gap:1rem; align-items:center; }
.site-nav a{ color:#d9e6ef; font-weight:600; padding:.4rem .55rem; border-radius:8px; }
.site-nav a:hover{ background:rgba(255,255,255,.08); text-decoration:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:10px; border:1px solid transparent;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.btn.primary{ background:var(--brand); color:#fff; border-color:transparent; }
.btn.primary:hover{ filter:brightness(.95); }
.btn:focus-visible{ outline:3px solid var(--brand-3); outline-offset:2px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  display:grid; grid-template-columns: 1.05fr 1.15fr; gap:2rem; align-items:start;
  padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}
.hero-content h1{
  margin:.25rem 0 .5rem; font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height:1.15; color:#092739;
}
.hero-content p{ color:var(--muted); max-width:52ch; }
.cta-row{ display:flex; gap:.75rem; margin-top:1rem; }

.hero-media img{
  width:100%; max-width:760px; border-radius:var(--radius);
  box-shadow: var(--shadow);
}

/* Stack hero on small screens */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .hero-media img{ max-width:100%; }
}

/* ==========================================================================
   Features (AI / Cyber / Integration)
   ========================================================================== */
.features{ padding: 2.5rem 0; }
.features > h2{
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  margin: 0 0 1.25rem 0; color: var(--text);
}
.features > h2::after{
  content:""; display:block; width:48px; height:3px; margin-top:.5rem;
  background:var(--brand); border-radius:999px; opacity:.9;
}
.features .grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem;
}
@media (max-width:980px){ .features .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .features .grid{ grid-template-columns:1fr; } }

.features article{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow);
}
.features article h3{ font-size:1.05rem; margin:0 0 .35rem 0; color:var(--text); }
.features article p{ margin:0 0 .75rem 0; color:var(--muted); line-height:1.5; }
.features article ul{ margin:0; padding:0 0 0 1.1rem; list-style:disc; }
.features article li{ margin:.25rem 0; color:#193b4a; }

@media (hover:hover){
  .features article{ transition:transform .18s ease, box-shadow .18s ease; }
  .features article:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.10); }
}

/* ==========================================================================
   About (image left, text right; mobile text first)
   ========================================================================== */
.about{ padding: 2.5rem 0; }
.about .cols{
  display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center;
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow);
}

/* Image card variant */
.card.about-image{
  padding:0; background:transparent; border:none; box-shadow:none;
}
.about-image img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius); box-shadow: var(--shadow);
}

/* Mobile: keep text first, image second for readability */
@media (max-width:900px){
  .about .cols{ grid-template-columns:1fr; }
  .about .cols > :nth-child(1){ order:2; } /* image */
  .about .cols > :nth-child(2){ order:1; } /* text  */
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding:2.5rem 0; }
#contact-form{ max-width:720px; }
#contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
#contact-form label{ display:flex; flex-direction:column; gap:.35rem; }
#contact-form input, #contact-form textarea{
  border:1px solid var(--border); border-radius:10px; padding:.6rem .7rem;
  font:inherit; background:#fff;
}
#contact-form button{ margin-top:.75rem; }
.form-msg{ margin:.5rem 0 0; min-height:1.25rem; color:var(--brand); }

@media (max-width:640px){ #contact-form .row{ grid-template-columns:1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ margin-top:1.5rem; }
.footer-inner{
  padding:1.1rem 0; display:flex; gap:1rem; justify-content:space-between; align-items:center;
}
.footer-inner nav a{ color:#d9e6ef; margin-left:.75rem; }
.footer-inner nav a:hover{ text-decoration:underline; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.hidden{ display:none !important; }
.center{ text-align:center; }