/* ==========================================================================
   AIKYAM CONSULTANCY — SHARED PRIMITIVES
   --------------------------------------------------------------------------
   Small pieces reused by many sections: the eyebrow label, the big section
   title, the lead paragraph and the button family
   (.btn / .btn-primary / .btn-outline).
   Editing this file changes every section that uses these pieces.
   ========================================================================== */

/* Small uppercase label above a heading, with the short rule in front */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--green);
  display:block;
}

/* Large display heading */
.section-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(40px,5vw,70px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:800;
  max-width:700px;
}
.section-title span{color:var(--green)}

/* Lead paragraph next to a heading */
.section-copy{
  color:var(--muted);
  max-width:560px;
  font-size:16px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border-radius:12px;
  border:1px solid var(--green);
  font-weight:700;
  font-size:14px;
  transition:.3s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 24px rgba(8,127,99,.18);
}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn-outline{background:#fff;color:var(--green)}
.btn-outline:hover{background:var(--green-soft);transform:translateY(-2px)}
.arrow{transition:.3s ease}
.btn:hover .arrow{transform:translateX(4px)}