:root{
      --bg:#0a0a0c;         /* fundo mais escuro */
      --panel:#111114;      /* cartões mais escuros */
      --text:#f5f5f7;       /* texto principal mais claro */
      --muted:#a5a5b2;      /* texto secundário */
      --brand:#f5c44f;      /* dourado inspirado GBR */
      --brand-2:#d4a837;    /* hover dourado */
      --brand-dark:#8b6b1f; /* contraste escuro */
      --line: rgba(255,255,255,.06);
      --line-strong: rgba(255,255,255,.12);
      --maxw:1200px;
      --radius:20px;
      --shadow:0 20px 60px rgba(0,0,0,.4);
      --shadow-strong:0 40px 120px rgba(0,0,0,.6);
    }
    
    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }
    
    html,body{
      height:100%;
      scroll-behavior:smooth;
    }
    
    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
      background:
        radial-gradient(1400px 800px at 90% -20%, rgba(245,196,79,.08), transparent 70%),
        radial-gradient(1200px 600px at -20% 20%, rgba(139,107,31,.06), transparent 70%),
        var(--bg);
      color:var(--text);
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    
    a{color:inherit; text-decoration:none; transition:all .3s ease}
    img{max-width:100%; display:block; border-radius:12px}
    button{font-family:inherit}

    /* Container */
    .container{max-width:var(--maxw); margin-left:340px; padding:0 24px}

    /* Navbar */
    .nav{
      position:fixed; 
      top:0; 
      left:0;
      right:0;
      z-index:100; 
      backdrop-filter:saturate(1.8) blur(20px);
      /*background:rgba(10,10,12,.85); */
      /*border-bottom:1px solid var(--line);*/
      transition:all .3s ease;
    }
    
    .nav.scrolled{
      background:rgba(10,10,12,.95);
      border-bottom-color:var(--line-strong);
    }
    
    .nav-inner{
      display:flex; 
      align-items:center; 
      justify-content:space-between; 
      gap:24px; 
      padding:16px 0;
      max-width:var(--maxw);
      margin:0 auto;
      padding-left:24px;
      padding-right:24px;
    }
    
    .brand{
      display:flex; 
      align-items:center; 
      gap:14px; 
      font-weight:700;
      font-size:18px;
    }
    
    .brand-mark{
      width:32px; 
      height:32px; 
      border-radius:10px; 
      background:linear-gradient(135deg,var(--brand),#fff2cc); 
      box-shadow:0 6px 20px rgba(245,196,79,.4);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
    }
    
    .nav-links{
      display:flex; 
      gap:8px; 
      align-items:center;
    }
    
    .nav-links a{
      padding:12px 16px; 
      border-radius:14px; 
      border:1px solid transparent;
      font-weight:500;
      transition:all .3s ease;
    }
    
    .nav-links a:hover{
      border-color:var(--line-strong); 
      background:rgba(255,255,255,.04);
      transform:translateY(-1px);
    }
    
    .cta{
      padding:12px 20px; 
      border-radius:16px; 
      background:linear-gradient(135deg, var(--brand), var(--brand-2)); 
      color:#1a1a1a; 
      font-weight:700;
      font-size:14px;
      box-shadow:0 8px 24px rgba(245,196,79,.4);
      transition:all .3s ease;
      border:none;
      cursor:pointer;
    }
    
    .cta:hover{
      background:linear-gradient(135deg, var(--brand-2), var(--brand));
      transform:translateY(-2px);
      box-shadow:0 12px 36px rgba(245,196,79,.5);
    }

    /* Mobile menu */
    .menu-btn{
      display:none; 
      border:1px solid var(--line-strong); 
      background:rgba(255,255,255,.05); 
      color:var(--text); 
      padding:10px 14px; 
      border-radius:14px;
      cursor:pointer;
      transition:all .3s ease;
    }
    
    .menu-btn:hover{
      background:rgba(255,255,255,.08);
    }
    
    @media (max-width:900px){
      .nav-links{display:none}
      .menu-btn{display:inline-flex}
      .nav.open .nav-links{
        display:flex; 
        position:absolute; 
        left:24px; 
        right:24px; 
        top:70px; 
        flex-direction:column; 
        background:rgba(17,17,20,.98); 
        padding:20px; 
        border:1px solid var(--line-strong);
        border-radius:var(--radius);
        backdrop-filter:blur(20px);
        box-shadow:var(--shadow);
      }
      .nav.open .nav-links a{padding:16px; border-radius:14px}
    }

    /* Hero */
    .hero {
        padding:120px 0 80px; 
        position:relative; 
        overflow:hidden;
        min-height:100vh;
        display:flex;
        align-items:center;
        background-image: url('../img/rui.jpeg');
        background-size: cover;         /* cobre todo o container */
        background-position: center right ; /* centro na vertical, direita na horizontal */
        background-repeat: no-repeat;
        background-position-x: 340px;
        
    }

    
    .hero::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:
        linear-gradient(89deg, rgb(0 0 0) 0%, rgb(0 0 0 / 87%) 60%, rgba(10, 10, 12, .4) 100%), radial-gradient(circle at 20% 50%, rgb(0 0 0), transparent 70%);      
        
      pointer-events:none;
    }
    
    .hero-grid{
      display:grid; 
      grid-template-columns:1fr; 
      gap:60px; 
      align-items:center;
      position:relative;
      z-index:2;
      max-width: 700px;
    }
    
    .eyebrow{
      display:inline-flex; 
      gap:10px; 
      align-items:center; 
      padding:10px 16px; 
      border:1px solid var(--line-strong); 
      border-radius:999px; 
      color:var(--muted); 
      font-size:14px;
      font-weight:500;
      background:rgba(255,255,255,.02);
      backdrop-filter:blur(10px);
    }
    
    .eyebrow i{
      width:8px; 
      height:8px; 
      border-radius:50%; 
      background:var(--brand);
      animation:pulse 2s infinite;
    }
    
    @keyframes pulse{
      0%, 100%{opacity:1}
      50%{opacity:.5}
    }
    
    .title{
      font-size:45px; 
      line-height:1.1; 
      margin:20px 0;
      font-weight:700;
      letter-spacing:-0.02em;
    }
    
    .subtitle{
      color:var(--muted); 
      font-size:clamp(18px, 2vw, 22px);
      line-height:1.6;
      max-width:600px;
    }
    
    .hero-cta{
      display:flex; 
      gap:16px; 
      margin-top:32px; 
      flex-wrap:wrap;
    }
    
    .ghost{
      padding:12px 20px; 
      border-radius:16px; 
      border:1px solid var(--line-strong); 
      color:var(--text);
      font-weight:600;
      transition:all .3s ease;
      background:rgba(255,255,255,.02);
      backdrop-filter:blur(10px);
    }
    
    .ghost:hover{
      background:rgba(255,255,255,.06);
      border-color:var(--brand);
      transform:translateY(-2px);
    }
    
    .hero-image{
      display: none;
    }
    
    .hero-photo{
      display: none;
    }
    
    .photo-backdrop{
      display: none;
    }
    
    .stats{
      display:grid; 
      grid-template-columns:repeat(3,1fr); 
      gap:16px; 
      margin-top:40px;
    }
    
    .stat{
      padding:20px; 
      border-radius:16px; 
      background:rgba(255,255,255,.03); 
      border:1px solid var(--line); 
      text-align:center;
      backdrop-filter:blur(10px);
      transition:all .3s ease;
    }
    
    .stat:hover{
      background:rgba(255,255,255,.05);
      border-color:var(--line-strong);
      transform:translateY(-2px);
    }
    
    .stat b{
      font-size:28px; 
      display:block;
      color:var(--brand);
      font-weight:700;
    }
    
    .stat span{
      font-size:13px;
      font-weight:500;
    }
    
    @media (max-width:900px){
      .hero-grid{grid-template-columns:1fr}
      .hero::before{
        background:
          linear-gradient(135deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.8) 100%),
          radial-gradient(circle at 50% 50%, rgba(245,196,79,.06), transparent 70%);
      }
      .stats{grid-template-columns:1fr; max-width:300px; margin:40px auto 0}
    }

    /* Sections */
    section{
      padding:100px 0; 
      border-top:1px solid var(--line);
      position:relative;
    }
    
    .section-head{
      display:flex; 
      align-items:end; 
      justify-content:space-between; 
      gap:20px; 
      margin-bottom:40px;
    }
    
    .section-title{
      font-size:clamp(32px, 4vw, 48px); 
      margin:0;
      font-weight:700;
      letter-spacing:-0.01em;
    }
    
    .muted{color:var(--muted)}

    /* Card component */
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line); 
      border-radius:var(--radius); 
      padding:28px; 
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
      transition:all .4s ease;
    }
    
    .card:hover{
      border-color:var(--line-strong);
      box-shadow:var(--shadow-strong);
      transform:translateY(-4px);
    }

    /* Services / Áreas */
    .grid{
      display:grid; 
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); 
      gap:20px;
    }
    
    .tile{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); 
      border:1px solid var(--line); 
      border-radius:var(--radius); 
      padding:24px; 
      display:flex; 
      flex-direction:column; 
      gap:12px; 
      transition:all .4s ease;
      backdrop-filter:blur(10px);
    }
    
    .tile:hover{
      transform:translateY(-6px);
      border-color:var(--line-strong);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }
    
    .pill{
      display:inline-block; 
      padding:8px 14px; 
      border-radius:999px; 
      border:1px solid var(--line); 
      font-size:12px; 
      color:var(--brand);
      font-weight:600;
      background:rgba(245,196,79,.08);
      width:fit-content;
    }
    
    .tile h3{
      margin:4px 0;
      font-size:20px;
      font-weight:600;
    }

    /* Timeline (Sobre) */
    .timeline{
      display:grid; 
      gap:20px;
      max-width:900px;
    }
    
    .t-item{
      display:grid; 
      grid-template-columns:160px 1fr; 
      gap:24px; 
      align-items:start;
    }
    
    .t-item time{
      color:var(--brand);
      font-weight:600;
      font-size:14px;
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(245,196,79,.06);
      text-align:center;
    }
    
    .t-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
      border:1px solid var(--line); 
      border-radius:18px; 
      padding:20px;
      backdrop-filter:blur(10px);
    }
    
    .t-card b{
      display:block;
      margin-bottom:8px;
      font-size:18px;
      font-weight:600;
    }
    
    @media (max-width:700px){
      .t-item{grid-template-columns:1fr}
      .t-item time{width:fit-content}
    }

    /* Destaques de Conteúdo */
    .cards{
      display:grid; 
      grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); 
      gap:24px;
    }
    
    .post{
      overflow:hidden;
      transition:all .3s ease;
    }
    
    .post:hover{
      transform:translateY(-4px);
    }
    
    .post img{
      aspect-ratio:16/9; 
      object-fit:cover; 
      border-radius:16px; 
      border:1px solid var(--line);
      transition:all .3s ease;
    }
    
    .post:hover img{
      border-color:var(--line-strong);
    }
    
    .post h4{
      margin:16px 0 8px;
      font-size:20px;
      font-weight:600;
    }
    
    .post p{
      line-height:1.6;
    }

    /* Callout */
    .callout{
      display:grid; 
      grid-template-columns:1.3fr .7fr; 
      gap:40px; 
      align-items:center;
    }
    
    .badge{
      display:inline-flex; 
      gap:10px; 
      align-items:center; 
      font-weight:600;
      color:var(--brand);
      margin-bottom:12px;
    }
    
    .badge i{
      width:10px; 
      height:10px; 
      background:var(--brand); 
      border-radius:50%;
      animation:pulse 2s infinite;
    }
    
    .callout h3{
      font-size:clamp(28px, 4vw, 42px);
      margin:0 0 12px;
      font-weight:700;
      line-height:1.2;
    }
    
    .callout .card{
      background:linear-gradient(135deg, rgba(245,196,79,.08), rgba(139,107,31,.04));
      border-color:var(--line-strong);
    }
    
    .callout .card h4{
      color:var(--brand);
      margin-bottom:16px;
    }
    
    .callout .card ul{
      margin:16px 0;
      padding-left:20px;
    }
    
    .callout .card li{
      margin-bottom:6px;
    }
    
    @media (max-width:900px){
      .callout{grid-template-columns:1fr}
    }

    /* Forms */
    form{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    
    label{
      font-weight:500;
      margin-bottom:6px;
      display:block;
    }
    
    input, textarea{
      width:100%; 
      padding:14px 16px; 
      border-radius:14px; 
      border:1px solid var(--line); 
      background:rgba(255,255,255,.02); 
      color:var(--text);
      font-family:inherit;
      transition:all .3s ease;
      backdrop-filter:blur(10px);
    }
    
    input:focus, textarea:focus{
      outline:none;
      border-color:var(--brand);
      background:rgba(255,255,255,.04);
      box-shadow:0 0 0 3px rgba(245,196,79,.1);
    }
    
    input::placeholder, textarea::placeholder{
      color:var(--muted);
    }

    /* Footer */
    footer{
      padding:60px 0; 
      border-top:1px solid var(--line); 
      color:var(--muted);
      background:rgba(255,255,255,.01);
    }
    
    .footer-grid{
      display:grid; 
      grid-template-columns:1.2fr .8fr; 
      gap:24px;
      align-items:center;
    }
    
    .social{
      display:flex; 
      gap:12px; 
      flex-wrap:wrap;
    }
    
    .social a{
      padding:12px 16px; 
      border:1px solid var(--line); 
      border-radius:14px;
      transition:all .3s ease;
      background:rgba(255,255,255,.02);
    }
    
    .social a:hover{
      border-color:var(--brand);
      background:rgba(245,196,79,.08);
      color:var(--brand);
    }
    
    @media (max-width:900px){
      .footer-grid{grid-template-columns:1fr}
    }

    /* Utilities */
    .hide{display:none}
    .center{display:flex; justify-content:center; align-items:center}
    .accent{color:var(--brand); font-weight:600}
    .divider{height:1px; background:var(--line); margin:24px 0}
    
    .reveal{
      opacity:0; 
      transform:translateY(20px); 
      transition:opacity .8s ease, transform .8s ease;
    }
    
    .reveal.show{
      opacity:1; 
      transform:none;
    }

    /* Scroll to top button */
    .scroll-top{
      position:fixed;
      bottom:30px;
      right:30px;
      width:50px;
      height:50px;
      border-radius:50%;
      background:var(--brand);
      color:#1a1a1a;
      border:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      box-shadow:0 8px 24px rgba(245,196,79,.4);
      opacity:0;
      pointer-events:none;
      transition:all .3s ease;
      z-index:99;
    }
    
    .scroll-top.show{
      opacity:1;
      pointer-events:all;
    }
    
    .scroll-top:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 36px rgba(245,196,79,.5);
    }


