:root {
  --color-bg: #050607;
  --color-bg-soft: #0a0d0f;
  --color-bg-raised: #111416;
  --color-white: #fff;
  --color-paper: #fff;
  --color-text: #1d2022;
  --color-muted: #687075;
  --color-green: #75c900;
  --color-green-dark: #4f9200;
  --color-border: #2b3033;
  --container: 1180px;
  --shadow: 0 12px 36px rgba(0,0,0,.1);
  --radius: 5px;
  --heading: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-white); font-family: var(--body); font-size: 16px; line-height: 1.62; overflow-x: hidden; }
body.nav-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-green); outline-offset: 4px; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; transform: translateY(-150%); background: var(--color-green); color: #071000; padding: 10px 16px; font-weight: 800; }
.skip-link:focus { transform: none; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; }

h1, h2, h3 { margin: 0; font-family: var(--heading); font-weight: 900; text-transform: uppercase; line-height: .98; letter-spacing: -.018em; }
h1 { font-size: clamp(3.4rem, 6vw, 6.7rem); }
h2 { font-size: clamp(2.2rem, 3.2vw, 3.5rem); }
h3 { font-size: 1.32rem; }
h1 span, h2 span, .hero-accent, .section-label { color: var(--color-green); }
h1 .hero-lock { color: #fff; white-space: nowrap; }
h1 .hero-lock b { color: var(--color-green); font-weight: inherit; }
p { margin: 0 0 1.2rem; }
.accent-line { display: block; width: 54px; height: 3px; margin: 20px 0 22px; background: var(--color-green); }
.centered { text-align: center; }
.centered .accent-line { margin-inline: auto; }
.section-label { margin: 0 0 12px; font-size: .82rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.section-heading { margin-bottom: 42px; }
.section-heading p:not(.section-label) { margin: 18px auto 0; color: #6d7377; max-width: 650px; }
.section { padding: 72px 0; }
.section-light { background: var(--color-paper); color: var(--color-text); }
.section-dark { background: linear-gradient(115deg, #080a0b, #111619); color: var(--color-white); }
.section-dark .section-heading p { color: #aeb5b8; }

.btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 13px 23px; border: 1px solid transparent; border-radius: 4px; font-family: var(--heading); font-size: .98rem; font-weight: 900; line-height: 1; letter-spacing: .025em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 19px; }
.btn-primary { background: var(--color-green); color: #101708; box-shadow: 0 9px 28px rgba(117,201,0,.18); }
.btn-primary:hover { background: #88db12; }
.btn-dark { background: #07090a; color: var(--color-white); border-color: #07090a; }
.btn-dark:hover { background: #191d1f; }
.btn-outline { background: rgba(0,0,0,.14); color: var(--color-white); border-color: rgba(255,255,255,.65); }
.btn-outline:hover { border-color: var(--color-green); color: var(--color-green); }
.btn-outline-dark { border: 1px solid #a6bd8f; color: #16200f; background: transparent; }

.site-header { height: 88px; position: sticky; top: 0; z-index: 100; background: rgba(3,4,5,.96); border-bottom: 1px solid rgba(255,255,255,.04); backdrop-filter: blur(12px); }
.nav-shell { height: 100%; display: flex; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; line-height: 1; }
.brand-mark { width: 47px; color: var(--color-green); }
.brand-mark svg { width: 100%; display: block; }
.brand-image { width: auto; height: 54px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; font-family: var(--heading); font-weight: 900; letter-spacing: .018em; }
.brand-copy strong { color: #fff; font-size: 1.45rem; }
.brand-copy b { color: var(--color-green); font-size: .95rem; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(17px, 2vw, 32px); }
.site-nav a { position: relative; padding: 32px 0 29px; color: #fff; font-family: var(--heading); font-size: .86rem; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 23px; height: 2px; background: var(--color-green); transition: right .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-green); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.nav-quote { min-width: 180px; white-space: nowrap; }
.nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid #394043; color: #fff; background: #0c1012; border-radius: 4px; }

.page-hero { position: relative; min-height: 480px; isolation: isolate; background: #030405; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--hero-image); background-size: cover; background-position: center; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #030405 0%, rgba(3,4,5,.93) 31%, rgba(3,4,5,.23) 66%, rgba(3,4,5,.02) 100%); }
.page-hero-inner { min-height: inherit; display: flex; align-items: center; }
.page-hero-copy { width: min(570px, 52%); padding: 55px 0 60px; }
.page-hero-copy h1 { font-size: clamp(3.7rem, 5.5vw, 5.9rem); }
.page-hero-copy .hero-accent { margin: 15px 0 0; font-family: var(--heading); font-size: clamp(1.45rem, 2vw, 2.1rem); font-weight: 900; letter-spacing: .015em; text-transform: uppercase; }
.hero-copy { max-width: 550px; color: #e0e4e5; font-size: 1.02rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 28px; }
.home-hero { min-height: 650px; }
.home-hero .page-hero-copy { width: min(620px, 54%); padding-top: 24px; }
.home-hero .page-hero-copy h1 { font-size: clamp(3.15rem, 4vw, 4.35rem); }
.home-hero::before { background-position: center; }

.hero-benefits { margin-top: -74px; position: relative; z-index: 2; }
.benefit-row { width: min(calc(100% - 48px), 600px); margin-left: max(24px, calc(50% - 590px)); display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.benefit-row div { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-family: var(--heading); font-size: .7rem; font-weight: 850; line-height: 1.25; text-transform: uppercase; }
.benefit-row .icon { width: 30px; height: 30px; color: var(--color-green); }

.product-showcase { padding-top: 82px; }
.home-product-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; margin-bottom: 38px; }
.home-product { text-align: center; }
.home-product img { width: 100%; aspect-ratio: 1.13; object-fit: cover; background: #f7f7f7; transition: transform .25s ease; }
.home-product:hover img { transform: translateY(-5px); }
.home-product h3 { margin-top: 16px; font-size: 1rem; }
.custom-feature { background: radial-gradient(circle at 84% 40%, #1c262a 0, #0e1316 37%, #050607 73%); overflow: hidden; }
.custom-feature-grid { min-height: 450px; display: grid; grid-template-columns: .88fr 1.5fr; align-items: center; }
.custom-feature-grid > div:first-child { padding: 60px 0; position: relative; z-index: 2; }
.custom-feature h2 { font-size: clamp(2.6rem,4vw,4rem); }
.custom-feature p { color: #c8cecf; max-width: 410px; }
.check-list { padding: 0; margin: 24px 0 28px; list-style: none; }
.check-list li { margin: 8px 0; }
.check-list li::before { content: "✓"; color: var(--color-green); margin-right: 10px; font-weight: 900; }
.custom-feature-media { align-self: stretch; min-height: 450px; position: relative; }
.custom-feature-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#080b0d 0%,transparent 34%); z-index: 1; }
.custom-feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.reason-grid { display: grid; gap: 22px; }
.reason-grid.five { grid-template-columns: repeat(5,1fr); }
.reason-grid.three { grid-template-columns: repeat(3,1fr); }
.reason-card { min-height: 235px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 24px; border: 1px solid #e4e7e8; box-shadow: 0 4px 18px rgba(0,0,0,.045); text-align: center; background: #fff; }
.reason-card .icon { width: 48px; height: 48px; margin-bottom: 22px; color: var(--color-green); }
.reason-card h3 { margin-bottom: 12px; font-size: 1.2rem; }
.reason-card p { margin: 0; color: #646b6f; font-size: .88rem; line-height: 1.55; }
.reason-card.horizontal { min-height: 160px; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 23px; text-align: left; }
.reason-card.horizontal .icon { flex: 0 0 55px; }
.work-preview { padding: 72px 0; background: radial-gradient(circle at 74% 48%,#182125,#060809 65%); }
.work-preview-grid { display: grid; grid-template-columns: 270px 1fr; gap: 55px; align-items: center; }
.work-copy h2 { font-size: 3.3rem; }
.work-images { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.work-images img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border: 1px solid #394144; transition: transform .2s ease, border-color .2s ease; }
.work-images a:hover img { transform: scale(1.02); border-color: var(--color-green); }

.story-section { background: #fff; color: var(--color-text); }
.story-grid { min-height: 480px; display: grid; grid-template-columns: .9fr 1.25fr; align-items: stretch; }
.story-copy { padding: 72px 70px 70px 0; align-self: center; }
.story-copy p:not(.section-label) { color: #4f565a; }
.story-image { position: relative; min-height: 480px; clip-path: polygon(14% 0,100% 0,100% 100%,0 100%); }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.story-image strong { position: absolute; top: 78px; right: 42px; color: #fff; font: 900 2.3rem/1.08 var(--heading); text-align: right; text-transform: uppercase; text-shadow: 0 3px 15px #000; }
.story-image strong span { color: var(--color-green); }
.values-section { padding: 58px 0 62px; }
.value-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.value-grid.five { grid-template-columns: repeat(5,1fr); }
.value-grid.six { grid-template-columns: repeat(6,1fr); }
.value-grid article { min-width: 0; padding: 0 28px; border-right: 1px solid #40474a; text-align: center; }
.value-grid article:last-child { border-right: 0; }
.value-grid .icon { width: 52px; height: 52px; color: var(--color-green); margin-bottom: 20px; }
.value-grid h3 { margin-bottom: 12px; font-size: 1.12rem; }
.value-grid p { margin: 0; color: #c6ccce; font-size: .85rem; line-height: 1.55; }
.two-columns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 65px; }
.two-columns.align-center { align-items: center; }
.audience-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; padding: 0; list-style: none; }
.audience-list li::before { content: "◇"; color: var(--color-green); margin-right: 10px; font-size: 1.35rem; }
.process-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.process-row article { position: relative; text-align: center; }
.process-row article > span { width: 72px; height: 72px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--color-green); background: #0d1113; font: 900 1.15rem var(--heading); }
.process-row article:not(:last-child)::after { content: ""; position: absolute; top: 36px; left: calc(50% + 47px); width: calc(100% - 72px); height: 1px; background: #b8c5ae; }
.process-row h3 { margin-bottom: 9px; font-size: 1.05rem; }
.process-row p { font-size: .8rem; line-height: 1.5; color: #575e62; }
.process-row.large .icon { width: 42px; height: 42px; color: var(--color-green); margin: -7px auto 14px; display: block; }
.section-dark .process-row p { color: #c4cbcd; }

.stats-band { padding: 46px 0; background: linear-gradient(rgba(4,6,5,.89),rgba(4,6,5,.89)), url('../images/hero/custom-soccer-kits-stadium.webp') center 76%/cover; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { min-height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #566056; text-align: center; }
.stat:last-child { border-right: 0; }
.stat .icon { width: 45px; height: 45px; color: var(--color-green); }
.stat strong { margin: 7px 0 2px; color: var(--color-green); font: 900 clamp(2.25rem,3.5vw,3.8rem)/1 var(--heading); }
.stat small { font-size: .93rem; }

.category-rail { background: linear-gradient(100deg,#07090a,#151a1d); border-block: 1px solid #4a5154; overflow-x: auto; }
.category-rail-inner { width: max-content; min-width: min(100%, var(--container)); display: flex; }
.category-rail a { min-width: 132px; min-height: 115px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-right: 1px solid #3b4144; font: 850 .73rem var(--heading); text-transform: uppercase; }
.category-rail a .icon { width: 32px; height: 32px; }
.category-rail a:hover, .category-rail a.active { color: var(--color-green); box-shadow: inset 0 -4px var(--color-green); }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.product-card { border: 1px solid #e3e6e7; background: #fff; box-shadow: 0 7px 24px rgba(0,0,0,.055); }
.product-image { display: block; overflow: hidden; background: #f7f7f7; }
.product-image img { width: 100%; aspect-ratio: 1.17; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-card-body { padding: 20px 20px 22px; }
.product-card h3 { margin-bottom: 8px; font-size: 1.4rem; }
.product-card p { min-height: 66px; color: #5f666a; font-size: .87rem; line-height: 1.5; }
.btn-card { width: 100%; min-height: 42px; padding: 10px 14px; justify-content: space-between; background: #07090a; color: #fff; font-size: .8rem; }
.btn-card .icon { color: var(--color-green); }
.quality-band { padding: 55px 0; background: linear-gradient(90deg,#050607 0,#0b0e10 78%,#142112); }
.quality-grid { display: grid; grid-template-columns: 1.45fr repeat(4,1fr); align-items: center; }
.quality-grid > div { padding-right: 40px; }
.quality-grid h2 { font-size: 2.4rem; }
.quality-grid > div p { color: #aeb4b6; font-size: .88rem; }
.quality-grid article { min-height: 155px; padding: 15px 25px; border-left: 1px solid #3b4245; text-align: center; }
.quality-grid article .icon { width: 43px; height: 43px; color: var(--color-green); }
.quality-grid article h3 { margin: 13px 0 8px; font-size: .95rem; }
.quality-grid article p { color: #c4c9cb; font-size: .75rem; line-height: 1.5; }

.how-it-works { padding-block: 40px 50px; }
.kit-builder { padding: 65px 0; --kit-primary: #75c900; --kit-secondary: #080a0b; background: radial-gradient(circle at 70% 35%,#182024,#080a0b 58%); }
.builder-heading { margin-bottom: 24px; }
.builder-heading p { margin-top: 9px; color: #adb4b6; }
.builder-shell { display: grid; grid-template-columns: 1.05fr 1.1fr; border: 1px solid #3a4246; background: rgba(6,8,9,.72); }
.builder-controls { min-width: 0; display: grid; grid-template-columns: 178px 1fr; border-right: 1px solid #3a4246; }
.builder-tabs { display: flex; flex-direction: column; border-right: 1px solid #3a4246; }
.builder-tabs button { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 13px 17px; border: 0; border-bottom: 1px solid #2d3336; background: transparent; color: #fff; font: 850 .78rem var(--heading); text-align: left; text-transform: uppercase; cursor: pointer; }
.builder-tabs button[aria-selected="true"] { color: var(--color-green); background: #111718; box-shadow: inset 3px 0 var(--color-green); }
.builder-tabs .icon { width: 20px; }
.builder-panel { min-height: 485px; padding: 28px 24px; }
.builder-panel h3 { margin-bottom: 8px; }
.builder-panel p { color: #aeb4b6; font-size: .86rem; }
.builder-panel label { display: block; margin: 22px 0 9px; font-size: .83rem; font-weight: 750; }
.builder-panel input[type="text"], .builder-panel input[type="number"], .builder-panel input:not([type]) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #4b5458; border-radius: 3px; background: #0d1113; color: #fff; }
.file-control { padding: 18px; border: 1px dashed #596367; }
.file-control input { display: block; margin-top: 12px; max-width: 100%; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches button { width: 34px; height: 34px; padding: 0; border: 2px solid #687175; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.swatches button.active { outline: 3px solid var(--color-green); outline-offset: 2px; }
.pattern-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pattern-options button { min-height: 42px; border: 1px solid #4a5357; color: #fff; background: #0d1113; font: 800 .8rem var(--heading); text-transform: uppercase; }
.pattern-options button.active { color: var(--color-green); border-color: var(--color-green); }
.builder-preview { min-width: 0; display: flex; flex-direction: column; }
.preview-toolbar { padding: 11px 14px; border-bottom: 1px solid #3a4246; text-align: right; }
.preview-toolbar button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #465055; color: #fff; background: transparent; padding: 8px 13px; font: 800 .76rem var(--heading); text-transform: uppercase; }
.kit-stage { min-height: 500px; display: grid; place-items: center; background: radial-gradient(circle,#283035 0,#121719 58%,#090c0d 100%); }
.kit-svg { width: min(84%, 455px); max-height: 500px; filter: drop-shadow(0 18px 20px rgba(0,0,0,.45)); }
.kit-name { fill: #fff; font: 800 22px var(--heading); letter-spacing: 2px; }
.kit-number, .short-number { fill: #fff; font: 900 108px var(--heading); paint-order: stroke; stroke: rgba(0,0,0,.32); stroke-width: 2px; }
.short-number { font-size: 52px; }
.kit-svg.font-block .kit-number, .kit-svg.font-block .kit-name { font-family: Arial Black, sans-serif; }
.kit-svg.font-classic .kit-number, .kit-svg.font-classic .kit-name { font-family: Georgia, serif; }
.builder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-top: 1px solid #3a4246; }
.builder-status { grid-column: 1/-1; margin: 0; color: var(--color-green); font-size: .8rem; text-align: center; }
.builder-status:empty { display: none; }

.testimonials { padding-top: 58px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.testimonial-grid blockquote { margin: 0; padding: 27px; border: 1px solid #e0e4e6; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,.055); }
.testimonial-grid blockquote p { min-height: 82px; }
.testimonial-grid blockquote footer { display: flex; flex-direction: column; font-size: .82rem; }
.testimonial-grid blockquote footer span { color: #697075; }

.gallery-section { padding: 18px 0 55px; }
.gallery-filters { display: flex; gap: 14px; padding: 0 0 22px; overflow-x: auto; }
.gallery-filters button { min-width: 155px; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 1px solid #4b5357; border-radius: 4px; color: #fff; background: #090c0d; font: 850 .78rem var(--heading); text-transform: uppercase; cursor: pointer; }
.gallery-filters button.active { color: #112008; background: linear-gradient(#86cf36,#64a91c); border-color: #b5e878; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gallery-card { margin: 0; min-width: 0; }
.gallery-card[hidden] { display: none; }
.gallery-open { width: 100%; position: relative; display: block; padding: 0; overflow: hidden; border: 1px solid #5b6265; border-radius: 4px; color: #fff; background: #0d1113; cursor: pointer; }
.gallery-open img { width: 100%; aspect-ratio: 1.48; object-fit: cover; transition: transform .3s ease; }
.gallery-open:hover img { transform: scale(1.035); }
.gallery-open figcaption { position: absolute; left: 0; right: 0; bottom: 0; min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; background: linear-gradient(transparent,rgba(0,0,0,.92)); font: 850 .8rem var(--heading); text-align: left; text-transform: uppercase; }
.lightbox { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 56px; background: rgba(0,0,0,.94); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1200px,100%); max-height: calc(100vh - 80px); object-fit: contain; }
.lightbox-close { position: fixed; top: 20px; right: 20px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #757c7f; color: #fff; background: #0c1012; cursor: pointer; }

.contact-section { background: #fff; color: var(--color-text); }
.contact-grid { display: grid; grid-template-columns: 1.28fr 1fr; }
.contact-form-wrap { padding: 55px max(40px, calc(50vw - 590px)) 55px max(24px, calc(50vw - 590px)); }
.contact-form-wrap > p { color: #666e72; }
.contact-form { display: grid; gap: 13px; margin-top: 25px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.contact-form label { position: relative; }
.contact-form label > span { position: absolute; left: 15px; top: 12px; color: #72797c; font-size: .78rem; pointer-events: none; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #dfe3e5; border-radius: 3px; background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.045); padding: 31px 15px 10px; color: #15191b; }
.contact-form input { min-height: 58px; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-green); outline: 2px solid rgba(117,201,0,.2); }
.contact-form .btn { justify-self: start; min-width: 230px; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: #70777a; font-size: .78rem; }
.privacy-note .icon { width: 16px; color: var(--color-green); }
.honeypot { position: absolute; left: -10000px; }
.alert { padding: 14px 16px; margin: 18px 0; border: 1px solid; font-size: .9rem; }
.alert.success { color: #2d5600; border-color: #84c43d; background: #f1fae7; }
.alert.error { color: #7a1e1e; border-color: #df9e9e; background: #fff0f0; }
.contact-info { padding: 55px max(24px, calc(50vw - 590px)) 55px 58px; background: radial-gradient(circle at 20% 20%,#171d20,#080a0b 68%); color: #fff; }
.contact-info-list { display: grid; gap: 28px; margin-top: 30px; }
.contact-info-list > div { display: flex; gap: 22px; align-items: flex-start; }
.contact-info-list > div > span { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 58px; border: 1px solid var(--color-green); border-radius: 50%; color: var(--color-green); }
.contact-info-list p { display: flex; flex-direction: column; margin: 3px 0 0; }
.contact-info-list p strong { margin-bottom: 6px; font-family: var(--heading); text-transform: uppercase; }
.contact-info-list p small { color: #bdc3c5; }
.contact-info-list .socials { margin-top: 10px; }
.map-section { min-height: 390px; background-color: #eff2f1; background-image: linear-gradient(28deg,transparent 47%,#d7dcda 48%,#d7dcda 49%,transparent 50%), linear-gradient(95deg,transparent 47%,#dfe4e2 48%,#dfe4e2 49%,transparent 50%), linear-gradient(#e6e9e8 1px,transparent 1px),linear-gradient(90deg,#e6e9e8 1px,transparent 1px); background-size: 430px 250px,520px 340px,40px 40px,40px 40px; color: var(--color-text); }
.map-section .container { min-height: inherit; display: flex; align-items: center; justify-content: space-between; }
.map-card { width: 330px; padding: 30px; background: #fff; box-shadow: var(--shadow); }
.map-card h2 { font-size: 2.25rem; }
.map-card p:not(.section-label) { color: #4f5659; }
.map-pin { width: 78px; height: 78px; margin-right: 35%; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: var(--color-green); background: #050607; box-shadow: 0 15px 20px rgba(0,0,0,.3); }
.map-pin .icon { width: 35px; height: 35px; transform: rotate(45deg); }

.category-detail .category-media { background: #f4f5f5; border: 1px solid #e1e4e5; }
.category-detail .category-media img { width: 100%; }
.check-list.dark li::before { color: var(--color-green-dark); }

.blog-hero { padding: 92px 0; background: linear-gradient(90deg,rgba(3,4,5,.98),rgba(3,4,5,.43)),url('../images/hero/soccer-team-stadium.webp') center/cover; }
.blog-hero h1 span { color: var(--color-green); }
.blog-hero p { max-width: 610px; margin-top: 24px; color: #d4d9da; font-size: 1.05rem; }
.featured-post { display: grid; grid-template-columns: 1.25fr 1fr; margin-bottom: 65px; border: 1px solid #e0e4e5; background: #f6f7f7; }
.featured-post > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.featured-post > div { padding: 42px; align-self: center; }
.featured-post h2 { margin-bottom: 18px; }
.featured-post p:not(.section-label) { color: #5e6669; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.blog-card { border: 1px solid #e0e4e5; background: #fff; }
.blog-image img { width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.blog-card-body { padding: 24px; }
.blog-meta { display: flex; justify-content: space-between; color: #6c7477; font-size: .75rem; text-transform: uppercase; }
.blog-meta span { color: var(--color-green-dark); font-weight: 800; }
.blog-card h2 { margin: 14px 0; font-size: 1.6rem; }
.blog-card p { color: #5f666a; font-size: .9rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #273022; font: 850 .84rem var(--heading); text-transform: uppercase; }
.text-link .icon { color: var(--color-green-dark); }
.article-header { padding: 80px 0 105px; background: linear-gradient(110deg,#050607,#141b1e); }
.article-header-inner { max-width: 920px; }
.article-header nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; color: #aeb5b7; font-size: .82rem; }
.article-header h1 { font-size: clamp(3.2rem,5vw,5.4rem); }
.article-header > div > p:not(.section-label) { max-width: 750px; margin-top: 24px; color: #d4d9da; font-size: 1.12rem; }
.article-byline { color: #aeb5b7; font-size: .84rem; }
.article-image { margin-top: -65px; position: relative; }
.article-image img { width: 100%; max-height: 610px; object-fit: cover; border: 7px solid #fff; }
.article-layout { max-width: 860px; padding-block: 60px 75px; }
.article-content { color: #24282a; }
.article-content h2, .article-content h3 { margin: 2.2rem 0 1rem; }
.article-content p, .article-content li { color: #4e5558; font-size: 1.04rem; }
.article-content a { color: #4e8e00; text-decoration: underline; }
.article-cta { margin-top: 45px; padding: 28px; border-left: 5px solid var(--color-green); background: #f1f5ed; }
.article-page { background: #fff; }
.empty-state { padding: 60px; border: 1px solid #e0e4e5; text-align: center; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin: -3px 0 14px !important; color: #4f8f00 !important; }
.product-price del { color: #8c9496; font-size: .82rem; }
.product-price strong { font-size: 1.05rem; }
.product-detail-media { min-width: 0; }
.product-main-image { width: 100%; padding: 0; border: 1px solid #dde1e2; background: #f1f3f3; cursor: zoom-in; }
.product-main-image img { width: 100%; display: block; object-fit: cover; }
.product-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; }
.product-gallery button { padding: 0; border: 1px solid #d9dede; background: #f3f5f5; cursor: zoom-in; }
.product-gallery img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; }
.product-sku { margin: 16px 0 8px; color: #747d80; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.product-detail-price { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 20px; }
.product-detail-price del { color: #8b9395; }
.product-detail-price strong { color: #579c00; font: 900 1.75rem/1 var(--heading); }
.product-description { color: #52595c; line-height: 1.8; }

.cta-band { background: linear-gradient(105deg,#528f06 0,#8add1d 58%,#050607 58.2%,#050607 100%); }
.cta-inner { min-height: 138px; display: grid; grid-template-columns: 108px 1fr 340px; align-items: center; gap: 25px; color: #081000; }
.cta-ball { width: 98px; height: 98px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff 0 24%,#cfd5d5 25% 32%,#171a1b 33% 48%,#fff 49% 65%,#0c0e0f 66% 75%,#fff 76%); box-shadow: 0 10px 18px rgba(0,0,0,.3); }
.cta-inner h2 { font-size: clamp(1.85rem,2.7vw,3rem); }
.cta-inner p { margin: 8px 0 0; }
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 11px; color: #fff; }
.cta-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .82rem; }
.cta-whatsapp .icon { color: var(--color-green); }
.site-footer { background: linear-gradient(110deg,#0c1012,#090b0c); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .85fr 1.1fr; gap: 65px; padding: 48px 0 34px; }
.footer-brand p { max-width: 310px; margin-top: 20px; color: #b9c0c2; font-size: .85rem; }
.footer-grid h2 { margin: 4px 0 18px; font-family: var(--body); font-size: .88rem; letter-spacing: .03em; }
.footer-grid ul { padding: 0; margin: 0; list-style: none; }
.footer-grid li { margin: 4px 0; color: #c3c8ca; font-size: .82rem; line-height: 1.45; }
.footer-grid a:hover { color: var(--color-green); }
.socials { display: flex; flex-direction: row !important; gap: 11px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #6c7477; border-radius: 50%; }
.socials .icon { width: 18px; height: 18px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; }
.contact-list .icon { width: 19px; color: var(--color-green); }
.copyright { padding: 14px 0 20px; border-top: 1px solid #24292c; color: #737b7e; font-size: .78rem; text-align: center; }

.error-page { min-height: 650px; display: grid; place-items: center; text-align: center; background: radial-gradient(circle,#172024,#050607 62%); }
.error-page .container { max-width: 750px; }
.error-code { margin: 0; color: var(--color-green); font: 900 8rem/1 var(--heading); }
.error-page h1 { font-size: clamp(3rem,6vw,6rem); }
.error-page > div > p:not(.error-code) { color: #c6ccce; }
.error-page .btn { margin: 12px 6px; }

@media (max-width: 1120px) {
  .site-nav { gap: 15px; }
  .site-nav a { font-size: .76rem; }
  .nav-quote { min-width: 130px; padding-inline: 16px; }
  .reason-grid.five { grid-template-columns: repeat(3,1fr); }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .value-grid.six { grid-template-columns: repeat(3,1fr); row-gap: 40px; }
  .quality-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 30px; }
  .quality-grid > div { grid-column: 1/-1; }
  .quality-grid article:nth-of-type(3) { border-left: 0; }
  .builder-shell { grid-template-columns: 1fr; }
  .builder-controls { border-right: 0; border-bottom: 1px solid #3a4246; }
}

@media (max-width: 900px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .site-header { height: 76px; backdrop-filter: none; }
  .nav-shell { gap: 16px; }
  .brand-mark { width: 40px; }
  .brand-copy strong { font-size: 1.2rem; }
  .brand-copy b { font-size: .78rem; }
  .nav-toggle { display: flex; }
  .nav-quote { margin-left: 0; min-width: 0; min-height: 46px; padding: 12px 14px; font-size: .78rem; }
  .site-nav { position: fixed; inset: 76px 0 0; z-index: 101; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px; background: rgba(3,4,5,.995); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .site-nav.open { visibility: visible; opacity: 1; pointer-events: auto; }
  .site-nav a { padding: 18px 5px; border-bottom: 1px solid #292e30; font-size: 1rem; }
  .site-nav a::after { display: none; }
  .page-hero { min-height: 560px; }
  .page-hero::before { background-position: 61% center; }
  .page-hero::after { background: linear-gradient(90deg,#030405 0%,rgba(3,4,5,.91) 48%,rgba(3,4,5,.24)); }
  .page-hero-copy { width: 62%; }
  .home-hero { min-height: 650px; }
  .hero-benefits { margin-top: -82px; }
  .benefit-row { margin-left: 18px; }
  .home-product-row { grid-template-columns: repeat(3,1fr); }
  .custom-feature-grid { grid-template-columns: 1fr 1.2fr; }
  .reason-grid.three, .gallery-grid, .blog-grid { grid-template-columns: repeat(2,1fr); }
  .reason-grid.five { grid-template-columns: repeat(2,1fr); }
  .value-grid { grid-template-columns: repeat(2,1fr); row-gap: 38px; }
  .value-grid.five { grid-template-columns: repeat(3,1fr); row-gap: 38px; }
  .value-grid article:nth-child(even) { border-right: 0; }
  .story-grid, .two-columns { grid-template-columns: 1fr; }
  .story-copy { padding: 62px 0; }
  .story-image { clip-path: none; }
  .trust-process .two-columns { gap: 50px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .work-preview-grid { grid-template-columns: 1fr; }
  .work-copy { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-wrap, .contact-info { padding: 50px max(18px, calc(50vw - 350px)); }
  .cta-band { background: linear-gradient(110deg,#62a90b,#8bde21 64%,#050607 64.3%); }
  .cta-inner { grid-template-columns: 82px 1fr 260px; }
  .cta-ball { width: 76px; height: 76px; }
  .footer-grid { grid-template-columns: 1.25fr repeat(3,1fr); gap: 28px; }
  .featured-post { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .nav-quote { display: none; }
  .nav-toggle { margin-left: auto; }
  .page-hero, .home-hero { min-height: 680px; }
  .page-hero::before { background-size: auto 58%; background-repeat: no-repeat; background-position: 64% bottom; }
  .page-hero::after { background: linear-gradient(180deg,#030405 0%,#030405 41%,rgba(3,4,5,.5) 66%,rgba(3,4,5,.12)); }
  .page-hero-inner { align-items: flex-start; }
  .page-hero-copy, .home-hero .page-hero-copy { width: 100%; padding: 52px 0 300px; }
  .page-hero-copy h1, .home-hero .page-hero-copy h1 { font-size: clamp(2.55rem,10vw,3.4rem); }
  .home-hero h1 .hero-lock { white-space: normal; }
  .hero-copy { max-width: 100%; font-size: .93rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-benefits { margin: 0; padding: 20px 0; background: #080b0c; }
  .benefit-row { width: calc(100% - 28px); margin-inline: auto; grid-template-columns: repeat(2,1fr); }
  .section { padding: 54px 0; }
  .home-product-row { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .home-product h3 { font-size: .9rem; }
  .custom-feature-grid { grid-template-columns: 1fr; }
  .custom-feature-grid > div:first-child { padding-bottom: 25px; }
  .custom-feature-media { width: calc(100% + 28px); min-height: 310px; margin-left: -14px; margin-right: 0; }
  .reason-grid.five, .reason-grid.three, .gallery-grid, .blog-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .reason-card { min-height: 190px; }
  .work-copy { display: block; }
  .work-images { grid-template-columns: repeat(2,1fr); }
  .story-image { min-height: 350px; }
  .story-image strong { top: 28px; right: 22px; font-size: 1.8rem; }
  .value-grid, .value-grid.five, .value-grid.six { grid-template-columns: 1fr; row-gap: 0; }
  .value-grid article, .value-grid article:nth-child(even) { padding: 28px 10px; border-right: 0; border-bottom: 1px solid #3d4548; }
  .value-grid article:last-child { border-bottom: 0; }
  .audience-list { grid-template-columns: 1fr; }
  .process-row, .process-row.large { grid-template-columns: 1fr 1fr; gap: 35px 15px; }
  .process-row article::after { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 1px solid #566056; border-bottom: 1px solid #566056; }
  .stat:nth-child(even) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
  .product-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: 1fr 1fr; }
  .quality-grid article { padding-inline: 14px; }
  .quality-grid article:nth-of-type(3) { border-left: 1px solid #3b4245; }
  .quality-grid article:nth-of-type(odd) { border-left: 0; }
  .builder-controls { grid-template-columns: 1fr; }
  .builder-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #3a4246; }
  .builder-tabs button { min-width: 122px; justify-content: center; }
  .builder-panel { min-height: 390px; }
  .kit-stage { min-height: 390px; }
  .builder-actions { grid-template-columns: 1fr; }
  .gallery-filters { margin-inline: -14px; padding-inline: 14px; }
  .lightbox { padding: 55px 14px 20px; }
  .field-grid { grid-template-columns: 1fr; }
  .contact-info-list > div { gap: 15px; }
  .map-section .container { align-items: flex-start; padding-top: 35px; }
  .map-card { width: 100%; }
  .map-pin { display: none; }
  .featured-post > div { padding: 28px; }
  .article-header { padding: 58px 0 90px; }
  .article-image { margin-top: -45px; }
  .cta-band { background: linear-gradient(155deg,#7bc618 0,#75c900 64%,#050607 64.3%); }
  .cta-inner { min-height: 285px; grid-template-columns: 70px 1fr; align-content: center; gap: 15px; }
  .cta-actions { grid-column: 1/-1; margin-top: 22px; }
  .cta-ball { width: 66px; height: 66px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-grid > div:last-child { grid-column: 1/-1; }
  .error-code { font-size: 6rem; }
}

@media (max-width: 360px) {
  .brand-copy strong { font-size: 1.08rem; }
  .brand-copy b { font-size: .7rem; }
  .home-product-row, .stats-grid, .quality-grid, .process-row, .process-row.large, .footer-grid { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(even), .stat:nth-child(n+3) { border-right: 0; border-bottom: 1px solid #566056; }
  .stat:last-child { border-bottom: 0; }
  .footer-grid > div { grid-column: auto !important; }
}

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