:root{
  --bg:#f5efe9;
  --bg-2:#eee3d8;
  --panel:rgba(255,250,245,.54);
  --panel-2:rgba(255,255,255,.46);
  --stroke:rgba(186,168,153,.26);
  --text:#453d39;
  --muted:#8f8177;
  --muted-2:#ad9c90;
  --accent:#b8a596;
  --accent-2:#967f70;
  --accent-3:#d9c8ba;
  --white:#fffdfa;
  --success:#6f8d75;
  --shadow:0 30px 80px rgba(117, 97, 84, 0.12);
  --shadow-soft:0 12px 40px rgba(117, 97, 84, 0.10);
  --radius-xl:38px;
  --radius-lg:28px;
  --radius-pill:999px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.96), transparent 24%),
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.54), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(226,211,199,.40), transparent 24%),
    linear-gradient(180deg, #fbf7f3 0%, var(--bg) 42%, var(--bg-2) 100%);
  overflow:hidden;
}

.page{
  min-height:100%;
  padding:36px;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
}

.hero-card{
  width:min(100%, 980px);
  padding:40px 42px 32px;
  text-align:center;
  position:relative;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.18)),
    linear-gradient(135deg, rgba(255,255,255,.44), rgba(255,248,242,.20));
  border:1px solid rgba(255,255,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(218,201,188,.35),
    var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.24);
  pointer-events:none;
}

.top-badge{
  width:max-content;
  margin:0 auto 28px;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.44);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow-soft);
  color:#907f74;
  font-size:.83rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}

.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(180deg, #e2d2c6, #b49886);
  box-shadow:0 0 0 5px rgba(217,200,186,.24);
}

.logo-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}

.logo-aura{
  position:absolute;
  top:-30px;
  width:min(420px, 56vw);
  height:min(240px, 32vw);
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.85) 0%, rgba(255,255,255,.16) 42%, transparent 72%);
  filter:blur(10px);
  pointer-events:none;
}

.brand-logo{
  width:min(280px, 44vw);
  max-width:100%;
  filter:drop-shadow(0 12px 28px rgba(140,116,98,.16));
  animation:floaty 6.5s ease-in-out infinite;
}

.wordmark{
  font-size:clamp(3rem, 6.7vw, 6rem);
  line-height:.95;
  letter-spacing:.05em;
  font-weight:500;
  color:#3e3a39;
  text-transform:lowercase;
  text-shadow:0 12px 34px rgba(0,0,0,.06);
}

.copy{
  max-width:720px;
  margin:0 auto;
}

.eyebrow{
  margin:0 0 10px;
  color:#a08f83;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
}

h1{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(3rem, 6vw, 5.3rem);
  line-height:.94;
  font-weight:600;
  color:#776559;
  letter-spacing:.015em;
}

.tagline{
  margin:18px auto 30px;
  max-width:650px;
  color:var(--muted);
  font-size:clamp(1rem, 1.65vw, 1.2rem);
  line-height:1.9;
}

.subscribe{
  width:min(100%, 660px);
  margin:0 auto;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,250,246,.48));
  border:1px solid rgba(255,255,255,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(215,197,183,.35),
    0 20px 50px rgba(117,97,84,.10);
}

.input-shell{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px 0 18px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.24);
}

.mail-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;
  fill:none;
  stroke:#ae9a8b;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.6;
}

input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:1.02rem;
  padding:18px 2px 18px 0;
}

input::placeholder{
  color:#b39f92;
}

.notify-btn{
  border:none;
  outline:none;
  cursor:pointer;
  border-radius:var(--radius-pill);
  padding:18px 28px;
  min-width:190px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fffaf7;
  font:500 1rem/1 "Manrope", sans-serif;
  letter-spacing:.01em;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.02)),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(74,56,44,.08),
    0 12px 28px rgba(150,127,112,.24);
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.notify-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s ease;
}

.notify-btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(74,56,44,.08),
    0 16px 32px rgba(150,127,112,.28);
}

.notify-btn:hover svg{
  transform:translateX(2px);
}

.microcopy{
  min-height:24px;
  margin:16px 0 0;
  color:#9e9086;
  font-size:.96rem;
}

.footer-meta{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(199,179,165,.20);
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  color:#aa9a8f;
  font-size:.86rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer-meta span{
  position:relative;
}

.footer-meta span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-13px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(183,165,151,.45);
  transform:translateY(-50%);
}

.bg-lines{
  position:fixed;
  inset:auto -8% -18% auto;
  width:min(68vw, 1050px);
  height:auto;
  z-index:-2;
  opacity:.58;
  pointer-events:none;
}

.bg-lines path{
  fill:none;
  stroke:rgba(255,255,255,.56);
  stroke-width:1.4;
}

.noise{
  position:fixed;
  inset:0;
  opacity:.08;
  pointer-events:none;
  z-index:-1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0.4px, transparent 0.8px),
    radial-gradient(circle at 80% 60%, rgba(80,60,48,.35) 0.35px, transparent 0.9px);
  background-size:18px 18px, 24px 24px;
  mix-blend-mode:soft-light;
}

.glow,
.orb{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-3;
  filter:blur(10px);
}

.glow-1{
  width:440px;
  height:440px;
  top:-100px;
  left:15%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.08) 55%, transparent 70%);
}

.glow-2{
  width:520px;
  height:520px;
  bottom:-180px;
  right:-80px;
  background:radial-gradient(circle, rgba(227,213,201,.55), rgba(227,213,201,.10) 52%, transparent 72%);
}

.orb-1{
  width:130px;
  height:130px;
  top:13%;
  right:13%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(216,198,183,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  opacity:.58;
}

.orb-2{
  width:84px;
  height:84px;
  left:10%;
  bottom:13%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.72), rgba(218,204,194,.24));
  opacity:.52;
}

.success{
  color:var(--success);
}

.error{
  color:#9d6f6a;
}

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media (max-width: 820px){
  body{
    overflow:auto;
  }

  .page{
    padding:20px;
  }

  .hero-card{
    padding:28px 18px 24px;
  }

  .subscribe{
    flex-direction:column;
    border-radius:30px;
    padding:12px;
  }

  .input-shell,
  .notify-btn{
    width:100%;
  }

  .notify-btn{
    min-width:unset;
  }

  .footer-meta{
    gap:14px 20px;
  }

  .footer-meta span:not(:last-child)::after{
    display:none;
  }
}