/*
  TechCoder Software — premium frontend prototype
  The visual system is intentionally framework-free for a light, scalable base.
*/

:root {
  --ink: #081326;
  --ink-2: #0b1830;
  --ink-3: #10203e;
  --navy: #0b1c38;
  --paper: #f4f8ff;
  --white: #ffffff;
  --text: #23334e;
  --muted: #6d7c94;
  --line: rgba(50, 81, 127, 0.16);
  --line-dark: rgba(187, 213, 255, 0.14);
  --cyan: #2fdcff;
  --cyan-2: #a3f2ff;
  --blue: #4889ff;
  --purple: #9e7aff;
  --lime: #b7f974;
  --danger: #ff7b8b;
  --shadow-lg: 0 32px 75px rgba(4, 16, 42, 0.18);
  --shadow-md: 0 18px 40px rgba(4, 16, 42, 0.13);
  --radius-xl: 30px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --container: min(1200px, calc(100% - 64px));
  --font-display: "Manrope", Arial, sans-serif;
  --font-mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open { overflow: hidden; }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }

.container { width: var(--container); margin-inline: auto; position: relative; }
.section { position: relative; padding: 132px 0; overflow: hidden; }
.section-dark { background: var(--ink); color: var(--white); }
.section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(116, 156, 217, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 156, 217, 0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent); }
.page-noise { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; z-index: 1000; left: 20px; top: -80px; border-radius: 8px; padding: 10px 16px; color: var(--ink); background: var(--white); font-size: .8rem; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 16px; }
.scroll-progress { position: fixed; z-index: 1000; inset: 0 0 auto; height: 3px; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow: 0 0 14px var(--cyan); }
.cursor-glow { position: fixed; z-index: 0; pointer-events: none; width: 330px; height: 330px; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, rgba(63, 147, 255, .07), transparent 68%); transition: left .1s ease-out, top .1s ease-out; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--cyan-2); font-family: var(--font-mono); font-size: .69rem; font-weight: 500; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-dark { color: #436a9e; }
.status-dot, .live-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(183, 249, 116, .6); animation: ping 2s infinite; }
.text-gradient { background: linear-gradient(110deg, var(--cyan) 5%, #9fbcff 51%, var(--purple) 98%); -webkit-background-clip: text; background-clip: text; color: transparent; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: inherit; letter-spacing: -.05em; }
h1 { margin-bottom: 24px; font-size: clamp(3rem, 5.55vw, 5.25rem); line-height: 1.02; font-weight: 800; }
h2 { margin-bottom: 0; font-size: clamp(2.25rem, 4vw, 3.85rem); line-height: 1.08; font-weight: 800; }
h2 > span:not(.text-gradient) { color: #5d8dcc; }
h3 { font-size: 1.35rem; line-height: 1.2; }
.section-heading { position: relative; z-index: 1; margin-bottom: 55px; }
.heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.heading-row > p { max-width: 375px; margin: 0 0 5px; color: #9aacc8; font-size: .97rem; line-height: 1.8; }
.heading-split { display: grid; grid-template-columns: 1.35fr .65fr; gap: 92px; align-items: end; }
.heading-split .heading-side { padding-bottom: 4px; }
.heading-side > p { margin-bottom: 20px; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #2273d9; font-size: .9rem; font-weight: 800; transition: gap .25s ease; }
.text-link:hover { gap: 14px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 0 21px; border: 1px solid transparent; border-radius: 10px; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.button i { font-size: .75rem; transition: transform .25s ease; }
.button:hover { transform: translateY(-3px); }
.button:hover i { transform: translateX(4px); }
.button-primary { color: #061528; background: linear-gradient(110deg, #65e9ff, #7fa8ff 70%, #b496ff); box-shadow: 0 13px 30px rgba(74, 184, 255, .22); }
.button-primary:hover { box-shadow: 0 18px 35px rgba(74, 184, 255, .36); }
.button-ghost { color: var(--white); border-color: rgba(213, 235, 255, .24); background: rgba(255,255,255,.035); }
.button-ghost:hover { border-color: rgba(117, 227, 255, .55); background: rgba(80, 160, 255, .1); }
.button-dark { color: var(--white); background: #0e2345; box-shadow: 0 12px 26px rgba(3, 20, 50, .2); }
.button-dark:hover { background: #153665; box-shadow: 0 17px 35px rgba(3, 20, 50, .28); }
.button-small { min-height: 42px; padding: 0 15px; border-radius: 8px; font-size: .7rem; }

/* Sticky navigation */
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; padding: 20px 0; color: var(--white); transition: padding .35s ease, background .35s ease, box-shadow .35s ease; }
.site-header.scrolled { padding: 11px 0; background: rgba(5, 15, 32, .82); box-shadow: 0 9px 32px rgba(0, 7, 20, .22); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); }
.nav-shell { display: flex; align-items: center; min-height: 47px; }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark { position: relative; display: grid; width: 32px; height: 32px; place-items: center; transform: skewY(-13deg); }
.brand-mark::before { content: ""; position: absolute; inset: 0; border: 1.5px solid #9dddff; border-radius: 9px 11px 9px 11px; background: linear-gradient(135deg, rgba(50,220,255,.38), rgba(124,92,255,.1)); box-shadow: inset 0 0 14px rgba(73, 217, 255, .3), 0 0 15px rgba(47, 220, 255, .18); }
.brand-mark i { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: var(--white); box-shadow: 0 0 7px var(--cyan); }
.brand-mark i:nth-child(1) { left: 8px; top: 11px; }.brand-mark i:nth-child(2) { left: 15px; top: 16px; background: var(--cyan); }.brand-mark i:nth-child(3) { right: 7px; top: 9px; background: var(--purple); }
.brand-name { position: relative; display: flex; align-items: baseline; color: var(--white); font-size: 1.15rem; font-weight: 800; letter-spacing: -.075em; }.brand-name > span { color: #81e9ff; }.brand-name small { position: absolute; bottom: -10px; left: 1px; color: #b9c9e3; font-size: .45rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.primary-nav { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px); margin: 0 auto; padding-top: 1px; }
.nav-link { position: relative; color: rgba(231, 242, 255, .78); font-size: .64rem; font-weight: 700; white-space: nowrap; transition: color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1.5px; border-radius: 50px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform .23s ease; box-shadow: 0 0 7px var(--cyan); }
.nav-link:hover, .nav-link.active { color: var(--white); }.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; z-index: 2; margin-left: auto; width: 43px; height: 43px; padding: 0; border: 1px solid rgba(223, 241, 255, .25); border-radius: 9px; color: var(--white); background: rgba(255,255,255,.03); }.menu-toggle span { display: block; width: 17px; height: 1.5px; margin: 5px auto; background: currentColor; transition: transform .25s ease; }

/* Hero */
.hero { position: relative; min-height: 790px; padding: 164px 0 48px; overflow: hidden; isolation: isolate; }
.hero-grid { position: absolute; z-index: -3; inset: 0; opacity: .44; background-image: linear-gradient(rgba(134, 177, 247, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 177, 247, .085) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 78% 65% at 55% 45%, black 10%, transparent 72%); }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(110deg, #07152b 2%, rgba(7,21,43,.87) 43%, rgba(7,21,43,.58) 72%, #07152b 100%); }
.hero-glow { position: absolute; z-index: -1; width: 48vw; height: 48vw; border-radius: 50%; filter: blur(20px); pointer-events: none; }.hero-glow-one { right: -9vw; top: 4%; background: radial-gradient(circle, rgba(62, 133, 255, .25), rgba(49, 219, 255, .055) 45%, transparent 70%); }.hero-glow-two { left: 19vw; bottom: -42vw; background: radial-gradient(circle, rgba(126, 84, 255, .18), transparent 67%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(460px, .95fr); gap: 54px; align-items: center; min-height: 545px; }
.hero-copy { position: relative; z-index: 1; padding-top: 20px; }.hero-copy .eyebrow { margin-bottom: 25px; }.hero-lead { max-width: 620px; margin-bottom: 34px; color: #b4c5df; font-size: 1.07rem; line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }.hero-footnote { display: flex; align-items: center; gap: 13px; margin-top: 43px; }.hero-footnote p { margin: 0; color: #8599b8; font-size: .69rem; line-height: 1.5; }.hero-footnote strong { color: #d9edff; font-weight: 700; }.avatars { display: flex; padding-left: 7px; }.avatars span { display: grid; place-items: center; width: 29px; height: 29px; margin-left: -7px; border: 2px solid var(--ink); border-radius: 50%; color: #e8f8ff; background: linear-gradient(140deg, #2e82b4, #765ad1); font-family: var(--font-mono); font-size: .51rem; font-weight: 500; }.avatars span:nth-child(2) { background: linear-gradient(140deg, #315775, #72b8d8); }.avatars span:nth-child(3) { background: linear-gradient(140deg, #573b9b, #a083eb); }

.hero-visual { position: relative; min-height: 475px; transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0); transition: transform .18s linear; }
.visual-orbit { position: absolute; border: 1px solid rgba(117, 210, 255, .18); border-radius: 50%; pointer-events: none; }.orbit-one { width: 404px; height: 404px; top: 18px; left: 50%; transform: translateX(-48%) rotate(-18deg); border-right-color: rgba(142, 124, 255, .55); animation: orbit-spin 22s linear infinite; }.orbit-two { width: 284px; height: 284px; left: 50%; top: 76px; transform: translateX(-45%) rotate(41deg); border-left-color: rgba(48, 220, 255, .6); animation: orbit-spin-reverse 16s linear infinite; }
.orbital-node { position: absolute; z-index: 2; width: 11px; height: 11px; border: 2px solid #dffbff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(47, 220, 255, .12), 0 0 20px var(--cyan); transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0); }.node-one { top: 55px; right: 83px; }.node-two { bottom: 75px; left: 65px; width: 8px; height: 8px; background: var(--purple); box-shadow: 0 0 0 4px rgba(158,122,255,.13),0 0 16px var(--purple); }.node-three { bottom: 30px; right: 170px; width: 6px; height: 6px; background: #fff; }
.visual-connector { position: absolute; height: 1px; transform-origin: left; opacity: .5; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }.connector-one { width: 230px; top: 134px; right: 50px; transform: rotate(31deg); }.connector-two { width: 204px; bottom: 127px; left: 68px; transform: rotate(-35deg); }
.glass-panel { border: 1px solid rgba(179, 224, 255, .23); background: linear-gradient(135deg, rgba(29, 70, 119, .55), rgba(12, 28, 57, .62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 25px 60px rgba(0, 8, 30, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dashboard-main { position: absolute; z-index: 1; top: 89px; right: 54px; width: min(365px, 72%); min-height: 280px; padding: 23px 24px 18px; border-radius: 19px; transform: rotate(-3.7deg); animation: float-main 7s ease-in-out infinite; }.dashboard-main::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: .56; background: linear-gradient(115deg, rgba(56,220,255,.35), transparent 32%, transparent 62%, rgba(143,103,255,.4)); filter: blur(1px); }
.dashboard-heading { display: flex; align-items: center; gap: 8px; color: #adbfda; font-family: var(--font-mono); font-size: .61rem; letter-spacing: .1em; }.dashboard-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.dashboard-live { margin-left: auto; padding: 4px 6px; border: 1px solid rgba(174,240,255,.19); border-radius: 4px; color: #bdf7ff; font-size: .51rem; }
.dashboard-metric { position: relative; margin-top: 25px; }.dashboard-metric strong { display: inline-block; color: #f1fbff; font-size: 3.3rem; font-weight: 700; letter-spacing: -.075em; line-height: .85; }.dashboard-metric strong span { color: var(--cyan); font-size: 1.5rem; }.dashboard-metric small { display: block; margin: 8px 0 0 3px; color: #91a7c5; font-size: .63rem; }.metric-rise { position: absolute; top: 15px; right: 0; padding: 6px 8px; border-radius: 5px; color: #ccffa5; background: rgba(178, 250, 109, .11); font-family: var(--font-mono); font-size: .57rem; }.signal-chart { height: 83px; margin: 16px -4px 3px; opacity: .98; }.signal-chart svg { width: 100%; height: 100%; overflow: visible; }.chart-area { fill: url(#area-gradient); }.chart-line { fill: none; stroke: url(#chart-gradient); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw-chart 4s 1s ease forwards; }.dashboard-bottom { display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid rgba(174, 214, 255, .12); color: #9cb4d2; font-size: .62rem; }.dashboard-bottom i { margin-right: 5px; color: var(--cyan); }.dashboard-bottom strong { color: #d7f4ff; font-family: var(--font-mono); font-size: .59rem; }
.mini-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; }.mini-card small { display: block; margin-bottom: 2px; color: #91a6c2; font-family: var(--font-mono); font-size: .55rem; }.mini-card strong { color: #e9f6ff; font-size: .62rem; letter-spacing: -.02em; }.mini-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 8px; font-size: .73rem; }.mini-icon.cyan { color: #0c5365; background: #8defff; }.mini-icon.purple { color: #e8e2ff; background: #574687; }.card-data { top: 58px; left: 4px; animation: float-card 6s 1s ease-in-out infinite; }.card-security { right: 8px; bottom: 51px; animation: float-card 7s 1.8s ease-in-out infinite reverse; }.mini-spark { width: 23px; height: 6px; margin-left: 8px; border-radius: 50px; background: linear-gradient(90deg, rgba(124,230,255,.1), var(--cyan), rgba(124,230,255,.1)); animation: shimmer 2s infinite; }
.floating-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px; color: #abc4e2; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .04em; }.floating-tag i { color: var(--cyan); }.tag-api { right: 25px; top: 35px; }.tag-data { bottom: 23px; left: 93px; }
.hero-scroll-row { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; color: #7890b2; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .09em; }.hero-scroll-row > span { display: flex; align-items: center; gap: 9px; }.hero-scroll-row > span i { display: inline-block; width: 65px; height: 1px; background: rgba(156,196,246,.3); }.scroll-cue { display: inline-flex; align-items: center; gap: 9px; transition: color .2s ease; }.scroll-cue:hover { color: var(--cyan); }.scroll-mouse { display: grid; width: 17px; height: 25px; place-items: start center; padding-top: 5px; border: 1px solid #7890b2; border-radius: 10px; }.scroll-mouse i { width: 2px; height: 5px; border-radius: 4px; background: var(--cyan); animation: mouse-scroll 1.7s infinite; }

/* Highlight strip */
.proof-strip { position: relative; z-index: 2; border-top: 1px solid rgba(148,195,249,.12); border-bottom: 1px solid rgba(148,195,249,.12); color: #c1d5ef; background: #0d1d38; }.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; min-height: 86px; }.proof-grid p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 24px; border-right: 1px solid rgba(148,195,249,.12); font-size: .72rem; font-weight: 600; }.proof-grid p:first-child { padding-left: 0; }.proof-grid p i { color: var(--cyan); }.proof-grid a { display: inline-flex; align-items: center; gap: 10px; padding-left: 28px; color: var(--white); font-size: .72rem; font-weight: 800; white-space: nowrap; transition: color .2s; }.proof-grid a:hover { color: var(--cyan); }.proof-grid a i { font-size: .63rem; }

/* Services */
.services-section { isolation: isolate; }.services-orb { position: absolute; z-index: 0; width: 610px; height: 610px; top: 17%; left: -410px; border: 1px solid rgba(94, 197, 255, .13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(98,170,255,.027), 0 0 0 109px rgba(98,170,255,.02); }.services-section .container { z-index: 1; }.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.service-card { position: relative; min-height: 376px; padding: 27px 27px 22px; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); color: #d9e8f9; background: linear-gradient(145deg, rgba(26, 56, 98, .44), rgba(15, 31, 59, .22)); transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .32s ease, background .32s ease, box-shadow .32s ease; }.service-card::before { content: ""; position: absolute; z-index: -1; inset: auto -30% -55%; height: 220px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(46, 219, 255, .22), transparent 62%); transition: opacity .35s ease; }.service-card:hover { z-index: 1; border-color: rgba(95, 224, 255, .48); background: linear-gradient(145deg, rgba(29, 75, 125, .55), rgba(17, 35, 73, .52)); box-shadow: 0 22px 48px rgba(0, 8, 35, .32), inset 0 1px 0 rgba(255,255,255,.09); transform: translateY(-9px); }.service-card:hover::before { opacity: 1; }.service-card-featured { border-color: rgba(117, 186, 255, .35); background: linear-gradient(145deg, rgba(35, 73, 135, .52), rgba(37, 29, 95, .43)); }.service-number { position: absolute; top: 26px; right: 26px; color: #6683ad; font-family: var(--font-mono); font-size: .65rem; }.service-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 31px; border: 1px solid rgba(136, 225, 255, .22); border-radius: 12px; color: #8beeff; background: rgba(45, 211, 255, .09); font-size: 1rem; transition: color .25s, background .25s, transform .35s; }.service-card:hover .service-icon { color: #092243; background: var(--cyan); transform: rotate(-9deg) scale(1.08); }.service-card h3 { margin-bottom: 12px; color: #eff8ff; font-size: 1.27rem; }.service-card > p { min-height: 43px; margin-bottom: 18px; color: #9bb0cd; font-size: .77rem; line-height: 1.67; }.service-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding-right: 7px; }.service-card li { list-style: none; padding: 5px 7px; border: 1px solid rgba(151,190,235,.12); border-radius: 4px; color: #a9bdd7; font-size: .575rem; line-height: 1.25; }.service-link { position: absolute; bottom: 22px; left: 27px; display: inline-flex; align-items: center; gap: 8px; color: #b9f7ff; font-size: .68rem; font-weight: 800; }.service-link i { transition: transform .24s ease; }.service-card:hover .service-link i { transform: translateX(4px); }

/* AI workflow */
.ai-section { background: #edf5ff; }.ai-section::before { content: ""; position: absolute; right: -20%; bottom: -60%; width: 72%; height: 100%; opacity: .6; background: radial-gradient(ellipse, rgba(87, 135, 255, .17), transparent 64%); }.ai-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(42px, 7vw, 100px); align-items: center; }.ai-copy h2 { margin-bottom: 24px; color: #102d59; }.ai-copy > p:not(.eyebrow) { max-width: 450px; margin-bottom: 31px; color: #536987; font-size: .95rem; line-height: 1.84; }.workflow-studio { position: relative; padding: 18px 20px 14px; border: 1px solid #b7d1f2; border-radius: 22px; background: linear-gradient(135deg, #fbfdff, #dcebff); box-shadow: 0 27px 60px rgba(30, 71, 130, .16); }.workflow-studio::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(79, 135, 210, .12); border-radius: 14px; pointer-events: none; }.studio-header, .studio-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #54749d; font-family: var(--font-mono); font-size: .57rem; letter-spacing: .09em; }.studio-header > span:first-child { display: flex; align-items: center; gap: 7px; }.studio-header i { color: #386ffd; }.studio-status { padding: 5px 7px; border: 1px solid rgba(60,132,229,.16); border-radius: 5px; color: #3774c4; background: rgba(255,255,255,.5); font-size: .5rem; }.workflow-map { position: relative; z-index: 1; min-height: 364px; margin: 17px 0 9px; overflow: hidden; border: 1px solid rgba(87,147,226,.17); border-radius: 13px; background-color: rgba(235, 246, 255, .85); background-image: linear-gradient(rgba(61, 124, 220, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(61,124,220,.075) 1px, transparent 1px); background-size: 24px 24px; }.workflow-line { position: absolute; z-index: 0; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(46,127,232,.05), #4eafff, rgba(156,106,255,.65)); }.workflow-line::after { content: ""; position: absolute; top: -3px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(68,153,255,.2), 0 0 9px #50c9ff; }.line-1 { width: 145px; left: 105px; top: 87px; transform: rotate(7deg); }.line-2 { width: 142px; left: 255px; top: 104px; transform: rotate(66deg); }.line-3 { width: 158px; left: 381px; top: 220px; transform: rotate(-48deg); }.line-4 { width: 117px; left: 350px; top: 172px; transform: rotate(155deg); }.line-5 { width: 139px; left: 179px; top: 264px; transform: rotate(-13deg); }.flow-step { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 140px; padding: 10px; border: 1px solid #c5d9f3; border-radius: 9px; background: rgba(255,255,255,.84); box-shadow: 0 8px 19px rgba(53,97,156,.1); }.flow-step > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #3d75bd; background: #e5f0ff; font-size: .66rem; }.flow-step small { display: block; margin-bottom: 2px; color: #6d93c5; font-family: var(--font-mono); font-size: .48rem; }.flow-step strong { display: block; color: #23436e; font-size: .63rem; letter-spacing: -.03em; }.flow-step.active { padding: 12px; border-color: #69cdea; background: #effdff; box-shadow: 0 11px 25px rgba(38,177,227,.2); }.flow-step.active > span { color: #fbffff; background: linear-gradient(140deg, #34bce9, #7566f0); }.flow-step.active b { position: absolute; right: 8px; bottom: -13px; padding: 3px 5px; border-radius: 3px; color: #435cc3; background: #dce7ff; font-family: var(--font-mono); font-size: .42rem; font-weight: 500; }.step-1 { left: 24px; top: 45px; }.step-2 { left: 212px; top: 58px; }.step-3 { right: 30px; top: 165px; }.step-4 { right: 214px; top: 210px; }.step-5 { left: 188px; bottom: 29px; }.step-6 { left: 28px; bottom: 54px; }.studio-footer { padding: 2px 4px 0; }.studio-footer > div:first-child { display: flex; align-items: center; gap: 7px; }.studio-footer .live-ping { width: 6px; height: 6px; }.live-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }.live-bars i { display: block; width: 2px; height: 40%; background: #4da4e8; animation: equalize .9s ease-in-out infinite alternate; }.live-bars i:nth-child(2) { height: 85%; animation-delay: -.4s; }.live-bars i:nth-child(3) { height: 55%; animation-delay: -.2s; }.live-bars i:nth-child(4) { height: 98%; animation-delay: -.65s; }.live-bars i:nth-child(5) { height: 65%; animation-delay: -.32s; }.live-bars i:nth-child(6) { height: 42%; animation-delay: -.1s; }

/* Technology wall */
.technologies-section { background: #08152b; }.tech-controls { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 25px; }.tech-tab { padding: 10px 13px; border: 1px solid rgba(166, 207, 252, .19); border-radius: 7px; color: #9bb4d3; background: transparent; font-size: .67rem; font-weight: 700; transition: color .2s, background .2s, border-color .2s, transform .2s; }.tech-tab:hover { color: #e6f9ff; border-color: rgba(121,226,255,.55); transform: translateY(-2px); }.tech-tab.active { border-color: var(--cyan); color: #0b1b36; background: var(--cyan); box-shadow: 0 8px 20px rgba(47,220,255,.17); }.tech-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; }.tech-card { position: relative; min-height: 131px; padding: 18px 15px; overflow: hidden; border: 1px solid rgba(178,216,255,.14); border-radius: 13px; background: linear-gradient(145deg, rgba(31,64,107,.42), rgba(17,37,70,.21)); transition: transform .27s ease, border-color .27s ease, background .27s ease, opacity .25s ease; }.tech-card::after { content: ""; position: absolute; right: -20px; bottom: -42px; width: 85px; height: 85px; border-radius: 50%; opacity: 0; background: rgba(60,223,255,.17); filter: blur(9px); transition: opacity .28s; }.tech-card:hover { border-color: rgba(102,223,255,.56); background: rgba(39,82,132,.57); transform: translateY(-6px); }.tech-card:hover::after { opacity: 1; }.tech-card i { position: relative; z-index: 1; display: block; margin-bottom: 23px; color: #83e9ff; font-size: 1.45rem; }.tech-card strong { position: relative; z-index: 1; display: block; color: #e6f2ff; font-size: .75rem; letter-spacing: -.03em; }.tech-card span { position: relative; z-index: 1; display: block; margin-top: 5px; color: #829bbd; font-family: var(--font-mono); font-size: .51rem; }.tech-card.is-filtered { display: none; }

/* Industries */
.industries-section { background: linear-gradient(165deg, #f9fbff, #edf5ff); }.industry-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.industry-card { position: relative; min-height: 220px; padding: 25px 20px 22px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.22); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }.industry-card::before { content: ""; position: absolute; z-index: 0; top: -65px; right: -60px; width: 135px; height: 135px; border-radius: 50%; opacity: 0; background: linear-gradient(145deg, rgba(103,211,255,.3), rgba(126,99,255,.2)); filter: blur(7px); transition: opacity .3s; }.industry-card > * { position: relative; z-index: 1; }.industry-card:hover { z-index: 2; background: #113466; box-shadow: 0 18px 31px rgba(21,67,131,.17); transform: scale(1.025); }.industry-card:hover::before { opacity: 1; }.industry-card > span { position: absolute; right: 20px; top: 23px; color: #94a9c7; font-family: var(--font-mono); font-size: .58rem; }.industry-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 31px; border-radius: 10px; color: #2f7bd2; background: #e0edff; font-size: .9rem; transition: background .25s, color .25s, transform .3s; }.industry-card:hover .industry-icon { color: #073361; background: var(--cyan); transform: rotate(-8deg); }.industry-card h3 { margin-bottom: 9px; color: #1b3d6e; font-size: .93rem; transition: color .25s; }.industry-card p { margin: 0; color: #7285a1; font-size: .64rem; line-height: 1.58; transition: color .25s; }.industry-card a { position: absolute; right: 20px; bottom: 20px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #b7cce7; border-radius: 50%; color: #3e70ac; font-size: .55rem; transition: color .2s, border-color .2s, transform .2s; }.industry-card:hover h3 { color: #fff; }.industry-card:hover p { color: #b9d4f6; }.industry-card:hover > span { color: #94c9f5; }.industry-card:hover a { border-color: #b7f3ff; color: var(--cyan); transform: rotate(45deg); }

/* About */
.about-section { background: var(--paper); }.about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 7vw, 105px); align-items: center; }.about-story { min-height: 400px; }.story-visual { position: relative; width: min(100%, 440px); height: 405px; margin-left: auto; border-radius: var(--radius-xl); overflow: hidden; background: #e7f1ff; box-shadow: var(--shadow-md); }.story-visual::before { content: ""; position: absolute; inset: 0; opacity: .76; background-image: linear-gradient(rgba(64,129,215,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(64,129,215,.16) 1px, transparent 1px); background-size: 28px 28px; }.story-visual::after { content: ""; position: absolute; right: -106px; bottom: -106px; width: 300px; height: 300px; border: 1px solid rgba(40,104,194,.3); border-radius: 50%; box-shadow: 0 0 0 32px rgba(68,145,255,.06), 0 0 0 64px rgba(68,145,255,.035); }.story-card { position: absolute; z-index: 1; background: var(--ink-2); box-shadow: 0 20px 40px rgba(15,46,91,.18); }.story-card-top { top: 43px; left: 39px; width: 273px; padding: 24px 25px 26px; border: 1px solid rgba(101, 219, 255, .27); border-radius: 15px; color: var(--white); transform: rotate(-5deg); }.story-label { display: block; margin-bottom: 41px; color: #86bad3; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; }.story-card-top strong { display: block; font-size: 2.2rem; line-height: .98; letter-spacing: -.075em; }.story-card-top em { color: var(--cyan); font-style: normal; }.story-disc { position: absolute; top: 29px; right: 25px; width: 23px; height: 23px; border: 5px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 17px rgba(47,220,255,.5); }.story-card-bottom { right: 29px; bottom: 36px; display: flex; align-items: center; gap: 11px; width: 220px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #c8d9eb; font-size: .66rem; line-height: 1.45; transform: rotate(4.5deg); }.story-card-bottom i { display: grid; flex: 0 0 auto; width: 29px; height: 29px; place-items: center; border-radius: 7px; color: var(--cyan); background: rgba(47,220,255,.1); }.story-ray { position: absolute; z-index: 0; top: 45px; right: -17px; width: 160px; height: 260px; border-radius: 120px; opacity: .75; background: linear-gradient(155deg, #a189ff, #45dcff); filter: blur(25px); transform: rotate(25deg); }
.intro-copy { max-width: 600px; margin-bottom: 23px; color: #465a78; font-size: 1.05rem; line-height: 1.87; }.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 21px 0 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.capability-list span { color: #40536f; font-size: .75rem; font-weight: 700; }.capability-list i { margin-right: 5px; color: #3984e4; font-size: .6rem; }.company-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 27px; }.company-stats strong { display: block; color: #11346a; font-size: clamp(1.45rem, 2.1vw, 2rem); letter-spacing: -.075em; line-height: 1; }.company-stats strong::first-letter { color: inherit; }.company-stats span { display: block; margin-top: 8px; color: #74839b; font-size: .59rem; font-weight: 700; line-height: 1.45; }
.process-rail { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 90px; padding: 21px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.process-title { max-width: 150px; margin: 0; color: #7183a0; font-size: .65rem; font-weight: 700; line-height: 1.55; }.process-rail ol { display: flex; align-items: center; justify-content: space-between; flex: 1; }.process-rail li { list-style: none; }.process-rail li:not(:has(i)) { display: grid; gap: 5px; }.process-rail li span { color: #7396c9; font-family: var(--font-mono); font-size: .56rem; }.process-rail li strong { color: #213a60; font-size: .71rem; }.process-rail li i { margin: 0 14px; color: #9fb3cf; font-size: .58rem; }