/* =========================
   RMA.css — BRIGHT “SURPRISE ME” THEME
   White site, dark header, warm alternating sections
   Cream / butter yellow / soft blue accents
   ========================= */

:root{
  /* Brand */
  --navy:#0f172a;
  --navy2:#0b1220;
  --gold:#fbbf24;
  --gold2:#ffdd7a;
  --blue:#2563eb;

  /* Light backgrounds */
  --white:#ffffff;
  --cream:#fff7e6;    
  --butter:#ffefbf;   
  --ice:#eef5ff;       

  /* Text */
  --text:#0f172a;
  --muted:#475569;

  /* UI */
  --border:#e2e8f0;
  --shadow:0 12px 30px rgba(15,23,42,.10);
  --radius:16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  line-height:1.6;
  color:var(--text);
  background: var(--white);
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.container{ width:min(1100px, 92%); margin:0 auto; }

h1,h2,h3{ line-height:1.15; letter-spacing:-.4px; }
p{ margin:0 0 12px; color:var(--muted); }

/* =========================
   HEADER (dark + premium)
   ========================= */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 260px;
}

.logo-img{
  width:68px;
  height:68px;
  
}

.brand-title{
  color:#fff;
  font-weight:00;
  font-size:18px;
  letter-spacing: 5px;
}

.brand-sub{
  margin-top:3px;
  font-size:8px;
  color:palegoldenrod;
  
}

/* Desktop menu */
.menu{
  display:flex;
  align-items:center;
  gap:100px;
  flex-wrap:wrap;
  
  
}

.menu a{
  color: palegoldenrod;
  font-weight:600;
  font-size:20px;
  padding:10px 10px;
  border-radius:12px;
  transition: background .15s ease, transform .15s ease;
  
}

.menu a:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Mobile toggle */
.menu-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:20px;
  cursor:pointer;
}

/* =========================
   BUTTONS (premium)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  border: 1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #1b1406;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(251,191,36,.25);
  transition: transform .15s ease, filter .15s ease;
}

.btn:hover{ transform: translateY(-2px); filter: brightness(1.02); }

.btn-ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.12);
}

/* =========================
   HERO (white + subtle warm)
   ========================= */
.hero{
  padding:70px 0 46px;
  background:
    radial-gradient(900px 320px at 15% 10%, rgba(251,191,36,.20), transparent 60%),
    radial-gradient(700px 280px at 85% 25%, rgba(37,99,235,.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
}

.hero-wrap{
  display:flex;
  gap:26px;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content: center
}

.hero-copy{ flex: 1 1 520px; 
}

.hero-copy h1{
  margin:0 0 12px;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--navy);
}

.hero-copy p{
  max-width:64ch;
  font-size:18.5px;
  color: var(--muted);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 14px;
}

.hero-trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  color: var(--navy);
  font-size:13px;
  font-weight:800;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

/* =========================
   SECTIONS (alternating colors)
   You already use .section and .section.alt.
   We’ll make .section = cream and .section.alt = butter.
   ========================= */
.section{
  padding:74px 0;
  background: var(--cream);
}

.section.alt{
  background: var(--butter);
}

/* Add a third color “ice” by making every 3rd section cooler.
   Works without changing HTML: industries/pricing already use .alt.
   We’ll apply ice to the pricing CTA block for variety. */
#pricing.section.alt{
  background: var(--ice);
}

.section-head h2{
  margin:0 0 8px;
  font-size:30px;
  color: var(--navy);
}

.section-head p{
  margin:0;
  color: var(--muted);
}

/* =========================
   CARDS (clean white on color sections)
   ========================= */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:22px;
}

.card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
}

.card h3{
  margin:0 0 10px;
  color: var(--navy);
  font-size:18px;
}

.card ul{
  margin:0;
  padding-left:18px;
  color: var(--muted);
}

.card li{ margin:6px 0; }

.link{
  display:inline-block;
  margin-top:12px;
  color: var(--blue);
  font-weight:900;
}
.link:hover{ text-decoration:underline; }

/* =========================
   CHIPS (who we help)
   ========================= */
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.chip{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  color: var(--navy);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* =========================
   SPLIT / CONTACT / PANELS
   ========================= */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:start;
}

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  align-items:start;
}

.panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}

.panel h3{ margin-top:0; color: var(--navy); }

/* =========================
   FORMS (bright + clean)
   ========================= */
.form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.form input,
.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color: var(--navy);
}

.form input::placeholder,
.form textarea::placeholder{
  color:#94a3b8;
}

.form input:focus,
.form textarea:focus{
  outline:none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

textarea{ resize:vertical; }

/* =========================
   PRICING CTA BLOCK (special)
   ========================= */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(37,99,235,.10));
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  padding:26px;
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
}

/* =========================
   FOOTER (dark + clean)
   ========================= */
.footer{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  color:#fff;
  padding:24px 0 32px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.foot{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  opacity:.95;
}

.footer small{ color: rgba(255,255,255,.82); }

.footer a{
  color: var(--gold);
  font-weight:900;
}
.footer a:hover{ text-decoration:underline; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 950px){
  .cards{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .hero{ padding:56px 0 36px; }
}

@media (max-width: 780px){
  .menu{ display:none; }
  .menu-toggle{ display:inline-flex; }

  .menu.show{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:60px;
    right:0;
    width:min(280px, 92vw);
    background:#ffffff;
    color: var(--navy);
    border:1px solid rgba(15,23,42,.10);
    border-radius:16px;
    padding:12px;
    gap:6px;
    box-shadow: 0 18px 50px rgba(15,23,42,.16);
  }

  .menu.show a{
    width:100%;
    color: var(--navy);
  }

  .menu.show a:hover{
    background: rgba(37,99,235,.08);
  }
}

@media (max-width: 480px){
  .brand-title{ font-size:16px; }
  .brand-sub{ font-size:11px; }
  .btn{ padding:10px 12px; border-radius:12px; }
  .hero-copy h1{ font-size:30px; }
}
.cert-logos{

display:flex;

justify-content:center;

align-items:center;

padding:20px 0;

}

.cert-logos img{

height:45px;

opacity:.95;

transition:.3s;

}

.cert-logos img:hover{

transform: scale(1.05);

}

.cert-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:30px;
text-align:center;
}

.cert-item img{
height:60px;
margin:0 auto 10px;
}

.cert-item p{
font-weight:700;
color:#0f172a;
}
@media (max-width: 780px){
  .header{ z-index: 9999; }
  .menu-toggle{ z-index: 10000; }
  .menu.show{ z-index: 9998; }
}
/* WHY WORK WITH US */

.why-grid{
display:grid;
gap:16px;
margin-top:25px;
max-width:600px;
}

.why-item{

background:white;

padding:18px;

border-radius:12px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

}


/* CTA BOX */

.cta-box{

text-align:center;

background:linear-gradient(135deg,#0f172a,#1e293b);

color:white;

padding:50px;

border-radius:18px;

box-shadow:0 20px 50px rgba(0,0,0,0.2);

}

.cta-box h2{

color:white;

margin-bottom:15px;

}

.cta-box p{

color:#e2e8f0;

margin-bottom:25px;

}