:root{
  --bg:#f2f0ea;
  --bg-warm:#ece8e0;
  --ink:#14171c;
  --ink-soft:#565c63;
  --ink-faint:#8b9096;
  --line: rgba(20,23,28,0.14);
  --line-soft: rgba(20,23,28,0.08);
  --navy:#0c2c50;
  --navy-deep:#071c34;
  --accent:#0055ca;
  --accent-soft:#2e7de0;
  --dark-bg:#14171c;
  --dark-panel:#1b1f26;
  --dark-line: rgba(242,240,234,0.14);
  --dark-ink:#f2f0ea;
  --dark-ink-soft: rgba(242,240,234,0.62);
  --paper:#fdfcf9;
  --header-h: 72px;
  --disp: 'Oswald', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%; margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden; /* the page itself never scrolls vertically */
}
h1,h2,h3{font-family:var(--disp); margin:0; text-transform:uppercase; letter-spacing:0.01em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--body); cursor:pointer;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.on-dark{color:var(--accent-soft);}

/* ================= HEADER ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  height:var(--header-h);
  background: #ffffff;
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; height:100%; }
.brand .mark{ height:48px; width:auto; display:block; }

nav.main-nav{ display:flex; align-items:center; gap:36px; }
nav.main-nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--navy); position:relative; padding:6px 0;
}
nav.main-nav a.active{ color:var(--accent); }
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{width:100%;}

.header-right{display:flex; align-items:center; gap:22px;}

.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  padding:7px 12px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  color:var(--ink); text-transform:uppercase;
}
.lang-btn:hover{border-color:var(--ink);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--paper); border:1px solid var(--line); min-width:170px;
  box-shadow:0 12px 28px rgba(20,23,28,0.14);
  display:none; flex-direction:column; padding:6px;
}
.lang-switch.open .lang-menu{display:flex;}
.lang-menu button{
  background:none; border:none; text-align:left; padding:10px 12px;
  font-family:var(--body); font-size:13px; color:var(--ink); display:flex; justify-content:space-between; align-items:center;
}
.lang-menu button:hover{background:var(--bg-warm);}
.lang-menu button[aria-current="true"]{color:var(--accent); font-weight:600;}
.lang-label{ display:flex; align-items:center; gap:8px; }
.flag{ font-size:15px; line-height:1; }

.contact-pill{
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--navy); background:var(--navy); color:var(--paper); padding:9px 16px; border-radius:999px;
  box-shadow:0 0 0 0 rgba(12,44,80,0.45);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation:contactPulse 2.6s ease-in-out infinite;
}
.contact-pill:hover{
  background:var(--navy-deep); border-color:var(--navy-deep); color:var(--paper);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(12,44,80,0.45);
  animation-play-state:paused;
}
@keyframes contactPulse{
  0%{ box-shadow:0 0 0 0 rgba(12,44,80,0.45); }
  70%{ box-shadow:0 0 0 9px rgba(12,44,80,0); }
  100%{ box-shadow:0 0 0 0 rgba(12,44,80,0); }
}

/* ================= HORIZONTAL TRACK ================= */
.h-track{
  display:flex; flex-direction:row;
  width:100vw; height:100vh;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.h-track::-webkit-scrollbar{display:none;}

.panel{
  flex:0 0 100vw; width:100vw; height:100vh;
  scroll-snap-align:start;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--header-h) 0 0;
}
.panel-inner{
  width:100%; max-width:1180px; margin:0 auto;
  padding:0 40px;
}
.panel.on-light{background:var(--bg); color:var(--ink);}
.panel.on-dark{background:var(--dark-bg); color:var(--dark-ink);}

