/* ============================================================
   San Marco — Coming Soon
   Brand: Dark Brown #623B0B · Light Gold #FBD98E
   ============================================================ */

:root{
  --brown:#623B0B;
  --brown-deep:#4a2c07;
  --brown-deeper:#371f04;
  --gold:#FBD98E;
  --gold-bright:#FFE9B8;
  --gold-soft:rgba(251,217,142,.72);
  --gold-faint:rgba(251,217,142,.40);
  --gold-line:rgba(251,217,142,.30);
  --display:'Optima','Optima Nova LT Pro','Marcellus','Palatino Linotype',Palatino,'Segoe UI',system-ui,sans-serif;
  --arabic:'Tajawal','Optima','Marcellus','Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  min-height:100svh;
  background-color:var(--brown);
  background-image:
    radial-gradient(118% 86% at 50% 30%, rgba(255,216,150,.13), rgba(255,216,150,0) 47%),
    radial-gradient(125% 125% at 50% 42%, rgba(0,0,0,0) 36%, rgba(40,23,4,.60) 100%);
  background-attachment:fixed;
  color:var(--gold);
  font-family:var(--display);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
  text-align:center;
  overflow-x:hidden;
}

/* ---- Signature: thin gold frame with accented corners (echoes the gold trim on San Marco products) ---- */
.frame{position:fixed; inset:clamp(14px,2.3vw,30px); border:1px solid var(--gold-line); pointer-events:none; z-index:1;}
.frame i{position:absolute; width:18px; height:18px; border:0 solid var(--gold-faint);}
.frame .tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px;border-color:var(--gold)}
.frame .tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px;border-color:var(--gold)}
.frame .bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px;border-color:var(--gold)}
.frame .br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px;border-color:var(--gold)}

/* ---- Product still-life (decorative, hidden on mobile) ---- */
.product{position:fixed; bottom:0; z-index:0; pointer-events:none; opacity:.92;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.42));}
.product img{display:block; width:100%; height:auto;}
.product.left{left:clamp(-26px,.5vw,18px); width:clamp(195px,25vw,355px);}
.product.right{right:clamp(-16px,.5vw,20px); width:clamp(160px,19.5vw,280px);}

.floor{position:fixed; left:0; right:0; bottom:0; height:clamp(120px,20vh,210px); z-index:1; pointer-events:none;
  background:linear-gradient(to top, var(--brown-deeper) 0%, rgba(55,31,4,0) 68%);}

/* ---- Hero (vertically centered, scrolls if content is tall) ---- */
.hero{position:relative; z-index:2; flex:1 0 auto;
  width:100%; max-width:860px; margin-inline:auto;
  padding:clamp(70px,12vh,120px) clamp(20px,5vw,44px) clamp(56px,9vh,88px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(17px,2.4vw,25px);}

.eyebrow{display:flex; align-items:center; justify-content:center; gap:.85em;
  font-size:clamp(10.5px,1vw,12.5px); letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-soft);}
.eyebrow .ln{display:block; width:clamp(20px,3vw,34px); height:1px; background:var(--gold-faint);}
.eyebrow .ar{font-family:var(--arabic); letter-spacing:0; font-size:1.18em; transform:translateY(-1px);}
.eyebrow .sep{opacity:.55; letter-spacing:0;}

.logo{width:clamp(158px,17.5vw,212px); height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.28));}

.headline{display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1.2vw,13px);}
.title{font-family:var(--display); font-weight:500;
  font-size:clamp(29px,5.4vw,55px); line-height:1.05; letter-spacing:.006em; color:var(--gold);}
.title-ar{font-family:var(--arabic); font-weight:500;
  font-size:clamp(20px,3.5vw,31px); line-height:1.45; color:var(--gold); direction:rtl;}

.copy{display:flex; flex-direction:column; align-items:center; gap:clamp(7px,1vw,11px);}
.lede{font-family:var(--display); font-size:clamp(14.5px,1.55vw,17px); line-height:1.65;
  color:var(--gold-soft); max-width:50ch;}
.lede-ar{font-family:var(--arabic); font-size:clamp(14px,1.55vw,16px); line-height:1.9;
  color:var(--gold-soft); direction:rtl; max-width:46ch;}

/* ---- WhatsApp CTA ---- */
.cta{position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:.75em;
  margin-top:clamp(2px,.6vw,6px);
  padding:clamp(13px,1.4vw,16px) clamp(26px,3vw,40px);
  border:1px solid var(--gold); color:var(--gold);
  text-decoration:none; font-family:var(--display);
  transition:color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);}
