/* =========================================================
   Hurghada Coast Living – COMPLETE styles.css (Premium Unified)
   File: /assets/styles.css
========================================================= */

/* =======================
   BRAND + UI TOKENS
======================= */
:root{
  /* Brand Colors (from logo) */
  --navy-deep:#041223;
  --navy-main:#061a2e;
  --navy-soft:#0b2d4f;

  --teal-main:#6fe7e3;
  --teal-soft:#2cc9c4;

  --gold-main:#ffb703;

  /* Buttons */
  --wa:#25D366;        /* classic WhatsApp green */
  --wa-d:#128C7E;
  --ask:#b3202a;       /* premium, dezentes Rot */
  --ask-d:#8f1a22;

  /* UI */
  --bg:#f5f8fc;
  --card:#ffffff;
  --text:#071a33;
  --muted:rgba(7,26,51,.66);
  --line:rgba(7,26,51,.10);

  --r-lg:26px;
  --r-md:18px;
  --r-sm:14px;

  --shadow-1: 0 18px 40px rgba(0,0,0,.08);
  --shadow-2: 0 30px 70px rgba(0,0,0,.18);
}

/* =======================
   BASE
======================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }
strong{ font-weight: 900; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section{
  padding: 72px 0;
  background: linear-gradient(180deg, #f5f8fc 0%, #f7fbff 100%);
}

h1,h2,h3{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
h2{
  font-size: 30px;
  margin-bottom: 8px;
  color: var(--text);
}
.lead{
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 15px;
  max-width: 760px;
}
.small{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* Übergang Hero -> Section sanft */
.heroUnified + .section{
  background:
    radial-gradient(1200px 420px at 50% -30%, rgba(111,231,227,.10), transparent 60%),
    linear-gradient(180deg, #f5f8fc 0%, #f7fbff 100%);
}

/* =======================
   HEADER / TOPBAR
======================= */
.topbar{
  background: rgba(245,248,252,.84);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .row{
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-height: 42px;
}
.brand img{
  height: 44px;
  width: auto;
}

/* Navigation */
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
  font-weight: 900;
  font-size: 13px;
}
.nav a{
  color: rgba(7,26,51,.82);
  text-decoration:none;
}
.nav a:hover{
  color: rgba(7,26,51,1);
  text-decoration:none;
}
@media(max-width:860px){
  .nav a:not(.btn){ display:none; }
}

/* =======================
   BUTTONS
======================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;

  background: linear-gradient(135deg, var(--ask), var(--ask-d));
  color: #fff !important;
  text-decoration:none !important;

  box-shadow: 0 14px 28px rgba(179,32,42,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(179,32,42,.22);
}
.btn:active{ transform: translateY(0); }

.btn.secondary{
  background: #fff !important;
  color: #0b2d4f !important;
  border: 1px solid rgba(7,26,51,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.07);
}
.btn.whatsapp{
  background: linear-gradient(135deg, var(--wa), var(--wa-d)) !important;
  color: #06213b !important;
  border: 0;
  box-shadow: 0 16px 30px rgba(37,211,102,.18);
}
.btn.whatsapp:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 34px rgba(37,211,102,.22);
}

/* =======================
   HERO (FINAL unified)
======================= */
.heroUnified{
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 22% 46%, rgba(111,231,227,0.22), transparent 60%),
    radial-gradient(700px 520px at 48% 34%, rgba(255,183,3,0.20), transparent 58%),
    radial-gradient(800px 600px at 78% 55%, rgba(44,201,196,0.18), transparent 62%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-main) 42%, var(--navy-soft) 68%, var(--navy-deep) 100%);
}
.heroUnified::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 580px at 30% 42%, rgba(0,0,0,0.22), transparent 60%),
    radial-gradient(750px 520px at 72% 30%, rgba(0,0,0,0.24), transparent 60%);
  pointer-events:none;
}

