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

    :root {
      --deep:    #013e37;
      --deep2:   #012e2a;
      --cream:   #ffefb3;
      --cream2:  #fff9e0;
      --accent:  #ffefb3;
      --accent-dim: rgba(255,239,179,0.18);
      --accent-border: rgba(255,239,179,0.28);
      --bg:      #f4f9f8;
      --bg2:     #e8f3f1;
      --text:    #0d1f1d;
      --text-light: #4a6663;
      --card-bg: #ffffff;
      --border:  rgba(1,62,55,0.12);
      --gold:    #ffefb3;
      --rust:    #2a7a6e;
    }
    html.dark-mode {
      --bg:      #011f1c;
      --bg2:     #012b26;
      --text:    #ffefb3;
      --text-light: #a8c8c4;
      --card-bg: #013330;
      --border:  rgba(255,239,179,0.12);
      --gold:    #ffefb3;
      --rust:    #7dd4ca;
    }

    html { scroll-behavior: auto; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      transition: background 0.4s ease, color 0.4s ease;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── PAGE TRANSITION OVERLAY ── */
    #page-overlay {
      position: fixed; inset: 0;
      background: var(--deep);
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    #page-overlay.flash { opacity: 0.18; }

    /* ── HEADER ── */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5%;
      height: 68px;
      background: var(--deep);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 24px rgba(0,0,0,0.25);
      border-bottom: 1px solid var(--accent-border);
    }

    .logo-text {
      font-family: 'Playfair Display', serif;
      color: var(--cream);
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: 1px;
      flex-shrink: 0;
    }

    nav {
      display: flex;
      gap: 1.6rem;
      align-items: center;
    }

    nav a {
      color: rgba(255,239,179,0.65);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      position: relative;
      padding-bottom: 3px;
      white-space: nowrap;
      transition: color 0.25s ease;
    }
    nav a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1.5px;
      background: var(--cream);
      transition: width 0.3s ease;
    }
    nav a:hover, nav a.active { color: var(--cream); }
    nav a:hover::after, nav a.active::after { width: 100%; }

    .theme-toggle {
      background: var(--accent-dim);
      border: 1.5px solid var(--accent-border);
      color: var(--cream);
      width: 38px; height: 38px;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      transition: all 0.3s;
      flex-shrink: 0;
    }
    .theme-toggle:hover { background: rgba(255,239,179,0.28); transform: scale(1.1); }

    /* ── SECTION BASE ── */
    section {
      padding: 5.5rem 5%;
      width: 100%;
    }

    .inner {
      max-width: 1100px;
      margin: 0 auto;
      width: 100%;
    }

    .section-label {
      text-align: center;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--rust);
      margin-bottom: 0.5rem;
    }
    html.dark-mode .section-label { color: var(--cream); }

    .section-title {
      text-align: center;
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.9rem, 3.5vw, 2.7rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.6rem;
    }

    .divider {
      width: 46px; height: 2.5px;
      background: linear-gradient(90deg, var(--deep), var(--rust));
      margin: 0.9rem auto 2.8rem;
      border-radius: 2px;
    }
    html.dark-mode .divider { background: linear-gradient(90deg, var(--cream), rgba(255,239,179,0.4)); }

    .section-subtitle {
      text-align: center;
      color: var(--text-light);
      font-size: 1rem;
      max-width: 540px;
      margin: 0 auto 3rem;
      line-height: 1.75;
    }
    /* HERO */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 4rem;
    position: relative;
    background: #013e37;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 55%,
        rgba(255, 239, 179, 0.12) 0%,
        transparent 68%
    );
}

.hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 239, 179, 0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 7s ease-in-out infinite;
}

.hero-ring:nth-child(1) {
    width: 300px;
    height: 300px;
    animation-delay: 0s;
}

.hero-ring:nth-child(2) {
    width: 500px;
    height: 500px;
    animation-delay: 1.2s;
}

.hero-ring:nth-child(3) {
    width: 720px;
    height: 720px;
    animation-delay: 2.4s;
}

