/* Full-width products section using page gutters */
.products{padding-inline:var(--gutter,20px)}

/* Shared primitives */
:is(.product-card,.tile,.contact-card){border:1px solid var(--border);border-radius:var(--radius, var(--radius-md))}

/* Header (as in screenshot: translucent, thin border) */
header{position:relative;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;flex-wrap:wrap;row-gap:6px}
/* Neutralize any grid overrides from previous version */
.brand{grid-column:auto}
.menu{grid-column:auto}
.brand{display:flex;align-items:center;gap:.9rem;font-weight:800}
.brand-text{display:inline-block;height:42px;min-width:120px}
.brand-text canvas{display:block;width:100%;height:100%}
/* Smooth scroll and anchor offset for in-page links (prevents hidden titles) */
html{scroll-behavior:smooth}
/* CSS-only brand text effects (when data-css-brand is present) */
.brand-text{
  line-height:42px;
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  font-size: 1.5em;
}
.brand-text[data-css-brand]{
  /* typing effect via clip-path steps */
  clip-path: inset(0 100% 0 0);
  animation: brand-type 1.6s steps(12) forwards;
}

/* Header menu (right side) */
.menu{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;
  padding:6px;
}
.menu-item-with-note{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.menu-note{
  position:static; /* keep inside menu flow */
  font-size:.62rem;line-height:1;
  color:var(--muted);
  padding:0; border:0; background:transparent; border-radius:0;
  pointer-events:none; user-select:none;
}
.menu-note::after{
  content:"";
  display:block;
  width:0;height:0;
  margin:3px auto 0; /* places caret between note and pill */
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor; /* small downward caret */
  opacity:.8;
}

/* Emphasize association on hover/focus of the pill */
.menu-item-with-note:hover .menu-note,
.menu-item-with-note:focus-within .menu-note{ color:#b9dcff }
.menu-item-with-note:hover .menu-note::after,
.menu-item-with-note:focus-within .menu-note::after{ opacity:1 }
.menu-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  color:#e6f0ff;
  background:linear-gradient(180deg,#0b1222,#0a0f1d);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease, opacity .25s ease;
}
.menu-pill.active{
  /* 12% tint of #86DBFF over glass */
  background: rgba(134,219,255,.12);
  color:#fff;
  border-color: rgba(134,219,255,.35);
  box-shadow: 0 8px 22px rgba(134,219,255,.15), inset 0 1px 0 rgba(255,255,255,.10);
}
.menu .menu-pill.active:hover{ background: rgba(134,219,255,.18) }
.menu:hover .menu-pill.active:not(:hover){
  /* when hovering the other pill, active softly yields highlight */
  background: rgba(134,219,255,.08);
  box-shadow: 0 6px 18px rgba(134,219,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.menu .menu-pill:not(.active):hover{
  /* hovered non-active gets the same family of blue tint */
  background: rgba(134,219,255,.18);
  border-color: rgba(134,219,255,.28);
  color:#fff;
}
.menu .menu-pill:not(.active):focus-visible{
  background: rgba(134,219,255,.18);
  border-color: rgba(134,219,255,.28);
  color:#fff;
}
.menu:hover .menu-pill{ opacity:.85 }
.menu .menu-pill:hover{ opacity:1; transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.5) }
.menu .menu-pill:active{ transform:translateY(-1px) scale(.98) }
.menu .menu-pill:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.35) }

.menu-pill:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.45) }
.menu-pill:active{ transform:translateY(-1px) scale(.98) }
.menu-pill:focus{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.3) }

@media (max-width:720px){
  /* Center brand and menu on mobile and stack vertically */
  .nav{ justify-content:center; row-gap:10px }
  .brand{ width:100%; justify-content:center }
  .menu{ gap:6px; padding:5px; align-items:flex-end; justify-content:center }
  .menu-pill{ padding:8px 12px; font-size:.7rem }
  .menu-note{ font-size:.56rem }
}

/* Desktop: keep items vertically centered and float note above without affecting height */
@media (min-width:561px){
  .menu{ align-items:center }
  .menu-item-with-note{ position:relative }
  .menu-item-with-note .menu-note{
    position:absolute; left:50%; top:-12px; transform:translateX(-50%);
  }
}

