/* ---------- fonts: self-hosted (Sora, Inter — SIL Open Font License; files in assets/fonts) ----------
   No request leaves the site for a typeface: the Google Fonts link is gone for KVKK reasons. */
@font-face{font-family:"Sora";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/sora-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/sora-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sora-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sora-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sora-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sora-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/inter-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/inter-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =========================================================
   ETA VIZILI — medical devices
   Palette: honey amber on surgical graphite
   ========================================================= */

:root{
  --ink:#07080a;
  --ink-2:#0b0d11;
  --panel:#101319;
  --panel-2:#151922;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --honey:#f2b01e;
  --honey-2:#ffd45e;
  --honey-3:#b8760a;
  --steel:#9fb0c0;

  --text:#e9edf2;
  --muted:#8d97a6;

  --shell:1240px;
  --r:18px;
  --r-lg:26px;

  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--honey);color:#0a0b0e}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.skip-link{position:fixed;left:-999px;top:0;z-index:999;background:var(--honey);color:#0a0b0e;padding:.7rem 1.2rem;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:6px}

/* ---------- background layers ---------- */
.hive-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bee-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@media (max-width:819px){.bee-canvas{display:none}}
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}
}
main,.header,.footer{position:relative;z-index:2}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:700;transition:background .4s var(--ease),backdrop-filter .4s,transform .45s var(--ease)}
.header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .4s}
.header.is-stuck{background:rgba(7,8,10,.72);backdrop-filter:blur(16px) saturate(140%)}
.header.is-stuck::after{background:var(--line)}
.header.is-hidden{transform:translateY(-100%)}
.header__inner{display:flex;align-items:center;gap:1.5rem;height:82px;transition:height .4s var(--ease)}
.header.is-stuck .header__inner{height:66px}

/* the wordmark is the company's own logo, re-inked light for the dark ground */
.brand{display:grid;gap:4px;justify-items:start;flex:0 0 auto}
.brand__logo{height:42px;width:auto;display:block;opacity:.95;transition:opacity .3s}
.brand:hover .brand__logo{opacity:1}
.brand__tag{font-family:var(--f-body);font-size:.6rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;padding-left:2px}

.nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.nav a{position:relative;white-space:nowrap;font-size:.86rem;letter-spacing:.06em;color:var(--muted);transition:color .3s;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--honey);transition:width .35s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--text)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav__cta{border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1.15rem !important;color:var(--text) !important}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--honey);border-color:var(--honey);color:#0a0b0e !important}

.header__tools{display:flex;align-items:center;gap:1rem;position:relative;z-index:2}
.lang{display:flex;align-items:center;gap:.4rem;font-size:.76rem;letter-spacing:.1em;color:var(--muted)}
.lang button{background:none;border:0;cursor:pointer;padding:.2rem;color:var(--muted);transition:color .25s}
.lang button.is-active{color:var(--honey)}
.lang button:hover{color:var(--text)}

