/* ==========================================================================
   The Silent Carat — stylesheet
   Design language: a jeweler's inspection tray. Dark velvet ground,
   cool metallic accents, a warm champagne grade-mark, and a certificate
   ("The Ledger") built from a repurposed 4Cs grading vocabulary.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #0F1113;
  --graphite:   #1B1E22;
  --graphite-2: #23262B;
  --paper:      #F4F5F3;
  --paper-dim:  #C7CBCF;
  --platinum:   #98A4AC;
  --champagne:  #C9A66B;
  --champagne-2:#E0C08C;
  --signal:     #7FB6A8;
  --line:       rgba(244,245,243,0.10);
  --line-strong:rgba(244,245,243,0.18);

  --display: 'Fraunces', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Scroll-reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger .reveal:nth-child(1){ transition-delay:0ms; }
.reveal-stagger .reveal:nth-child(2){ transition-delay:80ms; }
.reveal-stagger .reveal:nth-child(3){ transition-delay:160ms; }
.reveal-stagger .reveal:nth-child(4){ transition-delay:240ms; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--champagne-2);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--champagne-2);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,19,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled{
  background:rgba(15,17,19,0.96);
  box-shadow:0 12px 32px -20px rgba(0,0,0,0.7);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:20px; letter-spacing:0.01em;
  text-decoration:none; color:var(--paper);
}
.logo .mark{ width:22px; height:22px; }
.logo .mark path{ stroke:var(--champagne-2); }

nav.primary-nav ul{ display:flex; gap:32px; }
nav.primary-nav a{
  position:relative;
  font-size:14px; text-decoration:none; color:var(--paper-dim);
  transition:color .2s ease;
  padding-bottom:2px;
}
nav.primary-nav a::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:0; height:1px;
  background:var(--champagne-2);
  transition:width .25s cubic-bezier(.16,.8,.24,1);
}
nav.primary-nav a:hover{ color:var(--paper); }
nav.primary-nav a:hover::after{ width:100%; }
.nav-cta{
  display:inline-block;
  padding:10px 18px;
  border:1px solid var(--champagne);
  color:var(--champagne-2) !important;
  border-radius:2px;
  font-size:13px !important;
  letter-spacing:0.04em;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nav-cta:hover{ background:var(--champagne); color:var(--ink) !important; box-shadow:0 0 24px rgba(201,166,107,0.35); transform:translateY(-1px); }
.nav-cta::after{ display:none; }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  nav.primary-nav ul{
    display:none;
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--graphite);
    border-bottom:1px solid var(--line-strong);
    padding:8px 28px 20px;
  }
  nav.primary-nav ul li{ padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line-strong); color:var(--paper); padding:8px 12px; border-radius:2px; font-family:var(--mono); font-size:12px; }
  .nav-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:96px 0 88px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 82% -10%, rgba(201,166,107,0.16), transparent 60%),
    radial-gradient(500px 380px at 10% 110%, rgba(127,182,168,0.12), transparent 60%);
  pointer-events:none;
  animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-10px,14px,0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } }

.hero h1{ opacity:0; animation:rise .8s cubic-bezier(.16,.8,.24,1) .1s forwards; }
.hero .lede{ opacity:0; animation:rise .8s cubic-bezier(.16,.8,.24,1) .24s forwards; }
.hero .cta-row{ opacity:0; animation:rise .8s cubic-bezier(.16,.8,.24,1) .36s forwards; }
.hero .hero-stats{ opacity:0; animation:rise .8s cubic-bezier(.16,.8,.24,1) .48s forwards; }
.hero .eyebrow{ opacity:0; animation:rise .8s cubic-bezier(.16,.8,.24,1) 0s forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero .lede, .hero .cta-row, .hero .hero-stats, .hero .eyebrow{ animation:none; opacity:1; }
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width:920px){ .hero .wrap{ grid-template-columns:1fr; } .hero-figure{ order:-1; max-width:280px; margin:0 auto; } }

.hero h1{
  font-size:clamp(34px,4.6vw,56px);
  margin-top:14px;
  color:var(--paper);
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg, var(--champagne-2) 20%, #fff3dd 45%, var(--champagne) 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce){ .hero h1 em{ animation:none; background-position:0 0; } }
.hero .lede{
  margin-top:20px;
  font-size:17px;
  color:var(--paper-dim);
  max-width:46ch;
}
.hero .cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px;
  border-radius:2px;
  font-size:14px; font-weight:600; letter-spacing:0.02em;
  text-decoration:none;
  border:1px solid transparent;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.16,.8,.24,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary{ background:var(--champagne); color:var(--ink); }
.btn-primary::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
}
.btn-primary:hover::after{ left:120%; }
.btn-primary:hover{ background:var(--champagne-2); transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(201,166,107,0.45); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ border-color:var(--line-strong); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper-dim); transform:translateY(-2px); background:rgba(244,245,243,0.04); }
@media (prefers-reduced-motion: reduce){ .btn, .btn-primary::after{ transition:none; } }

.hero-stats{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div{ font-family:var(--mono); }
.hero-stats .num{ font-size:22px; color:var(--paper); display:block; }
.hero-stats .lbl{ font-size:11px; color:var(--paper-dim); letter-spacing:0.06em; text-transform:uppercase; }

/* diamond figure */
.hero-figure{ position:relative; perspective:900px; }
.hero-figure svg{ width:100%; height:auto; will-change:transform; }
.facet-note{
  position:absolute;
  font-family:var(--mono); font-size:11px; color:var(--paper-dim);
  background:var(--graphite); border:1px solid var(--line-strong);
  padding:6px 10px; border-radius:2px; white-space:nowrap;
  opacity:0; transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.hero-figure:hover .facet-note{ opacity:1; transform:translateY(0); }
.facet-note.n1{ top:6%; left:-6%; }
.facet-note.n2{ top:42%; right:-14%; }
.facet-note.n3{ bottom:4%; left:2%; }

/* ---------- Section shell ---------- */
section{ padding:90px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(26px,3.2vw,38px); margin-top:12px; }
.section-head p{ margin-top:16px; color:var(--paper-dim); font-size:16px; }
.section-alt{ background:var(--graphite); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- Why lab-grown ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.why-card{ background:var(--ink); padding:32px 28px; transition:background .25s ease; }
.section-alt .why-card{ background:var(--graphite); }
.why-card:hover{ background:var(--graphite-2); }
.section-alt .why-card:hover{ background:#282b31; }
.why-card .fig{ font-family:var(--mono); color:var(--champagne-2); font-size:13px; }
.why-card h3{ font-size:19px; margin-top:14px; color:var(--paper); }
.why-card p{ margin-top:10px; color:var(--paper-dim); font-size:14.5px; }
@media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Ledger filters & type pills ---------- */
.ledger-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-pill{
  border:1px solid var(--line-strong); background:transparent; color:var(--paper-dim);
  padding:9px 16px; border-radius:999px; font-size:13px; font-family:var(--body);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.filter-pill:hover{ border-color:var(--paper-dim); color:var(--paper); }
.filter-pill.active{ border-color:var(--champagne); background:rgba(201,166,107,0.12); color:var(--champagne-2); }

.type-pill{
  display:inline-block;
  margin-left:8px;
  padding:2px 9px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--body);
  font-size:10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--signal);
  vertical-align:middle;
}

/* ---------- The Ledger (retailer certificates) ---------- */
.ledger-list{ display:flex; flex-direction:column; gap:22px; }

.cert{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--graphite), var(--graphite-2));
  border-radius:6px;
  padding:0;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
  transition:transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease, border-color .3s ease;
}
.cert:hover{
  transform:translateY(-4px);
  border-color:rgba(201,166,107,0.35);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 56px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,166,107,0.08);
}
@media (prefers-reduced-motion: reduce){ .cert{ transition:none; } .cert:hover{ transform:none; } }
.cert-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px;
  border-bottom:1px dashed var(--line-strong);
  gap:20px; flex-wrap:wrap;
}
.cert-id{ font-family:var(--mono); font-size:11px; color:var(--paper-dim); letter-spacing:0.06em; }
.cert-name{ font-family:var(--display); font-size:26px; color:var(--paper); margin-top:4px; }
.cert-tagline{ font-size:13.5px; color:var(--paper-dim); margin-top:4px; max-width:52ch; }
.cert-price{ text-align:right; font-family:var(--mono); }
.cert-price .band{ font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:0.06em; }
.cert-price .range{ font-size:19px; color:var(--champagne-2); margin-top:2px; }