.cta::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gold); transform:translateY(102%); transition:transform .5s var(--ease);}
.cta .wa{width:1.25em; height:1.25em; flex:0 0 auto; fill:currentColor;}
.cta .txt{display:flex; flex-direction:column; line-height:1.18; text-align:center;}
.cta .en{font-size:clamp(13px,1.35vw,15px); letter-spacing:.06em;}
.cta .ar{font-family:var(--arabic); font-size:clamp(12.5px,1.3vw,14px); color:var(--gold-soft); transition:color .45s var(--ease);}
.cta:hover, .cta:focus-visible{color:var(--brown); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.30);}
.cta:hover::before, .cta:focus-visible::before{transform:translateY(0);}
.cta:hover .ar, .cta:focus-visible .ar{color:var(--brown);}
.cta:focus-visible{outline:2px solid var(--gold-bright); outline-offset:5px;}
.cta:active{transform:translateY(0);}

/* ---- "or" divider ---- */
.alt{display:flex; align-items:center; justify-content:center; gap:.7em;
  margin-top:clamp(4px,1vw,9px);
  font-size:clamp(10.5px,1vw,12px); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft);}
.alt span.ln{width:clamp(24px,4vw,42px); height:1px; background:var(--gold-faint);}
.alt .ar{font-family:var(--arabic); letter-spacing:0; font-size:1.15em;}

/* ---- Email signup ---- */
.signup{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.signup-label{font-family:var(--display); font-size:clamp(13px,1.4vw,15px); color:var(--gold-soft); letter-spacing:.02em;}
.signup-label .ar{font-family:var(--arabic); margin-inline-start:.35em;}
.signup-row{display:flex; align-items:stretch; gap:8px; width:min(380px,100%);}
.signup input{flex:1 1 auto; min-width:0; background:rgba(251,217,142,.06);
  border:1px solid var(--gold-faint); color:var(--gold); border-radius:0;
  padding:13px 16px; font-family:var(--display); font-size:15px; letter-spacing:.02em;
  transition:border-color .3s var(--ease), background .3s var(--ease);}
.signup input::placeholder{color:rgba(251,217,142,.45);}
.signup input:focus{outline:none; border-color:var(--gold); background:rgba(251,217,142,.10);}
.signup button{flex:0 0 auto; width:50px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--gold); color:var(--gold); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), transform .18s var(--ease);}
.signup button svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.signup button:hover{background:var(--gold); color:var(--brown);}
.signup button:active{transform:scale(.95);}
.signup button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}
.signup.loading button{opacity:.55; pointer-events:none;}
.signup-note{min-height:1.05em; font-size:clamp(12px,1.2vw,13px); color:var(--gold-soft); letter-spacing:.02em;}
.signup-note.ok{color:var(--gold-bright);}
.signup-note.err{color:#f0b6a4;}
.signup.done .signup-row{opacity:.45; pointer-events:none;}

/* ---- Footer ---- */
.footer{flex:0 0 auto; position:relative; z-index:2;
  padding:0 16px clamp(20px,3vh,30px);
  font-size:clamp(10px,1vw,11.5px); letter-spacing:.16em;
  color:var(--gold-soft); text-transform:uppercase;}

/* ---- Motion (one-time, respects reduced-motion) ---- */
@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .9s var(--ease) both;}
  .eyebrow{animation-delay:.10s}
  .logo{animation-delay:.22s}
  .headline{animation-delay:.36s}
  .copy{animation-delay:.50s}
  .cta{animation-delay:.62s}
  .alt{animation-delay:.72s}
  .signup{animation-delay:.80s}
  .frame{animation:fade 1.5s ease .15s both;}
  .footer{animation:fade 1.4s ease .9s both;}
  .product.left{animation:riseProd 1.3s var(--ease) .72s both;}
  .product.right{animation:riseProd 1.3s var(--ease) .86s both;}
}
@keyframes rise{from{opacity:0; transform:translateY(15px)} to{opacity:1; transform:none}}
@keyframes riseProd{from{opacity:0; transform:translateY(42px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}

/* ---- Responsive ---- */
@media (max-width:880px){
  .product.left{width:clamp(170px,24vw,280px)}
  .product.right{width:clamp(145px,20vw,235px)}
}
@media (max-width:768px){
  .product, .floor{display:none}
  .frame{inset:12px}
  .eyebrow .ln{display:none}
  body{background-attachment:scroll}
  .hero{padding-top:clamp(54px,9vh,80px); padding-bottom:clamp(40px,6vh,64px);}
}
@media (max-width:380px){
  .title{font-size:27px}
  .signup-row{width:100%}
}