.burger{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;padding:0}
.burger span{
  position:absolute;left:50%;width:17px;height:1.6px;background:var(--text);border-radius:2px;
  transform:translate(-50%,-50%);transition:top .3s var(--ease),transform .35s var(--ease),opacity .25s;
}
.burger span:nth-child(1){top:calc(50% - 5px)}
.burger span:nth-child(2){top:50%}
.burger span:nth-child(3){top:calc(50% + 5px)}
.burger[aria-expanded="true"] span:nth-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------- typography ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--honey);
  margin:0 0 1.6rem;font-weight:500;
}
.h2{
  font-family:var(--f-display);font-weight:600;line-height:1.12;letter-spacing:-.02em;
  font-size:clamp(1.85rem,4vw,3.05rem);margin:.4rem 0 1.4rem;
}
.kicker{display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0}
.kicker i{width:26px;height:1px;background:var(--honey);display:block}
.lead{color:var(--muted);font-size:1.03rem;max-width:56ch}
p{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;font-size:.9rem;font-weight:500;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s,box-shadow .3s;
}
.btn span{position:relative;z-index:1}
.btn--primary{background:linear-gradient(135deg,var(--honey-2),var(--honey));color:#0a0b0e}
.btn--primary::before{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,#fff,var(--honey-2));
  opacity:0;transition:opacity .35s;
}
.btn--primary:hover::before{opacity:1}
.btn--primary:hover{box-shadow:0 12px 40px -12px rgba(242,176,30,.75)}
.btn--ghost{border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--honey);color:var(--honey)}
.btn--full{width:100%}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:118px 0 84px;position:relative;overflow:hidden}
.hero__inner{width:min(100% - 2.5rem,var(--shell));position:relative;z-index:2}
.hero__title{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.035em;
  font-size:clamp(2.05rem,6vw,5.2rem);line-height:1.04;margin:0 0 1.5rem;max-width:22ch;
}
.hero__title .line{display:block}
/* no transforms on the words any more, so the clip can sit on the line itself */
.hero__title .line:last-child{
  font-weight:600;
  background:linear-gradient(180deg,#FFF3D2 0%,#FFD45E 40%,#F2B01E 66%,#C07E0C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{max-width:64ch;font-size:1.02rem;margin:0 0 2.1rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}

/* the mark: two nested hexagons turning slowly against each other. On wide
   screens it sits in the empty right half; narrower, it drops behind the copy
   as a faint watermark, never strong enough to compete with the headline. */
.hero__mark{
  position:absolute;z-index:1;pointer-events:none;
  right:4vw;top:50%;width:min(36vw,500px);aspect-ratio:1;
  transform:translateY(-50%);
  animation:markBreathe 8s ease-in-out infinite;
}
.hero__mark svg{width:100%;height:100%;overflow:visible}
.hero__mark polygon{
  fill:none;stroke:var(--honey);vector-effect:non-scaling-stroke;
  transform-box:view-box;transform-origin:50% 50%;
}
.hero__mark-outer{stroke-width:1.2;animation:markTurn 90s linear infinite}
.hero__mark-inner{stroke-width:.8;animation:markTurn 60s linear infinite reverse}
@keyframes markTurn{to{transform:rotate(360deg)}}
@keyframes markBreathe{0%,100%{opacity:.35}50%{opacity:.6}}
@media (max-width:1023.98px){
  .hero__mark{
    right:auto;left:50%;width:min(70vw,440px);
    transform:translate(-50%,-50%);
    animation:none;opacity:.18;
  }
}
@media (max-width:560px){
  .hero__mark{opacity:.12}
}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.stat{background:rgba(11,13,17,.62);backdrop-filter:blur(6px);padding:1.15rem 1.3rem;transition:background .35s}
.stat:hover{background:rgba(242,176,30,.06)}
.stat dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.stat dd{margin:0;font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;color:var(--honey-2);letter-spacing:-.02em}
/* a strip of three keeps three columns until there is no room for them */
.stats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}

/* ---------- sections ---------- */
.section{padding:clamp(5rem,11vw,9rem) 0;position:relative;z-index:2}   /* above the bee layer */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.grid-2--wide{grid-template-columns:1.05fr .95fr}

/* about */
.about__copy{max-width:74ch}
.about__copy p{max-width:62ch;margin:0 0 1.1rem}
.values{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.values li{background:var(--ink);padding:1.15rem 0 1.15rem 1.2rem;display:grid;gap:.25rem;border-left:2px solid transparent;transition:border-color .35s,padding-left .35s,background .35s}
.values li:hover{border-left-color:var(--honey);padding-left:1.6rem;background:var(--ink-2)}
.values b{font-family:var(--f-display);font-weight:500;font-size:1rem}
.values span{color:var(--muted);font-size:.92rem}

/* products */
.products__head{max-width:min(100%,780px);margin-bottom:3rem}

.pcard{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.6rem;background:linear-gradient(165deg,rgba(21,25,34,.9),rgba(11,13,17,.75));
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:.8rem;position:relative;overflow:hidden;
  transition:border-color .35s,transform .35s var(--ease);
}
a.pcard:hover{border-color:rgba(242,176,30,.4);transform:translateY(-2px)}
.pcard__tag{
  align-self:flex-start;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:999px;border:1px solid rgba(242,176,30,.4);color:var(--honey);
}
.pcard__tag--alt{border-color:rgba(159,176,192,.35);color:var(--steel)}
.pcard__icon{width:56px;height:56px;color:var(--honey);margin-top:.4rem}
.pcard__icon svg{width:100%;height:100%}
.pcard h3{font-family:var(--f-display);font-weight:500;font-size:1.24rem;margin:.2rem 0 0;line-height:1.25}
.pcard p{margin:0;font-size:.92rem}
.pcard ul{list-style:none;margin:auto 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem}
.pcard ul li{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);border:1px solid var(--line);border-radius:999px;padding:.26rem .6rem}
.pcard__more{
  margin-top:1rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--honey);
  display:inline-flex;align-items:center;gap:.5rem;
}
.pcard__more::after{content:"→";transition:transform .35s var(--ease)}
a.pcard:hover .pcard__more::after{transform:translateX(3px)}

