@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 300;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-1.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 400;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-2.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 500;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-3.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 600;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-4.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 700;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-5.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 800;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-6.woff2) format('woff2');


}


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 900;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-7.woff2) format('woff2');


}


@font-face {


  font-family: 'JetBrains Mono';


  font-style: normal;


  font-weight: 300;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-8.woff2) format('woff2');


}


@font-face {


  font-family: 'JetBrains Mono';


  font-style: normal;


  font-weight: 400;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-9.woff2) format('woff2');


}


@font-face {


  font-family: 'JetBrains Mono';


  font-style: normal;


  font-weight: 500;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-10.woff2) format('woff2');


}


@font-face {


  font-family: 'JetBrains Mono';


  font-style: normal;


  font-weight: 700;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-11.woff2) format('woff2');


}


@font-face {


  font-family: 'Space Grotesk';


  font-style: normal;


  font-weight: 300;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-12.woff2) format('woff2');


}


@font-face {


  font-family: 'Space Grotesk';


  font-style: normal;


  font-weight: 400;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-13.woff2) format('woff2');


}


@font-face {


  font-family: 'Space Grotesk';


  font-style: normal;


  font-weight: 500;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-14.woff2) format('woff2');


}


@font-face {


  font-family: 'Space Grotesk';


  font-style: normal;


  font-weight: 600;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-15.woff2) format('woff2');


}


@font-face {


  font-family: 'Space Grotesk';


  font-style: normal;


  font-weight: 700;


  font-display: swap;


  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2600-26FF;


  src: url(/fonts/krono-16.woff2) format('woff2');


}





/* ============================================


   ALT-TAB - Main Stylesheet


   Modern IT Company Portfolio


   ============================================ */





/* ── CSS Variables ─────────────────────────── */


:root {


  --color-bg: #050810;


  --color-bg2: #080d1a;


  --color-surface: #0d1426;


  --color-surface2: #111827;


  --color-border: rgba(99, 179, 237, 0.12);


  --color-border-hover: rgba(99, 179, 237, 0.35);





  --color-primary: #00d4ff;


  --color-primary-dark: #0099cc;


  --color-secondary: #7c3aed;


  --color-accent: #f59e0b;


  --color-success: #10b981;


  --color-danger: #ef4444;





  --color-text: #e2e8f0;


  --color-text-muted: #94a3b8;


  --color-text-light: #94a3b8;





  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);


  --gradient-glow: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);


  --gradient-card: linear-gradient(145deg, #0d1426 0%, #111827 100%);


  --gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);





  --font-main: 'Space Grotesk', sans-serif;


  --font-mono: 'JetBrains Mono', monospace;


  --font-body: 'Inter', sans-serif;





  --radius-sm: 6px;


  --radius-md: 12px;


  --radius-lg: 20px;


  --radius-xl: 32px;


  --radius-full: 9999px;





  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);


  --shadow-md: 0 8px 30px rgba(0,0,0,0.4);


  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);


  --shadow-glow: 0 0 40px rgba(0, 212, 255, 0.15);


  --shadow-glow-purple: 0 0 40px rgba(124, 58, 237, 0.2);





  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);


  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);


  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);





  --nav-height: 80px;


}





/* ── Reset & Base ──────────────────────────── */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }





html {


  scroll-behavior: smooth;


  font-size: 16px;


  -webkit-text-size-adjust: 100%;


}





body {


  font-family: var(--font-body);


  background-color: var(--color-bg);


  color: var(--color-text);


  line-height: 1.7;


  overflow-x: hidden;


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


}





::selection { background: rgba(0, 212, 255, 0.2); color: var(--color-primary); }





img { max-width: 100%; height: auto; display: block; }


a { text-decoration: none; color: inherit; }


ul, ol { list-style: none; }


button { cursor: pointer; border: none; background: none; font-family: inherit; }


input, textarea, select { font-family: inherit; }





/* ── Scrollbar ─────────────────────────────── */


::-webkit-scrollbar { width: 6px; }


::-webkit-scrollbar-track { background: var(--color-bg); }


::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }


::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }





/* ── Cursor ────────────────────────────────── */


.cursor-dot {


  width: 8px;


  height: 8px;


  background: var(--color-primary);


  border-radius: 50%;


  position: fixed;


  pointer-events: none;


  z-index: 10000;


  transform: translate(-50%, -50%);


  transition: transform 0.1s;


}





.cursor-ring {


  width: 36px;


  height: 36px;


  border: 1.5px solid rgba(0, 212, 255, 0.5);


  border-radius: 50%;


  position: fixed;


  pointer-events: none;


  z-index: 9999;


  transform: translate(-50%, -50%);


  transition: all 0.15s ease;


}





.cursor-ring.hover {


  width: 56px;


  height: 56px;


  border-color: var(--color-primary);


  background: rgba(0, 212, 255, 0.05);


}





/* ── Navbar ────────────────────────────────── */


#navbar {


  position: fixed;


  top: 0;


  left: 0;


  right: 0;


  height: var(--nav-height);


  z-index: 1000;


  padding: 0 5%;


  display: flex;


  align-items: center;


  justify-content: space-between;


  transition: all var(--transition-normal);


}





#navbar.scrolled {


  background: rgba(5, 8, 16, 0.95);


  backdrop-filter: blur(20px);


  -webkit-backdrop-filter: blur(20px);


  border-bottom: 1px solid var(--color-border);


  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);


}





.nav-logo {


  display: flex;


  align-items: center;


  gap: 10px;


  font-family: var(--font-main);


  font-size: 1.4rem;


  font-weight: 700;


  letter-spacing: -0.5px;


}





.nav-logo-icon {


  width: 40px;


  height: 40px;


  background: var(--gradient-primary);


  border-radius: 10px;


  display: flex;


  align-items: center;


  justify-content: center;


  font-family: var(--font-mono);


  font-size: 0.75rem;


  font-weight: 700;


  color: var(--color-bg);


  letter-spacing: 0;


}





.nav-logo-text {


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.nav-menu {


  display: flex;


  align-items: center;


  gap: 8px;


}





.nav-link {


  font-size: 0.88rem;


  font-weight: 500;


  color: var(--color-text-light);


  padding: 8px 16px;


  border-radius: var(--radius-full);


  transition: all var(--transition-fast);


  position: relative;


}





.nav-link:hover,


.nav-link.active {


  color: var(--color-primary);


  background: rgba(0, 212, 255, 0.08);


}





.nav-link.active::after {


  content: '';


  position: absolute;


  bottom: 4px;


  left: 50%;


  transform: translateX(-50%);


  width: 4px;


  height: 4px;


  background: var(--color-primary);


  border-radius: 50%;


}





.nav-cta {


  font-size: 0.88rem;


  font-weight: 600;


  padding: 10px 22px;


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-radius: var(--radius-full);


  transition: all var(--transition-fast);


  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);


}





.nav-cta:hover {


  transform: translateY(-2px);


  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);


}





.nav-hamburger {


  display: none;


  flex-direction: column;


  gap: 5px;


  padding: 8px;


  cursor: pointer;


}





.nav-hamburger span {


  display: block;


  width: 24px;


  height: 2px;


  background: var(--color-text);


  border-radius: 1px;


  transition: all var(--transition-fast);


}





.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }


.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }


.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }





/* ── Canvas Background ─────────────────────── */


#particles-canvas {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  z-index: 0;


  pointer-events: none;


}





/* ── Hero Section ──────────────────────────── */


.hero {


  min-height: 100vh;


  display: flex;


  align-items: center;


  position: relative;


  padding: calc(var(--nav-height) + 60px) 5% 80px;


  overflow: hidden;


}





.hero::before {


  content: '';


  position: absolute;


  inset: 0;


  background: var(--gradient-hero);


  z-index: 1;


}





.hero-grid {


  position: absolute;


  inset: 0;


  background-image:


    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),


    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);


  background-size: 60px 60px;


  z-index: 1;


  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);


}





.hero-content {


  position: relative;


  z-index: 2;


  max-width: 800px;


}





.hero-badge {


  display: inline-flex;


  align-items: center;


  gap: 8px;


  padding: 6px 16px;


  background: rgba(0, 212, 255, 0.08);


  border: 1px solid rgba(0, 212, 255, 0.2);


  border-radius: var(--radius-full);


  font-family: var(--font-mono);


  font-size: 0.78rem;


  font-weight: 500;


  color: var(--color-primary);


  margin-bottom: 28px;


  animation: fadeInUp 0.6s ease 0.2s both;


}





.hero-badge-dot {


  width: 6px;


  height: 6px;


  background: var(--color-success);


  border-radius: 50%;


  box-shadow: 0 0 8px var(--color-success);


  animation: pulse 2s infinite;


}





@keyframes pulse {


  0%, 100% { opacity: 1; transform: scale(1); }


  50% { opacity: 0.6; transform: scale(0.85); }


}





.hero-title {


  font-family: var(--font-main);


  font-size: clamp(2.8rem, 6vw, 5.5rem);


  font-weight: 700;


  line-height: 1.08;


  letter-spacing: -2px;


  margin-bottom: 24px;


  animation: fadeInUp 0.6s ease 0.3s both;


}





.hero-title-gradient {


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.hero-subtitle {


  font-size: clamp(1rem, 1.8vw, 1.2rem);


  color: var(--color-text-light);


  max-width: 560px;


  margin-bottom: 40px;


  line-height: 1.75;


  animation: fadeInUp 0.6s ease 0.4s both;


}





.hero-actions {


  display: flex;


  gap: 16px;


  flex-wrap: wrap;


  animation: fadeInUp 0.6s ease 0.5s both;


}





.hero-proof {


  margin-top: 24px;


  color: var(--color-text-muted);


  font-size: 0.9rem;


  line-height: 1.5;


}





.hero-visual {


  position: absolute;


  right: 5%;


  top: 50%;


  transform: translateY(-50%);


  z-index: 2;


  width: 42vw;


  max-width: 600px;


  animation: fadeInRight 0.8s ease 0.4s both;


}





@keyframes fadeInRight {


  from { opacity: 0; transform: translateY(-50%) translateX(40px); }


  to { opacity: 1; transform: translateY(-50%) translateX(0); }


}





.hero-stats {


  display: flex;


  gap: 40px;


  margin-top: 56px;


  padding-top: 40px;


  border-top: 1px solid var(--color-border);


  animation: fadeInUp 0.6s ease 0.6s both;


}





.hero-stat-value {


  font-family: var(--font-main);


  font-size: 2.2rem;


  font-weight: 700;


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


  line-height: 1;


  margin-bottom: 4px;


}





.hero-stat-label {


  font-size: 0.82rem;


  color: var(--color-text-muted);


  text-transform: uppercase;


  letter-spacing: 1px;


}





/* ── Buttons ───────────────────────────────── */


.btn {


  display: inline-flex;


  align-items: center;


  gap: 8px;


  padding: 14px 28px;


  border-radius: var(--radius-full);


  font-size: 0.92rem;


  font-weight: 600;


  transition: all var(--transition-fast);


  position: relative;


  overflow: hidden;


  white-space: nowrap;


}





.btn::before {


  content: '';


  position: absolute;


  inset: 0;


  background: linear-gradient(rgba(255,255,255,0.1), transparent);


  opacity: 0;


  transition: opacity var(--transition-fast);


}





.btn:hover::before { opacity: 1; }





.btn-primary {


  background: var(--gradient-primary);


  color: var(--color-bg);


  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);


}





.btn-primary:hover {


  transform: translateY(-2px);


  box-shadow: 0 8px 30px rgba(0, 212, 255, 0.45);


}





.btn-outline {


  background: transparent;


  color: var(--color-text);


  border: 1.5px solid var(--color-border-hover);


}





.btn-outline:hover {


  border-color: var(--color-primary);


  color: var(--color-primary);


  background: rgba(0, 212, 255, 0.06);


  transform: translateY(-2px);


}





.btn-ghost {


  background: transparent;


  color: var(--color-primary);


  padding: 12px 0;


}





.btn-ghost:hover { gap: 12px; }





