/* ============================================================
   My Gas Service Ltd — Main Stylesheet
   ============================================================ */

:root {
  --navy:        #0d1f3c;
  --navy-light:  #1a3260;
  --blue:        #1e5fa8;
  --blue-light:  #2d7dd2;
  --orange:      #e8611a;
  --orange-light:#f0792e;
  --white:       #ffffff;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --gray-900:    #0f172a;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.10);
  --shadow:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-md:   0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg:   0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
  --tr:          all .3s ease;
  --r:           8px;
  --rl:          12px;
}

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

body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--gray-800);
  line-height:1.6;
  background:var(--white);
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--navy);
}

h1 { font-size:clamp(2rem, 5vw, 3.5rem); }
h2 { font-size:clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size:clamp(1.2rem, 3vw, 1.65rem); }
h4 { font-size:1.15rem; }

p { margin-bottom:1rem; color:var(--gray-600); }
a { text-decoration:none; transition:var(--tr); }

.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* ============================================================
   HEADER
   ============================================================ */

header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--navy);
  box-shadow:0 2px 20px rgba(0,0,0,.35);
}

.header-top {
  background:var(--navy-light);
  padding:.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-top .container {
  display:flex; justify-content:flex-end; align-items:center; gap:1.5rem;
}

.hc-item {
  display:flex; align-items:center; gap:.4rem;
  color:rgba(255,255,255,.75); font-size:.82rem;
}

.hc-item svg { color:var(--orange); width:13px; height:13px; flex-shrink:0; }
.hc-item a { color:rgba(255,255,255,.75); }
.hc-item a:hover { color:var(--orange); }

.header-main { padding:.7rem 0; }

.header-main .container {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* Logo */
.logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }

.logo-icon {
  width:46px; height:46px; background:var(--orange); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-icon svg { width:26px; height:26px; color:white; }

.logo-text { display:flex; flex-direction:column; }
.logo-name {
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:1.15rem; color:white; line-height:1.1;
}
.logo-tagline {
  font-size:.68rem; color:var(--orange); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}

/* Desktop Nav */
nav { display:flex; align-items:center; gap:.15rem; }

.nav-link {
  color:rgba(255,255,255,.82); font-size:.88rem; font-weight:500;
  padding:.45rem .7rem; border-radius:var(--r); transition:var(--tr);
  white-space:nowrap;
}
.nav-link:hover, .nav-link.active {
  color:white; background:rgba(255,255,255,.1);
}

/* Dropdowns */
.nav-dd { position:relative; }
.nav-dd > .nav-link {
  display:flex; align-items:center; gap:.2rem; cursor:pointer; user-select:none;
}
.nav-dd > .nav-link .chev { width:13px; height:13px; transition:transform .2s; }
.nav-dd:hover > .nav-link .chev { transform:rotate(180deg); }

.dd-menu {
  position:absolute; top:calc(100% + .5rem); left:0;
  background:white; border-radius:var(--rl);
  box-shadow:var(--shadow-lg); min-width:220px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--tr); z-index:200;
  border:1px solid var(--gray-200); overflow:hidden;
}
.nav-dd:hover .dd-menu { opacity:1; visibility:visible; transform:translateY(0); }

.dd-menu a {
  display:block; padding:.6rem 1.2rem;
  color:var(--gray-700); font-size:.85rem; font-weight:500;
  border-left:3px solid transparent; transition:var(--tr);
}
.dd-menu a:hover {
  background:var(--gray-50); color:var(--blue); border-left-color:var(--orange);
}
.dd-menu .dd-head {
  padding:.55rem 1.2rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gray-400);
  background:var(--gray-50); border-bottom:1px solid var(--gray-200);
  pointer-events:none;
}

