:root{
      --bg-900:#0b1220;        /* fundo principal (dark) */
      --bg-800:#101a2e;        /* painéis/cards */
      --bg-700:#122036;        /* hover/nav */
      --txt-100:#ecf1f8;       /* texto principal */
      --txt-300:#b8c2d6;       /* texto secundário */
      --brand-1:#2d9cdb;       /* azul Integry */
      --brand-2:#4fd26d;       /* verde Integry */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
      --speed:220ms;
    }

    /* RESET BÁSICO */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--txt-100); background:
        radial-gradient(1200px 800px at 10% -10%, #14223c 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 20%, #12243f 0%, transparent 60%),
        var(--bg-900);
      background-repeat: no-repeat;
      background-size: cover;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji","Segoe UI Emoji";
      scroll-behavior: smooth;
    }
    h1,h2,h3{margin:0 0 .6rem}
    h1{font-size: clamp(1.8rem, 3vw + .5rem, 3rem)}
    h2{font-size: clamp(1.3rem, 1.4vw + .6rem, 2rem)}
    p{margin:0 0 1rem;color:var(--txt-300)}

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* LAYOUT PRINCIPAL (SIDE NAV + CONTENT) */
    .app{
      display:grid;
      grid-template-columns: 300px 1fr;
      min-height:100dvh;
    }
    @media (max-width: 980px){
      .app{grid-template-columns: 1fr}
    }

    /* SIDE NAV */
    .sidenav{
      position: sticky; top:0; height:100dvh;
      background: linear-gradient(180deg, #0f1a2d 0%, #0b1220 100%);
      border-right: 1px solid rgba(255,255,255,.05);
      padding: 28px 22px;
      display:flex; flex-direction:column; gap:22px;
    }
    @media (max-width:980px){
      .sidenav{
        position:relative;height:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.06);
        padding: 12px 16px;
      }
    }

    .brand{
      display:flex; gap:12px; align-items:center;
    }
    .brand img{
      width:40px;border-radius:10px; box-shadow: var(--shadow)
    }
    .brand .title{
      display:flex;flex-direction:column;line-height:1.1;
    }
    .brand b{letter-spacing:.2px}
    .brand small{color:var(--txt-300)}

    .nav{
      margin-top:10px; display:flex; flex-direction:column; gap:4px;
    }
    .nav a{
      padding:12px 12px; border-radius:12px; color:var(--txt-300);
      display:flex; align-items:center; gap:10px;
      transition: background var(--speed), color var(--speed), transform var(--speed);
    }
    .nav a svg{opacity:.7; flex:0 0 20px}
    .nav a:hover{background:var(--bg-700); color:var(--txt-100); transform: translateX(2px)}
    .nav a.active{background:linear-gradient(90deg, rgba(77,208,121,.18), rgba(45,156,219,.18)); color:var(--txt-100);}

    .social{
      margin-top:auto; display:flex; gap:10px; flex-wrap:wrap
    }
    .chip{
      background:var(--bg-800); border:1px solid rgba(255,255,255,.06); color:var(--txt-300);
      padding:8px 12px; border-radius:999px; font-size:.9rem
    }

    /* TOGGLE (MOBILE) */
    .toggle{
      display:none; margin-left:auto; border:0; background:var(--bg-800); color:var(--txt-100);
      border-radius:12px; padding:10px; box-shadow:var(--shadow)
    }
    @media (max-width:980px){ .toggle{display:block} .nav{display:none} .nav.open{display:flex} }

    /* CONTENT */
    .content{padding: 48px 48px 72px; max-width: 1200px; width:100%; margin:0 auto}
    @media (max-width:980px){ .content{padding:20px} }

    section{
      scroll-margin-top:24px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.06);
      border-radius: var(--radius);
      padding: 36px;
      margin-bottom: 26px;
      backdrop-filter: blur(2px);
      box-shadow: var(--shadow);
    }
    .muted{color:var(--txt-300)}
    .tag{
      display:inline-block; font-size:.8rem; padding:.35rem .6rem; border-radius:999px;
      border:1px solid rgba(255,255,255,.15); color:var(--txt-300); margin: 0 .3rem .3rem 0;
    }

    /* HERO */
    .hero{
      display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center;
      background:
        radial-gradient(400px 300px at 80% -20%, rgba(79,210,109,.20), transparent 70%),
        radial-gradient(550px 420px at -20% 120%, rgba(45,156,219,.18), transparent 60%),
        rgba(255,255,255,.02);
    }
    .hero h1{line-height:1.15}
    .hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
    .btn{
      appearance:none; border:0; cursor:pointer; padding:12px 18px; border-radius:12px; font-weight:600;
      color:#081320; background: linear-gradient(135deg, var(--brand-2), var(--brand-1));
      box-shadow: 0 8px 24px rgba(45,156,219,.35);
    }
    .btn.ghost{
      background:transparent; color:var(--txt-100);
      border:1px solid rgba(255,255,255,.2)
    }

    /* GRIDs */
    .grid{display:grid; gap:18px}
    .g-3{grid-template-columns: repeat(3, minmax(0,1fr))}
    .g-2{grid-template-columns: repeat(2, minmax(0,1fr))}
    @media (max-width:980px){ .g-3,.g-2{grid-template-columns: 1fr} }

    .card{
      background:var(--bg-800); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px;
    }

    /* TIMELINE */
    .timeline{position:relative; padding-left:22px}
    .timeline:before{content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand-1), var(--brand-2))}
    .tl-item{position:relative; margin:0 0 22px}
    .tl-item:before{
      content:''; position:absolute; left:-3px; top:6px; width:14px; height:14px; border-radius:50%;
      background: linear-gradient(135deg, var(--brand-2), var(--brand-1)); box-shadow:0 0 0 4px rgba(77,208,121,.15)
    }

    /* PORTFÓLIO */
    .work{display:flex; gap:14px; align-items:center}
    .shot{
      flex:0 0 96px; height:72px; border-radius:12px; background:#0b1a2c url('IntegrySoftAssets/logo-vertical.png') center/contain no-repeat;
      border:1px solid rgba(255,255,255,.06)
    }

    /* FORM */
    label{display:block; font-weight:600; margin:.6rem 0 .2rem}
    input, textarea{
      width:100%; padding:12px 14px; border-radius:12px; background:#0d1930; color:var(--txt-100);
      border:1px solid rgba(255,255,255,.12); outline:none;
    }
    textarea{min-height:140px; resize:vertical}

    /* FOOTER */
    .footer{display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--txt-300)}
    @media (max-width:640px){ .footer{flex-direction:column; gap:8px; align-items:flex-start} }

    /* ACTIVE SECTION highlight in left nav */
    .nav a.active .dot{opacity:1; transform:scale(1)}
    .dot{
      width:8px;height:8px;border-radius:50%; background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
      opacity:.0; transform:scale(.4); transition: all var(--speed);
    }
    
    /* =========================
       UPGRADE TIPOGRAFIA & RESPIRO
       ========================= */
    .lead { font-size: clamp(1rem, .35vw + 1rem, 1.125rem); color: var(--txt-100); }
    .lh-relaxed { line-height: 1.75; }
    .section-title { margin-bottom: 1rem; }
    .section-subtitle { color: var(--txt-300); margin: -.4rem 0 1.2rem; }
    .section-spacer { margin-top: 10px; margin-bottom: 22px; }
    
    /* aumenta um pouco a hierarquia do h1 sem quebrar */
    .hero h1 { font-weight: 800; letter-spacing: .2px; }
    
    /* =========================
       CTA (BOTÕES)
       ========================= */
    .btn { transition: transform var(--speed), box-shadow var(--speed), filter var(--speed); }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(45,156,219,.45); filter: saturate(1.1); }
    .btn:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(45,156,219,.35); }
    .btn.ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); }
    
    /* =========================
       CARDS (efeitos visuais)
       ========================= */
    .card--elevated { transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); }
    .card--elevated:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.45); border-color: rgba(255,255,255,.14); }
    
    /* cards compactos (ex.: missão/visão/valores) */
    .card--compact { padding: 16px; }
    .card__title { font-weight: 700; color: var(--txt-100); margin-bottom: .35rem; display: flex; align-items: center; gap: 8px; }
    .card__icon { width: 22px; height: 22px; opacity: .9; }
    
    /* =========================
       MISSÃO / VISÃO / VALORES
       ========================= */
    /* sugerido usar <div class="card card--compact card--elevated">  */
    .mvv { display: grid; gap: 14px; }
    
    /* efeito sutil no hover */
    .mvv .card--compact:hover { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); }
    
    /* =========================
       SOCIAL (logos nos chips)
       ========================= */
    .social { gap: 8px; }
    .chip.icon { padding: 8px; width: 38px; height: 38px; display: grid; place-items: center; }
    .chip.icon img, .chip.icon svg { width: 20px; height: 20px; display: block; }
    .chip.icon:hover { background: var(--bg-700); border-color: rgba(255,255,255,.2); transform: translateY(-1px); transition: all var(--speed); }
    
    /* =========================
       TIMELINE (com mini logo opcional)
       ========================= */
    .tl-item { padding-left: 8px; }
    .tl-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: flex-start; }
    .tl-logo {
      width: 36px; height: 36px; border-radius: 10px;
      background: #0c1830 center/cover no-repeat;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow);
    }
    .tl-body b { display: inline-block; margin-bottom: 2px; }
    .tl-meta { display: block; color: var(--txt-300); font-size: .92rem; margin-bottom: .35rem; }
    
    /* variante visual para alternar linhas (opcional) */
    .tl-item.alt { background: rgba(255,255,255,.015); border-radius: 12px; padding: 12px; }
    
    /* =========================
       PORTFÓLIO (hover e consistência)
       ========================= */
    .work { transition: transform var(--speed), background var(--speed), border-color var(--speed); }
    .work:hover { transform: translateY(-2px); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
    .shot { transition: border-color var(--speed), filter var(--speed); }
    .work:hover .shot { border-color: rgba(255,255,255,.18); filter: saturate(1.15); }
    
    /* =========================
       SECTION SPACING & READABILITY
       ========================= */
    section { padding: 42px; }
    @media (max-width:980px){ section { padding: 26px; } }
    .content { max-width: 1200px; }
    
    /* texto melhor de ler em blocos maiores */
    p, .muted { line-height: 1.7; }
    
    /* =========================
       NAV (pequenos refinamentos)
       ========================= */
    .nav a { border: 1px solid transparent; }
    .nav a:hover { border-color: rgba(255,255,255,.08); }
    .nav a.active { border-color: rgba(255,255,255,.14); }
    
    /* dot mais presente no ativo */
    .dot { box-shadow: 0 0 0 4px rgba(77,208,121,.0); }
    .nav a.active .dot { box-shadow: 0 0 0 4px rgba(77,208,121,.25); }
    
    /* =========================
       UTILITÁRIOS
       ========================= */
    .mt-0{margin-top:0!important} .mt-1{margin-top:.25rem!important} .mt-2{margin-top:.5rem!important} .mt-3{margin-top:1rem!important}
    .mb-0{margin-bottom:0!important} .mb-1{margin-bottom:.25rem!important} .mb-2{margin-bottom:.5rem!important} .mb-3{margin-bottom:1rem!important}
    .center-y{display:flex;align-items:center}
    .center{display:grid;place-items:center}
    .w-100{width:100%}
    
    /* =========================
       IMPACTO NO HERO (opcional)
       ========================= */
    .hero { border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); }
    .hero .tag { background: rgba(255,255,255,.06); border-color: transparent; }
    
    /* =========================
       AJUSTES MOBILE
       ========================= */
    @media (max-width:480px){
      .brand img{ width:34px; }
      .chip.icon { width: 36px; height: 36px; }
      .hero .cta { gap: 10px; }
    }
    
    /* ===== Portfolio thumbs grandes ===== */
    .work--stack { display:flex; flex-direction:column; }
    .shot-cover{
      width:100%;
      height: clamp(160px, 22vw, 160px);
      border-radius: 12px;
      background: #0b1a2c center/cover no-repeat;
      border: 1px solid rgba(255,255,255,.06);
      transition: border-color var(--speed), filter var(--speed), transform var(--speed);
    }
    .work:hover .shot-cover{
      border-color: rgba(255,255,255,.18);
      filter: saturate(1.12);
      transform: translateY(-1px);
    }
    
    /* ===== Modal Lightbox ===== */
    .modal {
      display: none; /* escondido por padrão */
      position: fixed;
      z-index: 9999;
      padding-top: 60px;
      left: 0; top: 0;
      width: 100%; height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.9);
      backdrop-filter: blur(4px);
    }
    
    .modal-content {
      margin: auto;
      display: block;
      max-width: 85%;
      max-height: 80vh;
      border-radius: 12px;
      box-shadow: 0 0 25px rgba(0,0,0,.6);
      animation: zoomIn .3s ease;
    }
    
    @keyframes zoomIn {
      from {transform: scale(.7); opacity:.4;}
      to {transform: scale(1); opacity:1;}
    }
    
    .modal-close {
      position: absolute;
      top: 20px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
      cursor: pointer;
    }
    
    .modal-close:hover { color: var(--brand-2); }