.btn-ghost svg { transition: transform var(--transition-fast); }


.btn-ghost:hover svg { transform: translateX(4px); }





.btn-lg {


  padding: 16px 36px;


  font-size: 1rem;


}





.btn-sm {


  padding: 8px 18px;


  font-size: 0.82rem;


}





.btn-icon {


  width: 44px;


  height: 44px;


  padding: 0;


  border-radius: 50%;


  display: inline-flex;


  align-items: center;


  justify-content: center;


}





/* ── Section Base ──────────────────────────── */


.section {


  padding: 120px 5%;


  position: relative;


  z-index: 1;


}





.section-sm { padding: 80px 5%; }





.container {


  max-width: 1200px;


  margin: 0 auto;


}





.section-tag {


  display: inline-flex;


  align-items: center;


  gap: 6px;


  font-family: var(--font-mono);


  font-size: 0.75rem;


  font-weight: 500;


  color: var(--color-primary);


  text-transform: uppercase;


  letter-spacing: 2px;


  margin-bottom: 16px;


}





.section-tag::before {


  content: '';


  width: 20px;


  height: 1px;


  background: var(--color-primary);


}





.section-title {


  font-family: var(--font-main);


  font-size: clamp(2rem, 3.5vw, 3rem);


  font-weight: 700;


  line-height: 1.15;


  letter-spacing: -1px;


  margin-bottom: 20px;


}





.section-title span {


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.section-subtitle {


  font-size: 1.05rem;


  color: var(--color-text-light);


  max-width: 600px;


  line-height: 1.75;


}





.section-header { margin-bottom: 64px; }


.section-header-center { text-align: center; margin: 0 auto 64px; max-width: 700px; }





/* ── Marquee ───────────────────────────────── */


.marquee-section {


  padding: 28px 0;


  background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), rgba(124, 58, 237, 0.04));


  border-top: 1px solid var(--color-border);


  border-bottom: 1px solid var(--color-border);


  overflow: hidden;


  position: relative;


  z-index: 1;


}





.marquee-track {


  display: flex;


  gap: 60px;


  animation: marqueeScroll 25s linear infinite;


  width: max-content;


}





.marquee-section:hover .marquee-track { animation-play-state: paused; }





@keyframes marqueeScroll {


  from { transform: translateX(0); }


  to { transform: translateX(-50%); }


}





.marquee-item {


  display: flex;


  align-items: center;


  gap: 12px;


  font-family: var(--font-mono);


  font-size: 0.82rem;


  color: var(--color-text-muted);


  white-space: nowrap;


  transition: color var(--transition-fast);


}





.marquee-item:hover { color: var(--color-primary); }





.marquee-item i { font-size: 1.1rem; color: var(--color-primary); }





/* ── Services Cards ────────────────────────── */


.services-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));


  gap: 24px;


}





.service-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  padding: 36px;


  position: relative;


  overflow: hidden;


  transition: all var(--transition-normal);


  cursor: pointer;


}





.service-card::before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  right: 0;


  height: 2px;


  background: var(--gradient-primary);


  transform: scaleX(0);


  transition: transform var(--transition-normal);


}





.service-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-6px);


  box-shadow: var(--shadow-glow), var(--shadow-lg);


}





.service-card:hover::before { transform: scaleX(1); }





.service-icon {


  width: 56px;


  height: 56px;


  background: var(--gradient-glow);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 1.4rem;


  color: var(--color-primary);


  margin-bottom: 24px;


  transition: all var(--transition-fast);


}





.service-card:hover .service-icon {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);


}





.service-number {


  position: absolute;


  top: 28px;


  right: 28px;


  font-family: var(--font-mono);


  font-size: 0.7rem;


  color: var(--color-text-muted);


}





.service-title {


  font-family: var(--font-main);


  font-size: 1.22rem;


  font-weight: 600;


  margin-bottom: 12px;


  color: var(--color-text);


  transition: color var(--transition-fast);


}





.service-card:hover .service-title { color: var(--color-primary); }





.service-desc {


  font-size: 0.9rem;


  color: var(--color-text-muted);


  line-height: 1.7;


  margin-bottom: 24px;


}





.service-tags {


  display: flex;


  flex-wrap: wrap;


  gap: 8px;


}





.service-tag {


  font-family: var(--font-mono);


  font-size: 0.7rem;


  padding: 4px 10px;


  background: rgba(0, 212, 255, 0.06);


  border: 1px solid rgba(0, 212, 255, 0.15);


  border-radius: var(--radius-full);


  color: var(--color-primary);


  transition: all var(--transition-fast);


}





.service-card:hover .service-tag {


  background: rgba(0, 212, 255, 0.12);


  border-color: rgba(0, 212, 255, 0.3);


}





/* ── Code Window ───────────────────────────── */


.code-window {


  background: var(--color-surface);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  overflow: hidden;


  box-shadow: var(--shadow-lg);


}





.code-window-bar {


  display: flex;


  align-items: center;


  gap: 8px;


  padding: 14px 20px;


  background: var(--color-surface2);


  border-bottom: 1px solid var(--color-border);


}





.code-dot {


  width: 12px;


  height: 12px;


  border-radius: 50%;


}





.code-dot-red { background: #ef4444; }


.code-dot-yellow { background: #f59e0b; }


.code-dot-green { background: #10b981; }





.code-window-title {


  font-family: var(--font-mono);


  font-size: 0.75rem;


  color: var(--color-text-muted);


  margin-left: auto;


  margin-right: auto;


}





.code-body {


  padding: 24px;


  font-family: var(--font-mono);


  font-size: 0.82rem;


  line-height: 1.9;


  overflow-x: auto;


}





.code-line { display: flex; gap: 16px; }


.code-ln { color: var(--color-text-muted); min-width: 20px; user-select: none; }


.kw { color: #c792ea; }


.fn { color: #82aaff; }


.st { color: #c3e88d; }


.cm { color: var(--color-text-muted); font-style: italic; }


.nu { color: #f78c6c; }


.op { color: #89ddff; }


.cl { color: #ffcb6b; }





/* ── Portfolio / Projects ──────────────────── */


.portfolio-filter {


  display: flex;


  gap: 8px;


  flex-wrap: wrap;


  margin-bottom: 40px;


}





.filter-btn {


  padding: 8px 20px;


  border-radius: var(--radius-full);


  font-size: 0.85rem;


  font-weight: 500;


  color: var(--color-text-muted);


  border: 1px solid var(--color-border);


  background: transparent;


  transition: all var(--transition-fast);


}





.filter-btn:hover,


.filter-btn.active {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);


}





.portfolio-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));


  gap: 24px;


}





.project-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  overflow: hidden;


  transition: all var(--transition-normal);


  cursor: pointer;


}





.project-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-8px);


  box-shadow: var(--shadow-lg), var(--shadow-glow);


}





.project-image {


  height: 220px;


  position: relative;


  overflow: hidden;


}





.project-image-bg {


  width: 100%;


  height: 100%;


  transition: transform var(--transition-slow);


}





.project-image-bg.portfolio-screenshot {


  display: block;


  object-fit: cover;


  object-position: top center;


}





.project-card:hover .project-image-bg { transform: scale(1.06); }





.project-image-overlay {


  position: absolute;


  inset: 0;


  background: linear-gradient(to top, var(--color-surface) 0%, transparent 60%);


  display: flex;


  align-items: flex-end;


  padding: 20px;


  opacity: 0;


  transition: opacity var(--transition-normal);


}





.project-card:hover .project-image-overlay { opacity: 1; }





.project-links {


  display: flex;


  gap: 8px;


}





.project-link-btn {


  padding: 8px 16px;


  border-radius: var(--radius-full);


  font-size: 0.78rem;


  font-weight: 600;


  display: flex;


  align-items: center;


  gap: 6px;


  transition: all var(--transition-fast);


}





.project-link-btn.primary {


  background: var(--gradient-primary);


  color: var(--color-bg);


}





.project-link-btn.outline {


  background: rgba(5, 8, 16, 0.8);


  border: 1px solid var(--color-border-hover);


  color: var(--color-text);


}





.project-info { padding: 24px; }





.project-category {


  font-family: var(--font-mono);


  font-size: 0.72rem;


  color: var(--color-primary);


  text-transform: uppercase;


  letter-spacing: 1.5px;


  margin-bottom: 8px;


}





.project-title {


  font-family: var(--font-main);


  font-size: 1.15rem;


  font-weight: 600;


  margin-bottom: 10px;


  transition: color var(--transition-fast);


}





.project-card:hover .project-title { color: var(--color-primary); }





.project-desc {


  font-size: 0.875rem;


  color: var(--color-text-muted);


  line-height: 1.65;


  margin-bottom: 16px;


}





.project-tech-stack {


  display: flex;


  flex-wrap: wrap;


  gap: 6px;


}





.tech-badge {


  font-family: var(--font-mono);


  font-size: 0.68rem;


  padding: 3px 9px;


  background: var(--color-surface2);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-full);


  color: var(--color-text-muted);


}





/* ── Stats Section ─────────────────────────── */


.stats-section {


  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);


  border-top: 1px solid var(--color-border);


  border-bottom: 1px solid var(--color-border);


  padding: 80px 5%;


}





.stats-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: 32px;


}





.stat-item {


  text-align: center;


  padding: 32px 20px;


}





.stat-number {


  font-family: var(--font-main);


  font-size: clamp(2.5rem, 4vw, 4rem);


  font-weight: 800;


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


  line-height: 1;


  margin-bottom: 8px;


}





.stat-plus { font-size: 0.6em; vertical-align: super; }





.stat-label {


  font-size: 0.9rem;


  color: var(--color-text-muted);


  text-transform: uppercase;


  letter-spacing: 1px;


}





/* ── Team Cards ────────────────────────────── */


.team-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));


  gap: 24px;


}





.team-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  padding: 32px 24px;


  text-align: center;


  transition: all var(--transition-normal);


  position: relative;


  overflow: hidden;


}





.team-card::before {


  content: '';


  position: absolute;


  bottom: 0;


  left: 0;


  right: 0;


  height: 3px;


  background: var(--gradient-primary);


  transform: scaleX(0);


  transition: transform var(--transition-normal);


}





.team-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-6px);


  box-shadow: var(--shadow-glow);


}





.team-card:hover::before { transform: scaleX(1); }





.team-avatar-wrapper {


  position: relative;


  width: 90px;


  height: 90px;


  margin: 0 auto 20px;


}





.team-avatar {


  width: 90px;


  height: 90px;


  border-radius: 50%;


  border: 3px solid var(--color-border);


  object-fit: cover;


  transition: border-color var(--transition-fast);


}





.team-card:hover .team-avatar { border-color: var(--color-primary); }





.team-avatar-ring {


  position: absolute;


  inset: -6px;


  border-radius: 50%;


  border: 2px dashed rgba(0, 212, 255, 0.25);


  animation: spinSlow 10s linear infinite;


}





@keyframes spinSlow {


  from { transform: rotate(0deg); }


  to { transform: rotate(360deg); }


}





.team-name {


  font-family: var(--font-main);


  font-size: 1.1rem;


  font-weight: 600;


  margin-bottom: 4px;


}





.team-role {


  font-family: var(--font-mono);


  font-size: 0.78rem;


  color: var(--color-primary);


  margin-bottom: 16px;


}





.team-bio {


  font-size: 0.85rem;


  color: var(--color-text-muted);


  line-height: 1.65;


  margin-bottom: 20px;


}





.team-social {


  display: flex;


  justify-content: center;


  gap: 10px;


}





.social-link {


  width: 36px;


  height: 36px;


  border-radius: 50%;


  background: var(--color-surface2);


  border: 1px solid var(--color-border);


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 0.85rem;


  color: var(--color-text-muted);


  transition: all var(--transition-fast);


}





.social-link:hover {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


  transform: translateY(-3px);


  box-shadow: 0 6px 15px rgba(0, 212, 255, 0.3);


}





/* ── Process Grid ──────────────────────────── */


.process-grid {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 80px;


  align-items: center;


}