@keyframes brand-type{ to{ clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce){
  .brand-text[data-css-brand]{ animation:none; clip-path:none }
  .brand-text[data-css-brand]::after{ display:none }
}
/* Tagline styling and wrapping */
.tagline{color:var(--muted);font-size:.95rem;margin-top:2px;white-space:normal;line-height:1.25;display:block;max-width:100%}
/* Animated brand logo */
.logo{display:inline-block;width:72px;height:72px}
.logo img{display:block;width:100%;height:100%; padding: 10px;}

/* Hero */
.hero{padding:clamp(24px,8vw,72px) 0 clamp(20px,4vw,32px);text-align:center;position:relative;display:grid;place-items:center;overflow:hidden}
/* Full-bleed background inside hero (100vw). Height capped so waves stay higher. */
.canvas{
  position:absolute;top:0;left:0;
  width:100vw;height:clamp(420px, 60vh, 600px);
  z-index:0;pointer-events:none
}
.hero > .container{max-width:unset;width:100%;padding-inline:var(--gutter,20px)}
.hero > .container, .showcase{position:relative;z-index:1}
.hero h1{margin:0 0 12px;font-size:clamp(28px,3.6vw,44px);font-weight:800;background:linear-gradient(135deg,#f8fafc,#cbd5e1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:1.15rem;color:var(--muted);max-width:780px;margin:0 auto}
.highlight{background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.35);padding:.15rem .5rem;border-radius:8px;color:#d9d6ff}

/* Hero showcase (devices-like row as on image) */
.showcase{margin:28px auto 0;width:min(calc(100% - 2*var(--gutter, 20px)), var(--grid-max, 1200px));border-radius:18px;padding:18px;background:linear-gradient(180deg,#0a0f1f,#0b1120);border:1px solid var(--border)}
.show-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--gap);justify-items:stretch;align-items:stretch;position:relative;z-index:2}
@media (max-width: 900px){.show-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 520px){.show-grid{grid-template-columns:1fr}}
.tile{--radius:var(--radius-md);position:relative;overflow:hidden;background:linear-gradient(180deg,#0f1426,#0b0f1e);min-height:160px;width:100%;display:flex}
.glow{position:absolute;inset:0 -20% -30% -20%;height:100%;background:radial-gradient(600px 120px at 50% 10%, var(--g, rgba(139,92,246,.35)), transparent 70%);filter:blur(18px);opacity:.9}
.tile-content{position:relative;z-index:1;display:grid;grid-template-rows:56px 1fr auto auto;align-items:start;padding:14px;gap:8px;width:100%}
.tile-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(180deg,#0b0f1e,#0a0e1b);box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.4);display:grid;place-items:center}
.tile-icon svg{width:28px;height:28px;fill:#0f172a;}
.tile-icon .glyph{fill:#e5e7eb}
.tile-title{margin:0;font-weight:800;font-size:clamp(0.95rem,1.8vw,1.1rem);background:linear-gradient(135deg,#f8fafc,#e2e8f0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tile-sub{margin:0;color:var(--muted);font-size:0.9rem}
/* Fix nested tile-content so inner title/sub aren't spaced too far apart */
.tile-content > .tile-content{grid-template-rows:auto auto;gap:4px}

/* Hide filtered-out cards */
.product-card.is-hidden{display:none}

/* Section title */
.section-title{text-align:center;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;margin:calc(var(--space)*1.4) 0 var(--space);background:linear-gradient(135deg,var(--p1),var(--p2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Products filter bar */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:6px 0 24px}
.filter-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;font-weight:700;
  color:#e6f0ff;background:linear-gradient(180deg,#0b1222,#0a0f1d);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .2s ease;
}
.filter-pill:hover{opacity:1;transform:translateY(-2px);box-shadow:0 10px 18px rgba(0,0,0,.45)}
.filter-pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.35)}
.filter-pill.active{background:rgba(134,219,255,.12);border-color:rgba(134,219,255,.35);color:#fff;box-shadow:0 6px 18px rgba(134,219,255,.15), inset 0 1px 0 rgba(255,255,255,.10)}
.filters:hover .filter-pill.active:not(:hover){background:rgba(134,219,255,.08)}
.filters .filter-pill:not(.active):hover{background:rgba(134,219,255,.18);border-color:rgba(134,219,255,.28);color:#fff}

@media (max-width:560px){
  .filters{gap:8px;margin-bottom:12px}
  .filter-pill{padding:7px 12px;font-size:.8rem}
}

/* Product cards (glass, hover lift) */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--gap);
  justify-content:center
}
@media (max-width:640px){
  .product-grid{grid-template-columns:1fr}
}
.product-card{--radius:var(--radius-lg);background:var(--card);backdrop-filter:blur(20px);padding:clamp(18px,3.2vw,28px);box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column;position:relative}
.product-card:hover{transform:translateY(-8px);border-color:rgba(139,92,246,.35)}
.product-title{margin:0 0 8px;font-weight:800;font-size:1.25rem}
.product-desc{margin:0 0 14px;color:var(--muted)}
.product-status{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;border-radius:999px;font-weight:700;font-size:.9rem;margin-top:auto;align-self:flex-start}
.status-available{background:rgba(16,185,129,.15);color:var(--ok);border:1px solid rgba(16,185,129,.3)}
.status-development{background:rgba(245,158,11,.15);color:var(--warn);border:1px solid rgba(245,158,11,.3)}
/* Make entire card clickable with an accessible stretched link */
.stretched-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.stretched-link:focus{outline:none}
.product-card .btn{width:auto;align-self:flex-start;position:relative;z-index:2}
/* Product media (modern card cover) */
.product-media{position:relative;margin:-6px 0 14px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,#0b1120,#0a0f1f)}
.product-media::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%, rgba(139,92,246,.15), transparent 60%);pointer-events:none}
.product-media :is(img, svg){display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;padding:12px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.media-cta{position:absolute;left:16px;bottom:16px;z-index:3}
.product-card:hover .product-media :is(img, svg){transform:scale(1.02);transition:transform .35s ease}

/* Contact block (framed card as on image) */
.contact{padding:calc(var(--space)*2) 0}
.contact-card{--radius:var(--radius-xl);background:var(--glass);backdrop-filter:blur(20px);max-width:700px;margin:0 auto;padding:28px;position:relative;overflow:hidden}
.contact-card:before{content:"";position:absolute;inset:-50% auto auto -30%;width:160%;height:160%;background:conic-gradient(from 120deg, transparent, rgba(139,92,246,.18), transparent 30%);filter:blur(18px);opacity:.6;pointer-events:none}
.contact-title{text-align:center;font-size:2rem;font-weight:800;margin:0 0 .6rem;background:linear-gradient(135deg,#f8fafc,#e2e8f0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.contact-subtitle{text-align:center;color:var(--muted);margin-bottom:16px}
.form-group{margin-bottom:12px}
.form-group label{display:block;margin-bottom:6px;font-weight:600}
.form-input{width:100%;padding:.9rem 1.1rem;background:rgba(15,23,42,.6);border:1px solid var(--border);border-radius:12px;color:var(--text)}
.form-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2)}
textarea.form-input{min-height:110px;resize:vertical}
.btn{display:inline-block;background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;border:0;cursor:pointer;box-shadow:0 5px 15px rgba(99,102,241,.25);transition:.25s;width:100%}
.btn:hover{transform:translateY(-3px)}
/* Contact form submit should not span full width */
#contactForm .btn{width:auto;display:inline-flex;align-items:center;gap:.5rem;padding:10px 18px}
/* Consent checkbox styling */
#contactForm .consent{display:flex;align-items:flex-start;gap:.6rem;color:var(--muted);font-size:.9rem}
#contactForm .consent a{text-decoration:underline;color:#93c5fd}
#contactForm .consent input{margin-top:.15rem}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--glass);backdrop-filter:blur(14px);padding:24px 0;color:var(--muted);text-align:center;margin-top:26px}

/* Responsive */
/* With auto-fit + minmax, the grid is fluid; keep only fine-tuning */
@media (max-width:560px){
  .subtitle{font-size:1rem; line-height: 2;}
  /* Make the header wrap nicely on small screens */
  .tagline{display: none;}
  .brand{gap:.6rem}
  .brand-text{font-size:1.2em}
}