/* =========================
   JJJ TECHS GLOBAL SYSTEM
   ========================= */

:root{
  /* BRAND COLORS */
  --cool:#0074e8;
  --heat:#ff3b00;
  --refrig:#0a8f3c;
  --electric:#ffb300;

  /* CORE UI */
  --navy:#002855;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --soft:#f7f9fb;

  /* GRADIENTS */
  --grad-main: linear-gradient(135deg, #0074e8, #ff3b00);
  --grad-cool: linear-gradient(135deg, #0074e8, #00c6ff);
  --grad-heat: linear-gradient(135deg, #ff3b00, #ff8c00);

  /* EFFECTS */
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

/* =========================
   BASE
   ========================= */

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1,h2,h3,h4,h5,h6{
  font-family: Helvetica, Arial, sans-serif !important;
  color:var(--navy);
  font-weight:800;
  letter-spacing:-0.3px;
  margin-bottom:12px;
}

h1{
  font-size:48px;
  font-weight:900;
  letter-spacing:-1px;
}

h2{
  font-size:32px;
}

h3{
  font-size:22px;
}

p{
  color:var(--text);
  font-size:16px;
  margin-bottom:14px;
}

/* =========================
   LINKS
   ========================= */

a{
  color:var(--cool);
  font-weight:700;
  text-decoration:none;
}

a:hover{
  color:var(--heat);
  text-decoration:underline;
}

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

button,
.wp-block-button__link{
  background:var(--cool);
  color:#fff;
  border:none;
  padding:14px 20px;
  border-radius:10px;
  font-weight:800;
  transition:.2s ease;
}

button:hover,
.wp-block-button__link:hover{
  background:var(--heat);
}

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

.section{
  padding:70px 0;
}

.section-soft{
  background:var(--soft);
}

.section-dark{
  background:var(--navy);
  color:#fff;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p{
  color:#fff;
}

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

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  transition:.25s ease;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* =========================
   SERVICE COLOR BORDERS
   ========================= */

.card.cool{border-top:5px solid var(--cool);}
.card.heat{border-top:5px solid var(--heat);}
.card.refrig{border-top:5px solid var(--refrig);}
.card.electric{border-top:5px solid var(--electric);}

/* =========================
   CTA SECTION
   ========================= */

.cta{
  background:var(--grad-main);
  color:#fff;
  text-align:center;
  padding:60px 20px;
  border-radius:20px;
}

.cta h2,
.cta p{
  color:#fff;
}

/* =========================
   SERVICE STRIP (BRAND BAR)
   ========================= */

.service-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  font-weight:900;
  color:#fff;
}

.service-strip div{
  padding:16px;
}

.service-strip .cool{background:var(--cool);}
.service-strip .heat{background:var(--heat);}
.service-strip .refrig{background:var(--refrig);}
.service-strip .electric{background:var(--electric);}

/* =========================
   IMAGES
   ========================= */

img{
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

  h1{font-size:34px;}
  h2{font-size:26px;}
  h3{font-size:20px;}

  .section{padding:50px 0;}

  .service-strip{
    grid-template-columns:1fr 1fr;
  }
}