/* ===== Hooper IT Landing Page Styles ===== */
:root{
  --brand:#002043;       /* Primary brand navy */
  --brand-2:#022A4C;     /* Alt navy for gradients */
  --accent:#45A3FF;      /* Light blue accent */
  --bg:#ffffff;
  --text:#0f2942;
  --muted:#6c7a89;
  --card:#0c1c2e;

  /* New: header paper tone sampled to match supplied logo background */
  --paper:#f3f5f7;       /* adjust slightly if your PNG looks warmer/cooler */
  --paper-top:#ffffff;   /* for a soft vertical sheen */
  --nav:#19526c;         /* refined link navy */
  --header-h: 60px;
}

/* status text */
.form-alert{margin-top:12px; font-weight:600}
.form-alert.sending{color:#486078}
.form-alert.success{color:#1b7f4b}
.form-alert.error{color:#b3261e}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1200px, 92%); margin:0 auto}
.section{
  padding:80px 0;
  scroll-margin-top: calc(var(--header-h) + 8px); /* tiny extra breathing room */
}

.section-alt{background:#f7f9fc}
.section-title{
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
  margin:0 0 24px;
  letter-spacing:0.2px;
}

/* ===================== Header (Updated) ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, var(--paper-top), var(--paper));
  color:var(--nav);
  -webkit-font-smoothing: antialiased;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:0;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}

/* Make the image render cleanly and leave breathing room on the right */
.brand img { 
  display: block;        /* avoids inline rounding quirks */
  height: 100px;          /* or whatever size you want */
  width: auto;
  padding-right: 8px;    /* tiny buffer so the ‘r’ never kisses the edge */
}

.brand svg { overflow: visible; }

/* If any parent has overflow hidden, relax it */
.site-header, .header-inner, .brand { overflow: visible; }

.brand-text{display:none} /* logo already contains wordmark; avoid duplication */

/* Right-aligned nav */
.main-nav{display:flex; gap:24px; align-items:center}
.main-nav a{
  color:var(--nav); text-decoration:none; font-weight:600; letter-spacing:0.2px;
  padding:8px 2px; transition:color .15s ease, opacity .15s ease;
}
.main-nav a:hover{color:#0d3a50}

/* CTA: crisp, non-pixelated, pill */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid transparent; border-radius:999px;
  padding:12px 18px; font-weight:700; text-decoration:none; cursor:pointer;
  will-change: transform, filter;
}
.btn-accent{
  background:var(--accent); color:#012042;
  box-shadow:0 3px 12px rgba(69,163,255,0.35);
}

.btn-accent:hover{filter:brightness(1.05)}
.btn-light{background:#fff; color:var(--brand)}
.btn-light:hover{background:#f1f5ff}
/* Fix: ghost button for dark hero background */
.btn-ghost{
  background: transparent;
  color: #eaf3ff;                            /* light text */
  border-color: rgba(142, 201, 255, 0.35);   /* light blue outline */
}
.btn-ghost:hover{
  border-color: rgba(142, 201, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);     /* subtle hover fill */
}

.hero .btn-ghost{ box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* Fix: restore padding for header CTA */
.main-nav .btn-accent {
  padding: 10px 22px;   /* tweak numbers until it feels right */
  font-size: 0.95rem;   /* keeps text size balanced with nav links */
  border-radius: 999px; /* full pill */
}

/* ===================== Hero (unchanged except color pairing) ===================== */
.hero{
  position:relative;
  background:
    radial-gradient(1000px 400px at 20% 10%, #063663, transparent 60%),
    linear-gradient(135deg, var(--brand-2), var(--brand));
  color:#eaf3ff;
  padding: 96px 0 72px;
}
.hero-inner{max-width:1040px}
.hero-title{
  margin:0 0 16px;
  font-size: clamp(1rem, -1.5rem + 8vw, 3rem);
  font-weight:800; letter-spacing:0.6px;
}
.hero-title span{display:inline-block; margin-right:10px}
.hero-sub{max-width:780px; color:#cfe2ff; margin:0 0 28px; font-size:1.1rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.hero-fade{
  position:absolute; left:0; right:0; bottom:-20px; height:20px;
  background:linear-gradient(180deg, rgba(0,0,0,0.15), transparent);
  pointer-events:none;
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:#0e2136; color:#dce9ff; padding:22px; border-radius:16px;
  box-shadow:0 2px 16px rgba(0,0,0,0.15);
  border:1px solid #1a3450;
}
.card h3{margin:8px 0 8px; font-size:1.15rem}
.card p{margin:0; color:#c5d8f5}
.card-icon{font-size:1.6rem}

/* About */
.about{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:28px; align-items:stretch}
.about-card{
  background:#fff; 
  border:1px solid #e7eef6; 
  border-radius:16px; 
  padding:26px;
  box-shadow:0 10px 24px rgba(2,42,76,0.06);
}
.quote-mark{font-size:42px; color:var(--brand); line-height:1}
.sig{margin-top:8px; color:var(--muted)}

.ticklist{list-style:none; padding:0; margin:12px 0 0}
.ticklist li{margin:8px 0; padding-left:26px; position:relative}
.ticklist li::before{content:'✔'; position:absolute; left:0; color:var(--brand)}

/* Contact */
.contact{background:linear-gradient(180deg, #f7f9fc, #ffffff)}
.contact-form{
  background:#ffffff; border:1px solid #e7eef6; border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(2,42,76,0.05);
}
.contact-form .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label span{display:block; font-weight:600; margin-bottom:6px}
input, textarea{
  width:100%; padding:12px 12px; border:1.4px solid #d6e2f0; border-radius:10px; font:inherit;
}
input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(69,163,255,0.15)}
.block{display:block; margin-top:14px}
.form-actions{display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap}
.contact-meta{margin-top:18px; color:#486078}
.contact-meta a{color:var(--brand)}

.visually-hidden{position:absolute; left:-9999px}

/* Footer */
.site-footer{background:#06192b; color:#9fb5cf; padding:20px 0}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer-note{color:#cfe2ff}

/* Responsive */
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .main-nav a.btn{display:none}
}
@media (max-width:600px){
  .hero{padding:80px 0 60px}
  .section{padding:60px 0}
  .contact-form .grid{grid-template-columns:1fr}
}

/* iOS-only (Chrome iOS uses WebKit) */
@supports (-webkit-touch-callout: none) {
  .site-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #F8F9FA !important;   /* your header is light gray */
  }
  .site-header::before,
  .site-header::after {
    content: none !important;
    background: none !important;
  }
  .brand .logo-img,
  .brand svg {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}