/* ===== FormaOrigin Light Theme (White, Black & Gold) ===== */
:root{
  --bg:#ffffff;
  --surface:#fafafa;
  --text:#161616;
  --muted:#636363;
  --line:#eaeaea;
  --gold:#C8A24E;
  --gold-2:#D4AF37;
  --accent:#C8A24E;
  --maxw:1180px;
  --radius:18px;
  --shadow:0 12px 34px rgba(17,17,17,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:999px;border:1px solid var(--gold-2);color:#fff;background:linear-gradient(180deg,var(--gold),var(--gold-2));box-shadow:var(--shadow);font-weight:700;letter-spacing:.2px}
.btn.outline{background:transparent;color:var(--text);border-color:var(--gold-2)}
.badge{display:inline-block;padding:.35rem .7rem;border:1px solid var(--gold-2);border-radius:999px;color:var(--gold-2);font-size:.85rem;letter-spacing:.3px;background:#fff}

header.site{
  position:sticky;top:0;z-index:999;background:rgba(255,255,255,.8);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav .right{display:flex;align-items:center;gap:18px}
.nav a{font-weight:600}
.nav .cta{margin-left:6px}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:52px;height:auto;filter:drop-shadow(0 6px 16px rgba(212,175,55,.2))}
.brand .name{font-family:'Playfair Display',serif;font-size:1.35rem;letter-spacing:.4px}
.gold{color:var(--gold-2)}

/* Hero */
.hero{
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(212,175,55,.12), transparent),
    radial-gradient(700px 300px at 20% 0%, rgba(212,175,55,.10), transparent),
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    url('../img/eyelashes-formaorigin.gif') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;min-height:72vh;align-items:center;padding:80px 0}
.hero h1{font-family:'Playfair Display',serif;font-size:3.1rem;line-height:1.1;margin:0 0 14px 0; color: white;}
.hero p.lead{font-size:1.18rem;color:white;margin:0 0 26px}
.hero .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

/* Section */
.section{padding:74px 0;border-bottom:1px solid var(--line)}
.section h2{font-family:'Playfair Display',serif;font-size:2.3rem;margin:0 0 22px}
.section p.sub{color:var(--muted);max-width:820px}

/* Alternating features for Top formations */
.features{display:flex;flex-direction:column;gap:34px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.feature .pic{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.feature .text{padding:6px 8px}
.feature h3{margin:0 0 6px;font-size:1.5rem}
.feature p{color:var(--muted)}
.feature:nth-child(even) .pic{order:2}
.feature:nth-child(even) .text{order:1}

/* Counters */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.counter{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;box-shadow:var(--shadow)}
.counter .num{font-size:2.4rem;font-weight:800;letter-spacing:.5px;color:#111}
.counter .label{color:var(--muted)}

/* About snip */
.about-snippet{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center}
.about-snippet img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{border-radius:14px;border:1px solid var(--line);transition:transform .4s ease;box-shadow:var(--shadow)}
.gallery img:hover{transform:scale(1.02)}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.contact .card{height:100%}

/* Footer */
footer{padding:40px 0;background:#ffffff;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px}
footer h4{margin:0 0 12px;font-family:'Playfair Display',serif}
footer a{color:var(--text)}

.small{font-size:.94rem;color:var(--muted)}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

@media (max-width: 980px){
  .hero .inner{grid-template-columns:1fr;min-height:auto;padding:50px 0}
  .feature{grid-template-columns:1fr}
  .counters, .gallery, .about-snippet, .contact, .footer-grid{grid-template-columns:1fr}
}

/* Animations */
.fade-up{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.fade-up.appear{opacity:1;transform:translateY(0)}
.slide-left{opacity:0;transform:translateX(-18px);transition:opacity .7s ease, transform .7s ease}
.slide-right{opacity:0;transform:translateX(18px);transition:opacity .7s ease, transform .7s ease}
.slide-left.appear,.slide-right.appear{opacity:1;transform:translateX(0)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}


/* Lightbox overlay */
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 9999;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox.show {
  visibility: visible;
  opacity: 1;
}
.lightbox:after {
  content: '✕';
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}