.cert-body{ padding:24px 26px 26px; display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; }
@media (max-width:640px){ .cert-body{ grid-template-columns:1fr; } .cert-top{ flex-direction:column; align-items:flex-start; } .cert-price{ text-align:left; } }

.grade-row{ display:flex; align-items:center; gap:14px; }
.grade-badge{
  width:40px; height:40px; flex:none;
  border:1px solid var(--champagne);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; color:var(--champagne-2);
  transition:box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.grade-row:hover .grade-badge{
  box-shadow:0 0 0 4px rgba(201,166,107,0.12), 0 0 18px rgba(201,166,107,0.3);
  background:rgba(201,166,107,0.08);
  transform:scale(1.06);
}
.grade-info .grade-label{ font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:0.06em; }
.grade-info .grade-c{ font-size:11px; color:var(--platinum); font-family:var(--mono); }
.grade-info .grade-desc{ font-size:13.5px; color:var(--paper); margin-top:2px; }

.cert-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 26px; border-top:1px solid var(--line); background:rgba(0,0,0,0.15);
}
.cert-notes{ font-size:13px; color:var(--paper-dim); max-width:52ch; }
.cert-notes strong{ color:var(--signal); font-weight:600; }

/* ---------- Quiz ---------- */
.quiz-card{
  border:1px solid var(--line-strong);
  background:var(--graphite);
  border-radius:8px;
  padding:36px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,0.7);
}
.quiz-step h3{ font-size:20px; color:var(--paper); }
.quiz-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
@media (max-width:640px){ .quiz-options{ grid-template-columns:1fr; } }
.quiz-opt{
  border:1px solid var(--line-strong); background:transparent; color:var(--paper);
  padding:16px; border-radius:4px; text-align:left; font-size:14px;
  transition:border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.16,.8,.24,1);
}
.quiz-opt:hover{ border-color:var(--champagne); background:rgba(201,166,107,0.06); transform:translateY(-2px); }
.quiz-opt:active{ transform:translateY(0); }
.quiz-opt small{ display:block; color:var(--paper-dim); margin-top:4px; font-size:12px; }
.quiz-progress{ font-family:var(--mono); font-size:11px; color:var(--paper-dim); letter-spacing:0.06em; margin-bottom:18px; }
.quiz-result{ display:none; }
.quiz-result.active{ display:block; }
.quiz-result .verdict-label{ font-family:var(--mono); font-size:12px; color:var(--signal); letter-spacing:0.06em; text-transform:uppercase; }
.quiz-result h3{ font-size:26px; margin-top:8px; color:var(--paper); }
.quiz-result p{ margin-top:12px; color:var(--paper-dim); }
.quiz-restart{ margin-top:22px; background:none; border:none; color:var(--platinum); font-size:13px; text-decoration:underline; padding:0; }

