/* ══════════════════════════════════════
       PALETA: Azul profundo · Verde solar · Castanho âmbar
    ══════════════════════════════════════ */
    :root {
      --blue-deep:   #0B1A2B;   /* fundo principal */
      --blue-mid:    #112236;   /* seções alternadas */
      --blue-panel:  #162D45;   /* cards / painéis */
      --blue-border: rgba(56,130,180,.18);

      --green:       #2ECC8A;   /* destaque primário */
      --green-dim:   rgba(46,204,138,.12);
      --green-glow:  rgba(46,204,138,.22);

      --brown:       #B87333;   /* âmbar / cobre */
      --brown-light: #D4955A;
      --brown-dim:   rgba(184,115,51,.12);

      --white:       #F0F4F8;
      --mist:        #C8D8E8;
      --text-muted:  #6B8BA4;
      --carbon:      #071220;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--blue-deep);
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }

    /* noise overlay */
    body::before {
      content: ''; position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999; opacity: .4;
    }

    /* ── NAV (mantida conforme pedido — barra no topo inalterada visualmente) ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 2.5rem;
      background: rgba(7,18,32,.95);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(46,204,138,.15);
      transition: padding .3s;
    }
    .logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
    .logo-star {
      width: 30px; height: 30px; flex-shrink: 0;
      background: var(--green);
      clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
      animation: spin 14s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .logo-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; letter-spacing: .08em; color: var(--white); }
    .logo-name em { color: var(--green); font-style: normal; }

    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a { color: var(--mist); text-decoration: none; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
    .nav-links a:hover { color: var(--green); }

    .nav-btn {
      background: var(--green); color: var(--carbon);
      padding: .48rem 1.3rem; border: none; border-radius: 3px;
      font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .78rem;
      letter-spacing: .06em; text-transform: uppercase;
      cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s;
    }
    .nav-btn:hover { background: #3de0a0; }

    .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
    .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); 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); }

    .nav-mobile-menu {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(7,18,32,.98); z-index: 290;
      flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a { color: var(--white); text-decoration: none; font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: .1em; transition: color .2s; }
    .nav-mobile-menu a:hover { color: var(--green); }
    .nav-mobile-menu .nav-btn { font-family: 'DM Sans', sans-serif; font-size: 1rem; padding: .9rem 2.5rem; }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 8rem 1.5rem 4rem;
      position: relative; overflow: hidden; text-align: center;
      background: linear-gradient(160deg, var(--blue-deep) 0%, #0d2238 55%, #0f2b1e 100%);
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(46,204,138,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46,204,138,.05) 1px, transparent 1px);
      background-size: 52px 52px;
    }
    .hero-glow-g {
      position: absolute; width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(46,204,138,.12) 0%, transparent 60%);
      top: 40%; left: 30%; transform: translate(-50%,-50%); pointer-events: none;
    }
    .hero-glow-b {
      position: absolute; width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(56,130,220,.1) 0%, transparent 60%);
      top: 60%; left: 70%; transform: translate(-50%,-50%); pointer-events: none;
    }

    .hero-badge {
      position: relative;
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(46,204,138,.1); border: 1px solid rgba(46,204,138,.3);
      color: var(--green); padding: .3rem .95rem; border-radius: 100px;
      font-family: 'Space Mono', monospace; font-size: .65rem; letter-spacing: .09em;
      margin-bottom: 1.5rem; animation: fadeUp .7s ease both;
    }
    .badge-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex-shrink: 0; animation: blink 2s ease infinite; }
    @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.5)} }

    .hero-title {
      position: relative;
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(4rem, 16vw, 11rem);
      line-height: .9; letter-spacing: .03em;
      animation: fadeUp .7s .12s ease both;
    }
    .hero-title .t1 { display: block; color: var(--white); }
    .hero-title .t2 { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--green); }

    .hero-sub {
      position: relative;
      margin: 1.5rem auto 2.5rem; max-width: 540px;
      font-size: clamp(.88rem, 2.5vw, 1.05rem); line-height: 1.78;
      color: rgba(200,216,232,.7); animation: fadeUp .7s .24s ease both;
    }
    .hero-btns {
      position: relative;
      display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center;
      animation: fadeUp .7s .36s ease both;
    }
    .btn-green {
      background: var(--green); color: var(--carbon);
      padding: .88rem 2.2rem; border: none; border-radius: 3px;
      font-family: 'DM Sans', sans-serif; font-weight: 700;
      font-size: .9rem; letter-spacing: .04em; cursor: pointer; text-decoration: none;
      transition: background .2s, transform .15s; display: inline-block;
    }
    .btn-green:hover { background: #3de0a0; transform: translateY(-2px); }
    .btn-outline {
      background: transparent; color: var(--white);
      padding: .88rem 2.2rem; border: 1px solid rgba(200,216,232,.22); border-radius: 3px;
      font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: .9rem;
      cursor: pointer; text-decoration: none;
      transition: border-color .2s, color .2s, transform .15s; display: inline-block;
    }
    .btn-outline:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
    .btn-brown {
      background: var(--brown); color: var(--white);
      padding: .88rem 2.2rem; border: none; border-radius: 3px;
      font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .04em;
      cursor: pointer; text-decoration: none; display: inline-block;
      transition: background .2s, transform .15s;
    }
    .btn-brown:hover { background: var(--brown-light); transform: translateY(-2px); }

    .hero-stats {
      position: relative; margin-top: 4rem;
      display: grid; grid-template-columns: repeat(4, auto); gap: 1rem 4rem;
      animation: fadeUp .7s .5s ease both;
    }
    .stat { text-align: center; }
    .stat-n { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; color: var(--green); line-height: 1; }
    .stat-l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: .3rem; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

    /* ── UTILS ── */
    .s-tag { font-family: 'Space Mono', monospace; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .6rem; }
    .s-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 7vw, 3.8rem); line-height: 1; letter-spacing: .03em; margin-bottom: 1rem; }
    .s-desc { color: var(--text-muted); font-size: clamp(.85rem, 2vw, .95rem); line-height: 1.8; max-width: 480px; }

    /* ── DIVIDER ── */
    .divider {
      height: 3px;
      background: linear-gradient(to right, transparent, var(--green), var(--brown), transparent);
      opacity: .4;
    }

    /* ── BANNER 1 — GALLERY ── */
    .b-projects {
      background: linear-gradient(180deg, var(--blue-mid) 0%, #102838 100%);
      padding: 0; overflow: hidden;
    }
    .b-projects-head {
      padding: 4rem 2rem 2rem;
      display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    }
    .b-projects-link {
      font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
      color: var(--green); text-decoration: none;
      border-bottom: 1px solid rgba(46,204,138,.35); padding-bottom: 2px; white-space: nowrap; transition: border-color .2s;
    }
    .b-projects-link:hover { border-color: var(--green); }

    .gallery-outer { overflow: hidden; position: relative; }
    .gallery-outer::before, .gallery-outer::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
    }
    .gallery-outer::before { left: 0; background: linear-gradient(to right, #102838, transparent); }
    .gallery-outer::after  { right: 0; background: linear-gradient(to left, #102838, transparent); }

    .gallery-track {
      display: flex; gap: 1rem; padding: 0 2rem 3.5rem;
      animation: glide 36s linear infinite; width: max-content;
    }
    .gallery-track:hover { animation-play-state: paused; }
    @keyframes glide { to { transform: translateX(-50%); } }

    .g-card { flex-shrink: 0; width: 300px; height: 200px; border-radius: 6px; overflow: hidden; position: relative; cursor: pointer; border: 1px solid var(--blue-border); }
    .g-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
    .g-card:hover img { transform: scale(1.07); }
    .g-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(7,18,32,.88) 0%, transparent 55%);
      display: flex; align-items: flex-end; padding: .85rem 1rem;
    }
    .g-label { font-size: .73rem; font-weight: 500; letter-spacing: .06em; color: var(--green); }

    /* ── BANNER 2 — APP + MARKETING ── */
    .b-app {
      padding: 6rem 2rem;
      background: linear-gradient(135deg, var(--blue-deep) 0%, #0e2232 50%, #12241a 100%);
    }
    .b-app-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 4.5rem; align-items: center;
      max-width: 1160px; margin: 0 auto;
    }
    .phones-wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; }
    .phones-wrap::before {
      content: ''; position: absolute; width: 320px; height: 320px;
      background: radial-gradient(circle, rgba(46,204,138,.1) 0%, transparent 65%); pointer-events: none;
    }
    .phone {
      flex-shrink: 0; width: 155px;
      background: var(--blue-panel); border-radius: 24px; padding: 9px;
      border: 1.5px solid rgba(46,204,138,.15);
      box-shadow: 0 28px 56px rgba(0,0,0,.5);
    }
    .phone.center {
      transform: scale(1.1) translateY(-12px);
      border-color: rgba(46,204,138,.45);
      box-shadow: 0 44px 88px rgba(0,0,0,.65), 0 0 36px rgba(46,204,138,.12);
      z-index: 2;
    }
    .phone-notch { width: 46px; height: 8px; background: var(--carbon); border-radius: 100px; margin: 0 auto 7px; }
    .phone-screen { background: #0d1e2f; border-radius: 16px; height: 275px; overflow: hidden; display: flex; flex-direction: column; }
    .ps-header {
      background: var(--carbon); padding: .55rem .75rem .45rem;
      border-bottom: 1px solid rgba(46,204,138,.1);
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    }
    .ps-logo { font-family: 'Bebas Neue', sans-serif; font-size: .8rem; letter-spacing: .1em; color: var(--green); }
    .ps-dot { width: 5px; height: 5px; background: #4ade80; border-radius: 50%; }
    .ps-body { flex: 1; padding: .6rem; display: flex; flex-direction: column; gap: .35rem; overflow: hidden; }
    .ps-kpi { background: rgba(46,204,138,.07); border-radius: 5px; padding: .42rem .55rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
    .ps-kpi-label { font-size: .5rem; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }
    .ps-kpi-val { font-family: 'Space Mono', monospace; font-size: .56rem; color: var(--green); }
    .ps-chart { flex: 1; display: flex; align-items: flex-end; gap: 2px; padding: .3rem .2rem 0; }
    .ps-bar { flex: 1; border-radius: 2px 2px 0 0; background: rgba(46,204,138,.2); min-height: 6px; }
    .ps-bar.hi { background: rgba(46,204,138,.6); }
    .ps-calc-title { font-family: 'Space Mono', monospace; font-size: .48rem; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .6rem .15rem; flex-shrink: 0; }
    .ps-calc-row { display: flex; justify-content: space-between; background: rgba(255,255,255,.04); border-radius: 4px; padding: .34rem .5rem; font-size: .5rem; color: var(--mist); flex-shrink: 0; }
    .ps-calc-row span { font-family: 'Space Mono', monospace; color: var(--brown-light); font-size: .5rem; }
    .ps-total { margin-top: auto; background: rgba(184,115,51,.12); border: 1px solid rgba(184,115,51,.25); border-radius: 7px; padding: .55rem; text-align: center; flex-shrink: 0; }
    .ps-total-label { font-size: .45rem; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .15rem; }
    .ps-total-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--brown-light); letter-spacing: .06em; }
    .ps-battery-icon { width: 42px; height: 23px; border: 2px solid rgba(46,204,138,.5); border-radius: 4px; margin: .6rem auto .35rem; position: relative; flex-shrink: 0; }
    .ps-battery-icon::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 3px; height: 9px; background: rgba(46,204,138,.5); border-radius: 0 2px 2px 0; }
    .ps-battery-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 72%; border-radius: 2px; background: linear-gradient(90deg, #1fa870, var(--green)); }
    .ps-batt-val { text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--green); letter-spacing: .06em; flex-shrink: 0; }

    .app-copy .s-title span { color: var(--green); }
    .app-features { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.3rem; }
    .feat { display: flex; gap: 1rem; align-items: flex-start; }
    .feat-icon {
      width: 38px; height: 38px; flex-shrink: 0;
      background: var(--green-dim); border: 1px solid rgba(46,204,138,.22);
      border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1rem;
    }
    .feat-text h4 { font-size: .88rem; font-weight: 500; margin-bottom: .25rem; }
    .feat-text p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
    .app-cta-row { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

    /* ── SERVICES ── */
    .s-services {
      padding: 6rem 2rem;
      background: linear-gradient(180deg, var(--blue-mid) 0%, #122030 100%);
    }
    .services-wrap { max-width: 1160px; margin: 0 auto; }
    .services-grid { margin-top: 2.8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; }
    .srv {
      background: var(--blue-panel);
      padding: 2.2rem 1.8rem; transition: background .25s, transform .2s; position: relative; overflow: hidden;
      border: 1px solid var(--blue-border);
    }
    .srv::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--green), var(--brown)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
    .srv:hover { background: #1c3550; transform: translateY(-3px); }
    .srv:hover::before { transform: scaleX(1); }
    .srv-icon { font-size: 1.9rem; margin-bottom: 1rem; }
    .srv-title { font-weight: 600; font-size: .95rem; margin-bottom: .55rem; letter-spacing: .02em; color: var(--white); }
    .srv-desc { font-size: .84rem; color: var(--text-muted); line-height: 1.7; }

    /* ── ABOUT ── */
    .s-about {
      padding: 6rem 2rem;
      background: linear-gradient(135deg, #0f2030 0%, var(--blue-deep) 50%, #0e1f14 100%);
      display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center;
    }
    .about-visual { display: flex; flex-direction: column; }
    .about-year-block {
      display: inline-block; padding: 1.4rem 2rem; border-radius: 6px;
      background: linear-gradient(135deg, var(--brown) 0%, var(--brown-light) 100%);
      box-shadow: 0 8px 40px rgba(184,115,51,.25);
    }
    .about-year { font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem; color: var(--white); line-height: 1; letter-spacing: .04em; }
    .about-year-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: .2rem; }
    .about-line { width: 2px; height: 60px; background: linear-gradient(to bottom, var(--green), transparent); margin: 1.2rem 0 1.2rem 2.5rem; }
    .about-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--green-dim); border: 1px solid rgba(46,204,138,.2); border-radius: 100px; padding: .3rem .85rem; font-size: .72rem; color: var(--green); }
    .about-text .s-desc + .s-desc { margin-top: 1rem; }

    /* ── FOOTER ── */
    footer {
      background: var(--carbon);
      border-top: 1px solid rgba(46,204,138,.1);
      padding: 4rem 2rem 2rem;
    }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
    .footer-brand p { font-size: .85rem; color: var(--text-muted); line-height: 1.75; margin-top: .8rem; max-width: 260px; }
    .footer-col h5 { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
    .footer-col a { color: var(--text-muted); text-decoration: none; font-size: .85rem; transition: color .2s; }
    .footer-col a:hover { color: var(--white); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.06); padding-top: 1.3rem;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem;
    }
    .footer-copy { font-size: .75rem; color: var(--text-muted); }
    .footer-mono { font-family: 'Space Mono', monospace; font-size: .68rem; color: rgba(46,204,138,.4); }

    /* ── MOBILE ── */
    @media (max-width: 900px) {
      .b-app-inner { grid-template-columns: 1fr; gap: 3rem; }
      .s-about { grid-template-columns: 1fr; gap: 2.5rem; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
      nav { padding: .8rem 1.2rem; }
      .nav-links, .nav-btn.d-only { display: none; }
      .nav-hamburger { display: flex; }

      .hero { padding: 7rem 1.2rem 3.5rem; }
      .hero-title { font-size: clamp(3.5rem, 18vw, 6rem); }
      .hero-title .t2 { -webkit-text-stroke: 1px var(--green); }
      .hero-sub { font-size: .88rem; margin: 1.2rem auto 2rem; }
      .hero-btns { flex-direction: column; align-items: center; }
      .btn-green, .btn-outline { width: 100%; max-width: 300px; text-align: center; }
      .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-top: 3rem; }
      .stat-n { font-size: 2.4rem; }

      .b-projects-head { padding: 2.5rem 1.2rem 1.5rem; flex-direction: column; align-items: flex-start; }
      .g-card { width: 240px; height: 160px; }
      .gallery-track { padding: 0 1.2rem 2.5rem; }

      .b-app { padding: 3.5rem 1.2rem; }
      .phone { display: none; }
      .phone.center { display: block; transform: none; width: 210px; }
      .phone-screen { height: 340px; }
      .ps-calc-row { font-size: .58rem; }
      .app-copy { text-align: center; }
      .app-copy .s-desc { margin: 0 auto; }
      .app-features { align-items: flex-start; text-align: left; }
      .app-cta-row { justify-content: center; flex-direction: column; align-items: center; }
      .app-cta-row .btn-green, .app-cta-row .btn-outline { width: 100%; max-width: 280px; text-align: center; }

      .s-services { padding: 3.5rem 1.2rem; }
      .services-grid { grid-template-columns: 1fr; }

      .s-about { padding: 3.5rem 1.2rem; text-align: center; }
      .about-line { margin: 1rem auto; }
      .about-text { text-align: center; }
      .about-text .s-desc { margin: 0 auto; }
      .about-text div[style] { display: flex; justify-content: center; }

      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 420px) {
      .hero-stats { grid-template-columns: 1fr 1fr; }
      .hero-title { font-size: 3.2rem; }
    }