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

body {
  background: #fafbfc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #1e1e2a;
  padding: 2rem 1.5rem;
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 2.2rem 2.5rem;
  border: 1px solid #edf0f3;
}

.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.logo-area {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.logo {
  font-weight: 650;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  color: #0b1c2c;
}

.logo .dot {
  color: #2b7e6b;
  font-weight: 700;
}

.badge {
  background: #ecf7f3;
  color: #1a5e4f;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
  margin-left: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #c0dfd3;
}

.tagline {
  font-size: 0.95rem;
  color: #546e7a;
  margin-top: 0.25rem;
  font-weight: 380;
  border-left: 2px solid #bcd0c9;
  padding-left: 1rem;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  font-weight: 480;
  color: #2c3e50;
}

.nav-links a {
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
  transition: color 0.15s;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}

.nav-links a:hover {
  color: #1e6b5e;
  border-bottom: 2px solid #7eb8a8;
}

.intro-card {
  background: #f6faf9;
  border-radius: 22px;
  padding: 1.8rem 2.2rem;
  margin: 2.2rem 0 2.8rem 0;
  border: 1px solid #e1ece7;
}

.intro-card h1 {
  font-size: 1.9rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #122b29;
  margin-bottom: 0.5rem;
}

.intro-card p {
  font-size: 1.1rem;
  max-width: 75%;
  color: #2b4a44;
}

.hand-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: #3d5e56;
}

.hand-note span {
  background: #ffffffc7;
  padding: 0.3rem 1rem;
  border-radius: 30px;
  border: 1px dashed #7baea0;
}

.stamp {
  font-family: 'Courier New', monospace;
  opacity: 0.7;
}

.subject-section {
  margin-top: 0.5rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-weight: 550;
  font-size: 1.8rem;
  color: #1c2f2c;
}

.coming-soon-note {
  color: #7b8e89;
  font-size: 0.9rem;
  background: #f0f5f3;
  padding: 0.25rem 1rem;
  border-radius: 30px;
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}

.subject-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.8rem 1.8rem 2rem 1.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1.5px solid #eef3f1;
  transition: all 0.2s;
}

.subject-card:hover {
  border-color: #b9d5cc;
  box-shadow: 0 12px 20px -8px rgba(29, 70, 60, 0.08);
}

