/* ==========================================
   N-Essentials — Landing Page Styles
   Brand: Green #3A6B4C | Dark Green #0B3D2C
   Gold #CBA135 | Pink #FF8DA1 | White #FFFFFF
   ========================================== */

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;color:#0B3D2C;background:#FFFFFF;line-height:1.6;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* --- RTL --- */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .header-inner{flex-direction:row-reverse}
html[dir="rtl"] .logo-link{margin-right:0;margin-left:auto}
html[dir="rtl"] .lang-toggle{margin-left:0;margin-right:auto}
html[dir="rtl"] .input-group{flex-direction:row-reverse}
html[dir="rtl"] .footer-social{flex-direction:row-reverse}

/* --- TYPOGRAPHY --- */
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.2}
h2{font-size:clamp(1.75rem,4vw,2.5rem);text-align:center;margin-bottom:1rem}

/* --- CONTAINER --- */
.container{width:min(100% - 2rem, 1100px);margin-inline:auto}

/* --- HEADER --- */
.header{border-bottom:1px solid rgba(11,61,44,0.08);position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo-img{height:40px;width:auto}
.lang-toggle{font-family:Georgia,'Times New Roman',serif;font-size:0.9rem;color:#3A6B4C;padding:0.4rem 1rem;border:1px solid #3A6B4C;border-radius:2rem;transition:all 0.2s}
.lang-toggle:hover{background:#3A6B4C;color:#FFF}

/* --- HERO --- */
.hero{position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0B3D2C 0%,#3A6B4C 40%,#1a5c38 100%);z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(255,141,161,0.12) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(203,161,53,0.08) 0%,transparent 50%);z-index:1}
.hero-content{position:relative;z-index:2;padding:4rem 1rem}
.hero-logo{max-width:380px;margin:0 auto 2rem;filter:drop-shadow(0 4px 20px rgba(0,0,0,0.2))}
.hero-tagline{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.25rem,3vw,1.75rem);color:#FF8DA1;letter-spacing:4px;font-style:italic;margin-bottom:1.25rem}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,0.85);max-width:550px;margin:0 auto 2.5rem;line-height:1.7}
.btn-cta{display:inline-block;background:linear-gradient(135deg,#CBA135,#FF8DA1);color:#FFF;font-family:Georgia,'Times New Roman',serif;font-size:1rem;font-style:italic;letter-spacing:1px;padding:0.9rem 2.5rem;border-radius:3rem;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 20px rgba(203,161,53,0.3)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(203,161,53,0.45)}

/* --- VIDEO SECTION --- */
.video-section{padding:5rem 0;background:#faf8f5}
.video-section h2{color:#0B3D2C}
.video-wrapper{max-width:700px;margin:2rem auto 0;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#3A6B4C,#0B3D2C)}

/* --- FEATURES --- */
.features{padding:5rem 0}
.features h2{color:#0B3D2C}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:3rem}
.feature-card{background:#FFF;border:1px solid rgba(11,61,44,0.08);border-radius:12px;padding:2rem;text-align:center;transition:transform 0.2s,box-shadow 0.2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(11,61,44,0.08)}
.feature-icon{width:56px;height:56px;margin:0 auto 1.25rem}
.feature-icon svg{width:100%;height:100%}
.feature-card h3{font-size:1.1rem;margin-bottom:0.75rem;color:#3A6B4C}
.feature-card p{font-size:0.95rem;color:#555;line-height:1.7}

/* --- MEN'S GIFTING --- */
.mens-teaser{padding:4rem 0;background:linear-gradient(135deg,rgba(203,161,53,0.06),rgba(255,141,161,0.06))}
.mens-content{display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.mens-text{flex:1;min-width:280px}
.mens-text h2{text-align:left;color:#0B3D2C}
html[dir="rtl"] .mens-text h2{text-align:right}
.mens-text p{font-size:1.05rem;color:#555;line-height:1.7}
.mens-icon{flex-shrink:0;width:80px;height:80px}
.mens-icon svg{width:100%;height:100%}

/* --- SIGNUP --- */
.signup{padding:5rem 0;text-align:center;background:#0B3D2C;color:#FFF}
.signup h2{color:#FF8DA1}
.signup-sub{color:rgba(255,255,255,0.75);margin-bottom:2rem;font-size:1.05rem}
.signup-form{max-width:480px;margin:0 auto}
.input-group{display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center}
.input-group input{flex:1;min-width:220px;padding:0.9rem 1.25rem;border:1px solid rgba(255,255,255,0.2);border-radius:3rem;background:rgba(255,255,255,0.1);color:#FFF;font-size:1rem;outline:none;transition:border-color 0.2s}
.input-group input::placeholder{color:rgba(255,255,255,0.4)}
.input-group input:focus{border-color:#CBA135}
.signup-confirmation{color:#CBA135;margin-top:1rem;font-style:italic}
.signup-error{color:#FF8DA1;margin-top:1rem;font-style:italic}

/* --- FOOTER --- */
.footer{border-top:1px solid rgba(11,61,44,0.08);padding:3rem 0 2rem;text-align:center}
.footer-brand{margin-bottom:1.5rem}
.footer-logo{height:32px;margin:0 auto 0.5rem}
.footer-tagline{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:#FF8DA1;font-size:0.85rem;letter-spacing:2px}
.footer-social{display:flex;gap:1.25rem;justify-content:center;margin-bottom:1.5rem}
.social-link{width:36px;height:36px;color:#3A6B4C;transition:color 0.2s,transform 0.2s}
.social-link:hover{color:#CBA135;transform:translateY(-2px)}
.footer-copy{font-size:0.85rem;color:#888;margin-bottom:0.25rem}
.footer-credit{font-size:0.8rem;color:#aaa}

/* --- COMING SOON PAGE --- */
.coming-soon-page{padding:8rem 0;text-align:center;min-height:60vh;display:flex;align-items:center}
.coming-soon-title{font-family:Georgia,'Times New Roman',serif;font-size:2.5rem;color:#3A6B4C;margin-bottom:1rem}
.coming-soon-text{color:#666;margin-bottom:2rem}

/* --- RESPONSIVE --- */
@media (max-width:768px){
  .hero-logo{max-width:260px}
  .mens-content{flex-direction:column;text-align:center}
  .mens-text h2{text-align:center}
  .mens-icon{margin:0 auto}
  .features-grid{grid-template-columns:1fr}
  .input-group{flex-direction:column;align-items:center}
  .input-group input{width:100%}
}
@media (max-width:375px){
  .hero-logo{max-width:220px}
  .btn-cta{font-size:0.9rem;padding:0.75rem 2rem}
}

/* ===== ANNOUNCEMENT BANNER ===== */
.announce-section {
  background: linear-gradient(180deg, #0B3D2C 0%, #3A6B4C 60%);
  padding: 2rem 0 1rem;
}
.announce-banner {
  max-width: 680px;
  margin: 0 auto;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(203,161,53,0.25);
  border-radius: 60px;
  padding: 0.7rem 1.2rem;
  overflow: hidden;
}
.announce-marquee {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: announce-scroll 24s linear infinite;
}
.announce-msg {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: #CBA135;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.announce-msg a {
  color: #FF8DA1;
  border-bottom: 1px solid rgba(255,141,161,0.4);
  transition: color 0.2s;
}
.announce-msg a:hover {
  color: #ff6b84;
}
@keyframes announce-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.announce-banner:hover .announce-marquee {
  animation-play-state: paused;
}
/* RTL: scroll opposite direction */
html[dir="rtl"] .announce-marquee {
  animation-name: announce-scroll-rtl;
}
@keyframes announce-scroll-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@media (max-width: 600px) {
  .announce-section {
    padding: 1.25rem 0 0.75rem;
  }
  .announce-banner {
    max-width: 92%;
    border-radius: 50px;
    padding: 0.55rem 1rem;
  }
  .announce-msg {
    font-size: 0.82rem;
  }
}