/* quality */
.quality__head{max-width:min(100%,760px);margin-bottom:3.4rem}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.qcard{
  border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.6rem 1.7rem;
  background:linear-gradient(165deg,rgba(21,25,34,.7),rgba(11,13,17,.55));backdrop-filter:blur(8px);
  position:relative;overflow:hidden;transition:border-color .4s,background .4s;
}
.qcard::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--honey),transparent);transform:scaleX(0);transition:transform .6s var(--ease);
}
.qcard:hover{border-color:rgba(242,176,30,.35)}
.qcard:hover::after{transform:scaleX(1)}
.qcard__no{font-family:var(--f-display);font-size:.72rem;letter-spacing:.2em;color:var(--honey);opacity:.65}
.qcard h3{font-family:var(--f-display);font-weight:500;font-size:1.16rem;margin:.7rem 0 .6rem}
.qcard p{margin:0;font-size:.92rem}

/* process */
.process__grid{max-width:820px}
.timeline{list-style:none;margin:3.2rem 0 0;padding:0 0 0 2.6rem;position:relative;display:grid;gap:2.2rem;counter-reset:step}
.timeline__rail{position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline__rail i{display:block;width:100%;height:0;background:linear-gradient(var(--honey-2),var(--honey-3));box-shadow:0 0 14px rgba(242,176,30,.5)}
.timeline li{position:relative;counter-increment:step}
.timeline__dot{
  position:absolute;left:-2.6rem;top:.45rem;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-2);background:var(--ink);transition:border-color .4s,box-shadow .4s,background .4s;
}
.timeline li.is-in .timeline__dot{border-color:var(--honey);background:var(--honey);box-shadow:0 0 0 6px rgba(242,176,30,.12)}
.timeline b{font-family:var(--f-display);font-weight:500;font-size:1.22rem;display:block;margin-bottom:.35rem}
.timeline b::before{content:"0" counter(step);color:var(--honey);font-size:.72rem;letter-spacing:.18em;margin-right:.9rem;vertical-align:middle}
.timeline p{margin:0;max-width:60ch;font-size:.95rem}

/* global */
.globe-wrap{position:relative;display:grid;justify-items:center;gap:1rem}
.globe{width:min(100%,560px);height:auto;aspect-ratio:1}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,176,30,.35)}100%{box-shadow:0 0 0 12px rgba(242,176,30,0)}}

