:root {
  --ink: #111019;
  --muted: #6d6a78;
  --purple: #6d3df5;
  --purple-dark: #4c21cb;
  --purple-soft: #eee9ff;
  --line: #e9e7ee;
  --paper: #ffffff;
  --off-white: #f7f6fa;
  --dark: #151020;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(34, 20, 72, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 110px 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 10px 16px; background: var(--ink); color: white; }
.skip-link:focus { top: 20px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(25,18,42,.05); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 11px; align-items: center; font-size: 19px; font-weight: 800; letter-spacing: -.7px; }
.brand > span:last-child > span { color: var(--purple); }
.brand-mark { width: 31px; height: 31px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transform: skew(-8deg); }
.brand-mark span { border-radius: 3px; background: var(--purple); }
.brand-mark span:nth-child(1) { height: 55%; align-self: end; opacity: .45; }
.brand-mark span:nth-child(2) { height: 78%; align-self: end; opacity: .72; }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; }
.main-nav > a:not(.button) { position: relative; }
.main-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--purple); transition: right .2s; }
.main-nav > a:not(.button):hover::after { right: 0; }
.menu-button { display: none; background: none; border: 0; padding: 10px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--purple);
  box-shadow: 0 12px 30px rgba(109,61,245,.24);
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); background: var(--purple-dark); box-shadow: 0 15px 34px rgba(109,61,245,.32); }
.button-small { min-height: 42px; padding: 0 18px; border-radius: 10px; }

