/* TURKON — shared typography, navigation and home composition. */
:root {
 color-scheme: dark;
 --bg:#07090b; --surface:#111214; --surface-raised:#19191c; --surface-soft:#232125;
 --text:#f2efea; --muted:#bdb7b5; --soft:#a59d9f;
 --accent:#ff003f; --accent-deep:#650d27; --accent-soft:#ff4b70; --accent-text:#ff819c;
 --primary:#c8103d; --primary-hover:#b40e36; --line:#303034; --line-strong:#525055;
 --accent-rgb:255,0,63; --accent-soft-rgb:255,75,112; --accent-deep-rgb:101,13,39;
 --header-hover-bg:rgba(var(--accent-deep-rgb),.14);
 --header-glow:0 0 0 1px rgba(var(--accent-soft-rgb),.18),0 0 18px rgba(var(--accent-rgb),.25),inset 0 0 10px rgba(var(--accent-rgb),.06);
 --globe-line-rgb:167,150,158; --globe-rear-rgb:125,103,113; --globe-shade-rgb:7,9,11; --globe-light-rgb:175,128,141;
 --max:1280px; --gutter:clamp(24px,5.5vw,88px); --radius:3px;
 --font:'Barlow',Arial,Helvetica,sans-serif; --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
 --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
 --ease:cubic-bezier(.22,.68,0,1); --duration:220ms;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
button,a,input { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; cursor:pointer; border:0; }
button:disabled { cursor:default; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent-text); outline-offset:5px; }
::selection { background:var(--accent-deep); color:var(--text); }
[hidden] { display:none!important; }
svg { overflow:visible; }
.svg-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:20px; padding:16px; background:var(--text); color:var(--bg); z-index:99; }
.skip-link:focus { top:10px; }
h1,h2,h3 { margin:0; font-family:var(--display); font-weight:600; }
h1 { font-size:clamp(64px,7.8vw,116px); line-height:.99; letter-spacing:-.015em; }
h2 { font-size:clamp(46px,4.8vw,72px); line-height:1.04; letter-spacing:-.01em; }
.eyebrow { display:flex; align-items:center; gap:15px; margin:0 0 28px; font:500 14px/1.5 var(--font); letter-spacing:.025em; color:var(--muted); }
.section-index { font:500 12px var(--font); color:var(--accent-text); padding-right:16px; border-right:1px solid var(--line-strong); }
.muted-heading { color:var(--soft); }
.mono { font:11px var(--mono); color:var(--soft); }
.accent-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent-soft); flex-shrink:0; }
/* A quiet, identical navigation on all four pages. */
.site-header { position:fixed; inset:0 0 auto; z-index:30; border-bottom:1px solid transparent; transition:background var(--duration),border-color var(--duration); }
.site-header.scrolled { background:rgba(7,9,11,.97); border-color:var(--line); }
.header-inner { height:92px; width:min(var(--max),calc(100% - var(--gutter)*2)); margin:auto; display:flex; align-items:center; gap:38px; }
.brand { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; }
.brand span { font:600 31px/1 var(--display); letter-spacing:.13em; }
.desktop-nav { display:flex; gap:32px; margin-left:auto; margin-right:14px; }
.desktop-nav a { position:relative; display:flex; align-items:center; min-height:44px; border-radius:24px; font-size:15px; color:var(--muted); transition:color var(--duration),text-shadow var(--duration),transform var(--duration) var(--ease); }
/* The ring occupies the existing gap, so translated labels keep their spacing. */
.desktop-nav a:after { content:''; position:absolute; inset:0 -9px; border:1px solid transparent; border-radius:24px; pointer-events:none; transition:background var(--duration),border-color var(--duration),box-shadow var(--duration); }
.desktop-nav a:focus-visible { color:#fff0f2; text-shadow:0 0 10px rgba(var(--accent-rgb),.28); transform:translateY(-2px) scale(1.035); outline:none; }
.desktop-nav a:focus-visible:after { background:var(--header-hover-bg); border-color:var(--accent-soft); box-shadow:var(--header-glow); outline:2px solid var(--accent-text); outline-offset:4px; }
@media(hover:hover) and (pointer:fine) {
 .desktop-nav a:hover { color:#fff0f2; text-shadow:0 0 10px rgba(var(--accent-rgb),.28); transform:translateY(-2px) scale(1.035); }
 .desktop-nav a:hover:after { background:var(--header-hover-bg); border-color:var(--accent-soft); box-shadow:var(--header-glow); }
}
.header-cta { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:44px; padding:0 20px; border:1px solid var(--line-strong); border-radius:24px; font-size:14px; transition:background var(--duration),border-color var(--duration),box-shadow var(--duration); }
.header-cta .icon { width:16px; height:16px; }
.header-cta:hover,.header-cta:focus-visible { background:var(--header-hover-bg); border-color:var(--accent-soft); box-shadow:var(--header-glow); }
.menu-toggle { display:none; width:44px; height:44px; margin-left:auto; background:none; padding:10px; }
.menu-toggle span { height:1px; display:block; background:var(--text); margin:7px 0; transition:transform var(--duration); }
.menu-toggle[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
.language-switch { display:inline-flex; align-items:center; flex-shrink:0; padding:3px; border:1px solid var(--line-strong); border-radius:24px; background:var(--bg); }
.language-switch button { min-width:40px; min-height:38px; padding:0 10px; border-radius:20px; background:transparent; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:.04em; transition:color var(--duration),background var(--duration); }
.language-switch button:hover { color:var(--text); }
.language-switch button[aria-pressed=true] { background:var(--primary); color:var(--text); }
.language-switch button:focus-visible { outline-offset:2px; }
/* Actions use shape and spacing, without decorative lift. */
.button { min-height:54px; padding:0 24px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:32px; font-size:16px; font-weight:500; transition:background var(--duration),border-color var(--duration); }
.button-dark { background:var(--primary); border:1px solid var(--primary); color:var(--text); }
.button-light { background:transparent; border:1px solid var(--line-strong); color:var(--text); }
.button-dark:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.button-light:hover { background:var(--surface-raised); border-color:var(--soft); }
.button .icon { width:18px; height:18px; }
.text-link { display:inline-flex; min-height:44px; align-items:center; gap:30px; background:none; border-bottom:1px solid var(--line-strong); padding:9px 0; font-size:16px; color:var(--text); transition:color var(--duration),border-color var(--duration); }
.text-link:hover { color:var(--accent-text); border-color:var(--accent-text); }
.text-link .icon { width:18px; height:18px; }
/* The opening retains the user's preferred original typography and copy. */
.hero { --font:Arial,Helvetica,sans-serif; --text:#f5f3f4; --muted:#b8afb5; --soft:#a69aa2; font-family:var(--font); position:relative; isolation:isolate; min-height:740px; height:100svh; max-height:1180px; display:grid; place-items:center; overflow:hidden; }
.hero-art { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 88% 12%,rgba(var(--accent-deep-rgb),.2),transparent 46%); }
.hero-art canvas { width:100%; height:100%; display:block; }
.globe-fallback { position:absolute; width:120vw; aspect-ratio:1; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-12deg); border-radius:50%; opacity:.17; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='69.282' viewBox='0 0 120 69.282'%3E%3Cg fill='none' stroke='%23a7969e' stroke-width='1'%3E%3Cpath d='M40 0 20 34.641 -20 34.641 -40 0 -20 -34.641 20 -34.641 Z M100 34.641 80 69.282 40 69.282 20 34.641 40 0 80 0 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size:120px 69.282px; mask-image:radial-gradient(ellipse,#000 40%,transparent 72%); }
.canvas-ready .globe-fallback { display:none; }
.hero-wash { position:absolute; inset:0; background:radial-gradient(ellipse 43% 40% at 50% 49%,rgba(7,9,11,.84),rgba(7,9,11,.5) 50%,transparent 100%),linear-gradient(180deg,rgba(7,9,11,.32),transparent 22%,transparent 72%,var(--bg)); }
.hero-grain { display:none; }
.hero-center { width:100%; padding:94px 24px 112px; position:relative; z-index:2; }
.hero-content { text-align:center; margin:auto; max-width:1100px; }
.hero .eyebrow { justify-content:center; gap:12px; font:500 11px/1.6 var(--mono); letter-spacing:1.4px; margin-bottom:33px; }
.eyebrow-rule { width:25px; height:1px; background:var(--accent); margin:0 5px; }
.hero h1 { font-family:var(--font); font-weight:500; font-size:clamp(64px,7.1vw,112px); line-height:1.035; letter-spacing:clamp(-5.7px,-.38vw,-2.3px); }
.accent-word { color:var(--accent); }
.hero-description { margin:30px 0 0; font-size:17px; line-height:1.8; color:var(--muted); }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:35px; }
.hero .button { border-radius:9px; font-size:13px; gap:30px; }
.hero .button-light { background:rgba(17,13,17,.82); }
.hero .button-light:hover { background:var(--surface-raised); }
.hero-bottom { position:absolute; bottom:23px; left:max(var(--gutter),calc((100% - var(--max))/2)); right:max(var(--gutter),calc((100% - var(--max))/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; }
.hero-signature { display:flex; align-items:center; gap:10px; color:var(--soft); font:9px var(--mono); letter-spacing:1px; }
.tiny-cross { font-size:17px; line-height:1; color:var(--accent-text); }
.scroll-cue { display:flex; gap:11px; align-items:center; color:var(--muted); font:500 10px var(--font); letter-spacing:.08em; position:absolute; left:50%; transform:translateX(-50%); min-height:44px; }
.scroll-line { height:24px; width:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.scroll-line:after { content:''; height:12px; width:1px; background:var(--accent-soft); position:absolute; top:0; animation:scroll-line 2.4s ease-in-out infinite; animation-play-state:paused; }
.hero.is-in-view .scroll-line:after { animation-play-state:running; }
.motion-paused .hero .scroll-line:after,.document-hidden .hero .scroll-line:after { animation-play-state:paused; }
.focus-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:28px; padding:28px max(var(--gutter),calc((100% - var(--max))/2)); border-block:1px solid var(--line); }
.focus-strip>span { min-width:0; font-size:17px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.focus-strip>span+span { padding-inline-start:28px; border-inline-start:1px solid var(--line); }
.focus-strip .strip-label { font-weight:500; color:var(--text); }
/* Each home section has its own reading rhythm. */
.section { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:auto; padding:124px 0; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:60px; margin-bottom:50px; }
.section-intro { max-width:330px; margin:0 0 4px; color:var(--muted); font-size:17px; line-height:1.75; }
.systems-store-link { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:25px; }
.systems-store-link p { font-size:16px; color:var(--muted); margin:0; }
.approach { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; align-items:center; padding-top:20px; padding-bottom:140px; }
.brand-artwork { margin:0; min-width:0; }
.brand-artwork img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:2px; }
.approach-content { min-width:0; }
.approach-content h2 { font-size:clamp(44px,4.4vw,65px); }
.approach-content p:not(.eyebrow) { font-size:17px; line-height:1.7; color:var(--muted); margin:22px 0; }
.approach-content .approach-lead { color:var(--text)!important; font-size:21px!important; line-height:1.5!important; margin-top:29px!important; }
.approach-page-link { margin-top:10px; }
.architecture { position:relative; width:100%; background:linear-gradient(180deg,var(--bg),#110e10 42%,#110e10 68%,var(--bg)); color:var(--text); padding:112px max(var(--gutter),calc((100% - var(--max))/2)) 124px; }
.architecture:before { content:''; position:absolute; top:0; inset-inline:max(var(--gutter),calc((100% - var(--max))/2)); height:1px; background:#36282d; pointer-events:none; }
.architecture:after { content:''; position:absolute; top:0; inset-inline-start:max(var(--gutter),calc((100% - var(--max))/2)); width:64px; height:1px; background:var(--accent-soft); pointer-events:none; }
.architecture-inner { max-width:var(--max); margin:auto; }
.architecture .eyebrow { color:var(--muted); margin-bottom:42px; }
.architecture .section-index { color:var(--accent-text); border-color:var(--line-strong); }
.about-preview-body { display:grid; grid-template-columns:1.4fr 1fr; gap:70px; align-items:end; }
.about-preview-body h2 { font-size:clamp(54px,5.7vw,84px); }
.about-preview-body h2 span { color:#c4a7ae; }
.about-preview-reading p { font-size:20px; line-height:1.7; margin:0 0 30px; max-width:390px; color:var(--muted); }
.architecture .text-link { color:var(--text); border-color:var(--line-strong); }
.architecture .text-link:hover { color:var(--accent-text); border-color:var(--accent-text); }
/* Shared footer: wordmark, navigation and a concise description. */
.site-footer { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:auto; padding:74px 0 30px; }
.footer-top { display:grid; grid-template-columns:1fr auto; gap:10px 30px; align-items:center; padding-bottom:50px; }
.footer-top .brand { grid-column:1; grid-row:1; }
.footer-top .brand span { font-size:clamp(70px,8.5vw,128px); letter-spacing:.08em; }
.footer-top>span { grid-column:1; color:var(--muted); font-size:16px; margin-top:9px; }
.back-top { grid-column:2; grid-row:1/3; display:flex; gap:24px; align-items:center; font-size:15px; min-height:44px; }
.back-top:hover { color:var(--accent-text); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:var(--soft); }
.footer-bottom .designer-credit { display:inline-block; font:400 14px/1.5 var(--font); color:var(--muted); direction:ltr; unicode-bidi:isolate; }
/* Common accessible dialog shell; catalogue owns its contents. */
.system-dialog { border:1px solid var(--line-strong); border-radius:var(--radius); padding:0; width:min(620px,calc(100% - 32px)); max-height:90svh; background:var(--surface); box-shadow:0 30px 110px #0008; color:var(--text); overscroll-behavior:contain; }
.system-dialog::backdrop { background:rgba(0,0,0,.78); }
.dialog-inner { padding:32px; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:15px; }
.dialog-top .eyebrow { font-size:12px; margin:0; color:var(--accent-text); }
.dialog-close { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); background:transparent; border-radius:2px; flex-shrink:0; }
.dialog-close:hover { background:var(--surface-soft); }
.dialog-close .icon { width:18px; height:18px; }
.dialog-inner h2 { font-size:46px; letter-spacing:-.01em; }
.dialog-inner>p { color:var(--muted); font-size:16px; line-height:1.75; }
.dialog-open { overflow:hidden; }
@keyframes scroll-line { from { transform:translateY(-12px); } to { transform:translateY(32px); } }
@keyframes hero-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.hero-enter { animation:hero-enter .65s var(--ease) both; }
.delay-1 { animation-delay:.05s; } .delay-2 { animation-delay:.1s; } .delay-3 { animation-delay:.15s; }
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.js .reveal.visible { opacity:1; transform:none; }
@media(max-width:1100px) {
 .header-inner { gap:20px; } .desktop-nav { margin-right:0; gap:22px; }
 .hero-signature { display:none; } .hero-bottom { justify-content:center; } .scroll-cue { position:static; transform:none; }
 .section { padding-block:96px; } .section-heading { gap:30px; }
 .approach { gap:44px; padding-top:12px; } .about-preview-body { gap:40px; }
 .focus-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
 .focus-strip>span:nth-child(3) { padding-inline-start:0; border-inline-start:0; }
}
@media(min-width:761px) and (max-width:1000px) {
 .header-cta { display:none; }
 .header-inner { gap:18px; }
 .desktop-nav { gap:20px; }
}
@media(max-width:760px) {
 :root { --gutter:24px; } html { scroll-padding-top:92px; }
 .header-inner { height:74px; gap:12px; } .brand span { font-size:29px; }
 .desktop-nav,.header-cta { display:none; } .menu-toggle { display:block; margin-left:0; flex-shrink:0; }
 .language-switch { margin-left:auto; }
 .mobile-nav { background:var(--surface); padding:8px var(--gutter) 24px; border-bottom:1px solid var(--line); max-height:calc(100svh - 74px); max-height:calc(100dvh - 74px); overflow-y:auto; overscroll-behavior:contain; }
 .mobile-nav a { display:flex; justify-content:space-between; padding:17px 2px; font-size:22px; border-bottom:1px solid var(--line); min-height:60px; }
 .mobile-nav a:hover,.mobile-nav a[aria-current] { color:var(--accent-text); }
 .mobile-nav a > span:last-child { font-size:12px; color:var(--soft); }
 .site-header:has(.menu-toggle[aria-expanded=true]) { background:var(--surface); }
 h1 { font-size:64px; } h2 { font-size:46px; }
 .eyebrow { font-size:13px; margin-bottom:24px; }
 .button { min-height:52px; padding:0 19px; font-size:15px; gap:20px; }
 .hero { min-height:690px; max-height:950px; }
 .hero-center { padding:98px 22px 126px; }
 .hero h1 { font-size:clamp(45px,8.1vw,64px); line-height:1.07; }
 .hero .eyebrow { font-size:9px; letter-spacing:.9px; gap:8px; margin-bottom:30px; }
 .eyebrow-rule { width:18px; margin:0 2px; }
 .hero-description { font-size:15px; line-height:1.8; margin-top:25px; }
 .hero-actions { margin-top:29px; gap:10px; }
 .hero .button { font-size:12px; padding:0 16px; min-height:52px; gap:15px; }
 .hero .button .icon { width:16px; height:16px; }
 .hero-wash { background:radial-gradient(ellipse 72% 40% at 50% 47%,rgba(7,9,11,.87),rgba(7,9,11,.55) 50%,transparent),linear-gradient(180deg,rgba(7,9,11,.2),transparent 24%,transparent 72%,var(--bg)); }
 .globe-fallback { width:210vw; }
 .hero-bottom { bottom:18px; gap:12px; } .scroll-cue { font-size:9px; letter-spacing:.04em; gap:8px; }
 .focus-strip { padding:24px var(--gutter); gap:20px 16px; align-items:start; }
 .focus-strip>span+span { padding-inline-start:16px; }
 .focus-strip>span:nth-child(3) { padding-inline-start:0; }
 .section { padding-block:76px; }
 .section-heading { display:block; margin-bottom:32px; }
 .section-intro { font-size:16px; margin:24px 0 0; max-width:470px; }
 .systems-store-link { flex-direction:column; align-items:flex-start; gap:10px; }
 .approach { grid-template-columns:1fr; gap:37px; padding-top:0; }
 .brand-artwork { width:100%; max-width:480px; margin:auto; }
 .approach-content h2 { font-size:46px; }
 .approach-content p:not(.eyebrow) { font-size:16px; }
 .approach-content .approach-lead { font-size:21px!important; }
 .architecture { padding:76px var(--gutter) 84px; }
 .architecture .eyebrow { margin-bottom:31px; }
 .about-preview-body { grid-template-columns:1fr; gap:28px; }
 .about-preview-body h2 { font-size:clamp(48px,9vw,68px); }
 .about-preview-reading p { font-size:18px; }
 .site-footer { padding-top:50px; }
 .footer-top { padding-bottom:33px; gap:5px 20px; }
 .footer-top .brand span { font-size:68px; }
 .footer-top>span { grid-column:1/3; font-size:14px; }
 .back-top { grid-row:1; font-size:13px; gap:12px; }
 .back-top .icon { width:17px; height:17px; }
 .footer-bottom { font-size:11px; flex-wrap:wrap; gap:10px; }
 .footer-bottom .designer-credit { flex-basis:100%; padding-top:6px; }
 .dialog-inner { padding:22px; } .dialog-inner h2 { font-size:36px; }
}
@media(max-width:380px) {
 :root { --gutter:18px; }
 .hero-center { padding-inline:18px; }
 .hero { min-height:710px; }
 .hero h1 { font-size:42px; } .hero .eyebrow { font-size:8px; letter-spacing:.6px; }
 .hero-description { font-size:14px; }
 .hero-actions { flex-direction:column; gap:11px; }
 .hero-actions .button { width:220px; justify-content:space-between; padding:0 20px; min-height:49px; }
 .scroll-cue { font-size:8px; }
 h2,.approach-content h2 { font-size:41px; }
 .about-preview-body h2 { font-size:45px; }
 .footer-top .brand span { font-size:57px; }
 .dialog-inner { padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 body:not(.motion-override) *,body:not(.motion-override) *:before,body:not(.motion-override) *:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
 .js body:not(.motion-override) .reveal,body:not(.motion-override) .hero-enter { opacity:1; transform:none; }
 body:not(.motion-override) .desktop-nav a { transform:none; }
}