:root {
  color-scheme: light;
  --bg: #f3f8f7;
  --surface: #ffffff;
  --text: #18313a;
  --muted: #62777d;
  --line: #d9e5e2;
  --accent: #087e8b;
  --accent-dark: #06636d;
  --soft: #e5f2ef;
  --shadow: 0 16px 42px rgba(24, 67, 73, .1);
  --radius: 16px;
  --highlight: #e27755;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111d27;
  --surface: #1b2a36;
  --text: #edf4f3;
  --muted: #a8b8bc;
  --line: #344650;
  --accent: #67d8c5;
  --accent-dark: #087e8b;
  --soft: #243943;
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --highlight: #ff9a76;
}

body {
  transition: background-color .2s, color .2s;
}

body[data-page="profile"][data-profile="najwa"] {
  --bg: #fff4f8;
  --surface: #fffafd;
  --text: #482d3b;
  --muted: #806373;
  --line: #f1d8e3;
  --accent: #d979a0;
  --accent-dark: #b9547e;
  --soft: #fce8f0;
  --shadow: 0 18px 44px rgba(153, 78, 111, .12);
  --highlight: #ca668f;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(250, 213, 228, .27), transparent 30rem),
    var(--bg);
}

body[data-page="profile"][data-profile="najwa"] .site-header,
body[data-page="profile"][data-profile="najwa"] .site-footer,
body[data-page="profile"][data-profile="najwa"] .contact-section {
  background: rgba(255, 244, 248, .94);
}

body[data-page="profile"][data-profile="najwa"] .contact-section,
body[data-page="profile"][data-profile="najwa"] .site-footer {
  color: var(--text);
}

body[data-page="profile"][data-profile="najwa"] .contact-section .eyebrow,
body[data-page="profile"][data-profile="najwa"] .eyebrow,
body[data-page="profile"][data-profile="najwa"] .profile-number,
body[data-page="profile"][data-profile="najwa"] .landing-hero h1 em,
body[data-page="profile"][data-profile="najwa"] .initials,
body[data-page="profile"][data-profile="najwa"] .arrow {
  color: var(--accent);
}

body[data-page="profile"][data-profile="najwa"] .button-primary {
  background: var(--accent);
  color: #fff;
}

body[data-page="profile"][data-profile="najwa"] .button-primary:hover {
  background: var(--accent-dark);
}

body[data-page="profile"][data-profile="najwa"] .portrait-card {
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, .8), transparent 34%),
    linear-gradient(145deg, #f9dce8, #f5c9dc);
  border: 1px solid rgba(214, 121, 160, .18);
}

body[data-page="profile"][data-profile="najwa"] .portrait-card:before,
body[data-page="profile"][data-profile="najwa"] .portrait-card:after {
  border-color: rgba(169, 85, 120, .18);
}

body[data-page="profile"][data-profile="najwa"] .brand-mark {
  background: var(--accent);
  color: #fff;
}

body[data-page="profile"][data-profile="najwa"] .site-header {
  border-bottom-color: rgba(241, 216, 227, .85);
  box-shadow: 0 5px 22px rgba(153, 78, 111, .04);
}

body[data-page="profile"][data-profile="najwa"] .profile-hero {
  background:
    radial-gradient(ellipse at 78% 46%, rgba(249, 220, 232, .42), transparent 32rem),
    linear-gradient(180deg, rgba(255, 250, 252, .55), transparent 78%);
}

body[data-page="profile"][data-profile="najwa"] .button-primary {
  box-shadow: 0 8px 18px rgba(185, 84, 126, .18);
}

body[data-page="profile"][data-profile="najwa"] .button-secondary {
  border-color: #efcfdd;
  background: rgba(255, 250, 252, .86);
}

body[data-page="profile"][data-profile="najwa"] .timeline-item {
  border-top-color: var(--line);
}

body[data-page="profile"][data-profile="najwa"] .timeline-date {
  color: var(--accent-dark);
}

