:root {
    --ink: #101b30;
    --ink-soft: #516078;
    --line: #dfe8f4;
    --surface: #ffffff;
    --surface-soft: #f6f9fe;
    --blue: #2f66ff;
    --blue-deep: #1641be;
    --blue-pale: #e9f1ff;
    --sky: #a9d5ff;
    --lime: #dfff79;
    --shadow: 0 20px 56px rgba(34, 73, 138, .11);
    --font: "Segoe UI", Arial, sans-serif;
    --mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-width: 320px; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { max-width: 100%; }
img { height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button { cursor: pointer; }
::selection { background: #c9dcff; color: var(--ink); }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; background: var(--ink); color: white; border-radius: 0 0 10px 10px; padding: 10px 16px; transition: top .2s ease; }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: fixed; z-index: 30; top: 0; width: 100%; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .91); border-color: rgba(214, 225, 240, .84); box-shadow: 0 6px 30px rgba(28, 54, 99, .06); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; height: 82px; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.site-brand { display: inline-flex; flex: 0 0 auto; gap: 9px; min-width: 0; white-space: nowrap; }
.site-mark-wrap { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 32px; }
.site-mark-image { display: block; width: 32px; max-width: none; height: 32px; }
.site-wordmark { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; color: #0b1b38; letter-spacing: -.05em; }
.site-wordmark b { font-size: 18px; font-weight: 800; line-height: 1; }
.site-wordmark em { color: #2864e9; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: -.03em; }
.brand-dot { color: var(--blue); }
.brand-glyph { position: relative; display: inline-flex; width: 24px; height: 24px; transform: rotate(-15deg); }
.brand-glyph i { position: absolute; display: block; width: 9px; height: 9px; border-radius: 2px; background: var(--blue); }
.brand-glyph i:nth-child(1) { left: 1px; bottom: 1px; }
.brand-glyph i:nth-child(2) { left: 10px; top: 5px; background: var(--ink); }
.brand-glyph i:nth-child(3) { right: 0; bottom: 1px; background: #91befc; }
.desktop-nav { display: flex; align-items: center; gap: 29px; margin-left: auto; }
.desktop-nav a { position: relative; color: #344159; font-size: 16px; font-weight: 700; transition: color .2s ease; }
.desktop-nav a::after { position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; border-radius: 2px; background: var(--blue); content: ""; transition: width .2s ease; }
.desktop-nav a:hover { color: var(--blue); }
.desktop-nav a:hover::after { width: 100%; }
.desktop-nav a.is-active { color: var(--blue); }
.desktop-nav a.is-active::after { width: 100%; }
.language-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #d4e0f2; border-radius: 999px; padding: 3px; background: rgba(255,255,255,.68); box-shadow: 0 5px 16px rgba(32,66,119,.05); }.language-switch a { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #60708b; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .03em; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }.language-switch a:hover { color: var(--blue); transform: translateY(-1px); }.language-switch a.is-active { background: var(--blue); box-shadow: 0 3px 9px rgba(47,102,255,.31); color: #fff; }.language-switch-mobile { display: none; }
.header-cta { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d0ddf2; border-radius: 999px; padding: 10px 15px; color: var(--ink); font-size: 15px; font-weight: 800; transition: all .2s ease; }
.header-cta span { color: var(--blue); font-size: 17px; line-height: .6; }
.header-cta:hover { border-color: var(--blue); background: var(--blue); color: white; transform: translateY(-2px); }
.header-cta:hover span { color: white; }
.menu-toggle, .mobile-nav { display: none; }
.site-header.header-on-dark .brand { color: #fff; }
.site-header.header-on-dark .site-mark-image { filter: brightness(0) invert(1); }
.site-header.header-on-dark .site-wordmark { color: #fff; }
.site-header.header-on-dark .site-wordmark em { color: #d2ff25; }
.site-header.header-on-dark .brand-glyph i:nth-child(2) { background: #fff; }
.site-header.header-on-dark .desktop-nav a { color: rgba(255,255,255,.92); font-size: 17px; }
.site-header.header-on-dark .desktop-nav a::after { background: #d2ff25; }
.site-header.header-on-dark .desktop-nav a:hover { color: #d2ff25; }
.site-header.header-on-dark .desktop-nav a.is-active { color: #fff; }
.site-header.header-on-dark .language-switch { border-color: rgba(255,255,255,.46); background: rgba(255,255,255,.08); box-shadow: none; }.site-header.header-on-dark .language-switch a { color: rgba(255,255,255,.75); }.site-header.header-on-dark .language-switch a:hover { color: #d2ff25; }.site-header.header-on-dark .language-switch a.is-active { background: #d2ff25; box-shadow: none; color: #081008; }
.site-header.header-on-dark .header-cta { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; }
.site-header.header-on-dark .header-cta span { color: #d2ff25; }
.site-header.header-on-dark .header-cta:hover { border-color: #d2ff25; background: #d2ff25; color: #081008; }
.site-header.header-on-dark .header-cta:hover span { color: #081008; }
.site-header.header-on-dark.is-scrolled .brand { color: var(--ink); }
.site-header.header-on-dark.is-scrolled .site-mark-image { filter: none; }
.site-header.header-on-dark.is-scrolled .site-wordmark { color: #0b1b38; }
.site-header.header-on-dark.is-scrolled .site-wordmark em { color: #2864e9; }
.site-header.header-on-dark.is-scrolled .brand-glyph i:nth-child(2) { background: var(--ink); }
.site-header.header-on-dark.is-scrolled .desktop-nav a { color: #344159; }
.site-header.header-on-dark.is-scrolled .desktop-nav a:hover, .site-header.header-on-dark.is-scrolled .desktop-nav a.is-active { color: var(--blue); }
.site-header.header-on-dark.is-scrolled .language-switch { border-color: #d4e0f2; background: rgba(255,255,255,.68); }.site-header.header-on-dark.is-scrolled .language-switch a { color: #60708b; }.site-header.header-on-dark.is-scrolled .language-switch a:hover { color: var(--blue); }.site-header.header-on-dark.is-scrolled .language-switch a.is-active { background: var(--blue); color: #fff; }
.site-header.header-on-dark.is-scrolled .header-cta { border-color: #d0ddf2; background: transparent; color: var(--ink); }
.site-header.header-on-dark.is-scrolled .header-cta span { color: var(--blue); }
.site-header.header-on-dark.is-scrolled .header-cta:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.site-header.header-on-dark.is-scrolled .header-cta:hover span { color: #fff; }

.hero { position: relative; min-height: 745px; padding: 163px 0 104px; isolation: isolate; overflow: hidden; background: linear-gradient(112deg, #fff 0%, #fff 52%, #f5f9ff 100%); }
.hero-grid { position: absolute; z-index: -3; inset: 0; opacity: .72; background-image: linear-gradient(rgba(58, 102, 177, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 102, 177, .075) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 64%, transparent 100%); }
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(18px); pointer-events: none; }
.hero-glow-one { top: -170px; right: -70px; width: 620px; height: 570px; background: radial-gradient(circle, rgba(147, 197, 253, .45), rgba(221, 236, 255, 0) 68%); }
.hero-glow-two { bottom: -340px; left: 24%; width: 680px; height: 420px; background: radial-gradient(circle, rgba(218, 231, 255, .72), rgba(255,255,255,0) 68%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr); align-items: center; gap: 30px; }
.hero-copy { position: relative; z-index: 2; max-width: 612px; }
.eyebrow, .section-kicker { margin: 0 0 21px; color: var(--blue-deep); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #dce7f8; border-radius: 99px; background: rgba(255,255,255,.66); box-shadow: 0 8px 26px rgba(41, 77, 142, .05); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(47,102,255,.12); animation: pulse 2.4s infinite; }
.hero h1 { max-width: 670px; margin: 0; color: #101c34; font-size: clamp(45px, 5.05vw, 74px); font-weight: 800; letter-spacing: -.07em; line-height: 1.04; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-text { max-width: 520px; margin: 27px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 35px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 11px; padding: 14px 18px; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.button span { font-size: 20px; line-height: .6; transition: transform .2s ease; }
.button-call .phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; font-size: inherit; line-height: 1; }
.button-call .phone-icon svg { width: 18px; height: 18px; }
.button:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(33, 70, 142, .18); }
.button:hover span { transform: translate(2px, -2px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 10px 20px rgba(47, 102, 255, .18); }
.button-primary:hover { background: var(--blue-deep); }
.button-dark { background: var(--ink); color: white; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #273650; font-size: 14px; font-weight: 800; }
.text-link span { color: var(--blue); font-size: 17px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(2px, 2px); }
.hero-notes { display: flex; gap: 25px; margin-top: 54px; color: #61718a; font-size: 11px; font-weight: 700; }
.hero-notes span { display: flex; align-items: center; gap: 7px; }
.hero-notes i { color: var(--blue); font-family: var(--mono); font-size: 10px; font-style: normal; }

.hero-art { position: relative; height: 535px; min-width: 0; transform: scale(1.12); transform-origin: center center; }
@media (min-width: 1200px) {
    .hero-layout { grid-template-columns: minmax(0, .8fr) minmax(540px, 1.2fr); }
    .hero-art { height: 558px; transform: translateX(22px) scale(1.28); }
}
.studio-window { position: absolute; z-index: 4; top: 25px; left: 50%; width: 330px; height: 407px; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: 18px; background: #1d326b; box-shadow: 0 28px 48px rgba(25, 56, 124, .25), inset 0 1px 0 rgba(255,255,255,.38); transform: translateX(-50%) rotate(-7deg); }
.window-top { display: flex; align-items: center; height: 32px; gap: 5px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(5, 19, 57, .42); }
.window-top span { width: 6px; height: 6px; border-radius: 50%; background: #91b5f6; opacity: .8; }
.window-top b { margin-left: 8px; color: rgba(255,255,255,.6); font-family: var(--mono); font-size: 7px; font-weight: 400; letter-spacing: .04em; }
.window-body { position: relative; height: calc(100% - 32px); padding: 30px; overflow: hidden; background: radial-gradient(circle at 92% 9%, rgba(116, 181, 255, .72), transparent 24%), linear-gradient(138deg, #102863 0%, #173c96 60%, #286fff 100%); }
.window-body::before { position: absolute; right: -100px; bottom: -160px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; content: ""; box-shadow: 0 0 0 35px rgba(255,255,255,.05), 0 0 0 69px rgba(255,255,255,.04); }
.window-label { position: relative; color: #b6d3ff; font-family: var(--mono); font-size: 8px; letter-spacing: .13em; }
.window-title { position: relative; margin-top: 44px; color: white; font-size: 41px; font-weight: 700; letter-spacing: -.09em; line-height: .88; }
.window-title strong { color: var(--lime); font-weight: 500; }
.window-lines { position: relative; display: flex; flex-direction: column; gap: 7px; margin-top: 30px; }
.window-lines span { width: 74px; height: 3px; border-radius: 5px; background: rgba(255,255,255,.58); }
.window-lines span:nth-child(2) { width: 51px; }
.window-lines span:nth-child(3) { width: 63px; }
.window-panel { position: absolute; right: 19px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; width: 169px; height: 88px; padding: 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); }
.window-panel span { color: #fff; font-family: var(--mono); font-size: 7px; letter-spacing: .05em; line-height: 1.5; }
.window-panel i { width: 38px; height: 38px; border-radius: 50% 50% 6px 50%; background: var(--lime); }
.orbit { position: absolute; z-index: 1; border: 1px solid rgba(55, 111, 214, .22); border-radius: 50%; }
.orbit-one { top: 7px; left: 21%; width: 420px; height: 420px; transform: rotate(40deg); }
.orbit-two { top: 93px; left: 11%; width: 491px; height: 290px; border-color: rgba(35, 84, 164, .12); transform: rotate(-26deg); }
.blue-sphere { position: absolute; z-index: 2; right: 25px; bottom: 24px; width: 122px; height: 122px; border-radius: 48% 52% 43% 57%; background: linear-gradient(145deg, #d3ebff 4%, #4894ff 42%, #1948c9 78%); box-shadow: inset 12px 13px 20px rgba(255,255,255,.52), inset -17px -17px 25px rgba(9,51,157,.37), 0 18px 30px rgba(34,91,203,.22); transform: rotate(-28deg); animation: float 5s ease-in-out infinite; }
.floating-tag { position: absolute; z-index: 5; border: 1px solid rgba(201, 218, 244, .8); border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,.82); box-shadow: 0 12px 22px rgba(31,68,136,.11); color: #27436f; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.tag-top { top: 4px; right: 64px; }
.tag-side { bottom: 53px; left: 3px; }
.floating-card { position: absolute; z-index: 6; border: 1px solid rgba(208,221,241,.87); border-radius: 12px; background: rgba(255,255,255,.91); box-shadow: 0 18px 30px rgba(32,67,126,.14); backdrop-filter: blur(10px); }
.card-stats { bottom: 10px; left: 26px; display: grid; grid-template-columns: auto auto; column-gap: 11px; padding: 13px 15px; transform: rotate(-3deg); }
.card-stats span { grid-column: 1 / -1; color: #8492a8; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.card-stats strong { color: var(--blue); font-size: 26px; letter-spacing: -.1em; line-height: 1.15; }
.card-stats small { align-self: end; color: #53627a; font-size: 8px; font-weight: 700; }
.card-cursor { top: 86px; right: 0; display: flex; align-items: center; gap: 9px; padding: 12px; transform: rotate(6deg); }
.cursor-arrow { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #e9f2ff; color: var(--blue); font-size: 19px; }
.card-cursor b { color: #263650; font-size: 9px; line-height: 1.35; }

.ticker { overflow: hidden; border-top: 1px solid #deebfa; border-bottom: 1px solid #deebfa; background: #f8fbff; }
.ticker-track { display: flex; align-items: center; width: max-content; min-width: 100%; gap: 21px; padding: 16px 0; color: #1c315d; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; white-space: nowrap; animation: ticker 30s linear infinite; }
.ticker-track i { color: var(--blue); font-style: normal; }
.solutions-spotlight { position: relative; overflow: hidden; padding: 108px 0 92px; background: #050607; color: white; }
.solutions-spotlight::before { position: absolute; top: -330px; right: -190px; width: 680px; height: 680px; border: 1px solid rgba(200,255,31,.11); border-radius: 50%; box-shadow: 0 0 0 68px rgba(200,255,31,.035), 0 0 0 150px rgba(200,255,31,.02); content: ""; pointer-events: none; }
.solutions-spotlight .container { position: relative; }
.solutions-spotlight-main { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 485px; align-items: center; gap: clamp(52px, 6vw, 106px); }
.solutions-photo { position: relative; align-self: stretch; min-height: 485px; overflow: hidden; border-radius: 26px; background: #19251f; box-shadow: 0 28px 68px rgba(0,0,0,.46); }
.solutions-photo::after { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,0,0,.08), transparent 52%, rgba(0,0,0,.24)); content: ""; pointer-events: none; }
.solutions-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; transform: scale(1.015); }
.solutions-photo-badge { position: absolute; z-index: 1; right: 19px; bottom: 19px; border: 1px solid rgba(205,255,42,.45); border-radius: 10px; padding: 8px 10px; background: rgba(4,9,10,.72); color: #d3ff25; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .11em; line-height: 1.35; text-align: center; backdrop-filter: blur(10px); }
.solutions-kicker { margin: 0 0 20px; color: #d2ff25; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.solutions-copy h2 { max-width: 560px; margin: 0; color: white; font-size: clamp(39px, 4.3vw, 61px); font-weight: 800; letter-spacing: -.075em; line-height: 1.04; }
.solutions-copy h2 span { color: #d2ff25; }
.solutions-copy > p:not(.solutions-kicker) { max-width: 550px; margin: 27px 0 34px; color: #b3bbc2; font-size: 16px; line-height: 1.78; }
.solutions-call { display: inline-flex; align-items: center; gap: 13px; border-radius: 14px; padding: 11px 14px 11px 12px; background: #d2ff25; box-shadow: 0 13px 26px rgba(210,255,37,.18); color: #0a1006; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.solutions-call:hover { background: #e0ff62; box-shadow: 0 17px 33px rgba(210,255,37,.26); transform: translateY(-3px); }
.solutions-call-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(5,8,4,.11); }.solutions-call-icon svg { width: 20px; height: 20px; }
.solutions-call small, .solutions-call strong { display: block; }.solutions-call small { margin-bottom: 2px; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .09em; }.solutions-call strong { font-size: 16px; letter-spacing: -.04em; }.solutions-call > i { margin-left: 5px; font-size: 20px; font-style: normal; }
.solutions-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; margin-top: 85px; }
.solutions-feature { position: relative; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }.solutions-feature > span { position: absolute; top: 23px; right: 0; color: #68716f; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }.solutions-feature > i { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(210,255,37,.4); border-radius: 11px; color: #d2ff25; font-family: var(--mono); font-size: 20px; font-style: normal; }.solutions-feature h3 { margin: 23px 0 10px; color: white; font-size: 20px; letter-spacing: -.055em; }.solutions-feature p { margin: 0; color: #aab2b6; font-size: 13px; line-height: 1.7; }
.pricing-section { position: relative; overflow: hidden; background: #f4f8ff; }
.pricing-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }.pricing-glow-one { top: -250px; right: -150px; width: 660px; height: 660px; background: radial-gradient(circle, rgba(70,121,255,.17), rgba(70,121,255,0) 68%); }.pricing-glow-two { bottom: -360px; left: -200px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(160,208,255,.24), rgba(160,208,255,0) 70%); }
.pricing-section .container { position: relative; z-index: 1; }
.pricing-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; }.pricing-heading h2 { max-width: 600px; margin: 0; color: var(--ink); font-size: clamp(36px, 4vw, 54px); font-weight: 800; letter-spacing: -.07em; line-height: 1.08; }.pricing-heading h2 span { color: var(--blue); }.pricing-heading > p { max-width: 430px; margin: 0 0 5px; color: #5c708e; font-size: 15px; line-height: 1.72; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: 59px; }
.pricing-card { position: relative; display: flex; min-height: 574px; flex-direction: column; overflow: hidden; border: 1px solid #d7e4f6; border-radius: 20px; padding: 26px 23px 25px; background: rgba(255,255,255,.94); box-shadow: 0 14px 33px rgba(39,72,125,.07); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.pricing-card:hover { border-color: #9fbcf5; box-shadow: 0 24px 46px rgba(40,77,138,.15); transform: translateY(-7px); }
.pricing-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.pricing-card-head > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #eff5ff; color: var(--blue); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; }.pricing-card-head p { margin: 0; color: #657b9e; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-align: right; }
.pricing-card h3 { margin: 22px 0 10px; color: #122442; font-size: 27px; font-weight: 800; letter-spacing: -.07em; line-height: 1; }.pricing-summary { min-height: 66px; margin: 0; color: #63738c; font-size: 13px; line-height: 1.65; }
.pricing-amount { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin: 27px 0 19px; color: #122442; }.pricing-amount > span { width: 100%; margin-bottom: 5px; color: #7788a0; font-size: 11px; }.pricing-amount strong { font-size: clamp(35px, 3.1vw, 47px); font-weight: 800; letter-spacing: -.08em; line-height: .85; }.pricing-amount strong small { margin-left: 2px; font-size: .48em; letter-spacing: -.04em; }.pricing-amount em { margin-bottom: 2px; color: #61728c; font-size: 11px; font-style: normal; font-weight: 700; }
.pricing-cta { display: flex; align-items: center; justify-content: space-between; border: 1px solid #cedcf2; border-radius: 11px; padding: 13px 14px; background: #f7faff; color: #163562; font-size: 13px; font-weight: 800; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }.pricing-cta span { color: var(--blue); font-size: 19px; line-height: .6; }.pricing-cta:hover { border-color: var(--blue); background: var(--blue); color: #fff; transform: translateY(-2px); }.pricing-cta:hover span { color: #fff; }
.pricing-features { display: grid; gap: 11px; margin: 24px 0 0; padding: 21px 0 0; border-top: 1px solid #e5edf8; list-style: none; }.pricing-features li { display: flex; align-items: flex-start; gap: 8px; color: #526780; font-size: 12px; font-weight: 600; line-height: 1.42; }.pricing-features i { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 50%; background: #eaf2ff; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 800; }
.pricing-card-featured { z-index: 1; border-color: #2f66ff; background: linear-gradient(155deg, #fff 0%, #eef4ff 100%); box-shadow: 0 26px 54px rgba(47,102,255,.22); transform: translateY(-17px); }.pricing-card-featured:hover { border-color: #2f66ff; box-shadow: 0 31px 60px rgba(47,102,255,.28); transform: translateY(-23px); }.pricing-popular { position: absolute; top: 0; right: 20px; left: 20px; border-radius: 0 0 11px 11px; padding: 8px 9px; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-align: center; }.pricing-card-featured .pricing-card-head { margin-top: 28px; }.pricing-card-featured .pricing-card-head > span { background: var(--blue); color: #fff; }.pricing-card-featured .pricing-card-head p { color: #2f66ff; }.pricing-card-featured .pricing-cta { border-color: var(--blue); background: var(--blue); color: #fff; }.pricing-card-featured .pricing-cta span { color: #fff; }.pricing-card-featured .pricing-cta:hover { background: #184bcf; }
.pricing-footnote { display: flex; align-items: flex-start; justify-content: center; gap: 9px; max-width: 790px; margin: 38px auto 0; color: #64758e; font-size: 12px; line-height: 1.65; text-align: center; }.pricing-footnote > span { color: var(--blue); font-size: 15px; }.pricing-footnote p { margin: 0; }.pricing-footnote strong { color: #18375f; }
.section { padding: 129px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.section-heading h2, .process-intro h2, .principles-statement h2, .contact-copy h2 { margin: 0; color: var(--ink); font-size: clamp(34px, 4vw, 54px); font-weight: 700; letter-spacing: -.065em; line-height: 1.09; }
.section-heading h2 { max-width: 660px; }
.section-heading h2 span, .process-intro h2 span, .principles-statement h2 span, .contact-copy h2 span { color: var(--blue); }
.section-heading > p { max-width: 332px; margin: 0 0 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.72; }
.section-heading-compact { align-items: end; }

.intro-section { position: relative; overflow: hidden; background: linear-gradient(155deg, #fff 0%, #f8fbff 49%, #eef5ff 100%); }
.intro-section::before { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(65,108,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(65,108,184,.06) 1px, transparent 1px); background-size: 72px 72px; content: ""; mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.intro-section .container { position: relative; }
.intro-section .section-heading h2 { max-width: 740px; font-size: clamp(44px, 4.8vw, 68px); }
.intro-section .section-heading > p { max-width: 365px; margin-bottom: 8px; font-size: 16px; }
.services-light { position: absolute; border-radius: 50%; pointer-events: none; }
.services-light-one { top: 130px; left: -260px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(103,163,255,.15), rgba(103,163,255,0) 68%); }
.services-light-two { right: -190px; bottom: -235px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(83,133,255,.16), rgba(83,133,255,0) 68%); }
.service-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 61px; }
.service-card { position: relative; display: flex; min-height: 446px; flex-direction: column; overflow: hidden; border: 1px solid #d8e4f5; border-radius: 18px; padding: 20px; background: rgba(255,255,255,.94); box-shadow: 0 14px 33px rgba(43,78,139,.07); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.service-card::before, .service-card::after { display: none; }
.service-card:hover { border-color: #92b7fc; box-shadow: 0 25px 48px rgba(43,84,157,.17); transform: translateY(-8px); }
.service-card-brand { background: linear-gradient(160deg, #fff, #f8fbff); }.service-card-web { background: linear-gradient(160deg, #fff, #f9fbff); }.service-card-shop { background: linear-gradient(160deg, #fff, #fffcf7); }.service-card-growth { background: linear-gradient(160deg, #fff, #f8fbff); }
.service-top { display: flex; align-items: center; justify-content: space-between; color: #637fae; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.service-icon { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid #dae6fa; border-radius: 11px; background: #f0f6ff; box-shadow: 0 7px 14px rgba(50,98,179,.07); color: var(--blue); font-family: var(--font); font-size: 21px; }
.service-preview { position: relative; height: 130px; overflow: hidden; margin-top: 16px; border: 1px solid rgba(20,51,95,.10); border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.75), 0 10px 18px rgba(40,75,128,.08); }
.preview-brand { display: flex; align-items: center; gap: 15px; padding: 18px; background: linear-gradient(135deg, #112a51, #2858a0); }.brand-mark { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 17px; background: #eaff84; box-shadow: 8px 8px 0 rgba(0,0,0,.12); color: #173965; font-size: 34px; font-weight: 800; letter-spacing: -.1em; }.brand-lines { display: grid; flex: 1; gap: 8px; }.brand-lines i { display: block; height: 7px; border-radius: 8px; background: rgba(255,255,255,.85); }.brand-lines i:nth-child(2) { width: 74%; background: #a8c8ff; }.brand-lines i:nth-child(3) { width: 46%; background: rgba(255,255,255,.45); }.brand-swatches { position: absolute; right: 14px; bottom: 13px; display: flex; gap: 5px; }.brand-swatches i { width: 14px; height: 14px; border-radius: 50%; background: #eaff84; }.brand-swatches i:nth-child(2) { background: #7eb0ff; }.brand-swatches i:nth-child(3) { background: #fff; }
.preview-web { padding: 12px; background: linear-gradient(140deg, #dfeaff, #9fc1ff); }.web-browser { height: 100%; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 9px 17px rgba(28,68,133,.22); }.web-bar { display: flex; align-items: center; height: 21px; gap: 4px; padding: 0 8px; border-bottom: 1px solid #e8eef7; }.web-bar i { width: 4px; height: 4px; border-radius: 50%; background: #e08173; }.web-bar i:nth-child(2) { background: #efc967; }.web-bar i:nth-child(3) { background: #8bc497; }.web-bar b { margin-left: 6px; color: #193661; font-family: var(--mono); font-size: 6px; letter-spacing: .09em; }.web-bar span { width: 28px; height: 5px; margin-left: auto; border-radius: 5px; background: #2f6bff; }.web-canvas { display: flex; align-items: center; justify-content: space-between; height: calc(100% - 21px); padding: 12px; background: linear-gradient(120deg, #f7fbff, #e4efff); }.web-canvas small { display: block; color: #4d75b7; font-family: var(--mono); font-size: 5px; letter-spacing: .08em; }.web-canvas strong { display: block; margin: 5px 0 7px; color: #173b6c; font-size: 16px; letter-spacing: -.08em; line-height: .9; }.web-canvas em { color: #275ed5; font-size: 7px; font-style: normal; font-weight: 800; }.web-canvas > i { width: 58px; height: 58px; border: 12px solid #2f6bff; border-radius: 50% 50% 6px 6px; transform: rotate(-29deg); }
.preview-shop { padding: 13px; background: linear-gradient(135deg, #ffe3bf, #f7b674); }.shop-top { display: flex; justify-content: space-between; color: #473326; font-family: var(--mono); font-size: 7px; }.shop-top b { font-size: 10px; letter-spacing: .08em; }.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }.product-row > div { display: grid; grid-template-columns: 1fr auto; gap: 1px 5px; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.82); color: #4f3a2b; }.product-row i { grid-row: 1 / 3; width: 32px; height: 43px; border-radius: 5px; background: linear-gradient(135deg, #e67163, #a84f5f); }.product-row > div:nth-child(2) i { background: linear-gradient(135deg, #527fbc, #244e80); }.product-row b { align-self: end; font-size: 8px; }.product-row span { color: #956239; font-size: 7px; }
.preview-growth { padding: 14px; background: linear-gradient(135deg, #12284d, #1d4f93); color: white; }.growth-head, .growth-foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); }.growth-head span { color: #aecbff; font-size: 7px; letter-spacing: .08em; }.growth-head b { color: #b9f568; font-size: 13px; }.growth-chart { position: relative; height: 63px; margin-top: 12px; border-bottom: 1px solid rgba(255,255,255,.22); background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.09) 32px); }.growth-chart > i { position: absolute; right: 0; left: 0; height: 1px; background: rgba(255,255,255,.1); }.growth-chart > i:nth-child(1) { top: 14px; }.growth-chart > i:nth-child(2) { top: 30px; }.growth-chart > i:nth-child(3) { top: 46px; }.growth-chart > i:nth-child(4), .growth-chart > i:nth-child(5) { display: none; }.growth-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #b9f568; }.growth-foot { margin-top: 10px; color: #c6d8f2; font-size: 7px; }.growth-foot b { border-radius: 9px; padding: 4px 6px; background: rgba(185,245,104,.16); color: #b9f568; font-size: 7px; }
.service-card h3 { max-width: 230px; margin: 19px 0 9px; color: #122441; font-size: 21px; letter-spacing: -.065em; line-height: 1.07; }.service-card p { margin: 0; color: #5c718f; font-size: 13px; line-height: 1.62; }.service-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: #18365e; font-size: 12px; font-weight: 800; }.service-card a span { color: var(--blue); font-size: 18px; transition: transform .2s ease; }.service-card a:hover span { transform: translate(3px, -3px); }

.showcase { background: var(--surface-soft); }
.project-grid { display: grid; grid-template-columns: 1.35fr .88fr .88fr; gap: 17px; margin-top: 57px; }
.project-card { overflow: hidden; border: 1px solid #dce7f6; border-radius: 16px; background: white; box-shadow: 0 5px 21px rgba(49, 88, 152, .035); transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { box-shadow: 0 22px 42px rgba(44, 79, 140, .13); transform: translateY(-6px); }
.project-visual { position: relative; height: 275px; overflow: hidden; }
.project-visual-sage { background: #cfddd2; }
.project-visual-sage::before { position: absolute; inset: 0; background: linear-gradient(130deg, rgba(7,39,36,.16), transparent 60%); content: ""; }
.project-orb { position: absolute; top: -64px; right: -31px; width: 246px; height: 246px; border-radius: 50%; background: #f7c75f; box-shadow: -42px 60px 0 rgba(255,255,255,.16); }
.mock-nav { position: absolute; top: 22px; right: 25px; left: 25px; display: flex; align-items: center; justify-content: space-between; color: #113337; font-family: var(--mono); font-size: 7px; letter-spacing: .02em; }
.mock-nav b { font-size: 10px; letter-spacing: .07em; }
.mock-nav i { width: 22px; height: 7px; border-radius: 10px; background: #153c3b; }
.mock-feature { position: absolute; z-index: 1; bottom: 24px; left: 27px; color: #143936; }
.mock-feature small { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 8px; }
.mock-feature strong { display: block; font-size: 38px; font-weight: 700; letter-spacing: -.09em; line-height: .82; }
.mock-feature em { display: inline-block; margin-top: 20px; border-bottom: 1px solid #143936; padding-bottom: 3px; font-size: 9px; font-style: normal; font-weight: 800; }
.mock-shape { position: absolute; right: 57px; bottom: -52px; width: 200px; height: 160px; border: 26px solid #23766e; border-radius: 49% 49% 5px 5px; transform: rotate(-28deg); }
.project-visual-blue { display: grid; place-items: center; background: linear-gradient(145deg, #cee2ff, #80aaf0); }
.mobile-mock { position: relative; width: 144px; height: 238px; overflow: hidden; border: 5px solid #13254a; border-radius: 23px; padding: 40px 15px 15px; background: #f4cfb3; box-shadow: 13px 17px 0 rgba(21,52,114,.16); }
.mobile-notch { position: absolute; top: 7px; left: 50%; width: 43px; height: 7px; border-radius: 8px; background: #13254a; transform: translateX(-50%); }
.mobile-mock small { color: #554330; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.mobile-mock strong { display: block; margin-top: 41px; color: #193158; font-size: 23px; letter-spacing: -.09em; line-height: .87; }
.mobile-dot-row { position: absolute; right: 14px; bottom: 15px; display: flex; gap: 4px; }
.mobile-dot-row i { width: 5px; height: 5px; border-radius: 50%; background: #193158; }
.mobile-dot-row i:nth-child(2), .mobile-dot-row i:nth-child(3) { opacity: .28; }
.circle-sticker { position: absolute; top: 23px; right: 17px; display: grid; width: 71px; height: 71px; place-items: center; border-radius: 50%; background: #eaff84; color: #26486e; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .05em; line-height: 1.25; text-align: center; transform: rotate(12deg); }
.project-visual-coral { background: #ff927c; }
.editorial-line { position: absolute; top: 24px; left: 22px; color: #702d38; font-size: 44px; font-weight: 800; letter-spacing: -.11em; line-height: .76; }
.editorial-card { position: absolute; right: 26px; bottom: 25px; left: 26px; display: flex; align-items: flex-end; justify-content: space-between; height: 110px; padding: 14px; background: #f9f0df; color: #6e3041; }
.editorial-card small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; line-height: 1.45; }
.editorial-card b { color: #ec684e; font-size: 39px; letter-spacing: -.1em; line-height: .8; }
.editorial-dot { position: absolute; top: 41px; right: 29px; width: 18px; height: 18px; border-radius: 50%; background: #f8e178; }
.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px; }
.project-meta span { display: block; margin-bottom: 5px; color: #78869c; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.project-meta h3 { margin: 0; color: #1a2944; font-size: 15px; letter-spacing: -.04em; }
.project-meta button { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border: 1px solid #ccdcef; border-radius: 50%; background: white; color: var(--blue); font-size: 18px; transition: all .2s ease; }
.project-card:hover .project-meta button { border-color: var(--blue); background: var(--blue); color: white; }

.showcase .section-heading > div > p:not(.section-kicker) { max-width: 595px; margin: 18px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.project-visual-corporate { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 84% 11%, #4f87ff 0 5%, transparent 28%), linear-gradient(132deg, #0d1c38 0%, #172e58 58%, #284f90 100%); }
.corporate-browser { width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: #f8fbff; box-shadow: 0 18px 30px rgba(2,12,32,.25); color: #102245; }
.browser-top { display: flex; align-items: center; height: 40px; gap: 9px; padding: 0 15px; border-bottom: 1px solid #e1e8f4; background: white; font-size: 8px; }
.browser-mark { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: #2f6bff; color: white; font-size: 11px; font-weight: 800; }
.browser-top b { font-size: 9px; letter-spacing: .06em; }
.browser-top > span:not(.browser-mark) { margin-left: auto; color: #657793; font-size: 7px; }
.browser-top i { border-radius: 5px; padding: 6px 9px; background: #102b57; color: white; font-style: normal; }
.corporate-hero { display: flex; align-items: center; justify-content: space-between; height: calc(100% - 40px); padding: 24px 28px; background: linear-gradient(115deg, #ecf2f8, #d6e6ff); }
.corporate-hero small, .b2b-content > small, .operation-card small { color: #4178d4; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.corporate-hero strong { display: block; margin-top: 10px; color: #11284d; font-size: 31px; letter-spacing: -.08em; line-height: .91; }
.corporate-hero strong em { color: #2f6bff; font-style: normal; }
.corporate-hero > div > span { display: inline-block; margin-top: 17px; border-bottom: 1px solid #163662; padding-bottom: 3px; color: #163662; font-size: 9px; font-weight: 800; }
.corporate-data { position: relative; display: grid; width: 127px; height: 127px; place-content: center; overflow: hidden; border-radius: 50%; background: #2f6bff; color: white; text-align: center; }
.corporate-data::before { position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; content: ""; }
.corporate-data b, .corporate-data span { position: relative; z-index: 1; }
.corporate-data b { font-size: 30px; letter-spacing: -.08em; }
.corporate-data span { font-size: 9px; line-height: 1.25; }
.corporate-data i { position: absolute; right: -13px; bottom: 3px; width: 85px; height: 30px; border: 12px solid #a8c8ff; border-bottom: 0; border-radius: 60px 60px 0 0; transform: rotate(-32deg); }
.project-visual-b2b { display: grid; place-items: center; padding: 20px; background: linear-gradient(145deg, #f6cf68, #f0a64f); }
.b2b-panel { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 15px 25px rgba(94,52,13,.18); color: #1d2d48; }
.b2b-top { display: flex; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #e7edf5; font-size: 8px; }
.b2b-top b { color: #275ec8; letter-spacing: .08em; }.b2b-top span { color: #7e8ca1; }
.b2b-side { position: absolute; top: 42px; bottom: 0; left: 0; display: flex; width: 39px; align-items: center; flex-direction: column; gap: 16px; padding-top: 20px; border-right: 1px solid #edf1f7; color: #5f80be; font-size: 12px; }.b2b-side i { font-style: normal; }
.b2b-content { padding: 18px 15px 13px 55px; }.b2b-content strong { display: block; margin-top: 5px; font-size: 22px; letter-spacing: -.07em; }
.b2b-stat { display: grid; grid-template-columns: 1.4fr .7fr; gap: 7px; margin-top: 13px; }.b2b-stat > div { padding: 10px; border: 1px solid #e2e9f4; border-radius: 7px; background: #f8fbff; }.b2b-stat span, .b2b-stat em { display: block; color: #7e8da4; font-size: 7px; font-style: normal; }.b2b-stat b { display: block; margin: 5px 0; font-size: 13px; }.b2b-stat em { color: #15a264; font-weight: 700; }
.b2b-lines { display: grid; gap: 7px; margin-top: 14px; }.b2b-lines i { display: block; height: 6px; border-radius: 5px; background: linear-gradient(90deg, #dce6f4 73%, transparent 73%); }.b2b-lines i:nth-child(2) { background: linear-gradient(90deg, #dce6f4 90%, transparent 90%); }.b2b-lines i:nth-child(3) { background: linear-gradient(90deg, #dce6f4 55%, transparent 55%); }
.project-visual-operations { display: grid; place-items: center; padding: 20px; background: linear-gradient(145deg, #bce9d9, #65c4ac); }.operation-screen { width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(24,73,67,.25); border-radius: 9px; background: #f5fbf8; box-shadow: 0 15px 25px rgba(23,81,70,.17); color: #17433d; }.operation-top { display: flex; justify-content: space-between; padding: 13px 14px; background: #174b47; color: white; font-family: var(--mono); font-size: 8px; letter-spacing: .05em; }.operation-top span { color: #a7f1ce; }
.operation-map { position: relative; height: 158px; overflow: hidden; background-color: #dff3ec; background-image: linear-gradient(33deg, transparent 48%, rgba(44,121,109,.17) 49%, rgba(44,121,109,.17) 51%, transparent 52%), linear-gradient(126deg, transparent 48%, rgba(44,121,109,.12) 49%, rgba(44,121,109,.12) 51%, transparent 52%); background-size: 54px 54px; }.route { position: absolute; border: 3px solid #287e72; border-color: #287e72 transparent transparent #287e72; border-radius: 60% 50% 20% 0; }.route-a { top: 35px; left: 24px; width: 98px; height: 61px; transform: rotate(23deg); }.route-b { right: 18px; bottom: 25px; width: 85px; height: 52px; transform: rotate(-40deg); }.pin { position: absolute; width: 12px; height: 12px; border: 3px solid white; border-radius: 50% 50% 50% 0; background: #286dff; box-shadow: 0 2px 5px rgba(13,60,55,.21); transform: rotate(-45deg); }.pin-a { top: 28px; left: 38px; }.pin-b { right: 35px; bottom: 35px; background: #ff8d58; }
.operation-card { position: absolute; right: 13px; top: 16px; border-radius: 8px; padding: 9px 11px; background: white; box-shadow: 0 8px 16px rgba(27,82,71,.14); }.operation-card small { font-size: 6px; }.operation-card strong { display: block; margin-top: 3px; font-size: 22px; letter-spacing: -.08em; }.operation-card span { color: #6c857f; font-size: 8px; }.operation-footer { display: flex; align-items: center; gap: 6px; padding: 9px 13px; color: #738882; font-size: 8px; }.operation-footer b { margin-left: auto; color: #179b67; font-size: 12px; }.operation-footer span:last-child { font-size: 7px; }

.process-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #eff5ff 0%, #f9fbff 48%, #e7f1ff 100%); }
.process-section::before { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(61,107,192,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(61,107,192,.055) 1px, transparent 1px); background-size: 74px 74px; content: ""; mask-image: linear-gradient(90deg, #000 0%, transparent 92%); }
.process-light { position: absolute; top: -350px; right: -160px; width: 800px; height: 750px; border-radius: 50%; background: radial-gradient(circle, rgba(163, 207, 255, .68), rgba(237,246,255,0) 68%); }
.process-orbit { position: absolute; border: 1px solid rgba(54,105,202,.13); border-radius: 50%; pointer-events: none; }.process-orbit-one { right: 7%; top: 132px; width: 348px; height: 348px; }.process-orbit-two { right: -80px; top: 76px; width: 520px; height: 520px; border-color: rgba(54,105,202,.08); }
.process-layout { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(58px, 7vw, 118px); align-items: start; }
.process-intro { align-self: start; max-width: 433px; padding-top: 17px; }.process-intro h2 { margin-bottom: 23px; font-size: clamp(42px, 4.4vw, 63px); }
.process-intro > p:not(.section-kicker) { margin: 0 0 27px; color: #536988; font-size: 15px; line-height: 1.76; }
.process-intro-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; max-width: 372px; margin: 0 0 31px; border: 1px solid rgba(79,123,199,.2); border-radius: 14px; background: rgba(103,142,203,.18); box-shadow: 0 13px 28px rgba(45,81,142,.07); }.process-intro-proof > div { min-height: 77px; padding: 15px 17px; background: rgba(255,255,255,.72); }.process-intro-proof b { display: block; color: #1d55cd; font-family: var(--mono); font-size: 21px; letter-spacing: -.08em; line-height: 1; }.process-intro-proof span { display: block; margin-top: 7px; color: #526986; font-size: 11px; font-weight: 700; }.process-intro-proof p { grid-column: 1 / -1; margin: 0; padding: 13px 17px; background: rgba(241,247,255,.92); color: #456182; font-size: 11px; font-weight: 600; line-height: 1.55; }
.process-roadmap { position: relative; overflow: hidden; border: 1px solid rgba(98,133,192,.28); border-radius: 22px; padding: 11px; background: rgba(255,255,255,.76); box-shadow: 0 28px 65px rgba(41,76,133,.14); backdrop-filter: blur(12px); }.process-roadmap::before { position: absolute; right: -73px; bottom: -94px; width: 275px; height: 275px; border: 31px solid rgba(47,102,255,.045); border-radius: 50%; content: ""; }
.process-roadmap-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 4px 6px 9px; padding: 11px 12px 13px; border-bottom: 1px solid #dce7f5; color: #4771aa; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; }.process-roadmap-head b { border-radius: 999px; padding: 6px 9px; background: #eaf2ff; color: #2e65e8; font-size: 9px; }
.process-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.process-step { position: relative; display: grid; grid-template-columns: 59px minmax(0, 1fr) auto; gap: 17px; align-items: center; min-height: 117px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; padding: 17px 17px 17px 15px; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.process-step::before { position: absolute; top: 12px; bottom: 12px; left: 43px; width: 1px; background: linear-gradient(#bcd0f2, transparent); content: ""; }.process-step:last-child::before { display: none; }.process-step:hover { border-color: rgba(66,113,204,.25); background: #fff; box-shadow: 0 12px 28px rgba(43,78,134,.1); transform: translateX(4px); }
.process-step-number { position: relative; z-index: 1; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #cdddf5; border-radius: 14px; background: linear-gradient(145deg, #fff, #e9f2ff); box-shadow: 0 7px 15px rgba(46,91,165,.08); }.process-step-number span { position: absolute; top: 5px; left: 6px; color: #2f66ff; font-family: var(--mono); font-size: 8px; font-weight: 700; }.process-step-number svg { width: 22px; height: 22px; margin-top: 6px; fill: none; stroke: #2f66ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.process-step-label { margin: 0 0 6px !important; color: #5c79a5 !important; font-family: var(--mono); font-size: 9px !important; font-weight: 700; letter-spacing: .1em; line-height: 1.2 !important; }.process-step h3 { margin: 0 0 5px; color: #142745; font-size: 21px; font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }.process-step-copy > p:last-child { max-width: 430px; margin: 0; color: #617692; font-size: 12px; line-height: 1.63; }
.process-step-result { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 125px; color: #58708f; font-size: 10px; font-weight: 700; text-align: right; }.process-step-result i { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #cbdcf4; border-radius: 50%; background: #fff; color: #2f66ff; font-size: 16px; font-style: normal; transition: transform .25s ease, color .25s ease, background .25s ease; }.process-step:hover .process-step-result i { background: #2f66ff; color: #fff; transform: rotate(45deg); }
.process-step-discover .process-step-number { background: linear-gradient(145deg, #fff, #edf4ff); }.process-step-plan .process-step-number { background: linear-gradient(145deg, #f9fbff, #e8efff); }.process-step-design .process-step-number { border-color: #afc9ff; background: linear-gradient(145deg, #edf4ff, #dceaff); }.process-step-launch .process-step-number { border-color: #b6d4c6; background: linear-gradient(145deg, #effcf3, #e1f7e9); }.process-step-launch .process-step-number svg, .process-step-launch .process-step-number span { stroke: #209660; color: #209660; }

.principles { padding-bottom: 138px; background: #fff; }
.principles-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 120px; }
.principles-statement h2 { font-size: clamp(39px, 4.4vw, 61px); }
.principle-items { border-top: 1px solid var(--line); }
.principle-items > div { display: grid; grid-template-columns: 40px .72fr 1.1fr; gap: 15px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid var(--line); }
.principle-items span { color: var(--blue); font-size: 19px; }
.principle-items h3 { margin: 0; color: #1b2a43; font-size: 16px; letter-spacing: -.04em; }
.principle-items p { margin: 0; color: #67768b; font-size: 13px; line-height: 1.7; }

.contact-section { position: relative; overflow: hidden; padding: 119px 0; background: #111d32; color: white; }
.contact-section::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(132, 171, 239, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(132, 171, 239, .06) 1px, transparent 1px); background-size: 72px 72px; content: ""; }
.contact-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-a { top: -255px; right: -130px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(48,100,255,.45), rgba(48,100,255,0) 69%); }
.orb-b { bottom: -330px; left: 18%; width: 530px; height: 530px; background: radial-gradient(circle, rgba(94,170,255,.19), rgba(94,170,255,0) 68%); }
.contact-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 88px; align-items: center; }
.contact-copy .section-kicker { color: #9fc5ff; }
.contact-copy h2 { color: white; font-size: clamp(41px, 4.3vw, 61px); }
.contact-copy h2 span { color: #9cc6ff; }
.contact-copy > p:not(.section-kicker) { max-width: 450px; margin: 24px 0 40px; color: #b8c6dc; font-size: 15px; line-height: 1.75; }
.contact-side-note { display: flex; align-items: center; gap: 10px; color: #d4dfef; font-size: 12px; }
.contact-side-note span { color: #b9f568; font-size: 16px; }
.contact-form { padding: 30px; border: 1px solid rgba(178, 206, 250, .25); border-radius: 17px; background: rgba(255,255,255,.08); box-shadow: 0 20px 50px rgba(0,0,0,.12); backdrop-filter: blur(16px); }
.contact-form label { display: block; margin-bottom: 15px; color: #d9e5f5; font-size: 11px; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 7px; border: 1px solid rgba(208,224,248,.25); border-radius: 8px; outline: none; padding: 11px 12px; background: rgba(5,15,35,.17); color: white; font-size: 13px; transition: border .2s ease, background .2s ease; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9baac2; }
.contact-form select { color: #cbd7ea; }
.contact-form option { color: #17233a; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #84b5ff; background: rgba(5,15,35,.33); }
.contact-form textarea { min-height: 101px; resize: vertical; }
.button-submit { width: 100%; margin-top: 2px; border: 0; }
.button-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.contact-form small { display: block; margin-top: 13px; color: #a5b4c9; font-size: 9px; line-height: 1.55; }
.form-honey { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.form-success { display: flex; min-height: 365px; align-items: center; flex-direction: column; justify-content: center; padding: 28px 20px; text-align: center; }
.success-mark { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(172, 213, 255, .46); border-radius: 50%; background: rgba(93, 157, 255, .18); color: #b9dcff; font-size: 28px; font-weight: 700; }
.success-kicker { margin: 22px 0 9px; color: #9fc5ff; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.form-success h3 { margin: 0; color: white; font-size: 28px; letter-spacing: -.055em; }
.form-success > p:not(.success-kicker) { max-width: 305px; margin: 11px 0 24px; color: #c0cce0; font-size: 13px; line-height: 1.7; }
.button-secondary { border-color: rgba(174, 207, 255, .38); background: rgba(255,255,255,.1); color: white; }
.button-secondary:hover { border-color: #9bc5ff; background: rgba(255,255,255,.18); }
[hidden] { display: none !important; }

.inner-hero { position: relative; overflow: hidden; padding: 176px 0 100px; background: linear-gradient(116deg, #fff 0%, #f9fbff 56%, #edf5ff 100%); }
.inner-hero-soft { background: linear-gradient(116deg, #fff 0%, #f4f8ff 49%, #eaf3ff 100%); }
.inner-hero-work { background: linear-gradient(116deg, #fff 0%, #f8fbff 48%, #e6f1ff 100%); }
.inner-grid-lines { position: absolute; inset: 0; opacity: .7; background-image: linear-gradient(rgba(58,102,177,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(58,102,177,.07) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.5) 73%, transparent); }
.inner-hero-layout { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.inner-copy { max-width: 650px; }
.inner-copy h1 { max-width: 680px; margin: 0; color: var(--ink); font-size: clamp(48px, 5.1vw, 76px); font-weight: 800; letter-spacing: -.075em; line-height: 1.03; }
.inner-copy h1 span, .method-intro h2 span, .outcome-grid h2 span, .principle-band h2 span, .case-summary-grid h2 span { color: var(--blue); }
.inner-copy > p:not(.section-kicker) { max-width: 570px; margin: 27px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.inner-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.page-stat-card { position: relative; justify-self: end; width: min(100%, 365px); overflow: hidden; border: 1px solid #cfdff5; border-radius: 22px; padding: 31px; background: linear-gradient(145deg, #1746b7, #2e6cff 78%); box-shadow: 0 28px 55px rgba(32,83,185,.22); color: white; transform: rotate(4deg); }
.page-stat-card::before { position: absolute; top: -120px; right: -100px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.07), 0 0 0 83px rgba(255,255,255,.045); content: ""; }
.page-stat-card p { position: relative; margin: 0; color: #c9deff; font-family: var(--mono); font-size: 10px; letter-spacing: .15em; }
.page-stat-card strong { position: relative; display: block; margin: 47px 0 53px; font-size: 54px; letter-spacing: -.09em; line-height: .84; }
.page-stat-card em { color: var(--lime); font-style: normal; }
.page-stat-card div { position: relative; display: flex; gap: 11px; border-top: 1px solid rgba(255,255,255,.22); padding: 11px 0 0; font-size: 12px; font-weight: 700; }
.page-stat-card div + div { margin-top: 8px; }
.page-stat-card div span { color: #c9deff; font-family: var(--mono); font-size: 10px; }
.service-page-section { background: #fff; }
.service-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 62px; }
.service-detail { --service-accent: #2f66ff; --service-soft: #ebf2ff; position: relative; display: flex; min-height: 365px; flex-direction: column; overflow: hidden; border: 1px solid #d7e4f5; border-radius: 20px; padding: 27px 29px 25px; background: linear-gradient(145deg, #fff 0%, #f8fbff 100%); box-shadow: 0 12px 28px rgba(33,72,131,.06); transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
.service-detail::before { position: absolute; top: -115px; right: -95px; width: 240px; height: 240px; border: 1px solid color-mix(in srgb, var(--service-accent) 20%, transparent); border-radius: 50%; box-shadow: 0 0 0 31px color-mix(in srgb, var(--service-accent) 5%, transparent), 0 0 0 69px color-mix(in srgb, var(--service-accent) 3%, transparent); content: ""; transition: transform .35s ease; }
.service-detail > * { position: relative; z-index: 1; }.service-detail:hover { border-color: color-mix(in srgb, var(--service-accent) 48%, #cbdcf2); box-shadow: 0 25px 48px rgba(34,75,136,.15); transform: translateY(-7px); }.service-detail:hover::before { transform: scale(1.13) translate(-9px, 9px); }
.service-detail-top { display: flex; align-items: center; justify-content: space-between; }.service-detail-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--service-soft); color: var(--service-accent); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; }.service-detail-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid color-mix(in srgb, var(--service-accent) 19%, #d5e3f7); border-radius: 13px; background: rgba(255,255,255,.76); color: var(--service-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--service-accent) 10%, transparent); }.service-detail-icon svg { width: 23px; height: 23px; }
.service-detail-label { margin: 25px 0 9px !important; color: var(--service-accent) !important; font-family: var(--mono); font-size: 9px !important; font-weight: 700; letter-spacing: .11em; line-height: 1.2 !important; }.service-detail h3 { max-width: 390px; margin: 0 0 11px; color: #122442; font-size: 27px; font-weight: 800; letter-spacing: -.07em; line-height: 1.04; }.service-detail > p:not(.service-detail-label) { max-width: 450px; margin: 0; color: #61728b; font-size: 14px; line-height: 1.67; }
.service-detail ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }.service-detail li { border: 1px solid #dce8f6; border-radius: 999px; padding: 6px 9px; background: rgba(255,255,255,.6); color: #526780; font-size: 10px; font-weight: 700; line-height: 1.2; }.service-detail-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 25px; color: #183660; font-size: 12px; font-weight: 800; }.service-detail-link span { color: var(--service-accent); font-size: 18px; line-height: .65; transition: transform .2s ease; }.service-detail-link:hover span { transform: translate(3px, -3px); }
.service-detail-brand { --service-accent: #2858a0; --service-soft: #eaf1ff; }.service-detail-web { --service-accent: #2f66ff; --service-soft: #eaf2ff; }.service-detail-commerce { --service-accent: #d46f2c; --service-soft: #fff0e4; background: linear-gradient(145deg, #fff 0%, #fff9f2 100%); }.service-detail-growth { --service-accent: #d4ff2b; --service-soft: rgba(212,255,43,.16); border-color: #173d76; background: linear-gradient(135deg, #0d2244 0%, #153d7a 100%); box-shadow: 0 16px 34px rgba(15,45,92,.18); }.service-detail-growth::before { border-color: rgba(212,255,43,.19); box-shadow: 0 0 0 31px rgba(212,255,43,.05), 0 0 0 69px rgba(212,255,43,.025); }.service-detail-growth:hover { border-color: #5689d9; box-shadow: 0 25px 48px rgba(11,33,73,.28); }.service-detail-growth .service-detail-icon { border-color: rgba(212,255,43,.29); background: rgba(255,255,255,.08); }.service-detail-growth h3 { color: #fff; }.service-detail-growth > p:not(.service-detail-label) { color: #bfd3ef; }.service-detail-growth li { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #e7f1ff; }.service-detail-growth .service-detail-link { color: #fff; }
.outcome-section { padding: 110px 0; background: #eff6ff; }
.outcome-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 115px; align-items: start; }
.outcome-grid h2, .method-intro h2, .principle-band h2, .case-summary-grid h2 { margin: 0; color: var(--ink); font-size: clamp(38px, 4vw, 59px); letter-spacing: -.07em; line-height: 1.06; }
.outcome-list { border-top: 1px solid #cbdcf2; }
.outcome-list div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline; border-bottom: 1px solid #cbdcf2; padding: 20px 0; }
.outcome-list b { color: #1e3155; font-size: 16px; letter-spacing: -.04em; }
.outcome-list span { color: #64748b; font-size: 13px; line-height: 1.6; }
.direction-card { position: relative; justify-self: end; width: min(100%, 380px); min-height: 332px; overflow: hidden; border-radius: 20px; padding: 31px; background: #101e37; box-shadow: 0 27px 55px rgba(17,42,89,.18); color: white; transform: rotate(-3deg); }
.direction-card::after { position: absolute; right: -105px; bottom: -160px; width: 340px; height: 340px; border: 1px solid rgba(150,192,255,.35); border-radius: 50%; content: ""; box-shadow: 0 0 0 35px rgba(88,146,255,.08), 0 0 0 81px rgba(88,146,255,.05); }
.direction-card > span { color: #a7ccff; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.direction-card strong { position: relative; z-index: 1; display: block; margin-top: 43px; font-size: 53px; letter-spacing: -.09em; line-height: .82; }
.direction-card .direction-accent { color: #94c4ff; margin-top: 4px; }
.direction-card i { position: absolute; z-index: 1; right: 30px; bottom: 29px; color: var(--lime); font-size: 42px; font-style: normal; }
.method-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 115px; }
.method-intro { max-width: 430px; }
.method-intro > p:not(.section-kicker) { margin: 25px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.method-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #d2dfef; }
.method-list li { display: grid; grid-template-columns: 55px 1fr 30px; gap: 20px; align-items: center; min-height: 134px; border-bottom: 1px solid #d2dfef; }
.method-list > li > span { color: var(--blue); font-family: var(--mono); font-size: 11px; }
.method-list h3 { margin: 0 0 5px; color: #172641; font-size: 21px; letter-spacing: -.055em; }
.method-list p { max-width: 480px; margin: 0; color: #697991; font-size: 13px; line-height: 1.65; }
.method-list i { color: var(--blue); font-size: 23px; font-style: normal; }
.principle-band { padding: 112px 0; background: #111e34; color: white; }
.principle-band-grid { display: grid; grid-template-columns: .83fr 1.17fr; gap: 112px; }
.principle-band .section-kicker { color: #9dc7ff; }
.principle-band h2 { color: white; }
.principle-band-items { border-top: 1px solid rgba(191,215,251,.23); }
.principle-band-items > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; border-bottom: 1px solid rgba(191,215,251,.23); padding: 22px 0; }
.principle-band-items b { color: #e2efff; font-size: 16px; letter-spacing: -.04em; }
.principle-band-items p { margin: 0; color: #b0c0d8; font-size: 13px; line-height: 1.7; }
.work-stack { position: relative; justify-self: end; width: min(100%, 360px); min-height: 325px; }
.work-stack div { position: absolute; display: flex; width: 258px; height: 120px; align-items: end; justify-content: space-between; border-radius: 16px; padding: 21px; color: white; font-size: 30px; font-weight: 800; letter-spacing: -.08em; box-shadow: 0 16px 33px rgba(26,65,135,.2); }
.work-stack div::after { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; content: "SİZİN"; }
.work-stack div:nth-child(1) { top: 0; left: 7px; background: #1d4eba; transform: rotate(-5deg); }
.work-stack div:nth-child(2) { top: 92px; right: 0; background: #2f6bff; transform: rotate(5deg); }
.work-stack div:nth-child(3) { right: 24px; bottom: 8px; background: #121f38; transform: rotate(-3deg); }
.work-stack > span { position: absolute; bottom: -6px; left: 25px; color: #617795; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.showcase-page { padding-top: 105px; }
.work-heading-text { max-width: 300px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.project-meta a { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border: 1px solid #ccdcef; border-radius: 50%; background: white; color: var(--blue); font-size: 18px; transition: all .2s ease; }
.project-card:hover .project-meta a { border-color: var(--blue); background: var(--blue); color: white; }
.case-summary-section { padding: 112px 0; background: #fff; }
.case-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 130px; align-items: end; }
.case-summary-actions p { max-width: 400px; margin: 0 0 28px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.contact-page-hero { position: relative; overflow: hidden; min-height: 790px; padding: 164px 0 108px; background: #111e34; color: white; }
.contact-page-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(132,171,239,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(132,171,239,.06) 1px, transparent 1px); background-size: 72px 72px; content: ""; }
.contact-page-grid { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; gap: 104px; align-items: center; }
.contact-page-copy h1 { max-width: 580px; margin: 0; color: white; font-size: clamp(48px, 4.8vw, 73px); letter-spacing: -.075em; line-height: 1.04; }
.contact-page-copy h1 span { color: #9dc8ff; }
.contact-page-copy > p:not(.section-kicker) { max-width: 480px; margin: 25px 0 32px; color: #b8c8df; font-size: 16px; line-height: 1.75; }
.contact-page-copy .section-kicker { color: #9fc8ff; }
.phone-card { display: grid; grid-template-columns: 1fr auto; gap: 3px 15px; max-width: 330px; border: 1px solid rgba(179,210,253,.31); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,.09); color: white; transition: transform .2s ease, background .2s ease; }
.phone-card:hover { background: rgba(255,255,255,.15); transform: translateY(-3px); }
.phone-card span { color: #a5c9ff; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.phone-card strong { color: white; font-size: 21px; letter-spacing: -.04em; }
.phone-card i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #b9f568; font-size: 25px; font-style: normal; }
.contact-page-note { display: flex; gap: 9px; margin-top: 28px; color: #c3d2e7; font-size: 12px; line-height: 1.6; }
.contact-page-note span { color: #b9f568; }
.contact-page-form { background: rgba(255,255,255,.08); }
.form-title { margin: 0 0 22px; color: white; font-size: 22px; font-weight: 700; letter-spacing: -.05em; }

.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 22px; background: #091629; color: #fff; }.site-footer::before { position: absolute; z-index: -1; inset: 0; opacity: .55; background-image: linear-gradient(rgba(153,190,248,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(153,190,248,.075) 1px, transparent 1px); background-size: 72px 72px; content: ""; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 48%, transparent 100%); }.footer-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(12px); pointer-events: none; }.footer-glow-one { top: -310px; right: -160px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(42,101,255,.45), rgba(42,101,255,0) 68%); }.footer-glow-two { bottom: -280px; left: 18%; width: 470px; height: 400px; background: radial-gradient(circle, rgba(65,163,255,.17), transparent 70%); }
.footer-cta-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 58px; align-items: end; padding: 68px 0 56px; border-bottom: 1px solid rgba(167,198,244,.22); }.footer-kicker { margin: 0 0 17px; color: #a9c9ff; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; }.footer-cta-panel h2 { max-width: 730px; margin: 0; color: #fff; font-size: clamp(41px, 4.7vw, 67px); font-weight: 800; letter-spacing: -.075em; line-height: .98; }.footer-cta-panel h2 span { color: #9dc6ff; }
.footer-cta-actions { display: grid; gap: 12px; padding-bottom: 4px; }.footer-cta, .footer-phone { display: flex; align-items: center; justify-content: space-between; min-height: 63px; border-radius: 13px; padding: 13px 16px 13px 20px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }.footer-cta { background: #fff; color: #10213c; font-size: 15px; font-weight: 800; }.footer-cta i { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; background: #2f66ff; color: #fff; font-size: 19px; font-style: normal; transition: transform .2s ease; }.footer-cta:hover { background: #b9f568; transform: translateY(-3px); }.footer-cta:hover i { background: #10213c; transform: rotate(45deg); }.footer-phone { position: relative; overflow: hidden; border: 1px solid rgba(180,210,255,.36); background: rgba(255,255,255,.065); color: #fff; }.footer-phone::after { position: absolute; top: -16px; right: 14px; width: 74px; height: 74px; border: 1px solid rgba(151,195,255,.16); border-radius: 50%; content: ""; }.footer-phone span, .footer-phone strong { position: relative; z-index: 1; }.footer-phone span { color: #a8caff; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; }.footer-phone strong { margin-left: auto; margin-right: 18px; font-size: 15px; letter-spacing: -.025em; }.footer-phone i { position: relative; z-index: 1; color: #b9f568; font-size: 20px; font-style: normal; }.footer-phone:hover { border-color: #b9f568; background: rgba(185,245,104,.12); transform: translateY(-3px); }
.footer-grid { display: grid; grid-template-columns: 1.32fr .68fr 1fr; gap: clamp(32px, 5vw, 84px); padding: 50px 0 48px; }.brand-footer { margin-bottom: 17px; color: #fff; }.brand-footer .site-mark-image { filter: brightness(0) invert(1); }.brand-footer .site-wordmark { color: #fff; }.brand-footer .site-wordmark em { color: #9dc6ff; }.footer-brand-block > p { max-width: 322px; margin: 0; color: #a9bbd4; font-size: 14px; line-height: 1.72; }.footer-availability { display: inline-flex; align-items: center; gap: 8px; margin-top: 23px; border: 1px solid rgba(175,207,255,.21); border-radius: 999px; padding: 8px 11px; color: #c6d8f5; font-size: 11px; font-weight: 700; }.footer-availability i { width: 7px; height: 7px; border-radius: 50%; background: #b9f568; box-shadow: 0 0 0 4px rgba(185,245,104,.1); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.footer-links > span { margin-bottom: 7px; color: #8fb9f9; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .13em; }.footer-links a { display: inline-flex; align-items: center; gap: 8px; color: #e7effc; font-size: 14px; font-weight: 700; transition: color .2s ease, transform .2s ease; }.footer-links a i { color: #93bcff; font-size: 13px; font-style: normal; transition: transform .2s ease; }.footer-links a:hover { color: #b9f568; transform: translateX(3px); }.footer-links a:hover i { color: #b9f568; transform: rotate(45deg); }.footer-contact-links a:first-of-type { color: #bcd5fb; font-size: 13px; }
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; border-top: 1px solid rgba(167,198,244,.2); padding-top: 19px; color: #8199bb; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; }.footer-bottom > span:nth-child(2) { color: #9eb3d2; text-align: center; }.footer-bottom i { margin: 0 5px; color: #74a8ff; font-style: normal; }.footer-bottom a { justify-self: end; color: #c9d9f1; font-weight: 700; transition: color .2s ease; }.footer-bottom a:hover { color: #b9f568; }.footer-bottom a i { margin-left: 5px; }

.whatsapp-float { position: fixed; z-index: 40; top: 50%; right: 25px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #128c7e; border-radius: 999px; padding: 7px 8px 7px 16px; background: #25d366; box-shadow: 0 15px 32px rgba(18, 140, 76, .28); color: white; transform: translateY(-50%); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.whatsapp-float:hover { background: #1ebe57; box-shadow: 0 19px 38px rgba(18, 140, 76, .38); transform: translateY(-50%) translateX(-4px); }
.whatsapp-float-label { font-size: 12px; font-weight: 800; white-space: nowrap; }
.whatsapp-float-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: white; color: #25d366; }
.whatsapp-float-icon svg { width: 24px; height: 24px; }

.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(380px, calc(100% - 44px)); border: 1px solid #cbdcf4; border-radius: 10px; padding: 13px 16px; background: #fff; box-shadow: 0 15px 40px rgba(17, 45, 88, .18); color: #2c405f; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .17s; }
.reveal-delay-sm { transition-delay: .08s; }
.reveal-delay-md { transition-delay: .16s; }
.reveal-delay-lg { transition-delay: .24s; }

@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(47,102,255,0); } }
@keyframes float { 50% { transform: translateY(-11px) rotate(-22deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 1360px) {
    .whatsapp-float { top: 50%; right: 17px; bottom: auto; padding: 7px; transform: translateY(-50%); }
    .whatsapp-float:hover { transform: translateY(-50%) translateX(-3px); }
    .whatsapp-float-label { display: none; }
    .whatsapp-float-icon { width: 47px; height: 47px; }
}

@media (max-width: 1020px) {
    .hero-layout { grid-template-columns: .93fr 1.07fr; gap: 10px; }
    .hero-art { transform: scale(.98); transform-origin: right center; }
    .solutions-spotlight-main { grid-template-columns: .9fr 1.1fr; gap: 42px; }
    .solutions-photo { min-height: 435px; }
    .solutions-feature-grid { gap: 22px; }
    .pricing-heading { gap: 35px; }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .pricing-card { min-height: 542px; }
    .pricing-card-featured { transform: none; }
    .pricing-card-featured:hover { transform: translateY(-7px); }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card { min-height: 270px; }
    .project-grid { grid-template-columns: 1.2fr 1fr; }
    .project-card-wide { grid-column: span 2; }
    .process-layout, .principles-grid { gap: 60px; }
    .contact-grid { gap: 45px; }
    .inner-hero-layout, .contact-page-grid { gap: 55px; }
    .method-layout, .outcome-grid, .principle-band-grid, .case-summary-grid { gap: 65px; }
    .service-card { min-height: 420px; padding: 20px; }
    .service-card h3 { margin-top: 19px; font-size: 21px; }
    .service-card p { font-size: 14px; }
}

@media (max-width: 760px) {
    .container { width: min(100% - 34px, 600px); }
    .header-inner { height: 70px; gap: 15px; }
    .site-brand { gap: 8px; }
    .site-mark-wrap { width: 28px; height: 28px; flex-basis: 28px; }
    .site-mark-image { width: 28px; height: 28px; }
    .site-wordmark b { font-size: 15px; }
    .site-wordmark em { font-size: 9px; }
    .desktop-nav, .header-cta, .language-switch-desktop { display: none; }
    .language-switch-mobile { display: inline-flex; margin-left: auto; }
    .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: 0; border: 1px solid #d7e2f2; border-radius: 10px; background: rgba(255,255,255,.78); }
    .menu-toggle span:not(.sr-only) { display: block; width: 16px; height: 2px; border-radius: 3px; background: var(--ink); transition: transform .2s ease; }
    .menu-toggle.is-open span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
    .mobile-nav { position: absolute; top: 70px; right: 0; left: 0; display: flex; flex-direction: column; gap: 5px; max-height: 0; overflow: hidden; border-bottom: 1px solid transparent; padding: 0 max(17px, calc((100% - 566px) / 2)); background: rgba(255,255,255,.97); box-shadow: 0 16px 30px rgba(26,51,93,.05); opacity: 0; transition: max-height .3s ease, padding .3s ease, opacity .2s ease, border-color .2s ease; backdrop-filter: blur(17px); }
    .mobile-nav.is-open { max-height: 355px; border-color: #dae5f3; padding-top: 17px; padding-bottom: 20px; opacity: 1; }
    .mobile-nav > a:not(.button) { padding: 10px 3px; color: #33435f; font-size: 17px; font-weight: 800; }
    .mobile-nav > a.is-active { color: var(--blue); }
    .mobile-nav .button { margin-top: 8px; }
    .site-header.header-on-dark .menu-toggle { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.11); }
    .site-header.header-on-dark .menu-toggle span:not(.sr-only) { background: #fff; }
    .site-header.header-on-dark .mobile-nav { border-color: rgba(255,255,255,.15); background: rgba(5,6,7,.98); box-shadow: 0 18px 34px rgba(0,0,0,.32); }
    .site-header.header-on-dark .mobile-nav > a:not(.button) { color: #fff; font-size: 18px; }
    .site-header.header-on-dark .mobile-nav > a.is-active { color: #d2ff25; }
    .site-header.header-on-dark.is-scrolled .menu-toggle { border-color: #d7e2f2; background: rgba(255,255,255,.78); }
    .site-header.header-on-dark.is-scrolled .menu-toggle span:not(.sr-only) { background: var(--ink); }
    .site-header.header-on-dark.is-scrolled .mobile-nav { border-color: #dae5f3; background: rgba(255,255,255,.97); box-shadow: 0 16px 30px rgba(26,51,93,.05); }
    .site-header.header-on-dark.is-scrolled .mobile-nav > a:not(.button) { color: #33435f; }
    .site-header.header-on-dark.is-scrolled .mobile-nav > a.is-active { color: var(--blue); }
    .hero { min-height: auto; padding: 130px 0 65px; }
    .hero-layout { display: block; }
    .hero-copy { margin-inline: auto; text-align: center; }
    .hero h1 { font-size: clamp(42px, 12vw, 61px); }
    .hero-text { margin-right: auto; margin-left: auto; font-size: 15px; }
    .hero-actions { align-items: stretch; flex-direction: column; gap: 11px; width: min(100%, 245px); margin: 29px auto 0; }
    .hero-actions .button, .hero-actions .text-link { min-height: 51px; justify-content: center; }
    .hero-actions .text-link { border: 1px solid #d7e3f4; border-radius: 11px; padding: 0 18px; background: rgba(255,255,255,.78); box-shadow: 0 8px 19px rgba(36,76,141,.05); }
    .hero-actions .button-call .phone-icon { width: 19px; height: 19px; }
    .hero-notes { justify-content: center; gap: 13px; margin-top: 37px; font-size: 9px; }
    .hero-art { height: 402px; margin: 11px -24px -4px; transform: scale(.82); transform-origin: center center; }
    .ticker-track { gap: 15px; padding: 13px 0; font-size: 8px; }
    .solutions-spotlight { padding: 76px 0; }
    .solutions-spotlight-main { grid-template-columns: 1fr; min-height: 0; gap: 37px; }
    .solutions-copy { order: 1; }
    .solutions-photo { order: 2; }
    .solutions-photo { min-height: 390px; border-radius: 19px; }
    .solutions-copy h2 { font-size: clamp(37px, 10vw, 51px); }
    .solutions-copy > p:not(.solutions-kicker) { margin: 21px 0 27px; font-size: 14px; }
    .solutions-call { width: 100%; justify-content: center; }
    .solutions-feature-grid { grid-template-columns: 1fr 1fr; gap: 24px 15px; margin-top: 58px; }
    .solutions-feature h3 { margin-top: 17px; font-size: 17px; }
    .solutions-feature p { font-size: 12px; }
    .pricing-heading { display: block; }
    .pricing-heading > p { margin: 17px 0 0; font-size: 14px; }
    .pricing-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 37px; }
    .pricing-card { min-height: 0; padding: 24px 20px; }
    .pricing-card-featured, .pricing-card-featured:hover { transform: none; }
    .pricing-summary { min-height: 0; }
    .pricing-footnote { margin-top: 28px; font-size: 11px; }
    .section { padding: 83px 0; }
    .section-heading { display: block; }
    .section-heading h2 { font-size: clamp(33px, 9vw, 48px); }
    .section-heading > p { margin-top: 19px; font-size: 14px; }
    .section-heading-compact .text-link { margin-top: 19px; }
    .service-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 37px; }
    .service-card { min-height: 412px; padding: 20px; }
    .service-preview { height: 126px; }
    .service-card h3 { margin-top: 18px; font-size: 22px; }
    .project-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 37px; }
    .project-card-wide { grid-column: auto; }
    .project-visual { height: 238px; }
    .process-layout, .principles-grid, .contact-grid { grid-template-columns: 1fr; gap: 43px; }
    .process-intro { max-width: none; padding-top: 0; }
    .process-intro h2, .principles-statement h2, .contact-copy h2 { font-size: clamp(38px, 10vw, 53px); }
    .process-intro-proof { max-width: none; margin-bottom: 25px; }
    .process-roadmap { border-radius: 17px; padding: 7px; }
    .process-roadmap-head { margin: 3px 4px 8px; padding: 10px 9px 12px; }
    .process-step { grid-template-columns: 49px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 17px 12px; }
    .process-step::before { left: 37px; }
    .process-step-number { width: 42px; height: 42px; border-radius: 12px; }.process-step-number svg { width: 19px; height: 19px; }
    .process-step h3 { font-size: 19px; }.process-step-copy > p:last-child { font-size: 11px; }
    .process-step-result { grid-column: 2; justify-content: flex-start; min-width: 0; margin-top: -2px; font-size: 10px; text-align: left; }.process-step-result i { width: 23px; height: 23px; flex-basis: 23px; font-size: 14px; }
    .principles { padding-bottom: 85px; }
    .principle-items > div { grid-template-columns: 29px 1fr; gap: 8px 11px; }
    .principle-items p { grid-column: 2; }
    .contact-section { padding: 85px 0; }
    .contact-form { padding: 19px; }
    .form-success { min-height: 335px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .inner-hero { padding: 122px 0 76px; }
    .inner-hero-layout, .contact-page-grid, .method-layout, .outcome-grid, .principle-band-grid, .case-summary-grid { grid-template-columns: 1fr; gap: 42px; }
    .inner-copy h1, .contact-page-copy h1 { font-size: clamp(43px, 12vw, 61px); }
    .inner-copy > p:not(.section-kicker), .contact-page-copy > p:not(.section-kicker) { font-size: 15px; }
    .inner-actions { align-items: flex-start; flex-direction: column; gap: 19px; margin-top: 28px; }
    .page-stat-card, .direction-card, .work-stack { justify-self: center; }
    .page-stat-card { width: min(100%, 335px); padding: 26px; transform: rotate(2deg); }
    .page-stat-card strong { margin: 38px 0 44px; font-size: 48px; }
    .direction-card { width: min(100%, 335px); min-height: 294px; transform: rotate(-2deg); }
    .direction-card strong { margin-top: 37px; font-size: 48px; }
    .work-stack { width: min(100%, 330px); min-height: 300px; }
    .work-stack div { width: 230px; height: 108px; font-size: 27px; }
    .service-detail-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
    .service-detail { min-height: 340px; padding: 24px; }
    .service-detail h3 { font-size: 24px; }
    .outcome-section, .principle-band, .case-summary-section { padding: 82px 0; }
    .outcome-list div { grid-template-columns: 1fr; gap: 5px; padding: 17px 0; }
    .method-list li { grid-template-columns: 34px 1fr 18px; gap: 11px; min-height: 117px; }
    .method-list h3 { font-size: 18px; }
    .method-list p { font-size: 12px; }
    .principle-band-items > div { grid-template-columns: 1fr; gap: 5px; padding: 18px 0; }
    .showcase-page { padding-top: 83px; }
    .work-heading-text { margin-top: 18px; }
    .contact-page-hero { min-height: auto; padding: 123px 0 83px; }
    .phone-card { max-width: 100%; }
    .contact-page-note { margin-bottom: 3px; }
    .intro-section .section-heading h2 { font-size: clamp(38px, 10vw, 54px); }
    .intro-section .section-heading > p { font-size: 15px; }
    .service-grid { gap: 13px; margin-top: 41px; }
    .service-card { min-height: 304px; padding: 24px; }
    .service-card h3 { margin-top: 39px; font-size: 23px; }
    .service-card p { font-size: 14px; }
    .service-card a { font-size: 13px; }
    .whatsapp-float { top: auto; right: 17px; bottom: 19px; padding: 7px; transform: none; }
    .whatsapp-float:hover { transform: translateY(-3px); }
    .whatsapp-float-label { display: none; }
    .whatsapp-float-icon { width: 47px; height: 47px; }
    .footer-cta-panel { grid-template-columns: 1fr; gap: 31px; padding: 53px 0 42px; }
    .footer-cta-panel h2 { font-size: clamp(38px, 10vw, 54px); }
    .footer-cta-actions { padding: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 39px 18px; padding: 42px 0 38px; }
    .footer-brand-block { grid-column: 1 / -1; }.footer-brand-block > p { max-width: 330px; }
    .footer-contact-links { grid-column: 1 / -1; }
    .footer-bottom { grid-template-columns: 1fr; gap: 10px; padding-top: 17px; font-size: 8px; }.footer-bottom > span:nth-child(2) { text-align: left; }.footer-bottom a { justify-self: start; }
}

@media (max-width: 390px) {
    .hero-art { margin-top: 2px; transform: scale(.74); }
    .hero-notes { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}