/* style.css - Fiira premium UI
   Use Poppins + Playfair Display fonts (imported in HTML)
   Color palette: soft white background, warm pink, soft yellow accents
*/

/* CSS variables for easy theming */
:root{
  --bg: #fffdfc;
  --text: #262626;
  --muted: #6a6a6a;
  --accent: #ff2d75;     /* vibrant pink */
  --accent-2: #ffd166;   /* soft yellow */
  --card: #ffffff;
  --soft-pink: #fff0f6;
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  --shadow: 0 8px 30px rgba(16,24,40,0.06);
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
  color:var(--text);
  font-family: 'Poppins', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  font-size:16px;
}

/* Container */
.container{
  width:92%;
  max-width:1200px;
  margin:0 auto;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border-bottom:1px solid rgba(0,0,0,0.04);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:44px;height:44px;object-fit:cover;border-radius:10px;box-shadow:0 6px 20px rgba(255,45,117,0.08)}
.brand-title{font-weight:800;color:var(--accent);font-size:20px;display:block}
.brand-sub{font-size:12px;color:var(--muted)}

/* Navigation */
.nav{display:flex;align-items:center;gap:12px}
.nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav a:hover{color:var(--accent)}
.nav a.cta{background:linear-gradient(90deg,var(--accent),#ff6aa0);color:white;box-shadow:0 8px 20px rgba(255,45,117,0.12)}

/* Mobile toggle */
.mobile-toggle{display:none;background:none;border: none;font-size:20px}

/* HERO */
.hero-section{padding:70px 0}
.hero-inner{display:flex;align-items:center;gap:30px}
.hero-left{flex:1}
.hero-right{flex:0 0 420px;display:flex;justify-content:center}
.hero-card{background:linear-gradient(180deg, rgba(255,45,117,0.04), rgba(255,209,166,0.02));padding:14px;border-radius:20px;box-shadow:var(--shadow)}
.hero-card img{width:100%;height:auto;border-radius:12px}
.hero-title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:40px;
  margin-bottom:14px;
  line-height:1.05;
}
.hero-title .accent{color:var(--accent)}
.hero-lead{color:var(--muted);font-size:17px;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;margin-bottom:12px}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff6aa0);color:white;box-shadow:0 10px 30px rgba(255,45,117,0.12)}
.btn-outline{border:2px solid var(--accent);color:var(--accent);background:transparent}
.btn-soft{background:rgba(255,45,117,0.06);color:var(--accent)}
.btn-danger{background:#ff6b6b;color:white}

/* hero highlights */
.hero-highlights{list-style:none;margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.hero-highlights li{background:var(--card);padding:8px 12px;border-radius:999px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(16,24,40,0.04)}

/* Sections common */
.section{padding:60px 0}
.section-title{font-size:28px;font-weight:900;color:var(--accent);margin-bottom:8px}
.section-sub{color:var(--muted);margin-bottom:20px}

/* FEATURES grid */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{background:var(--card);padding:22px;border-radius:16px;box-shadow:var(--shadow);text-align:center;transition:transform .25s ease,box-shadow .25s ease}
.feature:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(16,24,40,0.08)}
.feature img{width:80px;height:80px;object-fit:contain;margin-bottom:12px}
.feature h3{font-weight:800;margin-bottom:8px}
.feature p{color:var(--muted);font-size:15px}

/* TRACKER layout */
.tracker-inner{display:flex;gap:30px;align-items:flex-start}
.tracker-left{flex:1}
.tracker-right{flex:0 0 420px}
.card{background:var(--card);padding:20px;border-radius:16px;box-shadow:var(--shadow)}

/* tracker form */
.tracker-card label{display:block;font-weight:700;margin-top:10px}
.tracker-card input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);margin-top:8px}
.inline-row{display:flex;gap:10px;margin-top:12px}
.tracker-result{margin-top:16px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,45,117,0.03), rgba(255,209,166,0.01));min-height:70px}

/* progress visual */
.tracker-visual img{width:100%;border-radius:12px}
.progress-wrap{margin-top:12px}
.progress-label{font-weight:700;margin-bottom:8px}
.progress-bar{background:rgba(0,0,0,0.06);height:12px;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width .6s ease}
.progress-text{margin-top:8px;color:var(--muted);font-size:14px}

/* saved cycles list */
.saved-cycles{list-style:none;padding-left:0;margin-top:10px}
.saved-cycles li{padding:8px 10px;border-radius:8px;margin-bottom:8px;background:rgba(255,45,117,0.04);display:flex;justify-content:space-between;align-items:center}

/* HEALTH accordion */
.accordion{display:grid;gap:12px}
.accordion-item{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.accordion-toggle{background:linear-gradient(90deg, rgba(255,45,117,0.06), rgba(255,209,166,0.02));padding:16px;font-weight:800;border:none;width:100%;text-align:left;cursor:pointer;font-size:16px}
.accordion-panel{padding:16px;border-top:1px solid rgba(0,0,0,0.04);display:none}
.accordion-panel ul{margin-top:8px}

/* DIET grid */
.diet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.diet-card{padding:18px;border-radius:12px;box-shadow:var(--shadow)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.faq-item{background:var(--card);padding:16px;border-radius:12px;box-shadow:var(--shadow)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.contact-card input, .contact-card textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);margin-top:8px}
.contact-info ul{list-style:none;padding-left:0;margin-top:12px}
.contact-info ul li{margin-bottom:8px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* FOOTER */
.footer{padding:28px 0;background:linear-gradient(180deg,#fffdfb,#fff8f2);border-top:1px solid rgba(0,0,0,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer .muted{color:var(--muted)}

/* small screens */
@media(max-width:1000px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column-reverse;gap:25px}
  .hero-right{width:100%}
  .tracker-inner{flex-direction:column}
  .tracker-right{width:100%}
  .container{width:94%}
  .nav{display:none}
  .mobile-toggle{display:block}
}

/* mobile narrow */
@media(max-width:580px){
  .features-grid{grid-template-columns:1fr}
  .diet-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .brand-title{font-size:18px}
}