*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#111210;
  --paper:#F8F7F3;
  --muted:#6B6A63;
  --border:#E0DED6;
  --accent:#1A6B45;
  --accent-light:#EBF4EE;
  --hero-mx:50%;
  --hero-my:45%;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'DM Sans',sans-serif;
}

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
}

/* ─── NAV ─────────────────────────────────────────── */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 48px;
  border-bottom:1px solid var(--border);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:100;
}
.brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.logo{
  font-family:var(--serif);
  font-size:22px;
  color:var(--ink);
  letter-spacing:-0.3px;
}
.logo span{ color:var(--accent); }
.tagline{
  font-size:11px;
  color:var(--muted);
  margin-left:0;
  font-weight:500;
}
.nav-links{
  display:flex;
  gap:32px;
  list-style:none;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
  font-weight:400;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--ink); }

.nav-cta{
  background:var(--accent);
  color:var(--paper);
  padding:9px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s;
}
.nav-cta:hover{ opacity:.8; }

.nav-links a:focus-visible,
.nav-cta:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.tab:focus-visible,
.fc-btn:focus-visible,
.flip-hint:focus-visible,
.oss-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* ─── HERO ────────────────────────────────────────── */
.hero{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:100px 48px 80px;
  max-width:none;
  margin:0;
  text-align:center;
  isolation:isolate;
  border-radius:0;
  background:
    radial-gradient(circle at var(--hero-mx) var(--hero-my), rgba(26, 107, 69, 0.15), transparent 35%),
    radial-gradient(circle at 15% 10%, rgba(255, 188, 90, 0.18), transparent 28%),
    linear-gradient(135deg, #fefdf8 0%, #f8f6ee 45%, #f5f3e9 100%);
}
.hero::before,
.hero::after{
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  filter:blur(1px);
}
.hero::before{
  width:300px;
  height:300px;
  right:-70px;
  top:-90px;
  background:radial-gradient(circle at 30% 30%, rgba(26, 107, 69, 0.22), rgba(26, 107, 69, 0.02) 65%);
  animation:heroFloatA 11s ease-in-out infinite;
}
.hero::after{
  width:240px;
  height:240px;
  left:-40px;
  bottom:-95px;
  background:radial-gradient(circle at 60% 50%, rgba(255, 192, 96, 0.26), rgba(255, 192, 96, 0.02) 68%);
  animation:heroFloatB 9s ease-in-out infinite;
}

@media (min-width: 769px) and (max-width: 1366px) {
  .hero {
    padding: 20px 48px 80px;
  }
}

@keyframes heroFloatA{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-16px,14px,0); }
}

@keyframes heroFloatB{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(18px,-10px,0); }
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-light);
  color:var(--accent);
  font-size:12px;
  font-weight:500;
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:28px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.hero-eyebrow::before{
  content:'';
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
}

/* h1{
  font-family:var(--serif);
  font-size:clamp(28px,4vw,50px);
  line-height:1.1;
  letter-spacing:-1px;
  color:var(--ink);
  margin-bottom:22px;
}
h1 em{
  font-style:italic;
  color:var(--accent);
} */

h1{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,40px);
  line-height:1.1;
  letter-spacing:-1px;
  color:var(--ink);
  margin-bottom:22px;
}
h1 em{
  font-style:italic;
  color:var(--accent);
}
.emphasis{
  font-style:normal;
    font-size:clamp(18px,2vw,25px);
  color:var(--accent);
}

.hero-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 40px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;

  /* Soften the wall of text */
  word-spacing: 0.05em;
}

/* Highlight the free + github lines */
.hero-sub strong {
  color: var(--ink);
  font-weight: 500;
}

/* Tablet */
@media (max-width: 768px) {
  .hero-sub {
    font-size: 15px;
    max-width: 100%;
    margin: 0 0 32px;
    line-height: 1.75;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-sub {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 28px;
    letter-spacing: 0;
  }
}

.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  padding:13px 28px;
  border-radius:7px;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background .2s;
}
.btn-primary:hover{ background:#155c39; }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  padding:13px 28px;
  border-radius:7px;
  font-size:15px;
  font-weight:400;
  text-decoration:none;
  border:1px solid var(--border);
  transition:border-color .2s;
}
.btn-ghost:hover{ border-color:var(--ink); }

/* ─── DIVIDER ─────────────────────────────────────── */
.divider{
  height:1px;
  background:var(--border);
  margin:0 48px;
}

/* ─── COVERAGE ────────────────────────────────────── */
.coverage{
  text-decoration: none;
  padding:72px 48px;
  max-width:960px;
  margin:0 auto;
}
.section-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:40px;
}

/* GRID LAYOUT */
.exam-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.exam-grid > a{
  text-decoration: none;
}

.exam-grid > .exam-card{
  width: 260px;
}

.exam-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 0;
    background:var(--accent);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.exam-card:hover .exam-card-btn {
   background:#155c39;
}


/* Coming Soon Card */
.exam-card--coming-soon {
  position: relative;
  background: #fafafa;
  border-color: #e0e0e0;
  opacity: 0.85;
  pointer-events: none;
  cursor: not-allowed;
  overflow: hidden;
}

.exam-card--coming-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.018) 6px,
    rgba(0, 0, 0, 0.018) 12px
  );
  border-radius: 12px;
  pointer-events: none;
}

.exam-card--coming-soon:hover {
  border-color: #e0e0e0;
  box-shadow: none;
  transform: none;
}