/* CTA Nav Button */
.nav-cta {
  background:var(--orange) !important; color:white !important;
  padding:.55rem 1.2rem !important; border-radius:var(--r) !important;
  font-weight:600 !important; margin-left:.5rem;
}
.nav-cta:hover { background:var(--orange-light) !important; color:white !important; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:.5rem; background:none; border:none;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:white; border-radius:2px; transition:var(--tr);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display:none; background:var(--navy-light);
  padding:.75rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-nav.open { display:block; }
.mobile-nav a {
  display:block; color:rgba(255,255,255,.82);
  padding:.55rem .75rem; font-size:.9rem; font-weight:500;
  border-radius:var(--r); transition:var(--tr);
}
.mobile-nav a:hover { color:white; background:rgba(255,255,255,.1); }
.mob-cat {
  color:var(--orange) !important; font-size:.72rem !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.6rem .75rem .2rem !important; margin-top:.5rem;
  pointer-events:none; cursor:default;
}
.mob-sub a { padding-left:1.5rem !important; font-size:.85rem !important; color:rgba(255,255,255,.65) !important; }

/* ============================================================
   HERO — HOME
   ============================================================ */

.hero {
  padding-top:130px; min-height:100vh;
  display:flex; align-items:center;
  background:linear-gradient(135deg, #071628 0%, var(--navy) 40%, #0a2550 100%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 75% 45%, rgba(30,95,168,.35) 0%, transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(232,97,26,.18) 0%, transparent 45%);
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:80px;
  background:linear-gradient(to bottom, transparent, var(--gray-50));
}

.hero .container { position:relative; z-index:2; }

.hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(232,97,26,.18); border:1px solid rgba(232,97,26,.4);
  color:#fbb17a; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.4rem .9rem; border-radius:50px; margin-bottom:1.5rem;
}
.hero-badge svg { width:13px; height:13px; }

.hero h1 { color:white; margin-bottom:1.25rem; }
.hero h1 span { color:var(--orange); }

.hero-desc {
  color:rgba(255,255,255,.72); font-size:1.08rem;
  margin-bottom:2rem; max-width:520px;
}

.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }

.hero-stats { display:flex; gap:2.5rem; flex-wrap:wrap; padding-top:2rem; border-top:1px solid rgba(255,255,255,.12); }

.hero-stat {}
.hero-stat-num {
  font-family:'Montserrat',sans-serif; font-size:2.2rem; font-weight:800;
  color:var(--orange); line-height:1; margin-bottom:.2rem;
}
.hero-stat-lbl { color:rgba(255,255,255,.55); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

/* Hero Visual Panel */
.hero-visual {
  display:flex; flex-direction:column; gap:1rem;
}

.hero-card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rl); padding:1.25rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
  backdrop-filter:blur(4px);
  transition:var(--tr);
}
.hero-card:hover { background:rgba(255,255,255,.1); transform:translateX(4px); }