.hero-ring:nth-child(4) {
    width: 960px;
    height: 960px;
    animation-delay: 3.6s;
}

@keyframes pulse {
    0%, 100% {
        opacity: .25;
    }
    50% {
        opacity: .85;
    }
}

.hero-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid #ffefb3;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    background: linear-gradient(
        135deg,
        #025248 0%,
        #013e37 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #ffefb3;
    box-shadow:
        0 0 0 8px rgba(255, 239, 179, 0.06),
        0 0 60px rgba(255, 239, 179, 0.18);
    animation: fadeUp 1s ease both;
}

.hero-label {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #ffefb3;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    animation: fadeUp 1s .2s ease both;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 700;
    color: #fff9e6;
    line-height: 1.08;
    position: relative;
    z-index: 1;
    animation: fadeUp 1s .35s ease both;
}

.hero-tagline {
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255, 239, 179, 0.72);
    margin-top: 1.2rem;
    max-width: 500px;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    animation: fadeUp 1s .5s ease both;
}

.hero-divider {
    width: 50px;
    height: 1px;
    background: #ffefb3;
    margin: 2rem auto 0;
    position: relative;
    z-index: 1;
    animation: fadeUp 1s .6s ease both;
}

.hero-btns {
    display: flex;
    gap: 1.2rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeUp 1s .75s ease both;
}

.btn-gold {
    padding: .8rem 2rem;
    background: #ffefb3;
    color: #013e37;
    font-weight: 600;
    font-size: .88rem;
    border-radius: 2px;
    text-decoration: none;
    letter-spacing: .06em;
    transition: all .3s;
}

.btn-gold:hover {
    background: #fff5cc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 239, 179, .28);
}

.btn-outline {
    padding: .8rem 2rem;
    background: transparent;
    color: rgba(255, 239, 179, .82);
    font-weight: 400;
    font-size: .88rem;
    border-radius: 2px;
    border: 1px solid rgba(255, 239, 179, .32);
    text-decoration: none;
    letter-spacing: .06em;
    transition: all .3s;
}

.btn-outline:hover {
    border-color: #ffefb3;
    color: #ffefb3;
    background: rgba(255, 239, 179, 0.05);
}

.hero-socials {
    display: flex;
    gap: 1.1rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
    animation: fadeUp 1s .9s ease both;
}

.hero-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 239, 179, .3);
    color: rgba(255, 239, 179, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all .3s;
}

.hero-socials a:hover {
    border-color: #ffefb3;
    color: #ffefb3;
    transform: translateY(-3px);
    background: rgba(255, 239, 179, 0.06);
}

.scroll-cue {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 239, 179, .35);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 1px;
    height: 36px;
    background: linear-gradient(
        to bottom,
        rgba(255, 239, 179, .7),
        transparent
    );
    animation: scrollBob 2.2s ease-in-out infinite;
}

