:root{
  --green:#123d23;
  --green-2:#1e5c35;
  --cream:#fbf7ed;
  --cream-2:#f0e8d8;
  --gold:#b89a59;
  --text:#183d25;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:"Cairo", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.95), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 8% 18%, rgba(70,111,63,.12), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(70,111,63,.14), transparent 32%),
    linear-gradient(145deg,#fbf6e8 0%,#fffaf0 52%,#ede3ce 100%);
  overflow-x:hidden;
}

.page{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:26px 16px;
  isolation:isolate;
}

.hero{
  width:min(760px,100%);
  text-align:center;
  padding:20px 36px 38px;
  border-left:1px solid rgba(184,154,89,.22);
  border-right:1px solid rgba(184,154,89,.22);
  position:relative;
}

.brand-logo{
  width:118px;
  height:118px;
  object-fit:contain;
  display:block;
  margin:0 auto 18px;
  filter:drop-shadow(0 14px 22px rgba(19,61,35,.10));
}

h1{
  margin:0;
  font-size:clamp(58px,10vw,96px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--green);
}

.english-name{
  direction:ltr;
  margin-top:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  font-family:"Marcellus", serif;
  color:var(--green);
  letter-spacing:.34em;
  font-size:clamp(18px,3vw,27px);
}

.english-name span,
.ornament span,
.follow span{
  width:58px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.ornament{
  margin:42px auto 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:var(--green);
}

.ornament b{font-size:15px}

h2{
  margin:0;
  color:var(--green);
  font-size:clamp(34px,6vw,54px);
  line-height:1.35;
  font-weight:900;
}

.tagline{
  margin:12px 0 34px;
  font-size:clamp(19px,3vw,27px);
  color:#3f6048;
  font-weight:700;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  direction:ltr;
  margin:0 auto 34px;
}

.card{
  min-height:270px;
  border-radius:25px;
  padding:26px 18px 22px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:.25s ease;
  box-shadow:0 20px 38px rgba(22,54,30,.11);
}

.card:hover{transform:translateY(-6px)}

.map-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(110,85,40,.12);
  color:var(--green);
}

.whatsapp-card{
  background:
    radial-gradient(circle at 42% 15%, rgba(255,255,255,.16), transparent 25%),
    linear-gradient(145deg,#2f7548,#123d23);
  color:white;
  border:1px solid rgba(255,255,255,.2);
}

.card-icon{
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:50%;
  margin-bottom:20px;
  background:white;
  padding:11px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.whatsapp-card .card-icon{
  background:transparent;
  padding:0;
}

.card strong{
  font-size:24px;
  font-weight:900;
  line-height:1.35;
}

.card small{
  margin-top:12px;
  font-size:17px;
  font-weight:600;
  color:inherit;
  opacity:.85;
}

.card em{
  margin-top:24px;
  min-width:170px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:16px;
  font-weight:900;
}

.map-card em{
  background:#1e5c35;
  color:white;
}

.whatsapp-card em{
  background:rgba(255,255,255,.18);
  color:white;
}

.follow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  margin:12px 0 20px;
  font-size:29px;
  font-weight:900;
  color:var(--green);
}

.socials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  direction:ltr;
}

.social{
  min-height:160px;
  padding:20px 12px;
  border-radius:22px;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(110,85,40,.10);
  text-decoration:none;
  color:#203a25;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:0 16px 32px rgba(22,54,30,.09);
  transition:.25s ease;
}

.social:hover{transform:translateY(-5px)}

.social img{
  width:58px;
  height:58px;
  object-fit:contain;
  margin-bottom:10px;
}

.social strong{
  font-size:17px;
  font-weight:900;
}

.social small{
  margin-top:5px;
  font-size:14px;
  color:#4d5b50;
}

.leaf{
  position:absolute;
  z-index:-1;
  opacity:.34;
  filter:blur(.1px);
  pointer-events:none;
}

.leaf::before{
  content:"";
  display:block;
  width:220px;
  height:220px;
  border-radius:58% 42% 52% 48%;
  background:radial-gradient(ellipse at 30% 30%, #477b4c 0 18%, #1f5b33 19% 46%, transparent 47%);
  transform:rotate(36deg);
}

.leaf-1{top:40px;left:-80px}
.leaf-2{top:30px;right:-70px;transform:scale(1.2) rotate(65deg)}
.leaf-3{bottom:-80px;left:-50px;transform:scale(1.1) rotate(-20deg)}
.leaf-4{bottom:-60px;right:-80px;transform:scale(1.15) rotate(210deg)}

@media(max-width:720px){
  .page{padding:18px 12px}
  .hero{padding:16px 8px 28px}
  .brand-logo{width:96px;height:96px}
  .english-name{letter-spacing:.16em;gap:10px}
  .english-name span,.ornament span,.follow span{width:40px}
  .ornament{margin:28px auto 22px}
  .actions{grid-template-columns:1fr;gap:18px}
  .card{min-height:210px}
  .socials{grid-template-columns:1fr;gap:13px}
  .social{min-height:118px}
  .leaf{opacity:.18}
}