.subject-icon {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.subject-card h3 {
  font-size: 1.8rem;
  font-weight: 520;
  margin-bottom: 0.6rem;
  color: #173e36;
}

.subject-desc {
  color: #46635b;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
  border-left: 3px solid #a2c5ba;
  padding-left: 1rem;
}

.resource-list {
  list-style: none;
  margin-top: 0.8rem;
}

.resource-list li {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.98rem;
}

.resource-list a {
  text-decoration: none;
  color: #1b4e44;
  font-weight: 480;
  border-bottom: 1px dotted #b5d1c7;
}

.resource-list a:hover {
  color: #0b352c;
  border-bottom: 1px solid #1e7a63;
}

.file-tag {
  background: #eef3f1;
  color: #2b5f53;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.6rem;
  border-radius: 20px;
  margin-left: 0.5rem;
}

.btn-outline {
  display: inline-block;
  margin-top: 1.5rem;
  background: transparent;
  border: 1.5px solid #2e7d6b;
  color: #1e5f51;
  padding: 0.6rem 1.5rem;
  border-radius: 40px;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.btn-outline:hover {
  background: #e5f2ed;
  border-color: #1b6a58;
}

.small-note {
  background: #fff9e6;
  border-radius: 12px;
  padding: 0.4rem 1rem;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #5e4a27;
  border: 1px solid #efe2c6;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 3rem 0 1.8rem;
  justify-content: space-between;
  border-top: 1px solid #deeae6;
  padding-top: 2.2rem;
}

.feature-item {
  flex: 1 1 180px;
  background: #fbfdfc;
  padding: 1rem 1.2rem;
  border-radius: 18px;
}

.feature-item strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: #1a4038;
}

.feature-item p {
  color: #44665d;
  font-size: 0.9rem;
}

.roadmap-card {
  background: #f3f9f7;
  border-radius: 20px;
  padding: 1.6rem 2rem;
  margin: 1.8rem 0 1.2rem;
}

.roadmap-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.roadmap-icon {
  font-size: 2.2rem;
}

.roadmap-card h3 {
  font-weight: 550;
  color: #1a3e36;
  margin-bottom: 0.25rem;
}

.roadmap-card p {
  color: #38665a;
}

.notify-group {
  margin-top: 1rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.notify-input {
  padding: 0.6rem 1.2rem;
  border-radius: 60px;
  border: 1px solid #b9cfc6;
  background: white;
  width: 240px;
  max-width: 100%;
}

.notify-btn {
  background: #1f5c4e;
  border: none;
  color: white;
  padding: 0.6rem 1.8rem;
  border-radius: 60px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #1e5c4e;
}

.privacy-note {
  font-size: 0.85rem;
  color: #4f786b;
}

.footer {
  margin-top: 2.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #5d7b72;
  font-size: 0.9rem;
  border-top: 1px solid #deeae6;
  padding-top: 1.8rem;
}

.footer a {
  color: #1f5c4e;
  text-decoration: none;
  margin-left: 1.5rem;
}

.footer a:hover {
  text-decoration: underline;
}

.site-footnote {
  text-align: right;
  margin-top: 0.8rem;
  font-size: 0.7rem;
  color: #8aa39b;
  letter-spacing: 0.3px;
}

@media (max-width: 700px) {
  body { padding: 0.8rem; }
  .wrapper { padding: 1.5rem; }
  .top-bar { flex-direction: column; align-items: start; gap: 1rem; }
  .intro-card p { max-width: 100%; }
  .subject-grid { grid-template-columns: 1fr; }
  .nav-links { flex-wrap: wrap; gap: 1.5rem; }
  .footer { flex-direction: column; gap: 1rem; align-items: start; }
}

.active-nav {
  color: #1e6b5e !important;
  border-bottom: 2px solid #7eb8a8 !important;
}

.page-header {
  text-align: center;
  margin: 2rem 0 2.5rem 0;
}

.page-header h1 {
  font-size: 2.4rem;
  font-weight: 550;
  color: #122b29;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  color: #546e7a;
  font-size: 1.1rem;
}

.subject-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0 3rem 0;
}

.subject-select-card {
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border-radius: 28px;
  border: 2px solid #e8f0ec;
  transition: all 0.25s ease;
  display: block;
}

.subject-select-card:hover {
  border-color: #2e7d6b;
  box-shadow: 0 16px 30px -8px rgba(29, 70, 60, 0.12);
  transform: translateY(-2px);
}

.card-inner {
  padding: 2rem 2rem 1.8rem 2rem;
}

.subject-icon-large {
  font-size: 3rem;
  margin-bottom: 1.2rem;
}

.subject-select-card h2 {
  font-size: 2rem;
  font-weight: 550;
  color: #173e36;
  margin-bottom: 1rem;
}

.subject-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.subject-topics span {
  background: #eef3f1;
  color: #1a5e4f;
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 500;
}

.card-description {
  color: #46635b;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.8rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #deeae6;
  padding-top: 1.2rem;
}

.resource-count {
  color: #2b5f53;
  font-weight: 500;
  font-size: 0.9rem;
}

.arrow {
  font-size: 1.3rem;
  color: #2e7d6b;
  transition: transform 0.15s;
}

.subject-select-card:hover .arrow {
  transform: translateX(4px);
}

.coming-soon-section {
  background: #f8fbfa;
  border-radius: 22px;
  padding: 1.8rem 2rem;
  margin: 2rem 0;
  border: 1px solid #d8e8e2;
}

.coming-soon-section h3 {
  font-size: 1.3rem;
  font-weight: 550;
  color: #1a3e36;
  margin-bottom: 1.2rem;
}

.future-subjects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.future-subject {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid #e1ece7;
}

.future-icon {
  font-size: 1.5rem;
}

.future-subject span:nth-child(2) {
  font-weight: 550;
  color: #1e3d35;
}

.eta {
  font-size: 0.75rem;
  color: #7b9b91;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.help-section {
  background: #f3f9f7;
  border-radius: 20px;
  padding: 1.8rem 2rem;
  margin: 2.2rem 0;
}

.help-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.help-text h3 {
  font-weight: 550;
  color: #1a3e36;
  margin-bottom: 0.5rem;
}

.help-text p {
  color: #38665a;
  max-width: 500px;
}

.contact-links {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.contact-item {
  color: #1f5c4e;
  font-weight: 480;
}

.github-link {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  text-decoration: none;
}

.site-footnote {
  position: relative;
  padding: 8px 36px;
}

@media (max-width: 700px) {
  .subject-selection-grid {
    grid-template-columns: 1fr;
  }
  
  .future-subjects {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .help-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .contact-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}