/* ---------- Guides ---------- */
.guides-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .guides-grid{ grid-template-columns:1fr; } }
.guide-card{
  border:1px solid var(--line); border-radius:6px; padding:26px;
  background:var(--ink);
  transition:border-color .25s ease, transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s ease;
}
.guide-card:hover{
  border-color:rgba(201,166,107,0.3);
  transform:translateY(-4px);
  box-shadow:0 24px 48px -28px rgba(0,0,0,0.65);
}
.guide-card .tag{ font-family:var(--mono); font-size:11px; color:var(--champagne-2); text-transform:uppercase; letter-spacing:0.06em; }
.guide-card h3{ font-size:18px; margin-top:12px; color:var(--paper); }
.guide-card p{ margin-top:10px; font-size:14px; color:var(--paper-dim); }
.guide-card .read{ margin-top:16px; font-size:13px; color:var(--platinum); display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease, color .2s ease; }
.guide-card:hover .read{ gap:10px; color:var(--champagne-2); }

/* ---------- FAQ ---------- */
.faq-list{ border-top:1px solid var(--line); max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; text-align:left;
  padding:22px 4px; display:flex; justify-content:space-between; align-items:center;
  color:var(--paper); font-size:16px; font-family:var(--display);
  transition:color .2s ease;
}
.faq-q:hover{ color:var(--champagne-2); }
.faq-q .plus{ font-family:var(--mono); color:var(--champagne-2); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 4px 22px; color:var(--paper-dim); font-size:14.5px; max-width:64ch; }

/* ---------- Disclosure banner ---------- */
.disclosure-strip{
  background:var(--graphite-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0;
}
.disclosure-strip .wrap{ display:flex; gap:12px; align-items:center; font-size:13px; color:var(--paper-dim); }
.disclosure-strip a{ color:var(--champagne-2); text-decoration:underline; }

/* ---------- Footer ---------- */
footer{ padding:56px 0 40px; }
footer .foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
footer .foot-brand{ max-width:340px; }
footer .foot-brand .logo{ margin-bottom:14px; }
footer .foot-brand p{ font-size:13.5px; color:var(--paper-dim); }
footer .foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:14px; }
footer ul li{ margin-bottom:10px; }
footer a{ font-size:13.5px; text-decoration:none; color:var(--paper); }
footer a:hover{ color:var(--champagne-2); }
.foot-legal{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--paper-dim); }

/* ---------- Static/legal pages ---------- */
.legal main{ max-width:760px; margin:0 auto; padding:70px 28px 100px; }
.legal h1{ font-size:36px; }
.legal h2{ font-size:20px; margin-top:40px; margin-bottom:12px; color:var(--champagne-2); }
.legal p, .legal li{ color:var(--paper-dim); font-size:15px; margin-top:12px; }
.legal ul{ list-style:disc; padding-left:20px; }
.legal a{ color:var(--champagne-2); }