* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background: #07111f;
    color: #edf5ff;
    line-height: 1.65;
}

.container {
    width: min(1120px, 92%);
    margin: auto;
}

/* ===== LIVE BEACH VIDEO BACKGROUND ===== */
.background-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    object-fit: cover;
    object-position: center 55%;

    z-index: -10;
    pointer-events: none;
}
.background-video-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(4,15,28,.18) 0%,
      rgba(4,15,28,.30) 48%,
      rgba(4,15,28,.52) 100%
    );
}

/* The old CSS-generated sun/sea/palms are no longer needed. */
.bg-scene{display:none!important}

/* Keep portfolio content clearly above the live background. */
.nav,main,footer{
  position:relative;
  z-index:5;
}

/* Keep the existing developer code animation subtle behind the video. */
#codeRain{
  z-index:-2;
  opacity:.10;
}

.code-vignette{
  z-index:-1;
  background:
    linear-gradient(
      90deg,
      rgba(7,17,31,.40) 0%,
      rgba(7,17,31,.12) 50%,
      rgba(7,17,31,.34) 100%
    );
}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 4%;background:rgba(5,13,24,.7);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.brand{color:#fff;text-decoration:none;font-family:"Space Grotesk";font-size:1.35rem;font-weight:700}.brand span:first-child{color:#66e3b4}.dot{color:#ffb86b}.nav nav{display:flex;gap:22px;align-items:center}.nav nav a{color:#c7d4e2;text-decoration:none;font-size:.9rem}.nav nav a:hover{color:#fff}.menu{display:none;background:none;border:0;color:white;font-size:1.5rem}.icon-btn{border:1px solid #ffffff22;background:#ffffff0d;color:#fff;border-radius:10px;padding:7px 10px}.hero{min-height:88vh;display:grid;grid-template-columns:1.35fr .65fr;gap:60px;align-items:center;padding:80px 0}.eyebrow{color:#66e3b4;letter-spacing:.16em;font-size:.74rem;font-weight:800}.hero h1{font-family:"Space Grotesk";font-size:clamp(3rem,7vw,5.9rem);line-height:.98;margin:18px 0 25px;letter-spacing:-.055em}.hero h1 span{color:#ffc579}.lead{font-size:1.08rem;color:#c5d3e1;max-width:680px}.hero-actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-block;padding:13px 20px;border-radius:12px;text-decoration:none;border:1px solid #ffffff22;font:inherit;font-weight:700;cursor:pointer}.primary{background:#66e3b4;color:#062019}.ghost{color:#fff;background:#ffffff0d}.stats{display:flex;gap:34px;margin-top:45px}.stats div{display:grid}.stats strong{font-size:1.35rem}.stats span{color:#9fb0c0;font-size:.78rem}.profile-card{padding:18px;background:#ffffff0c;border:1px solid #ffffff18;border-radius:24px;backdrop-filter:blur(16px);box-shadow:0 30px 80px #0004}.profile-photo{aspect-ratio:4/5;border-radius:17px;overflow:hidden;position:relative;background:#102132}.profile-photo img{width:100%;height:100%;object-fit:cover}.status{position:absolute;left:12px;bottom:12px;background:#07111fd9;border:1px solid #ffffff20;border-radius:999px;padding:6px 10px;font-size:.7rem}.profile-info{padding:15px 3px 3px;display:grid}.profile-info span{color:#8da0b2;font-size:.72rem}.profile-info strong{font-size:.86rem}.section{padding:105px 0}.section-head{margin-bottom:40px}.section h2{font-family:"Space Grotesk";font-size:clamp(2.2rem,5vw,4rem);line-height:1;margin:8px 0;letter-spacing:-.04em}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:1.1rem;color:#c5d3e1}.quote-card,.skill-card,.project-card,.edu-card{background:#07111fc9;border:1px solid #ffffff14;border-radius:20px;padding:25px;backdrop-filter:blur(10px)}.quote-card span{font-size:4rem;color:#66e3b4;line-height:.5}.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.skill-card h3{margin-top:0}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span,.tag{font-size:.73rem;padding:6px 10px;border-radius:999px;background:#ffffff0b;border:1px solid #ffffff12;color:#cbd9e7}.skill-bars{display:grid;gap:16px;margin-top:25px}.skill-bars label{font-size:.85rem}.bar{height:7px;background:#ffffff12;border-radius:99px;overflow:hidden;margin-top:7px}.bar i{display:block;width:var(--w);height:100%;background:linear-gradient(90deg,#66e3b4,#ffc579);animation:load 1.4s ease both}.timeline{border-left:1px solid #ffffff20;padding-left:28px;display:grid;gap:28px}.timeline article{position:relative}.timeline article:before{content:"";position:absolute;left:-34px;top:7px;width:9px;height:9px;border-radius:50%;background:#66e3b4;box-shadow:0 0 0 5px #66e3b41a}.timeline h3{margin:3px 0}.timeline p{margin:0;color:#b4c4d3}.timeline ul{color:#aebfce}.time{font-size:.76rem;color:#66e3b4;font-weight:700}.project-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.project-card{min-height:280px;transition:.3s}.project-card:hover{transform:translateY(-7px);border-color:#66e3b455}.project-top{display:flex;justify-content:space-between;color:#7890a6;font-size:.78rem}.project-card h3{font-size:1.4rem;margin:30px 0 12px}.project-card p{color:#aebfce}.tag{color:#66e3b4}.edu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.edu-card p{color:#9fb0c0}.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:40px;background:#07111fe8;border:1px solid #ffffff18;border-radius:28px}.contact-card h2{font-family:"Space Grotesk";font-size:3rem;line-height:1;margin:8px 0 20px}.contact-card p{color:#afbfce}.mail{color:#ffc579;text-decoration:none}.contact-card form{display:grid;gap:12px}input,textarea{width:100%;border:1px solid #ffffff16;background:#ffffff08;color:#fff;padding:13px 14px;border-radius:11px;font:inherit;outline:none}input:focus,textarea:focus{border-color:#66e3b4}.form-msg{font-size:.85rem!important;color:#66e3b4!important}footer{padding:30px 4%;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;color:#8ea0b0;font-size:.8rem}footer a{color:#c7d4e2;text-decoration:none}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.show{opacity:1;transform:none}@keyframes load{from{width:0}}@media(prefers-reduced-motion:reduce){
  .background-video{display:none}
  .background-video-overlay{
    background:linear-gradient(180deg,rgba(4,15,28,.30),rgba(4,15,28,.58));
  }
}

@media(max-width:800px){.background-video{object-position:center bottom}.nav nav{display:none;position:absolute;top:68px;left:0;right:0;padding:18px 5%;background:#07111ff5;flex-direction:column;align-items:flex-start}.nav nav.open{display:flex}.menu{display:block}.hero{grid-template-columns:1fr;padding:70px 0}.profile-card{max-width:430px}.about-grid,.contact-card{grid-template-columns:1fr}.project-grid,.skill-grid,.edu-grid{grid-template-columns:1fr}.hero h1{font-size:3.3rem}.stats{gap:18px}.contact-card h2{font-size:2.4rem}}

/* ===== VERSION 2: ANIMATED CODE EXPERIENCE ===== */

#codeRain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    opacity: 0.22;
    pointer-events: none;
}

.code-vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 72% 25%,rgba(102,227,180,.13),transparent 28%),linear-gradient(90deg,rgba(7,17,31,.96) 0%,rgba(7,17,31,.72) 50%,rgba(7,17,31,.9) 100%)}

.terminal{width:min(650px,100%);margin:0 0 26px;padding:0;border:1px solid rgba(102,227,180,.2);border-radius:16px;overflow:hidden;background:rgba(2,9,16,.78);box-shadow:0 20px 70px rgba(0,0,0,.3);backdrop-filter:blur(8px)}

.terminal-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#7f93a6;font-size:.72rem}