/* contact */
.contact__list{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.3rem}
.contact__list li{display:grid;gap:.2rem}
.contact__list span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact__list b{font-family:var(--f-display);font-weight:400;font-size:1.02rem}
.contact__list a:hover{color:var(--honey)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.3rem);
  background:linear-gradient(165deg,rgba(21,25,34,.8),rgba(11,13,17,.6));backdrop-filter:blur(12px);
}
.field{position:relative}
.field--full{grid-column:1 / -1}
.form .btn,.form__note,.form__status{grid-column:1 / -1}
.field input,.field select,.field textarea{
  width:100%;background:rgba(7,8,10,.6);border:1px solid var(--line);border-radius:12px;
  padding:1.35rem .95rem .6rem;transition:border-color .3s,background .3s;resize:vertical;
}
.field select{
  padding-top:1.5rem;padding-bottom:.5rem;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F2B01E' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.field select option{background:#0d0f13;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--honey);background:rgba(7,8,10,.85)}
.field label{
  position:absolute;left:.95rem;top:1.05rem;font-size:.92rem;color:var(--muted);
  pointer-events:none;transition:transform .25s var(--ease),font-size .25s var(--ease),color .25s;transform-origin:left top;
}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label,
.field .label--static{transform:translateY(-.62rem) scale(.78);color:var(--honey)}
.field input.is-error,.field textarea.is-error{border-color:#e0574f}
.form__note{font-size:.78rem;color:var(--muted);margin:0;text-align:center}
.form__consent{grid-column:1/-1;display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.5;cursor:pointer}
.form__consent input{margin:.2rem 0 0;flex:0 0 auto;accent-color:var(--honey)}
.form__consent a{color:var(--honey);text-decoration:underline;text-underline-offset:2px}
.form__consent.is-error{color:#e0574f}
.form__hint{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--muted);line-height:1.5}
.form__status{margin:0;font-size:.88rem;text-align:center;min-height:1.2em;color:var(--honey-2)}

/* footer */
.footer{border-top:1px solid var(--line);padding:3.2rem 0 2.4rem;background:rgba(7,8,10,.8);backdrop-filter:blur(10px)}
.footer__inner{display:grid;gap:1.8rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.6rem;font-size:.85rem;color:var(--muted)}
.footer__nav a:hover{color:var(--honey)}
.footer__legal{font-size:.76rem;color:var(--muted);margin:0;padding-top:1.4rem;border-top:1px solid var(--line)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{gap:1.35rem}
  .nav a{font-size:.82rem;letter-spacing:.04em}
}
@media (max-width:1060px){
  .qgrid{grid-template-columns:1fr 1fr}
  .grid-2,.grid-2--wide{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .burger{display:grid}
  /* .nav goes position:fixed here, so nothing is left in flow to push the
     language switcher and the burger to the right edge */
  .header__tools{margin-left:auto}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,360px);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:1.6rem;padding:2rem 2.2rem;background:rgba(9,10,14,.97);backdrop-filter:blur(20px);
    border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;
    transition:transform .5s var(--ease),visibility .5s;
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-family:var(--f-display);font-size:1.35rem;color:var(--text)}
  .form{grid-template-columns:1fr}
}
/* the descriptor is long in every language and widens the brand block enough to
   push the nav and the language switcher past the right edge — body has
   overflow-x:hidden, so that shows up as a clipped switcher, not a scrollbar.
   It only shows where there is genuinely room for it. */
@media (max-width:1180px){
  .brand__tag{display:none}
}
@media (max-width:720px){
  .stats:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
  .regions{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .footer__nav{gap:1rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .grain{display:none}
  .hero__mark,.hero__mark polygon{animation:none !important}
  .hero__mark{opacity:.45}
}
@media (prefers-reduced-motion:reduce) and (max-width:1023.98px){
  .hero__mark{opacity:.18}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .hero__mark{opacity:.12}
}

/* =========================================================
   PRODUCT PAGES
   ========================================================= */
.phero{padding:clamp(9rem,17vh,11.5rem) 0 clamp(2.5rem,6vw,4rem);position:relative}
.phero__title{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.1rem,5.4vw,4rem);margin:1rem 0 1.2rem;max-width:18ch;
  background:linear-gradient(180deg,#FFF3D2,#FFD45E 42%,#F2B01E 68%,#C07E0C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.phero__lead{max-width:62ch;font-size:1.06rem;color:var(--muted);margin:0 0 2.6rem}
.phero .stats{margin-top:2.2rem}
/* the product strip carries text, not headline numbers */
.phero .stats dd{font-family:var(--f-body);font-size:1rem;font-weight:500;line-height:1.45;letter-spacing:0;color:var(--text)}
.phero .stat{padding:1.05rem 1.3rem}
.phero .pcard__tag{display:inline-flex;margin-bottom:.2rem}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--honey)}
.crumbs span{color:var(--line-2)}
.crumbs b{font-weight:400;color:var(--text)}

/* specification table */
.spec{margin:1.6rem 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec__row{background:rgba(11,13,17,.72);display:grid;grid-template-columns:minmax(9rem,34%) 1fr;gap:1rem;padding:1rem 1.3rem;transition:background .35s}
.spec__row:hover{background:rgba(242,176,30,.06)}
.spec dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:center}
.spec dd{margin:0;font-size:.95rem;color:var(--text)}

/* design notes */
.feats{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;counter-reset:feat}
.feats li{background:rgba(11,13,17,.72);padding:1.7rem 1.6rem;counter-increment:feat;transition:background .35s}
.feats li:hover{background:rgba(242,176,30,.05)}
.feats b{font-family:var(--f-display);font-weight:500;font-size:1.08rem;display:block;margin-bottom:.5rem}
.feats b::before{content:"0" counter(feat);color:var(--honey);font-size:.7rem;letter-spacing:.18em;margin-right:.9rem;vertical-align:middle}
.feats p{margin:0;font-size:.93rem}

/* card grid (home, products index, 'works with') */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1.2rem;margin-top:2.4rem}

/* closing call to action */
.pcta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
  border:1px solid rgba(242,176,30,.3);border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(150deg,rgba(242,176,30,.13),rgba(11,13,17,.78));backdrop-filter:blur(10px);
}
.pcta .h2{margin:0 0 .7rem;font-size:clamp(1.5rem,3vw,2.2rem)}
.pcta p{margin:0;max-width:60ch;font-size:.95rem}

