/* NURB STUDIO — home page only (hero, marquee, about/NURBS wireframe, pillars,
   clients strip, founders, intro, portfolio grid). Requires css/style.css first. */
  /* ================= HERO ================= */
  .hero{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:140px 40px 100px;
    background:
      radial-gradient(ellipse 90% 60% at 30% 20%, rgba(216,255,61,.06), transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 80%, rgba(216,255,61,.04), transparent 60%),
      var(--void);
    overflow:hidden;
  }

  .hero-scanline{
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--signal), transparent);
    opacity:.5;
    animation:scan 6s linear infinite;
    pointer-events:none;
  }
  @keyframes scan{ 0%{ top:0; } 100%{ top:100%; } }

  .hero-frame{
    position:absolute; inset:24px;
    border:1px solid rgba(216,255,61,.15);
    pointer-events:none;
  }
  .hero-frame::before, .hero-frame::after{
    content:''; position:absolute; width:34px; height:34px;
    border:2px solid var(--signal);
  }
  .hero-frame::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
  .hero-frame::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }

  .hero-meta{
    position:absolute; top:24px; left:24px; right:24px;
    display:flex; justify-content:space-between;
    font-family:var(--mono); font-size:11px; color:var(--signal-dim);
    letter-spacing:.1em; text-transform:uppercase;
    padding:16px 20px;
  }

  .hero-content{ max-width:900px; margin-top:20px; }

  .hero h1{
    font-family:var(--display);
    font-size:clamp(42px, 7vw, 96px);
    line-height:.98;
    text-transform:uppercase;
    letter-spacing:.005em;
    margin:18px 0 26px;
  }
  .hero h1 .accent{ color:var(--signal); }

  .hero p.lede{
    font-size:18px;
    line-height:1.6;
    color:var(--ash);
    max-width:560px;
    margin-bottom:40px;
  }

  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

  .hero-services{
    margin-top:80px;
    display:flex; gap:0;
    border-top:1px solid var(--panel-line);
    flex-wrap:wrap;
  }
  .hero-services span{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ash-dim);
    padding:16px 20px 0 0; margin-right:20px;
  }

  /* ================= MARQUEE ================= */
  .marquee{
    border-top:1px solid var(--panel-line);
    border-bottom:1px solid var(--panel-line);
    padding:22px 0;
    overflow:hidden;
    white-space:nowrap;
  }
  .marquee-track{
    display:inline-flex;
    gap:48px;
    animation:marquee 90s linear infinite;
  }
  .marquee-track span{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ash-dim);
    display:inline-flex;
    align-items:center;
  }
  .marquee-track span::before{ content:'●'; color:var(--signal-dim); font-size:6px; margin-right:48px; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ================= ABOUT / NURBS ORIGIN ================= */
  .about{
    padding:130px 40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    border-bottom:1px solid var(--panel-line);
  }
  .about-curve{ position:relative; }
  .about-curve svg{ width:100%; height:auto; overflow:visible; }
  .mesh-svg{
    opacity:0; transition:opacity 1.6s cubic-bezier(.16,1,.3,1);
  }
  .is-in .mesh-svg{ opacity:1; }
  .mesh-line{ stroke:var(--ash); stroke-width:1; }
  .mesh-point{ fill:var(--void); stroke:var(--ash-dim); stroke-width:1.5; }
  .mesh-point.control{ fill:var(--signal); stroke:var(--signal); }
  .mesh-net{ stroke:var(--signal); stroke-width:1; stroke-dasharray:3 4; opacity:.35; }

  .curve-legend{
    display:flex; gap:22px; margin-top:14px;
    font-family:var(--mono); font-size:11px; color:var(--ash-dim);
    letter-spacing:.05em; text-transform:uppercase;
  }
  .curve-legend span{ display:flex; align-items:center; gap:7px; }
  .curve-legend .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--void); border:1.5px solid var(--ash-dim);
    display:inline-block; flex-shrink:0;
  }
  .curve-legend .dot.end{ background:var(--signal); border-color:var(--signal); }

  .about-text .eyebrow{ margin-bottom:22px; }
  .about-text h2{
    font-family:var(--display);
    font-size:clamp(30px, 3.6vw, 46px);
    text-transform:uppercase;
    line-height:1.05;
    margin-bottom:24px;
  }
  .about-text p{ color:var(--ash); font-size:16px; line-height:1.75; max-width:520px; }

  @media (max-width:900px){
    .about{ grid-template-columns:1fr; gap:56px; padding:90px 24px; }
  }

  /* ================= PILLARS ================= */
  .pillars{ border-top:1px solid var(--panel-line); }
  .pillar{
    display:block;
    padding:48px 0 48px 36px;
    border-bottom:1px solid var(--panel-line);
    border-left:3px solid var(--pillar-color, var(--signal));
  }
  .pillar h3{
    font-family:var(--display);
    font-size:clamp(28px, 3.4vw, 42px);
    text-transform:uppercase;
    color:var(--pillar-color, var(--signal));
    margin:10px 0 16px;
  }
  .pillar > p{ color:var(--ash); font-size:15px; line-height:1.7; max-width:620px; }
  .pillar-tags{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-top:22px;
  }
  .pillar-tags span{
    font-family:var(--mono); font-size:12px;
    border:1px solid var(--panel-line);
    padding:8px 13px;
    border-radius:2px;
    color:var(--paper);
    display:flex; align-items:center; gap:7px;
  }
  .pillar-tags span::before{
    content:''; width:6px; height:6px;
    background:var(--pillar-color, var(--signal));
    flex-shrink:0;
  }
  .pillar-practice{
    margin-top:18px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ash-dim);
    line-height:1.6;
    max-width:640px;
  }
  .pillar-practice b{ color:var(--pillar-color, var(--signal)); font-weight:600; }

  @media (max-width:800px){
    .pillar{ padding-left:20px; }
  }

  /* ================= CLIENTS STRIP ================= */
  .clients-strip{
    padding:70px 40px;
    text-align:center;
    border-bottom:1px solid var(--panel-line);
  }
  .clients-strip .names{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:20px 44px;
    font-family:var(--display);
    font-size:clamp(17px, 2.2vw, 26px);
    text-transform:uppercase;
    color:var(--paper);
    opacity:.82;
  }
  .clients-strip .tail{
    margin-top:22px;
    font-family:var(--mono);
    font-size:13px;
    color:var(--ash-dim);
    letter-spacing:.04em;
  }

  /* ================= FOUNDERS / SÓCIOS ================= */
  .founders{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:56px;
    align-items:start;
    padding-bottom:8px;
  }
  .founders-photo{
    aspect-ratio:4/3;
    background:var(--panel);
    position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .founders-photo img{
    width:100%; height:100%; object-fit:cover; object-position:center 22%;
    display:block;
  }
  .founders-photo .photo-note{
    font-family:var(--mono); font-size:11px; color:var(--ash-dim);
    text-transform:uppercase; letter-spacing:.06em; text-align:center; padding:0 24px;
  }
  .founders-lead{
    font-size:16px; color:var(--paper); font-weight:600; margin-bottom:28px; max-width:520px;
  }
  .founder-bio{ margin-bottom:18px; }
  .founder-bio:last-child{ margin-bottom:0; }
  .founder-bio h3{
    font-family:var(--display); font-size:22px; text-transform:uppercase;
    margin-bottom:0;
  }
  .founder-bio h3 span{
    font-family:var(--mono); font-size:12px; text-transform:uppercase;
    color:var(--ash-dim); letter-spacing:.04em; margin-left:4px;
  }
  .founder-link{
    display:inline-flex; align-items:center; gap:10px;
    transition:color .25s;
  }
  .founder-link::after{
    content:'in';
    font-family:var(--mono); font-size:11px; font-weight:700;
    color:var(--void); background:var(--ash-dim);
    width:20px; height:20px; border-radius:3px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .25s;
    flex-shrink:0;
  }
  .founder-link:hover{ color:var(--signal); }
  .founder-link:hover::after{ background:var(--signal); }
  .founder-link:hover span{ color:var(--signal); }

  @media (max-width:800px){
    .founders{ grid-template-columns:1fr; gap:28px; }
  }

  /* ================= EQUIPE / CREW CREDITS ================= */
  .crew{ border-top:1px solid var(--panel-line); }
  .crew-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:64px;
  }
  .crew-row{
    display:flex;
    align-items:baseline;
    gap:16px;
    padding:22px 0;
    border-bottom:1px solid var(--panel-line);
  }
  .crew-role{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ash-dim);
    white-space:nowrap;
    transition:color .3s;
  }
  .crew-leader{
    flex:1;
    border-bottom:2px dotted var(--panel-line);
    transform:translateY(-7px);
    transition:border-color .3s;
  }
  .crew-name{
    font-family:var(--display);
    font-size:clamp(17px, 2vw, 22px);
    text-transform:uppercase;
    letter-spacing:.01em;
    white-space:nowrap;
    transition:color .3s;
  }
  .crew-row:hover .crew-role{ color:var(--signal); }
  .crew-row:hover .crew-leader{ border-color:var(--signal-dim); }
  .crew-row:hover .crew-name{ color:var(--signal); }

  @media (max-width:700px){
    .crew-cols{ grid-template-columns:1fr; column-gap:0; }
    .crew-row{ flex-wrap:wrap; }
    .crew-leader{ display:none; }
  }

  /* ================= INTRO / SEGUNDA DOBRA ================= */
  .intro{
    padding:100px 40px;
    border-top:1px solid var(--panel-line);
    border-bottom:1px solid var(--panel-line);
  }
  .intro-lead{
    font-size:clamp(19px, 2.4vw, 28px);
    line-height:1.55;
    max-width:880px;
    color:var(--paper);
    font-weight:500;
  }
  .intro-close{
    font-size:clamp(19px, 2.4vw, 28px);
    line-height:1.55;
    max-width:880px;
    color:var(--ash);
    margin-top:24px;
    font-weight:500;
  }

  /* ================= PORTFOLIO ================= */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
  }
  .case{
    position:relative;
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    cursor:pointer;
    background:var(--panel);
  }
  .case-art{
    position:absolute; inset:0;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s;
    filter:saturate(.85) brightness(.8);
  }
  .case:hover .case-art{ transform:scale(1.07); filter:saturate(1.05) brightness(.95); }

  /* per-case gradients — each project gets its own distinct palette */
  .art-sentinela{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 20% 10%, #0fd6c4 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 90% 100%, #2a1063 0%, transparent 55%),
      #060812; }
  .art-montreux{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 90% 10%, #d68f2e 0%, transparent 55%),
      radial-gradient(ellipse 100% 80% at 0% 100%, #7a1010 0%, transparent 55%),
      #12080a; }
  .art-tim{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 85% 15%, #1b6bf4 0%, transparent 55%),
      radial-gradient(ellipse 100% 80% at 0% 100%, #0b1f6b 0%, transparent 55%),
      #04070f; }
  .art-orquestra{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 85% 15%, #e8a83d 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 10% 100%, #8a3620 0%, transparent 55%),
      #120a06; }
  .art-sesc{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 15% 90%, #29e0ff 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 100% 10%, #ff2e9c 0%, transparent 50%),
      #06060f; }
  .art-prudential{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 90% 90%, #7a2ed6 0%, transparent 55%),
      radial-gradient(ellipse 100% 80% at 5% 10%, #e0b23d 0%, transparent 50%),
      #0a0612; }
  .art-lamoda{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 20% 15%, #ff2ea6 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 95% 95%, #1b6bf4 0%, transparent 55%),
      #0a0510; }
  .art-lobato{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 15% 100%, #b6ff3d 0%, transparent 45%),
      radial-gradient(ellipse 100% 80% at 100% 0%, #3dc7ff 0%, transparent 50%),
      #06100a; }
  .art-dmx{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 85% 10%, #8a2ed6 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 5% 100%, #2ee0d6 0%, transparent 50%),
      #060812; }
  .art-delas{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 10% 10%, #ff3d8a 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 95% 100%, #e8c23d 0%, transparent 45%),
      #120610; }
  .art-baly{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 90% 10%, #1b2fbf 0%, transparent 55%),
      radial-gradient(ellipse 100% 80% at 10% 95%, #7a1fd6 0%, transparent 50%),
      #05050f; }
  .art-matinais{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 15% 15%, #1b6bf4 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 95% 95%, #ff8a3d 0%, transparent 50%),
      #05070f; }
  .art-brax{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 10% 100%, #1f7a4f 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 95% 10%, #e0b23d 0%, transparent 45%),
      #051009; }
  .art-startup{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 85% 85%, #1b8bf4 0%, transparent 55%),
      radial-gradient(ellipse 100% 80% at 10% 10%, #6a1fd6 0%, transparent 50%),
      #05070f; }
  .art-af26{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 15% 10%, #ff2e9c 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 95% 95%, #2ee0ff 0%, transparent 50%),
      #08050f; }
  .art-flufest{ background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      radial-gradient(ellipse 110% 90% at 20% 100%, #ff6a3d 0%, transparent 50%),
      radial-gradient(ellipse 100% 80% at 100% 0%, #6a1fd6 0%, transparent 50%),
      #0f0508; }

  .case-scan{
    position:absolute; inset:0;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.25) 3px 4px);
    opacity:0; transition:opacity .4s;
    pointer-events:none;
  }
  .case:hover .case-scan{ opacity:1; }

  .case-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(4,5,4,.92) 0%, rgba(4,5,4,.35) 45%, transparent 70%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:28px;
  }
  .case-top{
    position:absolute; top:20px; left:20px; right:20px;
    display:flex; justify-content:space-between; align-items:flex-start;
  }
  .case-tag{
    font-family:var(--mono); font-size:11px; color:var(--signal);
    letter-spacing:.1em; text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .play{
    width:44px; height:44px; border-radius:50%;
    border:1.5px solid rgba(242,244,236,.5);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.85);
    transition:opacity .4s, transform .4s, border-color .4s;
  }
  .case:hover .play{ opacity:1; transform:scale(1); border-color:var(--signal); }
  .play::before{
    content:''; width:0; height:0;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
    border-left:10px solid var(--paper); margin-left:3px;
  }

  .case h3{
    font-family:var(--display);
    font-size:26px;
    text-transform:uppercase;
    transform:translateY(8px);
    opacity:.85;
    transition:transform .4s, opacity .4s;
  }
  .case:hover h3{ transform:translateY(0); opacity:1; }
  .case p{ font-family:var(--mono); font-size:12px; color:var(--ash); margin-top:6px; letter-spacing:.04em; }

  @media (max-width:980px){
    .portfolio-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px){
    .portfolio-grid{ grid-template-columns:1fr; }
  }