/* Synapse AI — monochrome motion direction, inspired by the Qronos reference.
   Original layout/content stylesheet stays intact; this layer owns the redesign. */
:root {
  color-scheme: dark;
  --color-midnight-canvas: #050505;
  --color-ice-highlight: #f3f3f3;
  --color-frost-glow: #e8e8e8;
  --color-moon-mist: #b4b4b8;
  --color-fog-veil: #98989f;
  --color-blueprint-blue: #dedede;
  --color-void-violet: #eeeeee;
  --color-glass-edge: #ffffff20;
  --color-luminous-fill: #ffffff0d;
  --surface-frost-1: #ffffff03;
  --surface-frost-2: #ffffff08;
  --surface-frost-3: #ffffff0a;
  --surface-frost-5: #ffffff15;
  --surface-header-glass: #050505c9;
  --surface-nav-mobile: #090909;
  --surface-deep-glass: #0c0c0c;
  --font-aeonikpro: 'Inter', sans-serif;
  --gradient-ice-highlight: linear-gradient(180deg, #fff 15%, #96969c 100%);
  --shadow-subtle-4: inset 0 1px 0 #ffffff0d, 0 16px 64px #0003;
  --shadow-subtle-6: inset 0 1px 0 #ffffff30, 0 16px 64px #0006;
  --shadow-sm: 0 0 18px #ffffff12;
  --shadow-md: 0 0 24px #ffffff20;
  --page-max-width: 1280px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
html { scroll-padding-top: 100px; overflow-x: clip; }
body { background: #050505; overflow-x: clip; }
body::before { z-index: -1; inset: 0 24px; border-inline: 1px solid #ffffff12; background: none; }
body::after { content: ''; position: fixed; height: 2px; top: 0; left: 0; width: 100%; background: #e7e7e7; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; z-index: 1100; pointer-events: none; }
::selection { background: #ddd; color: #111; }
:focus-visible { outline: 2px solid #fafafa; outline-offset: 5px; }
header { background: #050505bf; }
header.scrolled { background: #080808eb; }
.nav { min-height: 82px; padding: 16px 48px; }
.brand { font-size: 16px; letter-spacing: -.04em; gap: 12px; }
.brand-dot { width: 25px; height: 25px; border-radius: 0; background: repeating-linear-gradient(135deg,#f7f7f7 0 3px,transparent 3px 6px); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow: none; }
nav.links { gap: 32px; }
nav.links > a, .nav-dropdown-trigger { font-size: 10px; letter-spacing: .07em; }
.controls { gap: 12px; }
.lang-toggle { box-shadow: none; border: 1px solid #ffffff20; font-size: 11px; min-height: 36px; }
.cta-btn { display: inline-flex; justify-content: center; align-items: center; gap: 20px; background: #efefef; color: #101010; border: 1px solid #efefef; border-radius: 999px; font-size: 12px; padding: 14px 24px; min-height: 44px; transition: transform .3s, background .3s, box-shadow .3s; }
.cta-btn::after { content: '↗'; font-size: 17px; }
.cta-btn:hover { background: white; box-shadow: 0 0 30px #ffffff25; transform: translateY(-3px); }
.nav .cta-btn { background: transparent; color: #eee; border-color: #ffffff50; padding: 8px 18px; min-height: 36px; }
.wrap { padding-inline: 64px; }
h2 { font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -.055em; line-height: 1.1; font-weight: 400; text-wrap: balance; }
p { line-height: 1.75; }
.section-padding, .service-section, .services-wrapper { padding-block: 120px; position: relative; }
.section-head { max-width: 850px; margin-bottom: 64px; }
.kicker, .eyebrow-sm { font-size: 10px; letter-spacing: .16em; color: #aaa; }
.kicker { margin-bottom: 24px; }
.hero { padding: 0 0 90px; isolation: isolate; box-shadow: none; }
.hero::before { display: none; }
.hero-canvas { position: absolute; inset: -82px 0 auto; height: 800px; width: 100%; z-index: -2; pointer-events: none; opacity: .8; mask-image: linear-gradient(#000 65%,transparent); }
.hero::after { content: ''; position: absolute; inset: 0 0 auto; height: 670px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, #050505b8 0%, #05050550 38%,transparent 68%); }
.hero-content { max-width: 1160px; padding-top: 160px; margin-bottom: 120px; }
.hero h1 { font-size: clamp(42px,5.25vw,72px); font-weight: 400; letter-spacing: -.06em; line-height: 1.08; margin-bottom: 32px; background: none; -webkit-text-fill-color: #f0f0f0; }
.hero h1 em { color: #aaa; -webkit-text-fill-color: #aaa; }
.hero p.lede { font-size: 16px; max-width: 620px; color: #b6b6ba; line-height: 1.8; margin-bottom: 0; }
.complex-diagram { height: 350px; padding: 40px; border: 1px solid #ffffff20; border-radius: 16px; background: radial-gradient(ellipse at 50% 100%, #ffffff08,transparent 60%), #090909ef; backdrop-filter: blur(12px); box-shadow: 0 -1px 40px #ffffff04; }
.complex-diagram::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#ffffff25 .6px, transparent .6px); background-size: 20px 20px; mask-image: radial-gradient(ellipse,black,transparent 75%); pointer-events: none; }
.c-node { background: linear-gradient(150deg,#202020,#0c0c0c); border: 1px solid #ffffff20; font-size: 11px; box-shadow: 0 6px 15px #0007; border-radius: 8px; }
.core-engine { background: linear-gradient(135deg,#252525,#0b0b0b); border: 1px solid #ffffff40; box-shadow: 0 0 60px #ffffff08; border-radius: 12px; }
.core-engine::before, .core-engine::after { border-color: #ffffff22; }
.engine-title { font-size: 18px; letter-spacing: -.03em; }
.engine-tags span { color: #aaa; font-size: 9px; background: #ffffff07; }
.services-wrapper .section-head { margin-bottom: 70px !important; }
.services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.service-card { min-height: 400px; padding: 32px; border: 1px solid #ffffff20; background: linear-gradient(145deg,#131313,#080808); border-radius: 16px; --card-delay: 0s; }
.service-card > * { position: relative; z-index: 1; }
.service-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 215px; background-image: linear-gradient(0deg,#0d0d0d,transparent 90%), var(--card-image); background-position: center; background-size: cover; opacity: .27; filter: grayscale(1); transition: opacity .7s, transform 1s var(--ease-out); }
.service-card:nth-child(1) { --card-image: url('../images/ai-agents.png'); }
.service-card:nth-child(2) { --card-image: url('../images/workflow-automation.png'); }
.service-card:nth-child(3) { --card-image: url('../images/private-llm.png'); }
.service-card:nth-child(4) { --card-image: url('../images/data-intelligence.png'); }
.service-card:nth-child(5) { --card-image: url('../images/ai-sales-agent.png'); }
.service-card:nth-child(6) { --card-image: url('../images/ai-video.png'); }
.service-card-head { margin-bottom: 38px; }
.service-card-index { color: #e1e1e1; font-size: 11px; }
.tag { background: #111c; color: #bcbcc1; border: 1px solid #ffffff16; box-shadow: none; font-size: 9px; letter-spacing: .025em; border-radius: 999px; padding: 5px 10px; white-space: normal; }
.service-card-icon { width: 46px; height: 46px; border-radius: 50%; background: #151515; border: 1px solid #ffffff30; box-shadow: 0 6px 16px #0006; margin-bottom: 35px; }
.service-card-icon svg { width: 21px; height: 21px; }
.service-card h3 { font-size: 25px; font-weight: 400; letter-spacing: -.045em; margin-bottom: 14px; max-width: 90%; }
.service-card-desc { font-size: 13px; line-height: 1.8; max-width: 44ch; margin-bottom: 22px; color: #a5a5ac; }
.service-card-arrow { position: absolute; right: 28px; bottom: 28px; background: #ffffff08; border: 1px solid #ffffff20; transform: rotate(-45deg); }
.service-card:hover::before { opacity: .45; transform: scale(1.035); }
.service-card.reveal.active:hover { transform: translateY(-7px); border-color: #ffffff55; transition-delay: 0s; }
.service-card:hover .service-card-arrow { transform: rotate(-45deg) translateX(3px); background: #eee; color: #111; }
.stats-grid { gap: 0; }
.stat-card { padding: 24px 32px; background: none; box-shadow: none; border-radius: 0; border-right: 1px solid #ffffff20; }
.stat-card:last-child { border-right: 0; }
.stat-number { font-family: 'Inter',sans-serif; font-size: clamp(42px,5vw,68px); letter-spacing: -.06em; font-weight: 400; }
.stat-label { font-size: 10px; letter-spacing: .1em; line-height: 1.8; }
.roi { background: radial-gradient(ellipse at 50% 90%,#ffffff06,transparent 60%); }
.roi-box { border: 1px solid #ffffff25; background: linear-gradient(120deg,#131313,#080808); border-radius: 18px; padding: 64px; box-shadow: 0 30px 70px #0005; }
.roi-inputs label { font-size: 10px; letter-spacing: .06em; color: #bbb; }
.roi-inputs input[type=range] { height: 3px; background: linear-gradient(to right,#c5c5c5 var(--range-fill,15%),#303030 var(--range-fill,15%)); cursor: pointer; }
.roi-inputs input[type=range]::-webkit-slider-thumb { width: 15px; height: 15px; background: #f0f0f0; box-shadow: 0 0 0 5px #ffffff0e; }
.roi-inputs input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #f0f0f0; }
.roi-inputs input[type=range]:focus-visible { outline: 2px solid #aaa; outline-offset: 8px; }
.roi-result { padding-left: 40px; border-left: 1px solid #ffffff20; }
.roi-result::before { left: 40px; font-size: 9px; }
.roi-result .figure { font-family: 'Inter',sans-serif; font-size: clamp(40px,4.5vw,62px); letter-spacing: -.06em; white-space: nowrap; }
#contact { background: radial-gradient(ellipse at 0 60%,#ffffff06,transparent 65%) !important; }
#contact > .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
#contact .section-head { text-align: left; margin: 40px 0 0; position: sticky; top: 140px; }
#contact .kicker { justify-content: start; font-size: 9px; }
#contact .kicker::before { display: none; }
#contact h2 { font-size: clamp(40px,4.7vw,64px); }
.contact-wrapper { width: 100%; border: 1px solid #ffffff20; background: #0c0c0c; padding: 36px; }
.form-group label { font-size: 9px; letter-spacing: .08em; color: #aaa; }
.form-control { background: #ffffff03; border: 1px solid #ffffff20; border-radius: 7px; box-shadow: none; color: #eee; }
.form-control:focus { border-color: #ffffff80; box-shadow: 0 0 0 3px #ffffff08; }
.nav-dropdown-panel-inner { background: #111; border: 1px solid #ffffff25; box-shadow: 0 24px 50px #0009; }
.nav-dropdown-item-icon { background: #ffffff08; }
.subnav { padding-top: 30px; }
.subnav .wrap { font-size: 10px; }
.service-hero { padding-block: 80px 110px; background: radial-gradient(ellipse at 85% 20%,#ffffff0a,transparent 60%); }
.service-hero h1 { font-size: clamp(38px,4.7vw,64px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; margin-block: 24px; }
.service-hero .lede { font-size: 15px; line-height: 1.8; }
.service-hero-index { color: #989898; font-size: 10px; }
.service-hero-image .framed-image { aspect-ratio: 3 / 2; border: 1px solid #ffffff30; }
.framed-image img { transition: transform 1.2s var(--ease-out); }
.framed-image:hover img { transform: scale(1.045); }
.service-section-head p { margin-top: 22px; font-size: 15px; }
.service-section-head:not(.center) { max-width: 780px; }
.capability-card { border: 1px solid #ffffff20; background: linear-gradient(145deg,#151515,#080808); padding: 30px; min-height: 210px; }
.capability-card h4 { font-size: 18px; font-weight: 400; letter-spacing: -.025em; }
.capability-card p { font-size: 13px; }
.capability-card-icon { background: #ffffff08; }
.flow-step-num { background: #151515; border: 1px solid #ffffff30; box-shadow: 0 0 0 8px #ffffff03; }
.flow-step h4 { font-weight: 400; font-size: 17px; margin-bottom: 12px; }
.flow-connector { background: linear-gradient(90deg,#ffffff10,#ffffff50,#ffffff10); }
.case-study { border: 1px solid #ffffff20; background: #0d0d0d; padding: 40px; gap: 48px; }
.case-study h3 { font-weight: 400; letter-spacing: -.04em; font-size: 28px; }
.case-study p { font-size: 14px; }
.page-cta { border: 1px solid #ffffff20; padding-block: 90px; background: radial-gradient(ellipse at 50% 0,#ffffff10,transparent 70%); }
footer { padding-block: 70px 40px; }
footer .brand { font-size: clamp(40px,8vw,110px); font-weight: 500; letter-spacing: -.065em; margin-bottom: 30px; }
footer .brand-dot { width: 42px; height: 42px; }
footer p { font-size: 10px; letter-spacing: .03em; }
/* Progressive enhancement: content is visible if JavaScript cannot run. */
.reveal, .service-card.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.motion-ready .service-card.reveal { transform: translateY(65px) scale(.965); transition: opacity .85s var(--ease-out) var(--reveal-delay,0s), transform 1s var(--ease-out) var(--reveal-delay,0s), border-color .3s; }
.motion-ready .reveal.active { opacity: 1; transform: none; }
.word { display: inline-block; }
.motion-ready .text-reveal .word { opacity: 0; transform: translateY(.6em); filter: blur(5px); transition: opacity .7s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out); transition-delay: calc(var(--word-i,0) * 28ms); }
.motion-ready .text-reveal.text-visible .word { opacity: 1; transform: none; filter: blur(0); }
@media (max-width:1100px) {
  .wrap { padding-inline: 40px; }
  .nav { padding-inline: 40px; }
  .roi-box { padding: 40px; gap: 32px; }
  #contact > .wrap { gap: 40px; }
}
@media (max-width:900px) {
  .nav { min-height: 74px; }
  nav.links { top: 74px; visibility: hidden; }
  nav.links.open { visibility: visible; max-height: calc(100dvh - 74px); padding-inline: 24px; align-items: stretch; gap: 24px; }
  .nav-dropdown-panel-inner { border: 0; background: none; box-shadow: none; }
  .nav-dropdown-panel { width: 100%; }
  .hero-content { padding-top: 120px; margin-bottom: 95px; }
  .hero h1 { font-size: clamp(40px,6vw,60px); }
  .hero h1 br { display: none; }
  .complex-diagram { flex-direction: row; height: 340px; gap: 22px; padding: 28px; }
  .diagram-col { width: 28%; gap: 18px; }
  .diagram-col.center { width: 38%; }
  .core-engine { width: 100%; padding: 24px 12px; }
  .engine-title { font-size: 14px; }
  .c-node { font-size: 9px; padding: 14px 8px; }
  .diagram-lines { display: block; }
  .roi-result { padding-left: 0; padding-top: 45px; border-left: 0; }
  .roi-result::before { left: 50%; }
  .service-hero .wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
  .service-hero-image { order: 0; }
  .service-hero-actions { gap: 18px; }
  .service-hero-actions .text-link { font-size: 12px; }
  .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat-card { padding: 20px 15px; }
  #contact > .wrap { grid-template-columns: 1fr; gap: 40px; }
  #contact .section-head { position: static; text-align: center; margin: 0 auto; }
  #contact .kicker { justify-content: center; }
  .contact-wrapper { max-width: 650px; }
}
@media (max-width:600px) {
  body::before { inset-inline: 12px; }
  .wrap { padding-inline: 28px; }
  .nav { padding-inline: 24px; }
  .brand { font-size: 13px; gap: 8px; }
  .brand-dot { width: 20px; height: 20px; }
  .controls { gap: 8px; }
  .lang-toggle { padding: 7px 10px; }
  .nav .cta-btn { padding: 7px 12px; font-size: 10px; gap: 8px; }
  .nav .cta-btn::after { display: none; }
  .menu-btn { font-size: 21px; min-width: 28px; }
  .section-padding, .service-section, .services-wrapper { padding-block: 80px; }
  .hero { padding-top: 0; padding-bottom: 60px; }
  .hero-content { padding-top: 90px; margin-bottom: 75px; }
  .hero h1 { font-size: clamp(35px,9.5vw,52px); line-height: 1.09; letter-spacing: -.055em; }
  .hero p.lede { font-size: 13px; max-width: 35ch; }
  .hero-canvas { height: 660px; opacity: .65; }
  .complex-diagram { height: auto; flex-direction: column; padding: 24px; gap: 30px; }
  .diagram-col, .diagram-col.center { width: 100%; }
  .diagram-col { gap: 10px; }
  .c-node { font-size: 11px; padding: 13px; }
  .core-engine { padding: 28px 16px; }
  .engine-title { font-size: 17px; }
  .engine-tags span { font-size: 9px; }
  .diagram-lines { display: none; }
  .services-grid { grid-template-columns: 1fr; gap: 18px; }
  .services-wrapper .section-head { margin-bottom: 44px !important; }
  .service-card { min-height: 390px; padding: 28px; }
  .service-card h3 { font-size: 25px; }
  .service-card-desc { padding-right: 10px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { border-right: 0; border-bottom: 1px solid #ffffff20; padding: 34px 0; }
  .stat-card:last-child { border-bottom: 0; }
  .stat-number { font-size: 62px; }
  .roi-box { padding: 28px 22px; }
  .roi-inputs label { font-size: 9px; line-height: 1.8; min-height: 20px; }
  .roi-inputs .val { font-size: 12px; }
  .roi-result .figure { font-size: clamp(32px,9vw,50px); }
  .roi-result > div:not(.figure) { font-size: 10px !important; }
  .contact-wrapper { padding: 26px 22px; }
  #contact h2 { font-size: 42px; }
  .service-hero { padding: 50px 0 70px; }
  .service-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .service-hero h1 { font-size: 46px; }
  .service-hero-image .framed-image { aspect-ratio: 3/2; }
  .service-section > .wrap > .wrap { padding-inline: 0; }
  .service-section .wrap > div[style*='grid-template-columns:1fr 1fr'] { grid-template-columns: 1fr !important; }
  .case-study { padding: 22px; gap: 28px; }
  .page-cta { padding: 55px 22px; }
  footer .brand { font-size: 46px; gap: 10px; }
  footer .brand-dot { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal, .motion-ready .service-card.reveal, .motion-ready .text-reveal .word { opacity: 1; transform: none; filter: none; }
}
@media print {
  header, .hero-canvas { display: none; }
  .reveal, .motion-ready .reveal, .motion-ready .text-reveal .word { opacity: 1; transform: none; filter: none; }
}