/* ── Process Timeline ──────────────────────── */


.process-timeline {


  position: relative;


  display: flex;


  flex-direction: column;


  gap: 0;


}





.process-timeline::before {


  content: '';


  position: absolute;


  left: 35px;


  top: 0;


  bottom: 0;


  width: 1px;


  background: linear-gradient(to bottom, transparent, var(--color-primary), transparent);


}





.process-step {


  display: grid;


  grid-template-columns: 70px 1fr;


  gap: 24px;


  padding: 24px 0;


  position: relative;


}





.process-step-num {


  width: 70px;


  height: 70px;


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-family: var(--font-mono);


  font-size: 0.82rem;


  font-weight: 600;


  color: var(--color-primary);


  position: relative;


  z-index: 1;


  flex-shrink: 0;


  transition: all var(--transition-normal);


}





.process-step:hover .process-step-num {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


  box-shadow: var(--shadow-glow);


}





.process-step-content {


  padding: 16px 0;


}





.process-step-title {


  font-family: var(--font-main);


  font-size: 1.1rem;


  font-weight: 600;


  margin-bottom: 8px;


}





.process-step-desc {


  font-size: 0.88rem;


  color: var(--color-text-muted);


  line-height: 1.7;


}





/* ── Testimonials ──────────────────────────── */


.testimonials-slider {


  position: relative;


  overflow: hidden;


}





.testimonials-track {


  display: flex;


  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);


}





.testimonial-card {


  min-width: 100%;


  padding: 0 4px;


  box-sizing: border-box;


}





.testimonial-inner {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  padding: 28px 32px;


  max-width: 680px;


  margin: 0 auto;


  position: relative;


}





.testimonial-inner::before {


  content: '"';


  position: absolute;


  top: 12px;


  left: 24px;


  font-size: 4rem;


  line-height: 1;


  color: rgba(0, 212, 255, 0.06);


  font-family: serif;


  pointer-events: none;


}





.testimonial-text {


  font-size: 1rem;


  color: var(--color-text-light);


  line-height: 1.75;


  margin-bottom: 20px;


  padding-top: 8px;


}





.testimonial-author {


  display: flex;


  align-items: center;


  gap: 12px;


  flex-wrap: nowrap;


}





.testimonial-avatar {


  width: 44px;


  height: 44px;


  border-radius: 50%;


  object-fit: cover;


  border: 2px solid var(--color-border);


  flex-shrink: 0;


}





.testimonial-name {


  font-family: var(--font-main);


  font-weight: 600;


  font-size: 0.9rem;


}





.testimonial-position {


  font-size: 0.75rem;


  color: var(--color-text-muted);


  display: flex;


  align-items: center;


  gap: 4px;


  flex-wrap: wrap;


}





.testimonial-stars {


  margin-left: auto;


  color: #fbbc04;


  font-size: 1rem;


  flex-shrink: 0;


  letter-spacing: 2px;


}





.t-avatar {


  width: 44px;


  height: 44px;


  min-width: 44px;


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-weight: 700;


  color: #fff;


  font-size: 0.9rem;


  flex-shrink: 0;


}





.t-info {


  flex: 1;


  min-width: 0;


  overflow: hidden;


}





.t-info .testimonial-name {


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


}





.t-info .testimonial-position {


  display: flex;


  align-items: center;


  gap: 4px;


  flex-wrap: nowrap;


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


}





.slider-controls {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 16px;


  margin-top: 32px;


}





.slider-btn {


  width: 44px;


  height: 44px;


  border-radius: 50%;


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  color: var(--color-text);


  display: flex;


  align-items: center;


  justify-content: center;


  transition: all var(--transition-fast);


  font-size: 0.9rem;


}





.slider-btn:hover {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


}





.slider-dots {


  display: flex;


  gap: 8px;


}





.slider-dot {


  width: 8px;


  height: 8px;


  border-radius: 50%;


  background: var(--color-border-hover);


  cursor: pointer;


  transition: all var(--transition-fast);


}





.slider-dot.active {


  background: var(--color-primary);


  width: 24px;


  border-radius: 4px;


  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);


}





/* ── Contact Form ──────────────────────────── */


.contact-grid {


  display: grid;


  grid-template-columns: 1fr 1.5fr;


  gap: 64px;


  align-items: start;


}





.contact-info-items {


  display: flex;


  flex-direction: column;


  gap: 24px;


  margin-top: 40px;


}





.contact-info-item {


  display: flex;


  gap: 16px;


  align-items: flex-start;


}





.contact-info-icon {


  width: 48px;


  height: 48px;


  background: var(--gradient-glow);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--color-primary);


  font-size: 1.1rem;


  flex-shrink: 0;


}





.contact-info-title {


  font-size: 0.8rem;


  color: var(--color-text-muted);


  text-transform: uppercase;


  letter-spacing: 1px;


  margin-bottom: 4px;


}





.contact-info-value {


  font-weight: 500;


  color: var(--color-text);


}





.contact-form {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-xl);


  padding: 44px;


}





.form-row {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 20px;


  margin-bottom: 20px;


}





.form-group {


  display: flex;


  flex-direction: column;


  gap: 8px;


  margin-bottom: 20px;


}





.form-group:last-child { margin-bottom: 0; }





.form-label {


  font-size: 0.82rem;


  font-weight: 500;


  color: var(--color-text-light);


  text-transform: uppercase;


  letter-spacing: 0.5px;


}





.form-control {


  background: var(--color-surface2);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  padding: 14px 18px;


  font-size: 0.92rem;


  color: var(--color-text);


  transition: all var(--transition-fast);


  outline: none;


  width: 100%;


}





.form-control:focus {


  border-color: var(--color-primary);


  background: rgba(0, 212, 255, 0.04);


  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);


}





.form-control::placeholder { color: var(--color-text-muted); }





textarea.form-control {


  resize: vertical;


  min-height: 140px;


  font-family: inherit;


}





.form-select {


  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");


  background-repeat: no-repeat;


  background-position: right 14px center;


  background-size: 16px;


  appearance: none;


  -webkit-appearance: none;


  cursor: pointer;


  color-scheme: dark;


}





.form-select option {


  background: #0d1117;


  color: #e2e8f0;


}





/* ── FAQ Accordion ─────────────────────────── */


.faq-list {


  display: flex;


  flex-direction: column;


  gap: 12px;


}





.faq-item {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  overflow: hidden;


  transition: border-color var(--transition-fast);


}





.faq-item.open { border-color: var(--color-border-hover); }





.faq-header {


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: 20px 24px;


  cursor: pointer;


  gap: 16px;


}





.faq-question {


  font-weight: 500;


  font-size: 0.95rem;


  color: var(--color-text);


}





.faq-icon {


  width: 28px;


  height: 28px;


  border-radius: 50%;


  background: rgba(0, 212, 255, 0.08);


  border: 1px solid var(--color-border);


  display: flex;


  align-items: center;


  justify-content: center;


  flex-shrink: 0;


  color: var(--color-primary);


  transition: all var(--transition-fast);


  font-size: 0.75rem;


}





.faq-item.open .faq-icon {


  background: var(--gradient-primary);


  color: var(--color-bg);


  border-color: transparent;


  transform: rotate(45deg);


}





.faq-body {


  max-height: 0;


  overflow: hidden;


  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);


}





.faq-body.open { max-height: 400px; }





.faq-answer {


  padding: 0 24px 20px;


  font-size: 0.88rem;


  color: var(--color-text-muted);


  line-height: 1.75;


}





/* ── CTA Section ───────────────────────────── */


.cta-section {


  padding: 100px 5%;


  position: relative;


  overflow: hidden;


}





.cta-inner {


  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-xl);


  padding: 80px;


  text-align: center;


  position: relative;


  overflow: hidden;


}





.cta-inner::before {


  content: '';


  position: absolute;


  top: -100px;


  left: 50%;


  transform: translateX(-50%);


  width: 400px;


  height: 400px;


  background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 70%);


  pointer-events: none;


}





.cta-title {


  font-family: var(--font-main);


  font-size: clamp(1.8rem, 3.5vw, 3rem);


  font-weight: 700;


  letter-spacing: -1px;


  margin-bottom: 16px;


}





.cta-subtitle {


  font-size: 1rem;


  color: var(--color-text-muted);


  margin-bottom: 40px;


  max-width: 500px;


  margin-left: auto;


  margin-right: auto;


}





.cta-actions {


  display: flex;


  gap: 16px;


  justify-content: center;


  flex-wrap: wrap;


}





/* ── Footer ────────────────────────────────── */


footer {


  background: var(--color-surface);


  border-top: 1px solid var(--color-border);


  padding: 80px 5% 32px;


  position: relative;


  z-index: 1;


}





.footer-grid {


  display: grid;


  grid-template-columns: 2fr 1fr 1fr 1fr;


  gap: 48px;


  margin-bottom: 64px;


}





.footer-brand-desc {


  font-size: 0.88rem;


  color: var(--color-text-muted);


  line-height: 1.75;


  margin: 16px 0 24px;


  max-width: 300px;


}





.footer-social {


  display: flex;


  gap: 10px;


}





.footer-col-title {


  font-family: var(--font-main);


  font-size: 0.85rem;


  font-weight: 600;


  text-transform: uppercase;


  letter-spacing: 1.5px;


  color: var(--color-text-light);


  margin-bottom: 20px;


}





.footer-links {


  display: flex;


  flex-direction: column;


  gap: 12px;


}





.footer-link {


  font-size: 0.88rem;


  color: var(--color-text-muted);


  transition: color var(--transition-fast);


  display: flex;


  align-items: center;


  gap: 8px;


}





.footer-link:hover { color: var(--color-primary); }


.footer-link:hover::before {


  content: none;


  display: inline;


}





.footer-bottom {


  border-top: 1px solid var(--color-border);


  padding-top: 28px;


  display: flex;


  align-items: center;


  justify-content: space-between;


  flex-wrap: wrap;


  gap: 16px;


}





.footer-bottom-text {


  font-size: 0.82rem;


  color: var(--color-text-muted);


}





.footer-bottom-links {


  display: flex;


  gap: 24px;


}





.footer-bottom-link {


  font-size: 0.82rem;


  color: var(--color-text-muted);


  transition: color var(--transition-fast);


}





.footer-bottom-link:hover { color: var(--color-primary); }





/* ── About Page ────────────────────────────── */


.page-hero {


  min-height: 55vh;


  display: flex;


  align-items: center;


  padding: calc(var(--nav-height) + 60px) 5% 80px;


  position: relative;


  overflow: hidden;


}





.contact-page-hero {


  min-height: 0;


  padding: calc(var(--nav-height) + 28px) 5% 24px;


}





.contact-page-hero .hero-badge { margin-bottom: 16px; }


.contact-page-hero .hero-title { margin-bottom: 12px; }


.contact-page-hero .hero-subtitle { margin-bottom: 0; }


.contact-page-section { padding-top: 20px; }





.contact-error {


  margin-top: 14px;


  color: #ffb8ad;


  line-height: 1.5;


}





.page-hero::before {


  content: '';


  position: absolute;


  inset: 0;


  background: var(--gradient-hero);


  z-index: 1;


}





.page-hero-content {


  position: relative;


  z-index: 2;


  max-width: 700px;


}





.page-hero-grid {


  position: absolute;


  inset: 0;


  background-image:


    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),


    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);


  background-size: 60px 60px;


  z-index: 1;


  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);


}





.skills-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


  gap: 16px;


}





.skill-item {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  padding: 20px;


  transition: all var(--transition-fast);


}





.skill-item:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-3px);


}





.skill-header {


  display: flex;


  align-items: center;


  justify-content: space-between;


  margin-bottom: 12px;


}





.skill-name {


  font-size: 0.88rem;


  font-weight: 500;


  display: flex;


  align-items: center;


  gap: 8px;


}





.skill-name i { color: var(--color-primary); }





.skill-percent {


  font-family: var(--font-mono);


  font-size: 0.78rem;


  color: var(--color-primary);


}





