/* Matrix green, from a code mark to the user's website builder. */
.tr-cinema { height: 300svh; }
.tr-cinema-track { height: 100%; }
#tr-intro { scroll-margin-top: 72px; }
.tr-cinema-footer { right: max(290px,calc((100% - 1320px)/2)); }
.tr-original-copy { opacity: 1!important; transform: none!important; }
.tr-mobile-space { display: none; }
.tr-brand-caption { position: absolute; z-index: 3; top: calc(50% + 240px); left: 52%; right: 3.5%; display: grid; justify-items: center; gap: 7px; pointer-events: none; opacity: 0; }
.tr-brand-caption span { font: 500 15px 'DM Mono',monospace; letter-spacing: .27em; color: #a9f4b1; }
.tr-brand-caption small { font: 400 13px 'Manrope',sans-serif; color: #91b09a; }
.tr-matrix-fallback { top: 26%; right: 6%; width: 36%; opacity: .7; }
.tr-matrix-fallback img { width: 100%; height: auto; }
.tr-live-product { --paper: 0; position: absolute; top: 50%; right: 3.5%; width: min(650px,44vw); height: auto; z-index: 5; opacity: 0; transform: translateY(-50%); transform-origin: center; border: 1px solid #8afa8c4f; border-radius: 12px; color: #edfbe9; background: rgb(3 14 8 / calc(var(--paper)*.91)); box-shadow: 0 30px 100px #0006,0 0 65px #59f87c12,inset 0 0 30px #80ff8910; will-change: transform,opacity; font-family: 'Manrope',sans-serif; }
.tr-live-product [data-build-piece] { opacity: 0; will-change: opacity,transform; }
.tr-ai-heading { height: 65px; display: flex; align-items: center; justify-content: space-between; margin: 0 25px; border-bottom: 1px solid #7df28c25; }
.tr-ai-brand { display: flex; align-items: center; gap: 10px; }
.tr-ai-symbol { font-size: 25px; color: #baff55; }
.tr-ai-brand strong { font-size: 17px; letter-spacing: -.035em; font-weight: 650; }
.tr-ai-brand em { font-style: normal; color: #baff55; }
.tr-ai-live { font: 400 11px 'DM Mono',monospace; color: #91bc97; letter-spacing: .05em; }
.tr-ai-intro { padding: 20px 25px 17px; }
.tr-ai-intro h2 { font-size: 23px; line-height: 1.2; margin: 0; font-weight: 550; letter-spacing: -.035em; color: #ebfbe6; }
.tr-ai-intro p { font-size: 13px; line-height: 1.5; color: #91ad96; margin: 6px 0 0; }
.tr-ai-browser { margin: 0 25px; border: 1px solid #9ef99b5c; border-radius: 6px; overflow: hidden; background: #06110a; box-shadow: 0 0 25px #92ff8310; }
.tr-ai-address { height: 29px; display: flex; align-items: center; gap: 12px; padding: 0 13px; background: #101f14; color: #91ac98; font: 10px 'DM Mono',monospace; border-bottom: 1px solid #86d5892a; }
.tr-ai-address span:first-child { color: #a6eb84; }
.tr-ai-address span:last-child { margin-left: auto; font-size: 9px; letter-spacing: .04em; }
.tr-ai-website { --accent: #baff55; --ink: #edffe5; --sub: #a4b59f; --surface: #08150e; --edge: #baff5533; height: 268px; position: relative; overflow: hidden; isolation: isolate; background: var(--surface); color: var(--ink); transition: background .35s,color .35s; }
.tr-ai-website[data-palette='ghiaccio'] { --accent: #8bd8fa; --ink: #edf8ff; --sub: #afc3d3; --surface: #0b1620; --edge: #8bd8fa40; }
.tr-ai-website[data-palette='ambra'] { --accent: #ffc87d; --ink: #fff5e7; --sub: #c2b6a8; --surface: #1c130c; --edge: #ffc87d40; }
.tr-ai-webnav { height: 40px; margin: 0 21px; border-bottom: 1px solid var(--edge); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.tr-ai-webnav strong { font: 700 10px/1.1 'Manrope',sans-serif; letter-spacing: .02em; }
.tr-ai-webnav strong span { font-weight: 400; margin-left: 3px; }
.tr-ai-webnav > span { font-size: 9px; color: var(--sub); }
.tr-ai-webhero { position: relative; z-index: 2; padding: 19px 21px 0; }
.tr-ai-webeyebrow { display: block; color: var(--sub); font: 8px/1.3 'DM Mono',monospace; letter-spacing: .02em; }
.tr-ai-webhero h3 { margin: 9px 0 0; font: 550 37px/.97 'Manrope',sans-serif; letter-spacing: -.055em; color: var(--ink); }
.tr-ai-webhero h3 em { color: var(--accent); font-style: normal; }
.tr-ai-webhero p { font: 11px/1.45 'Manrope',sans-serif; color: var(--sub); margin: 9px 0 0; }
.tr-ai-webcta { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 4px 11px; color: #10200a; background: var(--accent); margin-top: 11px; border-radius: 2px; font: 600 10px/1.4 'Manrope',sans-serif; }
.tr-ai-websignature { position: absolute; top: 46px; right: 18px; font: 500 184px/1 'Manrope',sans-serif; letter-spacing: -.09em; color: var(--accent); opacity: .19; transform: rotate(-8deg); transition: transform .4s,opacity .4s; }
.tr-ai-websignature > span { position: absolute; font-size: 17px; top: 13px; right: -8px; letter-spacing: 0; }
.tr-ai-webfooter { position: absolute; bottom: 11px; left: 21px; right: 21px; display: flex; justify-content: space-between; font: 8px 'DM Mono',monospace; color: var(--sub); }
.tr-ai-website[data-style='deciso'] .tr-ai-webhero { padding-top: 17px; }
.tr-ai-website[data-style='deciso'] .tr-ai-webhero h3 { font-weight: 850; text-transform: uppercase; font-size: 38px; letter-spacing: -.055em; }
.tr-ai-website[data-style='deciso'] .tr-ai-websignature { transform: rotate(0) translateX(9px); opacity: .45; }
.tr-ai-website[data-style='deciso'] .tr-ai-webhero p { display: none; }
.tr-ai-website[data-style='deciso'] .tr-ai-webcta { margin-top: 20px; min-height: 33px; padding-inline: 21px; }
.tr-ai-website[data-style='immersivo'] { background: radial-gradient(ellipse at 80% 55%,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface) 70%); }
.tr-ai-website[data-style='immersivo'] .tr-ai-webhero { text-align: center; padding-top: 16px; }
.tr-ai-website[data-style='immersivo'] .tr-ai-webhero h3 { font: 400 43px/.98 Georgia,serif; letter-spacing: -.055em; }
.tr-ai-website[data-style='immersivo'] .tr-ai-webhero p { display: none; }
.tr-ai-website[data-style='immersivo'] .tr-ai-webcta { margin-top: 17px; border-radius: 20px; padding-inline: 20px; }
.tr-ai-website[data-style='immersivo'] .tr-ai-websignature { top: 35px; right: 16%; font-size: 245px; opacity: .065; transform: rotate(10deg); }
.tr-ai-scan { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 14px; background: linear-gradient(0deg,transparent,#a8ff8250,transparent); border-bottom: 1px solid #baff55b8; opacity: 0; pointer-events: none; }
.tr-ai-options { padding: 16px 25px 0; }
.tr-ai-styles { display: flex; gap: 7px; }
.tr-ai-styles button { min-width: 0; flex: 1; min-height: 37px; padding: 7px; font: 500 13px/1.4 'Manrope',sans-serif; border: 1px solid #81d88938; border-radius: 4px; background: #0c1c10; color: #a8bda9; cursor: pointer; }
.tr-ai-styles button[aria-pressed='true'] { border-color: #a5f6799c; color: #c6ffa2; background: #8ffa6617; box-shadow: inset 0 0 17px #a3f57309; }
.tr-ai-styles button:hover { border-color: #baff5599; color: #edffe8; }
.tr-ai-palette-row { display: flex; align-items: center; gap: 9px; min-height: 46px; color: #91ad96; font-size: 12px; }
.tr-ai-palettes { display: flex; gap: 1px; }
.tr-ai-palettes button { display: grid; place-items: center; width: 32px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.tr-ai-palettes button span { width: 15px; height: 15px; border-radius: 50%; background: #baff55; }
.tr-ai-palettes button[data-site-palette='ghiaccio'] span { background: #8bd8fa; }
.tr-ai-palettes button[data-site-palette='ambra'] span { background: #ffc87d; }
.tr-ai-palettes button[aria-pressed='true'] span { outline: 1px solid #cfebc9; outline-offset: 4px; }
.tr-ai-selection { margin-left: auto; color: #93b397; font-size: 11px; }
.tr-ai-bottom { min-height: 51px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border-top: 1px solid #7df28c25; color: #91ad96; font-size: 12px; }
.tr-ai-bottom a { color: #ceffaa; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #97ff7066; padding-block: 13px; white-space: nowrap; }
.tr-ai-bottom a:hover { color: #f1ffe9; }
.tr-live-product button:focus-visible,.tr-live-product a:focus-visible { outline: 2px solid #baff55; outline-offset: 3px; }
@media(min-width:701px) and (max-width:1100px) { .tr-live-product { right: 3%; width: 45vw; } .tr-ai-heading { margin-inline: 18px; } .tr-ai-intro,.tr-ai-options,.tr-ai-bottom { padding-inline: 18px; } .tr-ai-browser { margin-inline: 18px; } .tr-ai-live { font-size: 9px; } .tr-ai-intro h2 { font-size: 21px; } .tr-ai-bottom > span { max-width: 150px; } }
@media(min-width:701px) and (max-height:790px) { .tr-live-product { top: 52%; height: auto; } .tr-ai-heading { height: 53px; } .tr-ai-intro { padding-top: 14px; padding-bottom: 12px; } .tr-ai-options { padding-top: 12px; } }
@media(max-width:700px) {
  .tr-cinema { height: auto; }
  .tr-cinema-track { height: calc(var(--scene-size,100svh) + 155svh); }
  .tr-cinema-view { position: sticky; top: 0; height: 100svh; min-height: var(--scene-min-height,810px); }
  .tr-film-act.tr-original-copy { padding: 60px 24px 64px; background: radial-gradient(ellipse at 80% 0%,#10321b55,transparent 65%),#070a08; }
  .tr-live-product { top: 96px; right: 18px; width: calc(100% - 36px); height: auto; border-radius: 10px; transform: none; }
  .tr-ai-heading { height: 59px; margin-inline: 17px; }
  .tr-ai-brand { gap: 7px; }
  .tr-ai-brand strong { font-size: 17px; }
  .tr-ai-live { font-size: 9px; }
  .tr-ai-intro { padding: 19px 17px 17px; }
  .tr-ai-intro h2 { font-size: 23px; max-width: 250px; }
  .tr-ai-intro p { font-size: 13px; max-width: 250px; }
  .tr-ai-browser { margin-inline: 17px; }
  .tr-ai-website { height: 267px; }
  .tr-ai-address { gap: 8px; padding-inline: 10px; font-size: 9px; }
  .tr-ai-address span:last-child { font-size: 8px; }
  .tr-ai-webhero,.tr-ai-webhero[data-style] { padding-inline: 17px; }
  .tr-ai-webhero h3 { font-size: 36px; }
  .tr-ai-websignature { right: 4px; opacity: .11; }
  .tr-ai-webnav { margin-inline: 17px; }
  .tr-ai-webfooter { left: 17px; right: 17px; }
  .tr-ai-webfooter span:first-child { max-width: 205px; }
  .tr-ai-website[data-style='deciso'] .tr-ai-webhero h3 { font-size: 35px; }
  .tr-ai-website[data-style='deciso'] .tr-ai-websignature { opacity: .18; }
  .tr-ai-options { padding: 16px 17px 0; }
  .tr-ai-styles button { font-size: 12px; min-height: 40px; padding-inline: 3px; }
  .tr-ai-palette-row { min-height: 48px; gap: 6px; }
  .tr-ai-selection { font-size: 10px; }
  .tr-ai-bottom { min-height: 58px; padding-inline: 17px; font-size: 11px; }
  .tr-ai-bottom > span { max-width: 145px; }
  .tr-ai-bottom a { font-size: 12px; }
  .tr-brand-caption { top: calc(46% + 150px); left: 18px; right: 18px; }
  .tr-brand-caption span { font-size: 14px; }
  .tr-brand-caption small { font-size: 12px; }
  .tr-matrix-shade { background: linear-gradient(0deg,#070a08 0%,transparent 25%,transparent 72%,#050a07b8 100%); }
  .tr-cinema-footer { left: 18px; right: 84px; bottom: 18px; gap: 12px; }
  .tr-scroll-cue { flex: 1; min-width: 0; max-width: 175px; text-align: left; line-height: 1.45; font-size: 11px; }
  .tr-film-controls { gap: 12px; flex-shrink: 0; }
  .tr-motion-toggle,.tr-skip-intro { font-size: 11px; }
  .whatsapp-contact { right: max(14px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); width: 54px; min-height: 54px; padding: 7px; }
  .whatsapp-contact-icon { width: 38px; height: 38px; }
  .whatsapp-contact-copy { display: none; }
}
@media(prefers-reduced-motion:reduce) { .tr-cinema { height: auto; } .tr-cinema-view { min-height: 790px; } .tr-live-product { opacity: 1; } .tr-live-product [data-build-piece] { opacity: 1; } .tr-brand-caption { display: none; } .tr-ai-website,.tr-ai-websignature { transition: none; } }
@media(max-width:700px) and (prefers-reduced-motion:reduce) { .tr-cinema-track { height: auto; } .tr-cinema-view { position: relative; min-height: var(--scene-min-height,810px); } }
