/* TCTS Design System — production-ready, dependency-light brand layer */
:root {
  --ink: #05070d;
  --ink-2: #080e19;
  --surface: #0b1220;
  --surface-2: #111827;
  --surface-3: #162033;
  --line: rgba(161, 193, 230, .14);
  --line-strong: rgba(98, 206, 233, .34);
  --text: #f8fbff;
  --muted: #aeb9ca;
  --subtle: #71809a;
  --primary: #00b8d9;
  --secondary: #0a84ff;
  --accent: #19e6c5;
  --warning: #ffbc5e;
  --success: #54e5a7;
  --danger: #ff7d90;
  --radius-sm: .75rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.5rem;
  --shadow: 0 24px 70px rgba(0, 0, 0, .26);
  --shadow-glow: 0 16px 55px rgba(0, 184, 217, .15);
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.75rem; }
body {
  background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16px;
  line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
::selection { color: #021016; background: var(--accent); }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(25, 230, 197, .7); outline-offset: 3px; }

.skip-link { position: absolute; left: 1rem; top: -5rem; padding: .65rem 1rem; z-index: 10000; color: var(--ink); background: var(--accent); border-radius: .5rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.text-muted-custom { color: var(--muted) !important; }
.text-gradient { background: linear-gradient(100deg, #fff 22%, #79e9ff 55%, #4e91ff 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: #82eefa; font-size: .72rem; font-weight: 750; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.section { position: relative; padding: clamp(5rem, 9vw, 9rem) 0; }
.section-tight { padding: clamp(4rem, 7vw, 6rem) 0; }
.section-title { margin: .85rem 0 1rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 4.35rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; }
.section-lead { max-width: 42rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.section-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kicker { color: var(--accent); font-family: var(--font-display); font-size: .77rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.grid-line { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(115, 191, 227, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(115, 191, 227, .035) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent); }

/* Loading and progress */
.site-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #04070d; transition: opacity .45s ease, visibility .45s ease; }
.site-loader.is-hidden { visibility: hidden; opacity: 0; }
.loader-inner { display: grid; justify-items: center; gap: 1rem; }
.loader-logo { width: 5rem; height: 5rem; object-fit: contain; background: #fff; border-radius: 1rem; padding: .6rem; animation: loaderPulse 1.8s ease-in-out infinite; }
.loader-line { width: 9rem; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.loader-line::before { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--secondary), var(--accent)); animation: loaderTrack 1.2s ease-in-out infinite; }
@keyframes loaderPulse { 50% { filter: drop-shadow(0 0 20px rgba(25,230,197,.7)); transform: scale(1.04); } }
@keyframes loaderTrack { from { transform: translateX(-120%); } to { transform: translateX(340%); } }
.scroll-progress { position: fixed; z-index: 1200; inset: 0 auto auto 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 14px var(--primary); }
.page-transition { animation: pageEnter .7s cubic-bezier(.22,.8,.22,1) both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1100; padding: 1rem 0; transition: padding .3s ease, background .3s ease, border-color .3s ease; }
.site-header.is-scrolled { padding: .55rem 0; background: rgba(5, 7, 13, .8); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .78rem; min-width: 0; }
.brand-mark { width: 2.55rem; height: 2.55rem; flex: 0 0 auto; object-fit: contain; padding: .18rem; background: #fff; border-radius: .45rem; }
.brand-copy { display: grid; gap: .02rem; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: .96rem; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.brand-tag { color: var(--muted); font-size: .59rem; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: .1rem; }
.nav-link-custom { position: relative; padding: .52rem .7rem; color: #c5cedc; font-size: .86rem; font-weight: 550; transition: color .2s ease; }
.nav-link-custom::after { content: ""; position: absolute; right: .7rem; bottom: .28rem; left: .7rem; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--accent); transition: transform .25s ease; }
.nav-link-custom:hover, .nav-link-custom.active { color: #fff; }
.nav-link-custom:hover::after, .nav-link-custom.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: .8rem; }
.menu-toggle { display: none; position: relative; width: 2.9rem; height: 2.9rem; border: 1px solid var(--line); border-radius: .85rem; color: #fff; background: rgba(255,255,255,.04); }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { position: absolute; left: .77rem; width: 1.3rem; height: 1px; background: currentColor; content: ""; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle span { top: 1.41rem; }.menu-toggle::before { top: 1rem; }.menu-toggle::after { top: 1.82rem; }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }.menu-toggle[aria-expanded="true"]::before { transform: translateY(.41rem) rotate(45deg); }.menu-toggle[aria-expanded="true"]::after { transform: translateY(-.41rem) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 1090; display: grid; align-content: center; gap: 1.3rem; padding: 6rem 2rem 2rem; visibility: hidden; opacity: 0; background: rgba(4,7,13,.96); backdrop-filter: blur(18px); transition: opacity .25s ease, visibility .25s ease; }
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu a { color: #edf5ff; font-family: var(--font-display); font-size: clamp(1.55rem,6vw,2.2rem); font-weight: 550; letter-spacing: -.04em; }
.mobile-menu a.active { color: var(--accent); }
.mobile-menu .nav-note { max-width: 21rem; color: var(--muted); font-size: .92rem; }

/* Buttons / common pieces */
.btn-tcts { --btn-bg: linear-gradient(100deg, #00aeca, #0a84ff); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; overflow: hidden; min-height: 3.1rem; padding: .78rem 1.25rem; border: 1px solid transparent; border-radius: .8rem; color: #fff; background: var(--btn-bg); box-shadow: 0 10px 28px rgba(0, 134, 223, .22); font-size: .88rem; font-weight: 700; line-height: 1; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.btn-tcts::before { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%); transform: translateX(-150%); transition: transform .55s ease; }
.btn-tcts:hover { color: white; box-shadow: 0 15px 34px rgba(0,184,217,.32); transform: translateY(-2px); }
.btn-tcts:hover::before { transform: translateX(150%); }
.btn-tcts-outline { --btn-bg: transparent; border-color: rgba(202,229,255,.22); color: #eaf5ff; background: rgba(255,255,255,.03); box-shadow: none; }
.btn-tcts-outline:hover { border-color: rgba(25,230,197,.7); color: var(--accent); background: rgba(25,230,197,.06); box-shadow: none; }
.btn-small { min-height: 2.5rem; padding: .6rem .92rem; font-size: .78rem; }
.arrow { font-size: 1.08em; line-height: 0; transition: transform .2s ease; }.btn-tcts:hover .arrow, .text-link:hover .arrow { transform: translateX(3px); }
.text-link { display: inline-flex; align-items: center; gap: .45rem; color: #d9faff; font-size: .87rem; font-weight: 700; }.text-link:hover { color: var(--accent); }
.badge-soft { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .6rem; border: 1px solid rgba(25,230,197,.24); border-radius: 99px; color: #92f4df; background: rgba(25,230,197,.08); font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.status-dot { width: .42rem; height: .42rem; border-radius: 99px; background: var(--success); box-shadow: 0 0 0 .22rem rgba(84,229,167,.12); }
.glass-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(17,28,45,.8), rgba(8,14,25,.6)); box-shadow: var(--shadow); backdrop-filter: blur(13px); }
.border-gradient { position: relative; border: 1px solid transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(120deg, rgba(25,230,197,.55), rgba(10,132,255,.08), rgba(255,255,255,.16)) border-box; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: min(900px, 100svh); padding: 9.75rem 0 4.5rem; overflow: hidden; }
.hero::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at 77% 37%, rgba(0,144,213,.15), transparent 22%), radial-gradient(circle at 12% 72%, rgba(25,230,197,.09), transparent 24%), linear-gradient(115deg, #05070d, #07101d 53%, #061322); }
.hero-mesh { position: absolute; z-index: -1; width: min(58vw, 850px); aspect-ratio: 1; right: -10vw; top: 7%; border-radius: 42% 58% 64% 36% / 44% 35% 65% 56%; opacity: .83; background: conic-gradient(from 140deg, rgba(10,132,255,.04), rgba(0,184,217,.62), rgba(25,230,197,.1), rgba(82,119,255,.48), rgba(10,132,255,.04)); filter: blur(4px); animation: meshDrift 14s ease-in-out infinite alternate; }
.hero-mesh::before { position: absolute; inset: 17%; content: ""; border: 1px solid rgba(158,237,255,.4); border-radius: inherit; box-shadow: inset 0 0 50px rgba(0,184,217,.17), 0 0 70px rgba(0,184,217,.14); transform: rotate(26deg); }
.hero-orbit { position: absolute; z-index: -1; right: 8%; top: 20%; width: min(40vw, 560px); aspect-ratio: 1; border: 1px solid rgba(151,221,255,.15); border-radius: 50%; animation: spin 27s linear infinite; }
.hero-orbit::before, .hero-orbit::after { position: absolute; content: ""; border-radius: 50%; background: var(--accent); box-shadow: 0 0 19px var(--accent); }.hero-orbit::before { width: .42rem; height: .42rem; top: 11%; left: 14%; }.hero-orbit::after { width: .28rem; height: .28rem; right: 8%; bottom: 25%; background: #73a8ff; }
@keyframes meshDrift { from { transform: translate3d(0,0,0) rotate(-8deg) scale(.96); } to { transform: translate3d(-4%,4%,0) rotate(9deg) scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-copy { max-width: 55rem; }
.hero-brand-lockup { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: .95rem; }.hero-brand-lockup img { width: 2.75rem; height: 2.75rem; padding: .2rem; border-radius: .5rem; object-fit: contain; background: #fff; box-shadow: 0 10px 26px rgba(0,184,217,.15); }.hero-brand-lockup span { color: #aabaca; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { max-width: 54rem; margin: 1.15rem 0 1.35rem; font-family: var(--font-display); font-size: clamp(3.15rem, 7vw, 6.75rem); font-weight: 630; letter-spacing: -.072em; line-height: .94; }
.hero-lead { max-width: 43rem; color: #c6d1e0; font-size: clamp(1.05rem, 1.6vw, 1.24rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.15rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.75rem; color: #a8b6c9; font-size: .82rem; }.hero-proof span { display: inline-flex; gap: .42rem; align-items: center; }.hero-proof svg { color: var(--accent); }
.hero-card { position: absolute; right: max(3rem, 10vw); bottom: 10%; width: min(22rem, 31vw); padding: 1.15rem; border: 1px solid rgba(182,228,255,.2); border-radius: 1.1rem; background: rgba(7,18,32,.62); box-shadow: 0 18px 55px rgba(0,0,0,.25); backdrop-filter: blur(15px); animation: float 5s ease-in-out infinite; }
.hero-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; color: #e8f7ff; font-size: .73rem; font-weight: 700; }.hero-card-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.04em; }.hero-bars { display: flex; align-items: end; gap: .35rem; height: 3.2rem; margin-top: .8rem; }.hero-bars i { display: block; width: 12%; border-radius: .22rem .22rem 0 0; background: linear-gradient(to top, var(--secondary), var(--accent)); opacity: .8; }.hero-bars i:nth-child(1) { height: 34%; }.hero-bars i:nth-child(2) { height: 57%; }.hero-bars i:nth-child(3) { height: 46%; }.hero-bars i:nth-child(4) { height: 78%; }.hero-bars i:nth-child(5) { height: 69%; }.hero-bars i:nth-child(6) { height: 94%; }
@keyframes float { 50% { transform: translateY(-11px); } }
.scroll-cue { position: absolute; right: 5%; bottom: 2rem; display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; }.scroll-cue i { width: 1px; height: 2.5rem; background: linear-gradient(var(--accent), transparent); animation: scrollCue 1.7s infinite; }@keyframes scrollCue { 50% { transform: scaleY(.45); transform-origin: top; } }

/* Stats / brands */
.stat-strip { position: relative; z-index: 2; margin-top: -2rem; }.stat-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11,18,32,.8); box-shadow: var(--shadow); backdrop-filter: blur(12px); }.stat { padding: 1.25rem 1.5rem; border-right: 1px solid var(--line); }.stat:last-child { border: 0; }.stat-number { display: block; color: #fff; font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 650; letter-spacing: -.06em; line-height: 1; }.stat-label { display: block; margin-top: .4rem; color: var(--muted); font-size: .73rem; font-weight: 600; }
.trust-strip { padding: 4rem 0 1rem; }.trust-label { margin-bottom: 1.35rem; color: var(--subtle); font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-align: center; text-transform: uppercase; }.logo-cloud { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: center; }.logo-cloud div { padding: .8rem; color: #8491a6; font-family: var(--font-display); font-size: clamp(.88rem,1.4vw,1.15rem); font-weight: 650; letter-spacing: -.04em; text-align: center; opacity: .8; transition: color .2s ease; }.logo-cloud div:hover { color: #d9fbff; }

/* Cards and content modules */
.service-card, .product-card, .feature-card, .case-card, .testimonial-card, .role-card { height: 100%; padding: 1.55rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17,27,44,.92), rgba(10,17,30,.76)); transition: transform .32s cubic-bezier(.22,.8,.22,1), border-color .32s ease, box-shadow .32s ease, background .32s ease; }
.service-card:hover, .product-card:hover, .feature-card:hover, .case-card:hover, .testimonial-card:hover, .role-card:hover { border-color: rgba(25,230,197,.44); background: linear-gradient(145deg, rgba(19,35,53,.96), rgba(9,22,36,.93)); box-shadow: var(--shadow-glow); transform: translateY(-7px); }
.icon-box { display: grid; place-items: center; width: 2.95rem; height: 2.95rem; margin-bottom: 1.3rem; border: 1px solid rgba(75,209,235,.28); border-radius: .85rem; color: #abf6ff; background: linear-gradient(135deg, rgba(0,184,217,.17), rgba(10,132,255,.08)); }.icon-box svg { width: 1.35rem; height: 1.35rem; }.icon-box.lg { width: 3.7rem; height: 3.7rem; border-radius: 1rem; }.icon-box.lg svg { width: 1.65rem; height: 1.65rem; }
.card-title { margin-bottom: .55rem; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.04em; }.card-copy { color: var(--muted); font-size: .9rem; }.card-link { display: inline-flex; gap: .45rem; align-items: center; margin-top: 1.1rem; color: #e4f8ff; font-size: .8rem; font-weight: 700; }.card-link:hover { color: var(--accent); }.card-link .arrow { color: var(--accent); }
.service-number { color: #75dbea; font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.split-visual { position: relative; min-height: 31rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(145deg, #0d2032, #07111e 54%, #0c1529); }.split-visual::after { position: absolute; inset: auto 10% 10%; height: 45%; content: ""; border: 1px solid rgba(147,240,255,.25); border-radius: 1.2rem; background: linear-gradient(135deg, rgba(0,184,217,.18), rgba(25,230,197,.04)); transform: rotate(-7deg); box-shadow: 0 24px 65px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.14); }.visual-ring { position: absolute; width: 23rem; height: 23rem; top: 12%; left: 10%; border: 1px solid rgba(55,230,232,.25); border-radius: 50%; box-shadow: inset 0 0 70px rgba(0,184,217,.14); animation: spin 20s linear infinite reverse; }.visual-ring::before { position: absolute; top: -3px; left: 30%; width: .48rem; height: .48rem; content: ""; border-radius: 50%; background: var(--accent); box-shadow: 0 0 15px var(--accent); }.visual-copy { position: absolute; z-index: 1; left: 9%; top: 13%; max-width: 15rem; color: #d5faff; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }.visual-code { position: absolute; z-index: 2; right: 8%; bottom: 12%; width: 48%; padding: 1rem; border: 1px solid rgba(148,233,255,.25); border-radius: .9rem; color: #c8edff; background: rgba(3,13,25,.7); box-shadow: var(--shadow); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .67rem; line-height: 1.8; }.visual-code span { color: #77f2d9; }
.feature-card { padding: 1.45rem; }.feature-card .card-title { font-size: 1rem; }.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; }.feature-number { float: right; color: rgba(190,232,255,.22); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.process-list { counter-reset: steps; }.process-item { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }.process-item::before { counter-increment: steps; content: "0" counter(steps); color: var(--accent); font-family: var(--font-display); font-size: .85rem; font-weight: 700; letter-spacing: .06em; }.process-item h3 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -.03em; }.process-item p { margin: 0; color: var(--muted); font-size: .88rem; }
.industry-grid { display: flex; flex-wrap: wrap; gap: .7rem; }.industry-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .7rem; color: #c9d8e8; background: rgba(255,255,255,.018); font-size: .78rem; font-weight: 650; transition: .2s ease; }.industry-pill:hover { border-color: var(--line-strong); color: var(--accent); transform: translateY(-2px); }.industry-pill b { color: var(--primary); font-size: .95rem; }
.metric { display: grid; gap: .2rem; }.metric strong { color: #e8fbff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 650; letter-spacing: -.06em; }.metric span { color: var(--muted); font-size: .7rem; font-weight: 600; }
.case-top { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }.case-type { color: #79ebdf; font-size: .67rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }.case-art { position: relative; height: 12.5rem; margin: 1.35rem 0; overflow: hidden; border: 1px solid rgba(195,231,255,.11); border-radius: .9rem; background: linear-gradient(135deg, #113554, #091625 53%, #0a3850); }.case-art::before, .case-art::after { position: absolute; content: ""; border-radius: 1rem; background: linear-gradient(130deg, rgba(116,236,255,.85), rgba(12,136,255,.28)); box-shadow: 0 15px 30px rgba(0,0,0,.27); }.case-art::before { width: 65%; height: 72%; right: 9%; bottom: 0; transform: skewY(-13deg); }.case-art::after { width: 36%; height: 42%; left: 10%; top: 16%; background: linear-gradient(140deg, rgba(25,230,197,.8), rgba(14,69,151,.5)); }.case-art.art-violet { background: linear-gradient(135deg, #222047, #0d1427 54%, #263466); }.case-art.art-violet::before { background: linear-gradient(130deg, #a48dff, #2a84ff55); }.case-art.art-emerald { background: linear-gradient(135deg, #0f3a3b, #091624 54%, #154942); }.case-art.art-emerald::after { background: linear-gradient(140deg, #61e6bd, #187d9a); }
.quote-mark { color: var(--accent); font-family: Georgia, serif; font-size: 3rem; line-height: .7; }.testimonial-card blockquote { margin: .7rem 0 1.35rem; color: #d5dfeb; font-size: .98rem; line-height: 1.65; }.person { display: flex; gap: .7rem; align-items: center; }.avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #06202b; background: linear-gradient(135deg, #90f5f5, #4d8cff); font-size: .7rem; font-weight: 800; }.person strong { display: block; color: #edf7ff; font-size: .78rem; }.person span { display: block; color: var(--muted); font-size: .67rem; }
.stack-row { display: flex; flex-wrap: wrap; gap: .55rem; }.stack-chip { padding: .48rem .72rem; border: 1px solid var(--line); border-radius: .5rem; color: #b9c8d7; background: rgba(255,255,255,.025); font-size: .72rem; font-weight: 650; }.stack-chip:hover { color: var(--accent); border-color: rgba(25,230,197,.36); }

/* Inner pages */
.page-hero { position: relative; padding: 11rem 0 5.5rem; overflow: hidden; background: radial-gradient(circle at 80% 35%, rgba(10,132,255,.17), transparent 27%), radial-gradient(circle at 12% 80%, rgba(25,230,197,.08), transparent 20%), linear-gradient(135deg, #05070d, #09121e); }.page-hero::after { position: absolute; inset: auto -12% -7rem auto; width: 40rem; height: 20rem; content: ""; border: 1px solid rgba(59,215,241,.17); border-radius: 50%; transform: rotate(-15deg); }.breadcrumb-custom { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.35rem; color: #9babbe; font-size: .75rem; }.breadcrumb-custom a:hover { color: var(--accent); }.breadcrumb-custom span { color: #58677b; }.page-title { position: relative; z-index: 1; max-width: 51rem; margin: 0 0 1.2rem; font-family: var(--font-display); font-size: clamp(3rem, 6.5vw, 5.6rem); font-weight: 630; letter-spacing: -.07em; line-height: .95; }.page-lead { position: relative; z-index: 1; max-width: 43rem; margin: 0; color: #bdcad9; font-size: clamp(1rem, 1.5vw, 1.18rem); }.page-hero-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.content-prose { max-width: 54rem; }.content-prose h2 { margin: 3rem 0 1rem; font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.45rem); font-weight: 620; letter-spacing: -.05em; }.content-prose h3 { margin: 2rem 0 .65rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.04em; }.content-prose p, .content-prose li { color: var(--muted); }.content-prose ul { padding-left: 1.1rem; }.content-prose li { margin: .45rem 0; }
.timeline { position: relative; padding-left: 2rem; }.timeline::before { position: absolute; top: .4rem; bottom: .5rem; left: .38rem; width: 1px; content: ""; background: linear-gradient(var(--accent), rgba(10,132,255,.05)); }.timeline-item { position: relative; padding: 0 0 2.1rem 1.3rem; }.timeline-item::before { position: absolute; top: .26rem; left: -2rem; width: .8rem; height: .8rem; content: ""; border: 2px solid var(--primary); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 .28rem rgba(0,184,217,.08); }.timeline-date { color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.timeline-item h3 { margin: .25rem 0 .35rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }.timeline-item p { max-width: 39rem; margin: 0; color: var(--muted); font-size: .88rem; }
.service-detail { padding: 1.7rem; border-top: 1px solid var(--line); }.service-detail:first-child { border-top: 0; }.service-detail h3 { margin: .35rem 0 .65rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.04em; }.service-detail p { max-width: 44rem; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }.deliverable-list { display: flex; flex-wrap: wrap; gap: .45rem; }.deliverable-list span { padding: .33rem .55rem; border: 1px solid rgba(104,204,227,.2); border-radius: .4rem; color: #b3d8e4; background: rgba(0,184,217,.045); font-size: .68rem; font-weight: 650; }
.product-card { display: flex; flex-direction: column; }.product-card .product-top { display: flex; justify-content: space-between; gap: .7rem; align-items: start; }.product-card .product-code { color: var(--primary); font-family: ui-monospace, monospace; font-size: .65rem; letter-spacing: .08em; }.product-card .product-price { color: var(--accent); font-size: .74rem; font-weight: 750; }.product-card ul { margin: 1.1rem 0 1.35rem; padding: 0; list-style: none; color: #b2c0d0; font-size: .8rem; }.product-card li { display: flex; gap: .5rem; margin: .45rem 0; }.product-card li::before { content: "✓"; color: var(--accent); }.product-card .btn-tcts { margin-top: auto; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }.filter-btn { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .6rem; color: #b6c6d6; background: rgba(255,255,255,.025); font-size: .75rem; font-weight: 700; transition: .2s ease; }.filter-btn:hover, .filter-btn.is-active { border-color: rgba(25,230,197,.5); color: var(--accent); background: rgba(25,230,197,.08); }.portfolio-item { transition: opacity .25s ease, transform .25s ease; }.portfolio-item.is-hidden { display: none; }
.modal-content-custom { border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); background: #0b1422; box-shadow: var(--shadow); }.modal-header-custom { border-bottom-color: var(--line); }.modal-close { width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: .6rem; color: #d8e9fa; background: transparent; }.modal-close:hover { color: var(--accent); border-color: var(--line-strong); }
.benefit-list { display: grid; gap: .9rem; }.benefit { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; align-items: start; }.benefit b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .5rem; color: #06141f; background: linear-gradient(135deg, var(--accent), #5fa5ff); font-size: .78rem; }.benefit h4 { margin: 0 0 .1rem; font-size: .9rem; }.benefit p { margin: 0; color: var(--muted); font-size: .8rem; }
.form-card { padding: clamp(1.35rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(16,30,48,.94), rgba(7,13,24,.9)); box-shadow: var(--shadow); }.form-label { margin-bottom: .43rem; color: #dbe8f5; font-size: .76rem; font-weight: 700; }.form-control-custom, .form-select-custom { min-height: 3rem; border: 1px solid rgba(162,197,228,.19); border-radius: .7rem; color: #edf7ff; background: rgba(2,9,18,.45); font-size: .87rem; }.form-control-custom::placeholder { color: #6f7d90; }.form-control-custom:focus, .form-select-custom:focus { border-color: rgba(25,230,197,.66); color: white; background: rgba(2,9,18,.65); box-shadow: 0 0 0 .22rem rgba(25,230,197,.1); }.form-select-custom option { color: #111; background: white; }.invalid-feedback { color: #ff9aa9; font-size: .72rem; }.form-success { display: none; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid rgba(84,229,167,.25); border-radius: .7rem; color: #9df2c5; background: rgba(84,229,167,.08); font-size: .84rem; }.form-success.is-visible { display: block; }
.contact-detail { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }.contact-detail:last-child { border-bottom: 0; }.contact-detail .icon-box { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin: 0; border-radius: .7rem; }.contact-detail h3 { margin: .08rem 0 .18rem; font-size: .9rem; }.contact-detail p, .contact-detail a { margin: 0; color: var(--muted); font-size: .82rem; }.contact-detail a:hover { color: var(--accent); }.map-placeholder { position: relative; min-height: 19rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, #092335, #07111f); }.map-placeholder::before { position: absolute; inset: 0; content: ""; opacity: .25; background-image: linear-gradient(25deg, transparent 48%, #4fbada 49%, #4fbada 51%, transparent 52%), linear-gradient(-25deg, transparent 48%, #34a0db 49%, #34a0db 51%, transparent 52%), radial-gradient(circle at 52% 44%, #1fd5bb 0 2px, transparent 3px); background-size: 9rem 7rem, 9rem 7rem, 100% 100%; }.map-pin { position: absolute; top: 43%; left: 51%; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50% 50% 50% 0; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 0 0 .55rem rgba(0,184,217,.14), 0 0 34px rgba(0,184,217,.55); transform: rotate(-45deg); }.map-pin svg { width: 1.2rem; transform: rotate(45deg); }

.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.25rem 0; border: 0; color: #e8f4ff; background: transparent; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.03em; text-align: left; }.faq-trigger span:last-child { color: var(--accent); font-size: 1.35rem; font-weight: 400; transition: transform .2s ease; }.faq-trigger[aria-expanded="true"] span:last-child { transform: rotate(45deg); }.faq-answer { max-width: 48rem; padding: 0 2.3rem 1.35rem 0; color: var(--muted); font-size: .9rem; }

/* Call-to-action and footer */
.cta-panel { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4.2rem); border: 1px solid rgba(130,227,255,.25); border-radius: var(--radius-xl); background: linear-gradient(110deg, #0b263a, #0e1e42 55%, #10204a); }.cta-panel::before { position: absolute; width: 36rem; height: 36rem; right: -15rem; top: -25rem; content: ""; border: 1px solid rgba(123,237,239,.25); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(0,184,217,.025), 0 0 0 7rem rgba(0,184,217,.02); }.cta-panel > * { position: relative; z-index: 1; }.cta-panel h2 { max-width: 45rem; margin: .8rem 0 1rem; font-family: var(--font-display); font-size: clamp(2rem,4.5vw,3.8rem); font-weight: 620; letter-spacing: -.06em; line-height: 1.04; }.cta-panel p { max-width: 38rem; color: #c8d8e9; }
.site-footer { position: relative; margin-top: 7rem; padding: 5rem 0 1.5rem; overflow: hidden; border-top: 1px solid var(--line); background: #070c15; }.site-footer::before { position: absolute; top: -13rem; left: -8rem; width: 30rem; height: 30rem; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(0,184,217,.11), transparent 68%); pointer-events: none; }.footer-brand-copy { max-width: 19rem; margin-top: 1.2rem; color: var(--muted); font-size: .84rem; }.footer-title { margin-bottom: 1.15rem; color: #edf7ff; font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.footer-links { display: grid; gap: .52rem; padding: 0; margin: 0; list-style: none; }.footer-links a { color: #aab9c9; font-size: .82rem; transition: color .2s ease, transform .2s ease; }.footer-links a:hover { color: var(--accent); transform: translateX(3px); }.newsletter { display: flex; gap: .45rem; padding: .35rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.035); }.newsletter input { min-width: 0; flex: 1; padding: .3rem .5rem; border: 0; outline: 0; color: white; background: transparent; font-size: .78rem; }.newsletter input::placeholder { color: #7a899b; }.socials { display: flex; gap: .55rem; margin-top: 1.2rem; }.social-link { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: .6rem; color: #b9c8d9; background: rgba(255,255,255,.025); font-size: .68rem; font-weight: 800; transition: .2s ease; }.social-link:hover { border-color: var(--primary); color: var(--accent); transform: translateY(-2px); }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); color: #748397; font-size: .72rem; }.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }.footer-legal a:hover { color: var(--accent); }
.back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(125,215,238,.35); border-radius: .8rem; color: #e8fbff; background: rgba(8,17,30,.82); box-shadow: 0 10px 28px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .25s ease; }.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }.back-to-top:hover { color: var(--accent); border-color: var(--accent); }

/* Reveal animation and responsive detail */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.22,.8,.22,1), transform .75s cubic-bezier(.22,.8,.22,1); }.reveal-visible { opacity: 1; transform: none; } [data-reveal="delay-1"] { transition-delay: .1s; } [data-reveal="delay-2"] { transition-delay: .2s; } [data-reveal="delay-3"] { transition-delay: .3s; }
@media (max-width: 991.98px) { .desktop-nav, .nav-actions .btn-tcts { display: none; }.menu-toggle { display: block; }.site-header { padding: .7rem 0; }.hero { min-height: auto; padding-top: 9rem; padding-bottom: 9rem; }.hero-mesh { width: 90vw; right: -35vw; top: 17%; opacity: .5; }.hero-card { right: 5%; bottom: 2.3rem; width: 13.5rem; }.hero-card-title { font-size: .9rem; }.scroll-cue { display: none; }.page-hero { padding-top: 8.6rem; }.split-visual { min-height: 25rem; }.section-head { display: block; }.section-head .btn-tcts { margin-top: 1.3rem; }.footer-bottom { display: block; }.footer-legal { margin-top: .7rem; } }
@media (max-width: 767.98px) { .brand-tag { display: none; }.brand-name { font-size: .88rem; }.hero-title { font-size: clamp(3.05rem, 13vw, 4.5rem); }.hero-card { display: none; }.hero-proof { margin-top: 2rem; }.stat-strip { margin-top: -1rem; }.stat-strip-inner { grid-template-columns: repeat(2,1fr); }.stat:nth-child(2) { border-right: 0; }.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.stat { padding: 1rem; }.logo-cloud { grid-template-columns: repeat(3,1fr); }.logo-cloud div:nth-child(n+7) { display: none; }.section { padding: 4.5rem 0; }.section-title { font-size: clamp(2.25rem, 10vw, 3.25rem); }.page-title { font-size: clamp(2.85rem, 13vw, 4.1rem); }.page-hero { padding-bottom: 4.3rem; }.split-visual { min-height: 20rem; }.visual-ring { width: 15rem; height: 15rem; }.visual-copy { font-size: 1.05rem; }.visual-code { font-size: .5rem; }.cta-panel { border-radius: 1.5rem; }.site-footer { margin-top: 4.5rem; }.footer-bottom { margin-top: 2.5rem; }.filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }.filter-btn { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }