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

    :root {
      --bg:       #07060f;
      --dark:     #2d1c7f;
      --purple:   #9b4de0;
      --pink:     #d63ad4;
      --lavender: #e0b8f8;
      --softBlue: #c9b8f0;
    }

    html, body { 
      width:100%; 
      height:100%; 
      background:var(--bg); 
      color:var(--lavender); 
      font-family:'Space Grotesk',sans-serif; 
      overflow:hidden; 
    }

    #scroll-root { 
      width:100%; 
      height:100vh; 
      overflow-y:auto; 
      scroll-behavior:smooth; 
      scrollbar-width:thin; 
      scrollbar-color:#9b4de030 transparent; 
    }

    a { text-decoration:none; }

    @keyframes spin       { to{transform:rotate(360deg)} }
    @keyframes floatUD    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    @keyframes pulse-dot  { 0%,100%{opacity:.4} 50%{opacity:1} }
    @keyframes bounce     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes neon-pulse { 0%,100%{box-shadow:0 0 12px var(--purple),0 0 24px #9b4de040} 50%{box-shadow:0 0 24px var(--pink),0 0 48px #d63ad460} }

    .reveal { 
      opacity:0; 
      transform:translateY(36px); 
      transition:opacity .7s ease,transform .7s ease; 
    }
    .reveal.visible { 
      opacity:1; 
      transform:translateY(0); 
    }

    nav {
      position:fixed; top:0; left:0; right:0; z-index:50;
      display:flex; 
      align-items:center; 
      justify-content:space-between;
      padding:1rem 2rem;
      transition:background .3s,backdrop-filter .3s,border-bottom .3s,box-shadow .3s;
    }

    nav.scrolled { 
      background:#07060fee; 
      backdrop-filter:blur(12px); 
      border-bottom:1px solid #9b4de030; 
      box-shadow:0 4px 30px #2d1c7f60; 
    }
    .nav-logo { 
      font-family:'Oxanium',sans-serif; 
      font-size:1.1rem; 
      font-weight:700; 
      letter-spacing:.15em; 
      color:var(--lavender); 
      text-shadow:0 0 12px var(--pink),0 0 24px var(--purple); 
    }
    nav ul { 
      list-style:none; 
      display:flex; 
      gap:2rem; 
    }
    .nav-link { 
      position:relative; 
      font-family:'Space Grotesk',sans-serif; 
      font-size:.85rem; font-weight:500; 
      text-transform:uppercase; 
      letter-spacing:.1em; 
      color:var(--softBlue); 
      background:none; 
      border:none; 
      cursor:pointer; 
      padding:0; 
      transition:color .25s,text-shadow .25s; 
    }
    .nav-link::after { 
      content:''; 
      position:absolute; 
      bottom:-2px; 
      left:0; 
      height:1px; 
      width:0%; 
      background:linear-gradient(90deg,var(--pink),var(--purple),var(--lavender)); 
      box-shadow:0 0 8px var(--pink); 
      transition:width .3s,opacity .3s; 
      opacity:0; 
    }
    .nav-link:hover,.nav-link.active { 
      color:var(--lavender); 
      text-shadow:0 0 10px var(--pink); 
    }
    .nav-link:hover::after,.nav-link.active::after { 
      width:100%; 
      opacity:1; 
    }

    /*(mobile) */
    .nav-hamburger { 
      display:none; 
      flex-direction:column; 
      gap:5px; 
      cursor:pointer; 
      background:none; 
      border:none; 
      padding:4px; 
    }
    .nav-hamburger span { 
      display:block; 
      width:24px; 
      height:2px; 
      background:var(--lavender); 
      border-radius:2px; 
      transition:all .3s; 
    }
    .nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity:0; }
    .nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    /* HERO */
    #hero { 
      position:relative; 
      min-height:100vh; 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      justify-content:center; 
      text-align:center; 
      padding:2rem; 
      overflow:hidden; 
    }
    .hero-aurora { 
      position:absolute; 
      inset:0; 
      background:url('img/fun2.jpg') center center / cover no-repeat; 
      opacity:.85; 
      pointer-events:none; 
    }
    .hero-aurora-overlay { 
      position:absolute; 
      inset:0; 
      background:linear-gradient(to bottom,rgba(7,6,15,.1) 0%,rgba(7,6,15,.05) 40%,rgba(7,6,15,.6) 80%,rgba(7,6,15,1) 100%); 
      pointer-events:none; 
    }
    #particles { 
      position:absolute; 
      inset:0; 
      width:100%; 
      height:100%; 
      opacity:.35; 
      pointer-events:none; 
    }
    .hero-content { 
      position:relative; 
      z-index:10; 
      margin-top:-80px; 
    }
    .hero-label { 
      font-family:'Space Mono',monospace; 
      font-size:.8rem; 
      color:var(--lavender); 
      letter-spacing:.3em; 
      margin-bottom:1.5rem; 
      text-shadow:0 0 10px var(--pink); 
    }
    .hero-title { 
      font-family:'Oxanium',sans-serif; 
      font-size:clamp(3rem,8vw,5rem); 
      font-weight:900; 
      letter-spacing:-.02em; 
      background:linear-gradient(135deg,#fff 0%,var(--lavender) 40%,var(--pink) 100%); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
      background-clip:text; 
      filter:drop-shadow(0 0 30px #d63ad460); 
      margin-bottom:1rem; 
    }
    .hero-typed { 
      font-family:'Oxanium',sans-serif; 
      font-size:1.5rem; 
      font-weight:700; 
      color:var(--lavender); 
      text-shadow:0 0 20px var(--pink),0 0 40px var(--purple); 
      min-height:2rem; 
      margin-bottom:.5rem; 
    }
    .cursor { 
      display:inline-block; 
      width:2px; 
      height:1.4rem; 
      background:var(--pink); 
      margin-left:3px; 
      vertical-align:middle; 
      animation:blink 1s step-end infinite; 
    }
    .hero-stack { 
      font-size:.9rem; 
      color:var(--softBlue); 
      letter-spacing:.12em; 
      margin-top:1rem; 
      text-shadow:0 0 8px #9b4de060; 
    }
    .scroll-hint { 
      position:absolute; 
      bottom:2.5rem; 
      left:50%; 
      transform:translateX(-50%); 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      gap:.5rem; 
      color:var(--softBlue); 
      opacity:.7; 
      animation:bounce 2s ease-in-out infinite; 
    }
    .scroll-hint span { 
      font-family:'Space Mono',monospace; 
      font-size:.7rem; 
      letter-spacing:.2em; 
    }
  
    section { 
      padding:5rem 1rem; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
    }
    .section-inner { 
      width:100%; 
      max-width:900px; 
    }
    .section-label { 
      font-family:'Space Mono',monospace; 
      font-size:.7rem; 
      color:var(--pink); 
      letter-spacing:.3em; 
      text-align:center; 
      margin-bottom:.75rem;
    }
    .section-title { 
      font-family:'Oxanium',sans-serif; 
      font-size:clamp(2rem,5vw,3rem); 
      font-weight:900; 
      text-align:center; 
      background:linear-gradient(135deg,#fff 0%,var(--lavender) 50%,var(--pink) 100%); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
      background-clip:text; 
      filter:drop-shadow(0 0 20px #d63ad450); 
    }
    .section-divider { 
      width:6rem; 
      height:1px; 
      margin:1rem auto 2.5rem; 
      background:linear-gradient(90deg,transparent,var(--pink),var(--purple),transparent);
      box-shadow:0 0 10px var(--pink); 
    }
    
    #sobre .section-inner { 
      max-width:1100px; 
      padding:0 2rem; 
    }

    #sobre .about-grid {
      display:flex; gap:4rem; 
      align-items:flex-start;
      padding: 0 4rem; 
    }

    .about-photo-col { 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      gap:1.25rem; 
      flex-shrink:0; 
      width:240px; }
    
    .photo-card {
      position:relative;
      width: 204px;
      height: 323px;
      border-radius:1rem; overflow:hidden;
      border:1px solid var(--purple);
      box-shadow:0 0 18px #9b4de060,0 0 40px #d63ad430,inset 0 0 20px #2d1c7f20;
      animation:neon-pulse 3s ease-in-out infinite;
    }
    
    .photo-card img {
      width:100%; height:100%;
      object-fit:cover;
      object-position:50% 5%; 
      filter:brightness(.95) contrast(1.05);
      display:block;
    }
    .photo-card-overlay { 
      position:absolute; 
      inset:0; 
      background:linear-gradient(180deg,transparent 65%,#07060f90 100%); 
      pointer-events:none; 
    }

    .cv-btn { 
      display:inline-flex; 
      align-items:center; 
      gap:.5rem; 
      padding:.35rem 1rem; 
      border-radius:.35rem; 
      font-family:'Space Mono',monospace; 
      font-size:.72rem; 
      letter-spacing:.05em; color:var(--lavender); 
      background:#9b4de020; border:1px solid #9b4de050; 
      cursor:pointer; 
      transition:all .2s; 
    }
    .cv-btn:hover { 
      background:#d63ad430; 
      border-color:var(--pink); 
      box-shadow:0 0 10px #d63ad440; 
    }

    .about-bio { flex:1; }

    .about-bio h3 { 
      font-family:'Oxanium',sans-serif; 
      font-size:1.75rem; 
      font-weight:700; 
      color:var(--lavender);
      text-shadow:0 0 15px #9b4de060; 
      margin-bottom:1.25rem; 
    }
    .about-bio h3 span { text-shadow:0 0 20px var(--pink),0 0 40px #d63ad480; }

    .about-bio p { 
      font-size:.9rem; 
      line-height:1.9; 
      color:var(--softBlue); 
      margin-bottom:1rem; 
    }

    .tag-list { 
      display:flex; 
      flex-wrap:wrap; 
      gap:.6rem; 
      margin-top:1.5rem; 
    }
    .tag { 
      padding:.25rem .75rem; 
      border-radius:.3rem; 
      font-family:'Space Mono',monospace; 
      font-size:.72rem; 
      letter-spacing:.05em; 
      color:var(--lavender); 
      background:#9b4de020; 
      border:1px solid #9b4de050; 
    }

    
    #projetos { flex-direction:column; }

    .carousel-wrap { 
      display:flex; 
      align-items:center; 
      gap:1rem; 
    }
    .carousel-btn { 
      flex-shrink:0; 
      width:44px; 
      height:44px; 
      border-radius:50%; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      background:#9b4de020; 
      border:1px solid #9b4de050; 
      color:var(--lavender); 
      cursor:pointer; 
      transition:all .2s;
    }
    .carousel-btn:hover { 
      background:#d63ad430; 
      border-color:var(--pink); 
    }
    .project-card { 
      flex:1; 
      background:linear-gradient(135deg,var(--bg) 0%,#120820 100%); 
      border:1px solid #9b4de060; 
      box-shadow:0 0 15px #9b4de030,inset 0 0 30px #2d1c7f20; 
      border-radius:.75rem; 
      padding:1.5rem; 
    }
    .proj-img-wrap { 
      display:block; 
      position:relative; 
      width:100%; 
      height:200px; 
      border-radius:.6rem; 
      overflow:hidden; 
      margin-bottom:1.25rem; 
      border:1px solid #9b4de040;       
      cursor:pointer; 
    }
    .proj-img-wrap img { 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      display:block; 
      transition:transform .4s ease,filter .4s ease; 
      filter:brightness(.85); 
    }
    .proj-img-overlay { 
      position:absolute; 
      inset:0; 
      background:#9b4de070; 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      justify-content:center; 
      gap:.5rem; 
      opacity:0; 
      transition:opacity .3s ease; 
      font-family:'Space Grotesk',sans-serif; 
      font-size:.85rem; 
      font-weight:600; 
      color:var(--lavender); 
      letter-spacing:.1em; }

    .proj-img-wrap:hover img { transform:scale(1.05); filter:brightness(.65); }

    .proj-img-wrap:hover .proj-img-overlay { opacity:1; }

    .project-info h3 { 
      font-family:'Oxanium',sans-serif; 
      font-size:1.4rem; 
      font-weight:700; 
      color:var(--lavender); 
      text-shadow:0 0 10px #9b4de060; 
      margin-bottom:.5rem; 
    }
    .project-info p { 
      font-size:.9rem; 
      line-height:1.7; 
      color:var(--softBlue); 
      margin-bottom:1rem; 
    }
    .carousel-dots { 
      display:flex; 
      justify-content:center; 
      gap:.5rem; 
      margin-top:1.5rem; 
    }
    .dot { 
      height:8px; 
      border-radius:4px; 
      background:#9b4de030; 
      border:none; 
      cursor:pointer; 
      transition:all .3s; 
      width:8px; 
    }
    .dot.active { 
      background:var(--pink); 
      box-shadow:0 0 8px var(--pink); 
      width:24px; 
    }
    .carousel-counter { 
      text-align:center; 
      margin-top:1rem; 
      font-family:'Space Mono',monospace; 
      font-size:.8rem; 
      color:#c9b8f080; 
      letter-spacing:.1em; 
    }
    
    .skills-grid { 
      display:grid; 
      grid-template-columns:repeat(4,1fr); 
      gap:2.5rem; 
      padding:1.5rem 0; 
    }
    .skill-item { 
      position:relative; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      cursor:default; 
    }
    .skill-item svg { 
      color:var(--lavender); 
      filter:drop-shadow(0 0 7px #9b4de060); 
      transition:filter .3s,
      transform .3s; 
    }
    .skill-item:hover svg { 
      filter:drop-shadow(0 0 16px var(--pink)) drop-shadow(0 0 8px var(--purple)); 
      transform:scale(1.18); 
    }
    .skill-tooltip { 
      display:none; 
      position:absolute; 
      bottom:calc(100% + 12px); 
      left:50%; 
      transform:translateX(-50%); 
      background:#120820f0; 
      border:1px solid #9b4de080; 
      border-radius:4px; 
      padding:4px 12px; 
      font-family:'Space Grotesk',sans-serif; 
      font-size:.68rem; 
      color:var(--lavender); 
      white-space:nowrap; 
      letter-spacing:.1em; 
      text-transform:uppercase; 
      box-shadow:0 0 14px #d63ad430; 
      pointer-events:none; 
      z-index:10; 
    }
    .skill-item:hover .skill-tooltip { display:block; }
   
    #contato { 
      flex-direction:column; 
      position:relative; 
      overflow:hidden; 
    }
    .footer-aurora { 
      position:absolute; 
      inset:0; 
      background:url('img/fun2.jpg') center bottom / cover no-repeat; 
      opacity:.18; 
      pointer-events:none; 
      transform:scaleX(-1); 
    }
    .footer-aurora-overlay { 
      position:absolute; 
      inset:0; 
      background:linear-gradient(to bottom,rgba(7,6,15,1) 0%,rgba(7,6,15,.5) 35%,rgba(7,6,15,.25) 70%,rgba(7,6,15,.65) 100%); 
      pointer-events:none; 
    }
    #contato .section-inner { position:relative; z-index:2; }

    .contact-icons-row { 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      gap:3rem; 
      margin-bottom:3rem; 
    }
    .contact-icon-btn { 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      width:72px; 
      height:72px; 
      border-radius:50%; 
      border:1px solid #9b4de060; 
      background:#9b4de015; 
      color:var(--lavender);
      transition:all .25s;
    }
    .contact-icon-btn:nth-child(1) { animation:floatUD 3s ease-in-out infinite; }

    .contact-icon-btn:nth-child(2) { animation:floatUD 3s ease-in-out infinite; animation-delay:.6s; }

    .contact-icon-btn svg { filter:drop-shadow(0 0 7px #9b4de060); transition:filter .3s,transform .3s; }

    .contact-icon-btn:hover { background:#d63ad430; border-color:var(--pink); box-shadow:0 0 20px #d63ad460; }

    .contact-icon-btn:hover svg { filter:drop-shadow(0 0 16px var(--pink)) drop-shadow(0 0 8px var(--purple)); transform:scale(1.18); }

    .footer-bar { 
      display:flex; 
      align-items:flex-end; 
      justify-content:space-between; 
      margin-top:1rem;
    }
    .footer-copy { 
      font-family:'Space Mono',monospace; 
      font-size:.72rem; 
      color:#c9b8f040; 
      letter-spacing:.2em; 
    }
    .social-links { display:flex; gap:1.25rem; }

    .social-links a { color:var(--softBlue); display:flex; transition:color .25s,filter .25s; }

    .social-links a:hover { color:var(--lavender); filter:drop-shadow(0 0 10px var(--pink)); }
    
    #back-top { 
      position:fixed; 
      bottom:36px; 
      right:36px; 
      width:44px; 
      height:44px; 
      border-radius:50%;
      border:1px solid #9b4de060; 
      background:#07060fdd; 
      backdrop-filter:blur(8px); 
      box-shadow:0 0 10px #9b4de030; 
      cursor:pointer; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      color:var(--softBlue); 
      opacity:0; transform:translateY(16px); 
      transition:opacity .4s,transform .4s,box-shadow .25s,border-color .25s,color .25s; 
      pointer-events:none; 
      z-index:100; 
    }

    #back-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
    
    #back-top:hover { border-color:var(--pink); box-shadow:0 0 18px #d63ad470; color:var(--lavender); }

    /* RESPONSIVE — TABLET (≤ 900px) */
    @media (max-width: 900px) {
      
      nav { padding:.85rem 1.25rem; }
      nav ul { gap:1.25rem; }
      .nav-link { font-size:.78rem; }

      
      #sobre .about-grid { flex-direction:column; align-items:center; gap:2rem; padding:0 1rem; }
      .about-photo-col { width:100%; align-items:center; }
      .photo-card { width:180px; height:285px; }
      .about-bio { width:100%; }
      .about-bio h3 { font-size:1.4rem; }

      
      .skills-grid { grid-template-columns:repeat(2,1fr); gap:2rem; }
      
      .contact-icons-row { gap:2rem; }
      
      .footer-bar { justify-content:center; text-align:center; }
    }

    /* RESPONSIVE — MOBILE (≤ 600px) */
    @media (max-width: 600px) {
      
      nav ul {
        display:none; 
        flex-direction:column; 
        gap:1rem;
        position:absolute; 
        top:100%;         
        left:0; 
        right:0;
        background:#07060fee; 
        backdrop-filter:blur(12px);
        padding:1.5rem 2rem;
        border-bottom:1px solid #9b4de030;
      }

      nav ul.open { display:flex; }

      .nav-hamburger { display:flex; }
      
      .hero-content { margin-top:-40px; }
      .hero-stack { font-size:.72rem; letter-spacing:.06em; }
      .hero-label { font-size:.7rem; letter-spacing:.2em; }
      
      section { padding:3.5rem .75rem; }
      #sobre .section-inner { padding:0 .5rem; }
      #sobre .about-grid { padding:0; gap:1.5rem; }
      
      .photo-card { width:160px; height:253px; }
      
      .about-bio h3 { font-size:1.25rem; }
      .about-bio p { font-size:.85rem; }
      
      .carousel-btn { width:36px; height:36px; }
      .proj-img-wrap { height:160px; }
      
      .skills-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
      
      .contact-icons-row { gap:1.5rem; }
      .contact-icon-btn { width:60px; height:60px; }
      .contact-icon-btn svg { width:40px; height:40px; }

      .footer-bar { flex-direction:column; align-items:center; gap:.75rem; }
      .footer-copy { font-size:.65rem; }

      #back-top { bottom:20px; right:20px; }
    }