/* ===========================
       DLR Web Studio — LIGHT THEME (Software House)
       Arquivo único (HTML + CSS)
    =========================== */
    :root{
      /* Base light */
      --bg:#f6f7fb;
      --ink:#0b1220;
      --muted:#475569;
      --muted-2:#64748b;

      /* Brand */
      --pri:#d323e2;
      --pri-2:#9605a2;

      /* Superfícies */
      --surface-1:#ffffff;       /* cards */
      --surface-2:#f2f4fa;       /* seções alternadas */
      --surface-3:#eef1f7;       /* hover */

      --border: rgba(15,23,42,.10);
      --border-soft: rgba(15,23,42,.07);

      --shadow: 0 12px 30px rgba(2,6,23,.08);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family:'Sora',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      background: var(--bg);
      color: var(--ink);
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{color:inherit}

    .text-muted-2{color:var(--muted-2)!important}
    .section-padding{padding:90px 0}
    .section-alt{background: var(--surface-2)}
    .section-tag{
      display:inline-block;
      padding:6px 12px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(150,5,162,.10), rgba(211,35,226,.10));
      border:1px solid var(--border);
      color: var(--muted);
      font-size:.85rem;
      letter-spacing:.08em;
    }

    /* Navbar */
    .main-navbar{
      position: sticky;
      top:0; z-index: 1000;
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(12px);
      border-bottom:1px solid var(--border-soft);
    }
    .brand-mark{height: 26px; width:auto; display:block}
    @media (min-width: 992px){ .brand-mark{height: 32px;} }

    .navbar .nav-link{
      color: var(--muted) !important;
      transition:.2s ease;
      font-weight: 500;
    }
    .navbar .nav-link:hover{ color: var(--ink) !important; }
    .navbar .nav-link.active,
    .navbar .nav-link[aria-current="page"]{
      color: var(--pri-2) !important;
      font-weight: 700;
      position: relative;
    }
    .navbar .nav-link.active::after,
    .navbar .nav-link[aria-current="page"]::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-6px;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--pri), var(--pri-2));
    }

    .custom-toggler{
      display:inline-block;width:1.5rem;height:1.5rem;
      background: linear-gradient(135deg, var(--pri), var(--pri-2));
      -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5a.5.5 0 010-1h14a.5.5 0 010 1H1zm0 5a.5.5 0 010-1h14a.5.5 0 010 1H1zm0 5a.5.5 0 010-1h14a.5.5 0 010 1H1z'/%3E%3C/svg%3E") center/cover no-repeat;
              mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5a.5.5 0 010-1h14a.5.5 0 010 1H1zm0 5a.5.5 0 010-1h14a.5.5 0 010 1H1zm0 5a.5.5 0 010-1h14a.5.5 0 010 1H1z'/%3E%3C/svg%3E") center/cover no-repeat;
    }

    /* Hero */
    .hero-section{
      position: relative;
      isolation: isolate;
      min-height: 92vh;
      display: grid;
      place-items: center;
      padding: 64px 0;
      text-align:center;
      overflow: hidden;
      background:
        radial-gradient(70% 55% at 50% 120%, rgba(211,35,226,.12), transparent 70%),
        var(--bg);
    }
    .hero-glow{
      position:absolute; inset:0; z-index:-1;
      background:
        radial-gradient(40vw 40vh at 80% 20%, rgba(150, 5, 162, 0.16), transparent 75%),
        radial-gradient(40vw 40vh at 20% 80%, rgba(211, 35, 226, 0.14), transparent 75%);
      filter: blur(26px);
    }
    .hero-tag{
      display:inline-block; padding:8px 14px; border-radius:999px;
      border:1px solid var(--border);
      color:var(--muted);
      font-size:.78rem; letter-spacing:.14em;
      background:rgba(255,255,255,.7);
    }
    .hero-title{letter-spacing:-.03em}
    .text-gradient{
      background: linear-gradient(90deg, var(--pri), var(--pri-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .tech-strip{
      display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
      margin-top:22px; color:var(--muted-2); font-size:.95rem;
    }
    .tech-strip span{display:inline-flex; gap:8px; align-items:center}

    /* Buttons */
    .btn-primary-gradient{
      border: none;
      border-radius: 999px;
      padding: .85rem 1.45rem;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(135deg, var(--pri), var(--pri-2));
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: 0 14px 28px rgba(150,5,162,.18);
    }
    .btn-primary-gradient:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(150,5,162,.22);
      color:#fff;
    }
    .btn-secondary-ghost{
      border: 1px solid rgba(2,6,23,.14);
      border-radius: 999px;
      padding: .85rem 1.45rem;
      color: var(--muted);
      background: rgba(255,255,255,.82);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
      font-weight: 700;
    }
    .btn-secondary-ghost:hover{
      transform: translateY(-2px);
      background: rgba(2,6,23,.04);
      border-color: rgba(2,6,23,.22);
      color: var(--ink);
    }

    /* CTA (borda giratória) */
    @property --cta-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    .btn-cta{
      --cta-bg: #ffffff;
      --cta-speed: 4s;
      --cta-thick: 2px;

      position: relative;
      z-index: 0;
      border: 0;
      border-radius: 999px;
      padding: .9rem 1.35rem;
      background: var(--cta-bg);
      color: var(--ink);
      font-weight: 800;
      letter-spacing: .01em;
      transition: transform .18s ease, box-shadow .18s ease;
      isolation: isolate;
      box-shadow: 0 10px 26px rgba(2,6,23,.10);
    }
    .btn-cta::before{
      content:"";
      position:absolute;
      inset:-2px;
      padding: var(--cta-thick);
      border-radius: inherit;
      pointer-events:none;
      z-index:-1;
      background: conic-gradient(from var(--cta-angle), var(--pri), var(--pri-2), var(--pri));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: cta-angle-spin var(--cta-speed) linear infinite;
    }
    .btn-cta:hover{ transform: translateY(-2px); }
    .btn-cta:hover::before{ animation-duration: 2.6s; }
    @keyframes cta-angle-spin { to{ --cta-angle: 360deg; } }
    @supports not (background: conic-gradient(from 1deg, #000, #000)) {
      .btn-cta::before { animation: cta-rotate var(--cta-speed) linear infinite; transform-origin: 50% 50%; }
      @keyframes cta-rotate { to{ transform: rotate(360deg); } }
    }

    /* Cards */
    .service-card, .portfolio-card, .step-card, .t-card, .contact-card{
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .service-card:hover,
    .portfolio-card:hover,
    .step-card:hover,
    .t-card:hover,
    .contact-card:hover{
      transform: translateY(-3px);
      background: var(--surface-3);
      box-shadow: 0 16px 40px rgba(2,6,23,.10);
    }
    .service-card .icon-wrap{
      width:46px;height:46px; display:grid;place-items:center;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(211,35,226,.14), rgba(150,5,162,.14));
      margin-bottom:12px; color: var(--pri-2);
      border: 1px solid rgba(150,5,162,.14);
    }

    /* Portfolio thumb */
    .portfolio-card{
      overflow:hidden;
      padding: 0;
    }
    .portfolio-card .thumb{
      position:relative;
      aspect-ratio: 16/10;
      overflow:hidden;
      background:#e9edf6;
    }
    .portfolio-card .thumb img{
      width:100%; height:100%; object-fit:cover; display:block;
      transition: transform .5s ease;
    }
    .portfolio-card:hover .thumb img{ transform: scale(1.04); }
    .portfolio-card .content{ padding: 22px; }
    .tags{display:flex; flex-wrap:wrap; gap:8px}
    .tags span{
      display:inline-block; padding:4px 10px; border-radius:999px;
      background: rgba(2,6,23,.04);
      border: 1px solid rgba(2,6,23,.08);
      color: var(--muted);
      font-size: .82rem;
    }

    /* Process */
    .step-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size: .78rem;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(150,5,162,.08);
      border: 1px solid rgba(150,5,162,.16);
      color: var(--pri-2);
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* Testimonials */
    .t-stars{
      display:flex;
      gap:2px;
      line-height: 1;
      margin: 6px 0 10px;
    }
    .t-stars i{ color:#f6c94c }
    .t-meta{
      display:flex; align-items:center; gap:10px;
      margin-top: 12px;
    }
    .t-avatar{
      width:42px; height:42px; border-radius:50%;
      object-fit:cover;
      border: 1px solid rgba(2,6,23,.10);
    }
    .t-role{color: var(--muted-2); font-size:.92rem}
    .t-work{color: var(--muted-2); font-size:.92rem; display:flex; align-items:center; gap:.5rem; margin-top:10px}

    /* CTA Final */
    .final-cta{
      position:relative; isolation:isolate;
      background:
        radial-gradient(70% 55% at 50% 120%, rgba(211,35,226,.12), transparent 70%),
        #ffffff;
      border-top: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);
    }
    .cta-glow{
      position:absolute; inset:0; z-index:-1;
      background:
        radial-gradient(40vw 40vh at 80% 20%, rgba(150, 5, 162, 0.12), transparent 75%),
        radial-gradient(40vw 40vh at 20% 80%, rgba(211, 35, 226, 0.10), transparent 75%);
      filter: blur(26px);
      opacity: .9;
    }

    /* Footer */
    .footer-institutional{
      background:#ffffff;
      border-top: 1px solid var(--border);
      color: var(--muted-2);
    }
    .footer-heading{
      color: var(--muted);
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .78rem;
      margin-bottom: 1rem;
    }
    .footer-nav{padding-left:0; list-style:none}
    .footer-nav li{margin-bottom:.6rem}
    .footer-nav a{
      color: var(--muted-2);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      transition: transform .18s ease, color .18s ease;
    }
    .footer-nav a:hover{
      transform: translateX(3px);
      color: var(--ink);
    }
    .social-icon{
      display:grid; place-items:center;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(2,6,23,.04);
      border: 1px solid rgba(2,6,23,.08);
      color: var(--muted);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      text-decoration:none;
    }
    .social-icon:hover{
      transform: translateY(-2px);
      background: rgba(150,5,162,.10);
      box-shadow: 0 12px 28px rgba(2,6,23,.10);
      color: var(--pri-2);
    }

    /* Sticky CTA */
    .dlr-sticky-cta{
      position: fixed; left: 0; right: 0; bottom: 0;
      padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
      background: rgba(255,255,255,.84);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      box-shadow: 0 -14px 30px rgba(2,6,23,.10);
      z-index: 1030;
      transform: translateY(110%);
      transition: transform .28s ease;
    }
    .dlr-sticky-cta.is-on{ transform: translateY(0) }
    .dlr-sticky-cta .eyebrow{
      color: var(--muted-2);
      letter-spacing: .12em;
      font-size: .72rem;
      font-weight: 800;
    }
    .icon-sticky{ max-height: 22px; max-width: 22px; }

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .section-padding{padding:72px 0}
      .hero-section{min-height: 86vh}
    }
    @media (max-width: 381px){
      .btn-primary-gradient, .btn-secondary-ghost{ width:100%; }
    }
    /* Navbar clean + espaçamento */
.dlr-nav{
  padding: 10px 0;
}

/* Brand: só logo + "Web Studio" cinza */
.dlr-brand{
  text-decoration: none;
}
.dlr-brand-sub{
  font-weight: 700;
  color: #6b7280;           /* cinza */
  letter-spacing: -.01em;
}

/* Logo (sem fundo atrás) */
.brand-mark{
  height: 30px;
  width: auto;
  display: block;
}

/* Toggler clean */
.dlr-toggler{
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 12px !important;
  padding: .55rem .7rem !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.dlr-toggler:focus{
  box-shadow: 0 0 0 .25rem rgba(150,5,162,.14) !important;
}

/* Burger */
.dlr-burger{
  width: 22px;
  height: 16px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.dlr-burger span{
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pri), var(--pri-2));
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
}

/* vira X quando abre */
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(2){
  opacity: 0;
}
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Links: mais confortáveis e com hover sutil */
.dlr-nav .nav-link{
  padding: .55rem .9rem !important;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.dlr-nav .nav-link:hover{
  background: rgba(15,23,42,.045);
}

/* Ativo: sem exagero, só um highlight leve */
.dlr-nav .nav-link.active,
.dlr-nav .nav-link[aria-current="page"]{
  background: rgba(150,5,162,.08);
  color: var(--pri-2) !important;
  font-weight: 700;
}
/* Garante alinhamento vertical de tudo no navbar */
.dlr-nav .container{
  display: flex !important;
  align-items: center !important;
}

/* Normaliza o botão do hamburger */
.dlr-toggler{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 42px !important;
  width: 42px !important;
  padding: 0 !important;

  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 12px !important;
  background: #fff !important;

  box-shadow: 0 8px 18px rgba(2,6,23,.06) !important;
}

/* Centraliza o ícone dentro do botão */
.dlr-burger{
  display: flex !important;
  align-items: center !important;
  width: 22px !important;
  height: 16px !important;
}

/* Linhas do hamburger */
.dlr-burger span{
  display: block !important;
  height: 2px !important;
  width: 100% !important;

  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--pri), var(--pri-2)) !important;

  transition: transform .2s ease, opacity .2s ease !important;
  transform-origin: center !important;
}

/* Animação para X */
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(1){
  transform: translateY(7px) rotate(45deg) !important;
}
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(2){
  opacity: 0 !important;
}
.dlr-toggler[aria-expanded="true"] .dlr-burger span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* ==========================================================
   FIX: Hamburger não deve aparecer no desktop (>= lg)
   ========================================================== */

/* 1) Em telas LG+ esconda o botão e mantenha o menu sempre visível */
@media (min-width: 992px){
  .dlr-nav .dlr-toggler{
    display: none !important;
  }

  /* Garante que o collapse não fique "colapsado" no desktop */
  .dlr-nav .navbar-collapse{
    display: flex !important;
    flex-basis: auto !important;
  }

  /* Se por algum motivo o Bootstrap aplicar estilos de collapse, neutraliza */
  .dlr-nav .navbar-collapse.collapse{
    height: auto !important;
    visibility: visible !important;
  }
}

/* 2) Em telas menores, o toggler aparece normalmente */
@media (max-width: 991.98px){
  .dlr-nav .dlr-toggler{
    display: flex !important;
  }
}