/* ---- HERO panel ---- */
.hero{ background:var(--dark-bg); color:var(--dark-ink); justify-content:flex-end; padding-bottom:64px;}
.hero .grid-bg{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 85%);
}
.hero .glow{
  position:absolute; width:760px; height:760px; border-radius:50%;
  top:-320px; right:-240px;
  background: radial-gradient(circle, rgba(0,85,202,0.30), transparent 65%);
  pointer-events:none;
}
.hero-top{ display:flex; justify-content:flex-end; margin-bottom:clamp(14px,3vh,32px); position:relative; z-index:2;}
.hero-copy{max-width:720px; position:relative; z-index:2;}
.hero h1{
  font-size:clamp(34px, 5.6vw, 74px);
  line-height:1.0;
  font-weight:600;
  margin:12px 0 16px;
}
.hero-lead{
  font-family:var(--body); font-weight:300; font-size:clamp(14px,1.6vw,17px); line-height:1.55;
  color:var(--dark-ink-soft); max-width:560px; margin-bottom:clamp(16px,3vh,28px);
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

.hero-intro-inner{ position:relative; z-index:2; overflow:hidden; }
.hero-intro-text{
  font-family:var(--disp);
  font-weight:600;
  text-transform:none;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.25;
  max-width:820px;
  color:var(--dark-ink);
  margin:0;
}
.drop-word-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.15em;
  margin-bottom:-0.15em;
}
.drop-word{
  display:inline-block;
  transform:translateY(-160%);
  opacity:0;
  animation:heroWordDrop 0.7s cubic-bezier(.22,.9,.32,1) forwards;
}
@keyframes heroWordDrop{
  to{ transform:translateY(0); opacity:1; }
}
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:13px 24px; border-radius:1px; display:inline-flex; align-items:center; gap:10px;
  border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-soft); transform:translateY(-2px);}
.btn-ghost{border-color:var(--dark-line); color:var(--dark-ink);}
.btn-ghost:hover{border-color:var(--dark-ink); transform:translateY(-2px);}
.btn-ghost.on-light{border-color:var(--line); color:var(--ink);}
.btn-ghost.on-light:hover{border-color:var(--ink);}

/* ---- DIAL (signature element) ---- */
.dial{ position:relative; width:clamp(88px,9vw,124px); height:clamp(88px,9vw,124px); flex:none;}
.dial svg{width:100%; height:100%; display:block;}
.dial .dial-value{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.dial .dial-value .num{ font-family:var(--mono); font-size:clamp(12px,1.3vw,16px); font-weight:500;}
.dial .dial-value .lbl{ font-family:var(--mono); font-size:8px; letter-spacing:0.08em; text-transform:uppercase; margin-top:3px; max-width:82px; line-height:1.3;}
.dial.on-dark .num{color:var(--dark-ink);}
.dial.on-dark .lbl{color:var(--dark-ink-soft);}
.dial.on-light .num{color:var(--ink);}
.dial.on-light .lbl{color:var(--ink-soft);}
.dial-ring-track{stroke:var(--dark-line); fill:none; stroke-width:1;}
.dial-ring-track.on-light{stroke:var(--line);}
.dial-ring-tick{stroke:var(--dark-line);}
.dial-ring-tick.on-light{stroke: var(--line);}
.dial-needle{stroke:var(--accent); stroke-width:2; stroke-linecap:round;}
.dial-needle-hub{fill:var(--accent);}

/* ---- STATS panel ---- */
.stats-panel{ background:var(--ink); color:var(--dark-ink); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ padding:0 28px; border-right:1px solid var(--dark-line); }
.stat:last-child{border-right:none;}
.stat .value{font-family:var(--disp); font-size:clamp(26px,3.6vw,42px); font-weight:600;}
.stat .label{font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; color:var(--dark-ink-soft); margin-top:8px; text-transform:uppercase;}

/* ---- INTRO panel ---- */
.intro-panel .panel-inner{ text-align:center; max-width:820px; }
.intro-panel h2{font-size:clamp(26px,3.6vw,42px); margin:12px 0 16px; font-weight:600;}
.intro-panel p{font-size:clamp(13px,1.4vw,16px); color:var(--ink-soft); line-height:1.6; font-weight:300;}
.quicknav{
  display:flex; justify-content:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  max-width:760px; margin:clamp(24px,4vh,44px) auto 0;
}
.quicknav a{
  flex:1; text-align:center; padding:14px 8px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); border-right:1px solid var(--line);
}
.quicknav a:last-child{border-right:none;}
.quicknav a span.n{color:var(--ink-faint); margin-right:6px;}
.quicknav a:hover{color:var(--ink); background:var(--bg-warm);}