.hero-card-icon {
  width:48px; height:48px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.hero-card-icon svg { width:24px; height:24px; color:white; }
.icon-orange { background:var(--orange); }
.icon-blue   { background:var(--blue); }
.icon-green  { background:#16a34a; }
.icon-purple { background:#7c3aed; }

.hero-card-text h4 { color:white; font-size:.95rem; margin-bottom:.15rem; }
.hero-card-text p  { color:rgba(255,255,255,.6); font-size:.8rem; margin:0; }

/* ============================================================
   PAGE HERO (sub-pages)
   ============================================================ */

.page-hero {
  padding-top:140px; padding-bottom:60px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 50%, rgba(30,95,168,.3) 0%, transparent 60%);
}
.page-hero .container { position:relative; z-index:2; }

.breadcrumb {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap;
}
.breadcrumb a { color:rgba(255,255,255,.55); font-size:.82rem; font-weight:500; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb .sep { color:rgba(255,255,255,.25); font-size:.82rem; }
.breadcrumb .cur { color:var(--orange); font-size:.82rem; font-weight:500; }

.page-hero h1 { color:white; margin-bottom:.9rem; }
.page-hero .lead { color:rgba(255,255,255,.72); font-size:1.08rem; max-width:600px; margin:0; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.65rem; border-radius:var(--r);
  font-weight:600; font-size:.9rem; cursor:pointer;
  transition:var(--tr); border:2px solid transparent;
  text-decoration:none; white-space:nowrap; line-height:1;
}
.btn svg { width:17px; height:17px; flex-shrink:0; }

.btn-primary { background:var(--orange); color:white; border-color:var(--orange); }
.btn-primary:hover {
  background:var(--orange-light); border-color:var(--orange-light);
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(232,97,26,.35); color:white;
}

.btn-outline { background:transparent; color:white; border-color:rgba(255,255,255,.5); }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:white; color:white; }

.btn-navy { background:var(--navy); color:white; border-color:var(--navy); }
.btn-navy:hover {
  background:var(--navy-light); border-color:var(--navy-light);
  color:white; transform:translateY(-2px);
}

.btn-white { background:white; color:var(--navy); border-color:white; }
.btn-white:hover { background:var(--gray-100); color:var(--navy); transform:translateY(-2px); }

/* ============================================================
   SECTIONS
   ============================================================ */

section { padding:5rem 0; }

.section-header { text-align:center; max-width:640px; margin:0 auto 3.5rem; }

.s-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(232,97,26,.1); color:var(--orange);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  padding:.33rem .85rem; border-radius:50px; margin-bottom:.9rem;
  border:1px solid rgba(232,97,26,.2);
}
.s-badge svg { width:12px; height:12px; }

.section-header h2 { margin-bottom:.9rem; }
.section-header p  { font-size:1.02rem; margin:0; }

.bg-gray { background:var(--gray-50); }
.bg-navy { background:var(--navy); }
.bg-navy h2,.bg-navy h3,.bg-navy h4 { color:white; }
.bg-navy p { color:rgba(255,255,255,.72); }

/* ============================================================
   CARDS
   ============================================================ */

.cards-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.cards-2 { grid-template-columns:repeat(2,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }

.card {
  background:white; border-radius:var(--rl); padding:2rem;
  box-shadow:var(--shadow); transition:var(--tr);
  border:1px solid var(--gray-200); display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--orange); }

.card-icon {
  width:54px; height:54px;
  background:linear-gradient(135deg,rgba(232,97,26,.12),rgba(30,95,168,.1));
  border-radius:var(--r); display:flex; align-items:center;
  justify-content:center; margin-bottom:1.25rem;
}
.card-icon svg { width:26px; height:26px; color:var(--orange); }

.card h3 { margin-bottom:.65rem; font-size:1.15rem; }
.card p  { margin-bottom:1.1rem; font-size:.9rem; line-height:1.7; flex:1; }

.card-link {
  color:var(--blue); font-weight:600; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto;
}
.card-link:hover { color:var(--orange); gap:.65rem; }
.card-link svg { width:15px; height:15px; }

.card-top { border-top:4px solid var(--orange); }

/* Info card (used in service detail pages) */
.info-card {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--rl); padding:1.75rem 2rem;
}
.info-card h4 { margin-bottom:.75rem; color:var(--navy); }
.info-card ul { list-style:none; }
.info-card ul li {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.4rem 0; border-bottom:1px solid var(--gray-200);
  font-size:.9rem; color:var(--gray-700);
}
.info-card ul li:last-child { border-bottom:none; }
.info-card ul li::before {
  content:''; display:block; width:18px; height:18px; flex-shrink:0; margin-top:1px;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/11px;
  border-radius:50%;
}

/* ============================================================
   FEATURE ITEMS
   ============================================================ */

.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.25rem; }

.feat-item {
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.4rem; background:white; border-radius:var(--rl);
  box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); transition:var(--tr);
}
.feat-item:hover { box-shadow:var(--shadow-md); border-color:var(--orange); }