@media (max-width:1060px){
  .feats{grid-template-columns:1fr}
}
@media (max-width:560px){
  .spec__row{grid-template-columns:1fr;gap:.35rem}
  .pcta{flex-direction:column;align-items:flex-start}
  /* short text values, so two columns beat a four-row stack */
  .phero .stats{grid-template-columns:1fr 1fr}
  .phero .stat{padding:.9rem 1rem}
}

/* =========================================================
   ADDED WITH THE REAL CATALOGUE
   ========================================================= */

/* honest footnote under a product's coverage grid */
.section__note{
  margin:1.8rem 0 0;max-width:70ch;font-size:.88rem;color:var(--muted);
  padding-left:1rem;border-left:2px solid rgba(242,176,30,.35);
}
/* On the product pages the note ends its section and wants no space under it.
   On the partnership page the closing call to action follows it, and with no
   bottom margin the panel sat flush against the last line of text. */
.section__note:not(:last-child){margin-bottom:2.2rem}

/* partner proposition, global section */
.bullets{list-style:none;margin:2rem 0;padding:0;display:grid;gap:.85rem}
.bullets li{display:flex;align-items:center;gap:.85rem;font-family:var(--f-display);font-weight:400;font-size:1.05rem}
.bullets li::before{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(242,176,30,.5);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='%23F2B01E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.6'/%3E%3C/svg%3E") center/12px no-repeat,
    rgba(242,176,30,.08);
}

/* trade fairs */