/* ---- MODULE panels (Quality / Workware / Software / Event) ---- */
.module-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
  margin-bottom:clamp(18px,3.5vh,36px); padding-bottom:clamp(14px,2.5vh,26px);
  border-bottom:1px solid var(--line-soft);
}
.panel.on-dark .module-head{border-color:var(--dark-line);}
.module-head-text{max-width:640px;}
.panel h2{font-size:clamp(26px,3.8vw,46px); margin:10px 0 12px; font-weight:600;}
.module-lead{font-size:clamp(13px,1.3vw,15.5px); line-height:1.55; font-weight:300;}
.panel.on-light .module-lead{color:var(--ink-soft);}
.panel.on-dark .module-lead{color:var(--dark-ink-soft);}

.card-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.panel.on-dark .card-grid{ background:var(--dark-line); border-color:var(--dark-line);}
.card{
  background:var(--bg); padding:clamp(16px,2.2vh,26px) clamp(16px,1.6vw,22px);
  display:flex; flex-direction:column; justify-content:flex-start; gap:8px;
}
.panel.on-dark .card{background:var(--dark-bg);}
.card .idx{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.08em;}
.card h3{ font-size:clamp(13.5px,1.2vw,16px); font-weight:600; letter-spacing:0.01em;}
.card p{font-size:clamp(11.5px,1vw,13.5px); line-height:1.5; font-weight:300;}
.panel.on-light .card p{color:var(--ink-soft);}
.panel.on-dark .card p{color:var(--dark-ink-soft);}

/* ---- EVENT panel (Hünkar — cream boutique theme, distinct from the rest of the site) ---- */
.event-panel{
  background:#F9EFE2;
  color:#412708;
  justify-content:center;
}
.event-panel-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, 3vh, 32px);
  max-width:1080px;
  width:100%;
}
.event-logo{
  width:auto;
  height:clamp(240px, 38vh, 420px);
  display:block;
}
.event-gallery{
  display:flex;
  gap:clamp(6px, 1.2vw, 14px);
  width:100%;
  max-width:1040px;
  height:clamp(180px, 40vh, 300px);
}
.event-gallery-item{
  position:relative;
  flex:1;
  border-radius:5px;
  overflow:hidden;
  background:#412708;
  box-shadow:0 14px 34px rgba(65,39,8,0.2);
}
.event-gallery-item::after{
  /* thin inner gold hairline frame, on top of the photo */
  content:''; position:absolute; inset:5px; border:1px solid rgba(249,239,226,0.5);
  border-radius:2px; pointer-events:none; z-index:2;
}
.event-gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04);
  animation:eventZoom 12s ease-in-out infinite alternate;
}
.event-gallery-item:nth-child(1) img{ animation-delay:0s; }
.event-gallery-item:nth-child(2) img{ animation-delay:1.2s; }
.event-gallery-item:nth-child(3) img{ animation-delay:2.4s; }
.event-gallery-item:nth-child(4) img{ animation-delay:3.6s; }
@keyframes eventZoom{
  from{ transform:scale(1.0); }
  to{ transform:scale(1.14); }
}

@media (max-width:760px){
  .event-gallery{ flex-direction:column; height:auto; }
  .event-gallery-item{ aspect-ratio:3/2; }
}

/* ---- CTA panel ---- */
.cta-panel{
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color:#fdfcf9; text-align:center; position:relative; overflow:hidden;
}
.cta-panel::before{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, black 30%, transparent 80%);
}
.cta-panel .panel-inner{position:relative; z-index:2; max-width:880px;}
.cta-panel h2{font-size:clamp(26px,3.6vw,42px); font-weight:600; margin:12px 0 16px;}
.cta-panel p{font-size:15px; font-weight:300; color:rgba(253,252,249,0.78); margin-bottom:28px;}

.contact-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1px; background:rgba(253,252,249,0.14);
  border:1px solid rgba(253,252,249,0.14);
  margin-top:8px;
}
.contact-item{
  background:var(--navy-deep);
  padding:clamp(18px,2.6vh,28px) clamp(18px,2vw,28px);
  text-align:left;
}
.contact-label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent-soft); margin-bottom:8px;
}
.contact-value{
  font-size:15px; line-height:1.55; font-weight:300;
  color:rgba(253,252,249,0.92); margin:0;
}
.contact-value a{ color:rgba(253,252,249,0.92); border-bottom:1px solid rgba(253,252,249,0.3); }
.contact-value a:hover{ color:var(--accent-soft); border-color:var(--accent-soft); }