/* Layout: Text wirkt zentraler */
.heroInner{
  position: relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr; /* Text optisch zentraler */
  gap: 56px;
  align-items: center;
}

/* Logo größer, links */
.heroBrandBlend{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.heroBrandBlend img{
  width: 360px;
  max-width: 92%;
  height: auto;
  opacity: 0.96;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.35)) saturate(1.02);
}

/* Text */
.heroContent{
  max-width: 560px;
}
.heroContent h1{
  color:#fff;
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 16px;
}
.heroContent h1 span{
  color: var(--teal-main);
}
.heroContent p{
  color: rgba(255,255,255,.92);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.heroActions{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.heroHint{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

@media(max-width:980px){
  .heroInner{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .heroBrandBlend{
    justify-content:center;
  }
  .heroBrandBlend img{
    width: 240px;
    margin-bottom: 18px;
  }
  .heroActions{ justify-content:center; }
  .heroContent h1{ font-size: 32px; }
}

/* =======================
   LISTINGS / CARDS
======================= */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
@media(max-width:1100px){ .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:740px){ .cards{ grid-template-columns: 1fr; } }

/* Optional: 2 Spalten auf Desktop für mehr Premium (aktiv lassen) */
@media (min-width: 980px){
  .cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.listingCard{
  border-radius: var(--r-lg);
  border: 1px solid rgba(7,26,51,.10);
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(111,231,227,.08), transparent 55%),
    #fff;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.listingCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0,0,0,.12);
}

.listingMedia{
  height: 220px;
  background:
    radial-gradient(420px 260px at 30% 35%, rgba(111,231,227,.18), transparent 65%),
    radial-gradient(360px 240px at 78% 60%, rgba(255,183,3,.14), transparent 65%),
    linear-gradient(135deg, rgba(4,18,35,.08), rgba(11,45,79,.06));
}
.listingMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.listingPlaceholder{
  height: 100%;
  display:grid;
  place-items:center;
  color: rgba(7,26,51,.55);
  font-weight: 950;
}

.listingBody{
  padding: 16px 16px 18px;
}
.listingTitle{
  font-size: 16px;
  font-weight: 950;
  color: var(--text);
}
.listingLoc{
  font-size: 13px;
  color: rgba(7,26,51,.62);
  margin-top: 2px;
}
.listingPrice{
  font-size: 14px;
  font-weight: 950;
  color: rgba(7,26,51,.92);
  white-space: nowrap;
}

/* Badges / Tags / Chips */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(7,26,51,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.badge.buy{ background: rgba(255,183,3,.18); }
.badge.rent{ background: rgba(111,231,227,.16); }

.iTag{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(7,26,51,.10);
  background: rgba(255,255,255,.92);
  color: rgba(7,26,51,.78);
  font-weight: 900;
}

.chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(7,26,51,.10);
  background: rgba(7,26,51,.03);
  color: rgba(7,26,51,.74);
  font-weight: 900;
}

/* Buttons in Cards */
.listingBody .btn{
  padding: 11px 16px;
  font-size: 13px;
}
.listingBody .btn.secondary{
  background:#fff !important;
  border:1px solid rgba(7,26,51,.14) !important;
  color:#0b2d4f !important;
}
.listingBody .btn:not(.secondary):not(.whatsapp){
  background: linear-gradient(135deg, var(--ask), var(--ask-d));
  box-shadow: 0 14px 28px rgba(179,32,42,.18);
}

/* =======================
   TWO-COLUMN: Ablauf + Formular
======================= */
.twoColClean{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media(max-width:980px){
  .twoColClean{ grid-template-columns: 1fr; }
}

.card, .form{
  border-radius: var(--r-lg);
  border: 1px solid rgba(7,26,51,.10);
  box-shadow: var(--shadow-1);
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(111,231,227,.07), transparent 55%),
    #fff;
  overflow:hidden;
}
.card .body{
  padding: 18px;
}
.steps{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(7,26,51,.78);
  font-size: 14px;
  line-height: 1.55;
}

.notice{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: var(--r-md);
  background: rgba(255,183,3,.10);
  border: 1px solid rgba(255,183,3,.16);
  color: rgba(7,26,51,.78);
  font-size: 13px;
}

/* Selected listing */
.selectedBox{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(111,231,227,.12);
  border: 1px solid rgba(111,231,227,.22);
  color: rgba(7,26,51,.85);
  font-size: 13px;
}

/* =======================
   FORMS (Premium)
======================= */
.form{
  padding: 18px;
}
.form label{
  display:block;
  font-weight: 950;
  font-size: 13px;
  margin: 12px 0 6px;
}
.form input,
.form select,
.form textarea{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(7,26,51,.12);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: rgba(255,255,255,.95);
}
.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color: rgba(44,201,196,.60);
  box-shadow: 0 0 0 5px rgba(44,201,196,.14);
}
.form textarea{
  min-height: 120px;
  resize: vertical;
}

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.formGrid .full{ grid-column: 1 / -1; }
@media(max-width:860px){
  .formGrid{ grid-template-columns: 1fr; }
}

.consent{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.consent input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.actionsRow{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =======================
   MODAL / POPUP
======================= */
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 200;
}
.modal{
  width: min(980px, 96vw);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.modalGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}
@media(max-width:980px){
  .modalGrid{ grid-template-columns: 1fr; }
}
.modalMedia{
  min-height: 320px;
  background:
    radial-gradient(420px 260px at 30% 35%, rgba(111,231,227,.20), transparent 65%),
    radial-gradient(360px 240px at 70% 60%, rgba(255,183,3,.16), transparent 65%),
    linear-gradient(135deg, rgba(4,18,35,.06), rgba(11,45,79,.05));
}
.modalMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.modalInfo{
  padding: 16px;
}
.fact{
  padding: 10px 12px;
  border: 1px solid rgba(7,26,51,.10);
  border-radius: 16px;
  background: #fff;
  color: rgba(7,26,51,.86);
}

/* =======================
   FOOTER
======================= */
.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  background: linear-gradient(180deg, rgba(245,248,252,.92), rgba(245,248,252,1));
}
.footer a{
  color: rgba(7,26,51,.78);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
}
.footer a:hover{ text-decoration: underline; }

/* heroInner wie container behandeln */
.heroInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =======================
   HERO – lebendig & premium
======================= */
.heroUnified{
  position: relative;
  padding: 100px 0;
  overflow: hidden;

  /* mehr Leben: hellere Mitte + Teal/Gold */
  background:
    radial-gradient(900px 520px at 26% 44%, rgba(111,231,227,.26), transparent 62%),
    radial-gradient(720px 460px at 52% 28%, rgba(255,183,3,.22), transparent 60%),
    radial-gradient(850px 560px at 82% 58%, rgba(44,201,196,.22), transparent 64%),
    linear-gradient(135deg, #031327 0%, #061a2e 34%, #0b2d4f 62%, #031327 100%);
}

/* feine "Wasser"-Textur */
.heroUnified::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 600px at 45% 40%, rgba(255,255,255,.06), transparent 65%),
    repeating-linear-gradient(
      155deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      rgba(255,255,255,0) 16px,
      rgba(255,255,255,0) 28px
    );
  opacity: .55;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* weiche Wellenlinie unten (Übergang zur nächsten Sektion) */
.heroUnified::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 140px;
  background:
    radial-gradient(1200px 140px at 50% 0%, rgba(111,231,227,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,248,252,1) 100%);
  pointer-events:none;
}

/* Hero-Inhalt wieder schön zentriert im Container */
.heroInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;

  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}

/* Logo etwas mehr "Glow" */
.heroBrandBlend img{
  width: 390px;
  max-width: 92%;
  filter:
    drop-shadow(0 18px 55px rgba(0,0,0,.40))
    drop-shadow(0 0 30px rgba(111,231,227,.18))
    saturate(1.03);
}

/* Textblock: mehr Präsenz */
.heroContent h1{
  font-size: 46px;
  letter-spacing: -0.03em;
}
.heroContent p{
  font-size: 17px;
  max-width: 560px;
  color: rgba(255,255,255,.92);
}
.heroHint{
  color: rgba(255,255,255,.75);
}

/* Mobile */
@media (max-width: 980px){
  .heroInner{ grid-template-columns: 1fr; text-align:center; }
  .heroBrandBlend{ justify-content:center; }
  .heroBrandBlend img{ width: 250px; margin-bottom: 18px; }
  .heroContent h1{ font-size: 34px; }
}
/* =======================
   HERO – lebendig & premium
======================= */
.heroUnified{
  position: relative;
  padding: 100px 0;
  overflow: hidden;

  /* mehr Leben: hellere Mitte + Teal/Gold */
  background:
    radial-gradient(900px 520px at 26% 44%, rgba(111,231,227,.26), transparent 62%),
    radial-gradient(720px 460px at 52% 28%, rgba(255,183,3,.22), transparent 60%),
    radial-gradient(850px 560px at 82% 58%, rgba(44,201,196,.22), transparent 64%),
    linear-gradient(135deg, #031327 0%, #061a2e 34%, #0b2d4f 62%, #031327 100%);
}

/* feine "Wasser"-Textur */
.heroUnified::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 600px at 45% 40%, rgba(255,255,255,.06), transparent 65%),
    repeating-linear-gradient(
      155deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      rgba(255,255,255,0) 16px,
      rgba(255,255,255,0) 28px
    );
  opacity: .55;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* weiche Wellenlinie unten (Übergang zur nächsten Sektion) */
.heroUnified::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 140px;
  background:
    radial-gradient(1200px 140px at 50% 0%, rgba(111,231,227,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,248,252,1) 100%);
  pointer-events:none;
}