.skill-bar {


  height: 4px;


  background: var(--color-surface2);


  border-radius: 2px;


  overflow: hidden;


}





.skill-bar-fill {


  height: 100%;


  background: var(--gradient-primary);


  border-radius: 2px;


  width: 0;


  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);


}





.values-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));


  gap: 24px;


}





.value-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  padding: 32px;


  text-align: center;


  transition: all var(--transition-normal);


}





.value-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-6px);


  box-shadow: var(--shadow-glow);


}





.value-icon {


  font-size: 2rem;


  margin-bottom: 16px;


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.value-title {


  font-family: var(--font-main);


  font-size: 1rem;


  font-weight: 600;


  margin-bottom: 8px;


}





.value-desc {


  font-size: 0.85rem;


  color: var(--color-text-muted);


  line-height: 1.65;


}





/* ── Pricing ───────────────────────────────── */


.pricing-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: 20px;


  align-items: start;


}





.pricing-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  padding: 40px;


  position: relative;


  transition: all var(--transition-normal);


}





.pricing-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-8px);


  box-shadow: var(--shadow-lg);


}





.pricing-card.featured {


  border-color: rgba(0, 212, 255, 0.3);


  background: linear-gradient(145deg, rgba(0, 212, 255, 0.06) 0%, #111827 100%);


  transform: scale(1.04);


  box-shadow: var(--shadow-glow);


}





.pricing-card.featured:hover { transform: scale(1.04) translateY(-8px); }





.pricing-badge {


  position: absolute;


  top: -14px;


  left: 50%;


  transform: translateX(-50%);


  background: var(--gradient-primary);


  color: var(--color-bg);


  font-size: 0.72rem;


  font-weight: 700;


  padding: 4px 16px;


  border-radius: var(--radius-full);


  text-transform: uppercase;


  letter-spacing: 1.5px;


  white-space: nowrap;


}





.pricing-plan {


  font-family: var(--font-mono);


  font-size: 0.78rem;


  color: var(--color-primary);


  text-transform: uppercase;


  letter-spacing: 2px;


  margin-bottom: 8px;


}





.pricing-name {


  font-family: var(--font-main);


  font-size: 1.5rem;


  font-weight: 700;


  margin-bottom: 24px;


}





.pricing-price {


  margin-bottom: 32px;


}





.pricing-amount {


  font-family: var(--font-main);


  font-size: 3rem;


  font-weight: 800;


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


  line-height: 1;


}





.pricing-currency {


  font-size: 1.5rem;


  vertical-align: super;


}





.pricing-period {


  font-size: 0.85rem;


  color: var(--color-text-muted);


  margin-top: 4px;


}





.pricing-features {


  display: flex;


  flex-direction: column;


  gap: 12px;


  margin-bottom: 32px;


}





.pricing-feature {


  display: flex;


  align-items: center;


  gap: 10px;


  font-size: 0.88rem;


  color: var(--color-text-light);


}





.pricing-feature i {


  color: var(--color-success);


  font-size: 0.75rem;


}





.pricing-feature.disabled {


  color: var(--color-text-muted);


  text-decoration: line-through;


}





.pricing-feature.disabled i { color: var(--color-text-muted); }





/* ── Blog Cards ────────────────────────────── */


.blog-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));


  gap: 24px;


}





.blog-card {


  background: var(--gradient-card);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-lg);


  overflow: hidden;


  transition: all var(--transition-normal);


  cursor: pointer;


}





.blog-card:hover {


  border-color: var(--color-border-hover);


  transform: translateY(-6px);


  box-shadow: var(--shadow-lg);


}





.blog-image {


  height: 200px;


  overflow: hidden;


}





.blog-img-bg {


  width: 100%;


  height: 100%;


  transition: transform var(--transition-slow);


}





.blog-card:hover .blog-img-bg { transform: scale(1.06); }





.blog-content { padding: 24px; }





.blog-meta {


  display: flex;


  align-items: center;


  gap: 12px;


  margin-bottom: 12px;


  font-size: 0.78rem;


  color: var(--color-text-muted);


}





.blog-category {


  background: rgba(0, 212, 255, 0.08);


  border: 1px solid rgba(0, 212, 255, 0.15);


  border-radius: var(--radius-full);


  padding: 2px 10px;


  color: var(--color-primary);


  font-family: var(--font-mono);


  font-size: 0.7rem;


}





.blog-title {


  font-family: var(--font-main);


  font-size: 1.1rem;


  font-weight: 600;


  line-height: 1.45;


  margin-bottom: 10px;


  transition: color var(--transition-fast);


}





.blog-card:hover .blog-title { color: var(--color-primary); }





.blog-excerpt {


  font-size: 0.85rem;


  color: var(--color-text-muted);


  line-height: 1.65;


  margin-bottom: 16px;


}





.blog-footer {


  display: flex;


  align-items: center;


  gap: 10px;


  padding-top: 16px;


  border-top: 1px solid var(--color-border);


}





.blog-author-avatar {


  width: 32px;


  height: 32px;


  border-radius: 50%;


  object-fit: cover;


}





.blog-author-name {


  font-size: 0.82rem;


  font-weight: 500;


}





.blog-read-time {


  margin-left: auto;


  font-size: 0.78rem;


  color: var(--color-text-muted);


}





/* ── Toast Notification ────────────────────── */


.toast {


  position: fixed;


  bottom: 32px;


  right: 32px;


  background: var(--color-surface2);


  border: 1px solid var(--color-border);


  border-radius: var(--radius-md);


  padding: 16px 20px;


  display: flex;


  align-items: center;


  gap: 12px;


  z-index: 5000;


  transform: translateY(80px);


  opacity: 0;


  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);


  max-width: 360px;


  box-shadow: var(--shadow-lg);


}





.toast.show {


  transform: translateY(0);


  opacity: 1;


}





.toast-icon {


  width: 36px;


  height: 36px;


  border-radius: 50%;


  background: rgba(16, 185, 129, 0.1);


  border: 1px solid rgba(16, 185, 129, 0.25);


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--color-success);


  flex-shrink: 0;


  font-size: 0.9rem;


}





.toast-text {


  flex: 1;


}





.toast-title {


  font-weight: 600;


  font-size: 0.9rem;


  margin-bottom: 2px;


}





.toast-msg {


  font-size: 0.8rem;


  color: var(--color-text-muted);


}





.toast-close {


  color: var(--color-text-muted);


  font-size: 0.8rem;


  cursor: pointer;


  padding: 4px;


}





/* ── Mobile Menu ───────────────────────────── */


.mobile-menu {


  position: fixed;


  inset: 0;


  background: rgba(5, 8, 16, 0.97);


  backdrop-filter: blur(20px);


  z-index: 999;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  gap: 8px;


  transform: translateX(100%);


  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);


}





.mobile-menu.open { transform: translateX(0); }





.mobile-nav-link {


  font-family: var(--font-main);


  font-size: 2rem;


  font-weight: 700;


  color: var(--color-text-light);


  padding: 12px 32px;


  border-radius: var(--radius-lg);


  transition: all var(--transition-fast);


  position: relative;


}





.mobile-nav-link:hover,


.mobile-nav-link.active {


  color: var(--color-primary);


}





/* ── Back to Top ───────────────────────────── */


.back-to-top {


  position: fixed;


  bottom: 32px;


  right: 32px;


  width: 48px;


  height: 48px;


  background: var(--gradient-primary);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--color-bg);


  font-size: 1rem;


  z-index: 100;


  opacity: 0;


  transform: translateY(16px);


  transition: all var(--transition-normal);


  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35);


  cursor: pointer;


}





.back-to-top.visible {


  opacity: 1;


  transform: translateY(0);


}





.back-to-top:hover {


  transform: translateY(-4px);


  box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5);


}





/* ── Animations ────────────────────────────── */


@keyframes fadeInUp {


  from { opacity: 0; transform: translateY(30px); }


  to { opacity: 1; transform: translateY(0); }


}





@keyframes fadeIn {


  from { opacity: 0; }


  to { opacity: 1; }


}





@keyframes float {


  0%, 100% { transform: translateY(0px); }


  50% { transform: translateY(-16px); }


}





@keyframes scaleIn {


  from { opacity: 0; transform: scale(0.9); }


  to { opacity: 1; transform: scale(1); }


}





.reveal {


  opacity: 0;


  transform: translateY(40px);


  transition: opacity 0.7s ease, transform 0.7s ease;


}





.reveal.visible {


  opacity: 1;


  transform: translateY(0);


}





.reveal-left {


  opacity: 0;


  transform: translateX(-40px);


  transition: opacity 0.7s ease, transform 0.7s ease;


}





.reveal-left.visible {


  opacity: 1;


  transform: translateX(0);


}





.reveal-right {


  opacity: 0;


  transform: translateX(40px);


  transition: opacity 0.7s ease, transform 0.7s ease;


}





.reveal-right.visible {


  opacity: 1;


  transform: translateX(0);


}





.stagger-1 { transition-delay: 0.1s; }


.stagger-2 { transition-delay: 0.2s; }


.stagger-3 { transition-delay: 0.3s; }


.stagger-4 { transition-delay: 0.4s; }


.stagger-5 { transition-delay: 0.5s; }


.stagger-6 { transition-delay: 0.6s; }





/* ── Glow Effects ──────────────────────────── */


.glow-primary {


  box-shadow: var(--shadow-glow);


}





.glow-secondary {


  box-shadow: var(--shadow-glow-purple);


}





.subs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }





/* ── Responsive ────────────────────────────── */


@media (max-width: 1100px) {


  .hero-visual { display: none; }


  .footer-grid { grid-template-columns: 1fr 1fr; }


  .stats-grid { grid-template-columns: repeat(2, 1fr); }


  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; margin: 0 auto; }


  .subs-grid { grid-template-columns: 1fr; gap:16px; }


  .pricing-card.featured { transform: scale(1); }


  .pricing-card.featured:hover { transform: translateY(-8px); }


}





.service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:100px; }


.krono-os-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px; max-width:760px; margin-left:auto; margin-right:auto; }





@media (max-width: 768px) {


  :root { --nav-height: 70px; }





  /* Empêche tout débordement horizontal */


  html, body { overflow-x: hidden; max-width: 100vw; }


  * { box-sizing: border-box; }





  /* Nav burger */


  .nav-menu { display: none; }


  .nav-hamburger { display: flex; }





  .section { padding: 60px 16px; }


  .contact-page-hero { padding: calc(var(--nav-height) + 20px) 16px 16px; }


  .contact-page-section { padding-top: 16px; }





  /* Hero */


  .hero { padding: calc(var(--nav-height) + 40px) 16px 60px; }


  .hero-title { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -1px; }


  .hero-subtitle { font-size: 0.95rem; }


  .hero-actions { flex-direction: column; gap: 12px; }


  .hero-actions .btn { width: 100%; justify-content: center; }


  .hero-stats { flex-wrap: wrap; gap: 20px; margin-top: 36px; padding-top: 28px; }


  .hero-stat { min-width: calc(50% - 10px); }


  .hero-stat-value { font-size: 1.8rem; }





  /* Code window / hero visual */


  .code-window { display: none; }





  /* Sections grids */


  .contact-grid { grid-template-columns: 1fr; gap: 32px; }


  .form-row { grid-template-columns: 1fr; }


  .contact-form { padding: 20px; }


  .cta-inner { padding: 36px 20px; }


  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }


  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }





  /* Testimonials */


  .testimonial-inner { padding: 20px; max-width: 100%; }


  .testimonial-author { gap: 10px; }


  .testimonial-author > div:first-child { width: 40px !important; height: 40px !important; font-size: 0.9rem !important; flex-shrink: 0; }





  /* Cacher back-to-top sur mobile */


  .back-to-top { display: none !important; }





  .cursor-dot, .cursor-ring { display: none; }





  /* Process : titre en haut, étapes en dessous centrées */


  .process-grid {


    grid-template-columns: 1fr;


    gap: 36px;


  }


  .process-grid .reveal-left {


    text-align: center;


  }


  .process-grid .reveal-left .section-tag {


    margin: 0 auto 12px;


  }


  .process-grid .reveal-left .btn {


    margin: 0 auto;


  }


  .process-timeline {


    max-width: 480px;


    margin: 0 auto;


    width: 100%;


  }





  /* About grids */


  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }





  /* FAQ */


  .faq-grid, [style*="grid-template-columns: 1fr 1.5fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }





  /* Services détaillés (page services.html, blocs 01/02) : le code-window est


     caché sur mobile mais le grid restait en 1fr 1fr, ce qui collait le texte


     dans la colonne de gauche au lieu de prendre toute la largeur. */


  .service-detail-grid { grid-template-columns: 1fr; text-align: center; }


  .service-detail-grid .service-icon { margin-left: auto; margin-right: auto; }


  .service-detail-grid ul { align-items: center; }


  .service-detail-grid ul li { justify-content: center; }





  /* Cartes Krono OS (services.html) : forcées en 2 colonnes sans règle


     mobile, la 2e carte débordait de l'écran. */


  .krono-os-grid { grid-template-columns: 1fr; max-width: 100%; }





  /* Article à la une du blog : layout inline en 2 colonnes sans override


     mobile, débordait de l'écran. */


  #featured-article { grid-template-columns: 1fr !important; min-height: auto !important; }


  #featured-article > div:first-child { min-height: 180px !important; font-size: 4rem !important; }


  #featured-article > div:last-child { padding: 28px !important; }


}





