/* Add custom CSS styles below */ 
:root{
  --bg: #ffffff;
  --ink: #14181c;
  --sub: #5b6570;
  --pill-bg: #eaf4f2;
  --pill-ink: #1f5f57;
  --bean-dark: #201410;
  --bean-mid: #4a2f22;
  --bean-light: #7a5138;
  --metal: #cfd3d6;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Tajawal', sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}

.section{
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
}

.pill{
  background:var(--pill-bg);
  color:var(--pill-ink);
  font-weight:700;
  font-size:14px;
  padding:9px 22px;
  border-radius:999px;
  letter-spacing:.2px;
}

h1{
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:900;
  line-height:1.35;
  color:var(--ink);
}

p.lead{
  font-size:17px;
  line-height:2;
  color:var(--sub);
  max-width:52ch;
}

.media{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio: 4 / 3.15;
  background:
    radial-gradient(120px 120px at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, var(--bean-mid) 0%, var(--bean-dark) 78%, var(--bean-dark) 100%);
  box-shadow: 0 30px 60px -20px rgba(20,10,5,.35);
}

/* scattered coffee bean texture, built purely from CSS */
.beans{
  position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse 9px 6px at 12% 18%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 28% 10%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 10px 6px at 44% 22%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 62% 12%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 9px 6px at 80% 20%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 92% 32%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 9px 6px at 6% 40%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 20% 55%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 10px 6px at 36% 65%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 55% 72%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 9px 6px at 70% 62%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 88% 55%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 9px 6px at 8% 78%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 25% 88%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 10px 6px at 48% 92%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 68% 86%, var(--bean-mid) 40%, transparent 42%),
    radial-gradient(ellipse 9px 6px at 85% 90%, var(--bean-light) 40%, transparent 42%),
    radial-gradient(ellipse 8px 5px at 96% 75%, var(--bean-mid) 40%, transparent 42%);
  opacity:.9;
  filter:contrast(1.1);
}

.grain{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  opacity:.35;
  pointer-events:none;
}

.rim{
  position:absolute;
  left:50%;
  bottom:-38%;
  transform:translateX(-50%);
  width:112%;
  aspect-ratio:1/1;
  border-radius:50%;
  border: 14px solid var(--metal);
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,.35),
    0 -6px 14px rgba(255,255,255,.4);
  opacity:.9;
}

.grinder-arm{
  position:absolute;
  top:-6%;
  left:50%;
  transform:translateX(-50%) rotate(6deg);
  width:6px;
  height:34%;
  background:linear-gradient(180deg, #3a2a22, #191210);
  border-radius:4px;
  box-shadow:0 0 0 3px rgba(0,0,0,.15);
}
.grinder-arm::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-40%);
  width:26px; height:26px;
  background:#141414;
  border-radius:8px;
}

.logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -46%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#fff;
  text-shadow:0 4px 14px rgba(0,0,0,.5);
}
.logo svg{ width:58px; height:58px; }
.logo span{
  font-weight:700;
  font-size:15px;
  letter-spacing:2px;
}

@media (max-width: 860px){
  .section{ grid-template-columns:1fr; gap:36px; }
  .content{ order:2; }
  .media{ order:1; }
}