body[data-page="profile"][data-profile="najwa"] .experience-card {
  border-color: #f1d8e3;
  background: linear-gradient(155deg, #fffafd, #fff7fa);
  box-shadow: 0 10px 28px rgba(153, 78, 111, .05);
}

body[data-page="profile"][data-profile="najwa"] .experience-card:hover {
  border-color: #e8b6ca;
  box-shadow: 0 16px 34px rgba(153, 78, 111, .11);
}

body[data-page="profile"][data-profile="najwa"] .skill-group {
  border-top-color: var(--line);
}

body[data-page="profile"][data-profile="najwa"] .skill-pills span {
  background: #fbe8f0;
  color: #704457;
  border: 1px solid rgba(241, 216, 227, .9);
}

body[data-page="profile"][data-profile="najwa"] .contact-section {
  background:
    radial-gradient(ellipse at 88% 10%, rgba(248, 207, 224, .65), transparent 28rem),
    linear-gradient(135deg, #fcebf2, #f8e2eb);
  color: var(--text);
}

body[data-page="profile"][data-profile="najwa"] .contact-section p:not(.eyebrow),
body[data-page="profile"][data-profile="najwa"] .linkedin-link {
  color: var(--muted);
}

body[data-page="profile"][data-profile="najwa"] .contact-email,
body[data-page="profile"][data-profile="najwa"] .contact-phone {
  border-bottom-color: var(--accent);
}

body[data-page="profile"][data-profile="najwa"] .site-footer {
  border-top-color: #efd5e0;
}

body[data-page="profile"][data-profile="najwa"] .footer-inner a {
  color: var(--accent-dark);
}

body[data-page="profile"][data-profile="najwa"] .mobile-menu.open {
  border-top-color: var(--line);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] {
  --bg: #241722;
  --surface: #322131;
  --text: #fff0f7;
  --muted: #d0b1c2;
  --line: #59364e;
  --accent: #f08fba;
  --accent-dark: #f7b5d1;
  --soft: #43273a;
  --shadow: 0 18px 44px rgba(0, 0, 0, .28);
  --highlight: #ff9fc8;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(190, 82, 134, .2), transparent 30rem),
    var(--bg);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .site-header {
  background: rgba(33, 23, 33, .94);
  border-bottom-color: var(--line);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .profile-hero {
  background:
    radial-gradient(ellipse at 78% 46%, rgba(112, 58, 88, .24), transparent 32rem),
    linear-gradient(180deg, rgba(45, 32, 45, .4), transparent 78%);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .portrait-card {
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(145deg, #694258, #493044);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .portrait-caption {
  color: var(--text);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .experience-card {
  background: linear-gradient(155deg, #382638, #302130);
  border-color: var(--line);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .button-primary {
  background: var(--accent);
  color: #321927;
  box-shadow: 0 8px 22px rgba(240, 143, 186, .2);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .button-primary:hover {
  background: var(--accent-dark);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .button-secondary {
  background: #382638;
  border-color: var(--line);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .skill-pills span {
  background: var(--soft);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .contact-section {
  background:
    radial-gradient(ellipse at 88% 10%, rgba(190, 82, 134, .28), transparent 28rem),
    linear-gradient(135deg, #382638, #2c1e2c);
  color: var(--text);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .contact-section p:not(.eyebrow),
:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .linkedin-link {
  color: var(--muted);
}

:root[data-theme="dark"] body[data-page="profile"][data-profile="najwa"] .site-footer {
  background: #211721;
  border-top-color: var(--line);
  color: var(--muted);
}

body[data-page="home"] a.profile-card[href="najwaturrohmah.html"],
body[data-page="home"] nav a[href="najwaturrohmah.html"] {
  color: var(--text);
}

body[data-page="home"] a.profile-card[href="najwaturrohmah.html"] {
  background: #fff8fb;
  border-color: #f2d9e2;
  box-shadow: 0 12px 28px rgba(217, 124, 164, .12);
}

body[data-page="home"] a.profile-card[href="najwaturrohmah.html"] .initials,
body[data-page="home"] a.profile-card[href="najwaturrohmah.html"] .arrow,
body[data-page="home"] a.profile-card[href="najwaturrohmah.html"] .profile-number,
body[data-page="home"] nav a[href="najwaturrohmah.html"].active,
body[data-page="home"] nav a[href="najwaturrohmah.html"]:hover {
  color: #d76d95;
}

.container {
  width: min(1080px, calc(100% - 48px));
}

.site-header {
  height: 68px;
  background: rgba(243, 248, 247, .94);
  border-bottom-color: var(--line);
}

.header-inner {
  height: 67px;
}

.desktop-nav a.active,
.mobile-menu a.active {
  color: var(--accent);
}

.mobile-menu a.active {
  font-weight: 700;
}

.theme-toggle {
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  padding: 4px;
}

.theme-toggle:hover {
  color: var(--accent);
}

.landing-hero h1 em {
  color: var(--highlight);
}

.profile-number {
  color: var(--highlight);
}

.landing-hero,
.profile-hero {
  min-height: calc(100vh - 68px);
  padding: 72px 0;
}

.section {
  padding: 84px 0;
}

.landing-grid,
.profile-hero-grid {
  gap: 64px;
}

.eyebrow {
  margin-bottom: 14px;
}

.landing-hero h1,
.profile-hero h1 {
  margin-bottom: 22px;
}

.hero-actions {
  margin-top: 26px;
}

.two-column {
  gap: 72px;
}

.section-content {
  padding-top: 28px;
}

.timeline {
  margin-top: 42px;
}

.timeline-item {
  padding: 20px 0;
}

.experience-grid,
.profile-grid {
  gap: 14px;
  margin-top: 42px;
}

.experience-card {
  min-height: 220px;
  padding: 20px;
}

.experience-meta {
  margin-bottom: 28px;
}

.skill-group {
  padding: 17px 0;
}

.contact-section {
  padding: 104px 0 112px;
}

.contact-section .eyebrow {
  color: var(--highlight);
}

.contact-links {
  margin-top: 32px;
}

.profile-card {
  min-height: 230px;
  padding: 20px;
}

.portrait-card {
  background: linear-gradient(145deg, #ccebe4, #f8d8c9);
}

.portrait-card:before,
.portrait-card:after {
  border-color: rgba(24, 67, 73, .18);
}

:root[data-theme="dark"] .site-header {
  background: rgba(17, 29, 39, .94);
}

:root[data-theme="dark"] .portrait-card {
  background: linear-gradient(145deg, #27564f, #754b41);
}

:root[data-theme="dark"] .portrait-card:before,
:root[data-theme="dark"] .portrait-card:after {
  border-color: rgba(255, 255, 255, .2);
}

:root[data-theme="dark"] .portrait-caption {
  color: #edf4f3;
}

:root[data-theme="dark"] .button-primary {
  background: #087e8b;
  color: #fff;
}

:root[data-theme="dark"] .button-primary:hover {
  background: #06636d;
}

:root[data-theme="dark"] .contact-section,
:root[data-theme="dark"] .site-footer {
  background: #0b151d;
  color: #edf4f3;
}

:root[data-theme="dark"] .footer-inner a {
  color: #edf4f3;
}

@media (max-width: 800px) {
  .container {
    width: min(100% - 36px, 600px);
  }

  .landing-hero,
  .profile-hero {
    min-height: auto;
    padding: 64px 0 72px;
  }

  .landing-grid,
  .profile-hero-grid {
    gap: 36px;
  }

  .section {
    padding: 64px 0;
  }

  .two-column {
    gap: 28px;
  }

  .section-content {
    padding-top: 0;
  }

  .timeline {
    margin-top: 34px;
  }

  .experience-grid,
  .profile-grid {
    margin-top: 34px;
  }

  .contact-section {
    padding: 76px 0 84px;
  }
}