/* ══════════════════════════════════════════════════════
   SkySight Pro — shared design system
   Used by all inner pages (services, areas, about, blog).
   The homepage (index.html) keeps its own inline copy.
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#0B1A35; --navy-mid:#0F2248; --navy-lt:#1A3260;
  --cyan:#2DA2D7; --cyan-lt:#5FC3F0; --cyan-dk:#1A7DAD;
  --white:#FFF; --offwhite:#D8E6F2; --gray:#7A93AD;
  --border:rgba(45,162,215,0.18); --grid:rgba(45,162,215,0.06);
}
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:var(--navy); color:var(--white); overflow-x:hidden; line-height:1.6; }

/* ── UTILITIES ─────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section--tight { padding:64px 0; }
.label { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.label::before { content:''; display:inline-block; width:24px; height:1px; background:var(--cyan); }
h1,h2,h3,h4 { font-family:'Barlow Condensed',sans-serif; line-height:1.1; }
p { color:var(--offwhite); }
a { color:inherit; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
.btn--primary { background:var(--cyan); color:var(--navy); }
.btn--primary:hover { background:var(--cyan-lt); transform:translateY(-1px); }
.btn--outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); }
.btn--outline:hover { border-color:var(--cyan); color:var(--cyan); }
.btn--ghost { background:rgba(45,162,215,.10); color:var(--cyan); border:1px solid var(--border); }
.btn--ghost:hover { background:rgba(45,162,215,.20); }
.grid-bg { position:absolute; inset:0; pointer-events:none; z-index:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:60px 60px; }
.section-header h2 { font-size:clamp(36px,5vw,56px); font-weight:900; line-height:1.05; margin-bottom:16px; }
.section-header p { font-size:16px; color:var(--gray); max-width:560px; line-height:1.7; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s,transform .6s; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ── NAV ──────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(11,26,53,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 24px; }
.nav-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img { width:40px; height:40px; object-fit:contain; }
.nav-logo-text { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:800; letter-spacing:1px; color:var(--white); }
.nav-logo-text span { color:var(--cyan); }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--offwhite); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--cyan); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--white); }
.mobile-menu { display:none; position:fixed; top:68px; left:0; right:0; background:var(--navy-mid); border-bottom:1px solid var(--border); padding:24px; z-index:99; flex-direction:column; gap:20px; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--offwhite); text-decoration:none; }

/* ── PAGE HERO (inner pages) ───────────── */
.page-hero { position:relative; overflow:hidden; padding:180px 0 80px; background:linear-gradient(160deg,#061022 0%,var(--navy) 40%,#0D2550 100%); }
.breadcrumb { display:flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:var(--gray); margin-bottom:24px; flex-wrap:wrap; }
.breadcrumb a { color:var(--gray); text-decoration:none; }
.breadcrumb a:hover { color:var(--cyan); }
.breadcrumb span[aria-current] { color:var(--cyan-lt); }
.page-hero h1 { font-size:clamp(38px,5.5vw,64px); font-weight:900; letter-spacing:-0.5px; line-height:1.05; margin-bottom:20px; max-width:820px; }
.page-hero h1 em { font-style:normal; color:var(--cyan); }
.page-hero .lede { font-size:18px; font-weight:300; color:var(--offwhite); max-width:640px; line-height:1.65; margin-bottom:32px; }
.page-hero .hero-ctas { display:flex; flex-wrap:wrap; gap:14px; }

/* ── TRUST BAR ────────────────────────── */
#trust, .trust-bar { background:var(--navy-mid); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-inner { max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { display:flex; align-items:center; gap:14px; padding:28px 24px; border-right:1px solid var(--border); transition:background .2s; }
.trust-item:last-child { border-right:none; }
.trust-item:hover { background:rgba(45,162,215,.05); }
.trust-icon { width:36px; height:36px; flex-shrink:0; color:var(--cyan); }
.trust-text strong { display:block; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; }
.trust-text span { font-size:12px; color:var(--gray); }

/* ── CARD GRIDS (hub pages: services/, areas/) ─ */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border:1px solid var(--border); margin-top:56px; }
.card-grid--2 { grid-template-columns:repeat(2,1fr); }
.grid-card { display:flex; flex-direction:column; gap:14px; padding:40px 32px; background:rgba(15,34,72,.6); text-decoration:none; color:inherit; transition:background .2s; }
.grid-card:hover { background:rgba(45,162,215,.10); }
.grid-card .card-num { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--cyan); }
.grid-card h3 { font-size:24px; font-weight:800; }
.grid-card p { font-size:14px; color:var(--gray); line-height:1.6; }
.grid-card .card-link { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan); margin-top:auto; }

