/* Modern optimized stylesheet with CSS variables, dark mode, motion & responsive improvements */
* { margin:0; padding:0; box-sizing:border-box; }
:root { --font-sans:'Amazon Ember','Helvetica Neue',Arial,sans-serif; --color-bg:#ffffff; --color-text:#1d2733; --color-muted:#546170; --color-surface:#ffffff; --color-border:rgba(0,0,0,0.08); --accent:#6366f1; --accent-alt:#a855f7; --radius:14px; --radius-sm:6px; --shadow:0 4px 18px -4px rgba(0,0,0,0.08); --shadow-hover:0 18px 48px -12px rgba(0,0,0,0.18); --gradient-accent:linear-gradient(135deg,var(--accent),var(--accent-alt)); --gradient-bg:radial-gradient(circle at 15% 20%,rgba(99,102,241,0.15),transparent 60%),radial-gradient(circle at 85% 80%,rgba(168,85,247,0.15),transparent 60%),linear-gradient(180deg,#f8faff,#ffffff); --transition:0.55s cubic-bezier(.16,.8,.24,1); --input-bg:rgba(99,102,241,0.04); --input-bg-focus:#ffffff; --input-border:var(--color-border); }
[data-theme="dark"] { --color-bg:#0b1320; --color-text:#f1f5f9; --color-muted:#94a3b8; --color-surface:#162235; --color-border:rgba(255,255,255,0.08); --gradient-bg:radial-gradient(circle at 25% 25%,rgba(99,102,241,0.25),transparent 70%),radial-gradient(circle at 75% 75%,rgba(168,85,247,0.22),transparent 70%),linear-gradient(180deg,#0b1320,#0f1c33 65%,#0b1320); --shadow:0 4px 20px -4px rgba(0,0,0,0.55); --shadow-hover:0 26px 56px -14px rgba(0,0,0,0.6); --input-bg:rgba(255,255,255,0.06); --input-bg-focus:#162235; --input-border:rgba(255,255,255,0.14); }
body { font-family:var(--font-sans); background:var(--color-bg); color:var(--color-text); line-height:1.55; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; background:var(--gradient-bg); z-index:-1; }
img { max-width:100%; display:block; }
.skip-link { position:absolute; left:0; top:-40px; background:var(--accent); color:#fff; padding:8px 14px; border-radius:0 0 var(--radius-sm) var(--radius-sm); transition:var(--transition); z-index:100; } .skip-link:focus{ top:0; }
/* Header */
.site-header { position:sticky; top:0; backdrop-filter:blur(14px); background:rgba(255,255,255,0.78); border-bottom:1px solid var(--color-border); z-index:70; transition:0.4s ease; }
[data-theme="dark"] .site-header { background:rgba(11,19,32,0.78); }
.site-header.scrolled { box-shadow:0 6px 24px -8px rgba(0,0,0,0.25); }
.nav-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px clamp(1rem,2vw,1.5rem); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:.5px; }
.logo-glyph { background:var(--gradient-accent); color:#fff; padding:6px 11px; border-radius:10px; font-size:14px; font-weight:600; box-shadow:0 4px 10px -2px rgba(0,0,0,0.25); }
.primary-nav ul { list-style:none; display:flex; gap:28px; }
.primary-nav a { text-decoration:none; color:var(--color-text); font-weight:500; font-size:15px; position:relative; padding:6px 0; transition:color .3s; }
.primary-nav a::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--gradient-accent); transition:width .35s cubic-bezier(.4,.2,.2,1); }
.primary-nav a:hover::after, .primary-nav a.active::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:14px; }
.theme-toggle { background:var(--accent); color:#fff; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-size:17px; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -2px rgba(0,0,0,0.2); transition:var(--transition); }
.theme-toggle:hover { transform:translateY(-2px); }

/* Layout containers */
main { max-width:1240px; margin:0 auto; padding:48px clamp(.9rem,3.2vw,2.2rem); }
.panel { background:var(--color-surface); border-radius:var(--radius); padding:clamp(2.6rem,4vw,3.6rem) clamp(1.8rem,3vw,3rem); margin:0 0 clamp(3.2rem,5vw,4.8rem); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(140deg,rgba(99,102,241,0.05),rgba(168,85,247,0.06)); opacity:0; transition:opacity .6s; }
.panel:hover::after { opacity:1; }

/* Hero */
.hero { text-align:center; padding:64px clamp(.9rem,2.4vw,3rem); background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; top:18px; right:18px; width:66px; height:66px; background:var(--gradient-accent); border-radius:12px; opacity:.85; filter:blur(.3px); }
.hero h1 { font-size:clamp(2.4rem,6vw,3.4rem); font-weight:800; letter-spacing:-0.04em; margin:22px 0 10px; line-height:1.05; background:linear-gradient(90deg,var(--color-text),var(--color-text),var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-size:clamp(1rem,1.15rem + .2vw,1.15rem); font-weight:600; color:var(--accent); letter-spacing:.5px; text-transform:uppercase; }
.hero-sub { font-size:clamp(.95rem,1rem + .35vw,1.05rem); max-width:760px; margin:0 auto 24px; color:var(--color-muted); line-height:1.55; }
.profile-photo { width:124px; height:124px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,0.7); box-shadow:0 6px 20px -6px rgba(0,0,0,0.35); }
.profile-photo { cursor: zoom-in; }
#photo-modal.photo-modal { position:fixed; inset:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:.35s ease; z-index:120; }
#photo-modal.open { opacity:1; visibility:visible; }
.photo-modal-content { max-width:min(90vw,680px); max-height:80vh; display:flex; flex-direction:column; gap:12px; align-items:center; }
.photo-modal-content img { width:100%; height:auto; border-radius:24px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.55); }
.photo-modal-content figcaption { font-size:.8rem; color:#cbd5e1; letter-spacing:.5px; text-align:center; }
.photo-modal-close { position:absolute; top:18px; right:18px; background:var(--gradient-accent); color:#fff; border:none; width:44px; height:44px; border-radius:14px; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 10px 28px -10px rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; }
.photo-modal-close:hover { transform:translateY(-2px); }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.badge { background:var(--gradient-accent); color:#fff; padding:6px 14px; border-radius:30px; font-size:12px; letter-spacing:.6px; font-weight:600; position:relative; overflow:hidden; }
.badge::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 100%); transform:translateX(-120%); animation:shine 4.5s linear infinite; }
@keyframes shine { 0%{transform:translateX(-120%);} 60%{transform:translateX(130%);} 100%{transform:translateX(130%);} }

/* Buttons / links */
.aws-link, .cta-button { background:var(--accent); color:#fff; padding:14px 28px; border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; display:inline-block; transition:var(--transition); position:relative; overflow:hidden; }
.aws-link::before, .cta-button::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 70%); transform:translateX(-120%); }
.aws-link:hover::before, .cta-button:hover::before { animation:shine 1.8s linear; }
.aws-link:hover, .cta-button:hover { transform:translateY(-3px); box-shadow:0 10px 28px -10px rgba(99,102,241,.55); }