/* regulatory line in the footer */
/* products index: one stack of family groups */
.section--stack .kicker{margin-top:3.4rem}
.section--stack .kicker:first-child{margin-top:0}

/* ---------- named product catalogue on a system page ---------- */
.catalog{display:grid;gap:2.4rem;margin-top:2.6rem}
.catalog__group h3{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--honey);
  margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.catalog__group ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.catalog__group li{
  background:rgba(11,13,17,.72);padding:.95rem 1.2rem;
  font-family:var(--f-display);font-weight:400;font-size:.95rem;
  display:flex;align-items:center;gap:.75rem;
  border-left:2px solid transparent;transition:background .3s,border-color .3s,padding-left .3s;
}
.catalog__group li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;transform:rotate(45deg);
  background:rgba(242,176,30,.5);
}
.catalog__group li:hover{background:rgba(242,176,30,.07);border-left-color:var(--honey);padding-left:1.5rem}

/* ---------- partnership & legal pages ---------- */
.footer__legalnav{
  display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;
  font-size:.78rem;color:var(--muted);opacity:.8
}
.footer__legalnav a:hover{color:var(--honey);opacity:1}

.phero--legal{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.phero__title--legal{font-size:clamp(2.1rem,5vw,3.4rem)}
/* a legal notice reads as one document, not as a series of landing sections */
.legal-doc .section{padding:clamp(2.2rem,5vw,3.4rem) 0}
.legal-doc .section:first-of-type{padding-top:clamp(1rem,3vw,2rem)}
/* the partnership page runs as a sequence of short card blocks. The home
   page's rhythm is built for sections that carry more than a heading and a
   grid, and at that scale it leaves the reader crossing 300px of empty page
   between one block and the next. */
.pitch-doc .section{padding:clamp(3rem,6vw,4.6rem) 0}

.pitch-doc .section:first-of-type{padding-top:clamp(1.6rem,4vw,3rem)}

.prose{max-width:68ch}
.prose .h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:0 0 1.2rem}
.prose p{margin:0 0 1.1rem;color:var(--muted);font-size:1rem;line-height:1.75}
.prose p:last-child{margin-bottom:0}
.prose__list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.prose__list li{
  position:relative;padding-left:1.6rem;color:var(--muted);
  font-size:1rem;line-height:1.7
}
.prose__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
}

@media (max-width:720px){
  .footer__legalnav{gap:.8rem 1.2rem;font-size:.74rem}
}

/* ---------- news & events page ---------- */

/* ---------- header nav: the source site sets its menu in caps ---------- */
.header .nav a{text-transform:uppercase;letter-spacing:.11em;font-size:.78rem;font-weight:500}
.header .nav .nav__cta{letter-spacing:.09em}
@media (max-width:1000px){
  /* in the drawer the items are large and read better as written */
  .header .nav a{text-transform:none;letter-spacing:.01em}
}

/* ---------- section head: hexagon-notched panel ---------- */
.head-hex{
  --notch:26px;
  position:relative;
  padding:clamp(1.7rem,3.4vw,2.4rem) clamp(1.5rem,3vw,2.2rem);
  background:linear-gradient(160deg,rgba(21,25,34,.6),rgba(11,13,17,.35));
  clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),
                    calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}
/* the outline is a second clipped layer: clip-path would shear a real border off */
.head-hex::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(242,176,30,.45);
  clip-path:polygon(
    var(--notch) 0,100% 0,100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,0 100%,0 var(--notch),
    var(--notch) 1px,1px var(--notch),1px calc(100% - 1px),
    calc(100% - var(--notch)) calc(100% - 1px),
    calc(100% - 1px) calc(100% - var(--notch)),calc(100% - 1px) 1px,var(--notch) 1px);
}
.head-hex > :last-child{margin-bottom:0}
@media (max-width:560px){
  .head-hex{--notch:18px}
}

/* the honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}