@media (max-width: 600px) {


  .footer-grid { grid-template-columns: 1fr; }


  .stats-grid { grid-template-columns: repeat(2, 1fr); }


  .portfolio-grid { grid-template-columns: 1fr; }


  .blog-grid { grid-template-columns: 1fr; }


  .services-grid { grid-template-columns: 1fr; }


  .pricing-grid { grid-template-columns: 1fr; }


  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }


  .btn-lg { padding: 12px 20px; font-size: 0.9rem; }


  .hero-badge { font-size: 0.7rem; padding: 5px 12px; }


  /* Stats hero en 2 colonnes */


  .hero-stat { min-width: calc(50% - 10px); }


}





/* ── Utility ───────────────────────────────── */


.text-gradient {


  background: var(--gradient-primary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}





.text-center { text-align: center; }


.text-muted { color: var(--color-text-muted); }


.mt-auto { margin-top: auto; }


.flex { display: flex; }


.flex-center { display: flex; align-items: center; justify-content: center; }


.gap-8 { gap: 8px; }


.gap-16 { gap: 16px; }


.gap-24 { gap: 24px; }


.w-full { width: 100%; }





.mobile-call-cta { display:none; }


@media (max-width:700px) {


  .mobile-call-cta { display:flex; position:fixed; right:16px; bottom:16px; z-index:1000; width:48px; height:48px; align-items:center; justify-content:center; border-radius:50%; background:var(--color-primary); color:#041018; box-shadow:0 8px 24px rgba(0,212,255,.28); font-size:1.1rem; }


}





.booking-calendar { margin: 18px 0 22px; padding: 18px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(8, 20, 32, .55); }


.booking-calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; color:var(--color-text); }


.booking-legend { display:flex; align-items:center; gap:6px; color:var(--color-text-muted); font-size:.78rem; font-weight:400; }


.booking-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:8px; }


.booking-dot-free { background:#86efac; }.booking-dot-busy { background:#f87171; }


.booking-days { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }


.booking-day, .booking-slot { border:1px solid var(--color-border); background:rgba(15, 31, 47, .8); color:var(--color-text-muted); cursor:pointer; transition:border-color .2s, background .2s, color .2s; }


.booking-day { min-height:68px; padding:8px 4px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }


.booking-day span, .booking-day small, .booking-slot small { font-size:.72rem; text-transform:capitalize; }.booking-day strong, .booking-slot strong { color:var(--color-text); font-size:1rem; }


.booking-day:hover, .booking-day.is-selected, .booking-slot-available:hover, .booking-slot.is-selected { border-color:var(--color-primary); background:rgba(0, 212, 255, .12); color:var(--color-text); }


.booking-slots { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:16px; }


.booking-slot { min-height:52px; padding:7px 5px; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }


.booking-slot-booked, .booking-slot-blocked { background:rgba(127, 29, 29, .28); border-color:rgba(248, 113, 113, .65); color:#fca5a5; cursor:not-allowed; }


.booking-slot-booked strong, .booking-slot-blocked strong { color:#fca5a5; text-decoration:line-through; }.booking-slot-booked small, .booking-slot-blocked small { color:#f87171; }


.booking-empty { margin:0; padding:16px 4px; color:var(--color-text-muted); font-size:.9rem; }





/* ── Présentation vidéo ────────────────────── */


.presentation-section {


  overflow: hidden;


  scroll-margin-top: calc(var(--nav-height) + 16px);


  background: linear-gradient(180deg, transparent 0%, rgba(8, 13, 26, 0.46) 50%, transparent 100%);


}





.presentation-section::before {


  content: '';


  position: absolute;


  top: 50%;


  right: -220px;


  width: min(56vw, 680px);


  aspect-ratio: 1;


  transform: translateY(-50%);


  background: radial-gradient(circle, rgba(0, 212, 255, 0.09), rgba(124, 58, 237, 0.045) 42%, transparent 70%);


  pointer-events: none;


}





.presentation-layout {


  position: relative;


  display: grid;


  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);


  align-items: center;


  gap: clamp(36px, 6vw, 84px);


}





.presentation-copy {


  max-width: 440px;


}





.presentation-copy .section-title {


  margin-bottom: 18px;


}





.presentation-copy .section-subtitle {


  margin-bottom: 28px;


}





.presentation-cta {


  display: inline-flex;


  align-items: center;


  gap: 10px;


}





.presentation-media {


  min-width: 0;


}





.presentation-frame {


  position: relative;


  isolation: isolate;


  padding: 9px;


  border: 1px solid rgba(0, 212, 255, 0.22);


  border-radius: 26px;


  background: linear-gradient(145deg, rgba(13, 20, 38, 0.96), rgba(8, 13, 26, 0.96));


  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4), 0 0 42px rgba(0, 212, 255, 0.08);


}





.presentation-frame::before {


  content: '';


  position: absolute;


  z-index: -1;


  inset: 12% -8% -10%;


  border-radius: inherit;


  background: linear-gradient(115deg, rgba(0, 212, 255, 0.16), rgba(124, 58, 237, 0.18));


  filter: blur(34px);


  opacity: 0.62;


  pointer-events: none;


}





.presentation-video {


  display: block;


  width: 100%;


  aspect-ratio: 16 / 9;


  border-radius: 17px;


  background: #030712;


  object-fit: contain;


}





.presentation-caption {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 16px;


  padding: 15px 8px 0;


  color: var(--color-text-muted);


  font-size: 0.78rem;


}





.presentation-caption-title {


  display: inline-flex;


  align-items: center;


  gap: 9px;


  color: var(--color-text-light);


  font-weight: 500;


}





.presentation-caption-title i {


  color: var(--color-primary);


  font-size: 0.9rem;


}





.presentation-caption-note {


  font-family: var(--font-mono);


  font-size: 0.68rem;


  letter-spacing: 0.04em;


  text-align: right;


}





@media (max-width: 767px) {


  .presentation-section { padding-top: 72px; padding-bottom: 72px; }


  .presentation-section::before { width: 100vw; right: -35vw; top: 58%; }


  .presentation-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }


  .presentation-copy { max-width: 540px; margin: 0 auto; text-align: center; }


  .presentation-copy .section-tag { justify-content: center; }


  .presentation-copy .section-title { font-size: clamp(2rem, 8vw, 2.6rem); }


  .presentation-copy .section-subtitle { margin: 0 auto 22px; font-size: 0.95rem; }


  .presentation-media { width: 100%; max-width: 420px; margin: 0 auto; }


  .presentation-frame { padding: 7px; border-radius: 22px; }


  .presentation-video { aspect-ratio: 9 / 16; border-radius: 15px; }


  .presentation-caption { padding: 12px 4px 0; font-size: 0.72rem; }


}





@media (max-width: 390px) {


  .presentation-caption-note { font-size: 0.62rem; letter-spacing: 0; }


}


@media(max-width:600px){ .booking-calendar-heading{align-items:flex-start;flex-direction:column}.booking-days{grid-template-columns:repeat(4, minmax(0, 1fr));}.booking-slots{grid-template-columns:repeat(3, minmax(0, 1fr));} }





/* ── Noise Texture ─────────────────────────── */


body::after {


  content: '';


  position: fixed;


  inset: 0;


  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");


  pointer-events: none;


  z-index: 9998;


  opacity: 0.4;


}





/* Audit 10 octobre 2026: accessibility, offer clarity and stable content. */