/* Section headings */
.section-header { margin:0 0 36px; }
.section-title { font-size:clamp(2rem,4.2vw,2.65rem); line-height:1.08; margin:0 0 14px; letter-spacing:-0.03em; font-weight:800; background:linear-gradient(90deg,var(--color-text),var(--color-text),var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-tag { font-size:clamp(.9rem,1rem + .2vw,1.05rem); color:var(--color-muted); font-weight:500; }
.inline-link { color:var(--accent); text-decoration:none; font-weight:500; }
.inline-link:hover { text-decoration:underline; }

/* About */
.about-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:42px; align-items:start; }
.about-story p { margin:0 0 18px; font-size:clamp(.95rem,1rem + .15vw,1.05rem); color:var(--color-text); }
.mission-quote { font-weight:700; font-size:1.08rem; color:var(--accent); }
.about-highlights { list-style:none; display:flex; flex-direction:column; gap:16px; font-size:.9rem; }
.about-highlights li { background:rgba(99,102,241,0.07); border:1px solid var(--color-border); padding:14px 16px; border-radius:12px; font-weight:500; line-height:1.4; backdrop-filter:blur(4px); }
[data-theme="dark"] .about-highlights li { background:rgba(99,102,241,0.12); }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.skill-card { background:linear-gradient(145deg,var(--color-surface),rgba(99,102,241,0.08)); border:1px solid var(--color-border); border-radius:16px; padding:26px 24px 30px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; transition:var(--transition); }
.skill-card::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(99,102,241,0.15),rgba(168,85,247,0.15)); mix-blend-mode:overlay; opacity:0; transition:var(--transition); }
.skill-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.skill-card:hover::after { opacity:.55; }
.skill-card h3 { font-size:1.03rem; margin:0; font-weight:700; letter-spacing:.5px; }
.skill-card ul { list-style:none; display:flex; flex-direction:column; gap:7px; font-size:.88rem; line-height:1.4; }