/* ── FEATURE LIST (service pages) ──────── */
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid var(--border); margin-top:56px; }
.feature-item { display:flex; gap:16px; padding:32px; background:rgba(15,34,72,.6); }
.feature-item svg { width:28px; height:28px; color:var(--cyan); flex-shrink:0; }
.feature-item h4 { font-size:19px; font-weight:700; margin-bottom:6px; }
.feature-item p { font-size:14px; color:var(--gray); line-height:1.6; }

/* ── FAQ ──────────────────────────────── */
.faq-list { margin-top:48px; border-top:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); padding:26px 0; }
.faq-item h3 { font-size:19px; font-weight:700; margin-bottom:10px; color:var(--white); }
.faq-item p { font-size:15px; color:var(--gray); line-height:1.7; max-width:760px; }

/* ── CTA BANNER ───────────────────────── */
.cta-banner { position:relative; background:linear-gradient(160deg,var(--navy) 0%,#0A1E40 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:72px 0; text-align:center; }
.cta-banner h2 { font-size:clamp(30px,4vw,44px); font-weight:900; margin-bottom:16px; }
.cta-banner p { font-size:16px; color:var(--gray); max-width:560px; margin:0 auto 32px; }
.cta-banner .hero-ctas { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ── BLOG ─────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; border:1px solid var(--border); margin-top:56px; }
.blog-card { display:flex; flex-direction:column; gap:12px; padding:36px 32px; background:rgba(15,34,72,.6); text-decoration:none; color:inherit; }
.blog-card:hover { background:rgba(45,162,215,.10); }
.blog-card .blog-meta { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); }
.blog-card h3 { font-size:26px; font-weight:800; line-height:1.2; }
.blog-card p { font-size:14px; color:var(--gray); line-height:1.6; }
.post-body { max-width:740px; margin-top:48px; }
.post-body h2 { font-size:30px; font-weight:800; margin:44px 0 16px; }
.post-body h3 { font-size:22px; font-weight:700; margin:32px 0 12px; color:var(--cyan-lt); }
.post-body p { font-size:16px; color:var(--offwhite); line-height:1.8; margin-bottom:20px; }
.post-body ul, .post-body ol { color:var(--offwhite); font-size:16px; line-height:1.8; margin:0 0 20px 24px; }
.post-body li { margin-bottom:8px; }
.post-body a { color:var(--cyan); }
.post-body blockquote { border-left:2px solid var(--cyan); padding:4px 24px; margin:32px 0; color:var(--offwhite); font-size:18px; font-style:italic; }
.post-meta { display:flex; gap:16px; align-items:center; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:var(--gray); margin-bottom:8px; }

/* ── TWO-COL TEXT/IMAGE ──────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split img { width:100%; height:100%; object-fit:cover; display:block; border:1px solid var(--border); }
.split h2 { font-size:clamp(30px,4vw,44px); font-weight:900; margin-bottom:20px; }
.split p { font-size:15px; color:var(--gray); line-height:1.75; margin-bottom:16px; }

/* ── FOOTER ───────────────────────────── */
footer { background:#060F20; border-top:1px solid var(--border); padding:52px 24px 48px; }
.footer-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand p { font-size:14px; color:var(--gray); line-height:1.7; margin-top:16px; max-width:300px; }
.footer-col h4 { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:14px; color:var(--gray); text-decoration:none; transition:color .2s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { max-width:1180px; margin:0 auto; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:12px; color:var(--gray); }

/* ── RESPONSIVE ───────────────────────── */
@media(max-width:1024px){
  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:none}.trust-item:nth-child(3){border-top:1px solid var(--border)}.trust-item:nth-child(4){border-top:1px solid var(--border);border-right:none}
  .card-grid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .section{padding:72px 0}
  .section--tight{padding:48px 0}
  .nav-links,.nav-cta-btn{display:none}
  .nav-hamburger{display:flex}
  .trust-inner{grid-template-columns:1fr}
  .trust-item{border-right:none;border-bottom:1px solid var(--border)}
  .trust-item:last-child{border-bottom:none}
  .footer-inner{grid-template-columns:1fr}
  .page-hero{padding:150px 0 56px}
}