:root {
  --bg: #f3f0e8;
  --card: rgba(255, 255, 255, .86);
  --ink: #16213e;
  --muted: #697386;
  --gold: #b88a44;
  --gold-dark: #8a642f;
  --line: rgba(22, 33, 62, .12);
  --shadow: 0 24px 70px rgba(22, 33, 62, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Tajawal', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(184,138,68,.28), transparent 34rem),
    linear-gradient(135deg, #f8f6f0, var(--bg));
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(243,240,232,.72), rgba(243,240,232,.80)), url('ab-bardage.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .34;
  pointer-events: none;
  z-index: -2;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 5%, rgba(184,138,68,.22), transparent 28rem);
  pointer-events: none;
  z-index: -1;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 32px auto;
}

.hero-card, .calculator-card, .summary-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 34px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.brand-logo {
  width: 118px;
  height: 118px;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  border: 1px solid rgba(184,138,68,.42);
  box-shadow: 0 18px 44px rgba(22,33,62,.18);
  background: #111;
  flex: 0 0 auto;
}

.hero-card::after {
  content: '';
  position: absolute;
  inset-inline-start: -60px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(184,138,68,.14);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-dark);
  font-weight: 800;
  letter-spacing: .04em;
}

h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; }
.lead { max-width: 760px; color: var(--muted); font-size: 1.15rem; line-height: 1.8; }

.hero-badge {
  width: 128px;
  height: 128px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--ink), #25365e);
  color: white;
  flex: 0 0 auto;
}
.hero-badge span { font-size: 1.5rem; font-weight: 800; }
.hero-badge strong { color: #f1ca83; margin-top: -28px; }

.grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
  gap: 24px;
  align-items: start;
}

.calculator-card, .summary-card { padding: 28px; }
.section-title { display: flex; align-items: center; gap: 12px; margin: 10px 0 18px; }
.section-title span {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(184,138,68,.16); color: var(--gold-dark); font-weight: 800;
}
h2 { margin: 0; font-size: 1.25rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 700; }
input, select {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px;
  font: inherit; background: rgba(255,255,255,.82); color: var(--ink); outline: none;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,138,68,.16); }
input[type='range'] { accent-color: var(--gold); padding: 0; }
.range-value { color: var(--gold-dark); font-weight: 800; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
button {
  border: 0; border-radius: 16px; padding: 14px 22px; font: inherit; font-weight: 800;
  cursor: pointer; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white;
  box-shadow: 0 14px 30px rgba(184,138,68,.24);
}
button.secondary { background: #16213e; box-shadow: 0 14px 30px rgba(22,33,62,.18); }

.summary-card { position: sticky; top: 20px; }
.summary-top { padding: 22px; border-radius: 22px; background: linear-gradient(145deg, #16213e, #27385f); color: white; }
.summary-top p { margin: 0 0 10px; color: #dbe3f6; }
.summary-top strong { display: block; font-size: clamp(2rem, 4vw, 3rem); }
.summary-top small { color: #f1ca83; font-weight: 800; }
.breakdown { margin: 20px 0; display: grid; gap: 10px; }
.breakdown-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 0; color: var(--muted); }
.breakdown-row strong { color: var(--ink); white-space: nowrap; }
.proposal-box { background: rgba(184,138,68,.12); border: 1px solid rgba(184,138,68,.22); padding: 18px; border-radius: 20px; }
.proposal-box h3 { margin: 0 0 8px; }
.proposal-box p { margin: 0; color: var(--muted); line-height: 1.8; }

@media (max-width: 900px) {
  .grid-layout, .form-grid { grid-template-columns: 1fr; }
  .hero-card { align-items: flex-start; flex-direction: column; }
  .brand-header { align-items: flex-start; flex-direction: column; }
  .brand-logo { width: 96px; height: 96px; border-radius: 24px; }
  .summary-card { position: static; }
}

/* Professional responsive refinements */
.wide-field { grid-column: 1 / -1; }
input[type='search'] {
  background: rgba(255,255,255,.92);
  border-inline-start: 5px solid var(--gold);
}
select optgroup { font-weight: 800; color: var(--ink); }
select option { font-weight: 500; }
.mobile-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(22,33,62,.06);
  color: var(--muted);
  line-height: 1.7;
  font-weight: 700;
}
.calculator-card, .summary-card, .hero-card { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .calculator-card:hover, .summary-card:hover { transform: translateY(-2px); }
}
@media (max-width: 1100px) {
  .app-shell { width: min(100% - 24px, 980px); margin: 20px auto; }
  .grid-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
}
@media (max-width: 720px) {
  body::before { opacity: .22; background-position: center top; }
  .app-shell { width: min(100% - 18px, 680px); margin: 10px auto 22px; }
  .hero-card, .calculator-card, .summary-card { border-radius: 22px; padding: 18px; }
  .hero-card { gap: 16px; }
  .brand-header { gap: 14px; }
  .brand-logo { width: 82px; height: 82px; border-radius: 20px; }
  .hero-badge { width: 88px; height: 88px; border-radius: 24px; }
  .hero-badge span { font-size: 1.05rem; }
  .hero-badge strong { margin-top: -16px; }
  h1 { font-size: clamp(1.85rem, 10vw, 3rem); }
  .lead { font-size: 1rem; line-height: 1.7; }
  .form-grid { gap: 13px; }
  input, select { min-height: 48px; border-radius: 14px; font-size: 16px; }
  .actions { display: grid; grid-template-columns: 1fr; }
  button { width: 100%; min-height: 50px; }
  .summary-top { border-radius: 18px; }
  .summary-top strong { font-size: 2rem; }
  .breakdown-row { align-items: flex-start; font-size: .95rem; }
}
@media (max-width: 420px) {
  .eyebrow { font-size: .78rem; }
  .section-title span { width: 32px; height: 32px; border-radius: 11px; }
  h2 { font-size: 1.05rem; }
  .hero-card, .calculator-card, .summary-card { padding: 14px; border-radius: 18px; }
  .brand-logo { width: 72px; height: 72px; }
}
@media print {
  body::before, body::after, .actions, .mobile-note { display: none !important; }
  .app-shell { width: 100%; margin: 0; }
  .hero-card, .calculator-card, .summary-card { box-shadow: none; border: 1px solid #ddd; background: #fff; }
  .grid-layout { grid-template-columns: 1fr; }
}