/* Timeline */
.timeline { list-style:none; position:relative; padding-left:22px; display:flex; flex-direction:column; gap:38px; }
.timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(var(--accent),var(--accent-alt)); }
.timeline-item { position:relative; padding-left:34px; }
.timeline-item::before { content:''; position:absolute; left:-2px; top:6px; width:16px; height:16px; border-radius:50%; background:var(--gradient-accent); border:2px solid var(--color-surface); box-shadow:0 0 0 4px rgba(99,102,241,.25); }
.timeline .time { font-size:.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin:0 0 5px; }
.timeline h3 { margin:0 0 6px; font-size:1.05rem; font-weight:700; letter-spacing:-.5px; }
.timeline p { margin:0 0 6px; font-size:.87rem; line-height:1.5; color:var(--color-muted); }

/* Projects */
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px; }
.project-card { background:linear-gradient(170deg,var(--color-surface),rgba(99,102,241,0.07)); border:1px solid var(--color-border); padding:26px 24px 30px; border-radius:18px; position:relative; display:flex; flex-direction:column; gap:14px; transition:var(--transition); overflow:hidden; }
.project-card::before { content:''; position:absolute; inset:0; background:linear-gradient(145deg,rgba(99,102,241,.18),rgba(168,85,247,.18)); opacity:0; transition:var(--transition); }
.project-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-hover); }
.project-card:hover::before { opacity:.6; }
.project-card h3 { margin:0; font-size:1.02rem; font-weight:700; letter-spacing:-.5px; }
.project-card p { font-size:.87rem; margin:0; line-height:1.5; color:var(--color-muted); }
.project-link { align-self:flex-start; font-weight:600; text-decoration:none; color:var(--accent); font-size:.84rem; letter-spacing:.5px; }

/* Fun Facts (legacy section styled to match new design) */
.fun-facts { background:var(--color-surface); border-radius:var(--radius); padding:clamp(2.2rem,3.4vw,3rem) clamp(1.2rem,2.4vw,2.4rem); margin:0 0 clamp(3rem,5vw,4.2rem); box-shadow:var(--shadow); position:relative; }
.fun-facts::before { content:''; position:absolute; top:-10px; left:34px; width:44px; height:44px; background:linear-gradient(135deg,#10b981,#059669); border-radius:12px; opacity:.9; }
.fun-facts h3 { font-size:clamp(1.8rem,3.6vw,2.3rem); margin:0 0 32px; font-weight:800; letter-spacing:-.03em; }
.facts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; }
.fact-card { background:linear-gradient(155deg,var(--color-surface),rgba(16,185,129,0.08)); border:1px solid var(--color-border); padding:24px 22px 26px; border-radius:16px; position:relative; transition:var(--transition); }
.fact-card::before { content:''; position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,var(--accent),var(--accent-alt)); opacity:.75; }
.fact-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.fact-card h4 { margin:0 0 12px; font-size:1rem; font-weight:700; }
.fact-card p { margin:0; font-size:.9rem; line-height:1.5; color:var(--color-muted); }
.fact-card a { color:var(--accent); text-decoration:none; }
.fact-card a:hover { text-decoration:underline; }

/* AWS Journey legacy block (kept for context) */
.aws-journey { background:var(--color-surface); border-radius:var(--radius); padding:clamp(2.2rem,3.4vw,3rem); text-align:center; box-shadow:var(--shadow); position:relative; }
.aws-journey::after { content:''; position:absolute; bottom:20px; left:20px; width:50px; height:50px; background:linear-gradient(135deg,#f59e0b,#d97706); border-radius:10px; opacity:.8; }
.aws-journey h3 { font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0 0 16px; font-weight:800; letter-spacing:-.03em; }
.aws-journey p { font-size:.92rem; max-width:640px; margin:0 auto 32px; line-height:1.55; color:var(--color-muted); }

/* Community */
.community-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; }
.community-card { background:linear-gradient(165deg,var(--color-surface),rgba(168,85,247,0.07)); border:1px solid var(--color-border); padding:24px 22px 26px; border-radius:18px; display:flex; flex-direction:column; gap:14px; position:relative; transition:var(--transition); }
.community-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.community-card h3 { margin:0; font-size:1rem; font-weight:700; letter-spacing:.5px; }
.community-card p { margin:0; font-size:.86rem; line-height:1.45; color:var(--color-muted); }

/* Certifications */
.cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px; }
.cert-card { background:linear-gradient(150deg,var(--color-surface),rgba(99,102,241,0.05)); border:1px solid var(--color-border); padding:18px 16px 20px; border-radius:16px; display:flex; flex-direction:column; gap:12px; transition:var(--transition); }
.cert-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.cert-card h3 { margin:0; font-size:.78rem; line-height:1.25; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); }

