/* GoPipp master design knobs — edit freely later */

/* Typography */
:root{
  --font-body: 'Poppins', 'Noto Sans Devanagari', sans-serif;
  --font-heading: 'Poppins', 'Noto Sans Devanagari', sans-serif;

  /* Type scale */
  --fs-h1: clamp(28px, 4.2vw, 40px);
  --fs-body: 18px;
  --fs-note: 15px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 28px;

  /* Corners & shadows */
  --radius: 14px;
  --shadow-hero: 0 10px 30px rgba(88,24,69,0.08);
  --shadow-card: 0 4px 16px rgba(88,24,69,0.08);
}

/* Apply knobs */
body{ font-family: var(--font-body); font-size: var(--fs-body); }
h1{ font-family: var(--font-heading); font-size: var(--fs-h1); }
.note{ font-size: var(--fs-note); }
main.wrap{ box-shadow: var(--shadow-hero); border-radius: var(--radius); }
.card{ box-shadow: var(--shadow-card); border-radius: var(--radius); }
.btn{ border-radius: var(--radius); padding: 12px 16px; }
/* --- Core-4 Text Tint Adjustments --- */
body {
  color: rgba(88,24,69,0.92);  /* rich maroon text, easier on eyes */
}

h1, h2, h3, h4, h5, h6 {
  color: rgba(88,24,69,1);     /* full maroon for headings */
}

.btn-primary {
  background: rgba(255,158,20,0.96); /* warm amber, slightly softer */
  color: var(--maroon);
}

.btn-secondary {
  background: rgba(64,224,208,0.94); /* smooth teal */
  color: var(--maroon);
}
/* --- Heading balance --- */
h1 {
  font-weight: 700;           /* bold but not heavy */
  letter-spacing: 0.3px;      /* cinematic clarity */
  margin-top: 10px;
  margin-bottom: 6px;
}

h2, h3 {
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* --- Spacing polish (phase A) --- */
body{ line-height: 1.6; }                 /* easier reading */
.hero{ padding: var(--space-5) var(--space-4) var(--space-3); }
.cta-row{ margin: var(--space-3) 0 var(--space-2); }
.panel{ gap: var(--space-3); padding: var(--space-4); }
.card{ padding: var(--space-3); }
ul.bullets li{ margin: 10px 0; }          /* a touch more gap per point */
/* --- Cinematic divider (glow version) --- */
.divider {
  height: 12px;
  background: linear-gradient(90deg, var(--amber), var(--teal));
  border: 0;
  margin: var(--space-4) 0;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(255,158,20,0.7), 0 0 25px rgba(64,224,208,0.6);
  opacity: 1;
  transition: opacity .6s ease;
}
.divider:hover {
  opacity: 0.8;  /* brightens softly on hover */
}