/* ===========================================================
   Acnota — shared stylesheet
   Used by: index.html, students.html, teachers.html, schools.html, vs-social-media.html
   =========================================================== */

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

:root{
  --bg:#F6F5F1;
  --bg-raised:#FFFFFF;
  --ink:#17140F;
  --slate:#6B6862;
  --line:#E4E0D6;
  --gold:#FBB316;
  --gold-deep:#D98F00;
  --blue:#1467BD;
  --blue-deep:#0C4A8E;
  --bs-body-font-family:'Inter', sans-serif;
}

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); overflow-x:hidden; }
h1,h2,h3{ font-family:'Sora', sans-serif; letter-spacing:-0.02em; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.text-slate{ color:var(--slate) !important; }
a{ color:inherit; }
hr{ border-color:var(--line); opacity:1; }

/* ---------- NAV ---------- */
.nav-custom{ background:rgba(246,245,241,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand-logo{ height:26px; width:auto; }
.brand-icon{ height:34px; width:auto; border-radius:8px; }
.nav-custom .nav-link{ font-size:14px; font-weight:500; color:var(--slate); }
.nav-custom .nav-link:hover{ color:var(--ink); }
.btn-dark-pill{ background:var(--ink); color:var(--bg); border-radius:100px; font-size:14px; font-weight:600; border:none; padding:.55rem 1.25rem; transition:.2s; }
.btn-dark-pill:hover{ background:var(--blue-deep); color:var(--bg); transform:translateY(-1px); }

.nav-custom .dropdown-menu{ background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:8px; margin-top:10px; box-shadow:0 16px 32px -12px rgba(23,20,15,0.15); }
.nav-custom .dropdown-item{ font-size:14px; font-weight:500; border-radius:8px; padding:.55rem .8rem; color:var(--ink); }
.nav-custom .dropdown-item:hover, .nav-custom .dropdown-item:focus{ background:var(--bg); color:var(--ink); }
.nav-custom .dropdown-item .item-sub{ display:block; font-size:12px; color:var(--slate); font-weight:400; }

/* ---------- HERO (home) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500;
  color:var(--gold-deep); letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:22px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); }

.hero h1{ font-size:clamp(38px,5vw,60px); font-weight:800; line-height:1.05; }
.text-accent{ color:var(--gold-deep); }

.btn-brand{ background:var(--gold); color:var(--ink); border:none; font-weight:700; box-shadow:0 1px 0 rgba(0,0,0,.05); transition:.2s; }
.btn-brand:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); box-shadow:0 10px 24px rgba(251,179,22,.35); }
.btn-underline{ font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); border-radius:0; padding:.7rem .25rem; }
.btn-underline:hover{ color:var(--blue-deep); border-color:var(--blue-deep); }

.avatar-circle{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px; font-family:'Sora',sans-serif;
}
.tag-badge{ font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:11px; background:#F0EEE8; color:var(--slate); }

.stamp-card{ border-radius:20px !important; border:1px solid var(--line) !important; box-shadow:0 24px 60px -20px rgba(23,20,15,0.18) !important; }
.seal{ width:46px; height:46px; transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.seal.show{ transform:scale(1); }

/* ---------- SECTION SHARED ---------- */
section{ padding:80px 0; }
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); font-weight:800; line-height:1.1; }

/* ---------- UNIT OF VALUE / COMPARISON TABLES ---------- */
.compare-col{ background:var(--bg-raised); padding:32px; }
.compare-col h3{ font-size:15px; font-weight:600; }
.compare-col.old h3::before{ content:'✕  '; color:#C4453E; }
.compare-col.new h3::before{ content:'✓  '; color:var(--blue); }
.compare-col ul{ list-style:none; padding-left:0; margin-bottom:0; }
.compare-col li{ font-size:14px; color:var(--slate); padding:9px 0; border-top:1px solid var(--line); }
.compare-col li:first-of-type{ border-top:none; }

/* ---------- AUDIENCES (Bootstrap pills/tabs) ---------- */
.nav-pills .nav-link{
  border-radius:100px; border:1px solid var(--line); background:var(--bg-raised);
  font-size:14px; font-weight:600; color:var(--slate); padding:.6rem 1.2rem;
}
.nav-pills .nav-link.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.proof-label{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.06em; }
.chip{ font-size:13px; padding:.4rem .8rem; border-radius:8px; background:#F0EEE8; color:var(--ink); }

.id-card{ background:var(--ink); color:var(--bg); border-radius:20px; padding:28px; position:relative; overflow:hidden; }
.id-card::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% -10%, rgba(251,179,22,0.35), transparent 55%); }
.id-card .tiny{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:#A9A69D; text-transform:uppercase; letter-spacing:.08em; position:relative; }
.id-score{ font-family:'IBM Plex Mono', monospace; font-size:32px; font-weight:500; margin-top:24px; position:relative; }
.id-score .u{ font-size:13px; color:#A9A69D; font-family:'Inter',sans-serif; font-weight:400; margin-left:6px; }
.id-card .progress{ height:6px; background:#33302A; margin-top:20px; position:relative; }
.id-card .progress-bar{ background:linear-gradient(90deg, var(--gold), var(--blue)); }
.id-card-foot{ margin-top:14px; font-size:12px; color:#A9A69D; position:relative; }

/* ---------- TRUST MECHANICS ---------- */
.weight-role{ font-size:14px; font-weight:600; width:120px; flex-shrink:0; }
.weight-track{ height:10px; background:#EFEDE6; border-radius:100px; overflow:hidden; flex:1; }
.weight-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg, var(--blue-deep), var(--blue)); width:0%; transition:width 1.2s cubic-bezier(.16,1,.3,1); }
.weight-val{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--slate); width:44px; text-align:right; flex-shrink:0; }

.formula-box{ background:var(--ink); color:var(--bg); border-radius:16px; padding:28px; font-family:'IBM Plex Mono', monospace; font-size:16px; }
.formula-box .var{ color:var(--gold); }
.formula-box .op{ color:#A9A69D; }

/* ---------- PODS ---------- */
.pod-mock{ background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:22px; }
.pulse-pill{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--blue-deep); background:#EAF2FB; }
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }
.pod-line{ font-size:13px; padding:10px 0; border-top:1px solid var(--line); }
.pod-line:first-child{ border-top:none; }

/* ---------- CTA ---------- */
.cta-band{ background:var(--ink); color:var(--bg); border-radius:24px; padding:64px 40px; }
.cta-band h2{ font-size:clamp(28px,4vw,42px); font-weight:800; }
.cta-band .form-control{ background:#211E19; border:1px solid #3A362F; color:var(--bg); border-radius:100px; padding:.9rem 1.2rem; }
.cta-band .form-control::placeholder{ color:#77746C; }
.cta-band .form-control:focus{ box-shadow:0 0 0 2px var(--gold); border-color:var(--gold); background:#211E19; color:var(--bg); }

footer .nav-link{ font-size:13px; color:var(--slate); padding:0; }

/* ===========================================================
   INNER-PAGE COMPONENTS (students / teachers / schools / vs-social)
   =========================================================== */

/* Page hero — smaller than homepage hero, used on inner pages */
.page-hero{ padding:64px 0 20px; }
.page-hero .icon-circle{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gold); margin-bottom:20px;
}
.page-hero .icon-circle.blue{ background:var(--blue-soft, #CFE6FF); }
.page-hero h1{ font-size:clamp(34px,4.6vw,52px); font-weight:800; line-height:1.06; }

/* Breadcrumb-ish back link */
.back-link{ font-size:13px; font-weight:600; color:var(--slate); display:inline-flex; align-items:center; gap:6px; }
.back-link:hover{ color:var(--ink); }

/* Feature / credit-type cards */
.feature-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:26px; height:100%; }
.feature-card .f-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feature-card .f-icon.gold{ background:#FFF1D2; }
.feature-card .f-icon.blue{ background:#E4F0FC; }
.feature-card h3{ font-size:16px; font-weight:700; margin-bottom:6px; }
.feature-card p{ font-size:14px; color:var(--slate); line-height:1.6; margin-bottom:0; }

/* Stat strip — big mono numbers with labels */
.stat-strip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg-raised); }
.stat-item{ flex:1; min-width:150px; padding:26px 24px; border-right:1px solid var(--line); }
.stat-item:last-child{ border-right:none; }
.stat-item .num{ font-family:'IBM Plex Mono', monospace; font-size:28px; font-weight:500; color:var(--ink); }
.stat-item .lbl{ font-size:12px; color:var(--slate); margin-top:4px; }

/* Quote / callout */
.quote-card{ border-left:3px solid var(--gold); background:var(--bg-raised); border-radius:0 16px 16px 0; padding:22px 26px; font-size:15px; line-height:1.6; color:var(--ink); }
.quote-card cite{ display:block; margin-top:12px; font-style:normal; font-size:13px; color:var(--slate); }

/* Timeline (students page) */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline-item{ position:relative; padding-bottom:28px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:''; position:absolute; left:-28px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--gold); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--line); }
.timeline-item h4{ font-size:14px; font-weight:700; margin-bottom:3px; }
.timeline-item p{ font-size:13px; color:var(--slate); margin-bottom:0; }
.timeline-item .t-when{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-deep); }

/* Big comparison table (vs Facebook/Instagram) */
.vs-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.vs-table th, .vs-table td{ padding:16px 20px; font-size:14px; text-align:left; border-top:1px solid var(--line); vertical-align:top; }
.vs-table thead th{ border-top:none; font-family:'Sora',sans-serif; font-weight:700; font-size:14px; background:var(--bg); }
.vs-table thead th.new-col{ color:var(--blue-deep); }
.vs-table thead th.old-col{ color:#B23F2F; }
.vs-table tbody th{ font-weight:600; font-size:13px; color:var(--slate); background:var(--bg); width:26%; }
.vs-table td.old-cell{ color:var(--slate); }
.vs-table td.old-cell::before{ content:'✕ '; color:#C4453E; }
.vs-table td.new-cell::before{ content:'✓ '; color:var(--blue); }
@media (max-width:720px){ .vs-table{ font-size:13px; } .vs-table th, .vs-table td{ padding:12px 14px; } }

/* Platform pill (Facebook / Instagram badges) */
.platform-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; background:var(--bg); border:1px solid var(--line); padding:5px 12px; border-radius:100px; color:var(--slate); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}