:root {
  --ink: #f7fbff;
  --muted: #91a3bb;
  --muted-bright: #b9c6d8;
  --blue: #2781ff;
  --blue-bright: #52a1ff;
  --cyan: #45ddff;
  --navy: #050b18;
  --navy-soft: #081429;
  --card: #0b1830;
  --line: rgba(115, 162, 225, 0.17);
  --line-bright: rgba(77, 152, 255, 0.45);
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--navy);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 130px 0; position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: white; color: #08142d; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 11, 24, .78);
  backdrop-filter: blur(18px);
}
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; width: 172px; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.main-nav a { color: var(--muted-bright); font-size: .92rem; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: white; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.theme-toggle { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: #b9cbe2; background: rgba(255,255,255,.025); cursor: pointer; transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
.theme-toggle:hover,.theme-toggle:focus-visible { color: white; border-color: var(--line-bright); background: rgba(39,129,255,.1); transform: translateY(-1px); }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }
.language-picker { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.language-picker button { min-width: 35px; height: 30px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .74rem; font-weight: 700; cursor: pointer; transition: .2s ease; }
.language-picker button[aria-pressed="true"] { background: rgba(39,129,255,.2); color: #cfe3ff; box-shadow: inset 0 0 0 1px rgba(79,141,255,.25); }
.menu-toggle { display: none; width: 43px; height: 43px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.menu-toggle > span:not(.sr-only) { display: block; height: 1.5px; margin: 5px 0; background: white; transition: transform .2s ease, opacity .2s ease; }

.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 14px; padding: 0 23px; border: 1px solid transparent; border-radius: 10px; font-weight: 600; font-size: .92rem; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button svg, .text-link svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.button-small { min-height: 42px; padding-inline: 17px; font-size: .82rem; }
.button-primary { color: white; background: linear-gradient(135deg, #176fff, #278eff); box-shadow: 0 12px 34px rgba(26, 117, 255, .26), inset 0 1px 0 rgba(255,255,255,.22); }
.button-primary:hover { box-shadow: 0 18px 40px rgba(26,117,255,.38); }
.button-ghost { border-color: var(--line-bright); background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: rgba(91,168,255,.85); background: rgba(39,129,255,.08); }

.hero { position:relative;padding:88px 0 0;overflow:hidden;background-image:linear-gradient(rgba(53,100,161,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(53,100,161,.06) 1px,transparent 1px);background-size:66px 66px; }
.hero-ambient { position:absolute;z-index:0;inset:0 0 auto;height:660px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 2%,black 18%,black 78%,transparent 100%); }
.hero-wave-field { position:absolute;inset:50px -20% auto;width:140%;height:520px;overflow:visible; }
.hero-wave { fill:none;stroke:rgba(75,151,255,.11);stroke-width:1;vector-effect:non-scaling-stroke;will-change:transform; }
.hero-wave-one { animation:heroWaveOne 18s ease-in-out infinite alternate; }
.hero-wave-two { stroke:rgba(69,221,255,.085);animation:heroWaveTwo 23s ease-in-out infinite alternate; }
.hero-wave-three { stroke:rgba(82,139,255,.09);animation:heroWaveThree 20s ease-in-out infinite alternate; }
.hero-wave-four { stroke:rgba(69,221,255,.065);animation:heroWaveTwo 25s ease-in-out -8s infinite alternate; }
.hero-wave-five { stroke:rgba(75,151,255,.08);animation:heroWaveOne 21s ease-in-out -12s infinite alternate; }
.hero-wave-six { stroke:rgba(69,221,255,.06);animation:heroWaveThree 24s ease-in-out -5s infinite alternate; }
.hero-wave-seven { stroke:rgba(82,139,255,.07);animation:heroWaveTwo 22s ease-in-out -15s infinite alternate; }
@keyframes heroWaveOne { to { transform:translate3d(-80px,12px,0); } }
@keyframes heroWaveTwo { to { transform:translate3d(70px,-10px,0); } }
@keyframes heroWaveThree { to { transform:translate3d(-55px,8px,0); } }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .18; pointer-events: none; }
.hero-glow-one { width: 440px; height: 440px; top: 120px; left: 50%; background: #0b7cff; transform: translateX(-50%); }
.hero-glow-two { width: 260px; height: 260px; top: 510px; left: 4%; background: #1465ff; }
.hero-copy { position: relative; z-index: 2; text-align: center; }
.eyebrow { margin: 0 0 22px; color: var(--cyan); font-size: .74rem; font-weight: 700; letter-spacing: .24em; }
.hero h1, .section-heading h2, .process-copy h2, .contact h2 { margin: 0; font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: 1.04; }
.hero h1 { max-width: 890px; margin-inline: auto; font-size: clamp(3rem, 6.1vw, 5.8rem); }
.hero-lead { max-width: 720px; margin: 27px auto 0; color: var(--muted-bright); font-size: 1.12rem; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 35px; }
.hero-visual-wrap { position: relative; z-index: 3; margin-top: 72px; }
.hero-visual { position: relative; min-height: 630px; overflow: hidden; color:#10213b; border: 1px solid rgba(62,128,216,.24); border-radius: 28px 28px 0 0; background: radial-gradient(circle at 50% 42%, rgba(55,139,255,.16), transparent 44%), linear-gradient(140deg, #f8fbff 0%, #edf5ff 48%, #f7faff 100%); box-shadow: 0 28px 90px rgba(20,72,142,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.hero-visual::before { content:""; position:absolute; inset:0; opacity:.5; background-image: linear-gradient(rgba(46,112,201,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(46,112,201,.09) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent 92%); }
.visual-orbit { position: absolute; left: 50%; border: 1px solid rgba(45,124,231,.24); border-radius: 50%; transform: translateX(-50%); }
.orbit-one { width: 1040px; height: 620px; top: 70px; }
.orbit-two { width: 770px; height: 480px; top: 140px; }
.visual-label { position: absolute; top: 218px; z-index: 2; color: #4d9cff; font-size: .62rem; letter-spacing: .32em; line-height: 2; }
.visual-label-left { left: 27px; }.visual-label-right { right: 28px; }
.product-window { position: absolute; z-index: 4; left: 50%; bottom: -42px; width: min(930px, 82%); transform: translateX(-50%) perspective(1100px) rotateX(1.5deg); border: 1px solid rgba(55,111,188,.26); border-radius: 19px 19px 0 0; background: #fff; box-shadow: 0 -18px 80px rgba(29,91,173,.19), 0 0 0 1px rgba(255,255,255,.8) inset; }
.window-bar { height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(43,83,137,.14); background:#fbfdff; }
.traffic-lights, .window-tools { display: flex; align-items: center; gap: 7px; }
.traffic-lights i { width: 9px; height: 9px; border-radius: 50%; background: #ff5c65; }.traffic-lights i:nth-child(2){background:#ffc54d}.traffic-lights i:nth-child(3){background:#44d17a}
.window-product { display: flex; align-items: center; gap: 9px; font-size: .78rem; }
.mini-mark { display: inline-grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; color: white; font-size: .65rem; font-weight: 800; background: linear-gradient(135deg,#228dff,#154be0); }
.window-tools span { width: 6px; height: 6px; border-radius: 50%; background: #9eb1c9; }
.website-page { position: relative; min-height: 520px; overflow: hidden; background: radial-gradient(circle at 74% 42%,rgba(50,132,245,.12),transparent 35%),linear-gradient(145deg,#ffffff,#f0f6fd 72%); }
.website-nav { display: flex; min-height: 64px; align-items: center; gap: 28px; padding: 0 30px; border-bottom: 1px solid rgba(46,94,157,.12); background: rgba(255,255,255,.78); }
.mock-brand { display: flex; align-items: center; gap: 9px; font-size: .78rem; }
.mock-nav-links { display: flex; gap: 25px; margin-left: auto; color: #61758f; font-size: .63rem; }
.mock-nav-cta { padding: 7px 12px; border: 1px solid rgba(37,117,225,.28); border-radius: 7px; color: #176bda; background: rgba(38,124,255,.08); font-size: .61rem; font-weight: 700; }
.website-hero { display: grid; min-height: 360px; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 32px; padding: 36px 40px 30px; }
.website-copy { position: relative; z-index: 3; }
.website-copy > small { display: flex; align-items: center; gap: 8px; color: #1974df; font-size: .54rem; font-weight: 700; letter-spacing: .2em; }
.website-copy > small i { width: 19px; height: 1px; background: #58c8ff; box-shadow: 0 0 10px #2781ff; }
.website-copy h2 { margin: 15px 0 15px; font: 800 clamp(1.75rem,2.8vw,2.7rem) "Manrope",sans-serif; letter-spacing: -.05em; line-height: 1.06; }
.website-copy h2 em { color: #217ce8; font-style: normal; }
.website-copy p { max-width: 360px; margin: 0; color: #61748d; font-size: .75rem; line-height: 1.7; }
.mock-actions { display: flex; gap: 9px; margin-top: 23px; }
.mock-actions span { display: inline-flex; min-height: 35px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 7px; font-size: .61rem; font-weight: 700; }
.mock-button-primary { color: white; background: linear-gradient(135deg,#1874ff,#319cff); box-shadow: 0 9px 24px rgba(32,125,255,.26); }
.mock-button-secondary { border: 1px solid rgba(66,117,181,.24); color: #526984; background: rgba(255,255,255,.72); }
.website-showcase { position: relative; min-height: 280px; border: 1px solid rgba(66,124,202,.16); border-radius: 16px; background: radial-gradient(circle at 52% 42%,rgba(39,127,248,.14),transparent 48%),rgba(245,249,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.showcase-grid { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(52,117,205,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(52,117,205,.1) 1px,transparent 1px); background-size: 27px 27px; mask-image: radial-gradient(circle at 50% 50%,black,transparent 76%); }
.showcase-main { position: absolute; left: 50%; top: 27px; width: 60%; min-height: 226px; padding: 17px; transform: translateX(-50%) rotate(-3deg); border: 1px solid rgba(56,129,223,.25); border-radius: 13px; background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(231,241,254,.98)); box-shadow: 0 24px 55px rgba(37,79,132,.16),0 0 34px rgba(41,132,255,.11); }
.showcase-top { display: flex; justify-content: space-between; color: #7287a2; font-size: .47rem; letter-spacing: .13em; }
.showcase-top b { color: #158d7d; }
.showcase-symbol { display: grid; width: 80px; height: 80px; margin: 28px auto 20px; place-items: center; transform: rotate(45deg); border: 1px solid rgba(91,173,255,.48); border-radius: 24px; background: linear-gradient(145deg,#1c8fff,#164dd6); box-shadow: 0 0 38px rgba(43,135,255,.34); }
.showcase-symbol span { transform: rotate(-45deg); font: 800 2rem "Manrope",sans-serif; }
.showcase-lines { display: grid; gap: 7px; padding: 0 11%; }
.showcase-lines i { height: 4px; border-radius: 5px; background: rgba(90,126,174,.15); }.showcase-lines i:nth-child(1){width:74%;background:linear-gradient(90deg,#2b8cff 72%,rgba(90,126,174,.12) 72%)}.showcase-lines i:nth-child(2){width:91%;}.showcase-lines i:nth-child(3){width:57%;}
.showcase-bottom { display: flex; justify-content: center; gap: 8px; margin-top: 17px; }.showcase-bottom span { padding: 3px 7px; border: 1px solid rgba(73,125,190,.18); border-radius: 20px; color: #627b9b; font-size: .42rem; letter-spacing: .08em; }
.floating-service { position: absolute; z-index: 4; display: flex; min-width: 144px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(61,127,216,.22); border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 14px 35px rgba(35,76,128,.16); }
.floating-service-one { top: 35px; right: -13px; }.floating-service-two { bottom: 27px; left: -18px; }
.service-glyph { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #78c7ff; background: rgba(40,132,255,.15); font-size: .9rem; }
.floating-service div { display: grid; }.floating-service b { font-size: .59rem; }.floating-service small { color: #68809f; font-size: .41rem; letter-spacing: .08em; }
.website-service-strip { display: grid; min-height: 78px; grid-template-columns: repeat(3,1fr) 1.35fr; border-top: 1px solid rgba(56,106,173,.14); background: rgba(241,247,255,.88); }
.website-service-strip > div { display: flex; align-items: center; gap: 10px; padding: 0 19px; border-right: 1px solid rgba(56,106,173,.12); }
.website-service-strip span { color: #6f85a1; font-size: .49rem; letter-spacing: .11em; }.website-service-strip b { font-size: .62rem; }
.website-service-strip .service-strip-end { display: grid; align-content: center; gap: 1px; border-right: 0; }.service-strip-end b { color: #1872dd; font-size: .54rem; letter-spacing: .08em; }

.services { --ink:#10213b;--muted:#667991;--muted-bright:#405773;--line:rgba(49,88,139,.16);--line-bright:rgba(32,111,220,.42);color:var(--ink);border-top:1px solid rgba(49,88,139,.15);background-color:#f4f8fe;background-image:radial-gradient(circle at 83% 12%,rgba(45,130,247,.12),transparent 28%),linear-gradient(rgba(45,105,187,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(45,105,187,.045) 1px,transparent 1px);background-size:auto,66px 66px,66px 66px; }
.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 80px; margin-bottom: 64px; }
.section-heading h2, .process-copy h2, .contact h2 { font-size: clamp(2.45rem, 4.4vw, 4.5rem); }
.section-heading > p { margin: 0 0 7px; color: var(--muted); font-size: 1.02rem; }
.service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.service-card { position: relative; min-height: 330px; padding: 28px 25px; overflow: hidden; border: 1px solid rgba(50,96,158,.16); border-radius: 16px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,248,255,.96));box-shadow:0 18px 45px rgba(35,73,123,.07);transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(32,111,220,.42); background:#fff;box-shadow:0 24px 55px rgba(35,73,123,.13); }
.service-number { color: #7890ad; font-size: .72rem; letter-spacing: .15em; }
.service-icon { display: grid; width: 52px; height: 52px; margin: 62px 0 28px; place-items: center; border: 1px solid rgba(70,153,255,.32); border-radius: 14px; color: #58a4ff; background: rgba(24,103,255,.08); }
.service-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.service-card h3 { margin: 0 0 12px; font: 700 1.25rem "Manrope",sans-serif; }
.service-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }

.work { overflow: hidden; border-top: 1px solid var(--line); background: #071123; }
.work::before { content:""; position:absolute; width:600px;height:600px;top:26%;right:-350px;border-radius:50%;background:#0b63db;filter:blur(160px);opacity:.08; }
.work-heading { margin-bottom: 30px; }
.project-row { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 86px; min-height: 620px; padding: 88px 0; border-bottom: 1px solid var(--line); }
.project-row.reverse { grid-template-columns: .82fr 1.18fr; }
.project-row.reverse .project-visual { order: 2; }.project-row.reverse .project-copy { order: 1; }
.project-visual { min-width: 0; overflow: hidden; border: 1px solid rgba(82,148,238,.28); border-radius: 20px; background: #0a162b; box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.browser-bar { height: 45px; display: flex; align-items: center; gap: 8px; padding: 0 15px; border-bottom: 1px solid rgba(53,91,143,.2); background: #0c192d; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background:#ff626b }.browser-bar i:nth-child(2){background:#ffc952}.browser-bar i:nth-child(3){background:#43d17d}.browser-bar span { margin-left:auto;margin-right:auto;padding:5px 16px;border:1px solid rgba(116,158,215,.16);border-radius:20px;color:#7086a4;font-size:.62rem;background:#07111f; }
.project-copy { max-width: 480px; }
.project-meta { display: flex; gap: 18px; margin: 0 0 20px; color: #6eaaff; font-size: .69rem; font-weight: 700; letter-spacing: .18em; }
.project-meta span:first-child { color: #5f718a; }
.project-copy h3 { margin: 0 0 18px; font: 800 clamp(2.5rem,4.2vw,4.5rem) "Manrope",sans-serif; letter-spacing: -.045em; line-height: 1; }
.project-copy > p:not(.project-meta) { margin: 0; color: var(--muted-bright); font-size: 1.03rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 31px; }.project-tags span { padding: 6px 11px; border: 1px solid var(--line); border-radius: 30px; color: #7891b1; font-size: .7rem; }
.text-link { display:inline-flex;align-items:center;gap:10px;color:#5ba3ff;font-weight:600;font-size:.86rem; }.text-link svg { transition: transform .2s ease; }.text-link:hover svg { transform:translateX(4px); }
.nutiva-shell { display:grid;grid-template-columns:140px 1fr;min-height:370px;background:#f4f8f1;color:#16241b; }
.nutiva-shell aside { display:flex;flex-direction:column;gap:8px;padding:23px 15px;background:#1e3b2c;color:#cfe2d4;font-size:.66rem; }.nutiva-shell aside b { margin-bottom:18px;color:white;font-size:.85rem; }.nutiva-shell aside span { padding:8px 9px;border-radius:7px; }.nutiva-shell aside .active { background:#3f7653;color:white; }
.nutiva-main { padding:31px; }.nutiva-main small { color:#829087; }.nutiva-main h3 { margin:1px 0 22px;font:700 1.2rem "Manrope",sans-serif; }.nutrition-grid { display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:25px;padding:23px;border:1px solid #dde7dc;border-radius:14px;background:white; }.nutrition-ring { display:grid;width:126px;height:126px;margin:auto;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle closest-side,#fff 74%,transparent 75% 99%),conic-gradient(#4f9e61 68%,#e3ebe1 0); }.nutrition-ring strong { font-size:1.45rem; }.nutrition-ring span { color:#7b897f;font-size:.57rem; }.nutrition-lines { display:grid;gap:16px; }.nutrition-lines i { display:block;height:7px;border-radius:7px;background:linear-gradient(90deg,#4e9e60 68%,#e4ebe3 68%); }.nutrition-lines i:nth-child(2){background:linear-gradient(90deg,#6ca3db 78%,#e4ebe3 78%)}.nutrition-lines i:nth-child(3){background:linear-gradient(90deg,#deb35c 48%,#e4ebe3 48%)}.nutrition-lines i:nth-child(4){background:linear-gradient(90deg,#a1bf62 84%,#e4ebe3 84%)}
.nutrition-footer { display:flex;gap:11px;margin-top:13px; }.nutrition-footer span { flex:1;padding:13px;border:1px solid #dde7dc;border-radius:10px;background:white;color:#54655a;font-size:.7rem;text-align:center; }
.timbr-ui { background:#eef3f7;color:#243447; }.timbr-ui .browser-bar { background:#fbfaf7;border-color:#e0e4e8; }.timbr-ui .browser-bar span { color:#7f7468;background:white;border-color:#e1dbd1; }.timbr-toolbar { display:flex;align-items:center;gap:26px;padding:12px 24px;border-bottom:1px solid #dce3e9;color:#78889a;font-size:.64rem;background:#fff; }.timbr-toolbar b { margin-left:auto;padding:5px 10px;border-radius:6px;color:white;background:#8c673c; }
.timbr-canvas { position:relative;height:370px;overflow:hidden;background-image:linear-gradient(#dce5eb 1px,transparent 1px),linear-gradient(90deg,#dce5eb 1px,transparent 1px);background-size:28px 28px; }.timbr-canvas svg { position:absolute;inset:14px 60px 6px 5px;width:90%;height:95%; }.grid-line { stroke:#d5e0e7;stroke-width:1; }.wood-fill { fill:#e8c18a;stroke:#8c673c;stroke-width:3; }.wood { stroke:#9d7342;stroke-width:7; }.dimension { position:absolute;left:40%;top:31px;color:#7b8a99;font-size:.65rem; }.timbr-panel { position:absolute;right:16px;top:52px;width:130px;padding:14px;border:1px solid #dce2e6;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 13px 35px rgba(54,72,89,.14); }.timbr-panel span,.timbr-panel small { display:block;color:#8794a0;font-size:.55rem; }.timbr-panel b { display:block;margin:2px 0 8px;font-size:.75rem; }.timbr-panel hr { border:0;border-top:1px solid #e5e8eb; }.timbr-panel strong { display:block;color:#8c673c;font-size:.82rem; }
.screenshot-frame { position:relative;aspect-ratio:16/10;background:#030915; }.screenshot-frame img { width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1); }.project-row:hover .screenshot-frame img { transform:scale(1.025); }.booking-frame img { object-position:center top; }.blog-frame img { object-position:center top; }
.project-shot img { object-fit:contain;object-position:center; }
.mynutiva-frame { background:#f5f8f3; }
.timbrgrid-frame { background:#eef5fb; }

.process { border-top: 1px solid var(--line); background: #050b18; }
.process-grid { display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:start; }.process-copy { position:sticky;top:130px; }.process-copy > p:last-child { max-width:470px;margin:27px 0 0;color:var(--muted); }.process-list { list-style:none;margin:0;padding:0; }.process-list li { display:grid;grid-template-columns:50px 1fr;gap:23px;padding:31px 0;border-bottom:1px solid var(--line); }.process-list li:first-child { padding-top:0; }.process-list li > span { color:#4d91ed;font-size:.72rem;letter-spacing:.14em; }.process-list h3 { margin:0 0 7px;font:700 1.4rem "Manrope",sans-serif; }.process-list p { margin:0;color:var(--muted); }
.contact { padding-top:80px;background:#050b18; }.contact-card { display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:70px;padding:70px;border:1px solid rgba(83,158,255,.42);border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(38,129,255,.28),transparent 35%),linear-gradient(135deg,#0a1a37,#071226 70%);box-shadow:0 30px 90px rgba(0,0,0,.26); }.contact-side p { margin:0 0 28px;color:#a7b7cb; }.button-light { color:#071225;background:white; }.button-light:hover { box-shadow:0 16px 32px rgba(255,255,255,.12); }
.site-footer { border-top:1px solid var(--line);background:#030813; }.footer-inner { min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#70829c;font-size:.78rem; }.footer-brand { width:140px; }.back-top:hover { color:white; }
.reveal { opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }.reveal.is-visible { opacity:1;transform:none; }

html[data-theme="light"] {
  color-scheme: light;
  --ink: #0b1730;
  --muted: #60718a;
  --muted-bright: #40536e;
  --blue: #176fe5;
  --blue-bright: #2781ff;
  --cyan: #087bb5;
  --navy: #f5f8fd;
  --navy-soft: #edf3fb;
  --card: #ffffff;
  --line: rgba(49, 88, 139, .16);
  --line-bright: rgba(32, 111, 220, .45);
}
html[data-theme="light"] body::before { opacity:.018;filter:invert(1); }
html[data-theme="light"] .site-header { --muted:#91a3bb;--muted-bright:#b9c6d8;--line:rgba(115,162,225,.17);--line-bright:rgba(77,152,255,.45);color:#f7fbff;background:rgba(5,11,24,.9); }
html[data-theme="light"] .hero { background-color:#f5f8fd;background-image:linear-gradient(rgba(36,101,186,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(36,101,186,.075) 1px,transparent 1px); }
html[data-theme="light"] .hero-glow { opacity:.12; }
html[data-theme="light"] .hero-wave { stroke:rgba(35,113,220,.14); }
html[data-theme="light"] .hero-wave-two { stroke:rgba(30,145,190,.105); }
html[data-theme="light"] .hero-wave-four,html[data-theme="light"] .hero-wave-six { stroke:rgba(30,145,190,.09); }
html[data-theme="light"] .hero .button-ghost { border-color:rgba(35,105,201,.32);background:rgba(255,255,255,.68);box-shadow:0 10px 28px rgba(22,71,132,.07); }
html[data-theme="light"] .hero .button-ghost:hover { border-color:rgba(29,111,231,.62);background:white; }
html[data-theme="light"] .services { color:var(--ink);background-color:#f4f8fe; }
html[data-theme="light"] .work { background:#eef4fc; }
html[data-theme="light"] .work::before { opacity:.11; }
html[data-theme="light"] .project-row { border-color:rgba(53,92,144,.16); }
html[data-theme="light"] .project-visual { border-color:rgba(43,102,183,.23);box-shadow:0 28px 65px rgba(27,62,108,.13); }
html[data-theme="light"] .project-meta span:first-child { color:#718099; }
html[data-theme="light"] .project-tags span { color:#506681;background:rgba(255,255,255,.55); }
html[data-theme="light"] .process { background:#f8fbff; }
html[data-theme="light"] .contact { background:#f8fbff; }
html[data-theme="light"] .contact-card { --ink:#f7fbff;--muted:#91a3bb;--muted-bright:#b9c6d8;color:#f7fbff;box-shadow:0 30px 80px rgba(21,54,99,.18); }
html[data-theme="light"] .site-footer { --line:rgba(115,162,225,.17);color:#f7fbff;background:#030813; }

html[data-theme="dark"] .hero-visual { color:var(--ink);border-color:rgba(89,158,255,.32);background:radial-gradient(circle at 50% 42%,rgba(24,105,255,.25),transparent 42%),linear-gradient(140deg,#061020 0%,#091b38 45%,#040913 100%);box-shadow:0 0 90px rgba(24,103,255,.13),inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .hero-visual::before { opacity:.34;background-image:linear-gradient(rgba(70,142,240,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,142,240,.12) 1px,transparent 1px); }
html[data-theme="dark"] .visual-orbit { border-color:rgba(63,141,255,.34); }
html[data-theme="dark"] .product-window { border-color:rgba(100,174,255,.48);background:#081429;box-shadow:0 -18px 80px rgba(25,110,255,.28),0 0 0 1px rgba(255,255,255,.035) inset; }
html[data-theme="dark"] .window-bar { border-color:var(--line);background:transparent; }
html[data-theme="dark"] .window-tools span { background:#355175; }
html[data-theme="dark"] .website-page { background:radial-gradient(circle at 74% 42%,rgba(34,122,255,.18),transparent 34%),linear-gradient(145deg,#09172d,#061020 72%); }
html[data-theme="dark"] .website-nav { border-color:rgba(94,151,229,.14);background:rgba(5,14,29,.62); }
html[data-theme="dark"] .mock-nav-links { color:#8fa4bf; }
html[data-theme="dark"] .mock-nav-cta { border-color:rgba(90,161,255,.42);color:#b9d8ff;background:rgba(38,124,255,.09); }
html[data-theme="dark"] .website-copy > small { color:#67b5ff; }
html[data-theme="dark"] .website-copy h2 em { color:#64b6ff; }
html[data-theme="dark"] .website-copy p { color:#9eb0c8; }
html[data-theme="dark"] .mock-button-secondary { border-color:rgba(109,165,237,.28);color:#a9bad0;background:rgba(255,255,255,.025); }
html[data-theme="dark"] .website-showcase { border-color:rgba(83,152,244,.16);background:radial-gradient(circle at 52% 42%,rgba(29,129,255,.24),transparent 46%),rgba(4,12,26,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
html[data-theme="dark"] .showcase-grid { opacity:.38;background-image:linear-gradient(rgba(66,133,223,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(66,133,223,.12) 1px,transparent 1px); }
html[data-theme="dark"] .showcase-main { border-color:rgba(103,178,255,.38);background:linear-gradient(155deg,rgba(17,48,92,.98),rgba(7,23,47,.98));box-shadow:0 24px 55px rgba(0,0,0,.36),0 0 34px rgba(41,132,255,.14); }
html[data-theme="dark"] .showcase-top { color:#6283ac; }
html[data-theme="dark"] .showcase-top b { color:#63e0ce; }
html[data-theme="dark"] .showcase-lines i { background:rgba(123,168,226,.17); }
html[data-theme="dark"] .showcase-lines i:nth-child(1) { background:linear-gradient(90deg,#2b8cff 72%,rgba(123,168,226,.13) 72%); }
html[data-theme="dark"] .showcase-bottom span { border-color:rgba(95,151,222,.17);color:#6783a7; }
html[data-theme="dark"] .floating-service { border-color:rgba(91,160,249,.3);background:rgba(10,29,57,.94);box-shadow:0 14px 35px rgba(0,0,0,.3); }
html[data-theme="dark"] .floating-service small { color:#6783a6; }
html[data-theme="dark"] .website-service-strip { border-color:rgba(83,145,225,.15);background:rgba(3,10,22,.58); }
html[data-theme="dark"] .website-service-strip > div { border-color:rgba(83,145,225,.12); }
html[data-theme="dark"] .website-service-strip span { color:#526d90; }
html[data-theme="dark"] .service-strip-end b { color:#65aaff; }
html[data-theme="dark"] .services { --ink:#f7fbff;--muted:#91a3bb;--muted-bright:#b9c6d8;--line:rgba(115,162,225,.17);--line-bright:rgba(77,152,255,.45);color:var(--ink);border-color:var(--line);background:#060d1d; }
html[data-theme="dark"] .service-card { border-color:var(--line);background:linear-gradient(145deg,rgba(13,30,57,.86),rgba(7,18,36,.95));box-shadow:none; }
html[data-theme="dark"] .service-card:hover { border-color:var(--line-bright);background:linear-gradient(145deg,rgba(16,39,77,.94),rgba(7,18,36,.98));box-shadow:none; }
html[data-theme="dark"] .service-number { color:#536b8c; }

@media (max-width: 1060px) {
  .main-nav { gap:19px; }.header-actions .button { display:none; }.service-grid { grid-template-columns:repeat(2,1fr); }.service-card { min-height:280px; }.service-icon { margin-top:42px; }.project-row,.project-row.reverse { gap:45px;grid-template-columns:1.05fr .95fr; }.process-grid { gap:60px; }.product-window { width:88%; }.visual-label { display:none; }
}

@media (max-width: 760px) {
  :root { --shell:min(100% - 34px, 680px); }
  .section { padding:90px 0; }
  .header-inner { height:70px; }.brand { width:145px; }.menu-toggle { display:block;order:3; }.header-actions { margin-left:auto; }.main-nav { position:fixed;left:17px;right:17px;top:79px;display:grid;gap:4px;padding:14px;border:1px solid var(--line-bright);border-radius:14px;background:rgba(6,14,30,.98);box-shadow:0 25px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s ease; }.main-nav.open { opacity:1;visibility:visible;transform:none; }.main-nav a { padding:12px 13px;border-radius:8px; }.main-nav a:hover { background:rgba(39,129,255,.1); }.language-picker button { min-width:32px; }.header-actions { gap:8px; }.theme-toggle { width:36px;height:36px; }
  .hero { padding-top:66px;background-size:48px 48px; }.hero h1 { font-size:clamp(2.65rem,12vw,4.8rem); }.hero-lead { font-size:1rem; }.hero-actions { flex-direction:column;align-items:stretch;max-width:360px;margin:30px auto 0; }.hero-visual-wrap { width:100%;margin-top:55px; }.hero-visual { min-height:535px;border-radius:18px 18px 0 0; }.product-window { width:94%;bottom:-48px; }.window-product { margin-left:auto; }.window-tools { display:none; }.website-page { min-height:455px; }.website-nav { min-height:55px;padding:0 18px; }.mock-nav-links { display:none; }.mock-nav-cta { margin-left:auto; }.website-hero { min-height:325px;grid-template-columns:1fr;padding:32px 25px; }.website-copy { max-width:390px; }.website-copy h2 { font-size:clamp(2rem,7vw,2.8rem); }.website-copy p { max-width:330px; }.website-showcase { display:none; }.website-service-strip { min-height:75px;grid-template-columns:repeat(3,1fr); }.website-service-strip > div { justify-content:center;padding:0 8px; }.website-service-strip .service-strip-end { display:none; }.orbit-one { width:850px; }.orbit-two { width:650px; }
  .section-heading,.process-grid,.contact-card { grid-template-columns:1fr;gap:34px; }.section-heading { margin-bottom:45px; }.section-heading h2,.process-copy h2,.contact h2 { font-size:clamp(2.2rem,10vw,3.6rem); }.service-grid { grid-template-columns:1fr; }.service-card { min-height:260px; }.service-icon { margin:36px 0 22px; }
  .project-row,.project-row.reverse { grid-template-columns:1fr;gap:36px;min-height:0;padding:72px 0; }.project-row.reverse .project-visual,.project-row.reverse .project-copy { order:initial; }.project-visual { border-radius:14px; }.project-copy { max-width:none; }.project-copy h3 { font-size:clamp(2.45rem,13vw,3.7rem); }.nutiva-shell { grid-template-columns:100px 1fr; }.nutiva-shell aside { padding:17px 10px; }.nutiva-main { padding:20px 16px; }.nutrition-grid { grid-template-columns:1fr;padding:15px; }.nutrition-lines { display:none; }.nutrition-ring { width:110px;height:110px; }.timbr-canvas { height:310px; }.timbr-panel { transform:scale(.85);transform-origin:top right; }.process-copy { position:static; }.contact-card { padding:44px 28px; }.footer-inner { padding:30px 0;flex-direction:column;text-align:center; }.screenshot-frame { aspect-ratio:4/3; }.project-shot { aspect-ratio:16/10; }
}

@media (max-width: 430px) {
  .brand { width:126px; }.language-picker { padding:3px; }.language-picker button { min-width:29px;height:28px;font-size:.68rem; }.menu-toggle { width:39px;height:39px; }.theme-toggle { width:34px;height:34px;border-radius:9px; }.theme-icon { width:16px;height:16px; }.header-actions { gap:6px; }.hero h1 br { display:none; }.hero-copy .eyebrow { letter-spacing:.18em; }.hero-visual { min-height:480px; }.product-window { width:95%;bottom:-54px; }.window-bar { height:50px;padding-inline:13px; }.website-page { min-height:420px; }.website-nav { min-height:51px;padding-inline:14px; }.mock-brand { font-size:.7rem; }.mock-nav-cta { padding:6px 9px;font-size:.53rem; }.website-hero { min-height:294px;padding:28px 21px 23px; }.website-copy h2 { margin-block:13px;font-size:1.82rem; }.website-copy p { max-width:280px;font-size:.69rem; }.mock-actions { margin-top:19px; }.website-service-strip { min-height:74px; }.website-service-strip > div { display:grid;align-content:center;gap:1px; }.website-service-strip span { font-size:.42rem; }.website-service-strip b { font-size:.54rem; }.service-card { min-height:240px; }.contact-card { padding:38px 22px; }.button { padding-inline:17px; }
}

@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; }
}