.hero { position: relative; overflow: hidden; padding-top: 95px; padding-bottom: 120px; background: radial-gradient(circle at 79% 35%, #f0ecff 0, rgba(240,236,255,0) 34%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .38; pointer-events: none; background-image: linear-gradient(#eeeaf8 1px, transparent 1px), linear-gradient(90deg, #eeeaf8 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, transparent, black 70%, transparent); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.01fr .99fr; align-items: center; gap: 70px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--purple); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.eyebrow span { width: 20px; height: 2px; background: currentColor; }
.eyebrow.light { color: #bba7ff; }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 680px; margin: 24px 0 25px; font-size: clamp(48px, 5.4vw, 77px); line-height: 1.03; letter-spacing: -4.7px; font-weight: 800; }
h1 em { color: var(--purple); font-style: normal; }
.hero-lead { max-width: 610px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.text-link { font-size: 14px; font-weight: 750; }
.text-link span, .service-card a span { color: var(--purple); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 40px; color: #676371; font-size: 12px; font-weight: 650; }
.hero-notes span::first-letter { color: var(--purple); }

.hero-visual { position: relative; min-height: 530px; display: grid; place-items: center; }
.browser-card { position: relative; z-index: 3; width: 93%; overflow: hidden; border: 1px solid rgba(122,89,205,.22); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 40px 90px rgba(68,45,126,.2); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.browser-bar { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 14px; background: #fbfaff; border-bottom: 1px solid #eeebf5; color: #a19aaE; font-size: 9px; }
.browser-bar > span { flex: 1; padding: 4px 12px; border-radius: 5px; background: #f2eff8; }
.browser-dots { display: flex; gap: 5px; }.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ddd8e8; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #8bd8a4; }
.mock-page { position: relative; min-height: 390px; padding: 24px; overflow: hidden; background: linear-gradient(145deg, white 50%, #f0ebff); }
.mock-nav { display: flex; justify-content: space-between; }.mock-logo { width: 72px; height: 9px; border-radius: 8px; background: #332852; }
.mock-links { display: flex; gap: 9px; }.mock-links i { width: 26px; height: 5px; border-radius: 5px; background: #ded8ec; }
.mock-content { width: 58%; margin-top: 54px; }.mock-label { display: block; width: 58px; height: 7px; margin-bottom: 17px; border-radius: 6px; background: #906dff; }
.mock-title i,.mock-text i { display: block; border-radius: 10px; }.mock-title i { height: 17px; margin: 8px 0; background: #211932; }.mock-title i:nth-child(2){ width: 82%; }.mock-title i:nth-child(3){ width: 62%; background: #7044ec; }
.mock-text { margin-top: 19px; }.mock-text i { width: 93%; height: 6px; margin: 8px 0; background: #d9d4e4; }.mock-text i:last-child{ width: 70%; }
.mock-button { width: 78px; height: 25px; margin-top: 24px; border-radius: 7px; background: var(--purple); }
.mock-panel { position: absolute; right: 20px; bottom: 34px; width: 37%; height: 205px; border: 1px solid white; border-radius: 18px; background: linear-gradient(145deg, #7c50fa, #38207f); box-shadow: 0 20px 50px rgba(71,43,145,.3); }
.data-card { position: absolute; width: 94px; height: 72px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 10px 25px rgba(36,23,69,.16); }
.data-card-one { left: -18px; top: 25px; }.data-card-two { right: -13px; bottom: 20px; }
.data-card span { color: var(--purple); font-size: 16px; font-weight: 800; }.data-card i { display: block; width: 56px; height: 5px; margin-top: 8px; border-radius: 4px; background: #ddd7eb; }.data-card i:last-child { width: 35px; }
.floating-badge { position: absolute; right: 32px; top: 45px; color: white; font-size: 12px; line-height: 1.3; }.floating-badge strong { font-size: 25px; }
.orbit { position: absolute; border: 1px solid rgba(109,61,245,.18); border-radius: 50%; }.orbit-one { width: 500px; height: 500px; }.orbit-two { width: 630px; height: 630px; }
.visual-chip { position: absolute; z-index: 5; padding: 8px 13px; border: 1px solid #e4def4; border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 12px 24px rgba(44,28,82,.1); color: #6e6879; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.visual-chip span { margin-right: 5px; color: var(--purple); }.chip-one { top: 67px; left: 0; }.chip-two { right: -4px; bottom: 77px; }

.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfafd; }
.trust-row { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.trust-row p { margin: 0; color: #8c8795; font-size: 12px; }.trust-row div { display: flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }.trust-row i { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 55px; }
.section-heading h2,.process h2,.about h2,.contact h2 { margin: 18px 0 0; font-size: clamp(36px,4vw,57px); line-height: 1.12; letter-spacing: -3px; }
.section-heading > p { max-width: 420px; margin-bottom: 4px; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: 1.14fr .93fr .93fr; gap: 18px; }
.service-card { position: relative; min-height: 405px; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform .25s, border-color .25s, box-shadow .25s; }
.service-card:hover { transform: translateY(-5px); border-color: #d5c9f6; box-shadow: var(--shadow); }
.service-card.featured { color: white; border-color: transparent; background: linear-gradient(145deg,#7142f6,#4d23c1); box-shadow: 0 25px 60px rgba(84,44,197,.25); }
.service-card.featured::after { content: ""; position: absolute; right: -110px; bottom: -150px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.025); }
.service-number { color: #aaa4b3; font-size: 11px; font-weight: 800; }.featured .service-number { color: #d8ccff; }
.service-icon { width: 52px; height: 52px; margin: 31px 0 27px; display: grid; place-items: center; border-radius: 14px; color: var(--purple); background: var(--purple-soft); }
.featured .service-icon { color: white; background: rgba(255,255,255,.15); }
.service-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin-bottom: 13px; font-size: 21px; letter-spacing: -.7px; }.service-card p { color: var(--muted); font-size: 14px; }.featured p { color: #e4dcff; }
.service-card ul { position: relative; z-index: 2; padding: 0; margin: 22px 0 0; list-style: none; color: #f4f0ff; font-size: 12px; }.service-card li { margin: 9px 0; }.service-card li::before { content: "✓"; margin-right: 9px; }
.service-card > a { position: absolute; bottom: 31px; color: #3f394a; font-size: 12px; font-weight: 750; }

.portfolio { overflow:hidden; background:linear-gradient(180deg,#f8f6fc 0,#fff 100%); }
.portfolio-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 34px; }
.portfolio-overview a { position:relative; min-height:210px; overflow:hidden; border:1px solid #dfd8ec; border-radius:18px; background:#17111f; box-shadow:0 14px 35px rgba(47,28,86,.09); }
.portfolio-overview img { width:100%; height:100%; object-fit:cover; object-position:center top; opacity:.76; transition:transform .45s,opacity .3s; }
.portfolio-overview a::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,rgba(12,9,18,.92)); }
.portfolio-overview a:hover img { transform:scale(1.045); opacity:.9; }
.portfolio-overview span { position:absolute; z-index:2; right:16px; bottom:15px; left:16px; display:grid; gap:3px; color:#fff; }
.portfolio-overview small { color:#d5c9f4; font-size:7px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.portfolio-overview strong { font-size:17px; line-height:1.1; }
.portfolio-card { display:grid; grid-template-columns:1.13fr .87fr; min-height:555px; overflow:hidden; border:1px solid #dfd8ec; border-radius:28px; background:#fff; box-shadow:0 28px 75px rgba(47,28,86,.12); }
.portfolio-card[id] { scroll-margin-top:95px; }
.portfolio-card + .portfolio-card { margin-top:42px; }
.portfolio-preview { position:relative; min-height:555px; overflow:hidden; background:#dff3f1; }
.portfolio-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,25,45,.02) 50%,rgba(14,25,45,.5)); transition:background .3s; }
.portfolio-preview img { width:100%; height:100%; object-fit:cover; object-position:63% center; transition:transform .6s ease; }
.portfolio-card--restaurant .portfolio-preview img,
.portfolio-card--architecture .portfolio-preview img,
.portfolio-card--automotive .portfolio-preview img { object-position:center top; }
.portfolio-card--restaurant .portfolio-preview { background:#1a110d; }
.portfolio-card--architecture .portfolio-preview { background:#e9e4da; }
.portfolio-card--automotive .portfolio-preview { background:#080a09; }
.portfolio-preview:hover img { transform:scale(1.035); }
.portfolio-preview:hover::after { background:linear-gradient(180deg,rgba(14,25,45,0) 40%,rgba(14,25,45,.58)); }
.portfolio-browser-bar { position:absolute; z-index:2; top:20px; right:20px; left:20px; height:37px; display:flex; align-items:center; gap:6px; padding:0 12px; border:1px solid rgba(255,255,255,.75); border-radius:10px; color:#777083; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(24,27,50,.1); backdrop-filter:blur(12px); }
.portfolio-browser-bar i { width:6px; height:6px; border-radius:50%; background:#d9d2e5; }
.portfolio-browser-bar i:first-child { background:#8c6ded; }
.portfolio-browser-bar strong { flex:1; margin-left:7px; overflow:hidden; font-size:9px; font-weight:650; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-open { position:absolute; z-index:3; right:24px; bottom:22px; display:inline-flex; align-items:center; gap:10px; padding:11px 15px; border-radius:11px; color:#fff; background:rgba(20,15,33,.86); box-shadow:0 10px 25px rgba(20,15,33,.2); font-size:11px; font-weight:750; backdrop-filter:blur(10px); }
.portfolio-open b { color:#bdaaff; }
.portfolio-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,5vw,67px); }
.portfolio-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:23px; }
.portfolio-meta span { padding:6px 9px; border-radius:99px; color:#5b32c5; background:#f0ebff; font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.portfolio-meta span:last-child { color:#6f6879; background:#f3f1f5; }
.portfolio-copy h3 { margin:0 0 17px; font-size:clamp(32px,4vw,48px); line-height:1.05; letter-spacing:-2.5px; }
.portfolio-copy > p { margin-bottom:25px; color:var(--muted); font-size:14px; line-height:1.75; }
.portfolio-features { display:grid; gap:10px; margin:0 0 30px; padding:0; list-style:none; color:#484250; font-size:12px; font-weight:650; }
.portfolio-features li::before { content:"✓"; display:inline-grid; width:20px; height:20px; margin-right:9px; place-items:center; border-radius:50%; color:var(--purple); background:var(--purple-soft); font-size:9px; }
.portfolio-link { width:fit-content; display:inline-flex; align-items:center; gap:10px; padding-bottom:4px; border-bottom:1px solid #c7b7f4; color:var(--purple-dark); font-size:13px; font-weight:800; }
.portfolio-link span { transition:transform .2s; }.portfolio-link:hover span { transform:translate(3px,-3px); }
.portfolio-note { display:flex; justify-content:space-between; gap:30px; margin-top:22px; color:#888290; font-size:10px; }
.portfolio-note span { color:var(--purple); font-weight:800; text-transform:uppercase; letter-spacing:.8px; }
.portfolio-note p { margin:0; text-align:right; }

.process { color: white; background: var(--dark); }
.process-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.process-copy { position: sticky; top: 130px; }.process-copy > p { max-width: 450px; margin: 24px 0 32px; color: #aaa4b5; }.button-light { color: var(--purple-dark); background: white; box-shadow: none; }.button-light:hover { color: white; }
.steps { margin: 0; padding: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 62px 1fr; gap: 28px; padding: 31px 0; border-top: 1px solid rgba(255,255,255,.13); }.steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }.steps > li > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(184,162,255,.4); border-radius: 50%; color: #bba7ff; font-size: 10px; font-weight: 800; }.steps h3 { margin-bottom: 6px; font-size: 19px; }.steps p { margin: 0; color: #9993a3; font-size: 14px; }

.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.about-art { position: relative; min-height: 510px; display: grid; place-items: center; border-radius: 26px; background: #f4f0ff; overflow: hidden; }
.about-art::before { content:""; position:absolute; inset:0; background-image: radial-gradient(#cabcf5 1px,transparent 1px); background-size: 22px 22px; opacity:.65; }
.about-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: #8b63f7; filter: blur(75px); opacity: .38; }
.code-card { position: relative; z-index: 2; width: 67%; padding: 34px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; color: white; background: linear-gradient(145deg,rgba(34,24,58,.94),rgba(72,39,148,.94)); box-shadow: 0 30px 70px rgba(60,34,127,.3); transform: rotate(-3deg); }
.code-tag { display: block; margin-bottom: 45px; color: #bba6ff; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }.code-line { display:flex; gap:8px; margin:15px 0; }.code-line i { height:7px; border-radius:5px; background:#7b5fc2; }.code-line i:first-child { width:26%; background:#b597ff; }.code-line i:last-child{ width:58%; }.code-line.short i:last-child{ width:35%; }.code-status { margin-top: 45px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color:#c8c0d9; font-size:10px; }.code-status span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#70e39a; box-shadow:0 0 12px #70e39a; }
.about-copy > p { color: var(--muted); }.about-copy h2 { margin-bottom: 26px; }.about-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; }.about-points div { padding-top:17px; border-top:2px solid var(--purple-soft); }.about-points span { display:block; margin-bottom:8px; color:var(--purple); font-size:10px; font-weight:800; }.about-points strong { font-size:12px; }

.contact { padding-top: 30px; }
.contact-shell { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; padding:70px; border-radius:28px; color:white; background:linear-gradient(140deg,#25163f,#6736e5); box-shadow:0 30px 70px rgba(76,38,163,.25); }
.contact-copy > p { max-width:470px; margin:23px 0 38px; color:#cec3e5; }.direct-contact { display:flex; flex-direction:column; gap:14px; }.direct-contact a { display:flex; flex-direction:column; align-items:flex-start; }.direct-contact a:hover strong { color:#c9b9ff; }.direct-contact small { color:#ad9acb; font-size:10px; text-transform:uppercase; letter-spacing:1px; }.direct-contact strong { font-size:14px; transition:color .2s; }
.contact-form { padding:31px; border-radius:20px; color:var(--ink); background:white; }.contact-form label { display:block; margin-bottom:16px; color:#5c5666; font-size:11px; font-weight:750; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.contact-form input:not([type="checkbox"]),.contact-form textarea { width:100%; margin-top:7px; padding:13px 14px; border:1px solid #e3dfe9; border-radius:9px; outline:none; color:var(--ink); background:#fbfafd; transition:border-color .2s,box-shadow .2s; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }.contact-form textarea { resize:vertical; }.consent { display:flex!important; gap:9px; align-items:flex-start; font-weight:500!important; line-height:1.45; }.consent input { margin-top:3px; accent-color:var(--purple); }.consent a { color:var(--purple-dark); text-decoration:underline; }.button-submit { width:100%; }.button-submit span { margin-left:auto; }.email-fallback { display:block; margin-top:12px; color:var(--purple-dark); text-align:center; font-size:11px; font-weight:750; }.email-fallback:hover { text-decoration:underline; }.form-note { margin:9px 0 0; color:#99939f; text-align:center; font-size:9px; line-height:1.45; }

.site-footer { padding:35px 0; }.footer-row { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; }.footer-row p { margin:0; color:#8a8590; text-align:center; font-size:11px; }.footer-row p:last-child { text-align:right; }.footer-row p a:hover { color:var(--purple-dark); }.footer-brand { font-size:15px; }.footer-brand .brand-mark { width:24px;height:24px; }

.legal-page { min-height:100vh; padding:130px 0 80px; background:linear-gradient(180deg,#f7f3ff 0,#fff 36%); }.legal-card { max-width:820px; padding:44px; border:1px solid #e8e0f3; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(73,42,132,.08); }.legal-card h1 { margin:15px 0 14px; font-size:clamp(35px,6vw,62px); }.legal-card h2 { margin:34px 0 10px; font-size:20px; }.legal-card p,.legal-card li { color:#625b6c; line-height:1.75; }.legal-card ul { padding-left:20px; }.legal-card a { color:var(--purple-dark); text-decoration:underline; }.legal-back { display:inline-flex; margin-top:34px; }
.mobile-contact { display:none; }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.ai-chat { position:fixed; z-index:45; right:22px; bottom:22px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:inherit; }.ai-chat-toggle { display:flex; align-items:center; gap:9px; padding:13px 18px; border:0; border-radius:999px; color:#fff; background:linear-gradient(135deg,#7c4dff,#5622d4); box-shadow:0 14px 38px rgba(74,31,181,.32); cursor:pointer; font:750 13px/1 inherit; transition:transform .2s,box-shadow .2s; }.ai-chat-toggle:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(74,31,181,.4); }.ai-toggle-icon { display:grid; width:22px; height:22px; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:12px; }.ai-chat-panel { width:min(370px,calc(100vw - 28px)); overflow:hidden; border:1px solid #e7dff3; border-radius:22px; background:#fff; box-shadow:0 24px 80px rgba(35,18,75,.24); opacity:0; visibility:hidden; transform:translateY(12px) scale(.98); transform-origin:bottom right; transition:opacity .2s,transform .2s,visibility .2s; }.ai-chat-panel.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }.ai-chat-header { display:flex; align-items:center; gap:11px; padding:15px 16px; color:#fff; background:linear-gradient(135deg,#241239,#5e2bd8); }.ai-avatar { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:11px; background:rgba(255,255,255,.12); font-size:15px; font-weight:800; }.ai-chat-header > div:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; }.ai-chat-header strong { font-size:13px; }.ai-chat-header span { display:flex; align-items:center; gap:5px; margin-top:2px; color:#d8caef; font-size:9px; }.ai-chat-header span i { width:6px; height:6px; border-radius:50%; background:#50df91; box-shadow:0 0 0 3px rgba(80,223,145,.14); }.ai-chat-close { display:grid; width:31px; height:31px; place-items:center; border:0; border-radius:9px; color:#fff; background:rgba(255,255,255,.09); cursor:pointer; font-size:22px; line-height:1; }.ai-chat-messages { display:flex; height:280px; overflow-y:auto; flex-direction:column; gap:10px; padding:17px; background:#fbf9fe; scrollbar-width:thin; }.ai-message { max-width:86%; padding:11px 13px; border-radius:15px; color:#494253; background:#fff; box-shadow:0 4px 14px rgba(46,26,82,.06); font-size:11px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }.ai-message.assistant { align-self:flex-start; border-bottom-left-radius:5px; }.ai-message.user { align-self:flex-end; border-bottom-right-radius:5px; color:#fff; background:var(--purple); }.ai-message.typing { display:flex; width:50px; gap:4px; }.ai-message.typing i { width:5px; height:5px; border-radius:50%; background:#9c91a9; animation:ai-pulse 1s infinite alternate; }.ai-message.typing i:nth-child(2) { animation-delay:.2s; }.ai-message.typing i:nth-child(3) { animation-delay:.4s; }@keyframes ai-pulse { to { opacity:.3; transform:translateY(-2px); } }.ai-chat-suggestions { display:flex; overflow-x:auto; gap:7px; padding:10px 13px 4px; background:#fff; scrollbar-width:none; }.ai-chat-suggestions::-webkit-scrollbar { display:none; }.ai-chat-suggestions button { flex:0 0 auto; padding:7px 10px; border:1px solid #e3d9f4; border-radius:999px; color:#5b36a9; background:#faf7ff; cursor:pointer; font:700 9px/1 inherit; }.ai-chat-form { display:grid; grid-template-columns:1fr 38px; align-items:end; gap:8px; padding:10px 13px; background:#fff; }.ai-chat-form textarea { width:100%; max-height:90px; resize:none; padding:10px 11px; border:1px solid #e2dce9; border-radius:11px; outline:none; color:var(--ink); background:#fbfafd; font:500 11px/1.4 inherit; }.ai-chat-form textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }.ai-chat-form button { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:11px; color:#fff; background:var(--purple); cursor:pointer; font-size:14px; }.ai-chat-form button:disabled { cursor:wait; opacity:.55; }.ai-chat-disclaimer { margin:0; padding:0 13px 11px; color:#99919f; text-align:center; font-size:8px; line-height:1.4; }.ai-chat-disclaimer a { color:#7657aa; text-decoration:underline; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }.delay-1 { transition-delay:.1s; }.delay-2 { transition-delay:.2s; }.delay-3 { transition-delay:.3s; }

@media (max-width: 980px) {
  .section { padding: 85px 0; }
  .hero-grid { grid-template-columns:1fr; gap:45px; }.hero-copy { max-width:720px; }.hero-visual { min-height:500px; width:min(670px,100%); margin:auto; }
  .service-grid { grid-template-columns:1fr 1fr; }.service-card.featured { grid-row:span 2; }.process-grid,.about-grid { gap:55px; }.contact-shell { gap:40px; padding:50px; }.about-points { grid-template-columns:1fr; }
  .portfolio-overview { grid-template-columns:repeat(2,1fr); }.portfolio-card { grid-template-columns:1fr; }.portfolio-preview { min-height:470px; }.portfolio-copy { padding:48px; }
}

@media (max-width: 760px) {
  .container { width:min(100% - 28px,1160px); }.section { padding:70px 0; }
  .nav-wrap { min-height:68px; }.menu-button { display:block; position:relative; z-index:3; }.menu-button span { display:block; width:24px; height:2px; margin:6px 0; background:var(--ink); transition:.2s; }.menu-button[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .main-nav { position:fixed; inset:0; padding:110px 28px 40px; display:flex; flex-direction:column; align-items:stretch; gap:26px; transform:translateX(100%); background:white; font-size:23px; transition:transform .28s; }.main-nav.open { transform:none; }.main-nav .button { font-size:14px; }
  .hero { padding-top:65px; }.hero-grid { gap:20px; }h1 { font-size:clamp(43px,13vw,62px); letter-spacing:-3.3px; }.hero-lead { font-size:16px; }.hero-actions { align-items:stretch; flex-direction:column; gap:18px; }.text-link { text-align:center; }.hero-notes { gap:10px; flex-direction:column; }
  .hero-visual { min-height:400px; }.browser-card { width:100%; transform:none; }.mock-page { min-height:310px; padding:18px; }.mock-content { margin-top:38px; }.mock-panel { height:160px; }.orbit-one { width:380px;height:380px; }.orbit-two { width:480px;height:480px; }.chip-one { top:28px; }.chip-two { bottom:30px; }.data-card { transform:scale(.8); }
  .trust-row { padding:20px 0; align-items:flex-start; flex-direction:column; }.trust-row div { width:100%; gap:12px; justify-content:space-between; flex-wrap:wrap; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:18px; }.section-heading h2,.process h2,.about h2,.contact h2 { font-size:38px; letter-spacing:-2px; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:360px; }.service-card.featured { grid-row:auto; }
  .portfolio-overview { grid-template-columns:1fr 1fr; gap:9px; margin-bottom:24px; }.portfolio-overview a { min-height:155px; border-radius:14px; }.portfolio-overview span { right:11px; bottom:11px; left:11px; }.portfolio-overview strong { font-size:14px; }.portfolio-card { min-height:0; border-radius:20px; }.portfolio-preview { min-height:390px; }.portfolio-copy { padding:32px 24px; }.portfolio-copy h3 { letter-spacing:-1.8px; }.portfolio-note { align-items:flex-start; flex-direction:column; gap:8px; }.portfolio-note p { text-align:left; }
  .process-grid,.about-grid,.contact-shell { grid-template-columns:1fr; }.process-copy { position:static; }.process-grid { gap:55px; }.steps li { grid-template-columns:48px 1fr; gap:14px; }
  .about-art { min-height:390px; }.code-card { width:78%; }.about-grid { gap:45px; }.about-points { grid-template-columns:repeat(3,1fr); }
  .contact { padding-top:0; }.contact-shell { width:100%; border-radius:0; padding:60px 20px; }.contact-form { padding:23px; }.field-row { grid-template-columns:1fr; gap:0; }.direct-contact strong { overflow-wrap:anywhere; }.legal-page { padding:100px 0 55px; }.legal-card { padding:27px 22px; border-radius:18px; }
  .footer-row { grid-template-columns:1fr; justify-items:center; }.footer-row p:last-child { text-align:center; }
  .mobile-contact { position:fixed; z-index:20; right:14px; bottom:14px; display:flex; align-items:center; gap:8px; padding:12px 17px; border-radius:30px; color:white; background:var(--purple); box-shadow:0 10px 30px rgba(79,37,190,.35); font-size:13px; font-weight:750; }.mobile-contact span { font-size:15px; }
  .ai-chat { right:auto; left:14px; bottom:14px; align-items:flex-start; }.ai-chat-toggle { width:45px; height:45px; justify-content:center; padding:0; }.ai-chat-toggle > span:last-child { display:none; }.ai-chat-panel { position:fixed; right:14px; bottom:73px; left:14px; width:auto; transform-origin:bottom left; }.ai-chat-messages { height:min(300px,42vh); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }* { transition:none!important; }.reveal { opacity:1;transform:none; }
}