@keyframes scrollBob {
    0%, 100% {
        opacity: .4;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.25);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    /* ── PROJECTS ── */
    .projects { background: var(--bg); }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
      gap: 1.75rem;
    }

    .project-card {
      background: var(--card-bg);
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 3px 16px rgba(0,0,0,0.055);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .project-card:hover {
      transform: translateY(-8px);
      border-color: var(--deep);
      box-shadow: 0 14px 40px rgba(1,62,55,0.13);
    }
    html.dark-mode .project-card:hover { border-color: var(--cream); box-shadow:0 14px 40px rgba(255,239,179,0.08); }

    .project-header {
      height: 170px;
      background: var(--deep);
      display:flex; align-items:center; justify-content:center;
      font-size:2.8rem; color:var(--cream);
      border-bottom:2px solid rgba(255,239,179,0.12);
    }
    .project-content { padding:1.6rem; }
    .project-title { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; margin-bottom:0.55rem; color:var(--text); }
    .project-desc { color:var(--text-light); margin-bottom:1rem; line-height:1.65; font-size:0.93rem; }
    .project-tech { display:flex; flex-wrap:wrap; gap:0.45rem; margin-bottom:1.2rem; }
    .tech-tag {
      background: rgba(1,62,55,0.08);
      color: var(--deep);
      border:1px solid rgba(1,62,55,0.18);
      padding:0.28rem 0.7rem;
      border-radius:20px; font-size:0.78rem; font-weight:600;
    }
    html.dark-mode .tech-tag { background:rgba(255,239,179,0.1); color:var(--cream); border-color:rgba(255,239,179,0.2); }
    .project-link { display:inline-block; color:var(--deep); text-decoration:none; font-weight:600; font-size:0.88rem; border-bottom:1.5px solid transparent; transition:border-color 0.2s; }
    html.dark-mode .project-link { color:var(--cream); }
    .project-link:hover { border-bottom-color:var(--deep); }
    html.dark-mode .project-link:hover { border-bottom-color:var(--cream); }

    /* ── EXPOSURE ── */
    .exposure { background: var(--bg2); }
    html.dark-mode .exposure { background: var(--bg2); }

    /* ── INTERNSHIP TIMELINE ── */
    .internship { background: var(--bg); }

    .timeline {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
    }
    .timeline::before {
      content:'';
      position:absolute;
      left:22px; top:0; bottom:0;
      width:2px;
      background:linear-gradient(to bottom, var(--deep), rgba(1,62,55,0.08));
      border-radius:2px;
    }
    html.dark-mode .timeline::before { background:linear-gradient(to bottom, var(--cream), rgba(255,239,179,0.06)); }

    .timeline-item {
      display:flex;
      gap:2rem;
      margin-bottom:2.75rem;
      position:relative;
      opacity:0;
      transform:translateY(20px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .timeline-item.visible { opacity:1; transform:translateY(0); }

    .timeline-dot-wrap {
      min-width:46px;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding-top:0.3rem;
    }
    .t-dot {
      width:18px; height:18px;
      border-radius:50%;
      background:var(--bg);
      border:3px solid var(--deep);
      box-shadow:0 0 0 5px rgba(1,62,55,0.1);
      z-index:1;
    }
    html.dark-mode .t-dot { background:var(--bg); border-color:var(--cream); box-shadow:0 0 0 5px rgba(255,239,179,0.08); }

    .timeline-body {
      background:var(--card-bg);
      border:1px solid var(--border);
      border-radius:14px;
      padding:1.6rem 1.8rem;
      flex:1;
      transition:border-color 0.3s, box-shadow 0.3s;
    }
    .timeline-body:hover { border-color:var(--deep); box-shadow:0 6px 28px rgba(1,62,55,0.1); }
    html.dark-mode .timeline-body:hover { border-color:var(--cream); box-shadow:0 6px 28px rgba(255,239,179,0.06); }

    .badge-intl {
      display:inline-flex; align-items:center; gap:0.4rem;
      background:rgba(1,62,55,0.08); border:1px solid rgba(1,62,55,0.2);
      color:var(--deep); font-size:0.7rem; font-weight:600;
      letter-spacing:0.1em; text-transform:uppercase;
      padding:0.28rem 0.75rem; border-radius:99px;
      margin-bottom:0.6rem;
    }
    html.dark-mode .badge-intl { background:rgba(255,239,179,0.1); border-color:rgba(255,239,179,0.2); color:var(--cream); }

    .tl-date { font-size:0.7rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--rust); margin-bottom:0.35rem; }
    html.dark-mode .tl-date { color:var(--cream); opacity:0.7; }
    .tl-org { font-size:0.84rem; font-weight:500; color:var(--rust); margin-bottom:0.75rem; }
    html.dark-mode .tl-org { color:var(--cream); opacity:0.7; }
    .tl-title { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--text); margin-bottom:0.8rem; }
    .tl-desc { font-size:0.94rem; color:var(--text-light); line-height:1.8; margin-bottom:0.6rem; }
    .timeline-tags { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1rem; }
    .timeline-tag {
      background:rgba(1,62,55,0.07); color:var(--deep);
      border:1px solid rgba(1,62,55,0.15);
      padding:0.25rem 0.65rem; border-radius:20px;
      font-size:0.77rem; font-weight:600;
    }
    html.dark-mode .timeline-tag { background:rgba(255,239,179,0.08); color:var(--cream); border-color:rgba(255,239,179,0.18); }

    /* ── WORK EXPERIENCE (GOVT JOB) ── */
    .work-exp { background: var(--deep); padding: 5.5rem 5%; }

    .work-exp .section-label { color: var(--cream); opacity:0.65; }
    .work-exp .section-title { color: #fff; }
    .work-exp .divider { background: linear-gradient(90deg,var(--cream),rgba(255,239,179,0.3)); }

    .work-cards {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(480px,1fr));
      gap: 1.75rem;
    }

    .work-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,239,179,0.18);
      border-radius: 16px;
      padding: 2.25rem;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      transition: border-color 0.35s, box-shadow 0.35s;
    }
    .work-card:hover { border-color:rgba(255,239,179,0.45); box-shadow:0 8px 32px rgba(0,0,0,0.25); }

    .work-card-top { display:flex; align-items:flex-start; gap:1.25rem; }

    .work-icon {
      width:52px; height:52px; min-width:52px;
      border-radius:12px;
      background:rgba(255,239,179,0.1);
      border:1.5px solid rgba(255,239,179,0.25);
      display:flex; align-items:center; justify-content:center;
      color:var(--cream); font-size:1.4rem;
    }

    .work-info h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:#fff; margin-bottom:0.3rem; }
    .work-info .work-org { font-size:0.82rem; color:rgba(255,239,179,0.6); font-weight:500; letter-spacing:0.03em; }

    .work-desc { font-size:0.94rem; color:rgba(255,255,255,0.55); line-height:1.82; }

    .work-meta {
      display:grid; grid-template-columns:1fr 1fr;
      gap:1rem;
      padding-top:1.25rem;
      border-top:1px solid rgba(255,239,179,0.1);
    }
    .work-meta-item { display:flex; align-items:center; gap:0.65rem; }
    .work-meta-item i { color:var(--cream); opacity:0.6; font-size:0.85rem; }
    .work-meta-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,239,179,0.35); }
    .work-meta-val { font-size:0.88rem; color:rgba(255,255,255,0.8); font-weight:500; }

    .status-badge {
      display:inline-flex; align-items:center; gap:0.45rem;
      background:rgba(255,239,179,0.1); border:1px solid rgba(255,239,179,0.3);
      color:var(--cream); font-size:0.72rem; font-weight:600;
      letter-spacing:0.1em; text-transform:uppercase;
      padding:0.32rem 0.85rem; border-radius:99px;
      width:fit-content;
    }
    .status-dot { width:7px; height:7px; background:var(--cream); border-radius:50%; animation:blink 1.6s ease-in-out infinite; }
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0.25}}

    /* ── CERTIFICATES ── */
    .certificates { background: var(--bg2); }

    .cert-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
      gap: 1.5rem;
    }

    .cert-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
      cursor: pointer;
      position: relative;
    }
    .cert-card::before {
      content:''; position:absolute; top:0;left:0;right:0; height:3px;
      background:linear-gradient(90deg,var(--deep),var(--rust));
      transform:scaleX(0); transform-origin:left; transition:transform 0.35s;
    }
    .cert-card:hover { transform:translateY(-5px); border-color:var(--deep); box-shadow:0 10px 32px rgba(1,62,55,0.12); }
    .cert-card:hover::before { transform:scaleX(1); }
    html.dark-mode .cert-card:hover { border-color:var(--cream); }
    html.dark-mode .cert-card::before { background:linear-gradient(90deg,var(--cream),rgba(255,239,179,0.4)); }

    /* blueprint image area */
    .cert-img-wrap {
      height: 160px;
      background: var(--deep);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .cert-img-wrap::before {
      content:'';
      position:absolute; inset:0;
      background:
        linear-gradient(rgba(255,239,179,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,239,179,0.04) 1px, transparent 1px);
      background-size: 22px 22px;
    }
    .cert-blueprint {
      width:100%; height:100%;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:0.6rem; position:relative; z-index:1;
    }
    .cert-bp-icon { font-size:2.5rem; color:var(--cream); opacity:0.85; }
    .cert-bp-ribbon {
      font-size:0.62rem; font-weight:600; letter-spacing:0.18em;
      text-transform:uppercase; color:rgba(255,239,179,0.5);
    }
    .cert-bp-lines {
      display:flex; flex-direction:column; gap:4px; margin-top:6px;
    }
    .cert-bp-line {
      height:2px; border-radius:2px;
      background:rgba(255,239,179,0.15);
    }
    .cert-bp-line:nth-child(1){ width:90px; }
    .cert-bp-line:nth-child(2){ width:60px; }

    .cert-view-hint {
      position:absolute; inset:0;
      background:rgba(1,62,55,0.82);
      display:flex; align-items:center; justify-content:center;
      color:var(--cream); font-size:0.82rem; font-weight:600;
      letter-spacing:0.12em; text-transform:uppercase;
      opacity:0; transition:opacity 0.28s;
      gap:0.5rem;
    }
    .cert-card:hover .cert-view-hint { opacity:1; }

    .cert-body { padding:1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; gap:0.5rem; }
    .cert-type { font-size:0.64rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--rust); }
    html.dark-mode .cert-type { color:var(--cream); opacity:0.65; }
    .cert-title { font-family:'Playfair Display',serif; font-size:0.98rem; color:var(--text); line-height:1.35; }
    .cert-issuer { font-size:0.8rem; color:var(--text-light); font-weight:500; }
    .cert-date { font-size:0.76rem; color:var(--text-light); display:flex; align-items:center; gap:0.35rem; margin-top:auto; padding-top:0.5rem; }

    /* ── CERT POPUP MODAL ── */
    .cert-modal {
      position:fixed; inset:0; z-index:9000;
      display:flex; align-items:center; justify-content:center;
      padding:2rem;
      opacity:0; pointer-events:none;
      transition:opacity 0.3s ease;
    }
    .cert-modal.open { opacity:1; pointer-events:all; }

    .cert-modal-backdrop {
      position:absolute; inset:0;
      background:rgba(1,30,27,0.85);
      backdrop-filter:blur(6px);
      cursor:pointer;
    }

    .cert-modal-box {
      position:relative; z-index:1;
      background:var(--deep);
      border:1px solid rgba(255,239,179,0.2);
      border-radius:20px;
      width:100%; max-width:520px;
      padding:2.5rem;
      transform:scale(0.88) translateY(20px);
      transition:transform 0.35s ease;
      box-shadow:0 30px 80px rgba(0,0,0,0.45);
    }
    .cert-modal.open .cert-modal-box { transform:scale(1) translateY(0); }

    .cert-modal-close {
      position:absolute; top:1.2rem; right:1.2rem;
      background:rgba(255,239,179,0.1);
      border:1.5px solid rgba(255,239,179,0.2);
      color:var(--cream); width:34px; height:34px;
      border-radius:50%; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:0.9rem; transition:all 0.2s;
    }
    .cert-modal-close:hover { background:rgba(255,239,179,0.2); }

    .cert-modal-icon { font-size:3rem; color:var(--cream); margin-bottom:1.25rem; }
    .cert-modal-type { font-size:0.68rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,239,179,0.5); margin-bottom:0.5rem; }
    .cert-modal-title { font-family:'Playfair Display',serif; font-size:1.55rem; color:#fff; line-height:1.25; margin-bottom:0.6rem; }
    .cert-modal-issuer { font-size:0.9rem; color:rgba(255,239,179,0.65); margin-bottom:1.5rem; }

    .cert-modal-meta { display:flex; flex-direction:column; gap:0.7rem; }
    .cert-modal-row { display:flex; align-items:center; gap:0.75rem; }
    .cert-modal-row i { color:var(--cream); opacity:0.5; width:16px; text-align:center; }
    .cert-modal-row span { font-size:0.88rem; color:rgba(255,255,255,0.65); }

    /* ── SKILLS ── */
    .skills { background: var(--bg); }
    .skills-grid {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.5rem;
    }
    .skill-box {
      background:var(--card-bg); padding:1.7rem; border-radius:14px;
      border-left:4px solid var(--deep);
      border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
      box-shadow:0 3px 14px rgba(0,0,0,0.05);
      transition:transform 0.3s ease, box-shadow 0.3s ease;
    }
    html.dark-mode .skill-box { border-left-color:var(--cream); }
    .skill-box:hover { transform:translateX(5px); box-shadow:0 6px 24px rgba(1,62,55,0.1); }
    .skill-title { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; margin-bottom:1rem; color:var(--deep); }
    html.dark-mode .skill-title { color:var(--cream); }
    .skill-list { list-style:none; }
    .skill-list li { padding:0.42rem 0; color:var(--text-light); display:flex; align-items:center; gap:0.7rem; font-size:0.93rem; }
    .skill-list li::before { content:'▸'; color:var(--deep); font-size:0.9rem; }
    html.dark-mode .skill-list li::before { color:var(--cream); }

    /* ── ABOUT ── */
    .about { background: var(--bg2); }
    .about-content { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
    .about-text h3 { font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--deep); margin-bottom:0.55rem; margin-top:1.5rem; }
    html.dark-mode .about-text h3 { color:var(--cream); }
    .about-text h3:first-child { margin-top:0; }
    .about-text p { color:var(--text-light); line-height:1.85; font-size:0.97rem; }
    .about-image {
      width:100%; aspect-ratio:1;
      background:var(--deep);
      border-radius:16px; border:2px solid rgba(1,62,55,0.15);
      display:flex; align-items:center; justify-content:center;
      font-size:4rem; color:var(--cream);
      box-shadow:0 16px 50px rgba(1,62,55,0.15);
    }

    /* ── CONTACT ── */
    .contact { background:var(--deep); text-align:center; position:relative; overflow:hidden; }
    .contact::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(255,239,179,0.07) 0%,transparent 70%); }
    .contact h2 { font-family:'Playfair Display',serif; font-size:2.4rem; margin-bottom:1rem; color:#fff; position:relative; z-index:1; }
    .contact > p { color:rgba(255,239,179,0.5); font-size:1rem; margin-bottom:2.5rem; max-width:480px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
    .contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; position:relative; z-index:1; }
    .contact-link {
      background:rgba(255,239,179,0.07); border:1.5px solid rgba(255,239,179,0.25);
      color:var(--cream); padding:0.72rem 1.65rem; border-radius:50px;
      text-decoration:none; font-weight:600; font-size:0.88rem;
      transition:all 0.3s ease; display:inline-flex; align-items:center; gap:0.55rem;
    }
    .contact-link:hover { background:var(--cream); color:var(--deep); border-color:var(--cream); transform:translateY(-3px); }

    /* ── FOOTER ── */
    footer { background:#013e37; color:rgba(255,239,179,0.3); text-align:center; padding:2rem; font-size:0.83rem; line-height:1.8; }

    /* ── SCROLL REVEAL ── */
    .reveal {
      opacity:0; transform:translateY(22px);
      transition:opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ── RESPONSIVE ── */
    @media(max-width:960px){
      nav{gap:1.1rem}
      nav a{font-size:0.78rem}
      .work-cards{grid-template-columns:1fr}
    }
    @media(max-width:768px){
      .hero-content{grid-template-columns:1fr;padding:2rem 0;gap:2rem}
      .hero-image{width:55%;margin-bottom:1rem;order:-1}
      .about-content{grid-template-columns:1fr}
      .work-meta{grid-template-columns:1fr}
    }
    @media(max-width:600px){
      header{flex-direction:column;height:auto;padding:0.9rem 5%;gap:0.75rem}
      nav{width:100%;justify-content:center;flex-wrap:wrap;gap:0.9rem}
      .hero{margin-top:100px;min-height:calc(100vh - 100px)}
      .btn-group{flex-direction:column}
      .btn{width:100%;text-align:center}
      section{padding:4rem 5%}
    }