/* Khurram App Studio — custom styles */
:root {
  color-scheme: dark;
  --bg: #090d18;
  --bg-soft: #0d1322;
  --surface: rgba(18, 26, 44, .78);
  --surface-solid: #111a2c;
  --text: #f4f7ff;
  --muted: #a1acc2;
  --line: rgba(159, 177, 216, .14);
  --primary: #7c6cff;
  --cyan: #47d9f4;
  --shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8ff;
  --bg-soft: #eef2ff;
  --surface: rgba(255,255,255,.84);
  --surface-solid: #fff;
  --text: #12182a;
  --muted: #59647a;
  --line: rgba(42, 55, 92, .14);
  --shadow: 0 24px 70px rgba(38, 49, 88, .11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; line-height: 1.65; transition: background .3s, color .3s; }
h1,h2,h3,h4,.brand { font-family: "Space Grotesk", sans-serif; letter-spacing: -.035em; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
::selection { background: rgba(124,108,255,.38); color: white; }
.container { max-width: 1180px; }
.ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .18; }
.ambient-one { width: 420px; height: 420px; background: #5949ff; top: 130px; left: -210px; }
.ambient-two { width: 360px; height: 360px; background: #00c7ec; top: 500px; right: -220px; opacity: .09; }
.site-nav { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; padding: 17px 0; }
.site-nav.scrolled { border-color: var(--line); box-shadow: 0 8px 35px rgba(0,0,0,.08); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 700; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8173ff, #4d9aff); box-shadow: 0 7px 22px rgba(106,95,255,.3); }
.brand-light { font-weight: 500; color: var(--muted); }
.nav-link { color: var(--muted); font-size: .91rem; transition: color .2s; }
.nav-link:hover,.nav-link:focus { color: var(--text); }
.btn-nav { padding: 10px 17px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: .9rem; }
.btn-nav:hover { background: var(--surface); color: var(--text); border-color: rgba(124,108,255,.5); }
.navbar-toggler { border-color: var(--line); color: var(--text); box-shadow: none !important; }
.navbar-toggler-icon { display: grid; place-items: center; color: var(--text); background: none; font-size: 1.55rem; }
.hero-section { position: relative; min-height: 720px; display: flex; align-items: center; padding: 150px 0 90px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow,.section-kicker { color: var(--cyan); font-size: .75rem; letter-spacing: .16em; font-weight: 700; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(71,217,244,.22); border-radius: 100px; background: rgba(71,217,244,.055); margin-bottom: 24px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #47d9f4; box-shadow: 0 0 0 5px rgba(71,217,244,.12); animation: pulse 2s infinite; }
.hero-copy h1 { max-width: 730px; font-size: clamp(3.2rem, 6vw, 5.45rem); line-height: 1.035; font-weight: 700; margin: 0 0 24px; }
.gradient-text { color: #a29aff; background: linear-gradient(100deg, #9b8cff 0%, #65d9f2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { max-width: 590px; color: var(--muted); font-size: 1.14rem; line-height: 1.8; margin-bottom: 30px; }
.btn-primary-glow { color: white; background: linear-gradient(105deg, #7866ff, #5b8dff); border: 0; border-radius: 11px; padding: 14px 21px; font-weight: 700; box-shadow: 0 9px 28px rgba(103,96,255,.24); transition: transform .2s, box-shadow .2s; }
.btn-primary-glow:hover { color: white; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(103,96,255,.35); }
.btn-quiet { color: var(--text); border: 1px solid var(--line); border-radius: 11px; padding: 13px 19px; }
.btn-quiet:hover { color: var(--text); background: var(--surface); border-color: rgba(124,108,255,.4); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 31px; color: var(--muted); font-size: .82rem; }
.hero-proof i { color: var(--cyan); margin-right: 5px; }
.hero-visual { min-height: 410px; display: grid; place-items: center; position: relative; isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; width: 270px; height: 270px; background: linear-gradient(135deg, #5949ff, #00bfe8); filter: blur(100px); opacity: .2; }
.visual-orbit { position: absolute; border: 1px solid rgba(143,153,255,.15); border-radius: 50%; transform: rotate(-25deg); }
.orbit-a { width: 390px; height: 245px; }
.orbit-b { width: 330px; height: 390px; transform: rotate(50deg); }
.code-window { width: min(100%, 430px); position: relative; z-index: 2; border: 1px solid rgba(155,169,217,.23); border-radius: 17px; overflow: hidden; background: rgba(12,18,32,.92); box-shadow: 0 32px 90px rgba(0,0,0,.38), 0 0 55px rgba(106,95,255,.09); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); animation: float 7s ease-in-out infinite; }
.window-top { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; background: #151e31; color: #8d9bb7; font: 11px monospace; border-bottom: 1px solid rgba(255,255,255,.06); }
.window-top > span { flex: 1; text-align: center; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fa6b79; }
.window-dots i:nth-child(2) { background: #f7c768; }.window-dots i:nth-child(3) { background: #58d6a1; }
.code-body { padding: 26px 15px 25px; color: #d7e1f6; font: 11.5px/2.35 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.code-line { display: flex; gap: 9px; }.line-no { width: 17px; text-align: right; color: #52617c; user-select: none; }.indent { padding-left: 26px; }
.syntax-purple { color: #c19aff; }.syntax-blue { color: #79c5ff; }.syntax-green { color: #a8e7b0; }.syntax-yellow { color: #ffda8b; }.syntax-comment { color: #687b98; }
.typing-cursor { display: inline-block; height: 14px; width: 2px; margin: auto 0 auto 2px; background: #70e4f2; animation: blink 1s steps(2) infinite; }
.window-footer { display: flex; justify-content: space-between; padding: 10px 15px; border-top: 1px solid rgba(255,255,255,.07); color: #8190ac; font-size: .67rem; }
.window-footer .text-success { font-size: .48rem; vertical-align: middle; margin-right: 5px; }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(155,169,217,.22); border-radius: 13px; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); box-shadow: var(--shadow); animation: float 6s ease-in-out infinite; }
.float-card strong,.float-card small { display: block; }.float-card strong { font-size: .8rem; }.float-card small { color: var(--muted); font-size: .67rem; }
.float-card-top { top: 40px; right: -5px; }.float-card-bottom { bottom: 40px; left: -10px; animation-delay: -2s; }
.float-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #ffcf78; background: rgba(255,195,83,.13); }.float-icon.purple { color: #a79aff; background: rgba(124,108,255,.15); }
.scroll-cue { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .62rem; letter-spacing: .15em; }
.scroll-cue span { width: 24px; height: 1px; background: var(--cyan); }
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 45%, transparent); }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 75px; color: var(--muted); font-size: .72rem; letter-spacing: .07em; }
.trust-inner span:last-child { letter-spacing: 0; font-size: .82rem; }.trust-line { flex: 1; height: 1px; background: var(--line); }
.section-pad { padding: 112px 0; }
.section-heading { max-width: 740px; margin: 0 auto 25px; }
.section-heading h2,.about-title,.contact-title { font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 1.13; font-weight: 700; margin: 15px 0; }
.section-heading p { color: var(--muted); max-width: 570px; margin: 0 auto; }
.service-card { height: 100%; position: relative; overflow: hidden; padding: 29px 25px 25px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); transition: transform .25s, border-color .25s, background .25s; }
.service-card:before { content: ""; position: absolute; top: -80px; right: -80px; width: 140px; height: 140px; border-radius: 50%; background: #7565ff; opacity: 0; filter: blur(65px); transition: opacity .3s; }
.service-card:hover { transform: translateY(-7px); border-color: rgba(124,108,255,.5); }.service-card:hover:before { opacity: .6; }
.service-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #a99fff; background: rgba(124,108,255,.13); font-size: 1.35rem; margin-bottom: 25px; }
.card-number { position: absolute; right: 25px; top: 35px; color: var(--muted); opacity: .5; font: 600 .75rem "Space Grotesk", sans-serif; }
.service-card h3 { font-size: 1.23rem; font-weight: 700; margin-bottom: 12px; }.service-card p,.service-card li { color: var(--muted); font-size: .88rem; }
.service-card p { min-height: 82px; }.service-card ul { list-style: none; padding: 0; margin: 18px 0 24px; }.service-card li { margin: 8px 0; }.service-card li:before { content: "↗"; color: var(--cyan); margin-right: 9px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: .82rem; font-weight: 700; }.text-link:hover { color: var(--cyan); }
.work-section { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 35px; max-width: none; }.section-heading-row p { max-width: 360px; margin: 0 0 10px; }
.project-card { height: 100%; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.project-blue { background: linear-gradient(140deg, rgba(37,76,142,.25), var(--surface) 70%); }.project-purple { background: linear-gradient(140deg, rgba(100,60,145,.24), var(--surface) 70%); }
.project-top { display: flex; justify-content: space-between; align-items: center; padding: 23px 25px 0; color: var(--muted); }.project-label { font-size: .66rem; letter-spacing: .13em; font-weight: 700; }.project-top i { color: var(--cyan); }
.mock-dashboard { display: flex; height: 245px; margin: 22px 25px 25px; overflow: hidden; border-radius: 10px; background: #0c1424; border: 1px solid rgba(139,159,209,.2); box-shadow: 0 20px 45px rgba(0,0,0,.2); }
.mock-sidebar { width: 48px; display: flex; flex-direction: column; gap: 18px; align-items: center; padding-top: 19px; background: #111d32; border-right: 1px solid rgba(255,255,255,.05); }.mock-sidebar span { width: 15px; height: 15px; border-radius: 5px; background: #293b5b; }.mock-sidebar span:first-child { background: #8274ff; }
.mock-content { flex: 1; padding: 22px; }.mock-title { width: 42%; height: 10px; border-radius: 6px; background: #b6c5e5; opacity: .8; }.mock-stats { display: flex; gap: 10px; margin-top: 18px; }.mock-stats span { flex: 1; height: 50px; border: 1px solid #263653; border-radius: 7px; background: linear-gradient(140deg,#182a46,#142039); }.mock-chart { display: flex; align-items: end; gap: 8px; height: 94px; padding: 13px 14px 0; margin-top: 13px; border: 1px solid #263653; border-radius: 7px; }.mock-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(#7b75ff,#4b91ff); opacity: .85; }.mock-chart i:nth-child(1){height:28%}.mock-chart i:nth-child(2){height:44%}.mock-chart i:nth-child(3){height:37%}.mock-chart i:nth-child(4){height:70%}.mock-chart i:nth-child(5){height:53%}.mock-chart i:nth-child(6){height:82%}.mock-chart i:nth-child(7){height:65%}.mock-chart i:nth-child(8){height:92%}
.phone-mock-wrap { height: 245px; display: grid; place-items: center; overflow: hidden; margin: 22px 25px 25px; }
.phone-mock { position: relative; width: 145px; height: 282px; margin-top: 42px; padding: 7px; border-radius: 25px; background: #070a13; border: 1px solid #59637c; box-shadow: 0 20px 40px rgba(0,0,0,.35); transform: rotate(-5deg); }
.phone-notch { position: absolute; z-index: 2; top: 8px; left: 43px; width: 57px; height: 13px; border-radius: 0 0 9px 9px; background: #070a13; }.phone-screen { height: 100%; border-radius: 19px; overflow: hidden; padding: 28px 10px 8px; background: linear-gradient(160deg,#f2efff,#e9f5ff); color: #202642; font-family: "DM Sans",sans-serif; }
.phone-greeting { font-size: 8px; font-weight: 700; }.phone-greeting span { color: #7e63e8; float: right; }.phone-banner { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding: 12px 8px; border-radius: 9px; color: white; background: linear-gradient(135deg,#7868e9,#5f9be7); font-size: 10px; line-height: 1.4; }.phone-banner i { font-size: 14px; }.phone-section-title { margin: 13px 0 7px; font-size: 7px; font-weight: 700; }.phone-course { display: flex; align-items: center; gap: 6px; padding: 7px 4px; margin-bottom: 6px; border-radius: 7px; background: rgba(255,255,255,.75); }.phone-course > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: #7868e9; background: #e9e4ff; font-size: 10px; }.phone-course > span.lavender { color: #d18a43; background: #fff0db; }.phone-course b,.phone-course small { display: block; font-size: 5.8px; line-height: 1.6; }.phone-course small { color: #737b91; }.phone-tabs { display: flex; justify-content: space-around; padding-top: 9px; color: #8c8da7; font-size: 9px; }.phone-tabs i:first-child { color: #7564e8; }
.project-info { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding: 0 25px 25px; }.project-info h3 { font-size: 1.2rem; font-weight: 700; }.project-info p { max-width: 400px; color: var(--muted); font-size: .85rem; margin: 0; }.project-type { border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px; color: var(--muted); font-size: .68rem; white-space: nowrap; }.portfolio-note { margin: 20px 0 0; color: var(--muted); font-size: .78rem; }
.about-art { min-height: 430px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(110,98,255,.14), transparent 55%), var(--surface); }
.about-grid { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 33px 33px; mask-image: radial-gradient(ellipse,black 20%,transparent 75%); }
.about-center { position: relative; z-index: 1; text-align: center; }.about-logo { display: grid; place-items: center; width: 105px; height: 105px; margin: 0 auto 18px; border-radius: 29px; border: 1px solid rgba(171,162,255,.45); background: linear-gradient(135deg,rgba(124,108,255,.27),rgba(71,217,244,.1)); box-shadow: 0 0 65px rgba(124,108,255,.2); color: #c4bdff; font-size: 3rem; animation: float 6s ease-in-out infinite; }.about-center > span { color: var(--muted); font-size: .67rem; letter-spacing: .2em; }
.orbit-label { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); box-shadow: var(--shadow); font-size: .78rem; }.orbit-label i { color: var(--cyan); }.label-one { top: 75px; left: 35px; }.label-two { top: 125px; right: 28px; }.label-three { bottom: 77px; right: 55px; }
.about-title { margin: 15px 0 22px; }.about-copy { color: var(--muted); font-size: .95rem; line-height: 1.85; }.about-points { display: grid; gap: 17px; margin-top: 25px; }.about-points > div { display: flex; align-items: start; gap: 12px; }.about-points i { color: var(--cyan); margin-top: 4px; }.about-points strong,.about-points small { display: block; }.about-points strong { font-size: .9rem; }.about-points small { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.btn-outline-glow { color: var(--text); border: 1px solid rgba(124,108,255,.5); border-radius: 10px; padding: 12px 18px; }.btn-outline-glow:hover { color: var(--text); background: rgba(124,108,255,.12); }
.process-section { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-grid { margin-top: 50px; position: relative; }.process-grid:before { content: ""; position: absolute; top: 29px; left: 12%; right: 12%; border-top: 1px dashed rgba(124,108,255,.32); }
.process-step { position: relative; z-index: 1; padding: 0 13px; }.step-no { position: absolute; right: 22px; top: 7px; color: var(--muted); font-size: .72rem; opacity: .7; }.step-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; margin-bottom: 22px; border: 1px solid rgba(124,108,255,.35); background: var(--bg-soft); color: #a99fff; font-size: 1.4rem; box-shadow: 0 0 0 8px var(--bg-soft); }.process-step h3 { font-size: 1.1rem; font-weight: 700; }.process-step p { color: var(--muted); font-size: .85rem; max-width: 220px; }
.cta-section { padding: 35px 0 55px; }.cta-card { min-height: 350px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 55px 65px; border: 1px solid rgba(124,108,255,.3); border-radius: 24px; background: linear-gradient(120deg,rgba(80,65,180,.22),rgba(14,25,47,.72)); }.cta-orb { position: absolute; width: 370px; height: 370px; border-radius: 50%; right: 7%; top: -40%; background: linear-gradient(135deg,#6759ff,#31c9e9); filter: blur(100px); opacity: .22; }.cta-content { position: relative; z-index: 1; }.cta-content h2 { margin: 14px 0; font-size: clamp(2.3rem,4vw,3.4rem); line-height: 1.12; }.cta-content p { max-width: 500px; color: var(--muted); margin-bottom: 24px; }.cta-decoration { position: absolute; right: 7%; display: flex; flex-direction: column; align-items: center; gap: 13px; color: #aaa2ff; font: 700 .68rem "Space Grotesk",sans-serif; letter-spacing: .16em; transform: rotate(9deg); }.cta-decoration i { font-size: 3rem; }.cta-decoration span:nth-child(2) { border: 1px solid rgba(170,162,255,.4); padding: 8px 18px; border-radius: 100px; }.cta-decoration span:nth-child(3) { font-size: 1.2rem; }
.contact-title { margin: 15px 0 20px; }.contact-lead { color: var(--muted); max-width: 400px; margin-bottom: 28px; }.contact-method { display: flex; align-items: center; gap: 13px; margin: 20px 0; }.contact-method-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: #aaa0ff; font-size: 1.15rem; }.contact-method-icon.whatsapp { color: #49d89a; }.contact-method > div { min-width: 0; flex: 1; }.contact-method small { display: block; color: var(--muted); font-size: .65rem; letter-spacing: .13em; margin-bottom: 2px; }.contact-method a:not(.copy-btn),.contact-method div > span { overflow-wrap: anywhere; font-size: .88rem; }.contact-method a:not(.copy-btn):hover { color: var(--cyan); }.copy-btn { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); }.copy-btn:hover { color: var(--text); background: var(--surface); }.direct-whatsapp { display: flex; align-items: center; gap: 8px; margin-top: 30px; padding: 14px 16px; border: 1px solid rgba(61,198,135,.24); border-radius: 12px; color: #56dda3; background: rgba(61,198,135,.06); font-size: .85rem; font-weight: 700; }.direct-whatsapp:hover { color: #75edb8; background: rgba(61,198,135,.1); }
.contact-form { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }.form-heading h3 { font-size: 1.45rem; font-weight: 700; }.form-heading p { color: var(--muted); font-size: .85rem; margin-bottom: 25px; }.form-label { color: var(--text); font-size: .82rem; font-weight: 600; margin-bottom: 8px; }.form-control,.form-select { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--bg-soft); color: var(--text); padding: 12px 14px; font-size: .88rem; }.form-control::placeholder { color: var(--muted); opacity: .65; }.form-control:focus,.form-select:focus { color: var(--text); background-color: var(--bg-soft); border-color: #8173ff; box-shadow: 0 0 0 .2rem rgba(124,108,255,.13); }.form-select option { background: var(--bg-soft); color: var(--text); }.form-note { color: var(--muted); font-size: .72rem; }.form-feedback { display: none; padding: 12px; margin-top: 16px; border-radius: 10px; color: var(--cyan); background: rgba(71,217,244,.08); font-size: .82rem; }.form-feedback.show { display: block; }
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); }.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 32px 0; }.footer-top p { color: var(--muted); font-size: .82rem; margin: 0; }.social-links { display: flex; gap: 9px; }.social-links a { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); }.social-links a:hover { color: var(--cyan); border-color: rgba(71,217,244,.35); }.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }.footer-bottom > div { display: flex; align-items: center; gap: 18px; }.footer-bottom a:hover { color: var(--text); }.theme-toggle { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }.floating-whatsapp { position: fixed; z-index: 1000; right: 22px; bottom: 22px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: white; background: #20c875; font-size: 1.55rem; box-shadow: 0 8px 26px rgba(32,200,117,.35); transition: transform .2s; }.floating-whatsapp:hover { color: white; transform: translateY(-4px) scale(1.03); }.back-to-top { position: fixed; z-index: 999; right: 29px; bottom: 88px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-solid); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; }.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 5px rgba(71,217,244,.12); } 50% { box-shadow: 0 0 0 8px rgba(71,217,244,.03); } }
@keyframes blink { 50% { opacity: 0; } }
[data-theme="light"] .code-window { box-shadow: 0 32px 90px rgba(38,49,88,.18); }
[data-theme="light"] .cta-card { background: linear-gradient(120deg,rgba(124,108,255,.12),rgba(255,255,255,.8)); }
@media (max-width: 991.98px) {
  .hero-section { padding-top: 135px; min-height: auto; }.hero-visual { margin-top: 10px; min-height: 390px; }.hero-copy h1 { max-width: 680px; }.section-pad { padding: 85px 0; }.navbar-collapse { padding: 18px 0 5px; }.navbar-nav { align-items: stretch !important; }.btn-nav { display: inline-block; }.section-heading-row { display: block; }.section-heading-row p { margin-top: 15px; }.cta-decoration { right: 4%; opacity: .6; }
}
@media (max-width: 767.98px) {
  .hero-section { padding: 125px 0 70px; }.hero-copy h1 { font-size: clamp(2.85rem, 11vw, 4.4rem); }.hero-lead { font-size: 1rem; }.hero-proof { gap: 10px 16px; }.hero-visual { min-height: 350px; }.code-window { width: 95%; }.code-body { font-size: 9.2px; padding: 20px 9px; }.float-card-top { right: -1px; top: 5px; }.float-card-bottom { left: -1px; bottom: 7px; }.float-card { padding: 9px 11px; }.visual-orbit.orbit-a { width: 300px; height: 210px; }.visual-orbit.orbit-b { width: 270px; height: 310px; }.scroll-cue { display: none; }.trust-inner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 17px 0; }.trust-line { display: none; }.section-pad { padding: 75px 0; }.section-heading h2,.about-title,.contact-title { font-size: 2.55rem; }.service-card p { min-height: auto; }.process-grid:before { display: none; }.process-step { padding-bottom: 12px; }.cta-card { padding: 38px 27px; min-height: 390px; }.cta-decoration { right: 20px; bottom: 20px; transform: scale(.75) rotate(9deg); transform-origin: bottom right; opacity: .35; }.cta-content { max-width: 100%; }.contact-form { padding: 23px 18px; }.footer-top { align-items: flex-start; flex-direction: column; gap: 13px; }.footer-bottom { align-items: flex-start; flex-direction: column; }.footer-bottom > div { width: 100%; justify-content: space-between; }
}
@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; } }