/* ====== Reset / Base ====== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#0a0d12; background:#ffffff; line-height:1.6;
}
img{max-width:100%; display:block}
a{text-decoration:none; color:#0a0d12}

/* ====== Theme ====== */
:root{
  --brand:#22c3b3;          /* teal accent */
  --ink:#0a0d12;            /* primary text */
  --muted:#5b6673;          /* secondary text */
  --panel:#ffffff;          /* card/section bg */
  --line:#e6ecf1;           /* soft border */
  --shadow:0 6px 22px rgba(16,24,40,.10);
}

/* ====== Layout ====== */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section h2{font-size:36px;letter-spacing:.2px;margin-bottom:10px}
.section .lead{color:var(--muted);font-size:18px;margin-bottom:26px}

/* ====== Header / Nav ====== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:1120px;margin:0 auto;padding:0 20px}
.site-header .brand img{height:48px}    /* bigger logo */
.site-header nav a{margin:0 14px;color:#1b2430;font-weight:700}

/* ====== Buttons ====== */
.btn{display:inline-block;padding:14px 18px;border-radius:12px;border:1px solid #d8e2ea;font-weight:800}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#083a36}
.btn-ghost{background:#fff;color:#1b2430}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);transition:.18s}

/* ====== Hero ====== */
.hero{position:relative;background:#f6fafb}
.hero .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:70px 0}
.hero h1{font-size:48px;line-height:1.1;margin-bottom:12px}
.hero p.lead{font-size:19px;color:var(--muted);margin-bottom:18px}
.hero .badges{display:flex;gap:14px;color:#3b4450;font-size:14px;flex-wrap:wrap}
.hero .photo{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}

/* ====== Feature cards (Solutions overview) ====== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.card .media{height:190px;overflow:hidden;border-bottom:1px solid var(--line)}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px}
.card h3{font-size:20px;margin:0 0 6px}
.card .small{color:var(--muted);font-size:14px}

/* ====== Alternating split sections (Solutions page) ====== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.split .panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}

/* ====== Gallery ====== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{width:100%;height:260px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:980px){ .card-grid,.gallery{grid-template-columns:repeat(2,1fr)} .hero .inner,.split{grid-template-columns:1fr} }

/* ====== Contact / Footer ====== */
.contact-block{background:#f7fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.info-card a{color:#1b2430}           /* no blue/underline */
.info-card a:hover{text-decoration:underline}

.site-footer{padding:26px 0;color:#66707d;border-top:1px solid var(--line);background:#fff;text-align:center}
.site-footer a{color:#1b2430}

/* ====== Fun refresh & bigger logo (Overrides) ====== */

/* Bigger logo + taller header */
.site-header .brand img{ height: 64px; }
.site-header .wrap{ height: 86px; }
@media(max-width: 980px){
  .site-header .brand img{ height: 52px; }
  .site-header .wrap{ height: 80px; }
}

/* Playful, light background with soft gradient "blobs" */
body{
  background:
    radial-gradient(600px 200px at 8% 10%, rgba(34,195,179,0.10) 0%, rgba(34,195,179,0) 70%),
    radial-gradient(500px 220px at 92% 30%, rgba(255,184,77,0.10) 0%, rgba(255,184,77,0) 70%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* Make hero feel brighter and fun */
.hero{ background: transparent; }
.hero .photo img{ border-radius: 22px; box-shadow: 0 12px 36px rgba(16,24,40,.18); }
.hero h1{ font-size: 52px; }
.btn-primary{ background: linear-gradient(135deg, #22c3b3 0%, #19b1a3 100%); border-color: transparent; color:#083a36; }
.btn-ghost{ border-color:#dfe7ee; }

/* Card hover pop */
.card{ transition: transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16,24,40,.15); }

/* Make footer links neutral (no blue) */
.site-footer a{ color:#1b2430; text-decoration:none; }
.site-footer a:hover{ text-decoration: underline; }


/* ====== Logo size boost (v2) ====== */
.site-header .brand img{ height: 80px; max-width: 300px; object-fit: contain; }
.site-header .wrap{ height: 96px; }
@media(max-width: 980px){
  .site-header .brand img{ height: 60px; max-width: 240px; }
  .site-header .wrap{ height: 88px; }
}

/* ====== Lightbox for gallery ====== */
.lightbox-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.lightbox-backdrop.active{ display:flex; }
.lightbox-inner{ max-width: min(92vw, 1200px); max-height: 90vh; }
.lightbox-inner img{ width: 100%; height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.lightbox-close{ position: fixed; top: 18px; right: 22px; font-size: 28px; color: #fff; cursor: pointer; }


/* ====== Header logo on black tile (final tweak) ====== */
.site-header .brand img{ height: 100px; max-width: 360px; object-fit: contain; }
.site-header .wrap{ height: 112px; }
@media(max-width: 980px){
  .site-header .brand img{ height: 72px; max-width: 280px; }
  .site-header .wrap{ height: 96px; }
}
/* Keep nav vertically centered */
.site-header .wrap{ display:flex; align-items:center; }
/* Add a touch more spacing so the big logo doesn't crowd links */
.site-header nav a{ margin: 0 16px; }


/* ====== BIGGER LOGO + Balanced Header ====== */
.site-header .brand img{ height: 140px; max-width: 420px; object-fit: contain; }
.site-header .wrap{ height: 152px; display:flex; align-items:center; }
.site-header nav a{ margin: 0 18px; font-weight: 800; }
@media(max-width: 980px){
  .site-header .brand img{ height: 100px; max-width: 320px; }
  .site-header .wrap{ height: 120px; }
}

/* ====== Hero Subtle Gradient (teal -> warm) ====== */
.hero{
  background:
    radial-gradient(800px 280px at 12% 10%, rgba(34,195,179,0.18) 0%, rgba(34,195,179,0) 70%),
    radial-gradient(700px 260px at 92% 28%, rgba(255,200,140,0.12) 0%, rgba(255,200,140,0) 70%),
    linear-gradient(180deg, #fbfeff 0%, #f4f9fb 65%, #f9fbff 100%);
}

/* ====== Headings + Buttons closer to StarFamily vibe ====== */
h1,h2,h3{ letter-spacing: .2px; }
.btn{ border-radius: 14px; padding: 14px 20px; }
.btn-primary{
  background: linear-gradient(135deg, #22c3b3 0%, #14a89a 100%);
  border-color: transparent; color:#073a35;
}
.btn-ghost{ border-color:#dce6ee; }
.card{ border-radius: 18px; }
.card .media{ border-top-left-radius: 18px; border-top-right-radius: 18px; overflow:hidden }


/* ====== XL Logo + Blended Header (final) ====== */
.site-header{
  background:#ffffffcc; /* slight translucency to blend with hero */
  backdrop-filter: saturate(1.1) blur(2px);
  border-bottom: 1px solid #e9eef4;
  box-shadow: 0 2px 10px rgba(16,24,40,.05);
}
.site-header .brand img{
  width: 220px; /* legible size */
  height: auto;
  object-fit: contain;
}
.site-header .wrap{
  height: 120px;
  display:flex; align-items:center;
}
@media(max-width: 980px){
  .site-header .brand img{ width: 180px; }
  .site-header .wrap{ height: 104px; }
}


/* ====== XXL Logo (300px) ====== */
.site-header .brand img{
  width: 300px !important;
  height: auto;
  object-fit: contain;
}
.site-header .wrap{
  height: 140px !important;
}
@media(max-width: 980px){
  .site-header .brand img{ width: 220px !important; }
  .site-header .wrap{ height: 120px !important; }
}