:root {
  --denim: #315b83; --deep: #14263b; --washed: #7294b5; --paper: #f4e8d2; --ink: #171717;
  --yellow: #f5d547; --red: #e65b4f; --muted: #64707b; --line: rgba(23,23,23,.18);
  --display: "Permanent Marker", Impact, sans-serif; --note: "Caveat", cursive; --mono: "Space Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background-color: var(--denim); background-image: linear-gradient(rgba(49,91,131,.52), rgba(49,91,131,.52)), url("./denim.jpg"); background-position: center; background-size: cover; background-attachment: fixed; font-family: Inter, Arial, sans-serif; min-width: 320px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .14; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.3) 4px), repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.16) 6px); mix-blend-mode: overlay; z-index: 20; }
body:has(.page.systems-page) { background: #0c1724; color: #e9f2f7; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 30; background: var(--yellow); padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 2rem; padding: 1rem clamp(1rem, 4vw, 4rem); background: rgba(49,91,131,.94); color: white; border-bottom: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); }
.brand { display: grid; text-decoration: none; line-height: 1; min-width: 205px; }
.brand span { font: 2rem var(--display); letter-spacing: .08em; }
.brand small, .site-footer small, .fine-print { font: .62rem var(--mono); letter-spacing: .05em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(.7rem, 2vw, 1.8rem); flex: 1; }
.main-nav a { font: .72rem var(--mono); text-decoration: none; text-transform: uppercase; opacity: .8; }
.main-nav a:hover, .main-nav a.active { color: var(--yellow); opacity: 1; }
.header-actions { display: flex; gap: .6rem; }
.icon-button, .cart-button, .close-button { color: inherit; background: transparent; border: 1px solid currentColor; padding: .55rem .7rem; }
.cart-button b { background: var(--yellow); color: var(--ink); border-radius: 50%; padding: .1rem .35rem; margin-left: .3rem; }
.page { max-width: 1220px; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem); }
.hero { min-height: 72vh; display: grid; grid-template-columns: 1.25fr .75fr; gap: 4rem; align-items: center; }
.hero > div:first-child { padding: clamp(1.25rem, 3vw, 2rem); background: rgba(244,232,210,.72); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 12px 35px rgba(20,38,59,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.eyebrow, .section-kicker { font: .72rem var(--mono); letter-spacing: .14em; color: var(--red); text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: clamp(4rem, 12vw, 10rem)/.86 var(--display); letter-spacing: .02em; margin: .5rem 0 1.5rem; }
h2 { font: clamp(2rem, 5vw, 4.5rem)/.95 var(--display); letter-spacing: .02em; }
h3 { font-size: 1.1rem; }
.hero-copy { font-size: clamp(1.05rem, 2vw, 1.4rem); max-width: 34rem; line-height: 1.6; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--ink); text-decoration: none; padding: .8rem 1rem; font: .72rem var(--mono); text-transform: uppercase; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.button-primary { background: var(--yellow); }
.button-quiet { background: transparent; }
.full-width { width: 100%; }
.sticker { background: var(--yellow); padding: 1.5rem; transform: rotate(4deg); box-shadow: 5px 6px 0 rgba(0,0,0,.22); }
.sticker strong { display: block; font: 2.2rem var(--display); }
.sticker span { font: 1.35rem var(--note); }
.hero-card, .paper-card { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: clamp(1rem, 3vw, 2rem); box-shadow: 8px 8px 0 rgba(20,38,59,.55); }
.hero-card { transform: rotate(-3deg); }
.terminal { background: #101b25; color: #a7e7b5; border: 1px solid #6e8b9b; padding: 1rem; font: .75rem/1.7 var(--mono); min-height: 250px; }
.terminal-bar { display: flex; gap: .4rem; border-bottom: 1px solid #486071; padding-bottom: .7rem; margin-bottom: .8rem; color: #d7e3ea; }
.terminal-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--red); display: inline-block; }
.terminal-bar i:nth-child(2) { background: var(--yellow); }.terminal-bar i:nth-child(3) { background: #70c485; }
.terminal-line { color: #e9f2f7; }.prompt { color: #7dd7ff; }.cursor { color: #a7e7b5; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.terminal { cursor: text; }.terminal-line { display: flex; align-items: baseline; }.terminal-input { width: 1ch; min-width: 1ch; padding: 0; border: 0; outline: 0; background: transparent; color: #e9f2f7; font: inherit; caret-color: transparent; }
.terminal-output { scrollbar-width: none; -ms-overflow-style: none; overflow: hidden; }.terminal-output::-webkit-scrollbar { display: none; }.terminal-output div { white-space: pre-line; }.terminal-command { color: var(--yellow); font-weight: 700; }.terminal-response { color: #a7e7b5; }.home-terminal .terminal-output { max-height: 145px; }
.section { padding: 4rem 0; }.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; padding: 1rem; background: rgba(244,232,210,.66); box-shadow: 0 8px 25px rgba(20,38,59,.12); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.section-heading p { max-width: 30rem; line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { background: rgba(244,232,210,.94); color: var(--ink); border: 1px solid var(--ink); padding: 1.25rem; position: relative; }
.card:nth-child(2n) { transform: rotate(1deg); }.card:nth-child(3n) { transform: rotate(-1deg); }
.card p { line-height: 1.6; color: #3e454a; }.meta { color: var(--muted); font: .67rem var(--mono); text-transform: uppercase; }
.tag { display: inline-block; background: var(--washed); color: white; padding: .25rem .45rem; margin: .2rem .2rem 0 0; font: .62rem var(--mono); }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }.filter, .search { border: 1px solid var(--ink); background: rgba(244,232,210,.94); color: var(--ink); padding: .6rem .8rem; }.filter.active { background: var(--ink); color: var(--paper); }.search { min-width: 230px; }.search::placeholder { color: #4b555d; opacity: 1; }.button-whatsapp { background: #25d366; color: #073b1a; border-color: #073b1a; margin-top: .7rem; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; list-style: none; padding: 0; }.skill-list li { border-bottom: 1px dashed var(--line); padding: .5rem 0; font: .78rem var(--mono); }
.booth-banner { background: var(--red); color: white; padding: 1rem 1.3rem; display: inline-block; transform: rotate(-2deg); }.product-art { min-height: 190px; display: grid; place-items: center; background: #d3dce2; font: 3rem var(--display); color: var(--denim); margin: -1.25rem -1.25rem 1rem; }
.product-card { overflow: hidden; }.price { font: 1rem var(--mono); }.product-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center; padding: 2rem clamp(1rem, 4vw, 4rem); background: #14263b; color: white; font-size: .8rem; }.site-footer strong { font: 1.8rem var(--display); margin-right: 1rem; }.footer-links { display: flex; gap: 1rem; font: .68rem var(--mono); }.site-footer a:hover { color: var(--yellow); }
.cart-drawer { position: fixed; z-index: 25; right: 0; top: 0; height: 100%; width: min(390px, 100%); background: var(--paper); color: var(--ink); padding: 1.5rem; transform: translateX(100%); transition: transform .25s ease; box-shadow: -8px 0 25px rgba(0,0,0,.25); }.cart-drawer.open { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.drawer-header h2 { font-size: 2rem; }.drawer-backdrop { position: fixed; inset: 0; z-index: 24; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }.drawer-backdrop.open { opacity: 1; pointer-events: auto; }.cart-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--line); }.cart-total { display: flex; justify-content: space-between; padding: 1.5rem 0; font: 1rem var(--mono); }.fine-print { color: var(--muted); line-height: 1.5; }
.cart-button { display: none; }.booth-route .cart-button { display: inline-block; }.systems-page .hero > div:first-child, .systems-page .section-heading { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }.systems-page .hero-card, .systems-page .paper-card, .systems-page .card { background: #14263b; color: #e9f2f7; border-color: #587083; box-shadow: none; }.systems-page .card p { color: #b7c7d0; }.systems-page .button-quiet { border-color: #87b6ce; }.systems-page .meta { color: #8eb3c5; }.systems-page .section-heading { border-color: #587083; }.systems-page .search { background: #14263b; color: #e9f2f7; border-color: #87b6ce; }.systems-page .search::placeholder { color: #b7c7d0; }
@media (max-width: 800px) { .site-header { flex-wrap: wrap; gap: 1rem; }.brand { min-width: 0; margin-right: auto; }.main-nav { order: 3; overflow-x: auto; justify-content: flex-start; flex-basis: 100%; padding-bottom: .2rem; }.main-nav a { white-space: nowrap; }.hero { grid-template-columns: 1fr; min-height: auto; padding-top: 3rem; gap: 2rem; }.grid, .about-layout { grid-template-columns: 1fr 1fr; }.site-footer { grid-template-columns: 1fr; gap: .8rem; } }
@media (max-width: 520px) { .brand small, .header-actions span { display: none; }.grid, .about-layout { grid-template-columns: 1fr; }.section-heading { display: block; }.site-footer strong { display: block; margin-bottom: .5rem; }.footer-links { flex-wrap: wrap; } h1 { font-size: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }