.light {
  --md-sys-color-primary: rgb(65 95 145);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(214 227 255);
  --md-sys-color-on-primary-container: rgb(40 71 119);
  --md-sys-color-secondary: rgb(86 95 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(218 226 249);
  --md-sys-color-on-secondary-container: rgb(62 71 89);
  --md-sys-color-tertiary: rgb(112 85 117);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(250 216 253);
  --md-sys-color-on-tertiary-container: rgb(87 62 92);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(25 28 32);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(68 71 78);
  --md-sys-color-outline: rgb(116 119 127);
  --md-sys-color-outline-variant: rgb(196 198 208);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(237 237 244);
  --md-sys-color-surface-container-high: rgb(231 232 238);
  --md-sys-color-surface-container-highest: rgb(226 226 233);
}

.light-medium-contrast {
  --md-sys-color-primary: rgb(19 54 101);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(80 109 160);
  --md-sys-color-on-primary-container: rgb(255 255 255);
  --md-sys-color-secondary: rgb(46 54 71);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(100 109 128);
  --md-sys-color-on-secondary-container: rgb(255 255 255);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(15 17 22);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(51 54 62);
  --md-sys-color-outline: rgb(79 82 90);
  --md-sys-color-outline-variant: rgb(106 109 117);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(231 232 238);
  --md-sys-color-surface-container-high: rgb(220 220 227);
  --md-sys-color-surface-container-highest: rgb(209 209 216);
}

.light-high-contrast {
  --md-sys-color-primary: rgb(3 43 91);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(42 73 122);
  --md-sys-color-on-primary-container: rgb(255 255 255);
  --md-sys-color-secondary: rgb(35 44 61);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(65 73 91);
  --md-sys-color-on-secondary-container: rgb(255 255 255);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(0 0 0);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(0 0 0);
  --md-sys-color-outline: rgb(41 44 51);
  --md-sys-color-outline-variant: rgb(70 73 81);
  --md-sys-color-surface-container-low: rgb(240 240 247);
  --md-sys-color-surface-container: rgb(226 226 233);
  --md-sys-color-surface-container-high: rgb(211 212 219);
  --md-sys-color-surface-container-highest: rgb(197 198 205);
}

.dark {
  --md-sys-color-primary: rgb(170 199 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(10 48 95);
  --md-sys-color-primary-container: rgb(40 71 119);
  --md-sys-color-on-primary-container: rgb(214 227 255);
  --md-sys-color-secondary: rgb(190 198 220);
  --md-sys-color-on-secondary: rgb(40 49 65);
  --md-sys-color-secondary-container: rgb(62 71 89);
  --md-sys-color-on-secondary-container: rgb(218 226 249);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(226 226 233);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(196 198 208);
  --md-sys-color-outline: rgb(142 144 153);
  --md-sys-color-outline-variant: rgb(68 71 78);
  --md-sys-color-surface-container-low: rgb(25 28 32);
  --md-sys-color-surface-container: rgb(29 32 36);
  --md-sys-color-surface-container-high: rgb(40 42 47);
  --md-sys-color-surface-container-highest: rgb(51 53 58);
}

.dark-medium-contrast {
  --md-sys-color-primary: rgb(205 221 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(0 37 81);
  --md-sys-color-primary-container: rgb(116 145 199);
  --md-sys-color-on-primary-container: rgb(0 0 0);
  --md-sys-color-secondary: rgb(212 220 242);
  --md-sys-color-on-secondary: rgb(29 38 54);
  --md-sys-color-secondary-container: rgb(136 145 165);
  --md-sys-color-on-secondary-container: rgb(0 0 0);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(255 255 255);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(218 220 230);
  --md-sys-color-outline: rgb(175 178 187);
  --md-sys-color-outline-variant: rgb(142 144 153);
  --md-sys-color-surface-container-low: rgb(27 30 34);
  --md-sys-color-surface-container: rgb(38 40 45);
  --md-sys-color-surface-container-high: rgb(49 50 56);
  --md-sys-color-surface-container-highest: rgb(60 62 67);
}

.dark-high-contrast {
  --md-sys-color-primary: rgb(235 240 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(0 0 0);
  --md-sys-color-primary-container: rgb(166 195 252);
  --md-sys-color-on-primary-container: rgb(0 11 32);
  --md-sys-color-secondary: rgb(235 240 255);
  --md-sys-color-on-secondary: rgb(0 0 0);
  --md-sys-color-secondary-container: rgb(186 195 216);
  --md-sys-color-on-secondary-container: rgb(3 11 26);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(255 255 255);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(255 255 255);
  --md-sys-color-outline: rgb(238 239 249);
  --md-sys-color-outline-variant: rgb(192 194 204);
  --md-sys-color-surface-container-low: rgb(29 32 36);
  --md-sys-color-surface-container: rgb(46 48 54);
  --md-sys-color-surface-container-high: rgb(57 59 65);
  --md-sys-color-surface-container-highest: rgb(69 71 76);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body {
  font-family: 'Google Sans', sans-serif;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 900px;
  padding: 3.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.hero-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 20px;
  margin-bottom: 0.25rem;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--md-sys-color-on-background);
}

.hero-pills {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.m3-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 1rem;
  border-radius: 17px;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
}

.m3-pill .material-symbols-outlined {
  font-size: 18px;
}

.wavy-line {
  width: 240px;
  height: 16px;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6 Q 8 0, 16 6 T 32 6' fill='none' stroke='%23415f91' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 12px;
  opacity: 0.9;
}

.hero-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
}

.hero-desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  max-width: 600px;
  line-height: 1.5;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--md-sys-color-on-surface);
}

.m3-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.card {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.corner-single { border-radius: 28px !important; }
.corner-top { border-radius: 24px 24px 6px 6px !important; }
.corner-bottom { border-radius: 6px 6px 24px 24px !important; }

.software-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.clickable-header {
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  border-radius: 16px;
  transition: background-color 0.2s ease;
}

.clickable-header:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.software-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.app-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.software-title h3 {
  font-size: 1.35rem;
  font-weight: 700;
}

.badge {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
}

.software-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}

.action-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.view-all-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.5rem;
  border-radius: 22px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-filled:hover {
  background-color: var(--md-sys-color-surface-tint);
}

.btn-outlined {
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}

.btn-outlined:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.btn-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 1rem;
}