/* Hero-Inhalt wieder schön zentriert im Container */
.heroInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;

  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}

/* Logo etwas mehr "Glow" */
.heroBrandBlend img{
  width: 390px;
  max-width: 92%;
  filter:
    drop-shadow(0 18px 55px rgba(0,0,0,.40))
    drop-shadow(0 0 30px rgba(111,231,227,.18))
    saturate(1.03);
}

/* Textblock: mehr Präsenz */
.heroContent h1{
  font-size: 46px;
  letter-spacing: -0.03em;
}
.heroContent p{
  font-size: 17px;
  max-width: 560px;
  color: rgba(255,255,255,.92);
}
.heroHint{
  color: rgba(255,255,255,.75);
}

/* Mobile */
@media (max-width: 980px){
  .heroInner{ grid-template-columns: 1fr; text-align:center; }
  .heroBrandBlend{ justify-content:center; }
  .heroBrandBlend img{ width: 250px; margin-bottom: 18px; }
  .heroContent h1{ font-size: 34px; }
}
/* =======================
   "So läuft's ab" – lebendige Timeline
======================= */
.stepsCard{
  border-radius: 26px;
  border: 1px solid rgba(7,26,51,.10);
  background:
    radial-gradient(900px 240px at 40% 0%, rgba(111,231,227,.10), transparent 55%),
    #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  overflow:hidden;
}

.stepsCard .body{
  padding: 20px;
}

.stepsList{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.stepItem{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(7,26,51,.02);
  border: 1px solid rgba(7,26,51,.06);
}

.stepDot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: #06213b;
  background: linear-gradient(135deg, rgba(111,231,227,.65), rgba(255,183,3,.35));
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.stepText{
  color: rgba(7,26,51,.82);
  font-size: 14px;
  line-height: 1.5;
}

.stepText strong{
  display:block;
  margin-bottom: 2px;
  color: rgba(7,26,51,.96);
}
<div class="form formUnified">