.feat-icon {
  width:42px; height:42px; background:var(--orange); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feat-icon svg { width:20px; height:20px; color:white; }

.feat-text h4 { color:var(--navy); font-size:.95rem; margin-bottom:.3rem; }
.feat-text p  { color:var(--gray-500); font-size:.85rem; margin:0; line-height:1.5; }

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

.col-visual {
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius:var(--rl); min-height:360px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.col-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 60% 40%, rgba(30,95,168,.5) 0%, transparent 60%);
}
.col-visual-inner {
  position:relative; z-index:2; text-align:center;
}
.col-visual-icon {
  width:110px; height:110px;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
}
.col-visual-icon svg { width:55px; height:55px; color:var(--orange); }
.col-visual-inner p { color:rgba(255,255,255,.65); font-size:.85rem; margin:0; }

.col-text h2 { margin-bottom:1rem; }
.col-text > p { margin-bottom:1rem; }

/* Check list */
.check-list { list-style:none; margin:1.25rem 0 1.75rem; }
.check-list li {
  display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:.6rem; color:var(--gray-700); font-size:.9rem;
}
.check-list li::before {
  content:''; display:block; width:18px; height:18px; flex-shrink:0; margin-top:1px;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/11px;
  border-radius:50%;
}

/* Number list */
.num-list { list-style:none; margin:1.25rem 0; counter-reset:step; }
.num-list li {
  display:flex; gap:1rem; align-items:flex-start;
  padding:.75rem 0; border-bottom:1px solid var(--gray-200);
  counter-increment:step;
}
.num-list li:last-child { border-bottom:none; }
.num-list li::before {
  content:counter(step);
  display:flex; align-items:center; justify-content:center;
  min-width:28px; height:28px;
  background:var(--orange); color:white; font-weight:700; font-size:.8rem;
  border-radius:50%; flex-shrink:0; margin-top:1px;
}
.num-list li span { font-size:.9rem; color:var(--gray-700); }

/* ============================================================
   CERTIFICATIONS
   ============================================================ */

.cert-grid { display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; }

.cert-badge {
  background:white; border-radius:var(--r); padding:1.25rem 1.5rem;
  text-align:center; box-shadow:var(--shadow); border:1px solid var(--gray-200);
  min-width:130px; transition:var(--tr); flex:1; max-width:180px;
}
.cert-badge:hover { border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.cert-icon {
  width:42px; height:42px;
  background:linear-gradient(135deg, var(--navy), var(--blue));
  border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem;
}
.cert-icon svg { width:20px; height:20px; color:white; }
.cert-badge h4 { font-size:.85rem; color:var(--navy); margin-bottom:.2rem; }
.cert-badge p  { font-size:.75rem; color:var(--gray-500); margin:0; }

/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  padding:4.5rem 0; text-align:center;
}
.cta-band h2 { color:white; margin-bottom:1rem; }
.cta-band p  { color:rgba(255,255,255,.78); margin-bottom:2rem; max-width:540px; margin-inline:auto; }
.btn-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   BRANDS / LOGOS
   ============================================================ */

.brands-grid {
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.brand-pill {
  background:white; border:1px solid var(--gray-200); border-radius:50px;
  padding:.5rem 1.4rem; font-size:.9rem; font-weight:600; color:var(--gray-600);
  box-shadow:var(--shadow-sm); transition:var(--tr);
}
.brand-pill:hover { border-color:var(--orange); color:var(--orange); }

/* Industry tags */
.tag-cloud { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem; }
.tag {
  background:white; border:2px solid var(--gray-200); border-radius:50px;
  padding:.45rem 1.2rem; font-size:.85rem; font-weight:500; color:var(--gray-700);
  transition:var(--tr); cursor:default;
}
.tag:hover { border-color:var(--orange); color:var(--orange); background:rgba(232,97,26,.04); }

/* ============================================================
   CONTACT
   ============================================================ */

.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; align-items:start; }

.contact-info h3 { margin-bottom:1.5rem; }