/* Contact */
.contact-form { background:var(--color-surface); border-radius:var(--radius); padding:54px clamp(1.4rem,3vw,2.6rem); box-shadow:var(--shadow); position:relative; margin-top:60px; }
.contact-form::before { content:''; position:absolute; top:-12px; right:40px; width:54px; height:54px; background:linear-gradient(135deg,#ec4899,#be185d); border-radius:12px; opacity:.9; }
.contact-form h3 { text-align:center; font-size:clamp(1.8rem,3.4vw,2.3rem); font-weight:800; letter-spacing:-.03em; margin:0 0 16px; }
.contact-form>p { text-align:center; color:var(--color-muted); font-size:.95rem; line-height:1.55; margin:0 0 32px; }
.contact-form-container { max-width:620px; margin:0 auto; }
.form-message { padding:12px 16px; border-radius:10px; margin:0 0 24px; font-weight:600; text-align:center; font-size:.9rem; }
.form-message.success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.form-message.error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.form-group { margin:0 0 24px; }
.form-group label { display:block; font-weight:600; margin:0 0 8px; font-size:.9rem; letter-spacing:.5px; }
.form-group input,
.form-group textarea { width:100%; padding:14px 16px; border:1px solid var(--input-border); border-radius:12px; background:var(--input-bg); font:inherit; font-size:.9rem; line-height:1.4; color:var(--color-text); caret-color:var(--accent); resize:vertical; min-height:54px; transition:border-color .25s, background .25s, box-shadow .25s; }
.form-group textarea { min-height:140px; }
.form-group input:focus,
.form-group textarea:focus { outline:none; border-color:var(--accent); background:var(--input-bg-focus); box-shadow:0 0 0 3px rgba(99,102,241,0.22); color:var(--color-text); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--color-muted); opacity:.85; }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea { background:var(--input-bg); color:var(--color-text); }
.form-group input:invalid,
.form-group textarea:invalid { border-color:#dc2626; }
.form-group input:invalid:focus,
.form-group textarea:invalid:focus { box-shadow:0 0 0 3px rgba(220,38,38,0.25); }
.contact-submit-btn { background:var(--gradient-accent); color:#fff; padding:14px 40px; border:none; border-radius:14px; font-weight:700; font-size:.95rem; cursor:pointer; transition:var(--transition); display:block; margin:0 auto; letter-spacing:.5px; box-shadow:0 10px 28px -10px rgba(99,102,241,.6); }
.contact-submit-btn:hover { transform:translateY(-4px); }

/* Utilities */
.hero-sub strong { color:var(--accent); }
.fade-in { opacity:0; transform:translateY(38px) scale(.98); transition:opacity .9s cubic-bezier(.4,.2,.2,1), transform .9s cubic-bezier(.4,.2,.2,1); }
.fade-in.appear { opacity:1; transform:translateY(0) scale(1); }
.social-links { margin-top:14px; display:flex; gap:18px; justify-content:center; font-size:.8rem; font-weight:600; letter-spacing:.5px; }
.social-links a { color:var(--accent); text-decoration:none; }
.social-links a:hover { text-decoration:underline; }
#back-to-top { text-decoration:none; color:var(--accent); }

/* Footer */
footer { text-align:center; padding:54px 20px 70px; color:var(--color-muted); font-size:.75rem; letter-spacing:.5px; }
footer p { margin:0 0 10px; }

.cta-button {
    display: inline-block;
    background: #7877c6;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.2s ease;
}

.cta-button:hover {
    background: #6b6ab8;
    transform: translateY(-1px);
}

footer {
    text-align: center;
    padding: 40px 20px;
    color: #687078;
    font-size: 14px;
}

/* Edge bleed utility (full-width background while content constrained) */
.edge-bleed { position:relative; }
.edge-bleed::before { content:''; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%); background:inherit; border-radius:0; z-index:-1; }

/* Mobile-first responsive adjustments */
@media (min-width:640px){ .about-grid{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } }
@media (min-width:880px){ .primary-nav ul{ gap:30px; } }
@media (max-width:879.98px){ .about-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){
    .nav-inner{ flex-wrap:wrap; row-gap:8px; }
    .primary-nav ul{ gap:14px; flex-wrap:wrap; }
    main{ padding:40px 14px; }
    .hero{ padding:56px 18px 58px; }
    .panel{ padding:42px 20px 50px; }
    .skills-grid,.project-grid,.community-grid,.cert-grid{ gap:20px; }
    .fun-facts{ padding:42px 20px 46px; }
}
@media (max-width:500px){
    .hero{ padding:52px 12px 54px; }
    .profile-photo{ width:110px; height:110px; }
    .badge{ font-size:11px; }
    .project-grid,.skills-grid,.community-grid,.cert-grid{ grid-template-columns:1fr; }
    .section-title{ font-size:2rem; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .fade-in{ opacity:1; transform:none; } }