@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---- FOOTER panel ---- */
.footer-panel{ background:var(--ink); color:var(--dark-ink-soft); }
.footer-top{
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--dark-line); margin-bottom:20px;
}
.footer-brand{font-family:var(--disp); color:var(--dark-ink); font-size:19px; letter-spacing:0.04em; font-weight:600;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em;}
.footer-links a:hover{color:var(--dark-ink);}
.footer-region{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;}
.footer-region select{
  background:transparent; color:var(--dark-ink); border:1px solid var(--dark-line);
  padding:7px 10px; font-family:var(--mono); font-size:12px;
}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.footer-bottom small{font-family:var(--mono); font-size:11px;}
.social{display:flex; gap:16px;}
.social a{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em;}

/* ================= DOT NAV (right-side page indicator) ================= */
.dot-nav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:200;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.dot-nav button{
  width:8px; height:8px; border-radius:50%; background:transparent;
  border:1px solid var(--ink-faint); padding:0;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.dot-nav button.active{ background:var(--accent); border-color:var(--accent); transform:scale(1.3); }

/* page-corner prev/next arrows */
.page-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:200;
  width:48px; height:48px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 10px 24px rgba(20,23,28,0.16);
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.page-arrow:hover{ background:var(--accent); color:#fff; }
.page-arrow.prev{ left:22px; }
.page-arrow.next{ right:72px; }
.page-arrow:disabled{ opacity:.25; pointer-events:none; }

.scroll-cue{
  position:fixed; bottom:24px; left:32px; z-index:150;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dark-ink-soft); display:flex; align-items:center; gap:10px;
}
.scroll-cue .line{width:36px; height:1px; background:var(--dark-line); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:''; position:absolute; left:-100%; top:0; width:100%; height:100%; background:var(--accent);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{0%{left:-100%;}50%{left:0;}100%{left:100%;}}

/* ---- VIDEO / PARALLAX PANEL (Quality) ---- */
.panel.video-panel{ color:var(--dark-ink); background:var(--dark-bg); }
.video-bg-wrap{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  will-change:transform;
}
.video-bg{
  position:absolute; top:50%; left:50%;
  width:130%; height:130%;
  min-width:130%; min-height:130%;
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.video-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(7,28,52,0.55) 0%, rgba(7,28,52,0.72) 55%, rgba(7,28,52,0.86) 100%);
}
.video-panel .panel-inner{ position:relative; z-index:2; }
.video-panel .module-lead.on-video{ color:rgba(242,240,234,0.82); }
.video-panel h2{ color:var(--dark-ink); }
.video-panel .module-head{ border-color:var(--dark-line); }

.card-grid.on-video{
  background:rgba(242,240,234,0.16);
  border:1px solid rgba(242,240,234,0.18);
}
.card-grid.on-video .card{
  background:rgba(7,20,38,0.42);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.card-grid.on-video .card h3{ color:var(--dark-ink); }
.card-grid.on-video .card p{ color:rgba(242,240,234,0.72); }
.card-grid.on-video .card .idx{ color:var(--accent-soft); }

/* image slot — now holding real product photos (white-background product shots) */
.card-media{
  display:flex; align-items:center; justify-content:center;
  height:clamp(120px, 15vh, 168px);
  margin:2px 0 8px;
  background:rgba(253,252,249,0.94);
  border-radius:3px;
  overflow:hidden;
  padding:8px;
}
.card-media svg{ width:44px; height:44px; color:rgba(20,23,28,0.4); }
.card-media img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .35s ease;
}
.card:hover .card-media img{ transform:scale(1.12); }

@media (max-width:760px){
  .video-bg{ width:180%; height:180%; }
}
/* below this width, horizontal paging becomes an ordinary stacked vertical page —
   full-viewport horizontal paging is not a usable pattern on small touch screens */
@media (max-width:760px){
  body{ overflow-y:auto; overflow-x:hidden; }
  .h-track{
    flex-direction:column; width:100%; height:auto;
    overflow-x:hidden; overflow-y:visible;
    scroll-snap-type:none;
  }
  .panel{
    width:100%; height:auto; min-height:auto; overflow:visible;
    padding:96px 0 56px; display:block;
  }
  .hero{padding-bottom:48px;}
  .panel-inner{padding:0 22px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{padding:20px 16px; border-bottom:1px solid var(--dark-line); border-right:none;}
  nav.main-nav{display:none;}
  .dot-nav, .page-arrow, .scroll-cue{display:none;}
  .hero-top{justify-content:flex-start;}
}