:root{
    /* Palette — engineered for Marca a Código */
    --bg:#0e1319;
    --panel:#0a1e2b;
    --ink:#e8f1f6;
    --muted:#a2b2bf;
    --accent:#19d4c9;         /* cyan-teal pulse */
    --accent-warm:#ffb757;    /* warm brand cue */
    --danger:#ff5d6c;

    --card-1:#0f1821;         /* section variant */
    --card-2:#111d28;
    --card-3:#0d1b21;

    --glow: 0 0 0 transparent;

    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;

    --shadow-1:0 10px 30px rgba(0,0,0,.35);
    --shadow-2:0 3px 14px rgba(0,0,0,.25);

    --speed: .35s;

    --space-1:.5rem;
    --space-2:.9rem;
    --space-3:1.25rem;
    --space-4:2rem;
    --space-5:3.25rem;

    --maxw:1200px;
    --measure:68ch;
  }

  /* Reset + base */
  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background: radial-gradient(1200px 800px at 10% -10%, #122332 0%, transparent 60%) no-repeat,
                radial-gradient(900px 600px at 120% 20%, #13293b 0%, transparent 55%) no-repeat,
                var(--bg);
    line-height:1.55;
    letter-spacing:.02em;
  }
  img{max-width:100%;display:block}
  a{color:var(--accent);text-decoration:none;transition:color var(--speed), opacity var(--speed), transform var(--speed)}
  a:hover{color:#84fff7}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-3)}
  .section-title{
    font-size:clamp(1.25rem,2.5vw,1.6rem);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#cfe9f0;
    margin:0 0 var(--space-3);
    font-weight:700;
  }
  .lead{
    color:var(--muted);
    max-width:var(--measure);
  }

  /* Header + Nav */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(10,24,36,.65);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .branding{
    display:flex;align-items:center;gap:.75rem;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  }
  .branding .logo{
    width:36px;height:36px;border-radius:8px;
    background:
      conic-gradient(from 210deg at 50% 50%, #0a2a3b 0 35%, transparent 0 100%),
      radial-gradient(40px 40px at 110% -10%, rgba(25,212,201,.7), transparent 60%),
      linear-gradient(135deg, #0e2737, #0a1f2b);
    border:1px solid rgba(255,255,255,.12);
    display:grid;place-items:center;
    box-shadow: inset 0 0 30px rgba(25,212,201,.12);
    color:#84fff7;font-family: "SFMono-Regular",Consolas,Monaco,Menlo,monospace;
    font-size:.9rem;
  }
  .branding em{font-style:normal;color:#9feae5}
  nav[aria-label]{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;}
  nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
  nav li a{
    display:inline-block;padding:.35rem .6rem;border-radius:8px;color:#cfe0ea
  }
  nav li a:hover{background:rgba(255,255,255,.06)}
  .btn{
    appearance:none;border:1px solid rgba(255,255,255,.22);
    color:var(--ink);background:transparent;border-radius:999px;
    padding:.5rem .9rem;font-weight:600;letter-spacing:.02em;
    transition: box-shadow var(--speed), border-color var(--speed), transform var(--speed), background var(--speed), color var(--speed);
  }
  .btn:hover{border-color:var(--accent);box-shadow:0 0 0 4px rgba(25,212,201,.15)}
  .btn-primary{border-color:transparent;background:linear-gradient(90deg, var(--accent) 0%, #33eae0 100%);color:#042226}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(25,212,201,.35)}
  .header-actions{display:flex;gap:.5rem;align-items:center}

  /* HERO */
  /* HERO COMMENT INSERTED BELOW */
  .hero{
    display:grid;align-items:center;gap:var(--space-4);
    padding:var(--space-5) 0 var(--space-4);
  }
  .hero-grid{
    display:grid;gap:var(--space-4);
  }
  .hero h1{
    font-size:clamp(2rem,6vw,3.2rem);
    line-height:1.1;margin:.25rem 0 var(--space-2);
    letter-spacing:.02em;font-weight:800;
  }
  .hero .sub{
    max-width:ch; color:var(--muted)
  }
  .badge{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:"SFMono-Regular",Consolas,Monaco,Menlo,monospace;
    color:#8ddbd7;background:rgba(25,212,201,.08);border:1px solid rgba(25,212,201,.25);
    padding:.35rem .6rem;border-radius:999px;font-size:.85rem
  }
  .badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

  /* Slider (pure CSS) */
  .slider{
    position:relative;overflow:hidden;border-radius:var(--radius-lg);
    background:#0b2231;border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-1);
    height:clamp(280px, 50vh, 600px);
  }
  .slider input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
  .slides{display:flex;width:300%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .slide{min-width:100%;height:100%;position:relative}
  .slide img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05) brightness(.96)}
  .slide .caption{
    position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(6,12,18,.75) 60%, rgba(6,12,18,.95) 100%);
    font-size:.95rem;color:#cfe0ea
  }
  #s1:checked ~ .slides{transform:translateX(0)}
  #s2:checked ~ .slides{transform:translateX(-100%)}
  #s3:checked ~ .slides{transform:translateX(-200%)}
  .controls{
    position:absolute;display:flex;gap:.4rem;bottom:.75rem;left:50%;transform:translateX(-50%);
  }
  .controls label{
    width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.35);
    border:1px solid rgba(255,255,255,.5);cursor:pointer;transition:transform var(--speed), background var(--speed), box-shadow var(--speed)
  }
  #s1:checked ~ .controls label[for="s1"],
  #s2:checked ~ .controls label[for="s2"],
  #s3:checked ~ .controls label[for="s3"]{
    background:var(--accent);box-shadow:0 0 0 6px rgba(25,212,201,.15)
  }

  /* Sections — card grids */
  .cards{display:grid;gap:var(--space-3)}
  .cards article{
    background:var(--card-1);border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;
    transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed)
  }
  .cards article:hover{transform:translateY(-4px);border-color:rgba(25,212,201,.35);box-shadow:0 10px 32px rgba(25,212,201,.08)}
  .cards .thumb{aspect-ratio: 16/9;background:#0a2233;overflow:hidden}
  .cards .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
  .cards article:hover .thumb img{transform:scale(1.05)}
  .cards .body{padding:1rem 1rem 1.2rem;display:grid;gap:.5rem}
  .kicker{
    color:#8cced1;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
    font-family:"SFMono-Regular",Consolas,Monaco,Menlo,monospace;
  }
  .cards h3{margin:.1rem 0;font-size:1.05rem}
  .meta{font-size:.9rem;color:var(--muted)}

  /* Section variants */
  .section-brand{background:linear-gradient(180deg, rgba(25,212,201,.04), rgba(0,0,0,0))}
  .section-systems{background:linear-gradient(180deg, rgba(255,183,87,.05), rgba(0,0,0,0))}
  .section-interfaces{background:linear-gradient(180deg, rgba(255,93,108,.04), rgba(0,0,0,0))}
  .section-brand .cards article{background:#0f1821}
  .section-systems .cards article{background:#101a23}
  .section-interfaces .cards article{background:#0f1920}

  /* Grids responsive */
  @media (min-width:768px){
    .hero-grid{grid-template-columns: 1.1fr 1fr;align-items:center}
    .cards{grid-template-columns: repeat(2, 1fr)}
  }
  @media (min-width:1200px){
    .cards{grid-template-columns: repeat(3, 1fr)}
  }

  /* Blog list */
  .blog-block{padding:var(--space-5) 0;border-top:1px dashed rgba(255,255,255,.08);border-bottom:1px dashed rgba(255,255,255,.08)}
  .blog-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
  .blog-list li{
    display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:center;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:.6rem .8rem
  }
  .blog-list img{width:72px;height:72px;border-radius:10px;object-fit:cover}
  .blog-list a{display:block;font-weight:600;color:#d8e9f2}
  .blog-list a:hover{color:#aef7f0}
  .blog-list p{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}
  @media (min-width:768px){
    .blog-list{grid-template-columns:1fr 1fr}
  }
  @media (min-width:1200px){
    .blog-list{grid-template-columns:1fr 1fr 1fr}
  }

  /* Content article */
  .content-wrap{padding:var(--space-5) 0}
  .centered{max-width:860px;margin:0 auto}
  .figure{
    background:#0f1c26;border:1px solid rgba(255,255,255,.08);border-radius:16px;
    overflow:hidden;box-shadow:var(--shadow-1)
  }
  .rating{
    margin:.75rem auto 0;display:inline-flex;align-items:center;gap:.5rem;
    padding:.4rem .7rem;border-radius:999px;border:1px dashed rgba(255,255,255,.22);
    font-family:"SFMono-Regular",Consolas,Monaco,Menlo,monospace;color:#aeecea;background:rgba(25,212,201,.06)
  }
  .divider{height:1px;background:linear-gradient(90deg, rgba(25,212,201,.25), rgba(25,212,201,0) 60%);margin:var(--space-4) 0}
  article[itemtype="https://schema.org/Article"] h1{font-size:clamp(1.6rem, 3.2vw, 2.2rem);line-height:1.2;margin:.3rem 0 var(--space-2)}
  .article-meta{color:var(--muted);font-size:.95rem;margin-bottom:var(--space-3)}
  .article-body p{margin:0 0 1rem}
  .article-body p strong{color:#dff6f3}

  /* Prev/Next */
  .prev-next{display:flex;justify-content:space-between;gap:1rem;margin-top:var(--space-4)}
  .prev-next a{padding:.5rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.03)}
  .prev-next a:hover{border-color:var(--accent);box-shadow:0 0 0 6px rgba(25,212,201,.12)}

  /* Comments */
  .comments{margin-top:var(--space-5)}
  .comments h3{margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.12em;color:#b8d7e0;font-size:1rem}
  .comment-form{display:grid;gap:.8rem}
  .comment-form input,.comment-form textarea{
    width:100%;background:#0f1a22;border:1px solid rgba(255,255,255,.12);color:var(--ink);
    border-radius:10px;padding:.7rem .8rem;transition:border-color var(--speed), box-shadow var(--speed)
  }
  .comment-form input:focus-visible,.comment-form textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 6px rgba(25,212,201,.12)}
  .comment-form button{justify-self:start}

  /* Related */
  .related{padding:var(--space-5) 0}
  .related-grid{display:grid;gap:1rem}
  .related-grid a{
    display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:.6rem .8rem;color:#cfe0ea
  }
  .related-grid a:hover{border-color:rgba(25,212,201,.35);box-shadow:0 8px 24px rgba(25,212,201,.08)}
  .related-grid img{width:96px;height:72px;border-radius:10px;object-fit:cover}
  @media (min-width:768px){
    .related-grid{grid-template-columns:1fr 1fr 1fr}
  }

  /* Contacts */
  .contacts{padding:var(--space-5) 0;border-top:1px dashed rgba(255,255,255,.08)}
  .contact-grid{display:grid;gap:1.2rem}
  .contact-grid .panel{
    background:#0f1b24;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1rem
  }
  .contact-form{display:grid;gap:.8rem}
  .contact-form input,.contact-form textarea,.contact-form select{
    width:100%;background:#0d1720;border:1px solid rgba(255,255,255,.16);color:var(--ink);
    border-radius:10px;padding:.7rem .8rem
  }
  .contact-form button{margin-top:.2rem}
  .map img{border-radius:10px;border:1px solid rgba(255,255,255,.1)}
  @media (min-width:768px){
    .contact-grid{grid-template-columns: 1.1fr .9fr}
  }

  /* Aside + Modal */
  aside{padding:var(--space-5) 0}
  .promo-links{display:grid;gap:.6rem}
  .promo-links a{
    display:flex;justify-content:space-between;align-items:center;
    background:linear-gradient(90deg, rgba(25,212,201,.08), rgba(25,212,201,0));
    border:1px solid rgba(25,212,201,.25);border-radius:12px;padding:.75rem 1rem;color:#bff4ef
  }
  .promo-links a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(25,212,201,.1)}
  /* Modal using :target */
  .modal{
    position:fixed;inset:0;background:rgba(4,10,16,.72);
    display:none;place-items:center;padding:1rem;z-index:100
  }
  .modal:target{display:grid}
  .modal .sheet{
    width:min(620px, 94vw);background:#0b1b25;border:1px solid rgba(255,255,255,.12);
    border-radius:16px;box-shadow:var(--shadow-1);padding:1rem
  }
  .modal header{position:relative;background:transparent;border:none;padding:0;margin:0 0 .8rem}
  .modal .sheet h3{margin:.2rem 0 .4rem}
  .modal .sheet p{margin:0 0 .8rem;color:var(--muted)}
  .modal .close{
    position:absolute;right:.4rem;top:.4rem;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#c7ddea
  }
  .modal .close:hover{border-color:var(--danger);box-shadow:0 0 0 6px rgba(255,93,108,.15);color:#fff}
  .sheet form{display:grid;gap:.7rem}
  .sheet input,.sheet textarea,.sheet select{
    width:100%;background:#0d1a23;border:1px solid rgba(255,255,255,.16);color:var(--ink);
    border-radius:10px;padding:.7rem .8rem
  }

  /* Footer */
  footer{
    border-top:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg, rgba(10,30,45,.6), rgba(10,20,30,1));
    margin-top:var(--space-5);
  }
  .footer-grid{display:grid;gap:1rem;padding:var(--space-4) 0}
  .slogan{font-size:1.15rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cfe9f0}
  .about{color:#b6c8d5;max-width:64ch}
  .social{display:flex;gap:.8rem}
  .social a{padding:.4rem .6rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#d8e9f2}
  .social a:hover{border-color:var(--accent);box-shadow:0 0 0 6px rgba(25,212,201,.12)}
  .copy{color:#8fa3b3;font-size:.9rem;margin-top:.5rem}
  @media (min-width:768px){
    .footer-grid{grid-template-columns:1.1fr .9fr}
  }

  /* Utility */
  .muted{color:var(--muted)}
  .row{display:flex;gap:.5rem;flex-wrap:wrap}