:root {
  --bg: #050b16;
  --bg-2: #081224;
  --panel: #0d1a30;
  --panel-soft: #101f38;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(104,168,255,.28);
  --text: #f7f9fc;
  --muted: #98a8bd;
  --blue: #1683ff;
  --blue-2: #4ca5ff;
  --cyan: #43d9ff;
  --white: #fff;
  --dark: #06101f;
  --green: #20c66b;
  --radius: 24px;
  --shadow: 0 30px 90px rgba(0,0,0,.35);
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 118px 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 9999; padding: 12px 16px; color: var(--dark); background: white; border-radius: 10px; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.site-header.scrolled { background: rgba(5,11,22,.82); border-color: var(--line); backdrop-filter: blur(18px); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(22,131,255,.2)); }
.brand > span { display: grid; color: white; font-size: 1.22rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.brand b { color: var(--blue-2); }
.brand small { margin-top: 6px; color: #8fa3bd; font-size: .47rem; font-weight: 750; letter-spacing: .17em; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav > a { color: #b6c3d4; font-size: .82rem; font-weight: 720; transition: color .2s; }
.main-nav > a:hover { color: white; }
.main-nav .nav-button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 17px; color: white; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; }
.main-nav .nav-button:hover { color: white; background: rgba(255,255,255,.11); }
.nav-button svg { width: 16px; height: 16px; }
.menu-toggle { display: none; width: 44px; height: 44px; place-items: center; padding: 0; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; }
.menu-toggle svg { width: 22px; height: 22px; }

.hero { position: relative; overflow: hidden; min-height: 100vh; padding: 145px 0 0; background: radial-gradient(circle at 82% 15%, rgba(18,111,255,.16), transparent 31%), linear-gradient(180deg, #07101e 0%, #050b16 100%); }
.hero-grid-bg { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb-one { width: 420px; height: 420px; right: 2%; top: 10%; background: radial-gradient(circle at 35% 35%, rgba(74,166,255,.22), rgba(26,116,255,.04) 58%, transparent 72%); }
.orb-two { width: 560px; height: 560px; left: -250px; bottom: -250px; background: radial-gradient(circle, rgba(0,111,255,.13), transparent 68%); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; min-height: 690px; }
.hero-copy { padding-bottom: 40px; }
.hero-badge { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 8px 12px; color: #b9cae0; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 999px; font-size: .67rem; font-weight: 760; letter-spacing: .055em; }
.hero-badge span { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(22,131,255,.14), 0 0 22px rgba(22,131,255,.8); }
.hero h1 { max-width: 670px; margin: 0; font-size: clamp(3.4rem, 5.45vw, 5.85rem); line-height: .98; letter-spacing: -.067em; }
.hero h1 em { color: transparent; background: linear-gradient(110deg, #4ca5ff, #37dcff 72%); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero-copy > p { max-width: 650px; margin: 26px 0 0; color: #a8b7ca; font-size: 1rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; font-size: .82rem; font-weight: 820; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; height: 18px; }
.button-primary { color: white; background: linear-gradient(135deg, #1478f5, #1a96ff); border-color: transparent; box-shadow: 0 14px 38px rgba(18,122,255,.3); }
.button-primary:hover { box-shadow: 0 18px 48px rgba(18,122,255,.42); }
.button-secondary { color: white; background: rgba(255,255,255,.055); }
.button-secondary:hover { background: rgba(255,255,255,.095); border-color: rgba(255,255,255,.23); }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-proof > div { display: flex; align-items: flex-start; gap: 11px; padding-right: 18px; }
.hero-proof > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-proof b { color: var(--blue-2); font-size: .72rem; }
.hero-proof span { color: #91a2b8; font-size: .7rem; line-height: 1.45; }

.hero-studio { position: relative; min-width: 0; perspective: 1400px; }
.studio-window { overflow: hidden; background: rgba(10,20,37,.88); border: 1px solid rgba(104,168,255,.25); border-radius: 22px; box-shadow: 0 50px 120px rgba(0,0,0,.55), 0 0 80px rgba(22,131,255,.08); transform: rotateY(-4deg) rotateX(1.5deg); transform-origin: center; }
.studio-topbar { height: 50px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; color: #72849c; background: rgba(255,255,255,.035); border-bottom: 1px solid var(--line); font-size: .62rem; }
.window-dots { display: flex; gap: 6px; }.window-dots i{width:7px;height:7px;border-radius:50%;background:#ef6c65}.window-dots i:nth-child(2){background:#e8b94d}.window-dots i:nth-child(3){background:#43ba78}
.live-dot { justify-self: end; display: flex; align-items: center; gap: 7px; color: #7e91a9; font-weight: 800; letter-spacing: .08em; }.live-dot i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}
.studio-body { min-height: 530px; display: grid; grid-template-columns: 64px 1fr; }
.studio-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; background: rgba(3,9,18,.6); border-right: 1px solid var(--line); }
.studio-sidebar img { width: 38px; height: 38px; margin-bottom: 12px; }
.studio-sidebar i { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; }
.studio-sidebar i.active { background: rgba(22,131,255,.2); border-color: rgba(70,161,255,.45); box-shadow: inset 0 0 0 7px rgba(22,131,255,.8); }
.studio-canvas { padding: 25px; background: linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,.008)); }
.canvas-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.canvas-head div { display: grid; gap: 7px; }.canvas-head small{color:#71839b;font-size:.58rem;font-weight:900;letter-spacing:.14em}.canvas-head strong{font-size:1.05rem;letter-spacing:-.025em}.canvas-head>span{color:#6baeff;font-size:.75rem;font-weight:900;border:1px solid rgba(75,160,255,.25);padding:7px 9px;border-radius:8px;background:rgba(31,112,223,.1)}
.canvas-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 220px 196px; gap: 12px; }
.canvas-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.095); border-radius: 15px; }
.canvas-card footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-top: 1px solid rgba(255,255,255,.08); font-size: .62rem; }.canvas-card footer span{color:#d4ddea;font-weight:800}.canvas-card footer b{color:#60c9ff;font-size:.55rem;text-transform:uppercase;letter-spacing:.08em}
.mini-browser { flex: 1; margin: 13px 13px 0; overflow: hidden; background: #eef4ff; border-radius: 10px 10px 0 0; }
.mini-browser-top { height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 7px; background: #fff; border-bottom: 1px solid #dce5f0; }.mini-browser-top i{width:4px;height:4px;border-radius:50%;background:#a8b4c4}
.mini-browser-body { padding: 13px; background: linear-gradient(130deg,#f7faff,#eaf3ff); height: calc(100% - 20px); }.mini-nav{width:50%;height:6px;background:#0b1a31;border-radius:3px;margin-bottom:18px}.mini-title{width:72%;height:20px;background:#0d1b32;border-radius:5px}.mini-line{width:58%;height:6px;background:#a9b8ca;border-radius:3px;margin-top:9px}.mini-button{width:42px;height:14px;background:#1787ff;border-radius:4px;margin-top:11px}.mini-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:16px}.mini-panels span{height:38px;background:white;border:1px solid #dce7f5;border-radius:5px}
.identity-board { flex: 1; display: grid; place-content: center; gap: 13px; background: radial-gradient(circle at 50% 25%, rgba(33,132,255,.18), transparent 52%); }.concept-logo{font-size:3rem;font-weight:950;letter-spacing:-.14em;color:white;text-shadow:0 15px 30px rgba(0,0,0,.35)}.concept-logo span{color:#238cff}.swatches{display:flex;justify-content:center;gap:6px}.swatches i{width:17px;height:17px;border-radius:5px;background:#f4f7fb}.swatches i:nth-child(2){background:#208bff}.swatches i:nth-child(3){background:#0d1a31}.swatches i:nth-child(4){background:#56d7ff}.type-lines{display:grid;text-align:center;gap:4px}.type-lines b{font-size:.58rem;letter-spacing:.22em}.type-lines span{color:#74869f;font-size:.45rem;letter-spacing:.19em}
.map-scene { flex: 1; position: relative; overflow: hidden; background: #0a1629; }.map-lines{position:absolute;inset:0;background-image:linear-gradient(30deg, transparent 46%, rgba(43,126,225,.2) 47%, rgba(43,126,225,.2) 49%, transparent 50%),linear-gradient(-25deg, transparent 48%, rgba(43,126,225,.14) 49%, rgba(43,126,225,.14) 51%, transparent 52%);background-size:70px 55px}.map-pin{position:absolute;left:50%;top:42%;width:38px;height:38px;background:#1788ff;border-radius:50% 50% 50% 0;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 12px rgba(24,136,255,.1),0 0 38px rgba(24,136,255,.5)}.map-pin span{position:absolute;width:12px;height:12px;left:13px;top:13px;background:white;border-radius:50%}.map-info{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:9px;padding:9px;background:rgba(6,14,27,.86);border:1px solid rgba(255,255,255,.1);border-radius:9px}.map-info i{width:27px;height:27px;background:#1b8cff;border-radius:7px}.map-info div{display:grid;gap:2px}.map-info b{font-size:.57rem}.map-info small{color:#7e90a8;font-size:.48rem}
.metric-card { padding: 20px; background: linear-gradient(145deg, rgba(18,117,255,.15), rgba(255,255,255,.035)); }.metric-card small{color:#7c8da4;font-size:.55rem;font-weight:900;letter-spacing:.12em}.metric-card strong{margin-top:8px;font-size:2.2rem;letter-spacing:-.08em}.metric-ring{position:absolute;right:17px;top:23px;width:58px;height:58px;border-radius:50%;background:conic-gradient(#238cff 0 82%,rgba(255,255,255,.07) 82%)}.metric-ring:after{content:"";position:absolute;inset:8px;background:#101e34;border-radius:50%}.metric-ring span{position:absolute;z-index:2;inset:0;display:grid;place-items:center}.metric-card p{margin:auto 0 0;color:#8495ab;font-size:.58rem}
.floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(12,24,43,.9); border: 1px solid rgba(89,164,255,.28); border-radius: 13px; backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.4); }.floating-chip svg{width:22px;height:22px;color:#4da6ff}.floating-chip span{display:grid;gap:2px}.floating-chip b{font-size:.64rem}.floating-chip small{color:#8192a8;font-size:.52rem}.chip-one{left:-34px;bottom:76px}.chip-two{right:-23px;top:86px}

.service-ticker { position: relative; z-index: 3; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ticker-track { width: max-content; display: flex; animation: ticker 28s linear infinite; }
.ticker-track span { height: 72px; display: flex; align-items: center; gap: 32px; padding-left: 32px; color: #8fa0b6; font-size: .65rem; font-weight: 850; letter-spacing: .16em; white-space: nowrap; }
.ticker-track i { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 15px rgba(22,131,255,.8); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 70px; margin-bottom: 55px; }
.eyebrow { display: inline-block; margin-bottom: 14px; color: #5facff; font-size: .65rem; font-weight: 900; letter-spacing: .17em; }
.section-heading h2, .principles h2, .process h2, .faq h2, .contact h2 { margin: 0; font-size: clamp(2.25rem, 4vw, 4.2rem); line-height: 1.06; letter-spacing: -.055em; }
.section-heading p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.75; }

.services { background: #07101f; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(275px, auto); gap: 14px; }
.service-card { position: relative; overflow: hidden; padding: 27px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: 20px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(70,155,255,.32); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); }
.service-large { grid-column: span 2; grid-row: span 2; padding-bottom: 220px; }
.service-logo, .service-map { grid-column: span 2; }
.service-number { position: absolute; top: 27px; right: 27px; color: #52637a; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.service-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 26px; color: #55a9ff; background: rgba(26,132,255,.12); border: 1px solid rgba(80,163,255,.19); border-radius: 13px; }
.service-icon svg { width: 23px; height: 23px; }
.service-card h3 { margin: 0 0 12px; font-size: 1.35rem; letter-spacing: -.035em; }
.service-card p { max-width: 520px; margin: 0; color: #97a8bd; font-size: .82rem; line-height: 1.72; }
.service-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.service-card li { padding: 7px 9px; color: #aab8c9; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; font-size: .64rem; }
.website-visual { position: absolute; left: 28px; right: 28px; bottom: -18px; height: 205px; overflow: hidden; background: #eaf2ff; border: 7px solid #15243b; border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 30px 50px rgba(0,0,0,.3); transform: perspective(500px) rotateX(3deg); }.wv-top{height:27px;background:#fff;border-bottom:1px solid #d8e3ef}.wv-body{height:calc(100% - 27px);display:grid;grid-template-columns:1.1fr .9fr;gap:12px;padding:18px}.wv-body:before{content:"";display:block;background:linear-gradient(145deg,#0d1d35,#163d70);border-radius:9px}.wv-body:after{content:"";display:block;background:linear-gradient(#fff,#f4f8ff);border:1px solid #dce7f3;border-radius:9px}.wv-body span{display:none}
.logo-showcase { position: absolute; right: 28px; bottom: 25px; display: flex; align-items: flex-end; gap: 20px; }.logo-showcase b{font-size:3.4rem;letter-spacing:-.14em}.logo-showcase b span{color:#258cff}.logo-showcase>div{display:flex;gap:5px;margin-bottom:7px}.logo-showcase i{width:17px;height:17px;border-radius:5px;background:#248cff}.logo-showcase i:nth-child(2){background:#55d8ff}.logo-showcase i:nth-child(3){background:#eaf2ff}.logo-showcase i:nth-child(4){background:#111f35}
.map-visual { position: absolute; right: 0; bottom: 0; width: 48%; height: 80%; opacity: .9; background-image: linear-gradient(28deg, transparent 47%, rgba(48,134,241,.18) 48%, rgba(48,134,241,.18) 50%, transparent 51%), linear-gradient(-38deg, transparent 47%, rgba(48,134,241,.14) 48%, rgba(48,134,241,.14) 50%, transparent 51%); background-size: 80px 60px; mask-image: linear-gradient(90deg, transparent, black 30%); }.map-visual span{position:absolute;left:55%;top:42%;width:38px;height:38px;background:#1888ff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 13px rgba(24,136,255,.1),0 0 35px rgba(24,136,255,.45)}.map-visual span:after{content:"";position:absolute;width:11px;height:11px;background:white;border-radius:50%;left:13px;top:13px}.map-visual i{position:absolute;width:6px;height:6px;background:#2f8eff;border-radius:50%;box-shadow:0 0 12px #2f8eff}.map-visual i:nth-of-type(1){left:22%;top:30%}.map-visual i:nth-of-type(2){left:80%;top:22%}.map-visual i:nth-of-type(3){left:76%;top:72%}

.work { background: #f4f7fb; color: #091427; }
.work .section-heading p { color: #68768a; }
.work .eyebrow { color: #167cf0; }
.work-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -20px 0 28px; }
.work-filter button { padding: 10px 15px; color: #5d6b7d; background: white; border: 1px solid #dce4ee; border-radius: 999px; font-size: .72rem; font-weight: 780; cursor: pointer; transition: .2s; }
.work-filter button.active, .work-filter button:hover { color: white; background: #0a1930; border-color: #0a1930; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.project { overflow: hidden; background: white; border: 1px solid #dfe6ef; border-radius: 22px; transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.project:hover { transform: translateY(-5px); box-shadow: 0 25px 55px rgba(16,35,61,.12); }
.project.hidden { display: none; }
.project-visual { height: 370px; padding: 38px; overflow: hidden; }
.project-wide .project-visual { height: 410px; }
.project-meta { min-height: 140px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 25px 27px 27px; border-top: 1px solid #e2e8f0; }
.project-meta small { color: #1582f5; font-size: .6rem; font-weight: 900; letter-spacing: .13em; }
.project-meta h3 { margin: 8px 0 7px; font-size: 1.25rem; letter-spacing: -.035em; }
.project-meta p { margin: 0; color: #6c798a; font-size: .78rem; line-height: 1.55; }
.project-meta > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; color: #0b1a31; background: #eef3f8; border-radius: 50%; }
.project-meta svg { width: 18px; height: 18px; }
.web-project { display: grid; place-items: center; background: radial-gradient(circle at 78% 22%, #4ba3ff, transparent 30%), linear-gradient(135deg, #0b1930, #102c55); }
.project-browser { width: 93%; overflow: hidden; background: white; border: 7px solid #dce6f2; border-radius: 16px; box-shadow: 0 35px 60px rgba(0,0,0,.35); transform: rotate(-2deg); }.pb-top{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#eef3f8}.pb-top i{width:6px;height:6px;border-radius:50%;background:#aab6c5}.pb-layout{height:260px;display:grid;grid-template-columns:60px 1fr}.pb-layout aside{background:#0a172b}.pb-layout main{padding:30px;background:linear-gradient(145deg,#f8fbff,#edf5ff)}.pb-layout main>span{display:block;width:60px;height:8px;background:#258cff;border-radius:4px}.pb-layout main>b{display:block;width:62%;height:38px;margin-top:18px;background:#0b1b32;border-radius:7px}.pb-layout main>p{width:48%;height:8px;background:#aab9ca;border-radius:4px}.pb-layout main>button{width:75px;height:26px;border:0;background:#258cff;border-radius:6px}.pb-layout main>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:27px}.pb-layout main>div i{height:58px;background:white;border:1px solid #dce6f1;border-radius:7px}
.brand-project { display: grid; place-items: center; background: linear-gradient(145deg,#ddd2c5,#f4eee7); }.brand-canvas{width:82%;height:82%;display:grid;place-content:center;text-align:center;background:#f8f5f0;border:1px solid rgba(53,38,25,.14);box-shadow:0 28px 55px rgba(54,40,27,.18);transform:rotate(2deg)}.brand-canvas>b{font-family:Georgia,serif;font-size:4.8rem;letter-spacing:-.14em;color:#2f2a25}.brand-canvas>b span{color:#b67b4f}.brand-type{margin-top:10px;font-family:Georgia,serif;font-size:1rem;letter-spacing:.2em}.brand-type small{font-family:system-ui,sans-serif;font-size:.48rem;letter-spacing:.24em;color:#8f7764}.brand-colors{display:flex;justify-content:center;gap:6px;margin-top:18px}.brand-colors i{width:24px;height:24px;background:#2f2a25;border-radius:50%}.brand-colors i:nth-child(2){background:#b67b4f}.brand-colors i:nth-child(3){background:#ddd2c5}
.google-project { padding: 0; background: #dfefff; }.google-map{position:relative;width:100%;height:100%;overflow:hidden;background-color:#e9f4ff;background-image:linear-gradient(31deg,transparent 47%,#c4dbed 48%,#c4dbed 51%,transparent 52%),linear-gradient(-36deg,transparent 47%,#d1e3f2 48%,#d1e3f2 51%,transparent 52%);background-size:110px 85px}.route{position:absolute;left:10%;top:50%;width:85%;height:7px;background:#2f8df6;border-radius:99px;transform:rotate(-14deg);box-shadow:0 0 0 4px white}.pin{position:absolute;width:36px;height:36px;background:#137ef4;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 10px 25px rgba(22,125,242,.32)}.pin:after{content:"";position:absolute;left:12px;top:12px;width:12px;height:12px;background:white;border-radius:50%}.p1{left:25%;top:39%}.p2{right:19%;top:20%;background:#0b1a30}.listing{position:absolute;left:8%;right:8%;bottom:25px;display:flex;align-items:center;gap:12px;padding:13px 15px;background:white;border-radius:12px;box-shadow:0 18px 40px rgba(38,87,130,.17)}.listing>i{width:42px;height:42px;background:#187ff1;border-radius:10px}.listing div{display:grid;gap:3px}.listing b{font-size:.75rem}.listing small{color:#708196;font-size:.61rem}
.combo-project { position: relative; background: linear-gradient(135deg,#07162c,#133d73); }.combo-logo{position:absolute;left:9%;top:14%;color:white;font-size:4.1rem;font-weight:950;letter-spacing:-.12em}.combo-logo span{color:#45d6ff}.combo-device{position:absolute;right:7%;bottom:-5%;width:55%;height:82%;padding:28px;background:#f4f8ff;border:8px solid #dbe4ef;border-radius:22px 22px 0 0;box-shadow:0 30px 50px rgba(0,0,0,.35);transform:rotate(3deg)}.combo-device div{width:70%;height:23px;background:#0a1a31;border-radius:6px}.combo-device span{display:block;width:48%;height:7px;background:#92a6bc;border-radius:4px;margin-top:12px}.combo-device i{display:inline-block;width:43%;height:90px;margin:28px 5px 0 0;background:white;border:1px solid #dbe6f2;border-radius:9px}.combo-palette{position:absolute;left:9%;bottom:18%;display:flex;gap:7px}.combo-palette i{width:30px;height:30px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#f6f8fb}.combo-palette i:nth-child(2){background:#43d6ff}.combo-palette i:nth-child(3){background:#1888ff}.combo-palette i:nth-child(4){background:#0a1a31}

.principles { background: #07101f; }
.principles-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 90px; }
.principles-copy { position: sticky; top: 120px; }
.principles-copy > p { margin: 25px 0 28px; color: var(--muted); line-height: 1.78; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #66b2ff; font-size: .8rem; font-weight: 800; }.text-link svg{width:18px;height:18px}
.principle-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.principle-cards article { min-height: 245px; padding: 27px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 18px; }
.principle-cards article > span { width: 45px; height: 45px; display: grid; place-items: center; color: #4ea7ff; background: rgba(24,132,255,.12); border: 1px solid rgba(76,164,255,.2); border-radius: 13px; }.principle-cards svg{width:22px;height:22px}.principle-cards h3{margin:30px 0 10px;font-size:1.06rem}.principle-cards p{margin:0;color:#91a3b9;font-size:.78rem;line-height:1.7}

.packages { background: #f4f7fb; color: #091427; }
.packages .section-heading p { color: #68768a; }
.packages .eyebrow { color: #167cf0; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.package-card { position: relative; display: flex; flex-direction: column; min-height: 590px; padding: 31px; background: white; border: 1px solid #dfe6ef; border-radius: 22px; transition: transform .25s ease, box-shadow .25s ease; }
.package-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(11,29,55,.12); }
.package-card.featured { color: white; background: linear-gradient(145deg,#0a1930,#071225); border-color: #183e70; box-shadow: 0 28px 70px rgba(6,17,34,.25); }
.recommended { position: absolute; left: 24px; top: -15px; padding: 8px 11px; color: white; background: #1683ff; border-radius: 8px; font-size: .57rem; font-weight: 900; letter-spacing: .1em; box-shadow: 0 9px 25px rgba(22,131,255,.3); }
.package-index { position: absolute; top: 31px; right: 31px; color: #9aa6b4; font-size: .68rem; font-weight: 900; }.featured .package-index{color:#526c8e}
.package-head small { color: #1480f1; font-size: .6rem; font-weight: 900; letter-spacing: .13em; }.featured .package-head small{color:#66b4ff}
.package-head h3 { margin: 15px 0 12px; font-size: 1.8rem; letter-spacing: -.045em; }
.package-head p { min-height: 75px; margin: 0; color: #68768a; font-size: .81rem; line-height: 1.65; }.featured .package-head p{color:#9cafc5}
.package-card ul { display: grid; gap: 14px; margin: 29px 0 34px; padding: 27px 0 0; border-top: 1px solid #e2e8f0; list-style: none; }.featured ul{border-color:rgba(255,255,255,.11)}
.package-card li { display: flex; align-items: flex-start; gap: 10px; color: #536174; font-size: .78rem; line-height: 1.45; }.featured li{color:#d0dbe8}
.package-card li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: #1783f4; stroke-width: 2.5; }
.package-card .button { width: 100%; margin-top: auto; color: #091427; border-color: #d7e0eb; }.featured .button{color:white;border-color:transparent}

.process { background: #06101f; }
.process-heading { max-width: 760px; margin-bottom: 62px; }.process-heading>p{max-width:580px;margin:20px 0 0;color:var(--muted);line-height:1.7}
.process-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-line:before { content: ""; position: absolute; left: 7%; right: 7%; top: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(74,160,255,.45), transparent); }
.process-line article { position: relative; padding-right: 24px; }
.process-line article > span { position: absolute; right: 20px; top: 14px; color: #42546c; font-size: .68rem; font-weight: 900; }
.process-icon { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; color: #5babff; background: #0d203b; border: 1px solid rgba(75,162,255,.25); border-radius: 16px; box-shadow: 0 0 0 9px #06101f; }.process-icon svg{width:25px;height:25px}
.process-line h3 { margin: 32px 0 11px; font-size: 1.05rem; }.process-line p{margin:0;color:#8fa1b7;font-size:.78rem;line-height:1.7}

.faq { background: #f4f7fb; color: #091427; }
.faq .eyebrow { color: #167cf0; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 86px; align-items: start; }
.faq-intro { position: sticky; top: 115px; }
.faq-intro > p { margin: 21px 0 28px; color: #6a788b; line-height: 1.72; }
.faq .button-secondary { color: #091427; background: white; border-color: #d9e2ed; }
.accordion { display: grid; gap: 11px; }
details { overflow: hidden; background: white; border: 1px solid #dce4ee; border-radius: 15px; }
summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; font-size: .88rem; font-weight: 800; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary svg { flex: 0 0 auto; width: 19px; height: 19px; color: #1783f4; transition: transform .2s ease; }
details[open] summary svg { transform: rotate(45deg); }
details p { margin: 0; padding: 0 22px 23px; color: #68778a; font-size: .8rem; line-height: 1.72; }

.contact { padding-top: 45px; background: #f4f7fb; color: white; }
.contact-shell { position: relative; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; padding: 64px; background: radial-gradient(circle at 14% 20%, rgba(30,133,255,.25), transparent 30%), linear-gradient(145deg,#08182d,#05101f); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; box-shadow: 0 35px 80px rgba(7,24,48,.22); }
.contact-shell:after { content: ""; position: absolute; right: -180px; bottom: -240px; width: 540px; height: 540px; border: 1px solid rgba(77,161,255,.16); border-radius: 50%; box-shadow: 0 0 0 85px rgba(58,143,255,.045), 0 0 0 170px rgba(58,143,255,.025); }
.contact-copy, .quote-form { position: relative; z-index: 2; }
.contact-copy > p { max-width: 550px; margin: 24px 0 0; color: #a7b7ca; line-height: 1.75; }
.contact-features { display: grid; gap: 12px; margin-top: 31px; }.contact-features span{display:flex;align-items:center;gap:9px;color:#d5e0ec;font-size:.76rem}.contact-features svg{width:17px;height:17px;color:#59adff;stroke-width:2.5}
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 28px; color: #0b1729; background: white; border-radius: 20px; box-shadow: 0 25px 70px rgba(0,0,0,.27); }
.form-head { grid-column: 1/-1; display: grid; gap: 6px; padding-bottom: 9px; }.form-head span{color:#1681f4;font-size:.59rem;font-weight:900;letter-spacing:.13em}.form-head b{font-size:1.18rem}
.quote-form label { display: grid; gap: 7px; }.quote-form label>span{font-size:.68rem;font-weight:800}.quote-form .full{grid-column:1/-1}
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; color: #0b1729; background: #f5f8fc; border: 1px solid #dce4ee; border-radius: 10px; outline: none; transition: border-color .2s, box-shadow .2s; }
.quote-form input, .quote-form select { height: 48px; padding: 0 13px; }.quote-form textarea{min-height:100px;padding:13px;resize:vertical}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: #2388f8; box-shadow: 0 0 0 4px rgba(35,136,248,.11); }
.quote-form button { border: 0; }.quote-form>small{color:#7b8798;text-align:center;font-size:.61rem}

.site-footer { padding: 78px 0 26px; background: #030914; color: #91a2b7; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, .7fr); gap: 56px; padding-bottom: 50px; }
.footer-brand p { max-width: 350px; margin: 18px 0 0; font-size: .78rem; line-height: 1.7; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 11px; }
.footer-grid h3 { margin: 7px 0 10px; color: white; font-size: .78rem; }
.footer-grid a:not(.brand) { width: fit-content; font-size: .73rem; transition: color .2s; }.footer-grid a:not(.brand):hover{color:white}
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .65rem; }
.floating-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 900; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 16px; color: white; background: #18ad5a; border-radius: 999px; box-shadow: 0 14px 35px rgba(11,110,55,.33); font-size: .72rem; font-weight: 850; }.floating-whatsapp svg{width:20px;height:20px}

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

:focus-visible { outline: 3px solid rgba(74,166,255,.75); outline-offset: 3px; }

@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1fr; padding-bottom: 85px; }
  .hero-copy { max-width: 820px; padding-bottom: 0; }
  .hero-studio { width: min(820px, 100%); margin-inline: auto; }
  .chip-one { left: 12px; }.chip-two{right:12px}
  .bento-grid { grid-template-columns: repeat(2, 1fr); }.service-large{grid-column:span 2}.service-logo,.service-map{grid-column:span 1}
  .principles-layout { gap: 50px; }
  .package-card { padding: 25px; }
  .contact-shell { gap: 45px; padding: 48px; }
}

@media (max-width: 900px) {
  .section { padding: 88px 0; }
  .menu-toggle { display: grid; }
  .main-nav { position: fixed; inset: 82px 16px auto; display: grid; gap: 0; padding: 12px; background: rgba(7,16,31,.97); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 30px 70px rgba(0,0,0,.45); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .22s ease; }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav > a { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.07); }.main-nav>a:last-child{border-bottom:0}
  .main-nav .nav-button { margin-top: 8px; justify-content: center; border-bottom: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .work-grid { grid-template-columns: 1fr; }
  .principles-layout { grid-template-columns: 1fr; }.principles-copy{position:static}.principle-cards{grid-template-columns:repeat(2,1fr)}
  .package-grid { grid-template-columns: 1fr; }.package-card{min-height:auto}.package-head p{min-height:auto}.package-card ul{margin-bottom:28px}
  .process-line { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }.process-line:before{display:none}
  .faq-layout { grid-template-columns: 1fr; gap: 45px; }.faq-intro{position:static}
  .contact-shell { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.3fr repeat(2, 1fr); }.footer-grid>div:last-child{grid-column:2}
}

@media (max-width: 650px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .nav-wrap { min-height: 72px; }.brand img{width:40px;height:40px}.brand>span{font-size:1.05rem}.brand small{font-size:.4rem}.main-nav{inset:72px 14px auto}
  .hero { padding-top: 112px; }.hero-layout{gap:50px;min-height:auto}.hero h1{font-size:clamp(2.75rem,13.5vw,4rem)}.hero-copy>p{font-size:.9rem}.hero-actions{display:grid}.button{width:100%}.hero-proof{grid-template-columns:1fr;gap:14px}.hero-proof>div,.hero-proof>div+div{padding:0;border:0}.hero-proof>div+div{padding-top:14px;border-top:1px solid var(--line)}
  .studio-window { transform: none; border-radius: 16px; }.studio-topbar{grid-template-columns:1fr 1fr;height:42px}.studio-topbar>span{display:none}.studio-body{min-height:390px;grid-template-columns:46px 1fr}.studio-sidebar{gap:12px;padding-top:12px}.studio-sidebar img{width:30px;height:30px}.studio-sidebar i{width:20px;height:20px}.studio-canvas{padding:13px}.canvas-head strong{font-size:.8rem}.canvas-grid{grid-template-columns:1fr 1fr;grid-template-rows:160px 145px;gap:8px}.canvas-card footer{min-height:34px;padding:0 8px}.website-card,.map-card{grid-column:span 2}.identity-card,.metric-card{display:none}.mini-browser{margin:8px 8px 0}.map-info{bottom:7px;left:7px;right:7px}.floating-chip{display:none}.service-ticker span{height:58px}
  .section { padding: 76px 0; }.section-heading{margin-bottom:36px}.section-heading h2,.principles h2,.process h2,.faq h2,.contact h2{font-size:2.35rem}
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }.service-large,.service-logo,.service-map{grid-column:auto;grid-row:auto}.service-large{min-height:550px;padding-bottom:220px}.service-logo,.service-map{min-height:330px}.service-card{padding:24px}.map-visual{width:60%}.logo-showcase{left:24px;right:auto}
  .work-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }.work-filter button{flex:0 0 auto}.project-visual,.project-wide .project-visual{height:290px;padding:24px}.project-meta{padding:21px;min-height:135px}.project-meta>span{display:none}.pb-layout{height:190px}.combo-logo{font-size:2.8rem}.combo-device{width:64%}
  .principles-layout{gap:38px}.principle-cards{grid-template-columns:1fr}.principle-cards article{min-height:auto}
  .process-line{grid-template-columns:1fr;gap:40px}.process-line article{padding-right:0}.process-line article>span{right:5px}
  .contact { padding-top: 18px; }.contact-shell{padding:34px 22px;border-radius:20px}.quote-form{grid-template-columns:1fr;padding:22px}.quote-form label,.quote-form .full,.form-head{grid-column:1}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{display:grid;text-align:center;justify-content:center}
  .floating-whatsapp{right:14px;bottom:14px;width:48px;padding:0;justify-content:center}.floating-whatsapp span{display:none}
}

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