/* Naturo Blend — Coming Soon
   Colors: forest #0A3D22 · deep #062212 · gold #D5B36A · gold-hover #E3C47E
           mint #8FD9A8 · green #2FB56A · cream #FAFAF5 */

@font-face{font-family:"Montserrat";src:url("fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/Montserrat-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0A3D22;color:#FAFAF5;font-family:"Montserrat",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#D5B36A;text-decoration:none}
a:hover{color:#E3C47E}
button,input{font-family:inherit}
img{display:block;max-width:100%}
input::placeholder{color:rgba(250,250,245,0.5)}
input:-webkit-autofill{-webkit-text-fill-color:#D5B36A;box-shadow:0 0 0 1000px #0A3D22 inset}

html{scrollbar-color:#2FB56A #07301A;scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#07301A}
::-webkit-scrollbar-thumb{background:#2FB56A;border-radius:999px;border:2px solid #07301A}
::-webkit-scrollbar-thumb:hover{background:#3FCB7C}

@keyframes nbFloat{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-14px)}}
@keyframes nbSpin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.page{position:relative;min-height:100vh;min-height:100svh;background:#0A3D22 url("assets/hero-bg.jpg") center/cover no-repeat;overflow:hidden;display:flex;flex-direction:column}
.page__shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,34,18,0.94) 0%,rgba(6,34,18,0.8) 50%,rgba(6,34,18,0.45) 100%)}

.header{position:relative;max-width:1360px;width:100%;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.header__logo{height:clamp(32px,3.6vw,44px);width:auto}
.header__pill{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#D5B36A;border:1px solid rgba(213,179,106,0.5);padding:8px 14px;border-radius:999px;white-space:nowrap}

.main{position:relative;flex:1;max-width:1360px;width:100%;margin:0 auto;padding:clamp(24px,4vw,56px) clamp(20px,4vw,48px) clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(24px,4vw,56px);align-items:center}

.content{display:flex;flex-direction:column;gap:28px;max-width:640px}
.content__copy{display:flex;flex-direction:column;gap:14px}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#D5B36A}
.headline{margin:0;font-size:clamp(44px,7vw,104px);font-weight:700;line-height:1.06;letter-spacing:-0.035em;text-wrap:balance;padding-bottom:0.08em;background:linear-gradient(180deg,#FFFFFF 0%,#EAF6EE 38%,#8FD9A8 70%,#2FB56A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 24px rgba(47,181,106,0.35))}

.sub{display:flex;flex-direction:column;gap:12px;max-width:540px}
.sub__tag{font-size:clamp(12px,1vw,14px);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#D5B36A;line-height:1.5;text-wrap:balance}
.sub__rule{display:block;width:48px;height:1px;background:rgba(213,179,106,0.6)}
.sub__text{margin:0;font-size:clamp(18px,1.7vw,24px);font-weight:500;line-height:1.4;letter-spacing:-0.01em;text-wrap:balance;color:#FAFAF5}
.accent{color:#8FD9A8}

/* ---------- countdown ---------- */
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1vw,12px);max-width:560px}
.countdown__unit{background:rgba(6,40,20,0.7);border:1px solid rgba(213,179,106,0.4);border-radius:18px;padding:clamp(12px,1.6vw,20px) 8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.countdown__value{font-size:clamp(28px,4.2vw,56px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:#D5B36A;font-variant-numeric:tabular-nums}
.countdown__label{font-size:clamp(10px,0.9vw,12px);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,250,245,0.7)}

/* ---------- signup ---------- */
.signup{display:flex;flex-direction:column;gap:12px;max-width:520px}
.signup__form{display:flex;gap:8px;background:rgba(250,250,245,0.08);border:1px solid rgba(213,179,106,0.45);border-radius:999px;padding:5px;transition:border-color .2s}
.signup__form:focus-within{border-color:rgba(213,179,106,0.9)}
.signup__form.is-error{border-color:#E06A5A}
.signup__input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#D5B36A;caret-color:#D5B36A;font-size:15px;font-weight:500;padding:0 18px}
.signup__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup__button{height:50px;padding:0 22px;border-radius:999px;border:0;background:#D5B36A;color:#0A3D22;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s,opacity .2s}
.signup__button:hover{background:#E3C47E}
.signup__button:disabled{opacity:.7;cursor:default}
.signup__note{font-size:13px;color:rgba(250,250,245,0.7)}
.signup__note strong{color:#FAFAF5;font-weight:700}
.signup__note.is-error{color:#F0A498}
.signup__done{display:flex;align-items:center;gap:14px;background:rgba(6,40,20,0.7);border:1px solid rgba(213,179,106,0.45);border-radius:999px;padding:12px 20px;font-size:14px;color:#FAFAF5}
.signup__done[hidden]{display:none}
.signup__check{width:32px;height:32px;border-radius:999px;background:#D5B36A;color:#0A3D22;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);align-items:center}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px}
.badge img{height:40px;width:auto;filter:invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1)}
.badge span{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(250,250,245,0.75)}

/* ---------- visual ---------- */
.visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(320px,42vw,620px)}
.visual__ring{position:absolute;width:clamp(280px,34vw,520px);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(213,179,106,0.55);animation:nbSpin 90s linear infinite}
.visual__glow{position:absolute;width:clamp(200px,25vw,380px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(213,179,106,0.4),rgba(213,179,106,0) 70%)}
.visual__bottle{position:relative;height:clamp(300px,40vw,580px);width:auto;animation:nbFloat 6s ease-in-out infinite;filter:drop-shadow(0 40px 50px rgba(0,0,0,0.5))}

/* ---------- footer ---------- */
.footer{position:relative;max-width:1360px;width:100%;margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(20px,3vw,32px);display:flex;justify-content:center;text-align:center;font-size:12px;color:rgba(250,250,245,0.6)}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .signup__form{flex-direction:column;border-radius:28px;padding:8px}
  .signup__input{height:44px;padding:0 14px}
  .signup__button{width:100%}
  .main{grid-template-columns:1fr}
  .visual{min-height:260px}
  .visual__bottle{height:240px}
}

@media (prefers-reduced-motion:reduce){
  .visual__ring,.visual__bottle{animation:none}
}