:root{
  --cream:#f6efe6;
  --brown:#2b211d;
  --brown-soft:#5f5048;
  --red:#a61e16;
  --beige:#d9b98f;
  --border:rgba(43,33,29,.10);
  --shadow:0 28px 80px rgba(43,33,29,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--brown);
  background:
    radial-gradient(circle at 15% 15%, rgba(217,185,143,.42), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(166,30,22,.11), transparent 26%),
    linear-gradient(145deg, #fffaf4 0%, #f6efe6 45%, #eadcc9 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.065;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150'><g fill='none' stroke='%23b99064' stroke-width='7' stroke-linecap='round'><ellipse cx='72' cy='75' rx='24' ry='38'/><ellipse cx='101' cy='75' rx='24' ry='38'/><ellipse cx='130' cy='75' rx='24' ry='38'/><ellipse cx='159' cy='75' rx='24' ry='38'/><path d='M181 52c25 2 41 17 40 34-1 16-19 27-42 23-18-3-27-13-25-28 2-18 12-30 27-29z'/></g></svg>");
  background-size:260px 150px;
  background-position:center;
}
.appe-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 18px;
  position:relative;
  isolation:isolate;
}
.ambient{
  position:fixed;
  width:360px;
  height:360px;
  border-radius:999px;
  filter:blur(28px);
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  animation:drift 9s ease-in-out infinite;
}
.ambient-one{top:8%;left:4%;background:rgba(217,185,143,.45)}
.ambient-two{right:5%;bottom:8%;background:rgba(166,30,22,.16);animation-delay:-3s}
.coming-soon-card{
  width:min(100%, 880px);
  text-align:center;
  padding:clamp(30px, 6vw, 72px);
  border-radius:38px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  position:relative;
  overflow:hidden;
  animation:cardIn .85s ease both;
}
.coming-soon-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,.32) 45%, transparent 58% 100%);
  transform:translateX(-110%);
  animation:shine 5.5s ease-in-out infinite;
  pointer-events:none;
}
.logo-wrap{display:grid;place-items:center;margin:0 auto 22px}
.appe-logo{
  width:min(260px, 64vw);
  height:auto;
  filter:drop-shadow(0 22px 34px rgba(43,33,29,.13));
  animation:floatLogo 4.8s ease-in-out infinite;
}
.eyebrow{
  margin:0 0 16px;
  color:var(--red);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem, 8vw, 6.4rem);
  line-height:.93;
  letter-spacing:-.055em;
  color:var(--brown);
}
.lead{
  max-width:690px;
  margin:24px auto 0;
  font-size:clamp(1.05rem, 2.1vw, 1.35rem);
  line-height:1.7;
  color:var(--brown-soft);
}
.cta-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:34px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:15px 26px;
  border-radius:999px;
  font-weight:850;
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 20px 38px rgba(43,33,29,.16)}
.btn-primary{background:linear-gradient(135deg, #b9241b, #8f1711);color:white}
.btn-secondary{background:rgba(255,255,255,.78);color:var(--brown);border:1px solid var(--border)}
.info-box{
  margin:34px auto 0;
  width:min(100%, 430px);
  padding:18px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--border);
  display:grid;
  gap:4px;
}
.info-box span{color:var(--brown-soft);font-size:.92rem;font-weight:700}
.info-box strong{color:var(--red);font-size:clamp(1.55rem, 4vw, 2.35rem);letter-spacing:.02em}
@keyframes floatLogo{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-10px) rotate(.4deg)}}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shine{0%,55%{transform:translateX(-115%)}80%,100%{transform:translateX(115%)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-22px)}}
@media(max-width:640px){
  .appe-page{padding:18px 12px}
  .coming-soon-card{border-radius:28px;padding:30px 20px}
  .btn{width:100%}
  body:before{background-size:190px 110px;opacity:.05}
}