.ci-item { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.ci-icon {
  width:42px; height:42px; background:var(--orange); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-icon svg { width:19px; height:19px; color:white; }
.ci-text h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:.25rem; }
.ci-text p, .ci-text a { color:var(--gray-700); font-size:.92rem; margin:0; display:block; }
.ci-text a:hover { color:var(--orange); }

/* Form */
.contact-form {
  background:white; border-radius:var(--rl); padding:2.5rem;
  box-shadow:var(--shadow-md); border:1px solid var(--gray-200);
}
.contact-form h3 { margin-bottom:1.75rem; }

.form-group { margin-bottom:1.25rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

label { display:block; font-size:.85rem; font-weight:500; color:var(--gray-700); margin-bottom:.4rem; }

input, select, textarea {
  width:100%; padding:.7rem 1rem; border:2px solid var(--gray-200);
  border-radius:var(--r); font-size:.88rem; font-family:inherit;
  color:var(--gray-800); background:var(--gray-50); transition:var(--tr); outline:none;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--blue-light); background:white;
  box-shadow:0 0 0 3px rgba(45,125,210,.12);
}
select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:16px; padding-right:2.5rem; }
textarea { resize:vertical; min-height:130px; }

.form-success {
  display:none; background:#d1fae5; border:1px solid #6ee7b7;
  color:#065f46; padding:1rem; border-radius:var(--r); margin-top:1rem;
  font-weight:500; text-align:center;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer { background:var(--gray-900); }

.footer-main { padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }

.footer-brand .logo-name { font-size:1.05rem; }
.footer-brand > p {
  color:rgba(255,255,255,.45); font-size:.83rem; line-height:1.7;
  margin:1rem 0 1.25rem;
}

.footer-social { display:flex; gap:.65rem; }
.soc-link {
  width:34px; height:34px; background:rgba(255,255,255,.1);
  border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--tr);
}
.soc-link:hover { background:var(--orange); }
.soc-link svg { width:15px; height:15px; color:white; }

.footer-col h4 {
  color:white; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:1.2rem;
}
.footer-links { list-style:none; }
.footer-links li { margin-bottom:.55rem; }
.footer-links a { color:rgba(255,255,255,.48); font-size:.85rem; transition:var(--tr); }
.footer-links a:hover { color:var(--orange); }

.fc-item { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.85rem; }
.fc-item svg { width:14px; height:14px; color:var(--orange); flex-shrink:0; margin-top:2px; }
.fc-item a, .fc-item span { color:rgba(255,255,255,.48); font-size:.83rem; line-height:1.5; }
.fc-item a:hover { color:var(--orange); }

.footer-bottom {
  padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.07);
}
.footer-bottom .container {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-bottom p { color:rgba(255,255,255,.3); font-size:.78rem; margin:0; }
.footer-certs { display:flex; gap:1rem; }
.footer-cert {
  background:rgba(255,255,255,.08); border-radius:50px;
  padding:.25rem .8rem; font-size:.72rem; font-weight:600;
  color:rgba(255,255,255,.45);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-center { text-align:center; }
.text-orange { color:var(--orange); }
.mb-0 { margin-bottom:0; }
.mt-2 { margin-top:1rem; }
.mt-4 { margin-top:2rem; }
.mb-4 { margin-bottom:2rem; }
.strong { font-weight:600; color:var(--gray-800); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .cards-3 { grid-template-columns:repeat(2,1fr); }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { display:none; }
}

@media (max-width:768px) {
  section { padding:3.5rem 0; }
  nav { display:none; }
  .hamburger { display:flex; }
  .two-col { grid-template-columns:1fr; gap:2rem; }
  .cards-2 { grid-template-columns:1fr; }
  .cards-3 { grid-template-columns:1fr; }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .cta-band .btn-group { flex-direction:column; align-items:center; }
  .hero { padding-top:110px; min-height:auto; padding-bottom:3rem; }
}

@media (max-width:480px) {
  .header-top { display:none; }
  .cards-4 { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; }
  .hero-actions { flex-direction:column; }
  .cert-grid { flex-direction:column; align-items:center; }
}