/* Stars Lab — landing & articles shared stylesheet */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',-apple-system,sans-serif;
  background:linear-gradient(160deg,#0d0820 0%,#1a0c38 40%,#0f1a3a 100%);
  background-attachment:fixed;
  color:rgba(230,210,255,.92);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
a { color:rgba(168,120,255,.95); }

/* top nav */
.topnav {
  display:flex; align-items:center; justify-content:space-between;
  max-width:760px; margin:0 auto; padding:22px;
}
.topnav .brand {
  font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:300;
  color:rgba(230,210,255,.95); letter-spacing:.05em; text-decoration:none;
}
.topnav .brand .gem { color:#c8903a; font-size:.62em; vertical-align:.18em; margin:0 3px; }
.topnav .nav-right { display:flex; align-items:center; gap:14px; }
.topnav .nav-login {
  text-decoration:none; font-weight:700; font-size:.82rem;
  color:rgba(200,176,240,.85);
}
.topnav .nav-login:hover { color:rgba(220,200,255,.98); }
.topnav .nav-cta {
  text-decoration:none; font-weight:800; font-size:.82rem; color:#fff;
  padding:9px 20px; border-radius:999px;
  background:linear-gradient(135deg,#9050d8,#d0709a);
}
/* hero secondary action — log in link under the main CTA */
.hero .login-link {
  display:inline-block; margin-top:16px; font-size:.84rem; font-weight:700;
  color:rgba(200,176,240,.8); text-decoration:none;
}
.hero .login-link:hover { color:rgba(220,200,255,.98); }

/* hero */
.hero { text-align:center; padding:60px 22px 52px; }
.hero .brand-lg {
  font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:300;
  color:rgba(230,210,255,.95); letter-spacing:.05em; margin-bottom:30px;
}
.hero .brand-lg .gem { color:#c8903a; font-size:.62em; vertical-align:.18em; margin:0 4px; }
.hero h1 {
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2.1rem,6vw,3.3rem); line-height:1.18;
  color:rgba(238,224,255,.97); margin-bottom:18px; letter-spacing:.01em;
}
.hero h1 .accent { color:#c8903a; font-style:italic; }
.hero .sub {
  font-size:clamp(.95rem,2.4vw,1.1rem); color:rgba(190,165,230,.78);
  max-width:560px; margin:0 auto 36px; line-height:1.65;
}

/* CTA button */
.cta {
  display:inline-block; text-decoration:none;
  font-weight:800; font-size:1.12rem; letter-spacing:.02em;
  color:#fff; padding:18px 46px; border-radius:999px;
  background:linear-gradient(135deg,#9050d8,#d0709a);
  box-shadow:0 10px 38px rgba(144,80,220,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform:translateY(-2px); box-shadow:0 14px 46px rgba(144,80,220,.6); }
.cta-note { display:block; margin-top:14px; font-size:.78rem; color:rgba(180,150,220,.6); }

/* trust strip */
.trust { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:54px 0 12px; }
.trust-item {
  flex:1; min-width:200px; max-width:230px;
  background:rgba(144,80,220,.08); border:1.5px solid rgba(144,80,220,.22);
  border-radius:16px; padding:20px 18px; text-align:center;
}
.trust-item .ti-glyph { font-size:1.4rem; margin-bottom:8px; }
.trust-item .ti-h { font-weight:800; font-size:.92rem; color:rgba(228,212,255,.95); margin-bottom:5px; }
.trust-item .ti-b { font-size:.82rem; color:rgba(186,160,224,.78); line-height:1.55; }

/* how it works block */
.howto { padding:20px 22px 0; }
.howto-card {
  max-width:600px; margin:0 auto;
  background:rgba(144,80,220,.08); border:1.5px solid rgba(144,80,220,.22);
  border-radius:18px; padding:26px 28px; text-align:center;
}
.howto-h {
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(200,144,58,.85); margin-bottom:12px;
}
.howto-card p { font-size:.92rem; color:rgba(200,178,236,.86); margin-bottom:10px; line-height:1.62; }
.howto-card p:last-child { margin-bottom:0; }
.howto-card strong { color:rgba(232,216,255,.98); font-weight:700; }

/* feature section (landing) */
.features { padding:40px 0 6px; }
.feat-lead {
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(200,144,58,.08); border:1.5px solid rgba(200,144,58,.32);
  border-radius:18px; padding:26px;
}
.feat-lead .fl-glyph { font-size:2rem; line-height:1; flex-shrink:0; }
.feat-lead .fl-h {
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.35rem;
  color:rgba(236,222,254,.97); margin-bottom:7px; line-height:1.3;
}
.feat-lead .fl-body p { font-size:.92rem; color:rgba(200,178,236,.86); line-height:1.62; }
.feat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; margin-top:14px;
}
.feat {
  background:rgba(144,80,220,.07); border:1.5px solid rgba(144,80,220,.2);
  border-radius:16px; padding:20px;
}
.feat .ft-glyph { font-size:1.4rem; margin-bottom:8px; }
.feat .ft-h {
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.12rem;
  color:rgba(236,222,254,.97); margin-bottom:5px; line-height:1.3;
}
.feat .ft-b { font-size:.83rem; color:rgba(190,165,230,.78); line-height:1.55; }

/* section heading */
.section-label {
  text-align:center; font-size:.7rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(200,144,58,.85); margin-bottom:8px;
}
.section-title {
  text-align:center; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.7rem,4.5vw,2.4rem); color:rgba(234,220,252,.96); margin-bottom:40px;
}

/* article card grid (hub) */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; padding:8px 0 30px; }
.acard {
  display:block; text-decoration:none;
  background:rgba(144,80,220,.07); border:1.5px solid rgba(144,80,220,.2);
  border-radius:16px; padding:22px 20px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.acard:hover { transform:translateY(-3px); border-color:rgba(168,120,255,.5); background:rgba(144,80,220,.12); }
.acard .ac-glyph { font-size:1.5rem; margin-bottom:10px; }
.acard .ac-h { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.2rem; color:rgba(236,222,254,.97); margin-bottom:6px; line-height:1.3; }
.acard .ac-b { font-size:.83rem; color:rgba(190,165,230,.78); line-height:1.55; }

/* article page body */
.articlepage { padding:40px 0 30px; }
.articlepage .eyebrow {
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(200,144,58,.85); margin-bottom:10px;
}
.articlepage h1 {
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.2;
  color:rgba(238,224,255,.97); margin-bottom:22px;
}
.articlepage p { font-size:1rem; color:rgba(206,184,238,.9); margin-bottom:15px; }
.articlepage strong { color:rgba(232,216,255,.98); font-weight:700; }
.articlepage h2 {
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(1.3rem,3.4vw,1.7rem); color:rgba(236,222,254,.97);
  margin:30px 0 12px;
}
.articlepage .pull {
  border-left:3px solid #c8903a; padding:6px 0 6px 18px; margin:22px 0;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.18rem; color:rgba(218,198,248,.94);
}

/* inline CTA block */
.cta-block {
  text-align:center; margin:44px 0 10px; padding:34px 24px;
  background:rgba(144,80,220,.09); border:1.5px solid rgba(144,80,220,.26);
  border-radius:20px;
}
.cta-block h2 {
  font-family:'Cormorant Garamond',serif; font-weight:400; margin:0 0 8px;
  font-size:clamp(1.5rem,4vw,2rem); color:rgba(236,222,254,.97);
}
.cta-block p { color:rgba(190,165,230,.78); margin:0 auto 22px; max-width:420px; font-size:.92rem; }

/* related articles */
.related { padding:36px 0 10px; }
.related .rel-label {
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(200,144,58,.85); margin-bottom:14px;
}
.related a {
  display:block; text-decoration:none;
  padding:13px 16px; margin-bottom:9px;
  background:rgba(144,80,220,.07); border:1.5px solid rgba(144,80,220,.18);
  border-radius:12px; font-weight:700; font-size:.9rem;
  color:rgba(216,196,246,.95);
  transition:border-color .15s ease;
}
.related a:hover { border-color:rgba(168,120,255,.5); }
.related a .arrow { float:right; color:rgba(200,144,58,.85); }

/* FAQ section — collapsible pills */
.faq { padding:50px 0 10px; }
.faq-item {
  background:rgba(144,80,220,.07); border:1.5px solid rgba(144,80,220,.2);
  border-radius:14px; margin-bottom:10px; overflow:hidden;
  transition:border-color .15s ease, background .15s ease;
}
.faq-item[open] { border-color:rgba(168,120,255,.45); background:rgba(144,80,220,.1); }
.faq-item .faq-q {
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.16rem;
  color:rgba(236,222,254,.97); line-height:1.35;
  padding:15px 20px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq-item .faq-q::-webkit-details-marker { display:none; }
.faq-item .faq-q::after {
  content:'+'; font-family:'Nunito',sans-serif; font-weight:400; font-size:1.4rem;
  color:rgba(200,144,58,.9); line-height:1; flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item[open] .faq-q::after { transform:rotate(45deg); }
.faq-item .faq-q:hover { color:#fff; }
.faq-item .faq-a {
  padding:0 20px 17px; font-size:.9rem;
  color:rgba(196,172,234,.85); line-height:1.62;
}

/* closing */
.closing { text-align:center; padding:50px 22px 30px; }
.closing h2 {
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.7rem,4.5vw,2.5rem); color:rgba(236,222,254,.97); margin-bottom:14px;
}
.closing p { color:rgba(190,165,230,.78); max-width:480px; margin:0 auto 30px; font-size:.98rem; }

/* footer */
footer {
  text-align:center; padding:40px 22px 56px;
  border-top:1px solid rgba(144,80,220,.15); margin-top:30px;
  font-size:.78rem; color:rgba(160,135,200,.6);
}
footer a { text-decoration:none; }
footer .links { margin-bottom:10px; }
footer .links a { margin:0 9px; display:inline-block; }

/* ambient stars */
.star { position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite; }
@keyframes twinkle { 0%,100%{opacity:.15;transform:scale(.7)} 50%{opacity:.7;transform:scale(1.1)} }
.content { position:relative; z-index:1; }