:root{
    --cyan:#0fc4a7;
    --navy:#021a42;
    --white:#ffffff;
    --soft:rgba(255,255,255,.78);
    --card:rgba(255,255,255,.10);
    --card-border:rgba(255,255,255,.18);
    --wa:#25d366;
    --logo-blue:#2f6fe0;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--white);
    min-height:100vh;
    background:linear-gradient(to bottom left,#17b897 0%,#0fc4a7 18%,#0a7ea4 48%,#042e6f 80%,#021a42 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }

  /* ---------- FUNDO: CIRCUITOS ---------- */
  .circuit-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    opacity:.7;
    /* mantém os circuitos apenas nas bordas/cantos, deixando o centro limpo */
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 45%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,.35) 80%,
        rgba(0,0,0,1) 100%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 45%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,.35) 80%,
        rgba(0,0,0,1) 100%);
  }

  .circuit-bg .trace{
    fill:none;
    stroke:rgba(255,255,255,.55);
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .circuit-bg .node{fill:rgba(255,255,255,.6);}
  .circuit-bg .ring{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2;}

  .circuit-bg .pulse{
    fill:rgba(255,255,255,.95);
    animation:blink 4s ease-in-out infinite;
  }

  .circuit-bg .pulse:nth-of-type(2){animation-delay:1.1s;}
  .circuit-bg .pulse:nth-of-type(3){animation-delay:2.2s;}
  .circuit-bg .pulse:nth-of-type(4){animation-delay:3.1s;}

  @keyframes blink{
    0%,100%{opacity:.15;}
    50%{opacity:.9;}
  }

  @media (prefers-reduced-motion:reduce){
    .circuit-bg .pulse{animation:none;opacity:.5;}
  }

  .container{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- HERO ---------- */
  .hero{
    text-align:center;
    padding:64px 0 72px;
  }

  .hero img{
    width:100%;
    max-width:240px;
    height:auto;
    display:block;
    margin:0 auto 4px;
    filter:drop-shadow(0 18px 40px rgba(2,26,66,.45));
  }

  /* ---------- WORDMARK ---------- */
  .wordmark{
    font-family:'Chakra Petch','Inter',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,7.5vw,3.6rem);
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--white);
    white-space:nowrap;
    text-shadow:0 4px 18px rgba(2,26,66,.35);
  }

  .wordmark .bracket{
    color:rgba(255,255,255,.9);
    font-weight:600;
    margin:0 .06em;
  }

  .wordmark .dev{
    background:var(--logo-blue);
    border-radius:.14em;
    padding:.04em .16em;
    box-shadow:0 6px 18px rgba(47,111,224,.45);
  }

  .tagline{
    max-width:660px;
    margin:22px auto 38px;
    font-size:clamp(1.02rem,2.6vw,1.3rem);
    font-weight:500;
    color:var(--soft);
  }

  .tagline strong{color:var(--white);font-weight:700;}

  .cta{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--wa);
    color:#04231a;
    font-size:1.05rem;
    font-weight:700;
    text-decoration:none;
    padding:16px 38px;
    border-radius:999px;
    box-shadow:0 10px 28px rgba(37,211,102,.32);
    transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }

  .cta:hover{
    background:#1fbe5c;
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(37,211,102,.45);
  }

  .cta:active{transform:translateY(-1px);}

  .cta svg{width:24px;height:24px;fill:currentColor;flex-shrink:0;}

  /* ---------- SECTIONS ---------- */
  section{padding:56px 0;}

  h2{
    text-align:center;
    font-size:clamp(1.7rem,4vw,2.4rem);
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:12px;
  }

  .rule{
    width:64px;
    height:4px;
    border-radius:4px;
    background:var(--cyan);
    margin:0 auto 44px;
  }

  /* ---------- SERVIÇOS ---------- */
  .grid-services{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }

  .card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:32px 28px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .3s ease, background-color .3s ease, border-color .3s ease;
  }

  .card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.34);
  }

  .card h3{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
  }

  .card p{color:var(--soft);font-size:.98rem;}

  /* ---------- PORTFÓLIO ---------- */
  .grid-portfolio{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }

  .placeholder{
    aspect-ratio:4/3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:rgba(255,255,255,.07);
    border:1px dashed rgba(255,255,255,.30);
    border-radius:18px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .3s ease, background-color .3s ease, border-color .3s ease;
  }

  .placeholder:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.5);
  }

  .placeholder svg{
    width:46px;height:46px;
    stroke:rgba(255,255,255,.75);
    stroke-width:1.5;
    fill:none;
  }

  .placeholder span{
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--soft);
  }

  .portfolio-item{
    display:block;
    aspect-ratio:4/3;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .3s ease, background-color .3s ease, border-color .3s ease;
  }

  .portfolio-item:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.5);
  }

  .portfolio-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- RESPONSIVO ---------- */
  @media (min-width:640px){
    .grid-portfolio{grid-template-columns:repeat(2,1fr);}
  }

  @media (min-width:900px){
    .hero{padding:80px 0 90px;}
    .hero img{max-width:270px;}
    .grid-services{grid-template-columns:repeat(3,1fr);}
    .grid-portfolio{grid-template-columns:repeat(4,1fr);}
    section{padding:72px 0;}
  }