:root {
  --c1:#0b1e3b; --c2:#1a3a5f; --c3:#3b82f6; --c4:#bfdbfe; --c5:#eab308;
  --gradient-top:#0b1e3b; --gradient-bottom:#1a3a5f; --text:#fff; --muted:#afc4dd;
  --card:#19385c; --button-text:#fff; --columns:4; --logo-scale:.6; --logo-x:0px; --logo-y:0px; --subline-x:0px; --subline-y:0px; --banner-width:100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--text); background:linear-gradient(180deg,var(--gradient-top) 0%,var(--gradient-bottom) 100%); font-family:Inter,Segoe UI,Arial,sans-serif; }
a { color:inherit; }
button { font:inherit; }
.site-header { border-bottom:1px solid color-mix(in srgb,var(--c4) 14%,transparent); background:color-mix(in srgb,var(--gradient-top) 88%,transparent); }
.header-inner, main, .footer-inner { width:min(1120px,calc(100% - 32px)); margin-inline:auto; }
.header-inner { position:relative; min-height:210px; padding:22px 0 25px; display:grid; place-items:center; }
.brand { text-align:center; }
.brand img { display:block; width:min(calc(520px * var(--logo-scale)),calc(72vw * var(--logo-scale))); height:auto; margin:auto; object-fit:contain; transform:translate(var(--logo-x),var(--logo-y)); transition:transform .2s ease,width .2s ease; }
.brand p { margin:4px 0 8px; color:var(--c4); font-style:italic; font-size:.93rem; transform:translate(var(--subline-x),var(--subline-y)); transition:transform .2s ease; }
.brand-line { display:block; width:64px; height:2px; margin:auto; background:var(--c3); border-radius:99px; transform:translate(var(--subline-x),var(--subline-y)); transition:transform .2s ease; }
.social-top { position:absolute; left:0; top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.social-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid color-mix(in srgb,var(--c4) 18%,transparent); border-radius:999px; background:color-mix(in srgb,var(--c1) 78%,transparent); color:var(--c4); text-decoration:none; font-size:.74rem; transition:.2s ease; }
.social-chip:hover,.social-chip:focus-visible { border-color:var(--c3); color:#fff; transform:translateY(-1px); }
main { padding:34px 0 70px; }
.banner-region { margin-bottom:38px; }
.carousel { position:relative; overflow:hidden; width:var(--banner-width,100%); max-width:100%; margin-inline:auto; aspect-ratio:3/1; border:1px solid color-mix(in srgb,var(--c4) 20%,transparent); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.18); background:var(--c1); transition:width .25s ease; }
.slides { height:100%; }
.slide { display:none; width:100%; height:100%; }
.slide.active { display:block; animation:fade .35s ease; }
.slide a { display:block; width:100%; height:100%; }
.slide img { width:100%; height:100%; display:block; object-fit:contain; background:var(--c1); }
.carousel-arrow { position:absolute; top:50%; translate:0 -50%; width:38px; height:38px; border:1px solid color-mix(in srgb,#fff 25%,transparent); border-radius:50%; background:rgba(2,12,28,.7); color:#fff; cursor:pointer; font-size:1.65rem; line-height:1; }
.carousel-arrow:hover,.carousel-arrow:focus-visible { background:var(--c5); color:var(--c1); }
.previous { left:12px; } .next { right:12px; }
.carousel-dots { min-height:24px; padding-top:12px; display:flex; justify-content:center; gap:7px; }
.dot { width:22px; height:3px; border:0; padding:0; border-radius:99px; background:color-mix(in srgb,var(--c4) 35%,transparent); cursor:pointer; }
.dot.active { background:var(--c4); width:34px; }
.sections { display:grid; gap:58px; }
.section-heading { margin:0 0 20px; font-size:1.25rem; letter-spacing:.02em; }
.section-heading::after { content:""; display:block; width:46px; height:3px; margin-top:9px; border-radius:99px; background:var(--c3); }
.product-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:22px; align-items:start; }
.product-card { --card-scale:1; --card-width:100%; --card-padding:12px; --card-radius:13px; min-width:0; width:var(--card-width); max-width:100%; justify-self:center; padding:var(--card-padding); border:1px solid color-mix(in srgb,var(--c4) 12%,transparent); border-radius:var(--card-radius); background:color-mix(in srgb,var(--card) 88%,transparent); box-shadow:0 10px 24px rgba(1,12,28,.16); transition:width .25s ease,padding .25s ease,border-radius .25s ease; }
.cover-link { position:relative; display:block; overflow:hidden; aspect-ratio:2/3; border-radius:var(--cover-radius,9px); background:var(--c1); }
.product-cover-static { cursor:default; }
.product-cover { width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease; }
.product-card:hover .product-cover,.cover-link:focus-visible .product-cover { transform:scale(1.025); }
.product-category { margin:var(--category-top,12px) var(--category-x,2px) var(--category-bottom,4px); color:var(--muted); font-size:var(--category-size,.72rem); text-transform:uppercase; letter-spacing:.04em; }
.product-title { margin:0 var(--title-x,2px) var(--title-bottom,12px); min-height:2.8em; font-size:var(--title-size,.95rem); line-height:1.4; }
.product-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--button-height,40px); padding:var(--button-pad-y,10px) var(--button-pad-x,14px); border:0; border-radius:var(--button-radius,6px); background:var(--c3); color:var(--button-text); text-decoration:none; font-family:inherit; font-weight:800; font-size:var(--button-size,.86rem); text-transform:uppercase; cursor:pointer; transition:.2s ease; }
.product-button:hover,.product-button:focus-visible { background:var(--c5); color:var(--c1); transform:translateY(-1px); }
.product-button.copy-success { background:#0bb881; color:#fff; }
.site-footer { border-top:1px solid color-mix(in srgb,var(--c4) 13%,transparent); background:color-mix(in srgb,var(--c1) 92%,transparent); }
.footer-inner { min-height:92px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; color:var(--muted); font-size:.72rem; }
.footer-brand { display:flex; align-items:center; gap:8px; color:#fff; font-size:.74rem; white-space:nowrap; }
.brand-mark { color:var(--c4); font-size:1rem; }
.footer-inner p { margin:0; }
.social-footer { display:flex; gap:7px; }
.social-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:color-mix(in srgb,var(--c4) 12%,transparent); color:var(--c4); text-decoration:none; }
.social-chip img { width:14px; height:14px; object-fit:contain; }
.social-icon img { width:17px; height:17px; object-fit:contain; }
.social-icon:hover,.social-icon:focus-visible { background:var(--c3); color:#fff; }
.empty { padding:30px; text-align:center; border:1px dashed color-mix(in srgb,var(--c4) 30%,transparent); border-radius:12px; color:var(--muted); }
@keyframes fade { from { opacity:.25; } to { opacity:1; } }
@media (max-width:900px) {
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-top { position:static; justify-content:center; margin-bottom:18px; }
  .header-inner { min-height:0; padding-block:18px 24px; display:block; }
  .footer-inner { grid-template-columns:1fr; justify-items:center; text-align:center; padding-block:24px; }
}
@media (max-width:560px) {
  .header-inner, main, .footer-inner { width:min(100% - 24px,1120px); }
  .social-chip { padding:5px 8px; font-size:.66rem; }
  .brand img { width:min(calc(460px * var(--logo-scale)),calc(92vw * var(--logo-scale))); }
  .brand p { font-size:.78rem; }
  main { padding-top:22px; }
  .carousel { border-radius:9px; }
  .carousel-arrow { width:30px; height:30px; font-size:1.3rem; }
  .previous { left:6px; } .next { right:6px; }
  .sections { gap:44px; }
  .section-heading { font-size:1.05rem; }
  .product-grid { grid-template-columns:1fr; }
  .product-card { width:min(var(--card-width),390px); margin-inline:auto; padding:var(--mobile-padding,var(--card-padding)); }
  .product-title { min-height:0; font-size:var(--mobile-title-size,var(--title-size)); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