.terminal-bar span{width:8px;height:8px;border-radius:50%;background:#ffffff30}.terminal-bar b{margin-left:8px;font-weight:500}

.terminal pre{margin:0;padding:20px 18px;overflow:auto;font:500 .84rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c7d7e7}

.terminal .kw{color:#ff9f7a}.terminal .type{color:#66e3b4}.terminal .fn{color:#8dc8ff}.terminal .str{color:#ffc579}.cursor{animation:blink .9s infinite;color:#66e3b4}

.quick-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:32px 36px!important;border:1px solid rgba(102,227,180,.16);border-radius:22px;background:linear-gradient(110deg,rgba(102,227,180,.09),rgba(255,197,121,.06));}

.quick-cta h2{font-size:2.2rem!important;margin-bottom:10px!important}.quick-cta p{color:#aebfce;max-width:700px}

@keyframes blink{0%,45%{opacity:1}46%,100%{opacity:0}}

@media(max-width:800px){.quick-cta{align-items:flex-start;flex-direction:column}.terminal pre{font-size:.72rem}.hero-actions{flex-wrap:wrap}}

body.light{background:#eef5f5;color:#10202b}.light .nav{background:rgba(238,245,245,.82)}.light .nav nav a,.light .nav .brand{color:#10202b}.light .background-video-overlay{background:linear-gradient(180deg,rgba(240,248,248,.18),rgba(240,248,248,.34) 45%,rgba(240,248,248,.48))}.light .hero .lead,.light .about-grid,.light .project-card p,.light .timeline p,.light .timeline ul,.light .edu-card p,.light .contact-card p,.light .quick-cta p{color:#40515e}.light .quote-card,.light .skill-card,.light .project-card,.light .edu-card,.light .contact-card{background:#ffffffc9;border-color:#10202b18}.light .terminal{background:#10202bcc}.light input,.light textarea{background:#ffffffaa;color:#10202b;border-color:#10202b20}

/* ===== VERSION 3: PREMIUM DEVELOPER PORTFOLIO ===== */

.nav-cta {
    padding: 7px 12px !important;
    border: 1px solid rgba(102, 227, 180, 0.35);
    border-radius: 10px !important;
    color: #66e3b4 !important;
}

.typing-line{font:600 1rem/1.5 ui-monospace,monospace;color:#9fc5b6;min-height:28px;margin:8px 0 18px}

.typing-cursor{color:#66e3b4;animation:blink .8s infinite}

.social-btn{display:inline-flex;align-items:center;padding:12px 15px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#dce8f2;text-decoration:none;background:rgba(255,255,255,.045);font-size:.82rem;font-weight:700}

.social-btn:hover{border-color:rgba(102,227,180,.5);transform:translateY(-2px)}

.project-card{position:relative;overflow:hidden}

.project-card:after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-70px;bottom:-70px;background:rgba(102,227,180,.07);transition:.35s}

.project-card:hover:after{transform:scale(2.2)}

.project-open{position:absolute;right:17px;top:17px;z-index:2;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#66e3b4;cursor:pointer;font-size:1.1rem}

.metrics-section{display:grid!important;grid-template-columns:repeat(4,1fr);gap:1px!important;padding:0!important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}

.metric{padding:26px 20px;background:rgba(7,17,31,.78);text-align:center}.metric strong{display:block;font:700 1.5rem "Space Grotesk";color:#ffc579}.metric span{display:block;color:#8fa4b6;font-size:.72rem;margin-top:5px}

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.25s}

.modal.open{opacity:1;visibility:visible}.modal-box{position:relative;width:min(650px,94%);padding:40px;border:1px solid rgba(102,227,180,.25);border-radius:24px;background:#081521;box-shadow:0 30px 100px #0008;transform:translateY(20px);transition:.25s}.modal.open .modal-box{transform:none}

.modal-box h2{font:700 2.3rem "Space Grotesk";margin:8px 0 15px}.modal-box p:not(.eyebrow){color:#b6c6d4}.modal-close{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:10px;border:1px solid #ffffff18;background:#ffffff08;color:#fff;font-size:1.5rem;cursor:pointer}.modal-contact{margin-top:12px}

@media(max-width:800px){.metrics-section{grid-template-columns:repeat(2,1fr)}.hero-actions .social-btn{display:none}.nav-cta{display:none}}

@media(max-width:500px){.metrics-section{grid-template-columns:1fr}.modal-box{padding:30px 22px}}