:root{
    --bg: #090c11;
    --surface: #10151d;
    --surface-2: #161c26;
    --border: #232b38;
    --text: #e7ecf3;
    --muted: #8a93a3;
    --cyan: #4de8d4;
    --violet: #7c5cfc;
    --grad: linear-gradient(120deg, var(--cyan), var(--violet));
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,.mono{font-family:'Space Grotesk',sans-serif;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;align-items:center;gap:8px;
  }
  .eyebrow::before{content:'';width:18px;height:1px;background:var(--cyan);}
  a{color:inherit;text-decoration:none;}
  .container{max-width:1180px;margin:0 auto;padding:0 32px;}
  section{padding:120px 0;position:relative;}
  @media(max-width:768px){section{padding:72px 0;} .container{padding:0 20px;}}

  /* BACKGROUND LAYERS */
  .grain-overlay{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    opacity:0.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  section:not(.hero){
    background-image:radial-gradient(rgba(77,232,212,0.04) 1px, transparent 1px);
    background-size:32px 32px;
  }

  section:not(.hero):not(#automaeasy){overflow:hidden;}
  section:not(.hero):not(#automaeasy)::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle 500px at 90% 10%, rgba(77,232,212,0.15), transparent 70%);
  }
  section:not(.hero):not(#automaeasy):nth-of-type(even)::before{
    background:radial-gradient(circle 500px at 10% 90%, rgba(124,92,252,0.15), transparent 70%);
  }

  /* NAV */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(9,12,17,0.75);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  nav .container{display:flex;align-items:center;justify-content:space-between;height:72px;}
  .logo{font-weight:700;font-size:1.05rem;letter-spacing:-0.02em;}
  .logo span{color:var(--cyan);}
  .navlinks{display:flex;gap:32px;font-size:0.9rem;color:var(--muted);}
  .navlinks a:hover{color:var(--text);}
  .navcta{
    font-family:'JetBrains Mono',monospace;font-size:0.8rem;
    border:1px solid var(--border);padding:8px 16px;border-radius:6px;
    transition:border-color .2s, color .2s;
  }
  .navcta:hover{border-color:var(--cyan);color:var(--cyan);}
  @media(max-width:768px){.navlinks{display:none;}}

  /* HERO */
  .hero{padding-top:200px;padding-bottom:100px;position:relative;}
  #flowCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.55;}
  .hero .container{position:relative;z-index:1;}
  .hero h1{
    font-size:clamp(2.4rem,6vw,4.2rem);
    font-weight:700;letter-spacing:-0.03em;line-height:1.05;
    max-width:820px;margin:20px 0 24px;
    /* reserva 5 linhas (line-height 1.05 × font-size) — pior caso medido pra "escalar sem
       contratar mais gente." em telas ≥768px — pra frase rotativa não empurrar o resto da página */
    min-height:calc(1.05em * 5);
  }
  @media(max-width:768px){
    /* nas telas pequenas a fonte fica no piso do clamp() e a mesma frase quebra em mais
       linhas (pior caso medido: 7 linhas) — reserva esse espaço aqui também.
       Precisa vir depois da regra base acima: mesma especificidade (.hero h1), e quem
       vier por último no arquivo vence o empate — senão a base de 5 linhas prevalece. */
    .hero h1{min-height:calc(1.05em * 7);}
  }
  .hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .typewriter-cursor{
    display:inline-block;color:var(--cyan);margin-left:2px;
    animation:typewriterBlink 1s step-end infinite;
  }
  @keyframes typewriterBlink{50%{opacity:0;}}
  @media(prefers-reduced-motion:reduce){
    .typewriter-cursor{display:none;}
  }
  .hero p{font-size:1.15rem;color:var(--muted);max-width:560px;margin-bottom:36px;}
  .btnrow{display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    padding:14px 28px;border-radius:8px;font-weight:600;font-size:0.95rem;
    transition:transform .2s, box-shadow .2s;display:inline-block;
  }
  .btn-primary{background:var(--grad);color:#04141a;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(77,232,212,0.25);}
  .btn-ghost{border:1px solid var(--border);color:var(--text);}
  .btn-ghost:hover{border-color:var(--cyan);}

  /* MAGNETIC BUTTONS */
  .btn{--magnet-x:0px;--magnet-y:0px;}
  .btnrow .btn.magnet-active{
    transform:translate(var(--magnet-x), var(--magnet-y));
    transition:transform .15s ease-out;
  }

  .statrow{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap;}
  .stat b{font-size:2rem;font-family:'Space Grotesk';display:block;color:var(--text);}
  .stat span{color:var(--muted);font-size:0.85rem;}

  /* SECTION HEADERS */
  .sechead{max-width:640px;margin-bottom:56px;}
  .sechead h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-top:14px;letter-spacing:-0.02em;}
  .sechead p{color:var(--muted);margin-top:14px;font-size:1.05rem;}

  /* AUTOMAEASY FEATURE */
  .featurebox{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
    position:relative;overflow:hidden;
  }
  .featurebox::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 85% 15%, rgba(124,92,252,0.18), transparent 55%);
    pointer-events:none;
  }
  .featurebox h3{font-size:1.8rem;margin-bottom:14px;}
  .featurebox p{color:var(--muted);margin-bottom:24px;}
  .tag{
    display:inline-block;font-family:'JetBrains Mono';font-size:0.72rem;
    background:var(--surface-2);border:1px solid var(--border);color:var(--cyan);
    padding:4px 10px;border-radius:20px;margin-right:8px;margin-bottom:8px;
  }
  .placeholder{
    aspect-ratio:16/10;border-radius:12px;border:1px dashed var(--border);
    background:
      linear-gradient(135deg, var(--surface-2) 25%, transparent 25%) -10px 0/20px 20px,
      linear-gradient(225deg, var(--surface-2) 25%, transparent 25%) -10px 0/20px 20px,
      var(--surface);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);font-family:'JetBrains Mono';font-size:0.8rem;text-align:center;padding:20px;
  }
  img.placeholder{display:block;width:100%;object-fit:cover;object-position:top center;padding:0;border-style:solid;background:var(--surface);}
  @media(max-width:860px){.featurebox{grid-template-columns:1fr;padding:32px;}}

  /* GRID CARDS */
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  @media(max-width:860px){.grid{grid-template-columns:1fr;}}
  .card{
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:32px;transition:border-color .2s, transform .2s;
    overflow:hidden;
  }
  .card:hover{border-color:var(--cyan);transform:translateY(-3px);}
  .card .placeholder{aspect-ratio:16/9;margin-bottom:20px;}
  #agentesGrid .placeholder{aspect-ratio:3/4;}
  .card h4{font-size:1.15rem;margin-bottom:8px;}
  .card p{color:var(--muted);font-size:0.92rem;margin-bottom:14px;}
  .stack{display:flex;flex-wrap:wrap;gap:6px;}

  /* SPOTLIGHT GLOW (hover) */
  .card{position:relative;}
  .card::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(77,232,212,0.15), transparent 65%);
    opacity:0;transition:opacity .3s ease;pointer-events:none;
  }
  .card.glow-active::after{opacity:1;}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:860px){.grid3{grid-template-columns:1fr;}}

  .sitecard .placeholder{aspect-ratio:4/3;}
  .status-live{color:var(--cyan);}
  .status-soon{color:var(--violet);}

  /* FLIP CARDS (Sites & Sistemas) */
  .flip-card{
    aspect-ratio:4/5;
    perspective:1200px;
  }
  .flip-card .flip-inner{
    position:relative;
    width:calc(100% + 64px);
    height:calc(100% + 64px);
    margin:-32px;
    transform-style:preserve-3d;
    transition:transform .6s;
  }
  @media(hover:hover) and (pointer:fine){
    .flip-card:hover .flip-inner{transform:rotateY(180deg);}
  }
  .flip-card.flipped .flip-inner{transform:rotateY(180deg);}
  .flip-face{
    position:absolute;inset:0;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:14px;overflow:hidden;
  }
  .flip-front{background:var(--surface);}
  .flip-front .placeholder{
    width:100%;height:100%;aspect-ratio:auto;margin:0;border:none;border-radius:0;
  }
  .flip-back{
    transform:rotateY(180deg);
    background:var(--surface);
    display:flex;align-items:center;justify-content:center;
  }
  .flip-back::before{
    position:absolute;content:'';display:block;
    width:160px;height:160%;
    background:linear-gradient(90deg, transparent, var(--cyan), var(--cyan), var(--cyan), var(--cyan), transparent);
    animation:flipGlowRotate 5000ms infinite linear;
  }
  .flip-back-content{
    position:absolute;width:99%;height:99%;
    background:var(--surface);border-radius:14px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:28px;overflow-y:auto;
  }
  @keyframes flipGlowRotate{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
  }

  /* ABOUT */
  .about{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;}
  @media(max-width:860px){.about{grid-template-columns:1fr;}}
  .credential{
    background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;
    margin-top:24px;
  }
  .credential .eyebrow{margin-bottom:10px;}
  .timeline{margin-top:8px;border-left:1px solid var(--border);padding-left:24px;}
  .tlitem{margin-bottom:22px;position:relative;}
  .tlitem::before{
    content:'';position:absolute;left:-29px;top:6px;width:9px;height:9px;border-radius:50%;
    background:var(--cyan);box-shadow:0 0 0 4px rgba(77,232,212,0.15);
  }
  .tlitem b{display:block;font-size:0.95rem;}
  .tlitem span{color:var(--muted);font-size:0.85rem;}
  .profile-photo{
    width:88px;height:88px;border-radius:50%;object-fit:cover;
    border:1px solid var(--border);display:block;margin-bottom:20px;
  }

  /* CONTACT */
  .contactbox{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:56px;text-align:center;
  }
  .contactbox h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:16px;}
  .contactbox p{color:var(--muted);max-width:480px;margin:0 auto 36px;}
  .contactrow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .btn-lg{padding:18px 36px;font-size:1.05rem;}
  .social-icons{display:flex;gap:20px;justify-content:center;margin-top:28px;}
  .social-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    color:var(--muted);border:1px solid var(--border);
    transition:color .2s, border-color .2s;
  }
  .social-icon:hover{color:var(--cyan);border-color:var(--cyan);}
  .social-icon svg{width:20px;height:20px;}

  footer{border-top:1px solid var(--border);padding:32px 0;text-align:center;color:var(--muted);font-size:0.85rem;}

  ::selection{background:var(--cyan);color:#04141a;}