:root {
  --bg: #02050d;
  --bg-soft: #060b18;
  --navy: #071126;
  --blue: #0b63ff;
  --blue-2: #00b8ff;
  --cyan: #57ddff;
  --white: #f7fbff;
  --muted: #94a2bd;
  --line: rgba(132, 176, 255, .16);
  --glass: rgba(8, 17, 37, .58);
  --radius: 28px;
  --shadow-blue: 0 0 50px rgba(0, 97, 255, .2), 0 0 120px rgba(0, 97, 255, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(20, 80, 220, .16), transparent 38%),
    var(--bg);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
::selection { background: #0a66ff; color: #fff; }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(10, 100, 255, .12), rgba(10, 100, 255, 0) 68%);
  transform: translate(-50%, -50%); filter: blur(8px); opacity: 0; transition: opacity .3s ease;
}
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 200; background: rgba(255,255,255,.03); }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 18px var(--blue); }

.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 90;
  padding: 18px 0; transition: .35s ease;
}
.site-header.scrolled { padding: 10px 0; background: rgba(2, 5, 13, .72); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header-inner { max-width: 1520px; margin: auto; display: flex; align-items: center; gap: 34px; padding-inline: 34px; }
.brand { width: 190px; flex: 0 0 auto; }
.brand img { width: 100%; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.desktop-nav a { position: relative; font-size: 13px; color: #c7d0e0; letter-spacing: .02em; transition: color .25s ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 1px; background: var(--blue-2); transition: width .25s ease; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav a:hover::after { width: 100%; }
.header-cta { min-height: 44px; padding: 0 18px; border: 1px solid rgba(84, 173, 255, .35); border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; background: rgba(14, 95, 255, .09); box-shadow: inset 0 0 30px rgba(20, 91, 255, .05); }
.header-cta span { color: var(--cyan); }
.menu-toggle { margin-left: auto; width: 44px; height: 44px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; display: grid; place-content: center; gap: 6px; }
.menu-toggle span { width: 20px; height: 1px; background: #fff; transition: .3s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(2,5,13,.97); padding: 112px 26px 30px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-105%); transition: transform .55s cubic-bezier(.2,.75,.2,1); z-index: -1; }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: clamp(24px, 7vw, 38px); font-weight: 600; }
.mobile-menu .mobile-cta { margin-top: 20px; background: var(--blue); padding: 16px 20px; border-radius: 18px; border-bottom: 0; text-align: center; font-size: 16px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #6faaff; font-size: 11px; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }

.hero { position: relative; min-height: 100vh; height: 100vh; overflow: hidden; isolation: isolate; background:
  radial-gradient(circle at 50% 48%, rgba(10, 86, 255, .18), transparent 31%),
  linear-gradient(180deg, #02040b, #040914 58%, #02050d);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(56,110,220,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56,110,220,.05) 1px, transparent 1px); background-size: 84px 84px; mask-image: radial-gradient(circle at center, #000 20%, transparent 70%); }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 70vw; height: 55vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,102,255,.14), transparent 62%); filter: blur(12px); z-index: -1; }
.hero-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(80, 140, 255, .11); box-shadow: inset 0 0 30px rgba(0,100,255,.05); }
.hero-orbit-a { width: min(68vw, 1000px); aspect-ratio: 1; }
.hero-orbit-b { width: min(48vw, 720px); aspect-ratio: 1; border-style: dashed; animation: orbitSpin 30s linear infinite; }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.hero-copy { position: absolute; z-index: 4; }
.hero-copy-top { width: min(720px, 43vw); left: 6vw; top: 50%; transform: translateY(-48%); }
.hero-copy-top h1, .hero-copy-side h2 { margin: 18px 0 22px; font-size: clamp(58px, 7.7vw, 138px); line-height: .86; letter-spacing: -.065em; font-weight: 780; }
.hero-copy-top h1 span, .hero-copy-side h2 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.8); text-shadow: 0 0 28px rgba(30, 119, 255, .1); }
.hero-copy-top p { max-width: 570px; color: #aab6ca; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.7; }
.hero-copy-side { width: 430px; right: 6vw; top: 50%; transform: translateY(-45%); opacity: 0; pointer-events: none; }
.hero-copy-side h2 { font-size: clamp(46px, 5.8vw, 92px); }
.hero-copy-side p { color: #9facbf; line-height: 1.75; max-width: 410px; }
.hero-mini-stats { margin-top: 34px; display: grid; gap: 12px; }
.hero-mini-stats div { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.hero-mini-stats strong { color: #2d82ff; font-size: 12px; letter-spacing: .1em; }
.hero-mini-stats span { color: #eaf1ff; font-size: 13px; }
.hero-product { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(52vw, 850px); transform: translate(-50%,-47%); will-change: transform; }
.hero-product-halo { position: absolute; inset: 12% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(16, 105, 255, .38), rgba(0, 80, 255, .08) 42%, transparent 68%); filter: blur(25px); animation: haloPulse 4s ease-in-out infinite; }
@keyframes haloPulse { 50% { transform: scale(1.08); opacity: .72; } }
.hero-product-frame { position: relative; aspect-ratio: 1.24; overflow: hidden; border-radius: 34px; border: 1px solid rgba(105,170,255,.27); background: #020714; box-shadow: 0 30px 120px rgba(0,0,0,.65), 0 0 65px rgba(0,89,255,.16), inset 0 0 60px rgba(0,72,255,.06); }
.hero-product-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 24%, transparent 72%, rgba(30,110,255,.08)); }
.hero-product-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; transform: scale(1.04); }
.frame-corner { position: absolute; width: 38px; height: 38px; border-color: rgba(87,221,255,.72); z-index: 2; }
.corner-tl { left: 14px; top: 14px; border-left: 1px solid; border-top: 1px solid; }
.corner-tr { right: 14px; top: 14px; border-right: 1px solid; border-top: 1px solid; }
.corner-bl { left: 14px; bottom: 14px; border-left: 1px solid; border-bottom: 1px solid; }
.corner-br { right: 14px; bottom: 14px; border-right: 1px solid; border-bottom: 1px solid; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; color: #73829d; font-size: 9px; letter-spacing: .18em; }
.scroll-cue span { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; width: 2px; height: 8px; left: 50%; top: 9px; background: #5fcaff; border-radius: 3px; transform: translateX(-50%); animation: cue 1.6s infinite; }
@keyframes cue { 0% { transform: translate(-50%,0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(-50%,11px); opacity: 0; } }

.story-section { position: relative; padding: 160px 0 180px; background: linear-gradient(180deg, #02050d, #050b17 52%, #02050d); }
.section-heading { margin-bottom: 70px; }
.section-heading h2, .custom-heading h2, .references-head h2 { margin: 18px 0 0; max-width: 1050px; font-size: clamp(48px, 6.6vw, 108px); line-height: .94; letter-spacing: -.055em; font-weight: 720; }
.section-heading h2 span, .references-head h2 span { color: #3a83ff; }
.story-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 22px; }
.story-card { border: 1px solid rgba(119,159,225,.12); background: linear-gradient(145deg, rgba(8,17,38,.72), rgba(5,9,18,.92)); border-radius: 30px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.22); }
.story-card-main { min-height: 720px; position: relative; }
.story-image { position: absolute; inset: 0; overflow: hidden; }
.story-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(2,5,13,.85)); }
.story-image img { width: 100%; height: 115%; object-fit: cover; object-position: center; }
.story-overlay { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 32px; }
.story-overlay span { color: #61a6ff; font-size: 11px; letter-spacing: .16em; }
.story-overlay h3 { margin: 10px 0 0; max-width: 600px; font-size: clamp(28px, 3vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.story-stack { display: grid; gap: 22px; }
.story-card-small { padding: 28px; min-height: 210px; position: relative; transition: transform .35s ease, border-color .35s ease; }
.story-card-small:hover { transform: translateY(-6px); border-color: rgba(62,135,255,.35); }
.story-card-small .icon-chip { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(45,134,255,.3); background: rgba(15,91,255,.09); color: #55c4ff; font-size: 18px; box-shadow: inset 0 0 22px rgba(0,82,255,.12); }
.story-card-small h3 { margin: 22px 0 9px; font-size: 20px; }
.story-card-small p { color: #8998b0; line-height: 1.62; font-size: 14px; }
.line-meter { position: absolute; left: 28px; right: 28px; bottom: 22px; height: 1px; background: rgba(255,255,255,.07); overflow: hidden; }
.line-meter span { display: block; width: 35%; height: 100%; background: linear-gradient(90deg, #0b63ff, #55d7ff); box-shadow: 0 0 10px #0b63ff; transition: width .5s ease; }
.story-card-small:hover .line-meter span { width: 100%; }

.mechanism-section { position: relative; height: 300vh; background: #01040b; }
.mechanism-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1.3fr .55fr; align-items: center; gap: 34px; padding: 90px 5vw 40px; overflow: hidden; }
.mechanism-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 53% 48%, rgba(0,88,255,.18), transparent 32%), linear-gradient(180deg,#01040b,#040914); }
.mechanism-copy { max-width: 520px; }
.mechanism-copy h2 { margin: 18px 0 20px; font-size: clamp(54px, 6.5vw, 110px); line-height: .91; letter-spacing: -.06em; }
.mechanism-copy h2 span { color: #1472ff; }
.mechanism-copy > p { color: #96a3b8; line-height: 1.72; max-width: 450px; }
.mechanism-status { margin-top: 40px; border: 1px solid rgba(70,132,240,.18); background: rgba(8,16,33,.6); backdrop-filter: blur(18px); border-radius: 22px; padding: 20px; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: #94a2bb; font-size: 13px; }
.status-row strong { color: #fff; font-size: 21px; letter-spacing: .06em; }
.status-line { height: 3px; background: rgba(255,255,255,.06); border-radius: 99px; margin: 13px 0 15px; overflow: hidden; }
.status-line span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg,#1267ff,#4ce0ff); box-shadow: 0 0 12px #1267ff; }
.mechanism-status small { color: #6f7f99; }
.mechanism-stage-wrap { position: relative; min-height: 760px; display: grid; place-items: center; perspective: 1200px; }
.mechanism-blueprint { position: absolute; width: 700px; height: 700px; border-radius: 50%; opacity: .4; background-image: linear-gradient(rgba(31,101,233,.1) 1px, transparent 1px),linear-gradient(90deg,rgba(31,101,233,.1) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle,#000 30%,transparent 70%); transform: rotateX(65deg); }
.mechanism-stage { position: relative; width: min(470px, 42vw); height: 690px; transform-style: preserve-3d; transform: rotateY(-5deg) rotateX(2deg); }
.stand-glow { position: absolute; inset: 8% -18% -8%; background: radial-gradient(circle,rgba(0,101,255,.28),transparent 65%); filter: blur(20px); }
.stand-head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 73%; height: 148px; background: linear-gradient(145deg,#0d1b36,#050b17); border: 1px solid rgba(85,158,255,.5); border-radius: 24px 24px 8px 8px; display: grid; place-items: center; box-shadow: inset 0 0 35px rgba(15,87,255,.12), 0 0 25px rgba(0,110,255,.24); }
.stand-head::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(109,210,255,.14); pointer-events:none; }
.mini-s-logo { font-weight: 900; font-style: italic; font-size: 68px; letter-spacing: -.15em; color: transparent; -webkit-text-stroke: 4px #2b85ff; filter: drop-shadow(0 0 12px rgba(0,121,255,.6)); transform: skewX(-12deg); }
.stand-body { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 76%; height: 560px; border: 1px solid rgba(77,154,255,.52); background: linear-gradient(90deg,rgba(9,23,50,.94),rgba(4,9,18,.97)); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 55px rgba(0,82,255,.08), 0 0 26px rgba(0,105,255,.2); border-radius: 16px 16px 22px 22px; overflow: hidden; }
.stand-inner { position: absolute; left: 6%; right: 6%; top: 0; height: 49%; overflow: hidden; border-bottom: 1px solid rgba(77,151,255,.35); background: linear-gradient(180deg,rgba(3,7,14,.94),rgba(5,14,31,.94)); }
.guide-line { position: absolute; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg,transparent,#1478ff 30%,#1478ff 70%,transparent); opacity: .4; }
.guide-left { left: 7%; } .guide-right { right: 7%; }
.shelf-platform { --lift: 0px; position: absolute; left: 5%; right: 5%; bottom: 18px; min-height: 196px; padding: 13px 12px 11px; border: 1px solid rgba(69,151,255,.45); border-radius: 12px 12px 9px 9px; background: linear-gradient(180deg,rgba(9,28,61,.96),rgba(5,14,31,.98)); transform: translateY(var(--lift)); transition: none; box-shadow: 0 -4px 25px rgba(0,103,255,.18), inset 0 0 28px rgba(11,94,255,.1); }
.shelf-platform::after { content:""; position:absolute; left:3%; right:3%; bottom:-6px; height:7px; border-radius:0 0 8px 8px; background:#0b5bea; box-shadow:0 0 18px #0b6bff; }
.can-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; align-items: end; }
.can { position: relative; aspect-ratio: .58; min-height: 49px; border-radius: 48% 48% 14% 14% / 10% 10% 7% 7%; background: linear-gradient(90deg,#03112e,#0b3f98 36%,#061b45 62%,#0e4aaf); border: 1px solid rgba(113,185,255,.38); box-shadow: inset 7px 0 12px rgba(35,110,255,.16), inset -8px 0 13px rgba(0,0,0,.35), 0 5px 12px rgba(0,0,0,.25); transform-origin: center bottom; }
.can::before { content:""; position:absolute; left:3%; right:3%; top:-3px; height:7px; border-radius:50%; background:linear-gradient(90deg,#77889f,#e8eef5 35%,#727f90 68%,#cbd2dc); border:1px solid #4a596b; }
.can::after { content:"S"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) skewX(-12deg); font-weight:900; font-size:14px; color:#3ba5ff; text-shadow:0 0 8px #0078ff; }
.stand-front { position: absolute; left: 0; right: 0; bottom: 0; height: 51%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg,#07152f 5%,#061c49 60%,#0d66ff 150%); }
.stand-front::before { content:""; position:absolute; inset:0; background:linear-gradient(150deg,transparent 55%,rgba(12,93,255,.18) 56%,rgba(12,93,255,.55) 72%,rgba(255,255,255,.12) 73%,transparent 74%); }
.stand-front .large { font-size: 94px; }
.stand-front small { position: relative; margin-top: 8px; color:#7296cc; letter-spacing:.18em; font-size:8px; }
.motion-arrow { position:absolute; right:-12px; display:flex; align-items:center; gap:9px; color:#4cabff; opacity:.3; }
.motion-arrow span { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(44,138,255,.38); border-radius:12px; box-shadow: inset 0 0 18px rgba(0,100,255,.15); font-size:21px; }
.motion-arrow em { font-style:normal; font-size:8px; letter-spacing:.12em; color:#7e92b2; }
.motion-arrow-up { top:165px; } .motion-arrow-down { top:245px; }
.mechanism-reference { align-self: end; margin-bottom: 5vh; border:1px solid rgba(100,153,236,.12); border-radius:20px; overflow:hidden; background:#050914; }
.mechanism-reference img { width:100%; aspect-ratio:.76; object-fit:cover; object-position:center; opacity:.72; }
.mechanism-reference span { display:block; padding:12px 14px; color:#60708a; font-size:8px; letter-spacing:.16em; }

.feature-orbit-section { height: 260vh; position: relative; background: linear-gradient(180deg,#01040b,#050b17 48%,#02050d); }
.feature-orbit-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.feature-orbit-pin::before { content:""; position:absolute; width:66vw; height:66vw; border:1px solid rgba(68,132,240,.12); border-radius:50%; box-shadow:0 0 0 9vw rgba(15,74,180,.025),0 0 0 18vw rgba(15,74,180,.018); }
.orbit-title { position:absolute; left:6vw; top:50%; transform:translateY(-50%); width:34vw; z-index:4; }
.orbit-title h2 { margin:18px 0 0; font-size:clamp(50px,6vw,100px); line-height:.91; letter-spacing:-.06em; }
.orbit-title h2 span { color:#2b7cff; }
.orbit-product { position:relative; width:min(42vw,720px); aspect-ratio:1.05; z-index:3; transform-style:preserve-3d; }
.orbit-product img { position:relative; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:30px; border:1px solid rgba(93,162,255,.2); box-shadow:0 35px 110px rgba(0,0,0,.55),0 0 60px rgba(0,91,255,.15); }
.orbit-glow { position:absolute; inset:-15%; border-radius:50%; background:radial-gradient(circle,rgba(0,98,255,.23),transparent 63%); filter:blur(18px); }
.orbit-feature { position:absolute; width:250px; z-index:5; opacity:0; transform:translateY(20px); padding:18px 0; border-top:1px solid rgba(255,255,255,.1); }
.orbit-feature strong { color:#3189ff; font-size:10px; letter-spacing:.12em; }
.orbit-feature h3 { font-size:18px; margin:7px 0 6px; }
.orbit-feature p { color:#75849d; margin:0; font-size:13px; line-height:1.55; }
.orbit-feature-1 { right:7vw; top:18%; }
.orbit-feature-2 { right:4vw; top:40%; }
.orbit-feature-3 { right:7vw; top:62%; }
.orbit-feature-4 { right:12vw; top:80%; }

.custom-section { padding: 170px 0 180px; position:relative; background:radial-gradient(circle at 80% 30%,rgba(0,91,255,.09),transparent 28%),#030711; }
.custom-heading { max-width:980px; }
.custom-heading p { max-width:760px; color:#8f9db3; font-size:17px; line-height:1.75; }
.shape-experience { margin-top:70px; min-height:690px; display:grid; grid-template-columns:.72fr 1.28fr; border:1px solid rgba(96,150,232,.14); border-radius:34px; overflow:hidden; background:linear-gradient(140deg,rgba(6,14,30,.95),rgba(3,7,14,.96)); box-shadow:0 50px 100px rgba(0,0,0,.25); }
.shape-copy { padding:44px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(255,255,255,.06); }
.shape-tabs { display:grid; }
.shape-tab { display:flex; align-items:center; gap:18px; width:100%; padding:22px 0; border:0; border-bottom:1px solid rgba(255,255,255,.07); background:none; color:#52617b; text-align:left; font-size:11px; letter-spacing:.12em; transition:.25s ease; }
.shape-tab span { font-size:18px; letter-spacing:0; color:#8e9bb0; transition:.25s ease; }
.shape-tab.active { color:#4e9dff; }
.shape-tab.active span { color:#fff; transform:translateX(8px); }
.shape-meta > span { color:#447cce; font-size:9px; letter-spacing:.17em; }
.shape-meta strong { display:block; margin:8px 0 10px; font-size:27px; }
.shape-meta p { color:#79889f; line-height:1.6; font-size:14px; max-width:360px; }
.shape-stage { position:relative; display:grid; place-items:center; perspective:1200px; overflow:hidden; }
.shape-stage::before { content:""; position:absolute; width:560px; height:230px; bottom:5%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,89,255,.26),transparent 68%); filter:blur(12px); }
.shape-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(36,101,214,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(36,101,214,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent); transform:perspective(600px) rotateX(66deg) scale(1.5); transform-origin:center bottom; }
.shape-model { position:absolute; opacity:0; transform:translateY(30px) scale(.86) rotateY(-20deg); transition:.65s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 40px 45px rgba(0,0,0,.45)); }
.shape-model.active { opacity:1; transform:translateY(0) scale(1) rotateY(-8deg); }
.shape-rectangle { width:310px; height:480px; }
.shape-rectangle .shape-head { position:absolute; left:15%; right:15%; top:0; height:120px; border:1px solid #2d7dff; border-radius:20px 20px 8px 8px; background:linear-gradient(140deg,#081a3b,#050a14); display:grid; place-items:center; box-shadow:inset 0 0 25px rgba(0,93,255,.16),0 0 18px rgba(0,94,255,.2); }
.shape-rectangle .shape-body { position:absolute; left:10%; right:10%; top:112px; bottom:0; border:1px solid #2d7dff; border-radius:8px 8px 18px 18px; background:linear-gradient(160deg,#08152f,#063c9b); display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 45px rgba(0,81,255,.1); }
.shape-rectangle .shape-body::after { content:""; position:absolute; width:160%; height:80px; bottom:20px; transform:rotate(-28deg); background:linear-gradient(90deg,transparent,#0d5cff,#48b7ff); opacity:.6; }
.shape-rectangle span,.shape-cylinder span,.shape-triangle span { position:relative; z-index:2; color:#2d8cff; font-size:70px; font-weight:900; font-style:italic; text-shadow:0 0 18px #035bff; transform:skewX(-12deg); }
.shape-top { position:absolute; width:80%; height:70px; left:10%; top:105px; background:linear-gradient(180deg,#06132c,#0a3172); clip-path:polygon(0 100%,12% 0,88% 0,100% 100%); border-top:1px solid #2d7dff; }
.shape-cylinder { width:280px; height:450px; }
.cylinder-body { position:absolute; inset:50px 18px 35px; border-radius:44% 44% 16% 16% / 10% 10% 7% 7%; background:linear-gradient(90deg,#020814,#092d71 30%,#06132c 65%,#0a47ac); border:1px solid rgba(69,150,255,.55); display:grid; place-items:center; box-shadow:inset 30px 0 45px rgba(0,82,255,.14),inset -30px 0 50px rgba(0,0,0,.28),0 0 26px rgba(0,88,255,.18); }
.cylinder-top { position:absolute; left:18px; right:18px; top:28px; height:78px; border-radius:50%; background:radial-gradient(ellipse at center,#0d3d8b 0,#071935 55%,#020610 74%); border:1px solid rgba(74,161,255,.7); box-shadow:0 0 22px rgba(0,96,255,.25); z-index:2; }
.cylinder-ring { position:absolute; left:18px; right:18px; bottom:10px; height:45px; border-radius:50%; border:2px solid rgba(63,154,255,.45); box-shadow:0 0 22px rgba(0,93,255,.22); }
.shape-triangle { width:350px; height:470px; }
.triangle-head { position:absolute; width:55%; height:112px; left:22.5%; top:0; border:1px solid rgba(66,154,255,.7); border-radius:16px; background:#06132c; display:grid; place-items:center; }
.triangle-body { position:absolute; inset:90px 0 0; clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(135deg,#07162f,#07347f 54%,#0b60e4); border-bottom:1px solid rgba(64,150,255,.7); display:grid; place-items:center; }
.triangle-body::after { content:""; position:absolute; inset:1px; clip-path:inherit; background:linear-gradient(150deg,rgba(255,255,255,.08),transparent 25%,rgba(0,0,0,.25)); }
.triangle-edge { position:absolute; left:50%; top:90px; bottom:0; width:1px; background:linear-gradient(#38c5ff,#0f69ff); box-shadow:0 0 18px #126aff; }
.project-form-card { margin-top:28px; display:grid; grid-template-columns:.72fr 1.28fr; border:1px solid rgba(93,153,244,.14); border-radius:34px; overflow:hidden; background:linear-gradient(135deg,#061126,#030711); }
.project-form-intro { padding:44px; border-right:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.project-form-intro h3 { margin:18px 0 14px; font-size:clamp(32px,3.5vw,54px); line-height:1; letter-spacing:-.04em; }
.project-form-intro p { color:#8190a7; line-height:1.65; }
.form-visual { position:relative; width:250px; height:190px; margin:45px auto 0; }
.measure-box { position:absolute; inset:30px 40px 15px; border:1px solid #1f76ff; background:linear-gradient(145deg,rgba(22,99,255,.16),rgba(4,11,24,.7)); box-shadow:0 0 40px rgba(0,92,255,.13); transform:skewY(-5deg); }
.measure-x,.measure-y,.measure-z { position:absolute; color:#45b8ff; font-size:10px; letter-spacing:.1em; }
.measure-x { bottom:0; left:50%; } .measure-y { left:10px; top:50%; } .measure-z { right:15px; top:25px; }
.form-visual::before,.form-visual::after { content:""; position:absolute; background:linear-gradient(90deg,transparent,#3aaeff,transparent); height:1px; }
.form-visual::before { left:35px; right:25px; bottom:8px; } .form-visual::after { width:1px; height:150px; left:20px; top:22px; background:linear-gradient(transparent,#3aaeff,transparent); }
.project-form { padding:44px; }
.project-form label { display:block; margin-bottom:8px; color:#72819a; font-size:11px; letter-spacing:.04em; }
.form-control,.form-select { min-height:50px; border-radius:13px; border:1px solid rgba(91,145,225,.16); background:#050b17; color:#eaf2ff; box-shadow:none; }
.form-control::placeholder { color:#38445a; }
.form-control:focus,.form-select:focus { color:#fff; background:#071126; border-color:rgba(39,126,255,.6); box-shadow:0 0 0 4px rgba(24,105,255,.08); }
.form-select { color:#aebbd0; }
textarea.form-control { padding-top:14px; }
.form-note { color:#53617a; max-width:420px; }
.btn-glow { border:1px solid rgba(83,171,255,.5); background:linear-gradient(135deg,#0753da,#0b75ff); color:#fff; min-height:50px; padding:0 20px; border-radius:14px; display:inline-flex; align-items:center; gap:12px; box-shadow:0 10px 35px rgba(0,89,255,.22),inset 0 1px 0 rgba(255,255,255,.2); }
.btn-glow span { color:#9ae6ff; }

.references-section { padding:150px 0 180px; overflow:hidden; background:#02050d; }
.references-head { margin-bottom:65px; }
.references-track-wrap { width:100%; overflow:hidden; }
.references-track { display:flex; gap:22px; width:max-content; padding-inline:6vw; }
.reference-card { width:min(620px,72vw); height:610px; border:1px solid rgba(97,154,237,.14); border-radius:30px; overflow:hidden; position:relative; flex:0 0 auto; background:#050b17; }

/* Desktop horizontal showcase: pin only the card rail, not the whole section.
   This keeps the cards vertically centered and fully visible while they slide sideways. */
@media (min-width: 992px) {
  .references-section { padding-top:130px; padding-bottom:140px; }
  .references-head { margin-bottom:48px; }
  .references-track-wrap {
    height:clamp(470px,68vh,610px);
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .references-track { align-items:stretch; }
  .reference-card { height:100%; }
}
.reference-card-image img { width:100%; height:100%; object-fit:cover; }
.reference-card-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(1,4,10,.92)); }
.reference-caption { position:absolute; z-index:2; left:28px; right:28px; bottom:28px; }
.reference-caption span { display:block; color:#4e99ff; font-size:10px; letter-spacing:.16em; }
.reference-caption strong { display:block; margin-top:8px; font-size:30px; }
.reference-caption em { display:block; margin-top:4px; color:#74839c; font-style:normal; }
.reference-dark,.reference-blue { padding:38px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 80% 20%,rgba(0,91,255,.16),transparent 30%),#050b17; }
.reference-blue { background:linear-gradient(145deg,#08245b,#051126 54%,#030711); }
.case-index { color:#347fff; font-size:12px; letter-spacing:.15em; }
.reference-dark small,.reference-blue small { color:#3f80dc; font-size:10px; letter-spacing:.16em; }
.reference-dark h3,.reference-blue h3 { max-width:460px; margin:15px 0 12px; font-size:clamp(34px,4vw,60px); line-height:1; letter-spacing:-.04em; }
.reference-dark p,.reference-blue p { color:#7f8da4; max-width:420px; line-height:1.65; }
.reference-stat strong { font-size:72px; color:transparent; -webkit-text-stroke:1px rgba(70,145,255,.7); }
.reference-stat span { display:block; color:#3487ff; font-size:10px; letter-spacing:.2em; }
.reference-shape-icon { width:120px; height:120px; display:grid; place-items:center; border:1px solid rgba(93,178,255,.33); border-radius:28px; color:#4bc7ff; font-size:70px; box-shadow:inset 0 0 35px rgba(0,105,255,.13),0 0 40px rgba(0,81,255,.12); }

.about-section { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:#040914; }
.about-media { min-height:100vh; overflow:hidden; position:relative; }
.about-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,#040914),linear-gradient(180deg,rgba(2,5,13,.08),rgba(2,5,13,.3)); }
.about-media img { width:100%; height:115%; object-fit:cover; }
.about-copy { padding:10vh 7vw; display:flex; flex-direction:column; justify-content:center; }
.about-copy h2 { margin:18px 0 24px; font-size:clamp(45px,5vw,82px); line-height:.98; letter-spacing:-.055em; }
.about-copy > p { color:#8e9cb1; font-size:16px; line-height:1.75; max-width:620px; }
.about-points { margin-top:38px; display:grid; gap:0; }
.about-points > div { display:grid; grid-template-columns:50px 180px 1fr; align-items:start; gap:14px; padding:20px 0; border-top:1px solid rgba(255,255,255,.07); }
.about-points span { color:#3f8fff; font-size:10px; letter-spacing:.12em; }
.about-points strong { font-size:15px; }
.about-points p { color:#6f7f97; font-size:13px; margin:0; line-height:1.55; }

.contact-section { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; background:#01040b; }
.contact-section::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at center,rgba(15,90,220,.08),transparent 45%),linear-gradient(rgba(44,101,210,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(44,101,210,.04) 1px,transparent 1px); background-size:auto,90px 90px,90px 90px; mask-image:radial-gradient(circle,#000 30%,transparent 85%); }
.contact-light { position:absolute; width:44vw; height:100vh; filter:blur(40px); opacity:.35; }
.contact-light-a { left:-24vw; top:0; background:linear-gradient(90deg,transparent,#0867ff); transform:skewX(-22deg); }
.contact-light-b { right:-24vw; top:0; background:linear-gradient(-90deg,transparent,#00b7ff); transform:skewX(22deg); }
.contact-inner { position:relative; z-index:2; text-align:center; padding-top:120px; padding-bottom:42px; }
.contact-logo { width:min(310px,62vw); margin:0 auto 42px; }
.contact-inner h2 { margin:20px auto 22px; font-size:clamp(66px,10vw,170px); line-height:.82; letter-spacing:-.075em; }
.contact-inner h2 span { color:#1e79ff; }
.contact-inner > p { max-width:620px; margin:0 auto; color:#8f9db2; font-size:17px; line-height:1.7; }
.contact-button { margin-top:36px; min-height:62px; padding:0 26px; border-radius:999px; border:1px solid rgba(82,172,255,.45); color:#fff; background:rgba(8,88,255,.12); display:inline-flex; align-items:center; gap:18px; font-weight:600; box-shadow:inset 0 0 35px rgba(0,86,255,.1),0 0 35px rgba(0,95,255,.1); }
.contact-button span { width:32px; height:32px; border-radius:50%; background:#0b69ff; display:grid; place-items:center; }
.contact-collapse { max-width:900px; margin:28px auto 0; }
.contact-form { padding:24px; background:rgba(6,14,30,.78); border:1px solid rgba(100,155,240,.14); border-radius:22px; backdrop-filter:blur(18px); text-align:left; }
.contact-footer { margin-top:80px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:20px; color:#46536a; font-size:9px; letter-spacing:.16em; }
.contact-footer a { color:#6f86ac; }
.toast-mini { position:fixed; left:50%; bottom:26px; transform:translate(-50%,120px); z-index:300; padding:14px 18px; border:1px solid rgba(66,147,255,.35); border-radius:14px; background:rgba(4,12,27,.94); backdrop-filter:blur(18px); color:#dce8fa; font-size:12px; box-shadow:0 20px 50px rgba(0,0,0,.4); transition:.45s ease; opacity:0; }
.toast-mini.show { transform:translate(-50%,0); opacity:1; }

.reveal-up { opacity:0; transform:translateY(35px); }

@media (max-width: 1199.98px) {
  .site-header-inner { padding-inline:22px; }
  .brand { width:170px; }
  .desktop-nav { gap:20px; }
  .hero-copy-top { left:5vw; width:46vw; }
  .hero-product { width:55vw; }
  .mechanism-pin { grid-template-columns:.8fr 1.2fr; }
  .mechanism-reference { display:none; }
  .orbit-title { width:32vw; }
  .orbit-feature { width:210px; }
  .reference-card { width:560px; }
}

@media (max-width: 991.98px) {
  .hero { min-height: 100svh; }
  .hero-copy-top { width:80vw; top:27%; left:7vw; transform:none; }
  .hero-copy-top h1 { font-size:clamp(54px,11vw,92px); }
  .hero-copy-top p { max-width:520px; }
  .hero-product { width:82vw; top:70%; }
  .hero-copy-side { width:78vw; right:auto; left:7vw; top:24%; transform:none; }
  .story-grid { grid-template-columns:1fr; }
  .story-stack { grid-template-columns:repeat(3,1fr); }
  .story-card-main { min-height:620px; }
  .mechanism-section { height:auto; padding:140px 0; }
  .mechanism-pin { position:relative; min-height:0; grid-template-columns:1fr; padding:0 7vw; gap:60px; }
  .mechanism-stage-wrap { min-height:650px; }
  .mechanism-stage { width:min(480px,75vw); }
  .feature-orbit-section { height:auto; padding:150px 0; }
  .feature-orbit-pin { position:relative; height:auto; min-height:950px; display:block; padding:0 7vw; }
  .feature-orbit-pin::before { width:90vw; height:90vw; left:5vw; top:18%; }
  .orbit-title { position:relative; left:auto; top:auto; transform:none; width:100%; }
  .orbit-product { width:70vw; max-width:650px; margin:70px auto; }
  .orbit-feature { position:relative; right:auto!important; top:auto!important; opacity:1; transform:none; width:100%; }
  .shape-experience,.project-form-card { grid-template-columns:1fr; }
  .shape-copy,.project-form-intro { border-right:0; border-bottom:1px solid rgba(255,255,255,.06); }
  .shape-stage { min-height:580px; }
  .about-section { grid-template-columns:1fr; }
  .about-media { min-height:70vh; }
  .about-copy { padding:90px 7vw 120px; }
}

@media (max-width: 767.98px) {
  .site-header { padding:10px 0; }
  .site-header-inner { padding-inline:16px; }
  .brand { width:152px; }
  .hero-copy-top { top:18%; left:20px; width:calc(100% - 40px); }
  .hero-copy-top .eyebrow { font-size:8px; }
  .hero-copy-top p { font-size:14px; line-height:1.6; max-width:90%; }
  .hero-product { width:94vw; top:69%; }
  .hero-product-frame { border-radius:22px; }
  .hero-copy-side { left:20px; width:calc(100% - 40px); top:18%; }
  .hero-copy-side h2 { font-size:clamp(44px,14vw,68px); }
  .hero-mini-stats { margin-top:20px; }
  .scroll-cue em { display:none; }
  .story-section,.custom-section,.references-section { padding:110px 0; }
  .section-heading,.references-head { margin-bottom:44px; }
  .section-heading h2,.custom-heading h2,.references-head h2 { font-size:clamp(42px,13vw,68px); }
  .story-card-main { min-height:550px; }
  .story-stack { grid-template-columns:1fr; }
  .story-card-small { min-height:200px; }
  .mechanism-copy h2 { font-size:clamp(50px,14vw,78px); }
  .mechanism-stage-wrap { min-height:560px; }
  .mechanism-stage { width:88vw; height:560px; transform:scale(.9); }
  .stand-head { height:118px; }
  .stand-body { height:460px; }
  .stand-inner { height:51%; }
  .shelf-platform { min-height:160px; padding:10px 8px; }
  .can-grid { gap:5px; }
  .can { min-height:38px; }
  .motion-arrow { display:none; }
  .feature-orbit-pin { min-height:0; }
  .orbit-product { width:84vw; margin:55px auto; }
  .shape-experience { min-height:0; }
  .shape-copy { padding:28px; }
  .shape-stage { min-height:500px; }
  .shape-rectangle { transform:scale(.86); }
  .project-form-intro,.project-form { padding:28px; }
  .reference-card { width:86vw; height:520px; }
  .references-track { gap:14px; padding-inline:16px; }
  .about-media { min-height:58vh; }
  .about-copy h2 { font-size:clamp(42px,12vw,64px); }
  .about-points > div { grid-template-columns:40px 1fr; }
  .about-points p { grid-column:2; }
  .contact-inner { padding-inline:18px; }
  .contact-inner h2 { font-size:clamp(60px,18vw,100px); }
  .contact-footer { flex-direction:column; align-items:center; }
  .cursor-glow { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal-up { opacity:1!important; transform:none!important; }
}

/* ==========================================================
   HEADER / MOBILE MENU / HERO COPY REVISION
   ========================================================== */
.site-header-inner { position: relative; z-index: 3; }

/* Language selector */
.language-switcher { position: relative; margin-left: 2px; }
.language-switcher summary {
  list-style: none; cursor: pointer; min-height: 38px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(113,163,255,.16); border-radius: 999px;
  background: rgba(8,18,38,.44); color: #dce8fb;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  transition: border-color .25s ease, background .25s ease;
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover { border-color: rgba(72,153,255,.42); background: rgba(10,32,67,.68); }
.language-switcher summary i { width: 5px; height: 5px; border-right: 1px solid #6f9ddd; border-bottom: 1px solid #6f9ddd; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
.language-switcher[open] summary i { transform: rotate(225deg) translate(-1px,-1px); }
.lang-globe { color: #46a7ff; font-size: 14px; line-height: 1; }
.language-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 160px; padding: 7px;
  border: 1px solid rgba(113,163,255,.16); border-radius: 14px;
  background: rgba(4,10,23,.96); backdrop-filter: blur(22px);
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 35px rgba(0,95,255,.08);
}
.language-menu .lang-option { width: 100%; border: 0; border-radius: 10px; padding: 10px 11px; color: #dbe7f8; background: transparent; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.language-menu .lang-option small { color: #65748d; font-weight: 500; letter-spacing: 0; }
.language-menu .lang-option:hover,.language-menu .lang-option.active { background: rgba(21,97,255,.13); color: #fff; }

/* Mobile menu: keep menu above the page and header controls above the overlay. */
.mobile-menu { z-index: 2; overflow-y: auto; overscroll-behavior: contain; }
.menu-toggle { position: relative; z-index: 4; }
.menu-toggle span { transform-origin: center; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
.mobile-language { margin-top: 12px; padding: 15px 4px 5px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-language > span { color: #73839e; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mobile-language-options { display: flex; gap: 6px; }
.mobile-language .lang-option { width: 48px; height: 36px; border-radius: 999px; border: 1px solid rgba(109,157,239,.17); background: rgba(255,255,255,.03); color: #8998af; font-size: 11px; font-weight: 800; cursor: pointer; }
.mobile-language .lang-option.active { color: #fff; border-color: rgba(44,135,255,.48); background: rgba(15,96,255,.18); box-shadow: inset 0 0 18px rgba(0,111,255,.08); }

/* Hero slogan: remove punctuation, create clear gap and mask the grid line inside outline text. */
.hero-copy-top h1 { display: flex; flex-direction: column; align-items: flex-start; gap: .16em; }
.hero-copy-top h1 .hero-line-solid,
.hero-copy-top h1 .hero-line-outline { display: block; }
.hero-copy-top h1 .hero-line-solid { color: var(--white); }
.hero-copy-top h1 .hero-line-outline {
  color: #030711;
  -webkit-text-stroke: 1px rgba(255,255,255,.82);
  text-shadow: 0 0 28px rgba(30,119,255,.10);
}

@media (max-width: 767.98px) {
  /* Header and hero now start as one composition; remove the dead band below the header. */
  .site-header { padding: 8px 0; }
  .site-header.scrolled { padding: 7px 0; }
  .site-header-inner { min-height: 52px; }
  .brand { width: 142px; }
  .menu-toggle { width: 42px; height: 42px; border-radius: 12px; }
  .mobile-menu { padding: 82px 20px 22px; background: radial-gradient(circle at 85% 8%, rgba(8,91,255,.18), transparent 34%), rgba(2,5,13,.985); }
  .mobile-menu a { padding: 13px 2px; font-size: clamp(22px, 6.3vw, 31px); }
  .mobile-menu .mobile-cta { margin-top: 14px; }

  .hero-copy-top { top: 88px; left: 20px; width: calc(100% - 40px); transform: none; }
  .hero-copy-top h1 { margin-top: 13px; margin-bottom: 16px; gap: .20em; }
  .hero-copy-top h1 .hero-line-outline { color: #030711; }
  .hero-copy-top p { margin-bottom: 0; }
}


/* ==========================================================
   MOBILE NAVIGATION VISIBILITY FIX
   ========================================================== */
section[id] { scroll-margin-top: 74px; }

/* Desktop first: mobile controls stay out of layout. */
.menu-toggle,
.mobile-menu { display: none; }

@media (max-width: 991.98px) {
  .desktop-nav,
  .header-cta { display: none !important; }

  .site-header-inner {
    justify-content: space-between;
    gap: 16px;
  }

  .brand { flex: 0 0 auto; }

  .menu-toggle {
    display: grid;
    flex: 0 0 44px;
    margin-left: auto;
    cursor: pointer;
  }

  .mobile-menu {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-24px);
    top: 0;
    padding-top: 94px;
    z-index: 2;
    transition: opacity .32s ease, transform .42s cubic-bezier(.2,.75,.2,1), visibility 0s linear .42s;
  }

  .mobile-menu.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-menu > a:not(.mobile-cta) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-menu > a:not(.mobile-cta)::after {
    content: '↘';
    color: #2e82ff;
    font-size: .7em;
    font-weight: 400;
    opacity: .85;
  }
}

@media (max-width: 767.98px) {
  .site-header-inner { padding-inline: 16px; }
  .mobile-menu { padding-inline: 22px; }
}

/* ==========================================================
   REVISION: WIDE DESKTOP REFERENCES + MOBILE HERO RHYTHM
   ========================================================== */

/* Large display typography: keep the premium compact look without letters touching. */
.hero-copy-top h1,
.hero-copy-side h2 { letter-spacing: -.025em; }
.section-heading h2,
.custom-heading h2,
.references-head h2 { letter-spacing: -.025em; }
.mechanism-copy h2,
.orbit-title h2 { letter-spacing: -.028em; }
.project-form-intro h3,
.reference-dark h3,
.reference-blue h3 { letter-spacing: -.02em; }
.about-copy h2 { letter-spacing: -.025em; }
.contact-inner h2 { letter-spacing: -.035em; }

/* On wide desktop the four application cards should read as one complete composition.
   The pinned horizontal rail is reserved for laptop/medium desktop widths. */
@media (min-width: 1600px) {
  .references-section {
    padding-top: 138px;
    padding-bottom: 158px;
  }
  .references-head {
    margin-bottom: 56px;
  }
  .references-track-wrap {
    width: 100%;
    max-width: 1760px;
    height: auto;
    margin-inline: auto;
    padding-inline: 34px;
    display: block;
    overflow: visible;
  }
  .references-track {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-inline: 0;
    transform: none !important;
  }
  .reference-card {
    width: 100%;
    height: clamp(500px, 56vh, 590px);
    min-width: 0;
  }
  .reference-dark,
  .reference-blue {
    padding: clamp(26px, 2vw, 36px);
  }
  .reference-dark h3,
  .reference-blue h3 {
    font-size: clamp(34px, 2.45vw, 48px);
  }
  .reference-caption strong { font-size: clamp(24px, 1.75vw, 30px); }
  .reference-stat strong { font-size: clamp(54px, 4vw, 68px); }
  .reference-shape-icon { width: 104px; height: 104px; font-size: 58px; }
}

@media (max-width: 767.98px) {
  /* Pull the product visual closer to the hero copy; remove the empty vertical band. */
  .hero-product { top: 62%; width: 92vw; }
  .hero-copy-top h1,
  .hero-copy-side h2,
  .section-heading h2,
  .custom-heading h2,
  .references-head h2,
  .mechanism-copy h2,
  .orbit-title h2,
  .about-copy h2,
  .contact-inner h2 { letter-spacing: -.012em; }
}

/* ==========================================================
   ALL-IN-ONE MOBILE / MECHANISM / PRISM REVISION
   ========================================================== */
html, body { max-width: 100%; overflow-x: clip; }

/* Use the real Shelvout mark in the mechanism, not a generic S glyph. */
.mini-s-logo {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 14px rgba(0,121,255,.55));
  transform: none;
}
.mini-s-logo img { width: 100%; height: 100%; object-fit: contain; }
.stand-front .mini-s-logo.large { width: 116px; height: 116px; }
.can::after {
  content: "";
  width: 54%;
  height: 54%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: url("../img/logo-mark.png") center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(0,120,255,.7));
}

/* Real triangular prism concept: three vertical faces around a triangular cross-section. */
.shape-triangle {
  width: 330px;
  height: 500px;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.shape-triangle.active { transform: translateY(0) scale(1) rotateY(-8deg); }
.prism-sign {
  position: absolute;
  z-index: 6;
  width: 164px;
  height: 104px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(82,164,255,.72);
  border-radius: 17px 17px 8px 8px;
  background: linear-gradient(145deg,#071733,#030813);
  box-shadow: inset 0 0 30px rgba(0,98,255,.14), 0 0 30px rgba(0,101,255,.22);
}
.prism-sign img { width: 62px; filter: drop-shadow(0 0 12px rgba(0,117,255,.65)); }
.prism-shell {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 126px;
  width: 172px;
  height: 330px;
  transform: translateX(-50%) rotateX(-2deg) rotateY(-18deg);
  transform-style: preserve-3d;
}
.prism-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(74,156,255,.55);
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: inset 0 0 38px rgba(0,92,255,.10);
}
.prism-face::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(155deg, rgba(255,255,255,.09), transparent 23%, transparent 66%, rgba(0,95,255,.25));
}
.prism-face-front {
  transform: rotateY(0deg) translateZ(49.5px);
  background: linear-gradient(160deg,#07152f,#05235b 58%,#0b62dc 145%);
  display: grid;
  place-items: center;
}
.prism-face-front img { position: relative; z-index: 2; width: 86px; filter: drop-shadow(0 0 16px rgba(0,122,255,.62)); }
.prism-face-right {
  transform: rotateY(120deg) translateZ(49.5px);
  background: linear-gradient(160deg,#061126,#0a3b8f 68%,#0b6cff);
}
.prism-face-left {
  transform: rotateY(240deg) translateZ(49.5px);
  background: linear-gradient(160deg,#020713,#061b43 68%,#083678);
}
.prism-top-cap {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 111px;
  width: 170px;
  height: 120px;
  transform: translateX(-50%) rotate(-2deg) skewY(-7deg);
  clip-path: polygon(50% 2%, 100% 100%, 0 100%);
  background: linear-gradient(145deg,#0d4aa5,#06152f 58%,#031026);
  border-bottom: 1px solid rgba(88,175,255,.72);
  filter: drop-shadow(0 0 14px rgba(0,102,255,.18));
}
.prism-top-cap::before {
  content:"";
  position:absolute;
  inset:18px 24px 22px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 50% 62%, #2f95ff 0 4px, transparent 5px),
    radial-gradient(circle at 34% 72%, #2f95ff 0 4px, transparent 5px),
    radial-gradient(circle at 66% 72%, #2f95ff 0 4px, transparent 5px),
    rgba(0,51,130,.28);
  border: 1px solid rgba(70,155,255,.28);
}
.prism-foot {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:20px;
  width:220px;
  height:38px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,114,255,.45),rgba(0,56,160,.15) 46%,transparent 72%);
  filter:blur(5px);
}

.project-form label { line-height: 1.35; min-height: 15px; }

@media (max-width: 767.98px) {
  /* Keep the mobile experience cinematic but remove the oversized dead zones. */
  .story-section { padding: 72px 0 76px; }
  .custom-section { padding: 76px 0 78px; }
  .references-section { padding: 76px 0 82px; overflow: clip; }
  .section-heading, .references-head { margin-bottom: 32px; }

  .mechanism-section { padding: 72px 0 74px; }
  .mechanism-pin { gap: 30px; padding-inline: 20px; }
  .mechanism-copy > p { line-height: 1.58; }
  .mechanism-status { margin-top: 24px; }
  .mechanism-stage-wrap { min-height: 485px; }
  .mechanism-stage { width: min(88vw, 390px); height: 505px; transform: scale(.88); transform-origin: center top; }
  .stand-head { height: 105px; }
  .stand-body { height: 405px; }
  .stand-inner { height: 53%; }
  .shelf-platform { min-height: 145px; }
  .mini-s-logo { width: 62px; height: 62px; }
  .stand-front .mini-s-logo.large { width: 82px; height: 82px; }

  .feature-orbit-section { padding: 72px 0 76px; }
  .feature-orbit-pin { padding-inline: 20px; }
  .orbit-product { width: min(82vw, 400px); margin: 34px auto 30px; }
  .orbit-feature { padding: 15px 0; }

  .custom-heading { margin-bottom: 0; }
  .shape-experience { margin-top: 38px; }
  .shape-copy { padding: 24px; }
  .shape-stage { min-height: 430px; }
  .shape-triangle { transform: scale(.78); transform-origin: center; }
  .shape-triangle.active { transform: translateY(0) scale(.78) rotateY(-6deg); }
  .project-form-card { margin-top: 20px; }
  .project-form-intro, .project-form { padding: 24px; }
  .form-visual { margin-top: 28px; }
  .project-form label { min-height: 0; margin-bottom: 7px; }

  /* Mobile references are touch-native: swipe horizontally, no body overflow. */
  .references-track-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .references-track-wrap::-webkit-scrollbar { display: none; }
  .references-track {
    width: max-content;
    max-width: none;
    gap: 14px;
    padding: 0 20px 8px;
    transform: none !important;
    will-change: auto;
  }
  .reference-card {
    flex: 0 0 min(84vw, 360px);
    width: min(84vw, 360px);
    height: min(520px, 68svh);
    min-height: 460px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .reference-card:last-child { margin-right: 6px; }

  .about-media { min-height: 48vh; }
  .about-copy { padding: 68px 20px 74px; }
  .contact-section { min-height: auto; padding: 86px 0 34px; }
  .contact-logo { margin-bottom: 30px; }

  /* Prevent wide animated children from widening the document. */
  .hero, .hero-product, .mechanism-stage-wrap, .feature-orbit-pin, .shape-stage,
  .project-form-card, .references-section, .about-section, .contact-section { max-width: 100%; }
}
@media (max-width: 767.98px) {
  .references-section { overflow: visible; }
  .references-track-wrap { position: relative; }
}
@media (max-width: 767.98px) {
  /* Final mobile rhythm pass: adjacent sections should transition without large dark gaps. */
  .hero { height: 92svh; min-height: 640px; }
  .story-section { padding-top: 58px; padding-bottom: 44px; }
  .mechanism-section { padding-top: 46px; padding-bottom: 48px; }
  .feature-orbit-section { padding-top: 48px; padding-bottom: 50px; }
  .custom-section { padding-top: 50px; padding-bottom: 50px; }
  .references-section { padding-top: 50px; padding-bottom: 54px; }
  .about-copy { padding-top: 56px; padding-bottom: 50px; }
  .contact-section { padding-top: 56px; }
}
.reference-prism-icon { perspective: 500px; }
.reference-prism-icon span {
  position: relative;
  width: 46px;
  height: 70px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateY(-18deg);
}
.reference-prism-icon span::before,
.reference-prism-icon span::after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid currentColor;
  background:linear-gradient(160deg,rgba(41,125,255,.28),rgba(0,35,92,.18));
  box-shadow:0 0 13px rgba(0,110,255,.18);
}
.reference-prism-icon span::before { transform: skewY(-12deg) translateX(-12px); transform-origin:right center; }
.reference-prism-icon span::after { transform: skewY(12deg) translateX(12px); transform-origin:left center; opacity:.72; }

/* ==========================================================
   2026-08-11 CLIENT VISUAL REFINEMENT
   ========================================================== */
/* Product story: use the clean stand visual and keep copy below/clear of the render. */
.story-card-main .story-image { background: #01040b; }
.story-card-main .story-image img {
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform: none;
}
.story-card-main .story-image::after {
  background: linear-gradient(180deg, transparent 54%, rgba(2,5,13,.92) 92%);
}
.story-card-main .story-overlay h3 { margin-top: 0; }

/* Mechanism header: logo must be visible and the system name belongs under it. */
.stand-head {
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: visible;
}
.stand-body { z-index: 3; }
.stand-head .mini-s-logo { flex: 0 0 auto; }
.stand-head-subtitle {
  position: relative;
  z-index: 2;
  color: #79a5df;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(31,120,255,.42);
}

@media (max-width: 767.98px) {
  /* Client asked for a little more breathing room: the hero render must not sit under the copy. */
  .hero-product {
    top: 69%;
    width: 90vw;
  }
  .story-card-main { min-height: 600px; }
  .story-card-main .story-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }
  .stand-head { height: 112px; gap: 2px; }
  .stand-head .mini-s-logo { width: 58px; height: 58px; }
  .stand-head-subtitle { font-size: 6px; letter-spacing: .14em; }
}


/* =========================================================
   REVISION 2026-08-11 — ORBIT VISUAL / CLEAN IMPACT / SOCIALS
   ========================================================= */
.orbit-brand-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(78, 154, 255, .18);
  background:
    radial-gradient(circle at 50% 49%, rgba(0,104,255,.18), transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(2,10,25,.28), rgba(1,5,14,.96) 70%);
  box-shadow: 0 35px 110px rgba(0,0,0,.55), 0 0 60px rgba(0,91,255,.14);
}
.orbit-brand-visual::before {
  content:"";
  position:absolute;
  inset: 9%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 2deg, rgba(53,142,255,.45) 0 1deg, transparent 1deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 69% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 68%, #000 69% 70%, transparent 71%);
  opacity:.42;
  animation: orbitBrandSpin 26s linear infinite;
}
.orbit-brand-ring {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.orbit-brand-ring-a {
  width:72%; height:72%;
  border:1px solid rgba(37,125,255,.55);
  box-shadow:0 0 22px rgba(0,103,255,.16), inset 0 0 28px rgba(0,103,255,.07);
}
.orbit-brand-ring-a::before,
.orbit-brand-ring-a::after {
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border-top:3px solid #0786ff;
  border-right:3px solid transparent;
  border-bottom:3px solid #0066ff;
  border-left:3px solid transparent;
  filter:drop-shadow(0 0 7px rgba(0,126,255,.8));
  transform:rotate(22deg);
}
.orbit-brand-ring-a::after { transform:rotate(202deg); opacity:.55; }
.orbit-brand-ring-b {
  width:58%; height:58%;
  border:1px solid rgba(76,160,255,.15);
  box-shadow:0 0 45px rgba(0,91,255,.08);
}
.orbit-brand-core {
  width:39%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle, rgba(1,58,145,.24), rgba(1,7,18,.02) 66%);
  filter:drop-shadow(0 28px 22px rgba(0,65,255,.22));
}
.orbit-brand-core img {
  width:67%;
  height:auto;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.orbit-brand-node {
  position:absolute;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  color:#2da2ff;
  font-size:27px;
  font-weight:500;
  border:1px solid rgba(36,133,255,.7);
  background:linear-gradient(145deg, rgba(4,27,66,.94), rgba(1,9,23,.96));
  clip-path:polygon(25% 6%,75% 6%,96% 50%,75% 94%,25% 94%,4% 50%);
  filter:drop-shadow(0 0 14px rgba(0,108,255,.34));
}
.orbit-brand-node-top { top:8%; left:50%; transform:translateX(-50%); }
.orbit-brand-node-right { right:7%; top:50%; transform:translateY(-50%); }
.orbit-brand-node-bottom { bottom:8%; left:50%; transform:translateX(-50%); }
.orbit-brand-node-left { left:7%; top:50%; transform:translateY(-50%); font-size:20px; }
@keyframes orbitBrandSpin { to { transform:rotate(360deg); } }

.about-media img[src$="more-impact-clean.webp"] {
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
}

.contact-social-block {
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
}
.contact-social-icons { display:flex; align-items:center; justify-content:center; gap:12px; }
.contact-social-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(72,153,255,.25);
  background:rgba(8,35,78,.24);
  box-shadow:inset 0 0 24px rgba(0,101,255,.06);
  color:#dcecff;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.contact-social-icon:hover { transform:translateY(-3px); border-color:rgba(72,153,255,.6); background:rgba(8,67,150,.26); }
.contact-social-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-social-icon svg path:first-child { fill:none; }
.contact-social-icon .youtube-play { fill:currentColor; stroke:none; }
.contact-social-mail { color:#7f9bc5; font-size:12px; letter-spacing:.06em; transition:color .25s ease; }
.contact-social-mail:hover { color:#fff; }

@media (max-width: 767.98px) {
  .orbit-brand-visual { min-height:0; aspect-ratio:1; border-radius:24px; }
  .orbit-brand-node { width:46px; height:46px; font-size:22px; }
  .orbit-brand-node-left { font-size:16px; }

  /* References must never hijack downward scrolling on mobile. The user may
     swipe sideways only when they choose to. */
  .references-track-wrap {
    position:relative !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    touch-action:auto !important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    transform:none !important;
  }
  .references-track { transform:none !important; }

  .contact-footer { margin-top:54px; }
  .contact-social-block { margin-top:24px; padding-bottom:8px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-brand-visual::before { animation:none; }
}

/* =========================================================
   VERIFIED CLIENT IMAGE REVISION — 2026-08-11 23:26
   Exact customer-supplied artwork; no recreated substitutes.
   ========================================================= */
.orbit-client-visual {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  border: 1px solid rgba(93,162,255,.2);
  box-shadow: 0 35px 110px rgba(0,0,0,.55), 0 0 60px rgba(0,91,255,.15);
}
.about-media img[src*="about-shelvout-symbol.webp"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
/* Keep the product story artwork visible with a dedicated dark canvas. */
.story-card-main .story-image img[src*="raise-visibility-clean.webp"] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
/* Mobile reference rail is optional horizontal browsing only; it must never
   be linked to the page's vertical scroll progress. */
@media (max-width: 767.98px) {
  .references-track-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
    scroll-behavior: smooth;
  }
  .references-track { transform: none !important; will-change: auto !important; }
  .orbit-client-visual { border-radius: 24px; }
  .about-media img[src*="about-shelvout-symbol.webp"] { object-fit: cover; object-position: center; }
}


/* CLIENT REVISION — 2026-08-11 23:52
   About uses the supplied standalone Shelvout symbol artwork. */
.about-media img[src*="about-shelvout-symbol.webp"] {
  filter: saturate(1.04) contrast(1.02);
}
@media (max-width: 767.98px) {
  .orbit-product { width: min(82vw, 380px); }
  .about-media { min-height: 52vh; }
}

/* 2026-08-12 — Story product pickup, isolated hand + held product only.
   The stand, logo and every other product remain fixed. */
.story-lift-scene {
  isolation: isolate;
  overflow: hidden;
}
.story-lift-scene .story-base-image,
.story-lift-scene .story-lift-erase,
.story-lift-scene .story-lift-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center;
}
.story-lift-scene .story-base-image {
  z-index: 1;
}
.story-lift-erase {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
}
.story-lift-layer {
  z-index: 3;
  pointer-events: none;
  transform-origin: 73% 27%;
  will-change: transform;
}
.story-lift-glow {
  position: absolute;
  z-index: 2;
  left: 47%;
  top: 46%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.72);
  background: radial-gradient(circle, rgba(48,153,255,.34), rgba(0,91,255,.09) 38%, transparent 70%);
  filter: blur(12px);
  will-change: transform, opacity;
}
.story-lift-scene::after { z-index: 4; }
.story-card-main .story-overlay { z-index: 5; }

@media (max-width: 767px) {
  .story-lift-scene .story-base-image,
  .story-lift-scene .story-lift-erase,
  .story-lift-scene .story-lift-layer {
    object-position: 53% center;
  }
  .story-lift-glow {
    width: 122px;
    height: 122px;
    top: 44%;
    left: 48%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-lift-layer { transform: none !important; }
  .story-lift-erase { opacity: 1 !important; }
  .story-lift-glow { opacity: 0 !important; }
}


/* 2026-08-12 00:43 — Keep the original hand/can permanently masked.
   Only the isolated moving layer is allowed to animate. */
.story-lift-erase { opacity: 1 !important; }


/* =========================================================
   CLIENT REVISION — 2026-08-12 01:51
   About visual gets a scroll-linked electric-blue shine.
   ========================================================= */
.about-media#aboutShine {
  --about-shine: .08;
  isolation: isolate;
  background: #020611;
}
.about-media#aboutShine .about-shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: var(--about-shine);
  background:
    radial-gradient(circle at 50% 57%, rgba(43,153,255,.42) 0%, rgba(0,96,255,.20) 24%, rgba(0,72,255,.07) 44%, transparent 68%),
    linear-gradient(112deg, transparent 22%, rgba(105,201,255,.16) 47%, rgba(38,119,255,.06) 55%, transparent 74%);
  mix-blend-mode: screen;
  filter: blur(8px);
  transition: opacity .08s linear;
}
.about-media#aboutShine::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 55%;
  width: min(52vw, 640px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.92);
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--about-shine);
  background: radial-gradient(circle, rgba(48,169,255,.30), rgba(0,93,255,.10) 37%, transparent 69%);
  filter: blur(28px);
  mix-blend-mode: screen;
}
.about-media#aboutShine img {
  position: relative;
  z-index: 1;
  will-change: filter, transform;
}
@media (max-width: 767.98px) {
  .about-media#aboutShine::before { width: 96vw; top: 52%; }
  .about-media#aboutShine .about-shine {
    background: radial-gradient(circle at 50% 52%, rgba(44,161,255,.44), rgba(0,89,255,.14) 37%, transparent 70%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-media#aboutShine { --about-shine: .72; }
}

/* =========================================================
   CLIENT REVISION — 2026-08-12 02:07
   1) About: symbol exposure stays fixed; only background rays/glow
      intensify progressively with scroll.
   2) Custom stand: true vertical triangular-prism silhouette and
      responsive stage sizing so Rectangle / Prism fully fit.
   ========================================================= */

/* About glow — do NOT brighten the logo artwork itself. */
.about-media#aboutShine {
  --about-shine: 0;
  isolation: isolate;
  background: #020611;
}
.about-media#aboutShine img {
  position: relative;
  z-index: 2;
  filter: none !important;
  opacity: 1;
}
.about-media#aboutShine .about-shine {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: var(--about-shine);
  transition: opacity .05s linear;
  /* Light is concentrated in the ray field around the mark, while the
     center is intentionally protected so the S itself is not overexposed. */
  background:
    radial-gradient(ellipse at 50% 67%, rgba(45,181,255,.56) 0%, rgba(0,115,255,.26) 18%, rgba(0,72,255,.09) 42%, transparent 68%),
    conic-gradient(from 197deg at 50% 58%,
      transparent 0 3deg, rgba(37,127,255,.18) 3.5deg 5deg, transparent 5.5deg 12deg,
      rgba(33,151,255,.16) 13deg 15deg, transparent 16deg 25deg,
      rgba(65,185,255,.20) 26deg 28deg, transparent 29deg 42deg,
      rgba(28,112,255,.14) 43deg 45deg, transparent 46deg 360deg);
  mix-blend-mode: screen;
  filter: blur(9px) saturate(1.15);
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 0 24%, #000 35% 86%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 0 24%, #000 35% 86%, transparent 100%);
}
.about-media#aboutShine::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 68%;
  width: min(56vw, 760px);
  height: min(24vw, 300px);
  transform: translate(-50%, -50%) scale(calc(.82 + var(--about-shine) * .16));
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(var(--about-shine) * .95);
  background: radial-gradient(ellipse, rgba(33,171,255,.48), rgba(0,103,255,.18) 38%, transparent 72%);
  filter: blur(32px);
  mix-blend-mode: screen;
}
.about-media#aboutShine::after {
  z-index: 4;
  pointer-events: none;
}

/* Shape stage: keep all concepts completely inside the stage. */
.shape-stage {
  min-height: 620px;
  padding: 34px 24px;
  overflow: hidden;
}
.shape-model { transform-origin: center center; }

/* Rectangle: slightly more compact and centered so its head/body never clip. */
.shape-rectangle {
  width: 270px;
  height: 430px;
}
.shape-rectangle .shape-head { height: 104px; }
.shape-rectangle .shape-body { top: 98px; }
.shape-rectangle .shape-top { top: 92px; height: 62px; }
.shape-rectangle.active { transform: translateY(0) scale(.94) rotateY(-7deg); }

/* Rebuild the triangle concept as a true vertical three-sided prism.
   Strong center ridge + two side faces matches the client's reference. */
.shape-triangle {
  width: 300px;
  height: 470px;
  perspective: 900px;
  transform-style: preserve-3d;
}
.shape-triangle.active { transform: translateY(0) scale(.94) rotateY(-5deg); }
.prism-sign {
  width: 154px;
  height: 90px;
  top: 4px;
  border-radius: 16px 16px 7px 7px;
  background: linear-gradient(145deg,#071a3a 0%,#031020 62%,#061738 100%);
  box-shadow: inset 0 0 24px rgba(0,111,255,.18), 0 0 28px rgba(0,111,255,.22);
}
.prism-sign::before,
.prism-sign::after {
  content: "";
  position: absolute;
  bottom: -28px;
  width: 2px;
  height: 28px;
  background: linear-gradient(#2d8cff, rgba(45,140,255,.08));
  box-shadow: 0 0 8px rgba(32,145,255,.45);
}
.prism-sign::before { left: 35px; }
.prism-sign::after { right: 35px; }
.prism-sign img { width: 54px; }
.prism-shell {
  z-index: 3;
  top: 137px;
  width: 224px;
  height: 305px;
  transform: translateX(-50%);
  transform-style: flat;
  filter: drop-shadow(0 30px 35px rgba(0,0,0,.42));
}
.prism-face {
  inset: auto;
  top: 0;
  height: 100%;
  border: 0;
  backface-visibility: visible;
  overflow: hidden;
}
.prism-face::after { display: none; }
.prism-face-front {
  inset: 0;
  transform: none;
  clip-path: polygon(50% 0, 100% 11%, 100% 89%, 50% 100%, 0 89%, 0 11%);
  background: linear-gradient(180deg,#0a2c66 0%,#07142d 38%,#061c46 78%,#0d50b9 145%);
  border: 1px solid rgba(77,165,255,.66);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 44px rgba(0,89,255,.14);
}
.prism-face-front img { width: 74px; transform: translateY(14px); }
.prism-face-left {
  left: 0;
  width: 50%;
  transform: none;
  clip-path: polygon(100% 0,100% 100%,0 89%,0 11%);
  background: linear-gradient(155deg,rgba(6,29,67,.72),rgba(3,10,23,.62) 58%,rgba(0,89,225,.26));
  border-left: 1px solid rgba(75,163,255,.62);
  border-top: 1px solid rgba(75,163,255,.48);
  border-bottom: 1px solid rgba(75,163,255,.48);
}
.prism-face-right {
  right: 0;
  left: auto;
  width: 50%;
  transform: none;
  clip-path: polygon(0 0,100% 11%,100% 89%,0 100%);
  background: linear-gradient(205deg,rgba(8,50,116,.76),rgba(4,13,30,.62) 60%,rgba(0,111,255,.28));
  border-right: 1px solid rgba(75,163,255,.64);
  border-top: 1px solid rgba(75,163,255,.48);
  border-bottom: 1px solid rgba(75,163,255,.48);
}
.prism-shell::after {
  content: "";
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 1px;
  bottom: 1px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(rgba(96,184,255,.82),rgba(34,112,255,.28) 45%,rgba(96,184,255,.72));
  box-shadow: 0 0 12px rgba(0,124,255,.35);
}
.prism-top-cap {
  z-index: 5;
  top: 116px;
  width: 224px;
  height: 78px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0,100% 58%,50% 100%,0 58%);
  background: linear-gradient(145deg,#0c4baf,#071933 58%,#031027);
  border: 0;
  filter: drop-shadow(0 0 14px rgba(0,102,255,.20));
}
.prism-top-cap::before {
  inset: 14px 34px 17px;
  clip-path: polygon(50% 0,100% 58%,50% 100%,0 58%);
  border: 1px solid rgba(78,167,255,.24);
}
.prism-foot {
  bottom: 3px;
  width: 238px;
  height: 32px;
}

/* Phone / tablet sizing: fit the entire concept, not just its upper part. */
@media (max-width: 991.98px) {
  .shape-stage { min-height: 530px; padding: 26px 12px; }
  .shape-rectangle.active { transform: translateY(0) scale(.82) rotateY(-5deg); }
  .shape-cylinder.active { transform: translateY(0) scale(.82) rotateY(-5deg); }
  .shape-triangle.active { transform: translateY(0) scale(.84) rotateY(-4deg); }
}
@media (max-width: 575.98px) {
  .shape-stage { min-height: 470px; padding: 16px 8px; }
  .shape-rectangle.active { transform: translateY(0) scale(.72) rotateY(-4deg); }
  .shape-cylinder.active { transform: translateY(0) scale(.74) rotateY(-4deg); }
  .shape-triangle.active { transform: translateY(0) scale(.74) rotateY(-3deg); }
  .about-media#aboutShine::before { width: 98vw; height: 42vw; top: 70%; }
  .about-media#aboutShine .about-shine { filter: blur(7px) saturate(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .about-media#aboutShine { --about-shine: .62; }
}

/* =========================================================
   FINAL ABOUT LIGHT REVISION — 2026-08-12
   Keep the original 1254px artwork at its natural composition/quality.
   Scroll only reveals the baked blue ray field by fading a dark veil out.
   No low-resolution logo replacement, no zooming, no artificial glow layer.
   ========================================================= */
.about-media#aboutShine {
  --about-shine: 0;
  isolation: isolate;
  overflow: hidden;
  background: #020611 !important;
}

/* Restore the original full-resolution artwork and its old composition. */
.about-media#aboutShine > img {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/*
 * At progress 0 the dark veil suppresses the blue rays around the S.
 * As --about-shine goes 0 -> 1, the veil disappears and the ORIGINAL
 * rays in the artwork become visible. The artwork itself is never enlarged.
 */
.about-media#aboutShine > .about-shine {
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: -1px !important;
  pointer-events: none !important;
  opacity: calc(1 - var(--about-shine)) !important;
  transition: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background:
    radial-gradient(ellipse at 50% 51%,
      rgba(2,6,17,.10) 0%,
      rgba(2,6,17,.13) 27%,
      rgba(2,6,17,.57) 46%,
      rgba(2,6,17,.88) 68%,
      rgba(2,6,17,.97) 100%),
    linear-gradient(180deg, rgba(1,4,12,.20), rgba(1,4,12,.26) 55%, rgba(1,4,12,.70) 100%) !important;
}

/* Extra bottom veil removes the baked floor flare at the beginning too. */
.about-media#aboutShine::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  height: 36% !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  opacity: calc(1 - var(--about-shine)) !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: linear-gradient(180deg, rgba(2,6,17,0), rgba(2,6,17,.48) 48%, rgba(2,6,17,.91) 100%) !important;
}

/* Keep only the original section edge fade toward the copy column. */
.about-media#aboutShine::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent 66%, rgba(4,9,20,.40) 84%, #040914 100%) !important;
}

@media (max-width: 991.98px) {
  .about-media#aboutShine > img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 76%, rgba(4,9,20,.58) 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-media#aboutShine { --about-shine: .65; }
}


/* =========================================================
   ABOUT LIGHT REVEAL — VERIFIED DIRECT-SCROLL VERSION
   The original 1254px artwork remains untouched. At the start, dark masks
   suppress only the surrounding rays/floor flare. JavaScript fades the masks
   from opacity 1 -> 0 as the user scrolls through the image.
   ========================================================= */
.about-media#aboutShine {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #020611 !important;
}
.about-media#aboutShine > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Darkens the ray field but leaves the central S substantially untouched. */
.about-media#aboutShine > .about-ray-dim {
  position: absolute !important;
  inset: -2px !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1;
  background: rgba(1, 5, 15, .965) !important;
  -webkit-mask-image: radial-gradient(ellipse 34% 48% at 50% 52%, transparent 0%, transparent 52%, rgba(0,0,0,.24) 64%, rgba(0,0,0,.72) 78%, #000 94%) !important;
  mask-image: radial-gradient(ellipse 34% 48% at 50% 52%, transparent 0%, transparent 52%, rgba(0,0,0,.24) 64%, rgba(0,0,0,.72) 78%, #000 94%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  transition: none !important;
  will-change: opacity;
}

/* Separately suppresses the baked floor glow at progress 0. */
.about-media#aboutShine > .about-floor-dim {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 33% !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1;
  background: linear-gradient(180deg, rgba(2,6,17,0) 0%, rgba(2,6,17,.42) 44%, rgba(2,6,17,.94) 100%) !important;
  transition: none !important;
  will-change: opacity;
}

/* Keep the original visual merge into the copy column, but do not animate it. */
.about-media#aboutShine::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent 68%, rgba(4,9,20,.34) 86%, #040914 100%) !important;
}
.about-media#aboutShine::before { content: none !important; }
.about-media#aboutShine > .about-shine { display: none !important; }

@media (max-width: 991.98px) {
  .about-media#aboutShine > img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
  .about-media#aboutShine > .about-ray-dim {
    -webkit-mask-image: radial-gradient(ellipse 38% 46% at 50% 52%, transparent 0%, transparent 50%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.74) 79%, #000 95%) !important;
    mask-image: radial-gradient(ellipse 38% 46% at 50% 52%, transparent 0%, transparent 50%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.74) 79%, #000 95%) !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 78%, rgba(4,9,20,.58) 100%) !important;
  }
}


/* 2026-08-12 02:28 — HARD OVERRIDE: real 0→100 scroll light reveal. */
.about-media#aboutShine > .about-ray-dim {
  opacity: 1 !important;
  background: rgba(0, 3, 12, .985) !important;
  -webkit-mask-image: radial-gradient(ellipse 33% 47% at 50% 52%, transparent 0%, transparent 43%, rgba(0,0,0,.20) 53%, rgba(0,0,0,.68) 67%, #000 82%) !important;
  mask-image: radial-gradient(ellipse 33% 47% at 50% 52%, transparent 0%, transparent 43%, rgba(0,0,0,.20) 53%, rgba(0,0,0,.68) 67%, #000 82%) !important;
}
.about-media#aboutShine > .about-floor-dim {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(1,4,12,0) 0%, rgba(1,4,12,.64) 39%, rgba(1,4,12,.985) 100%) !important;
}

/* =========================================================
   2026-08-12 02:34 — ABOUT: GERÇEK SCROLL-LINKED IŞIK
   İki aynı yüksek çözünürlüklü katman kullanılır:
   altta çok koyu temel + üstte scroll ile 0→1 açılan ORİJİNAL görsel.
   Logo ayrıca sabit tutulur; ışık artarken logo zoom/blur/filter almaz.
   ========================================================= */
.about-media#aboutShine {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #020611 !important;
}
.about-media#aboutShine > .about-light-base,
.about-media#aboutShine > .about-light-live,
.about-media#aboutShine > .about-logo-lock {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  pointer-events: none !important;
}
.about-media#aboutShine > .about-light-base {
  z-index: 1 !important;
  opacity: 1 !important;
  /* Işınları başlangıçta neredeyse yok eder; S yine seçilebilir kalır. */
  filter: brightness(.20) saturate(.68) contrast(1.12) !important;
}
.about-media#aboutShine > .about-light-live {
  z-index: 2 !important;
  opacity: 0;
  filter: none !important;
  will-change: opacity;
  transition: none !important;
}
.about-media#aboutShine > .about-logo-lock {
  z-index: 3 !important;
  opacity: 1 !important;
  object-fit: cover !important;
  filter: none !important;
}
/* Eski ışık/mask katmanlarını kesin olarak devre dışı bırak. */
.about-media#aboutShine > .about-ray-dim,
.about-media#aboutShine > .about-floor-dim,
.about-media#aboutShine > .about-shine { display: none !important; }
.about-media#aboutShine::before { content: none !important; }
.about-media#aboutShine::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent 68%, rgba(4,9,20,.34) 86%, #040914 100%) !important;
}
@media (max-width: 991.98px) {
  .about-media#aboutShine > .about-light-base,
  .about-media#aboutShine > .about-light-live,
  .about-media#aboutShine > .about-logo-lock {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 80%, rgba(4,9,20,.58) 100%) !important;
  }
}

/* =========================================================
   2026-08-12 04:18 — ABOUT / SCROLL-LINKED REAL LIGHT V2
   Final override. The about scene remains pinned on desktop so the user can
   actually see 0 -> 100 light while scrolling down, and 100 -> 0 going up.
   ========================================================= */
.about-media#aboutShine {
  --about-scroll-light: 0;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #01040d !important;
}

.about-media#aboutShine > .about-light-base,
.about-media#aboutShine > .about-light-live,
.about-media#aboutShine > .about-logo-lock {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Almost no rays at progress 0. The clean cutout above keeps the S crisp. */
.about-media#aboutShine > .about-light-base {
  z-index: 1 !important;
  opacity: 1 !important;
  filter: brightness(.055) saturate(.38) contrast(1.26) !important;
}

/* Same original artwork is revealed by JS from opacity 0 -> 1. */
.about-media#aboutShine > .about-light-live {
  z-index: 2 !important;
  opacity: 0 !important;
  filter: brightness(1.18) saturate(1.35) contrast(1.05) !important;
  will-change: opacity !important;
  transition: none !important;
}

/* Wide electric-blue halo behind the mark. JS controls its opacity directly. */
.about-media#aboutShine > .about-light-bloom {
  position: absolute !important;
  inset: -10% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse 58% 25% at 50% 78%, rgba(17,163,255,.82) 0%, rgba(0,103,255,.48) 30%, rgba(0,55,220,.14) 58%, transparent 76%),
    radial-gradient(ellipse 46% 58% at 50% 51%, rgba(0,128,255,.32) 0%, rgba(0,82,255,.15) 42%, transparent 75%) !important;
  filter: blur(20px) saturate(1.30) !important;
  transform: scale(.985) !important;
  will-change: opacity, transform !important;
}

/* A subtle breathing sparkle only becomes visible when scroll light is up. */
.about-media#aboutShine > .about-light-pulse {
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 12% !important;
  bottom: 7% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  background: radial-gradient(ellipse at 50% 63%, rgba(79,204,255,.38), rgba(0,107,255,.16) 38%, transparent 70%) !important;
  filter: blur(18px) !important;
  animation: shelvoutAboutPulse 1.7s ease-in-out infinite !important;
  will-change: opacity, transform !important;
}

@keyframes shelvoutAboutPulse {
  0%, 100% { transform: scale(.97); filter: blur(20px) brightness(.92); }
  50%      { transform: scale(1.035); filter: blur(15px) brightness(1.22); }
}

/* The actual S never brightens, zooms or blurs. */
.about-media#aboutShine > .about-logo-lock {
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Kill all legacy masks/shine layers from previous attempts. */
.about-media#aboutShine > .about-ray-dim,
.about-media#aboutShine > .about-floor-dim,
.about-media#aboutShine > .about-shine {
  display: none !important;
}
.about-media#aboutShine::before { content: none !important; }
.about-media#aboutShine::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent 70%, rgba(4,9,20,.30) 87%, #040914 100%) !important;
}

/* The extra scroll room is what makes the requested animation observable. */
@media (min-width: 992px) {
  .about-section#about {
    min-height: 180vh !important;
    height: 180vh !important;
    align-items: start !important;
  }
  .about-section#about > .about-media#aboutShine,
  .about-section#about > .about-copy {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

@media (max-width: 991.98px) {
  .about-section#about {
    height: auto !important;
    min-height: 0 !important;
  }
  .about-section#about > .about-media#aboutShine,
  .about-section#about > .about-copy {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  .about-section#about > .about-media#aboutShine {
    min-height: 70vh !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 80%, rgba(4,9,20,.58) 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-media#aboutShine > .about-light-pulse { animation: none !important; }
}


/* =========================================================
   2026-08-12 04:38 — ABOUT V3 / ORİJİNAL LOGO KİLİTLİ
   Kullanıcının verdiği 1254x1254 orijinal WEBP doğrudan gösterilir.
   Hatalı PNG cutout artık kullanılmaz. Logo filtresiz ve kırpılmadan kalır;
   scroll yalnızca çevredeki karartmayı kaldırır ve arkadaki mavi ışığı yükseltir.
   ========================================================= */
.about-media#aboutShine {
  background: #01040d !important;
}

/* ORİJİNAL görsel: tek referans katman. Piksel/renk/şekil üzerinde filtre yok. */
.about-media#aboutShine > .about-light-base {
  z-index: 1 !important;
  opacity: 1 !important;
  display: block !important;
  filter: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Önceki revizedeki ikinci görsel ve kesilmiş logo katmanı tamamen kapalı. */
.about-media#aboutShine > .about-light-live,
.about-media#aboutShine > .about-logo-lock {
  display: none !important;
}

/* Scroll başlangıcında yalnızca logo DIŞINDAKİ alanı karartır.
   Ortadaki geniş şeffaf bölge orijinal S sembolünü aynen bırakır. */
.about-media#aboutShine > .about-light-dimmer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  will-change: opacity !important;
  transition: none !important;
  background:
    radial-gradient(ellipse 39% 48% at 50% 54%,
      rgba(1,4,13,0) 0%,
      rgba(1,4,13,0) 54%,
      rgba(1,4,13,.22) 65%,
      rgba(1,4,13,.68) 79%,
      rgba(1,4,13,.94) 100%),
    linear-gradient(180deg,
      rgba(1,4,13,.34) 0%,
      rgba(1,4,13,0) 24%,
      rgba(1,4,13,0) 72%,
      rgba(1,4,13,.52) 100%) !important;
}

/* Ek parıldama çok hafif; sembolü boyamaz, sadece ışığın algısını güçlendirir. */
.about-media#aboutShine > .about-light-bloom {
  z-index: 3 !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse 58% 23% at 50% 79%, rgba(34,177,255,.42) 0%, rgba(0,103,255,.20) 36%, transparent 72%),
    radial-gradient(ellipse 68% 62% at 50% 53%, transparent 0%, transparent 38%, rgba(0,97,255,.12) 61%, transparent 82%) !important;
  filter: blur(22px) !important;
}
.about-media#aboutShine > .about-light-pulse {
  z-index: 3 !important;
  opacity: 0 !important;
  left: 10% !important;
  right: 10% !important;
  top: 8% !important;
  bottom: 4% !important;
  background: radial-gradient(ellipse at 50% 74%, rgba(53,191,255,.24), rgba(0,94,255,.08) 43%, transparent 70%) !important;
  filter: blur(22px) !important;
}

/* Sağ kolon geçiş maskesi sembolün ucunu kapatmasın. */
.about-media#aboutShine::after {
  z-index: 5 !important;
  background: linear-gradient(90deg, transparent 78%, rgba(4,9,20,.16) 91%, #040914 100%) !important;
}

@media (max-width: 991.98px) {
  .about-media#aboutShine > .about-light-base {
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }
  .about-media#aboutShine > .about-light-dimmer {
    background:
      radial-gradient(ellipse 42% 47% at 50% 53%, rgba(1,4,13,0) 0%, rgba(1,4,13,0) 55%, rgba(1,4,13,.25) 69%, rgba(1,4,13,.88) 100%),
      linear-gradient(180deg, rgba(1,4,13,.24), transparent 22%, transparent 78%, rgba(1,4,13,.46)) !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 86%, rgba(4,9,20,.38) 100%) !important;
  }
}


/* =========================================================
   2026-08-12 05:00 — ABOUT V4 / GERÇEK 0 → 100 IŞIK
   İlk görünüşte arka ışık tamamen kapalıdır. Koyu kapak yalnızca
   logonun DIŞINI örter; logo orijinal WEBP pikselleriyle görünür.
   Scroll ilerledikçe JS opacity 1 → 0 yapar ve orijinal ışınlar
   tam 0 → 100 açılır.
   ========================================================= */
.about-media#aboutShine > .about-light-dimmer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-image: url('../img/about-light-cover.png?v=20260812-0645') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  transition: none !important;
  will-change: opacity !important;
}

/* Arka ışığı başta ekleyen eski gradient katmanlarını kesin kapat. */
.about-media#aboutShine > .about-light-live,
.about-media#aboutShine > .about-logo-lock {
  display: none !important;
}

.about-media#aboutShine > .about-light-bloom {
  z-index: 3 !important;
  opacity: 0 !important;
}
.about-media#aboutShine > .about-light-pulse {
  z-index: 3 !important;
  opacity: 0 !important;
}

@media (max-width: 991.98px) {
  .about-media#aboutShine > .about-light-dimmer {
    background-size: contain !important;
  }
}


/* =========================================================
   2026-08-12 06:45 — ABOUT V5 / TEMİZ VEKTÖR MASKE
   Logo, kullanıcının verdiği orijinal 1254x1254 WEBP'dir.
   Hiçbir PNG logo kesiti kullanılmaz. Sadece logo DIŞINDAKİ alanı
   örten yüksek çözünürlüklü maskenin opacity değeri scroll ile 1→0 gider.
   Böylece ilk görünüşte ışık 0, aşağı indikçe gerçek görsel 100 olur.
   ========================================================= */
.about-media#aboutShine {
  --about-scroll-light: 0;
  background: #01040d !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.about-media#aboutShine > .about-light-base {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Eski kırpılmış logo / çift görsel katmanları asla kullanılmaz. */
.about-media#aboutShine > .about-logo-lock,
.about-media#aboutShine > .about-light-live,
.about-media#aboutShine > .about-ray-dim,
.about-media#aboutShine > .about-floor-dim,
.about-media#aboutShine > .about-shine {
  display: none !important;
}

/* Vektörle yeniden çizilmiş temiz logo boşluğu. Jagged/çıkıntılı eski maske yok. */
.about-media#aboutShine > .about-light-dimmer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 1;
  background: transparent url('../img/about-light-cover.png?v=20260812-0645') 50% 50% / cover no-repeat !important;
  transition: none !important;
  will-change: opacity !important;
}

/* Parıldama sadece scroll ilerledikten sonra gelir; başlangıçta sıfırdır. */
.about-media#aboutShine > .about-light-bloom {
  z-index: 3 !important;
  opacity: 0;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}
.about-media#aboutShine > .about-light-pulse {
  z-index: 3 !important;
  opacity: 0;
  pointer-events: none !important;
}

.about-media#aboutShine::before { content: none !important; }
.about-media#aboutShine::after {
  z-index: 5 !important;
  background: linear-gradient(90deg, transparent 78%, rgba(4,9,20,.16) 91%, #040914 100%) !important;
}

@media (max-width: 991.98px) {
  .about-media#aboutShine > .about-light-base {
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }
  .about-media#aboutShine > .about-light-dimmer {
    background-size: contain !important;
    background-position: 50% 50% !important;
  }
  .about-media#aboutShine::after {
    background: linear-gradient(180deg, transparent 86%, rgba(4,9,20,.38) 100%) !important;
  }
}

/* =========================================================
   2026-08-12 04:49 — ABOUT MOBILE LIGHT / HARD MOBILE FIX
   Desktop V5 kuralları değiştirilmez. Bu blok yalnızca <= 991.98px.
   Mobilde opacity animasyonunun compositor katmanında güvenilir çalışmasını sağlar.
   ========================================================= */
@media (max-width: 991.98px) {
  .about-media#aboutShine {
    --about-scroll-light: 0;
    min-height: 72svh !important;
    overflow: hidden !important;
    isolation: isolate !important;
    contain: paint !important;
  }

  .about-media#aboutShine > .about-light-base,
  .about-media#aboutShine > .about-light-dimmer,
  .about-media#aboutShine > .about-light-bloom,
  .about-media#aboutShine > .about-light-pulse {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }

  .about-media#aboutShine > .about-light-dimmer {
    opacity: 1;
    will-change: opacity !important;
    background-size: contain !important;
    background-position: 50% 50% !important;
  }

  .about-media#aboutShine > .about-light-bloom,
  .about-media#aboutShine > .about-light-pulse {
    opacity: 0;
    will-change: opacity, transform !important;
  }
}

/* ==========================================================
   2026-08-12 — Turkish copy layout protection
   Keeps the four requested text revisions clean on desktop/mobile.
   ========================================================== */
.hero-copy-top h1.hero-title-tr {
  width: min(760px, 48vw);
  font-size: clamp(48px, 6.15vw, 108px);
  line-height: .88;
  letter-spacing: -.058em;
}
.hero-copy-top h1.hero-title-tr .hero-line-outline {
  font-size: .72em;
  line-height: .98;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.contact-inner h2.contact-title-tr {
  font-size: clamp(58px, 8vw, 136px);
  line-height: .88;
  letter-spacing: -.065em;
}
.contact-inner h2.contact-title-tr span {
  display: inline-block;
  font-size: .72em;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .hero-copy-top h1.hero-title-tr {
    width: 100%;
    font-size: clamp(43px, 10.8vw, 72px);
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: .66em;
  }
  .contact-inner h2.contact-title-tr {
    font-size: clamp(48px, 12vw, 82px);
  }
  .contact-inner h2.contact-title-tr span {
    font-size: .66em;
  }
}

@media (max-width: 767.98px) {
  .hero-copy-top h1.hero-title-tr {
    font-size: clamp(40px, 11.6vw, 58px);
    line-height: .9;
    gap: .14em;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: .60em;
    letter-spacing: -.035em;
  }
  .contact-inner h2.contact-title-tr {
    font-size: clamp(44px, 12.5vw, 64px);
    line-height: .92;
  }
  .contact-inner h2.contact-title-tr span {
    font-size: .58em;
    letter-spacing: -.035em;
  }
}

@media (max-width: 420px) {
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: .56em;
  }
  .contact-inner h2.contact-title-tr span {
    font-size: .54em;
  }
}


/* ==========================================================
   2026-08-12 — TRUE TOP / MOBILE RELOAD FIX
   Hero is the actual page start; generic section scroll-margin must not offset it.
   ========================================================== */
#hero { scroll-margin-top: 0 !important; }

@media (max-width: 767.98px) {
  html { overflow-anchor: none; }
  #hero {
    min-height: 100svh;
    height: 100svh;
  }
}

/* ==========================================================
   2026-08-12 — İletişim formu kesin açılma düzeltmesi
   Bootstrap .collapse bağımlılığı kaldırıldı.
   ========================================================== */
.contact-collapse {
  display: none;
  max-width: 900px;
  margin: 28px auto 0;
  opacity: 0;
  transform: translateY(-10px);
}
.contact-collapse.is-open {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: shelvoutContactReveal .34s ease both;
}
@keyframes shelvoutContactReveal {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 2026-08-12 CONTACT FORM INLINE HARD FIX */
#contactForm[hidden]{display:none!important;}
#contactForm.is-open,#contactForm.show,.contact-section.contact-form-open #contactForm{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important;overflow:visible!important;transform:none!important;pointer-events:auto!important;}
.contact-section.contact-form-open{overflow:visible!important;height:auto!important;}
.contact-section.contact-form-open .contact-inner{height:auto!important;overflow:visible!important;}

/* ==========================================================
   2026-08-12 19:01 — CUSTOMER REVISION PASS
   Eye icon + scroll-driven orbit ring + tighter mobile rhythm.
   Desktop about/light animation is intentionally untouched.
   ========================================================== */
.story-card-small .icon-chip-eye svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(56,167,255,.28));
}

/* The supplied feature artwork and center Shelvout logo remain static.
   Only this luminous ring overlay rotates with page scroll. */
.orbit-product { --orbit-scroll-rotate: 0deg; }
.orbit-scroll-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 69%;
  aspect-ratio: 1;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(var(--orbit-scroll-rotate));
  transform-origin: 50% 50%;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  filter: drop-shadow(0 0 9px rgba(0,126,255,.42));
}
.orbit-scroll-ring::before,
.orbit-scroll-ring::after,
.orbit-scroll-ring > span {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.orbit-scroll-ring::before {
  background: conic-gradient(
    from 8deg,
    transparent 0 8%,
    rgba(72,191,255,.06) 9%,
    rgba(63,188,255,.92) 12%,
    rgba(16,105,255,.92) 18%,
    transparent 24% 47%,
    rgba(56,173,255,.92) 52%,
    rgba(16,100,255,.88) 58%,
    transparent 64% 77%,
    rgba(73,194,255,.86) 82%,
    rgba(20,111,255,.82) 87%,
    transparent 92% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 0 47.8%, #000 48.5% 50.1%, transparent 50.8%);
  mask: radial-gradient(circle, transparent 0 47.8%, #000 48.5% 50.1%, transparent 50.8%);
}
.orbit-scroll-ring::after {
  inset: 5.5%;
  opacity: .72;
  background: conic-gradient(from 142deg, transparent 0 20%, rgba(45,146,255,.74) 24%, transparent 29% 61%, rgba(73,191,255,.7) 66%, transparent 72% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 47.4%, #000 48.1% 49.2%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 47.4%, #000 48.1% 49.2%, transparent 50%);
}
.orbit-scroll-ring > span {
  inset: -1.5%;
  border: 1px dashed rgba(53,143,255,.28);
}

@media (max-width: 767.98px) {
  /* 1) Hero product: cut the oversized empty band above the product roughly in half. */
  .hero-product {
    top: 60.5% !important;
    width: 90vw !important;
  }

  /* 2) Keep the feature artwork compact; the circle rotates while the logo stays fixed. */
  .orbit-product {
    margin-top: 24px !important;
    margin-bottom: 18px !important;
  }
  .orbit-scroll-ring {
    width: 69.5%;
    filter: drop-shadow(0 0 7px rgba(0,126,255,.48));
  }

  /* 3) Remove the large dark gaps between neighboring content blocks. */
  .feature-orbit-section {
    padding-top: 38px !important;
    padding-bottom: 16px !important;
  }
  .custom-section {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }
  .references-section {
    padding-top: 24px !important;
    padding-bottom: 14px !important;
  }
  .references-head {
    margin-bottom: 24px !important;
  }

  /* 4) The about artwork is square. Using viewport width removes the blank area
        caused by a tall 72svh container while preserving the light animation. */
  .about-media#aboutShine {
    min-height: 100vw !important;
    height: 100vw !important;
    max-height: 100vw !important;
  }
  .about-copy {
    padding-top: 28px !important;
    padding-bottom: 42px !important;
  }

  /* Slightly tighter handoff from the technical request card to selected applications. */
  .project-form-card { margin-bottom: 0 !important; }
}


/* ==========================================================
   2026-08-12 19:14 — CUSTOMER REVISION
   1) "Daha Az Alan" smaller / "Daha Fazla Görünürlük" larger
   2) Same hierarchy in final CTA
   3) Feature orbit: circle + four symbols rotate with scroll, center logo fixed
   4) more-display.webp text translated to Turkish in the image asset
   ========================================================== */

/* HERO: smaller first line, larger blue second line. */
.hero-copy-top h1.hero-title-tr {
  width: min(900px, 58vw) !important;
  font-size: clamp(58px, 7vw, 126px) !important;
  line-height: .88 !important;
  gap: .10em !important;
}
.hero-copy-top h1.hero-title-tr .hero-line-solid {
  font-size: .60em !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  color: #f4f7fb !important;
}
.hero-copy-top h1.hero-title-tr .hero-line-outline {
  font-size: 1em !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  color: #1f78ff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 34px rgba(30,119,255,.16) !important;
}

/* CONTACT: same visual hierarchy as hero. */
.contact-inner h2.contact-title-tr {
  font-size: clamp(64px, 8.8vw, 148px) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
}
.contact-inner h2.contact-title-tr {
  color: #f4f7fb !important;
}
.contact-inner h2.contact-title-tr > span {
  display: inline-block !important;
  font-size: 1em !important;
  line-height: .92 !important;
  color: #1f78ff !important;
  white-space: nowrap !important;
}
.contact-inner h2.contact-title-tr::first-line {
  font-size: .60em;
}

/* Orbit visual: use the transparent rotor image.
   Everything around the center (ring + all four symbols) rotates.
   Fixed Shelvout symbol is rendered independently above it. */
.orbit-product {
  --orbit-scroll-rotate: 0deg;
  overflow: hidden !important;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 50%, rgba(9,64,154,.20) 0 18%, rgba(2,15,37,.95) 42%, #01050e 78%);
  border: 1px solid rgba(93,162,255,.18);
  box-shadow: 0 35px 110px rgba(0,0,0,.55), 0 0 60px rgba(0,91,255,.14);
}
.orbit-product .orbit-client-visual.orbit-scroll-rotor {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: rotate(var(--orbit-scroll-rotate)) scale(1.015) !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
  pointer-events: none;
}
.orbit-product .orbit-scroll-ring {
  display: none !important;
}
.orbit-static-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  aspect-ratio: .64;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.orbit-static-core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,114,255,.24) 0 14%, rgba(0,77,200,.10) 35%, transparent 70%);
  filter: blur(10px);
}
.orbit-static-core img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 16px rgba(21,123,255,.30));
}

/* Ensure the rotor is visible above the glow but below the static center logo. */
.orbit-product .orbit-glow { z-index: 1; }

/* Mobile hierarchy and fit. */
@media (max-width: 991.98px) {
  .hero-copy-top h1.hero-title-tr {
    width: 100% !important;
    font-size: clamp(50px, 12vw, 78px) !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-solid {
    font-size: .58em !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: 1em !important;
  }

  .contact-inner h2.contact-title-tr {
    font-size: clamp(54px, 13.4vw, 88px) !important;
  }
  .contact-inner h2.contact-title-tr > span {
    font-size: 1em !important;
  }
}

@media (max-width: 767.98px) {
  .hero-copy-top h1.hero-title-tr {
    font-size: clamp(46px, 12.4vw, 66px) !important;
    gap: .08em !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-solid {
    font-size: .56em !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: .92em !important;
    letter-spacing: -.045em !important;
  }

  .contact-inner h2.contact-title-tr {
    font-size: clamp(48px, 12.8vw, 68px) !important;
  }
  .contact-inner h2.contact-title-tr > span {
    font-size: .92em !important;
    letter-spacing: -.045em !important;
  }

  .orbit-static-core {
    width: 29%;
  }
  .orbit-product {
    border-radius: 24px;
  }
}

@media (max-width: 420px) {
  .hero-copy-top h1.hero-title-tr {
    font-size: clamp(43px, 12.8vw, 58px) !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-solid {
    font-size: .54em !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    font-size: .86em !important;
  }

  .contact-inner h2.contact-title-tr {
    font-size: clamp(44px, 12.2vw, 58px) !important;
  }
  .contact-inner h2.contact-title-tr > span {
    font-size: .86em !important;
  }
}


/* Explicit contact line classes: first line smaller, second line dominant. */
.contact-inner h2.contact-title-tr .contact-line-small {
  display: inline-block !important;
  font-size: .60em !important;
  line-height: 1 !important;
  color: #f4f7fb !important;
  white-space: nowrap !important;
  letter-spacing: -.035em !important;
}
.contact-inner h2.contact-title-tr .contact-line-large {
  display: inline-block !important;
  font-size: 1em !important;
  line-height: .92 !important;
  color: #1f78ff !important;
  white-space: nowrap !important;
  letter-spacing: -.055em !important;
}
@media (max-width: 767.98px) {
  .contact-inner h2.contact-title-tr .contact-line-small { font-size: .56em !important; }
  .contact-inner h2.contact-title-tr .contact-line-large { font-size: .92em !important; }
}
@media (max-width: 420px) {
  .contact-inner h2.contact-title-tr .contact-line-small { font-size: .54em !important; }
  .contact-inner h2.contact-title-tr .contact-line-large { font-size: .86em !important; }
}

/* ==========================================================
   2026-08-12 21:23 — CUSTOMER REVISION
   - customer-supplied Turkish wordmark
   - exact customer-supplied hero/reference imagery
   - mobile title overflow fix
   - compact footer
   ========================================================== */

/* New Turkish customer logo (transparent crop from supplied artwork). */
.brand img,
.contact-logo {
  object-fit: contain;
}
.contact-logo {
  width: min(430px, 72vw) !important;
  height: auto !important;
}

/* The supplied hero artwork already has the exact frame ratio; do not zoom/crop it. */
.hero-product-frame img[src*="more-display-client.webp"] {
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

/* Reference cards: show the supplied portrait visuals cleanly. */
.reference-card-image img[src*="changeable-ad-panels.webp"],
.reference-card-image img[src*="brand-impact-can.webp"] {
  object-position: center center !important;
}
.reference-card-image img[src*="changeable-ad-panels.webp"] {
  object-fit: cover !important;
}
.reference-card-image img[src*="brand-impact-can.webp"] {
  object-fit: cover !important;
}

/* Explicit contact-title hierarchy. Do not rely on ::first-line. */
.contact-inner h2.contact-title-tr .contact-line-small {
  display: block !important;
  color: #f4f7fb !important;
  font-size: .58em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.contact-inner h2.contact-title-tr .contact-line-large {
  display: block !important;
  color: #1f78ff !important;
  font-size: 1em !important;
  line-height: .92 !important;
  white-space: nowrap !important;
}

/* Footer center copy was removed; keep the remaining two items aligned. */
.contact-footer {
  align-items: center;
}

@media (max-width: 767.98px) {
  html, body { overflow-x: clip !important; }

  /* HERO mobile: the large Turkish line may wrap, but it must never run outside the screen. */
  .hero-copy-top {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    max-width: none !important;
  }
  .hero-copy-top h1.hero-title-tr {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(40px, 12.2vw, 58px) !important;
    line-height: .94 !important;
    gap: .14em !important;
    overflow: visible !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-solid {
    font-size: .66em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .hero-copy-top h1.hero-title-tr .hero-line-outline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1em !important;
    line-height: .94 !important;
    white-space: normal !important;
    text-wrap: balance;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* CONTACT mobile: centered, readable and never clipped on the right. */
  .contact-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 12px !important;
  }
  .contact-logo {
    width: min(320px, 84vw) !important;
    margin-bottom: 24px !important;
  }
  .contact-inner h2.contact-title-tr {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto 18px !important;
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.03em !important;
    overflow: visible !important;
  }
  .contact-inner h2.contact-title-tr .contact-line-small {
    font-size: .62em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .contact-inner h2.contact-title-tr .contact-line-large {
    font-size: 1em !important;
    line-height: .96 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  /* Compact mobile footer: remove the dead area beneath the CTA/social row. */
  .contact-section {
    padding-bottom: 8px !important;
  }
  .contact-footer {
    margin-top: 30px !important;
    padding-top: 16px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  .contact-social-block {
    margin-top: 14px !important;
    padding-bottom: 0 !important;
  }

  /* Reference captions need a little more width for the new Turkish copy. */
  .reference-caption {
    left: 20px !important;
    right: 20px !important;
    bottom: 22px !important;
  }
  .reference-caption strong {
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.05 !important;
  }
  .reference-caption em {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* ==========================================================
   2026-08-12 21:30 — MOBILE / NAV / REFERENCE FIX
   - Mobile hero image is moved back down so text and artwork never collide.
   - "Referanslar" navigation is now "Özellikler" and targets feature section.
   - Brand impact artwork is enlarged inside its card.
   - Custom heading punctuation is handled in HTML.
   ========================================================== */

/* Make the customer-supplied brand-impact visual feel more dominant in the card. */
.reference-card-image img[src*="brand-impact-can.webp"] {
  transform: scale(1.14) !important;
  transform-origin: 50% 54% !important;
  object-position: center 54% !important;
}

@media (max-width: 767.98px) {
  /* Previous 60.5% value pulled the artwork into the copy. Keep the requested
     compact rhythm, but leave a clean breathing band below the description. */
  .hero-product {
    top: 67.5% !important;
    width: 90vw !important;
  }

  .hero-copy-top p {
    max-width: 100% !important;
    padding-right: 4px !important;
  }

  .reference-card-image img[src*="brand-impact-can.webp"] {
    transform: scale(1.22) !important;
    transform-origin: 50% 55% !important;
    object-position: center 55% !important;
  }
}


/* ==========================================================
   2026-08-12 21:49 — MOBILE MECHANISM BALANCE / TITLE CLEANUP
   - All visible heading punctuation is removed in HTML.
   - The "Akıllı Raf Sistemi" micro-label is removed from the stand head.
   - On phones, the mechanism render sits slightly lower for a calmer layout.
   - Desktop mechanism geometry is untouched.
   ========================================================== */
@media (max-width: 767.98px) {
  .mechanism-stage-wrap {
    min-height: 525px !important;
    padding-top: 24px !important;
  }

  .mechanism-stage {
    top: 28px !important;
  }
}