/* Coming Soon Badge (top-right ribbon) */
.coming-soon-badge {
  position: absolute;
  top: 14px;
  right: -28px;
  background: var(--accent, #6c63ff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 36px;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Muted tag variant */
.exam-tag--coming-soon {
  background: #efefef;
  color: #999;
}

/* Footer note */
.coming-soon-footer {
  font-size: 13px;
  color: #aaa;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #e0e0e0;
}




/* CARD */
.exam-card{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
  background: #fff;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
}

.exam-card:hover{
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

/* UNIVERSITY LOGO */
.university-logo{
  height: 55px;
  width: auto;
  object-fit: contain;
  margin: 8px 0 12px 0;
}

/* TITLE */
.exam-card h3{
  font-family:var(--serif);
  font-size: 20px;
  font-weight:400;
  margin: 0;
}

/* DESCRIPTION */
.exam-card p{
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* META INFO */
.exam-meta{
  display: flex;
  gap:16px;
  justify-content: center;
  font-size: 13px;
  margin-top: auto;
  color: var(--ink);
}


.exam-tag{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-light);
  padding:4px 10px;
  border-radius:4px;
  margin-bottom:16px;
}

.exam-meta span{ font-size:12px; color:var(--muted); }
.exam-meta strong{ color:var(--ink); font-weight:500; }

/* ─── FLASHCARD SECTION ───────────────────────────── */
.demo-section.disabled {
  display: none;
}
.demo-section{
  padding:72px 48px;
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.demo-inner{
  max-width:680px;
  margin:0 auto;
}
.demo-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.demo-title{
  font-family:var(--serif);
  font-size:30px;
  margin-bottom:36px;
  font-weight:400;
}

.flashcard-shell{ perspective:1200px; }

.flashcard-wrap{
  position:relative;
  width:100%;
  height:280px;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.flashcard-wrap.flipped{ transform:rotateY(180deg); }

.card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  padding:36px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card-front{ background:#fff; }
.card-back{
  background:var(--accent-light);
  transform:rotateY(180deg);
}

.card-q-label{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.card-question{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.4;
  color:var(--ink);
}
.card-answer{
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
}
.card-answer strong{ color:var(--accent); }

.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-subject{ font-size:12px; color:var(--muted); }

.flip-hint{
  background:none;
  border:none;
  font-size:12px;
  color:var(--accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
}
.flip-hint svg{ width:14px; height:14px; }

/* flashcard controls */
.fc-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:22px;
}
.fc-progress{
  flex:1;
  height:3px;
  background:var(--border);
  border-radius:2px;
  margin:0 20px;
  overflow:hidden;
}
.fc-progress-fill{
  width:20%;
  height:100%;
  background:var(--accent);
  border-radius:2px;
  transition:width .3s;
}
.fc-btn{
  background:none;
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 18px;
  font-size:13px;
  font-family:var(--sans);
  cursor:pointer;
  color:var(--ink);
  transition:all .2s;
}
.fc-btn:hover{
  border-color:var(--ink);
  background:var(--paper);
}
.fc-btn:disabled{
  opacity:.35;
  cursor:default;
}
.fc-count{
  font-size:12px;
  color:var(--muted);
  min-width:48px;
  text-align:center;
}

/* ─── OPEN SOURCE ─────────────────────────────────── */
.oss-wrapper{ border-top:1px solid var(--border); }
.oss-section{
  padding:72px 48px;
  max-width:820px;
  margin:0 auto;
  display:flex;
  gap:48px;
  align-items:flex-start;
}
.oss-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  background:var(--ink);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oss-icon svg{ width:26px; height:26px; fill:#fff; }
.oss-text h2{
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  margin-bottom:10px;
}
.oss-text p{
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:20px;
}
.oss-link{
  font-size:14px;
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.oss-link:hover{ text-decoration:underline; }

/* ─── TABS ────────────────────────────────────────── */
.tab-row{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:40px;
}
.tab{
  padding:10px 18px;
  font-size:13px;
  font-weight:400;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all .2s;
}
.tab.active{
  color:var(--ink);
  border-bottom-color:var(--accent);
  background:var(--accent-light);
  font-weight:500;
}

/* ─── FOOTER ──────────────────────────────────────── */
footer{
  border-top:1px solid var(--border);
  padding:28px 48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
footer p{ font-size:12px; color:var(--muted); }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media(max-width:768px){
  nav{
    padding:16px 24px;
    flex-wrap:wrap;
    gap:12px;
  }
  .nav-links{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    order:3;
    width:100%;
    gap:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
  .nav-links li{
    min-width:0;
  }
  .nav-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:36px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-weight:500;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration:none;
  }
  .hero{
    min-height:calc(100svh - 64px);
    padding:60px 24px 48px;
  }
  .coverage{ padding:48px 24px; }
  .exam-grid{
    grid-template-columns:minmax(0, 1fr);
    justify-content:stretch;
  }
  .exam-grid > a,
  .exam-grid > .exam-card{
    width:100%;
    max-width:420px;
    justify-self:center;
  }
  .university-logo{ height:48px; }
  .demo-section{ padding:48px 24px; }
  .oss-section{ padding:48px 24px; flex-direction:column; gap:24px; }
  footer{ padding:24px; flex-direction:column; justify-content:flex-start; gap:10px; text-align:center; }
  .divider{ margin:0 24px; }
}

@media (prefers-reduced-motion: reduce){
  .hero::before,
  .hero::after{
    animation:none;
  }
}