/* ====================================Responsividade Mobile ====================================*/
@media (max-width: 480px){
    .container{margin-left:0; padding:0 16px}
    .nav-inner{padding:12px 16px}
    .brand span{font-size:16px}
    .nav-links{left:16px; right:16px}
    .menu-btn{display:inline-flex}
    .nav-links{display:none}
    .nav.open .nav-links{display:flex; position:absolute; top:70px; flex-direction:column; background:rgba(17,17,20,.98); padding:20px; border-radius:16px}
    .hero{padding:80px 0 40px; background-position:center !important;}
    .hero::before{background:linear-gradient(180deg, rgba(10,10,12,.9), rgba(10,10,12,.8))}
    .title{font-size:28px; line-height:1.2}
    .subtitle{font-size:16px}
    .hero-cta{flex-direction:column}
    .hero-cta .cta, .hero-cta .ghost{width:100%; text-align:center; padding:16px}
    .stats{grid-template-columns:1fr; gap:12px}
}

/* Responsividade Tablet */
@media (max-width: 768px){
    .container{margin-left:0; padding:0 20px}
    .nav-links{display:none}
    .menu-btn{display:inline-flex}
    .nav.open .nav-links{display:flex; position:absolute; top:70px; left:20px; right:20px; flex-direction:column; background:rgba(17,17,20,.98); padding:20px; border-radius:16px}
    .hero{padding:100px 0 60px}
    .hero-grid{max-width:100%}
    .callout{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .t-item{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
}

/* Responsividade Desktop Médio */
@media (max-width: 900px){
    .container{margin-left:0}
    .nav-links{display:none}
    .menu-btn{display:inline-flex}
    .nav.open .nav-links{display:flex; position:absolute; left:24px; right:24px; top:70px; flex-direction:column; background:rgba(17,17,20,.98); padding:20px; border:1px solid var(--line-strong); border-radius:var(--radius); backdrop-filter:blur(20px); box-shadow:var(--shadow)}
    .nav.open .nav-links a{padding:16px; border-radius:14px}
    .callout{grid-template-columns:1fr}
}

/* Responsividade Desktop */
@media (max-width: 1024px){
    .container{margin-left:0}
}

/* Elementos com clamp para escalonamento fluido */
.container{padding:0 clamp(16px, 4vw, 24px)}
.nav-inner{padding:clamp(12px, 2vh, 16px) clamp(16px, 4vw, 24px)}
.hero{padding:clamp(80px, 15vh, 120px) 0 clamp(40px, 8vh, 80px)}
.title{font-size:clamp(24px, 8vw, 45px)}
.subtitle{font-size:clamp(16px, 4vw, 22px)}
.section-title{font-size:clamp(28px, 6vw, 48px)}
section{padding:clamp(60px, 8vh, 100px) 0}
.card{padding:clamp(20px, 5vw, 28px)}
.tile{padding:clamp(20px, 5vw, 24px)}
.t-card{padding:clamp(16px, 4vw, 20px)}
.cta{padding:clamp(10px, 2vw, 12px) clamp(16px, 3vw, 20px)}
.ghost{padding:clamp(10px, 2.5vw, 12px) clamp(16px, 4vw, 20px)}

/* Grid responsivo */
.grid{grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr))}
.cards{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))}
.stats{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .card:hover, .tile:hover, .post:hover{transform:none}
    .cta:hover, .ghost:hover{transform:none}
    .scroll-top:hover{transform:none}
}

/* Formulários responsivos */
form > div[style*="grid"]{grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 640px) {
    form > div[style*="grid"]{grid-template-columns:1fr !important}
}

input, textarea{padding:clamp(12px, 3vw, 14px) clamp(14px, 3.5vw, 16px)}