/* Header: one solid floating bar, the same at rest and while scrolling. Items take a soft tile
   on hover, the tile glides between them, and (with a pointer) a glance panel morphs between
   Products, About and Contact. Without scripts the bar is static and Products is a native disclosure. */
.hdr{
  --nav-ease:cubic-bezier(.22,1,.36,1);
  --ink:#f4f7fc;--muted:#a9b6cb;--rule:#ffffff14;--panel:#0d1522;--wash:#7ba3ff1a;--accent:#7ba3ff;
  --nav-blue:#2456d6;--nav-blue-hi:#3a6cff;--nav-tile:#7ba3ff1f;--nav-line:#9fb8e61a;
  position:fixed;top:0;left:0;right:0;z-index:40;height:66px;border:0;background:none;pointer-events:none;color:var(--ink)
}
.hdr .wrap{
  pointer-events:auto;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  width:min(1180px,calc(100% - 2 * var(--gutter)));max-width:none;min-height:50px;margin:8px auto 0;padding:7px 7px 7px 14px;
  border:1px solid var(--nav-line);border-radius:16px;background:linear-gradient(#111b2cf0,#0a111ce6);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 0 0 1px #0000002e,inset 0 1px 0 #ffffff0d,0 10px 30px -18px #000a;transition:box-shadow .3s
}
/* The bar is fixed; the page keeps its place below it. */
body{padding-block-start:66px}
html{scroll-padding-block-start:80px}
[dir=rtl] .hdr .wrap{padding:7px 14px 7px 7px}
.hdr.is-scrolled .wrap{box-shadow:0 0 0 1px #0000002e,inset 0 1px 0 #ffffff0d,0 18px 40px -20px #000c}
.hdr .logo{min-height:36px;gap:.55rem;font-size:1.05rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.hdr .logo img{width:22px;height:22px;filter:invert(1);transition:rotate .6s var(--nav-ease)}
.hdr .logo:hover img{rotate:-12deg}


/* Every control in the bar shares one size: 36px tall, 10px corners. */
.nav-cta,.nav-compact .menu>summary{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 1rem;border-radius:10px;font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s,transform .15s}
.nav-cta{border:0;background:var(--nav-blue);color:#fff!important;box-shadow:inset 0 1px 0 #ffffff26,0 1px 2px #0000004d}
.nav-cta:hover,.nav-cta.is-hot{background:var(--nav-blue-hi)}
.nav-cta:active{transform:scale(.97)}
.nav-compact .menu>summary{border:0;background:var(--nav-tile);color:#fff}
.nav-compact .menu>summary:hover,.nav-compact .menu[open]>summary{background:#7ba3ff33}

/* Build (first load of a visit only; boot.js marks it): shortly after the opening headline starts, a pixel copy of the whole bar (surface,
   logo, labels and Contact) is drawn on a canvas by site.js. Its cells light blue from the
   centre outward and settle to their colours; then the real bar cross-fades in under it.
   Without scripts, or with reduced motion, the bar is simply there. */
.nav-pixels{position:absolute;left:-1px;top:-1px;z-index:2;border-radius:16px;pointer-events:none;image-rendering:pixelated;transition:opacity .6s ease,filter .6s ease}
.nav-pixels.is-leaving{opacity:0;filter:blur(6px)}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  /* Waiting and building carry no transitions, so nothing fades out before the pixels start. */
  .nav-intro .hdr:not(.nav-on) .wrap{opacity:0;animation:nav-failsafe 0s 5s forwards}
  .hdr.nav-building .wrap{border-color:transparent;background:transparent;box-shadow:none;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
  .hdr.nav-building .wrap>:is(.logo,.nav,.nav-compact){opacity:0;filter:blur(6px)}
  /* Hand-off: the real bar un-blurs in while the pixel copy blurs out over it. */
  .hdr.nav-reveal .wrap{transition:background-color .6s ease,border-color .6s ease,box-shadow .6s ease,-webkit-backdrop-filter .6s ease,backdrop-filter .6s ease}
  .hdr.nav-reveal .wrap>:is(.logo,.nav,.nav-compact){transition:opacity .6s ease,filter .6s ease}
}
@keyframes nav-failsafe{to{opacity:1}}

/* ── Desktop and tablet ─────────────────────────────────────────────── */
@media(min-width:768px){
  .nav{position:relative;display:flex;align-items:center;gap:.25rem;margin-inline-start:auto;font-size:.875rem}
  .nav>a:not(.nav-cta),.nav .menu>summary{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:36px;padding-inline:1rem;border-radius:10px;font-weight:500;color:#fff;text-decoration:none;transition:color .15s}
  .nav .menu>summary{gap:.45rem}
  .nav .menu>summary:after{width:5px;height:5px;opacity:.7;transition:transform .3s var(--nav-ease),margin .3s var(--nav-ease)}
  .nav>a[aria-current]:not(.nav-cta),.nav .menu>summary.is-current{color:var(--accent)}
  .nav>.nav-cta{margin-inline-start:.5rem}
  /* The tile that glides to whichever item is under the pointer. */
  .nav-glide{position:absolute;z-index:0;inset-block-start:50%;left:0;width:var(--gw,0);height:36px;border-radius:10px;background:var(--nav-tile);translate:var(--gx,0) -50%;opacity:0;pointer-events:none;transition:translate .35s var(--nav-ease),width .35s var(--nav-ease),opacity .15s}
  .nav.is-gliding .nav-glide{opacity:1}
  .nav-js .nav [data-glance].is-hot:not(.nav-cta),.nav-js .nav [data-glance].is-hot>summary{color:#fff}
  .nav-js .nav .menu.is-hot>summary:after{transform:rotate(225deg);margin-top:3px}
  .nav .menu-panel{top:calc(100% + 14px);border-radius:14px}

  /* Glance panel: one surface whose size and position morph to the item under the pointer. */
  .nav-js .nav .menu-panel{display:none}
  .nav-js .nav .menu[open] .menu-panel{display:grid}
  .nav-js:has(.nav .menu[open]) .glance{visibility:hidden;opacity:0}
  .glance{position:absolute;inset-block-start:calc(100% + 8px);left:0;z-index:30;width:var(--pw,20rem);height:var(--ph,10rem);translate:var(--px,0) -4px;transform-origin:50% 0;overflow:hidden;border:1px solid var(--nav-line);border-radius:14px;background:linear-gradient(#111b2cf7,#0a111cf7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 0 0 1px #00000026,0 24px 50px -24px #000c;opacity:0;scale:.97;visibility:hidden;transition:opacity .15s,scale .3s var(--nav-ease),translate .3s var(--nav-ease),visibility 0s .3s,width .35s var(--nav-ease),height .35s var(--nav-ease)}
  .glance.is-open{opacity:1;scale:1;translate:var(--px,0) 0;visibility:visible;transition:opacity .15s,scale .3s var(--nav-ease),visibility 0s,width .35s var(--nav-ease),height .35s var(--nav-ease),translate .35s var(--nav-ease)}
  .glance.is-fresh{transition:opacity .15s,scale .3s var(--nav-ease),visibility 0s}
  .glance-pane{position:absolute;inset-block-start:0;left:0;box-sizing:border-box;width:max-content;padding:6px;opacity:0;translate:var(--from,0) 0;pointer-events:none;transition:opacity .18s,translate .35s var(--nav-ease)}
  .glance-pane.is-active{opacity:1;translate:0 0;pointer-events:auto}

  .glance-products{display:grid;grid-template-columns:repeat(2,13.5rem);gap:4px}
  .gcard{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:.35rem .7rem;padding:.75rem;border-radius:10px;color:inherit;text-decoration:none;transition:background-color .15s}
  .gcard{--brand:#2456d6;--brand-hi:#7ba3ff;position:relative;border:1px solid transparent;transition:background-color .25s,border-color .25s}
  .gcard img{grid-row:1/3;width:26px;height:auto;filter:grayscale(1) brightness(1.7);transition:filter .3s,rotate .5s var(--nav-ease)}
  .gcard:hover{border-color:color-mix(in srgb,var(--brand-hi) 30%,transparent);background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--brand) 32%,transparent),color-mix(in srgb,var(--brand) 8%,transparent))}
  [dir=rtl] .gcard:hover{background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--brand) 32%,transparent),color-mix(in srgb,var(--brand) 8%,transparent))}
  .gcard:hover img{filter:none;rotate:-10deg}
  .gcard:hover .gname{color:var(--brand-hi)}
  .gcard:hover .gstate{background:color-mix(in srgb,var(--brand) 30%,transparent);color:#fff}
  .gname{transition:color .25s}
  .gstate{transition:background-color .25s,color .25s}
  .gname{align-self:end;font-size:.875rem;font-weight:500;color:#fff}
  .gline{font-size:.78rem;line-height:1.45;color:var(--muted)}
  .gstate{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:.4rem;margin-block-start:.15rem;padding:.25rem .5rem;border-radius:8px;background:var(--nav-line);font:500 .62rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  [dir=rtl] .gstate{font-family:inherit;font-size:.72rem;letter-spacing:0}
  .gstate i{width:.35rem;height:.35rem;border-radius:50%;background:var(--accent)}
  .gmore{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:10px;font-size:.8rem;color:var(--muted);text-decoration:none;transition:background-color .15s,color .15s}
  .gmore:hover{background:var(--nav-line);color:#fff}
  .gq{display:grid;place-items:center;width:1.3rem;height:1.3rem;border:1px dashed currentColor;border-radius:50%;font-size:.72rem;transition:rotate .5s var(--nav-ease)}
  .gmore:hover .gq{rotate:90deg}
  .garrow{margin-inline-start:auto;transition:translate .3s var(--nav-ease)}
  :is(.gmore,.glink,.gmail):hover .garrow{translate:3px 0}
  [dir=rtl] .garrow{scale:-1 1}
  [dir=rtl] :is(.gmore,.glink,.gmail):hover .garrow{translate:-3px 0}

  .glance-about{display:grid;gap:.7rem;width:19rem;padding:.85rem}
  .gwho{display:flex;align-items:center;gap:.7rem}
  .gwho img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #ffffff1f}
  .gwho p{display:grid;gap:.1rem;margin:0}
  .gwho strong{font-size:.875rem;font-weight:500;color:#fff}
  .gwho span{font-size:.75rem;color:var(--muted)}
  .gfacts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-block:1px solid var(--nav-line)}
  .gfacts>div{display:grid;gap:.3rem;padding:.6rem 0}
  .gfacts>div+div{padding-inline-start:.65rem;border-inline-start:1px solid var(--nav-line)}
  .gfacts dt{font:500 .58rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  [dir=rtl] .gfacts dt{font-family:inherit;font-size:.72rem;letter-spacing:0}
  .gfacts dd{margin:0;font-size:.8rem;font-weight:500;color:#fff}
  .glink{display:flex;align-items:center;gap:.5rem;margin:-.25rem;padding:.45rem .5rem;border-radius:8px;font-size:.82rem;font-weight:500;color:#fff;text-decoration:none;transition:background-color .15s}
  .glink:hover{background:var(--nav-line)}

  .glance-contact{display:grid;gap:.4rem;width:18rem;padding:.85rem}
  .gk{margin:0;font:500 .58rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  [dir=rtl] .gk{font-family:inherit;font-size:.72rem;letter-spacing:0}
  .gmail{display:flex;align-items:center;gap:.5rem;margin-inline:-.5rem;padding:.4rem .5rem;border-radius:8px;font-size:1rem;font-weight:500;letter-spacing:-.01em;color:#fff;text-decoration:none;transition:background-color .15s}
  .gmail:hover{background:var(--nav-line)}
  .gnote{margin:0;font-size:.75rem;color:var(--muted)}

  .glance-pane.is-active>*{animation:nav-in .4s var(--nav-ease) both}
  .glance-pane.is-active>:nth-child(2){animation-delay:.04s}
  .glance-pane.is-active>:nth-child(3){animation-delay:.08s}
  @keyframes nav-in{from{opacity:0;translate:0 6px}}
}

/* ── Phones: the same bar; a two-line menu button that folds into a cross ── */
.nav-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:767px){
  .hdr{height:62px}
  body{padding-block-start:62px}
  .hdr .wrap{flex-wrap:nowrap;width:calc(100% - 16px);min-height:50px;margin-block-start:6px;gap:.75rem}
  .hdr .nav{display:none}
  .glance,.nav-glide{display:none}
  .nav-compact{display:block;margin-inline-start:auto}
  .nav-compact .menu{position:static}
  .nav-compact .menu>summary{width:36px;min-height:36px;padding:0;gap:0;border-radius:10px;list-style:none}
  .nav-compact .menu>summary::after{display:none}
  .burger{position:relative;display:block;width:16px;height:10px}
  .burger i{position:absolute;inset-inline:0;height:1.5px;border-radius:2px;background:#fff;transition:translate .35s var(--nav-ease),rotate .35s var(--nav-ease),width .35s var(--nav-ease)}
  .burger i:first-child{top:0}
  .burger i:last-child{bottom:0;width:70%}
  .menu[open] .burger i:first-child{translate:0 4.25px;rotate:45deg}
  .menu[open] .burger i:last-child{width:100%;translate:0 -4.25px;rotate:-45deg}
  .nav-compact .menu>summary:hover .burger i:last-child{width:100%}

  .nav-compact .menu-panel{inset-inline:0;top:calc(100% + 8px);width:auto;padding:6px;border:1px solid var(--nav-line);border-radius:14px;background:linear-gradient(#111b2cfc,#0a111cfc);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 0 0 1px #0000002e,0 24px 50px -24px #000c;transform-origin:50% 0;animation:nav-drop .35s var(--nav-ease)}
  .nav-compact .menu-panel{max-block-size:calc(100vh - 80px);max-block-size:calc(100dvh - 80px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
  @keyframes nav-drop{from{opacity:0;scale:.98;translate:0 -6px}}
  .nav-compact .menu-panel>*{animation:nav-in .45s var(--nav-ease) both}
  .nav-compact .menu-panel>:nth-child(2){animation-delay:.04s}
  .nav-compact .menu-panel>:nth-child(3){animation-delay:.08s}
  .nav-compact .menu-panel>:nth-child(4){animation-delay:.12s}
  @keyframes nav-in{from{opacity:0;translate:0 6px}}
  .mk{margin:0;padding:.65rem .75rem .35rem;font:500 .6rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  [dir=rtl] .mk{font-family:inherit;font-size:.72rem;letter-spacing:0}
  .nav-compact .mcard{--brand:#2456d6;--brand-hi:#7ba3ff;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.3rem .75rem;padding:.75rem;border:1px solid transparent;border-radius:10px;text-decoration:none;transition:background-color .25s,border-color .25s}
  .nav-compact .mcard img{grid-row:1/4;width:26px;height:auto;filter:grayscale(1) brightness(1.7);transition:filter .3s,rotate .5s var(--nav-ease)}
  .nav-compact .mname{font-size:.95rem;font-weight:500;color:#fff;transition:color .25s}
  .nav-compact .mline{grid-column:2;font-size:.8rem;line-height:1.45;color:var(--muted)}
  .nav-compact .mstatus{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:.4rem;margin-block-start:.15rem;padding:.25rem .5rem;border-radius:8px;background:var(--nav-line);font:500 .62rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  [dir=rtl] .nav-compact .mstatus{font-family:inherit;font-size:.72rem;letter-spacing:0}
  .nav-compact .mstatus i{width:.35rem;height:.35rem;border-radius:50%;background:var(--accent)}
  .nav-compact .mcard:is(:hover,:active,:focus-visible,[aria-current]){border-color:color-mix(in srgb,var(--brand-hi) 30%,transparent);background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--brand) 32%,transparent),color-mix(in srgb,var(--brand) 8%,transparent))}
  .nav-compact .mcard:is(:hover,:active,:focus-visible,[aria-current]) img{filter:none}
  .nav-compact .mcard:is(:hover,:active,:focus-visible,[aria-current]) .mname{color:var(--brand-hi)}
  .nav-compact .menu-links{display:grid;gap:4px;margin:4px 0 0;padding:4px 0 0;border-top:1px solid var(--nav-line)}
  .nav-compact .menu-links a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding-inline:.75rem;border-radius:10px;font-size:.95rem;font-weight:500;color:#fff;text-decoration:none;transition:background-color .15s}
  .nav-compact .menu-links a:hover{background:var(--nav-tile)}
  .nav-compact .menu-links a[aria-current]{color:var(--accent)}
  [dir=rtl] .nav-compact .menu-links a span{scale:-1 1}
  .nav-compact .menu-links .menu-cta{justify-content:center;background:var(--nav-blue);color:#fff}
  .nav-compact .menu-links .menu-cta:hover{background:var(--nav-blue-hi)}
}

@media(prefers-reduced-motion:reduce){
  .nav-glide,.glance,.glance-pane{transition:none!important}
  .glance-pane.is-active>*,.nav-compact .menu-panel,.nav-compact .menu-panel>*{animation:none}
  .burger i{transition:none}
}