:root{
    --bg:#ffffff;
    --surface:#f6f6f4;
    --surface-2:#efefec;
    --line:rgba(0,0,0,0.07);
    --line-strong:rgba(0,0,0,0.13);
    --text:#141613;
    --muted:#6b6f68;
    --muted-2:#9a9f96;
    --accent:#c6f84d;        /* lime fill: botão, detalhes */
    --accent-ink:#5f8f12;    /* lime escuro legível: texto/acento sobre branco */
    --glow:rgba(150,214,50,0.22);
    --sans:'Geist',Inter,ui-sans-serif,system-ui,sans-serif;
    --mono:'Geist Mono',ui-monospace,monospace;
    --frame:1320px;
    /* escada tonal dos fundos de seção — claro → escuro */
    --sec-1:#ffffff;   /* hero, sobre */
    --sec-2:#f7f8f5;   /* stack */
    --sec-3:#eef0ec;   /* experiência */
    --sec-4:#e4e7e1;   /* projetos */
    --sec-5:#1a1d1a;   /* nicolas (escuro suave) */
    --sec-6:#0b0d0b;   /* contato (mais escuro) */
  }

  /* ===== dark theme — sobrescreve os tokens semânticos ===== */
  html[data-theme="dark"]{
    --bg:#0d0f0d;
    --surface:#161915;
    --surface-2:#1e211d;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.15);
    --text:#eef0ea;
    --muted:#a4a89f;
    --muted-2:#70756c;
    --accent:#c6f84d;          /* lime mantido — brilha no escuro */
    --accent-ink:#a6e34d;      /* lime mais claro p/ texto legível sobre fundo escuro */
    --glow:rgba(150,214,50,0.28);
    /* escada tonal invertida: tudo escuro, degraus sutis */
    --sec-1:#0d0f0d;
    --sec-2:#101310;
    --sec-3:#131613;
    --sec-4:#171b16;
    --sec-5:#0f120f;
    --sec-6:#080a08;
  }
  /* ajustes pontuais de cores hardcoded que não vêm de variáveis */
  html[data-theme="dark"] nav{background:rgba(20,23,19,0.62);border-color:rgba(255,255,255,0.10);box-shadow:0 8px 30px rgba(0,0,0,0.5)}
  html[data-theme="dark"] .nav-ico:hover{background:rgba(255,255,255,0.06)}
  html[data-theme="dark"] header::after{background:radial-gradient(70% 90% at 16% 50%,rgba(255,255,255,0.05),transparent 60%),radial-gradient(120% 120% at 50% 100%,transparent 62%,rgba(0,0,0,0.28))}
  html[data-theme="dark"] .av-badge{background:rgba(22,25,21,0.78);border-color:var(--line-strong)}
  html[data-theme="dark"] .av-chip{background:var(--surface);border-color:var(--line-strong)}
  html[data-theme="dark"] #projetos{border-top-color:rgba(255,255,255,0.08)}
  /* botão de tema: sol/lua trocam conforme o tema ativo */
  button.nav-ico{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted)}
  .nav-ico .ico-moon{display:none}
  html[data-theme="dark"] .nav-ico .ico-sun{display:none}
  html[data-theme="dark"] .nav-ico .ico-moon{display:block}
  /* evita flash de conteúdo no idioma errado até o i18n.js aplicar as traduções */
  html:not([data-i18n-ready]) body{visibility:hidden}

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--sec-6);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
  ::selection{background:var(--accent);color:#141613}
  a{color:inherit;text-decoration:none}

  @keyframes animationIn{0%{opacity:0;transform:translateY(30px);filter:blur(10px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
  @keyframes textSlide{0%{transform:translateY(115%)}100%{transform:translateY(0)}}
  @keyframes shimmer{from{transform:translateX(-120%) skewX(-15deg)}to{transform:translateX(220%) skewX(-15deg)}}
  @keyframes navDrop{0%{opacity:0;transform:translateX(-50%) translateY(-16px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}

  .in{animation:animationIn .9s cubic-bezier(.16,1,.3,1) both}
  .d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
  .d4{animation-delay:.9s}.d5{animation-delay:1.05s}.d6{animation-delay:1.2s}

  /* vertical frame guides */
  .frame{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(calc(100% - 44px),var(--frame));z-index:5;pointer-events:none}
  .frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
  .frame::before{left:0}.frame::after{right:0}

  /* floating glass navbar (light) */
  nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.3rem;padding:.5rem .55rem;border-radius:999px;background:rgba(255,255,255,0.6);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(0,0,0,0.08);box-shadow:0 8px 30px rgba(0,0,0,0.10);animation:navDrop .9s cubic-bezier(.16,1,.3,1) .25s both}
  .nav-logo{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:-.01em;padding:0 .8rem 0 .7rem;white-space:nowrap}
  .nav-logo b{color:var(--accent-ink)}
  .nav-div{width:1px;height:22px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.16),transparent);margin:0 .2rem}
  .nav-ico{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;color:var(--muted);transition:.22s;position:relative}
  .nav-ico svg{width:18px;height:18px;stroke-width:1.85}
  .nav-ico:hover{color:var(--text);background:rgba(0,0,0,0.05)}
  .nav-ico:hover svg{stroke:var(--accent-ink)}
  .nav-ico .tip{position:absolute;top:47px;left:50%;transform:translateX(-50%) translateY(4px);font-family:var(--mono);font-size:.68rem;color:#fff;background:#1b1f1b;padding:.25rem .5rem;border-radius:6px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}
  .nav-ico:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}

  /* language switcher — botão com sigla + dropdown, mesmo padrão visual do .nav-ico */
  .lang-switch{position:relative}
  .nav-lang{gap:0}
  .lang-code{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.02em}
  .lang-menu{position:absolute;top:47px;left:50%;transform:translateX(-50%) translateY(4px);min-width:132px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,0.14);padding:.35rem;opacity:0;pointer-events:none;transition:.18s;z-index:70}
  .lang-menu.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .lang-option{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-family:var(--mono);font-size:.8rem;color:var(--text);padding:.5rem .7rem;border-radius:8px;cursor:pointer;transition:.15s}
  .lang-option:hover{background:rgba(0,0,0,0.05)}
  .lang-option.active{color:var(--accent-ink);font-weight:500}
  html[data-theme="dark"] .lang-option:hover{background:rgba(255,255,255,0.06)}

  /* hero */
  header{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--sec-1)}
  #scene{position:absolute;inset:0;z-index:0}
  header::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 90% at 16% 50%,rgba(255,255,255,0.92),transparent 60%),radial-gradient(120% 120% at 50% 100%,transparent 62%,rgba(0,0,0,0.035))}

  .hero-wrap{position:relative;z-index:2;flex:1;width:min(calc(100% - 44px),var(--frame));margin:0 auto;padding:0 clamp(28px,5vw,80px);display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(2rem,5vw,4rem);align-items:center}

  .avail{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:rgba(150,214,50,0.10);border:1px solid rgba(150,214,50,0.30);border-radius:999px;padding:.4rem .8rem;margin-bottom:1.8rem}
  .avail .ping{position:relative;display:flex;width:7px;height:7px}
  .avail .ping i{position:absolute;inset:0;border-radius:50%;background:var(--accent-ink)}
  .avail .ping i:first-child{animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;opacity:.7}

  .eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.1rem}
  .eyebrow b{color:var(--accent-ink);font-weight:400}

  h1.hero{font-family:var(--sans);font-weight:600;font-size:clamp(2.8rem,7.3vw,5.6rem);line-height:.9;letter-spacing:-.045em;margin-bottom:1.9rem;color:var(--text)}
  h1.hero .lmask{display:block;overflow:hidden;padding-bottom:.06em}
  h1.hero .line{display:block;transform:translateY(115%);animation:textSlide 1s cubic-bezier(.16,1,.3,1) both}
  h1.hero .line.l1{animation-delay:.4s}
  h1.hero .line.l2{animation-delay:.53s}
  h1.hero .line.l3{animation-delay:.66s}
  h1.hero .accent{color:var(--accent-ink);font-style:italic;font-weight:500}
  h1.hero .thin{color:var(--muted);font-weight:300}

  .hero-sub{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--muted);line-height:1.65;max-width:500px;margin-bottom:2.4rem}
  .hero-sub b{color:var(--text);font-weight:500}

  .cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
  .btn{font-family:var(--mono);font-size:.88rem;padding:.9rem 1.5rem;border-radius:11px;display:inline-flex;align-items:center;gap:.5em;cursor:pointer;transition:.22s;border:1px solid transparent;position:relative;overflow:hidden}
  .btn-primary{background:var(--accent);color:#141613;font-weight:500;box-shadow:0 2px 12px rgba(150,214,50,0.25)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(150,214,50,0.4)}
  .btn-primary .shine{position:absolute;top:0;left:0;height:100%;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);opacity:0}
  .btn-primary:hover .shine{opacity:1;animation:shimmer 1.1s ease-out}
  .btn-ghost{border-color:var(--line-strong);color:var(--text)}
  .btn-ghost:hover{border-color:var(--accent-ink);color:var(--accent-ink)}

  .stackline{font-family:var(--mono);font-size:.76rem;color:var(--muted-2);margin-top:2.2rem;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
  .stackline b{color:var(--accent-ink);font-weight:400}
  .stackline span{opacity:.4}

  /* photo */
  /* about visual — photo card with tilt, floating chips & spotlight */
  #sobre{position:relative;overflow:hidden}
  #sobre .container{position:relative;z-index:1}
  .about-spotlight{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px circle at var(--asx,50%) var(--asy,20%),rgba(150,214,50,0.07),transparent 65%)}
  .about-visual{position:relative;display:flex;justify-content:center;perspective:1200px}
  .av-ring{position:absolute;width:114%;height:114%;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px dashed var(--line-strong);border-radius:28px;pointer-events:none;animation:ringspin 44s linear infinite}
  @keyframes ringspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .av-glow{position:absolute;inset:-12%;background:radial-gradient(circle at 50% 28%,rgba(150,214,50,0.18),transparent 62%);filter:blur(22px);z-index:0;pointer-events:none}
  .av-frame{position:relative;z-index:2;width:100%;max-width:380px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid var(--line-strong);background:linear-gradient(160deg,var(--surface),var(--surface-2));box-shadow:0 30px 70px rgba(0,0,0,0.10);display:grid;place-items:center;isolation:isolate;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform}
  .av-frame .glare{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,0.55),transparent 55%);mix-blend-mode:overlay;pointer-events:none}
  .about-visual:hover .av-frame .glare{opacity:1}
  .av-photo{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transform:translateZ(0)}
  .av-corner{position:absolute;z-index:2;width:26px;height:26px;border:1.5px solid var(--accent);opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35))}
  .av-c-tl{top:16px;left:16px;border-right:0;border-bottom:0}
  .av-c-br{bottom:16px;right:16px;border-left:0;border-top:0}
  .av-badge{position:absolute;z-index:2;bottom:16px;left:16px;font-family:var(--mono);font-size:.7rem;color:var(--text);background:rgba(255,255,255,0.75);backdrop-filter:blur(8px);border:1px solid var(--line-strong);padding:.34rem .65rem;border-radius:8px;display:flex;align-items:center;gap:.45em;transform:translateZ(28px)}
  .av-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 8px rgba(150,214,50,0.6);animation:pulse 2.4s infinite}
  .av-chip{position:absolute;z-index:4;font-family:var(--mono);font-size:.76rem;color:var(--text);background:#fff;border:1px solid var(--line-strong);padding:.5rem .85rem;border-radius:999px;box-shadow:0 12px 28px rgba(0,0,0,0.09);display:flex;align-items:center;gap:.45em;white-space:nowrap;will-change:transform;transition:box-shadow .3s}
  .av-chip:hover{box-shadow:0 16px 34px rgba(0,0,0,0.14)}
  .av-chip svg{width:14px;height:14px;stroke:var(--accent-ink);flex-shrink:0}
  .av-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 8px rgba(150,214,50,0.6);animation:pulse 2.4s infinite;flex-shrink:0}
  .chip-loc{top:4%;right:-10%}
  .chip-status{bottom:16%;left:-12%}
  .chip-focus{top:48%;right:-16%}

  /* hero footer meta bar */
  .hero-meta{position:relative;z-index:2;width:min(calc(100% - 44px),var(--frame));margin:0 auto;padding:1.4rem clamp(28px,5vw,80px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--muted-2);letter-spacing:.04em}
  .hero-meta .r{display:flex;align-items:center;gap:.5em}
  .hero-meta .r svg{width:14px;height:14px;stroke:var(--accent-ink)}

  /* ===== shared section system ===== */
  .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s}
  .reveal.show{opacity:1;transform:none;filter:none}
  .areas .area.reveal:nth-child(2){transition-delay:.09s}
  .areas .area.reveal:nth-child(3){transition-delay:.18s}
  .about-body p.reveal:nth-child(2){transition-delay:.08s}
  .about-body p.reveal:nth-child(3){transition-delay:.16s}
  section.block{position:relative;z-index:2;border-top:1px solid var(--line);padding:clamp(80px,10vw,140px) 0;background:var(--sec-1)}
  /* escada tonal: cada seção um tom mais escura que a anterior */
  #sobre{background:var(--sec-1)}
  #stack{background:var(--sec-2)}
  #experiencia{background:var(--sec-3)}
  #projetos{background:var(--sec-4);border-top-color:rgba(0,0,0,0.08)}
  /* #nicolas e #contato definem seu fundo escuro mais abaixo, junto dos ajustes de contraste */
  .container{width:min(calc(100% - 44px),var(--frame));margin:0 auto;padding:0 clamp(28px,5vw,80px)}
  .sec-eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:.8em;margin-bottom:2.6rem}
  .sec-eyebrow b{color:var(--accent-ink);font-weight:500}
  .sec-eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:160px}

  /* about */
  .about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
  .about-lead{font-family:var(--sans);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:1.9rem;color:var(--text)}
  .about-lead .accent{color:var(--accent-ink);position:relative}
  .reveal.about-lead.show .accent::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;background:rgba(150,214,50,0.22);z-index:-1;border-radius:2px;transform:scaleX(0);transform-origin:left;animation:drawline .7s cubic-bezier(.16,1,.3,1) .35s forwards}
  @keyframes drawline{to{transform:scaleX(1)}}
  .about-body p{color:var(--muted);font-size:1.05rem;line-height:1.72;margin-bottom:1.15rem;max-width:560px}
  .about-body p b{color:var(--text);font-weight:500}

  /* focus areas */
  .areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(3rem,6vw,4.5rem)}
  .area{border:1px solid var(--line);border-radius:16px;padding:1.9rem;background:var(--bg);transition:.3s}
  .area:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.06)}
  .area .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(150,214,50,0.12);border:1px solid rgba(150,214,50,0.28);margin-bottom:1.3rem;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .area:hover .ico{transform:scale(1.08) rotate(-4deg)}
  .area .ico svg{width:22px;height:22px;stroke:var(--accent-ink);stroke-width:1.75}
  .area h4{font-family:var(--sans);font-size:1.12rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.55rem}
  .area p{color:var(--muted);font-size:.92rem;line-height:1.58}

  /* stack marquee */
  .stack-head{max-width:600px;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
  .stack-sub{color:var(--muted);font-size:1.05rem;line-height:1.7}
  .marquee{position:relative;width:min(calc(100% - 44px),var(--frame));margin:0 auto;overflow:hidden;padding:1.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .tech{position:relative;display:inline-flex;align-items:center;gap:.75rem;padding:0 clamp(1.7rem,3.2vw,2.8rem);flex-shrink:0;transform:translateZ(0)}
  .tech::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--line)}
  .tech svg{width:30px;height:30px;fill:var(--muted-2);transition:fill .35s;flex-shrink:0;will-change:fill}
  .tech span{font-family:var(--sans);font-size:1.06rem;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .35s;letter-spacing:-.01em}
  .tech:hover svg{fill:var(--brand)}
  .tech:hover span{color:var(--text)}

  /* experience timeline */
  .exp-head{max-width:640px}
  .timeline{position:relative;max-width:920px;margin:clamp(3rem,6vw,4.8rem) auto 0}
  .tl-rail{position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);background:var(--line);border-radius:2px}
  .tl-progress{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--accent-ink),var(--accent));border-radius:2px;box-shadow:0 0 10px rgba(150,214,50,0.45);will-change:height}
  .tl-progress::after{content:"";position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 3px rgba(150,214,50,0.7)}
  .tl-item{position:relative;width:50%;box-sizing:border-box;padding:0 48px;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
  .tl-item:last-child{margin-bottom:0}
  .tl-item.right{margin-left:50%}
  .tl-node{position:absolute;top:26px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong);z-index:3;transition:border-color .4s,background .4s,box-shadow .4s}
  .tl-item.left .tl-node{right:-7.5px}
  .tl-item.right .tl-node{left:-7.5px}
  .tl-node.active{border-color:var(--accent-ink);background:var(--accent);box-shadow:0 0 0 4px rgba(150,214,50,0.14),0 0 14px rgba(150,214,50,0.6)}
  .tl-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:1.5rem;text-align:left;box-shadow:0 12px 34px rgba(0,0,0,0.05);opacity:0;filter:blur(7px);transform-style:preserve-3d;will-change:transform;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),filter .85s,border-color .3s,box-shadow .3s}
  .tl-item.left .tl-card{transform:translateX(-44px) translateY(14px)}
  .tl-item.right .tl-card{transform:translateX(44px) translateY(14px)}
  .tl-item.show .tl-card{opacity:1;transform:none;filter:none}
  .tl-card:hover{border-color:var(--accent-ink);box-shadow:0 28px 56px rgba(0,0,0,0.12),0 12px 30px rgba(150,214,50,0.14)}
  .tl-card-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem}
  .tl-logo{width:48px;height:48px;border-radius:11px;overflow:hidden;flex-shrink:0;border:1px solid var(--line);background:#fff;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .tl-card:hover .tl-logo{transform:scale(1.08) rotate(-3deg)}
  .tl-logo img{width:100%;height:100%;object-fit:cover;display:block}
  .tl-title h4{font-family:var(--sans);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
  .tl-company{font-family:var(--mono);font-size:.8rem;color:var(--text);margin-top:.2rem}
  .tl-company span{color:var(--accent-ink)}
  .tl-meta{font-family:var(--mono);font-size:.73rem;color:var(--muted-2);margin-bottom:.95rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
  .tl-meta i{width:3px;height:3px;border-radius:50%;background:var(--muted-2);display:inline-block}
  .tl-desc{color:var(--muted);font-size:.92rem;line-height:1.62;margin-bottom:1.1rem}
  .tl-tags{display:flex;flex-wrap:wrap;gap:.42rem}
  .tl-tags span{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);padding:.26rem .58rem;border-radius:6px;background:var(--bg)}
  .tl-tags span.more{color:var(--accent-ink);border-color:rgba(150,214,50,0.3);background:rgba(150,214,50,0.08)}

  /* projects */
  .projects-grid{margin-top:clamp(3rem,6vw,4.5rem);perspective:1500px}
  .proj-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
  .proj-card{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .3s;box-shadow:0 10px 30px rgba(0,0,0,0.05);will-change:transform}
  .proj-card:hover{border-color:var(--accent-ink);box-shadow:0 40px 80px rgba(0,0,0,0.14),0 16px 38px rgba(150,214,50,0.16)}
  .glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,0.55),transparent 45%);mix-blend-mode:overlay}
  .proj-card:hover .glare{opacity:1}
  .proj-main{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch}
  .pm-content{padding:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transform:translateZ(46px)}
  .pm-content h3{font-family:var(--sans);font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:600;letter-spacing:-.03em;margin:.55rem 0 .15rem}
  .pm-image{position:relative;display:flex;padding:22px;transform:translateZ(20px)}
  .pm-frame{position:relative;flex:1;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,0.09)}
  .pm-frame img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .proj-main:hover .pm-frame img{transform:scale(1.04)}
  .proj-sm{display:flex;flex-direction:column;height:100%}
  .ps-image{padding:16px;transform:translateZ(16px)}
  .ps-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,0.08)}
  .ps-frame img{width:100%;display:block;aspect-ratio:2/1;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .proj-sm:hover .ps-frame img{transform:scale(1.06)}
  .ps-content{padding:1.7rem;display:flex;flex-direction:column;align-items:flex-start;flex:1;transform:translateZ(38px)}
  .ps-content h4{font-family:var(--sans);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin:.55rem 0 .55rem}
  .proj-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .proj-badge{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;display:inline-flex;align-items:center;gap:.4em}
  .proj-badge.main{color:#141613;background:var(--accent);font-weight:500;box-shadow:0 2px 10px rgba(150,214,50,0.3)}
  .proj-badge.alt{color:var(--accent-ink);background:rgba(150,214,50,0.1);border:1px solid rgba(150,214,50,0.28)}
  .proj-badge.status{color:var(--accent-ink);background:rgba(150,214,50,0.08);border:1px dashed rgba(150,214,50,0.42)}
  .proj-tagline{font-family:var(--mono);font-size:.82rem;color:var(--accent-ink);margin-bottom:1rem}
  .proj-card p{color:var(--muted);font-size:.96rem;line-height:1.62;margin-bottom:1.2rem}
  .proj-tags{display:flex;flex-wrap:wrap;gap:.42rem;margin-bottom:1.5rem}
  .proj-tags span{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);padding:.26rem .58rem;border-radius:6px;background:var(--bg)}
  .proj-btn{font-family:var(--mono);font-size:.82rem;padding:.7rem 1.15rem;border-radius:10px;border:1px solid var(--line-strong);color:var(--text);display:inline-flex;align-items:center;gap:.5em;transition:.22s;margin-top:auto}
  .proj-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink);background:rgba(150,214,50,0.06)}
  .proj-btn svg{width:14px;height:14px}
  .proj-main .btn-primary{margin-top:.4rem}
  .proj-main .btn-primary svg{width:15px;height:15px}

  /* nicolas — AI assistant (dark spotlight section) */
  #nicolas.block{background:var(--sec-5);border-top-color:rgba(255,255,255,0.06)}
  #nicolas .sec-eyebrow{color:rgba(255,255,255,0.42)}
  #nicolas .sec-eyebrow b{color:var(--accent)}
  #nicolas .sec-eyebrow::after{background:rgba(255,255,255,0.12)}
  #nicolas .about-lead{color:#f1f3f0}
  #nicolas .about-lead .accent{color:var(--accent)}
  .nic-sub{color:rgba(255,255,255,0.6);font-size:1.05rem;line-height:1.7;max-width:600px;margin-top:1rem}
  .nic-note{font-family:var(--mono);font-size:.76rem;color:rgba(255,255,255,0.4);text-align:center;margin-top:1.7rem}
  .terminal{max-width:820px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;background:#0e110e;box-shadow:0 30px 80px rgba(0,0,0,0.55)}
  .term-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;background:#141814;border-bottom:1px solid rgba(255,255,255,0.08)}
  .term-bar .d{width:11px;height:11px;border-radius:50%}
  .term-bar .d1{background:#ff5f56}.term-bar .d2{background:#ffbd2e}.term-bar .d3{background:#27c93f}
  .term-title{font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,0.5);margin-left:.5rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .term-status{font-family:var(--mono);font-size:.72rem;color:var(--accent);display:flex;align-items:center;gap:.4em;white-space:nowrap}
  .term-status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s infinite}
  .term-body{height:400px;overflow-y:auto;padding:1.3rem;font-family:var(--mono);font-size:.9rem;display:flex;flex-direction:column;gap:1.1rem}
  .term-body::-webkit-scrollbar{width:8px}.term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.13);border-radius:4px}
  .msg{display:flex;flex-direction:column;gap:.35rem;max-width:90%;animation:msgIn .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes msgIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
  .msg .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
  .msg.user{align-self:flex-end;align-items:flex-end}
  .msg.user .who{color:var(--accent);opacity:.85}
  .msg.user .bubble{color:#eef1ec;background:rgba(198,248,77,0.08);border:1px solid rgba(198,248,77,0.22);padding:.6rem .85rem;border-radius:10px 10px 3px 10px;line-height:1.55}
  .msg.nic .who b{color:var(--accent);font-weight:500}
  .msg.nic .bubble{color:#dde1db;line-height:1.6;white-space:pre-wrap;word-break:break-word}
  .typing{display:inline-flex;gap:.28rem;align-items:center;padding:.2rem 0}
  .typing span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:nicblink 1.2s infinite}
  .typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}
  @keyframes nicblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
  .term-suggest{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.3rem 1.1rem}
  .term-suggest .chip{font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.14);padding:.42rem .78rem;border-radius:999px;cursor:pointer;transition:.2s;background:transparent}
  .term-suggest .chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(198,248,77,0.06)}
  .term-input{display:flex;align-items:center;gap:.65rem;padding:.85rem 1.1rem;border-top:1px solid rgba(255,255,255,0.08);background:#141814}
  .term-input .prompt{font-family:var(--mono);color:var(--accent);font-weight:700}
  .term-input input{flex:1;background:none;border:0;outline:0;color:#f1f3f0;font-family:var(--mono);font-size:.9rem}
  .term-input input::placeholder{color:rgba(255,255,255,0.32)}
  .term-send{background:var(--accent);color:#0b0d0b;border:0;width:34px;height:34px;border-radius:9px;cursor:pointer;display:grid;place-items:center;transition:.2s;flex-shrink:0}
  .term-send:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(198,248,77,0.35)}
  .term-send:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
  .term-send svg{width:16px;height:16px}

  /* contact (dark finale) */
  #contato.block{background:var(--sec-6);border-top-color:rgba(255,255,255,0.07);position:relative;overflow:hidden}
  #contato .spotlight{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px circle at var(--sx,70%) var(--sy,28%),rgba(198,248,77,0.10),transparent 62%)}
  #contato .container{position:relative;z-index:1}
  #contato .sec-eyebrow{color:rgba(255,255,255,0.42)}
  #contato .sec-eyebrow b{color:var(--accent)}
  #contato .sec-eyebrow::after{background:rgba(255,255,255,0.12)}
  .contact-title{font-family:var(--sans);font-weight:600;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.98;letter-spacing:-.04em;color:#f4f6f3;max-width:900px}
  .contact-title .accent{color:var(--accent);font-style:italic;font-weight:500}
  .contact-sub{color:rgba(255,255,255,0.58);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;max-width:540px;margin-top:1.5rem}
  .contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:clamp(2.6rem,5vw,3.6rem)}
  .ccard{position:relative;display:flex;align-items:center;gap:1.2rem;padding:1.8rem;border-radius:18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);overflow:hidden;transition:border-color .3s,background .3s;will-change:transform}
  .ccard:hover{border-color:rgba(198,248,77,0.4);background:rgba(198,248,77,0.04)}
  .ccard-glow{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--cx,50%) var(--cy,50%),rgba(198,248,77,0.16),transparent 60%);pointer-events:none}
  .ccard:hover .ccard-glow{opacity:1}
  .ccard-ico{position:relative;z-index:1;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(198,248,77,0.1);border:1px solid rgba(198,248,77,0.28);flex-shrink:0;color:var(--accent);transition:transform .3s}
  .ccard:hover .ccard-ico{transform:scale(1.06)}
  .ccard-ico svg{width:26px;height:26px}
  .ccard-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}
  .ccard-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.45)}
  .ccard-value{font-family:var(--sans);font-size:1.15rem;font-weight:500;color:#f4f6f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ccard-arrow{position:relative;z-index:1;font-size:1.3rem;color:rgba(255,255,255,0.4);transition:transform .3s,color .3s;flex-shrink:0}
  .ccard:hover .ccard-arrow{color:var(--accent);transform:translate(4px,-4px)}
  .contact-socials{display:flex;gap:1.6rem;margin-top:2.4rem;align-items:center;flex-wrap:wrap}
  .contact-socials a{font-family:var(--mono);font-size:.85rem;color:rgba(255,255,255,0.55);display:inline-flex;align-items:center;gap:.55em;transition:color .2s}
  .contact-socials a:hover{color:var(--accent)}
  .contact-socials svg{width:17px;height:17px;fill:currentColor}
  footer{background:#0b0d0b;border-top:1px solid rgba(255,255,255,0.09);padding:2.4rem 0;position:relative;z-index:2}
  footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
  .foot-logo{font-family:var(--mono);font-weight:500;font-size:.95rem;color:#f4f6f3}
  .foot-logo b{color:var(--accent)}
  .foot-copy{font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,0.35)}

  @media(max-width:840px){
    .contact-cards{grid-template-columns:1fr}
    .ccard{transform:none!important}
    .ccard-value{font-size:1.05rem}
    .term-body{height:346px}
    .term-title{font-size:.66rem}
    .projects-grid{perspective:none}
    .proj-card{transform:none!important}
    .proj-main{grid-template-columns:1fr}
    .pm-image{order:-1;padding:16px}
    .pm-frame img{aspect-ratio:16/10}
    .pm-content,.pm-image,.pm-frame,.ps-image,.ps-frame,.ps-content{transform:none}
    .proj-row{grid-template-columns:1fr}
    .timeline{max-width:100%}
    .tl-rail{left:7px}
    .tl-item,.tl-item.right{width:100%;margin-left:0;padding:0 0 0 42px}
    .tl-item.left .tl-node,.tl-item.right .tl-node{left:.5px;right:auto}
    .tl-item.left .tl-card,.tl-item.right .tl-card{transform:translateX(28px) translateY(12px)}
    .tl-item.show .tl-card{transform:none}
    .about-grid{grid-template-columns:1fr;gap:2.6rem}
    /* foto em cima e chips numa linha centralizada que quebra sozinha */
    .about-visual{flex-flow:row wrap;justify-content:center;align-items:center;gap:.55rem}
    .av-ring{display:none}
    .av-frame{flex:0 0 100%;margin-bottom:.6rem}
    .av-chip{position:static;margin:0;box-shadow:0 6px 16px rgba(0,0,0,0.07)}
    .areas{grid-template-columns:1fr}
    .tech{padding:0 1.4rem;gap:.6rem}
    .tech svg{width:26px;height:26px}
    .tech span{font-size:.98rem}
    .hero-wrap{grid-template-columns:1fr;gap:2.4rem;padding-top:130px;padding-bottom:40px}
    header{min-height:auto}
    .nav-logo{font-size:.82rem;padding:0 .5rem}
    .hero-meta{display:none}
    header::after{background:radial-gradient(120% 120% at 50% 100%,transparent 55%,rgba(0,0,0,0.04))}

    /* wireframe mais transparente para não atrapalhar a leitura */
    #scene{opacity:.4}

    /* Mobile navigation improvements */
    nav{top:12px;padding:.45rem .55rem;gap:.25rem;max-width:calc(100% - 24px)}
    .nav-logo{display:none}
    .nav-div{display:none}
    .nav-ico{width:44px;height:44px}
    .nav-ico svg{width:20px;height:20px}
    .nav-ico .tip{display:none}
    .lang-menu{top:52px}
    .lang-code{font-size:.68rem}
  }

  @media(max-width:480px){
    nav{max-width:calc(100% - 12px);padding:.35rem .3rem;gap:0}
    .nav-ico{width:36px;height:36px;flex-shrink:0}
    .nav-ico svg{width:17px;height:17px;stroke-width:1.9}
    .lang-code{font-size:.6rem}
    /* o botão de idioma fica perto da borda direita da nav — ancora o dropdown pela direita para não sair da tela */
    .lang-menu{left:auto;right:0;transform:translateY(4px)}
    .lang-menu.open{transform:translateY(0)}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    h1.hero .line{transform:none}
    nav{transform:translateX(-50%)}
    .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
    .reveal{opacity:1;transform:none;filter:none}
  }