.btn-text:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.philosophy-text {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}

.social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-icon:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-outline);
}

.btn-icon:active {
  transform: scale(0.92);
}

.custom-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

footer {
  width: 100%;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-low);
  padding: 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
}

.footer-content {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.copyright {
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 700;
}

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

.md3-dropdown-container {
  position: relative;
  min-width: 170px;
}

.md3-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 0.85rem;
  background-color: var(--md-sys-color-surface-container-highest);
  border-bottom: 2px solid var(--md-sys-color-outline);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  user-select: none;
}

.md3-dropdown-trigger:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.md3-dropdown-container.open .md3-dropdown-trigger {
  border-bottom-color: var(--md-sys-color-primary);
}

.md3-dropdown-info {
  display: flex;
  flex-direction: column;
}

.md3-dropdown-label {
  font-size: 0.65rem;
  color: var(--md-sys-color-primary);
  font-weight: 700;
  line-height: 1;
}

.md3-dropdown-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-top: 2px;
}

.md3-dropdown-icon {
  color: var(--md-sys-color-on-surface-variant);
  transition: transform 0.2s ease;
  font-size: 20px;
}

.md3-dropdown-container.open .md3-dropdown-icon {
  transform: rotate(180deg);
  color: var(--md-sys-color-primary);
}

.md3-dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  width: 220px;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.md3-dropdown-container.open .md3-dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.md3-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}

.md3-menu-item:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.md3-menu-item.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
}

.md3-menu-item .check-icon {
  font-size: 18px;
  display: none;
}

.md3-menu-item.selected .check-icon {
  display: inline-block;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .md3-dropdown-container {
    width: 100%;
  }
  .md3-dropdown-menu {
    width: 100%;
    left: 0;
  }
}