.skip-link{position:fixed;left:16px;top:-100px;z-index:20000;padding:12px 18px;background:#e2e8f0;color:#050810;border-radius:6px}.skip-link:focus{top:12px}


:focus-visible{outline:3px solid #00d4ff;outline-offset:4px}.form-control:focus-visible{outline-offset:2px}


[id]{scroll-margin-top:100px}.compact-hero{min-height:38vh;padding-bottom:32px}.compact-hero .hero-title{font-size:clamp(2rem,5vw,4rem)}


.creation-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.creation-grid .pricing-amount{font-size:2.8rem}


.cost-note,.privacy-notice{color:#b5c4d8;font-size:.9rem;line-height:1.75;margin:20px 0}.privacy-notice a,.cost-note a,.case-link{color:#00d4ff;text-decoration:underline;text-underline-offset:3px}


.cost-note strong{color:#e2e8f0}.service-card .btn{margin-top:18px}.table-scroll{overflow:auto;margin:24px 0;border:1px solid var(--color-border);border-radius:12px}.comparison-table{width:100%;border-collapse:collapse;min-width:680px;text-align:left}.comparison-table caption{text-align:left;padding:16px;color:#b5c4d8}.comparison-table th,.comparison-table td{padding:16px;border-bottom:1px solid #334155}.comparison-table th{color:#e2e8f0}.comparison-table a{color:#00d4ff;text-decoration:underline}.comparison-table small{color:#b5c4d8}.option-details{margin:24px 0}.option-details summary{padding:20px;border:1px solid #334155;border-radius:12px;cursor:pointer;font-weight:600}.option-details[open] .services-grid{margin-top:24px}


.project-status{display:inline-block;padding:3px 10px;margin-bottom:10px;border:1px solid #64748b;border-radius:6px;font-size:.78rem;color:#e2e8f0}.project-status.client{color:#6ee7b7;border-color:#6ee7b7}.case-link{display:inline-block;margin-top:12px;font-size:.87rem}


.project-card:focus-within .project-image-overlay{opacity:1}.portfolio-screenshot{width:100%;height:100%;object-fit:cover}.project-image{aspect-ratio:16/10}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.form-error{color:#fca5a5;padding:12px 0}


.btn-primary{background:#00d4ff;color:#050810}.btn-primary:hover{background:#67e8f9;color:#050810}.pricing-badge{background:#00d4ff;color:#050810}


.faq-body.open{max-height:none}.faq-header[role=button]:focus-visible{outline-offset:-3px}


.reveal,.reveal-left,.reveal-right{opacity:1;transform:none}.hero-title-line{opacity:1}


@media(max-width:1000px){.creation-grid{grid-template-columns:1fr;max-width:720px}.compact-hero{min-height:35vh}.comparison-table{font-size:.9rem}}


@media(hover:none){.project-image-overlay{opacity:1;background:linear-gradient(transparent,rgba(5,8,16,.94))}.project-links{align-self:flex-end;padding-bottom:12px}}


@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.cursor-dot,.cursor-ring,#particles-canvas{display:none!important}.reveal,.reveal-left,.reveal-right,.hero-content,.hero-title-line{opacity:1!important;transform:none!important}.tech-marquee-track{animation:none!important;flex-wrap:wrap}.typewriter::after{animation:none!important}}





.nav-logo img{height:36px;width:auto;max-width:50px;object-fit:contain;flex:none}


@media(min-width:1101px){.hero .hero-content{max-width:46vw}.hero .hero-title{font-size:clamp(2.8rem,4.3vw,4.4rem)}}





/* Inline links remain identifiable without color. */


p a:not(.btn), .legal-content a, .privacy-notice a { text-decoration: underline; text-underline-offset: .18em; }





/* Closed mobile navigation cannot receive keyboard focus. */


.mobile-menu { visibility:hidden; }


.mobile-menu.open { visibility:visible; }





/* Krono — vitrine et parcours commercial, octobre 2026. */


.vitrine{--ink:#f5f6fa;--muted:#b2bed1;--line:rgba(187,209,238,.17);background:#080b15;color:var(--ink)}


.vitrine::after{display:none}


.vitrine #navbar{height:84px;padding-inline:max(24px,calc((100vw - 1280px)/2));background:rgba(8,11,21,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}


.vitrine .nav-logo-text{font-size:1.4rem;color:#f5f6fa;background:none;-webkit-text-fill-color:initial}


.vitrine .nav-menu{gap:6px}.vitrine .nav-link{padding:9px 14px;color:#b2bed1;font-size:.85rem}.vitrine .nav-link:hover,.vitrine .nav-link.active{color:#fff;background:rgba(255,255,255,.06)}


.vitrine .nav-cta{background:#b4f5ff;color:#071522;padding:11px 20px;border-radius:8px;font-size:.84rem;box-shadow:none}


.vitrine .mobile-menu{background:#080b15}.vitrine .mobile-nav-link{color:#e2e8f0}


.vitrine main{overflow:clip}.vitrine .wrap{width:min(1280px,calc(100% - 64px));margin-inline:auto}


.vitrine .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#a8eafa;margin-bottom:22px}


.vitrine .eyebrow::before{content:'';width:22px;height:1px;background:currentColor;flex-shrink:0}


.vitrine .big-heading{font-family:var(--font-main);font-size:clamp(2.9rem,5.5vw,4.8rem);font-weight:600;line-height:1.04;letter-spacing:-.06em;margin:0 0 28px}


.vitrine .accent{color:#a7f0ff}.vitrine .intro{color:var(--muted);font-size:1.06rem;line-height:1.8;max-width:560px}


.vitrine .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}


.vitrine .action{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:51px;padding:14px 22px;border:1px solid var(--line);border-radius:8px;font-size:.88rem;font-weight:600;line-height:1.4;transition:background .2s,transform .2s}


.vitrine .action:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}


.vitrine .action.primary{background:#a7f0ff;color:#06141e;border-color:#a7f0ff}.vitrine .action.primary:hover{background:#d0f8ff}


.vitrine .arrow{font-size:1.3em;line-height:1;flex-shrink:0}.vitrine .small-note{font-size:.78rem;color:#b2bed1;margin-top:16px;line-height:1.7}


.vitrine .v-hero{position:relative;padding:156px 0 76px;background:radial-gradient(ellipse at 85% 35%,rgba(108,57,200,.18),transparent 55%),radial-gradient(ellipse at 0% 65%,rgba(0,212,255,.065),transparent 45%)}


.vitrine .hero-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}


.vitrine .hero-work{position:relative;min-width:0;padding-top:12px}.vitrine .work-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:#c4cadd}


.vitrine .work-label span:last-child{color:#a7f0ff}


.vitrine .browser-frame{display:block;border:1px solid rgba(255,255,255,.2);border-radius:13px;overflow:hidden;background:#101324;box-shadow:0 30px 80px rgba(0,0,0,.3)}


.vitrine .browser-bar{height:35px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#171a2a;border-bottom:1px solid var(--line)}


.vitrine .browser-bar i{width:5px;height:5px;border-radius:50%;background:#717989}.vitrine .browser-bar span{margin:auto;color:#c6cedf;font-size:.6rem;letter-spacing:.06em;font-family:var(--font-mono);padding-right:20px}


.vitrine .hero-shot{display:block;width:100%;aspect-ratio:1440/900;object-fit:cover;height:auto;transition:transform .4s}


.vitrine .browser-frame:hover .hero-shot{transform:scale(1.025)}


.vitrine .hero-case-link{display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:16px;font-size:.83rem;color:#e2e8f0}


.vitrine .hero-case-link b{font-family:var(--font-main);font-weight:500}.vitrine .hero-case-link .arrow{color:#a7f0ff}


.vitrine .mini-proof{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:3px;font-size:.78rem}


.vitrine .mini-proof img{width:88px;height:55px;object-fit:cover;border:1px solid var(--line);border-radius:4px}.vitrine .mini-proof strong{display:block;color:#f5f6fa;font-size:.88rem}.vitrine .mini-proof span{color:#b2bed1}


.vitrine .trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0d111e}


.vitrine .trust-items{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 0;gap:30px;font-size:.8rem;color:#c6d0df}


.vitrine .trust-items strong{display:block;color:#f3f6fa;margin-bottom:3px;font-family:var(--font-main);font-size:.95rem;font-weight:500}


.vitrine .trust-items>div+div{border-left:1px solid var(--line);padding-left:32px}


.vitrine .v-section{padding:92px 0}.vitrine .section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:42px}


.vitrine .section-top .eyebrow{margin-bottom:16px}.vitrine .v-title{font-family:var(--font-main);font-size:clamp(2rem,3.5vw,3.15rem);font-weight:500;line-height:1.13;letter-spacing:-.045em;max-width:770px}


.vitrine .section-lead{color:var(--muted);line-height:1.8;max-width:600px;margin-top:20px;font-size:.96rem}.vitrine .text-link{display:inline-flex;align-items:center;gap:12px;font-size:.86rem;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:5px;white-space:nowrap}


.vitrine .light{background:#f1f2f4;color:#141b2d}.vitrine .light .eyebrow{color:#454079}.vitrine .light .section-lead{color:#515c6b}.vitrine .light .text-link{color:#272548}.vitrine .light .accent{color:#514493}


.vitrine .case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}


.vitrine .case-card{min-width:0}.vitrine .case-media{display:block;border-radius:12px;overflow:hidden;background:#dce0e7;border:1px solid rgba(20,27,45,.08);padding:20px}


.vitrine .case-card.miumi .case-media{background:#e9e0d6}.vitrine .case-card.dnb .case-media{background:#d9e1ec}


.vitrine .case-media img{width:100%;aspect-ratio:1440/900;height:auto;object-fit:cover;border-radius:5px;box-shadow:0 10px 20px rgba(20,27,45,.13);transition:transform .3s}


.vitrine .case-media:hover img{transform:translateY(-4px)}.vitrine .case-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-family:var(--font-mono);color:#515c6b}


.vitrine .client-badge{color:#185540;background:#d8e8df;border:1px solid #a1c6b7;border-radius:4px;padding:3px 7px;font-size:.62rem;letter-spacing:.03em}


.vitrine .case-card h3{font-family:var(--font-main);font-size:1.65rem;letter-spacing:-.035em;font-weight:500;margin:10px 0 12px}.vitrine .case-card p{color:#515c6b;font-size:.9rem;line-height:1.75;max-width:550px}


.vitrine .case-points{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 19px}.vitrine .case-points span{border:1px solid #bac1cd;border-radius:5px;padding:4px 8px;font-size:.7rem;color:#3c4657}


.vitrine .offers-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vitrine .offer-tile{display:flex;flex-direction:column;border:1px solid var(--line);padding:29px;border-radius:12px;background:#101523;position:relative}


.vitrine .offer-tile.featured{border-color:#87d8ec;background:linear-gradient(160deg,#132534,#121725)}.vitrine .offer-kicker{color:#b2bed1;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:22px}


.vitrine .offer-tile.featured .offer-kicker{color:#a7f0ff}.vitrine .offer-tile h3{font-family:var(--font-main);font-size:1.5rem;font-weight:500;margin:0 0 8px;letter-spacing:-.02em}


.vitrine .offer-price{font-family:var(--font-main);font-size:2.75rem;letter-spacing:-.06em;line-height:1.25;margin:12px 0 0}.vitrine .offer-price small{font-size:.85rem;letter-spacing:0;color:#b2bed1}


.vitrine .offer-tile p{font-size:.87rem;color:#b2bed1;line-height:1.75}.vitrine .offer-tile .offer-scope{margin-top:20px;margin-bottom:20px;padding-top:20px;border-top:1px solid var(--line);color:#e2e8f0}


.vitrine .offer-tile .action{margin-top:auto;width:100%}.vitrine .offer-disclaimer{margin-top:22px;max-width:900px;color:#b2bed1;font-size:.79rem;line-height:1.8}.vitrine .offer-disclaimer a{color:#a7f0ff}


.vitrine .after-offers{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);color:#b2bed1;font-size:.83rem;flex-wrap:wrap}


.vitrine .human-layout{display:grid;grid-template-columns:.85fr 1.2fr;gap:90px;align-items:center}.vitrine .human-card{border:1px solid var(--line);border-radius:16px;padding:38px;background:radial-gradient(ellipse at 0 0,rgba(125,65,215,.16),transparent 60%),#101523}


.vitrine .monogram{font-family:var(--font-main);font-size:6rem;letter-spacing:-.1em;line-height:1;color:#a7f0ff;margin-bottom:32px}.vitrine .human-card h3{font-family:var(--font-main);font-size:1.7rem;font-weight:500;letter-spacing:-.04em;margin-bottom:5px}


.vitrine .human-card p{color:#b2bed1;font-size:.84rem;line-height:1.8}.vitrine .human-card .human-line{border-top:1px solid var(--line);margin-top:24px;padding-top:24px;color:#e2e8f0}.vitrine .human-copy p{margin-top:22px;color:#b2bed1;font-size:.98rem;line-height:1.9}


.vitrine .human-checks{display:grid;gap:16px;margin:27px 0}.vitrine .human-checks li{display:flex;gap:15px;font-size:.88rem;color:#e2e8f0}.vitrine .human-checks li::before{content:'\2713';color:#a7f0ff;flex-shrink:0}


.vitrine .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.vitrine .step{border-top:1px solid #abb3c2;padding-top:24px}.vitrine .step-num{font-family:var(--font-mono);font-size:.72rem;color:#565081;margin-bottom:25px}.vitrine .step h3{font-family:var(--font-main);font-size:1.3rem;letter-spacing:-.025em;font-weight:500;margin-bottom:14px}.vitrine .step p{color:#515c6b;font-size:.89rem;line-height:1.8}


.vitrine .faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px}.vitrine .faq-intro p{color:#b2bed1;margin:22px 0 28px;font-size:.92rem}.vitrine .faq-list{margin:0}.vitrine .faq-item{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}.vitrine .faq-header{padding:24px 0;gap:22px}.vitrine .faq-question{font-size:.95rem;font-weight:500}.vitrine .faq-answer{padding:0 28px 24px 0;color:#b2bed1;line-height:1.9;font-size:.89rem}.vitrine .faq-icon{color:#a7f0ff;flex-shrink:0}


.vitrine .final-cta{padding:88px 0;background:radial-gradient(ellipse at 70% 50%,rgba(129,76,218,.2),transparent 70%),#121426;border-top:1px solid var(--line)}


.vitrine .final-layout{display:flex;justify-content:space-between;gap:50px;align-items:center}.vitrine .final-cta h2{font-family:var(--font-main);font-size:clamp(2.4rem,4.3vw,4rem);font-weight:500;line-height:1.12;letter-spacing:-.05em;max-width:730px}.vitrine .final-cta p{color:#b2bed1;font-size:.9rem;margin-top:18px}.vitrine .final-side{flex-shrink:0}.vitrine .final-side .small-note{text-align:center}


.vitrine footer{background:#080b15;border-top:1px solid var(--line);padding-top:65px}.vitrine .footer-grid{gap:45px}.vitrine .footer-link{color:#b2bed1}.vitrine .footer-brand-desc{color:#b2bed1}.vitrine .footer-bottom-text{color:#b2bed1}


.vitrine .inner-hero{padding:151px 0 64px;background:radial-gradient(ellipse at 80% 20%,rgba(118,61,211,.16),transparent 65%);border-bottom:1px solid var(--line)}


.vitrine .inner-hero .big-heading{font-size:clamp(2.6rem,5vw,4.8rem);max-width:860px}.vitrine .inner-hero .intro{max-width:730px}


.vitrine .path-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.vitrine .path-switch a{border:1px solid var(--line);border-radius:6px;padding:11px 17px;font-size:.8rem;color:#c6d0df;background:#111827}.vitrine .path-switch a:first-child{background:#a7f0ff;color:#06141e;border-color:#a7f0ff}


.vitrine .pricing-grid.creation-grid{gap:20px}.vitrine .pricing-card{border-radius:12px;padding:28px;background:#101523;box-shadow:none}.vitrine .pricing-card.featured{border-color:#87d8ec;background:linear-gradient(160deg,#132534,#121725);transform:none}


.vitrine .pricing-plan{letter-spacing:.09em;font-family:var(--font-mono);font-size:.65rem;color:#b2bed1;margin-bottom:17px}.vitrine .pricing-name{font-size:1.6rem;font-weight:500;letter-spacing:-.035em}.vitrine .pricing-amount{font-size:3.1rem!important;color:#a7f0ff}.vitrine .pricing-features{border-top:1px solid var(--line);padding-top:20px}.vitrine .pricing-card>p{color:#b2bed1;font-size:.85rem}.vitrine .pricing-card .cost-note{font-size:.77rem;border-top:1px solid var(--line);padding-top:18px}.vitrine .pricing-card .btn{border-radius:7px}


.vitrine .section{padding:76px 0}.vitrine .section-title{font-weight:500;letter-spacing:-.035em}.vitrine .section-header-center{text-align:left;max-width:none;margin-bottom:35px}.vitrine .section-header-center .section-subtitle{margin-left:0;max-width:760px}.vitrine .section-subtitle{color:#b2bed1}


.vitrine .service-card{border-radius:10px;box-shadow:none;background:#101523;padding:26px}.vitrine .service-card::before{display:none}.vitrine .service-title{font-size:1.15rem}.vitrine .service-desc{color:#b2bed1;font-size:.89rem}.vitrine #subscription-heading{background:#111322;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}


.vitrine .comparison-table{background:#0d111e;font-size:.87rem}.vitrine .option-details summary{color:#e2e8f0;border-color:var(--line)}


.vitrine .project-card{border-radius:10px;border:1px solid var(--line);background:#101523}.vitrine .project-info{padding:24px}.vitrine .project-desc{color:#b2bed1}.vitrine .project-image-overlay{display:none}.vitrine .project-image{aspect-ratio:16/10}.vitrine .project-links-static{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.vitrine .project-links-static a{padding:8px 12px;border:1px solid #698095;border-radius:6px;color:#e2e8f0;font-size:.77rem}.vitrine .project-links-static a:first-child{border-color:#9fddeb;color:#a7f0ff}


.vitrine .portfolio-filter{justify-content:flex-start}.vitrine .filter-btn{color:#b2bed1}.vitrine .filter-btn.active{color:#06141e;background:#a7f0ff;border-color:#a7f0ff}.vitrine .project-status.demo{color:#c6d0df;border-color:#8090a7}


.project-card[hidden]{display:none!important}


.vitrine .contact-grid{grid-template-columns:.8fr 1.2fr;gap:64px}.vitrine .contact-form{background:#101523;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:32px}.vitrine .form-control{background:#0b0f1b;color:#f5f6fa;border-color:#4c5b70;border-radius:7px}.vitrine .form-label{color:#e2e8f0}.vitrine .form-control::placeholder{color:#a8b5c8}.vitrine .contact-info-value{color:#e2e8f0}.vitrine .contact-info-title{color:#b2bed1}.vitrine .btn-primary{background:#a7f0ff;color:#06141e;box-shadow:none;border-radius:7px}.vitrine .btn-outline{border-radius:7px}


.vitrine .contact-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;max-width:930px}.vitrine .contact-choice{padding:22px;border:1px solid var(--line);border-radius:10px;background:#111625}.vitrine .contact-choice strong{display:block;font-size:1.03rem;margin-bottom:7px;font-weight:500}.vitrine .contact-choice span{display:block;color:#b2bed1;font-size:.82rem;line-height:1.7;margin-bottom:14px}.vitrine .contact-choice a{color:#a7f0ff;font-size:.85rem;text-decoration:underline;text-underline-offset:4px}


.vitrine .privacy-details{font-size:.78rem;color:#b2bed1;line-height:1.85;margin:0 0 23px}.vitrine .privacy-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:4px 0;color:#b2bed1}.vitrine .privacy-details p{margin-top:12px}


.vitrine .presentation-section{padding:65px 0}.vitrine .presentation-copy .section-title{font-size:2.3rem}.vitrine .presentation-frame{border-radius:12px;box-shadow:none}.vitrine .presentation-frame::before{display:none}.vitrine .presentation-video{border-radius:8px}.vitrine .presentation-caption{color:#b2bed1}


@media(min-width:1500px){.vitrine .v-hero{padding-top:174px;padding-bottom:90px}.vitrine .hero-layout{gap:95px}}


@media(max-width:1100px){.vitrine .hero-layout{gap:35px}.vitrine .big-heading{font-size:clamp(2.8rem,5.5vw,4rem)}.vitrine .human-layout,.vitrine .faq-layout{gap:45px}.vitrine .creation-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.vitrine .pricing-card{padding:21px}.vitrine .pricing-features{font-size:.85rem}.vitrine .contact-grid{gap:32px}.vitrine .offer-tile{padding:23px}.vitrine .nav-link{padding-inline:10px}}


@media(max-width:900px){.vitrine #navbar{height:76px;padding-inline:24px}.vitrine .nav-menu{display:none}.vitrine .nav-hamburger{display:flex}.vitrine .wrap{width:calc(100% - 48px)}.vitrine .v-hero{padding:126px 0 52px}.vitrine .hero-layout{grid-template-columns:1fr;gap:42px}.vitrine .big-heading{font-size:clamp(3rem,7.5vw,4.5rem);max-width:670px}.vitrine .hero-work{max-width:660px;width:100%}.vitrine .intro{max-width:610px}.vitrine .trust-items{gap:20px}.vitrine .trust-items>div+div{padding-left:20px}.vitrine .offers-layout{grid-template-columns:1fr}.vitrine .offer-tile{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:27px}.vitrine .offer-tile .offer-kicker,.vitrine .offer-tile h3,.vitrine .offer-tile .offer-price{grid-column:1}.vitrine .offer-tile .offer-scope{grid-column:2;grid-row:1/4;border-top:0;padding-top:0;align-self:center;margin-top:0}.vitrine .offer-tile .action{grid-column:2;grid-row:4}.vitrine .offer-tile p{grid-column:1}.vitrine .human-layout{grid-template-columns:.8fr 1fr;gap:30px}.vitrine .human-card{padding:28px}.vitrine .faq-layout{grid-template-columns:1fr;gap:24px}.vitrine .final-layout{flex-direction:column;align-items:flex-start;gap:30px}.vitrine .final-side .small-note{text-align:left}.vitrine .creation-grid{grid-template-columns:1fr;max-width:none}.vitrine .pricing-card{padding:30px}.vitrine .pricing-name{font-size:1.6rem}.vitrine .inner-hero{padding-top:125px}.vitrine .contact-grid{grid-template-columns:1fr}.vitrine .contact-grid>div:first-child{max-width:760px}.vitrine .section{padding-block:60px}.vitrine .services-grid{grid-template-columns:1fr}}


@media(max-width:600px){.vitrine .wrap{width:calc(100% - 40px)}.vitrine #navbar{padding-inline:20px;height:72px}.vitrine .v-hero{padding:111px 0 39px}.vitrine .big-heading{font-size:clamp(2.55rem,10.5vw,3.8rem);line-height:1.07;letter-spacing:-.052em;margin-bottom:22px}.vitrine .eyebrow{font-size:.62rem;letter-spacing:.06em;margin-bottom:20px}.vitrine .intro{font-size:.95rem;line-height:1.8}.vitrine .actions{gap:10px;margin-top:25px}.vitrine .actions .action{width:100%;min-height:49px}.vitrine .actions .action.secondary{border:0;min-height:35px;padding:6px}.vitrine .hero-layout{gap:33px}.vitrine .hero-work{padding-top:0}.vitrine .work-label{font-size:.58rem}.vitrine .mini-proof{grid-template-columns:69px 1fr auto;gap:12px}.vitrine .mini-proof img{width:69px;height:46px}.vitrine .mini-proof span{font-size:.72rem}.vitrine .hero-case-link{font-size:.78rem}.vitrine .trust-items{grid-template-columns:1fr;gap:17px;padding:25px 0;font-size:.78rem}.vitrine .trust-items>div+div{border-left:0;padding-left:0}.vitrine .trust-items strong{font-size:.89rem;display:inline;margin-right:8px}.vitrine .v-section{padding:56px 0}.vitrine .section-top{display:block;margin-bottom:28px}.vitrine .section-top>.text-link{margin-top:22px}.vitrine .v-title{font-size:2.15rem;line-height:1.15}.vitrine .case-grid{grid-template-columns:1fr;gap:36px}.vitrine .case-media{padding:13px}.vitrine .case-card h3{font-size:1.5rem;margin-top:10px}.vitrine .case-meta{margin-top:18px;font-size:.59rem}.vitrine .case-points{gap:6px}.vitrine .case-points span{font-size:.63rem}.vitrine .offer-tile{display:flex;padding:25px}.vitrine .offer-tile .offer-scope{border-top:1px solid var(--line);margin-top:20px;padding-top:20px;align-self:stretch}.vitrine .offer-tile .action{margin-top:0}.vitrine .offer-kicker{margin-bottom:18px}.vitrine .human-layout{grid-template-columns:1fr;gap:35px}.vitrine .human-card{padding:29px}.vitrine .monogram{font-size:4rem;margin-bottom:24px}.vitrine .steps{grid-template-columns:1fr;gap:28px}.vitrine .step-num{margin-bottom:14px}.vitrine .faq-header{padding:22px 0}.vitrine .faq-question{font-size:.88rem}.vitrine .faq-answer{font-size:.85rem;padding-right:0}.vitrine .final-cta{padding:58px 0}.vitrine .final-cta h2{font-size:2.6rem}.vitrine .final-side{width:100%}.vitrine .final-side .action{width:100%}.vitrine .inner-hero{padding:112px 0 38px}.vitrine .inner-hero .big-heading{font-size:2.8rem;max-width:100%}.vitrine .path-switch{gap:7px}.vitrine .path-switch a{padding:10px 12px;font-size:.76rem}.vitrine .section{padding-block:48px}.vitrine .pricing-card{padding:25px}.vitrine .section-title{font-size:1.95rem;line-height:1.2}.vitrine .contact-options{grid-template-columns:1fr;gap:12px;margin-top:25px}.vitrine .contact-choice{padding:20px}.vitrine .contact-form{padding:22px}.vitrine .form-row{grid-template-columns:1fr}.vitrine .privacy-notice{font-size:.77rem;line-height:1.8}.vitrine .presentation-section{padding:52px 0}.vitrine .presentation-copy{text-align:left}.vitrine .presentation-copy .section-tag{justify-content:flex-start}.vitrine .presentation-copy .section-title{font-size:2rem}.vitrine .presentation-video{aspect-ratio:9/16}.vitrine .presentation-media{max-width:330px}.vitrine .presentation-copy .section-subtitle{margin-left:0}.vitrine .presentation-layout{gap:25px}.vitrine .footer-grid{gap:30px}.vitrine .footer-col-title{margin-bottom:15px}.vitrine .footer-bottom{gap:20px}.vitrine .footer-bottom-links{flex-wrap:wrap;row-gap:12px}.vitrine .comparison-table{font-size:.8rem}}


@media(prefers-reduced-motion:reduce){.vitrine .action,.vitrine .case-media img,.vitrine .hero-shot{transition:none}.vitrine .action:hover,.vitrine .case-media:hover img,.vitrine .browser-frame:hover .hero-shot{transform:none}}





/* One text weight for body emphasis; two weights for headings. */


.vitrine.home-vitrine .nav-link,.vitrine.home-vitrine strong{font-weight:600}


.vitrine.home-vitrine .nav-logo-text,.vitrine.home-vitrine .monogram,.vitrine.home-vitrine .offer-price,.vitrine.home-vitrine .footer-col-title{font-weight:600}





/* Keep section content and cards away from the viewport edges. */


.vitrine .section > .container{width:min(1200px,calc(100% - 64px));min-width:0}


@media(max-width:900px){.vitrine .section > .container{width:calc(100% - 48px)}}


@media(max-width:600px){.vitrine .section > .container{width:calc(100% - 40px)}}





/* Original chibi portrait: crop only its display frame; keep the source intact. */


.vitrine .human-portrait{display:block;width:min(220px,100%);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;margin:0 auto 24px;border:1px solid var(--line);border-radius:12px}


@media(max-width:600px){.vitrine .human-portrait{width:min(180px,100%);margin-bottom:22px}}





/* Public reassurance and fictional mission previews. */


.proof-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}.proof-point{display:flex;gap:20px;margin:0 0 28px}.proof-point>span{font-family:var(--font-mono);color:#514493;font-size:.75rem;padding-top:5px}.proof-point h3{font-size:1.2rem;font-weight:500;margin-bottom:9px;letter-spacing:-.025em}.proof-point p{font-size:.9rem;line-height:1.8;color:#515c6b}.proof-copy>.text-link{margin-top:5px}.proof-caption{font-size:.78rem;line-height:1.8;color:#515c6b;margin-top:23px;max-width:1000px}.proof-caption a{text-decoration:underline;text-underline-offset:3px}.dark-caption{color:#b2bed1}


.mission-preview,.mission-demo{background:#0e1625;color:#f5f6fa;border:1px solid #485872;border-radius:13px;padding:28px;min-width:0;box-shadow:0 15px 35px rgba(12,18,32,.08)}.mission-preview-top{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #41506a;padding-bottom:17px;margin-bottom:24px}.mission-preview-top strong{font-size:.86rem;font-weight:500}.demo-label{color:#c7d6ed;border:1px solid #71829b;padding:4px 7px;border-radius:4px;font-size:.64rem;line-height:1.5}.mission-reference{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.07em;color:#a7f0ff;margin:0 0 11px}.mission-preview h3,.demo-panel h3{font-size:1.45rem;letter-spacing:-.03em;font-weight:500;line-height:1.3;margin:0 0 12px}.mission-description{color:#bdc9db;font-size:.85rem;line-height:1.8}.mission-progress{list-style:none;margin:22px 0 0;padding:0}.mission-progress li{font-size:.83rem;color:#c0cede;padding:13px 0;display:flex;gap:13px;border-top:1px solid #2c3c54;align-items:center;line-height:1.6}.mission-progress li span{color:#a7f0ff;flex-shrink:0}.mission-progress li.current{color:#fff;background:#152d3c;padding-inline:12px;border-radius:5px;border:1px solid #456b7e}.mission-preview-bottom{display:flex;gap:15px;justify-content:space-between;border-top:1px solid #41506a;padding-top:17px;margin-top:20px;color:#bdc9db;font-size:.7rem;line-height:1.6}


.demo-nav{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.demo-nav[hidden],.demo-panel[hidden]{display:none!important}.demo-nav button{font:inherit;font-size:.83rem;border:1px solid #697d97;border-radius:6px;padding:11px 16px;background:#142033;color:#e2e8f0;cursor:pointer;min-height:44px}.demo-nav button[aria-pressed=true]{background:#a7f0ff;color:#071522;border-color:#a7f0ff}.demo-panel{padding:15px 0 0}.demo-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}.demo-panel p{font-size:.9rem;color:#bdc9db;line-height:1.9}.demo-checks{list-style:none;padding:0;margin:23px 0 0}.demo-checks li{display:flex;gap:12px;line-height:1.8;margin:13px 0;color:#d1deef;font-size:.88rem}.demo-checks li:before{content:'✓';color:#a7f0ff;flex-shrink:0}.demo-paper{background:#f1f2f4;color:#172035;border-radius:7px;padding:27px;border:1px solid #c2cbd7}.demo-paper .demo-paper-label{color:#514493;font-family:var(--font-mono);font-size:.62rem;margin-bottom:20px}.demo-paper h4{font-size:1.15rem;font-weight:600}.demo-paper dl{display:grid;grid-template-columns:100px 1fr;gap:15px;margin:25px 0;font-size:.82rem;line-height:1.7}.demo-paper dt{color:#515c6b}.demo-paper dd{margin:0;color:#172035}.demo-paper p{color:#515c6b;font-size:.78rem}.demo-inset{background:#101e30;border:1px solid #4b5d76;border-radius:8px;padding:25px}.demo-note,.demo-panel .demo-note{font-size:.76rem;line-height:1.8;color:#b2bed1;margin-top:20px}.demo-review,.demo-documents{list-style:none;margin:22px 0;padding:0}.demo-review li,.demo-documents li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #3b506b;color:#e2e8f0;font-size:.85rem;line-height:1.8}.demo-review li span,.demo-documents li span{color:#a7f0ff;flex-shrink:0}


.engagement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.engagement-card{border:1px solid #b6bfcc;border-radius:10px;padding:28px;background:#fafbfc;min-width:0}.engagement-card h3{font-size:1.3rem;line-height:1.5;letter-spacing:-.025em;font-weight:500;margin-bottom:14px}.engagement-card p{color:#515c6b;font-size:.9rem;line-height:1.85}.engagement-card .engagement-number{color:#514493;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.04em;margin-bottom:18px}.engagement-card .engagement-detail{font-size:.8rem;border-top:1px solid #c1c8d3;padding-top:18px;margin-top:19px}.engagement-card .text-link{margin-top:24px;font-size:.81rem;white-space:normal}.organisation-card{background:#101523;border:1px solid #52627a;border-radius:12px;padding:30px}.organisation-card h3{font-size:1.4rem;font-weight:500}.organisation-card>p{font-size:.88rem;color:#b2bed1;line-height:1.9;margin-top:24px}.local-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.logistics-example{border-top:1px solid #abb5c5;padding-top:30px;margin-top:45px}.logistics-example h3{font-size:1.5rem;font-weight:500;letter-spacing:-.025em}.logistics-example p{font-size:.88rem;color:#515c6b;line-height:1.9;max-width:700px;margin-top:14px}.logistics-example ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:26px 0;padding:0}.logistics-example li{border:1px solid #b6bfcc;background:#fafbfc;padding:18px;border-radius:7px;font-size:.9rem;color:#272548;text-align:center}


.confidence-faq{border-bottom:1px solid var(--line);padding:0;background:none}.confidence-faq summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;list-style:none;padding:22px 0;line-height:1.7;color:#e2e8f0;font-size:.92rem;font-weight:500}.confidence-faq summary::-webkit-details-marker{display:none}.confidence-faq summary:after{content:'+';color:#a7f0ff;font-size:1.3rem;flex-shrink:0}.confidence-faq[open] summary:after{content:'−'}.confidence-faq p{padding:0 0 25px;color:#b2bed1;font-size:.89rem;line-height:1.9;margin:0}.confidence-faq-group{max-width:940px;margin:0 0 42px}.confidence-faq-group h3{font-size:1.4rem;font-weight:500;letter-spacing:-.025em;margin-bottom:10px}.reference-details{max-width:940px;color:#b2bed1;font-size:.79rem;line-height:1.9;border:1px solid var(--line);border-radius:8px;padding:18px 20px}.reference-details summary{cursor:pointer}.reference-details p{margin-top:15px}.reference-details a{color:#a7f0ff;text-decoration:underline;text-underline-offset:3px}


@media(max-width:900px){.proof-layout{grid-template-columns:1fr;gap:32px}.demo-panel-grid{gap:28px}.mission-preview{max-width:640px;width:100%}}


@media(max-width:600px){.proof-point{gap:14px;margin-bottom:24px}.proof-point h3{font-size:1.1rem}.proof-point p{font-size:.87rem}.mission-preview,.mission-demo{padding:20px}.mission-preview-top{align-items:flex-start;gap:10px}.mission-preview-top strong{font-size:.8rem}.demo-label{font-size:.58rem;max-width:125px}.mission-preview h3,.demo-panel h3{font-size:1.3rem}.mission-preview-bottom{flex-direction:column;gap:4px}.demo-panel-grid,.engagement-grid,.local-grid{grid-template-columns:1fr}.demo-nav{gap:7px}.demo-nav button{font-size:.77rem;flex:1 0 calc(50% - 7px);padding:10px 8px}.demo-paper,.demo-inset{padding:20px}.demo-paper dl{grid-template-columns:1fr;gap:5px}.demo-paper dd{margin-bottom:10px}.engagement-card{padding:23px}.organisation-card{padding:24px}.confidence-faq summary{font-size:.87rem;gap:15px}.confidence-faq p{font-size:.85rem}.logistics-example ol{grid-template-columns:1fr;gap:9px}.logistics-example li{padding:13px}.proof-caption{font-size:.75rem}}




/* Keep consecutive calls to action apart when they wrap to another row. */

.vitrine .button-group{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}

.vitrine .button-group>.btn,.vitrine .button-group>.action{margin:0;max-width:100%;min-height:44px;white-space:normal;justify-content:center;text-align:center}


/* Bespoke work is a visible route alongside the standard website offers. */
.vitrine .custom-project-card{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start;background:linear-gradient(120deg,#122334,#14172b);border:1px solid #7195ae;border-radius:12px;padding:32px;margin-bottom:28px;min-width:0}
.vitrine .custom-project-card .eyebrow{margin-bottom:16px}.vitrine .custom-project-card h3{font-size:1.85rem;font-weight:500;letter-spacing:-.035em;line-height:1.3;margin-bottom:17px}
.vitrine .custom-description{color:#c3cddc;font-size:.88rem;line-height:1.85}.vitrine .custom-project-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:21px 0 0}.vitrine .custom-project-tags li{border:1px solid #536a85;border-radius:5px;color:#d6e6f3;background:#152436;padding:6px 9px;font-size:.7rem;line-height:1.6}
.vitrine .custom-budget-title{font-size:1.1rem;color:#f5f6fa;font-weight:500;margin:0 0 12px}.vitrine .custom-project-side .button-group{align-items:flex-start;gap:16px;flex-direction:column}.vitrine .custom-project-side .text-link{white-space:normal;line-height:1.6}.vitrine .custom-note{color:#bdc9db;font-size:.73rem;line-height:1.7;margin-top:17px}
.vitrine .custom-budget-callout{padding:27px;border:1px solid #607c94;border-radius:10px;background:#122030;margin-top:25px}.vitrine .custom-budget-callout h3{font-size:1.3rem;font-weight:500;line-height:1.5;margin-bottom:13px}.vitrine .custom-budget-callout p{color:#c3cddc;line-height:1.85;font-size:.9rem;max-width:860px}.vitrine .form-help{color:#b2bed1;font-size:.79rem;line-height:1.8;margin-top:11px}
@media(max-width:900px){.vitrine .custom-project-card{grid-template-columns:1fr;gap:29px}.vitrine .custom-project-side .button-group{flex-direction:row;align-items:center}}
@media(max-width:600px){.vitrine .custom-project-card{padding:24px;gap:25px}.vitrine .custom-project-card h3{font-size:1.55rem}.vitrine .custom-description{font-size:.86rem}.vitrine .custom-project-side .button-group{flex-direction:column;align-items:flex-start}.vitrine .custom-project-side .action{width:100%}.vitrine .custom-budget-callout{padding:22px}.vitrine .custom-budget-callout h3{font-size:1.2rem}.vitrine .custom-budget-callout p{font-size:.86rem}}