:root{
      --primary:#03877c;
      --green-dark:#024d46;
      --green-dark-2:#015c55;
      --green-contrast:#05b59d;
      --black:#050908;
      --black-2:#08100e;
      --black-3:#0b1512;
      --ink:#f3f8f6;
      --muted:#84918d;
      --line:rgba(238,249,245,.12);
      --line-strong:rgba(5,181,157,.34);
      --container:min(1240px,calc(100vw - 184px));
      --ease:cubic-bezier(.2,.75,.15,1);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;background:var(--black)}
    body{
      padding-left:72px;
      font-family:"Manrope",sans-serif;color:var(--ink);
      background:
        radial-gradient(circle at 86% 12%,rgba(3,135,124,.12),transparent 30%),
        radial-gradient(circle at 12% 58%,rgba(5,181,157,.05),transparent 26%),
        linear-gradient(180deg,#040706,#06100d 52%,#040706);
      overflow-x:hidden;min-height:100vh
    }
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.32;
      background-image:
        linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px);
      background-size:42px 42px
    }

    a{text-decoration:none;color:inherit}
    button,input{font:inherit}
    button{color:inherit}
    ::selection{background:var(--green-contrast);color:#00251e}

    .container{width:var(--container);margin:auto}
    .mono{font-family:"DM Mono",monospace}
    .accent{color:var(--green-contrast)}
    .section-no{font:500 .66rem "DM Mono";letter-spacing:.12em;text-transform:uppercase;color:var(--green-contrast)}
    .muted{color:var(--muted)}

    /* rail */
    .rail{
      position:fixed;left:0;top:0;bottom:0;width:72px;z-index:1000;
      border-right:1px solid var(--line);
      display:flex;flex-direction:column;align-items:center;justify-content:space-between;
      padding:22px 0;background:rgba(4,7,6,.78);backdrop-filter:blur(18px)
    }
    .rail-brand{
      width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
      background:linear-gradient(145deg,var(--green-dark),var(--green-contrast));
      font-size:.9rem;font-weight:800
    }
    .rail-word{
      writing-mode:vertical-rl;transform:rotate(180deg);
      font:500 .62rem "DM Mono";letter-spacing:.18em;text-transform:uppercase;color:#66736f
    }
    .rail-back{
      width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
      display:grid;place-items:center;color:#80908b;transition:.3s
    }
    .rail-back:hover{color:var(--green-contrast);border-color:var(--line-strong);transform:translateY(-2px)}

    /* header */
    .topbar{
      position:fixed;left:72px;right:0;top:0;height:88px;z-index:900;
      display:flex;align-items:center;transition:.35s var(--ease)
    }
    .topbar.scrolled{
      background:rgba(4,7,6,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)
    }
    .topbar-inner{width:var(--container);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:30px}
    .top-brand{display:flex;align-items:center;gap:12px;font-size:.8rem;font-weight:700}
    .top-brand span{font:400 .62rem "DM Mono";text-transform:uppercase;letter-spacing:.12em;color:#65736e}
    .top-nav{display:flex;align-items:center;gap:28px}
    .top-nav a{
      font:500 .7rem "DM Mono";letter-spacing:.08em;text-transform:uppercase;color:#87948f;transition:.25s
    }
    .top-nav a:hover,.top-nav a.active{color:#fff}
    .top-cta{
      display:flex;align-items:center;gap:11px!important;
      padding:9px 9px 9px 16px;border:1px solid var(--line);border-radius:999px;
      color:#fff!important;font-family:"Manrope"!important;font-weight:800!important;text-transform:none!important;letter-spacing:0!important
    }
    .top-cta i{
      width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
      background:var(--green-contrast);color:#05231d;transform:rotate(-45deg)
    }
    .menu-btn{
      display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none
    }

    /* Hero */
    .hero{padding:145px 0 90px;min-height:76vh;display:flex;align-items:center;position:relative}
    .hero::after{
      content:"";position:absolute;right:-8vw;top:140px;width:46vw;height:46vw;border-radius:50%;
      border:1px solid rgba(5,181,157,.08);
      box-shadow:0 0 0 70px rgba(5,181,157,.018),0 0 0 140px rgba(5,181,157,.012);
      pointer-events:none
    }
    .hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:end;position:relative;z-index:2}
    .hero-kicker{display:flex;align-items:center;gap:13px;font:500 .65rem "DM Mono";letter-spacing:.13em;text-transform:uppercase;color:#71807b}
    .hero-kicker::before{content:"";width:38px;height:1px;background:var(--green-contrast)}
    h1{
      font-size:clamp(5rem,8.2vw,10rem);line-height:.78;letter-spacing:-.09em;
      text-transform:uppercase;margin-top:34px
    }
    h1 span{display:block;color:transparent;-webkit-text-stroke:1px rgba(244,248,246,.62);margin-left:8vw}
    .hero-side{padding-bottom:12px}
    .hero-side p{color:#8c9995;font-size:.92rem;line-height:1.8;max-width:430px}
    .hero-side-meta{
      margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
      display:grid;grid-template-columns:1fr 1fr;gap:20px
    }
    .hero-side-meta small{display:block;font:500 .57rem "DM Mono";text-transform:uppercase;letter-spacing:.1em;color:#5f6d68}
    .hero-side-meta strong{display:block;margin-top:6px;font-size:.82rem}

    /* filters */
    .filter-bar{
      border-block:1px solid var(--line);position:sticky;top:88px;z-index:800;
      background:rgba(5,9,8,.88);backdrop-filter:blur(18px)
    }
    .filter-inner{height:78px;display:flex;justify-content:space-between;align-items:center;gap:25px}
    .filter-title{font:500 .62rem "DM Mono";letter-spacing:.12em;text-transform:uppercase;color:#65736e}
    .filters{display:flex;gap:8px;flex-wrap:wrap}
    .filter-btn{
      border:1px solid var(--line);background:transparent;border-radius:999px;
      padding:9px 14px;cursor:pointer;font:500 .65rem "DM Mono";
      text-transform:uppercase;letter-spacing:.06em;color:#798681;transition:.25s
    }
    .filter-btn:hover,.filter-btn.active{background:var(--green-contrast);border-color:var(--green-contrast);color:#04231d}

    /* Project entries */
    .projects-list{padding:90px 0 130px}
    .project{
      display:grid;grid-template-columns:110px 1fr;gap:44px;
      padding:0 0 82px;margin-bottom:82px;border-bottom:1px solid var(--line);
      transition:opacity .35s,transform .35s
    }
    .project.hidden{display:none}
    .project-index{
      font:500 .68rem "DM Mono";letter-spacing:.12em;color:#65736e;padding-top:8px
    }
    .project-main{display:grid;gap:34px}
    .project-header{
      display:grid;grid-template-columns:1fr .48fr;gap:60px;align-items:end
    }
    .project-tag{
      display:flex;align-items:center;gap:10px;font:500 .61rem "DM Mono";text-transform:uppercase;letter-spacing:.12em;color:#82908b
    }
    .project-tag::before{content:"";width:22px;height:1px;background:var(--green-contrast)}
    .project h2{
      font-size:clamp(3.6rem,6vw,7.3rem);line-height:.84;letter-spacing:-.08em;margin-top:18px
    }
    .project-intro{color:#87948f;line-height:1.75;font-size:.88rem}
    .project-stage{
      min-height:590px;border:1px solid var(--line);border-radius:30px;overflow:hidden;position:relative;
      background:#0a1210
    }
    .stage-bg{position:absolute;inset:0}
    .project.chaybom .stage-bg{
      background:radial-gradient(circle at 80% 20%,rgba(248,208,100,.85),transparent 24%),linear-gradient(135deg,#104c49,#0a1715 70%)
    }
    .project.hl .stage-bg{
      background:radial-gradient(circle at 78% 24%,rgba(48,183,216,.75),transparent 25%),linear-gradient(135deg,#0b3156,#08131b 70%)
    }
    .project.rene .stage-bg{
      background:radial-gradient(circle at 82% 18%,rgba(176,150,255,.72),transparent 24%),linear-gradient(135deg,#32224f,#110d1b 70%)
    }
    .project.waguinho .stage-bg{
      background:radial-gradient(circle at 79% 18%,rgba(214,189,116,.75),transparent 22%),linear-gradient(135deg,#283126,#111713 70%)
    }
    .project.ponto .stage-bg{
      background:radial-gradient(circle at 80% 18%,rgba(255,98,28,.85),transparent 23%),linear-gradient(135deg,#111f3e,#080d17 70%)
    }
    .project.mateus .stage-bg{
      background:radial-gradient(circle at 78% 20%,rgba(235,184,96,.82),transparent 22%),linear-gradient(135deg,#4b2c20,#16100d 70%)
    }
    .project.casalaser .stage-bg{
      background:radial-gradient(circle at 80% 20%,rgba(0,225,204,.72),transparent 24%),linear-gradient(135deg,#0b3430,#071512 70%)
    }
    .project.uaifisco .stage-bg{
      background:radial-gradient(circle at 78% 18%,rgba(255,187,59,.74),transparent 22%),linear-gradient(135deg,#28461c,#0e180a 70%)
    }
    .project.sabores .stage-bg{
      background:radial-gradient(circle at 80% 18%,rgba(225,112,145,.82),transparent 22%),linear-gradient(135deg,#48243a,#170d13 70%)
    }
    .stage-grid{
      position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
      background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000 25%,#000)
    }
    .stage-copy{
      position:absolute;left:46px;bottom:45px;z-index:3;max-width:360px
    }
    .stage-copy small{font:500 .58rem "DM Mono";letter-spacing:.12em;text-transform:uppercase;color:#bdcac6}
    .stage-copy strong{display:block;font-size:1.05rem;margin-top:9px}
    .browser{
      position:absolute;width:63%;height:78%;right:5%;top:9%;
      background:#f1f5f3;padding:11px;border-radius:17px;
      box-shadow:0 40px 85px rgba(0,0,0,.38);
      transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);
      transition:.6s var(--ease)
    }
    .project-stage:hover .browser{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-7px)}
    .browser-top{height:30px;border-radius:8px 8px 0 0;background:#e4eae8;display:flex;align-items:center;gap:5px;padding:0 10px}
    .browser-top i{width:6px;height:6px;border-radius:50%;background:#a8b6b1}
    .browser-page{height:calc(100% - 30px);background:#fff;border-radius:0 0 8px 8px;padding:18px}
    .mini-logo{width:66px;height:8px;border-radius:999px;background:#204d47}
    .mini-hero{height:58%;margin-top:17px;border-radius:9px}
    .chaybom .mini-hero{background:linear-gradient(130deg,#78d4d0,#f5d36f)}
    .hl .mini-hero{background:linear-gradient(130deg,#07549a,#37bdd8)}
    .rene .mini-hero{background:linear-gradient(130deg,#392764,#a88cff)}
    .waguinho .mini-hero{background:linear-gradient(130deg,#2f4a32,#d1b46b)}
    .ponto .mini-hero{background:linear-gradient(130deg,#0a1f42,#ff5e17)}
    .mateus .mini-hero{background:linear-gradient(130deg,#4d2c1d,#d99b54)}
    .casalaser .mini-hero{background:linear-gradient(130deg,#093e38,#08aa98)}
    .uaifisco .mini-hero{background:linear-gradient(130deg,#3b671f,#e5a928)}
    .sabores .mini-hero{background:linear-gradient(130deg,#673149,#df728e)}
    .mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
    .mini-cards span{height:58px;border-radius:7px;background:#edf1ef}

    .project-details{
      display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden
    }
    .detail{background:#08100e;padding:25px}
    .detail small{display:block;font:500 .57rem "DM Mono";text-transform:uppercase;letter-spacing:.1em;color:#5f6d68}
    .detail strong{display:block;margin-top:8px;font-size:.84rem;line-height:1.45}
    .project-actions{display:flex;gap:14px;flex-wrap:wrap}
    .btn-main{
      display:inline-flex;align-items:center;gap:14px;padding:9px 9px 9px 18px;
      background:var(--green-contrast);color:#04241e;border-radius:999px;font-size:.76rem;font-weight:800
    }
    .btn-main span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#052e27;color:#fff}
    .btn-secondary{
      display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid #34423e;padding-bottom:5px;
      color:#a5b2ae;font-size:.75rem;font-weight:700
    }
    .btn-secondary i{font-size:.65rem;color:var(--green-contrast);transform:rotate(-45deg)}

    /* CTA */
    .cta{padding:20px 0 110px}
    .cta-shell{
      border:1px solid var(--line);border-radius:32px;padding:70px;
      background:linear-gradient(135deg,#081510,#07100e);position:relative;overflow:hidden
    }
    .cta-shell::after{
      content:"";position:absolute;width:390px;height:390px;border-radius:50%;
      right:-120px;top:-170px;background:radial-gradient(circle,rgba(5,181,157,.18),transparent 67%)
    }
    .cta h2{font-size:clamp(3rem,5vw,6rem);line-height:.9;letter-spacing:-.07em;max-width:840px;position:relative;z-index:2}
    .cta p{color:#84918d;max-width:600px;margin-top:25px;line-height:1.75;font-size:.88rem;position:relative;z-index:2}
    .cta .btn-main{margin-top:31px;position:relative;z-index:2}

    footer{
      width:var(--container);margin:auto;padding:36px 0 30px;border-top:1px solid var(--line);
      display:flex;justify-content:space-between;gap:25px;color:#63716c;
      font:400 .6rem "DM Mono";letter-spacing:.08em;text-transform:uppercase
    }

    [data-reveal]{opacity:0;transform:translateY(26px);transition:.75s var(--ease)}
    [data-reveal].visible{opacity:1;transform:none}

    .mobile-menu{
      display:none;position:fixed;inset:0;background:#040706;z-index:1200;padding:24px;
      flex-direction:column;justify-content:space-between
    }
    .mobile-menu.active{display:flex}
    .mobile-head{display:flex;justify-content:space-between}
    .mobile-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none}
    .mobile-links{display:grid;gap:16px}
    .mobile-links a{font-size:clamp(2.1rem,10vw,4.4rem);font-weight:800;letter-spacing:-.06em}

    @media(max-width:1100px){
      :root{--container:min(100% - 56px,1240px)}
      body{padding-left:0}
      .rail{display:none}
      .topbar{left:0}
      .top-nav a:not(.top-cta){display:none}
      .menu-btn{display:grid;place-items:center}
      .hero-grid,.project-header{grid-template-columns:1fr}
      .hero-side{max-width:620px}
      .project{grid-template-columns:70px 1fr}
    }

    @media(max-width:720px){
      :root{--container:calc(100% - 28px)}
      .topbar{height:76px}
      .top-brand span,.top-cta{display:none!important}
      .hero{padding:125px 0 90px;min-height:auto}
      h1{font-size:clamp(4.1rem,19vw,6.5rem)}
      h1 span{margin-left:0}
      .filter-bar{top:76px}
      .filter-inner{height:auto;min-height:78px;display:block;padding:15px 0}
      .filter-title{margin-bottom:12px}
      .projects-list{padding:80px 0 120px}
      .project{grid-template-columns:1fr;gap:15px;margin-bottom:85px;padding-bottom:85px}
      .project-index{padding:0}
      .project-main{gap:30px}
      .project h2{font-size:clamp(3.6rem,17vw,5.6rem)}
      .project-stage{min-height:520px}
      .browser{width:88%;height:61%;right:6%;top:10%}
      .stage-copy{left:23px;right:23px;bottom:25px}
      .project-details{grid-template-columns:1fr}
      .cta-shell{padding:45px 24px}
      footer{display:block;line-height:1.7}
      footer span:last-child{display:block;margin-top:8px}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    }

/* GS OFFICIAL LOGO */
.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.topbar .brand-logo img {
    height: 80px;
}
.rail .brand-logo {
    width: 58px;
    height: 58px;
    padding: 5px;
}
.rail .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mobile-menu .brand-logo {
    width: 180px;
    height: auto;
}
.mobile-menu .brand-logo img {
    width: 100%;
    height: auto;
}
@media (max-width: 900px) {
    .topbar .brand-logo img {
        height: 80px;
    }
}