:root {
  --ink: #08090b;
  --ink-soft: #0d0f13;
  --surface: #12151a;
  --surface-2: #191d24;
  --paper: #f7f7f5;
  --mist: #d6d7da;
  --muted: #989da7;
  --muted-dark: #656a72;
  --orange: #ff6a00;
  --orange-light: #ff9a48;
  --orange-deep: #e84d00;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(14, 17, 22, 0.13);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }

.shell { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
.section-space { padding-block: clamp(96px, 12vw, 164px); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.site-header.is-scrolled { background: rgba(8, 9, 11, .8); border-color: var(--line); backdrop-filter: blur(18px); }
.header-inner { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; flex: none; align-items: center; }
.brand-logo { display: block; width: 146px; height: auto; }

.desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 31px); color: #c7c9ce; font-size: 12px; font-weight: 700; }
.desktop-nav a { position: relative; padding: 8px 0; transition: color .2s ease; }
.desktop-nav a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--orange); transition: width .22s ease; }
.desktop-nav a:hover { color: white; }.desktop-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 21px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 800; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }.button:focus-visible, .desktop-nav a:focus-visible, .mobile-menu a:focus-visible, .project-filters button:focus-visible, details summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.button-primary { color: white; background: linear-gradient(130deg, var(--orange), var(--orange-deep)); box-shadow: 0 12px 28px rgba(255, 89, 0, .18); }.button-primary:hover { box-shadow: 0 16px 34px rgba(255, 89, 0, .31); background: linear-gradient(130deg, #ff7e1f, var(--orange-deep)); }
.button-ghost { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .025); }.button-ghost:hover { border-color: var(--orange); background: rgba(255, 106, 0, .07); }
.button-outline { color: #181a1f; border-color: #c8cbd0; background: white; }.button-outline:hover { border-color: var(--orange); color: var(--orange-deep); }
.header-cta { min-height: 43px; padding-inline: 16px; font-size: 11px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(255,255,255,.04); }
.mobile-menu { display: none; }

.hero { position: relative; min-height: 100vh; overflow: clip; background: radial-gradient(circle at 86% 54%, rgba(255, 92, 0, .16), transparent 24%), radial-gradient(circle at 13% 12%, rgba(255,255,255,.06), transparent 23%), var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 88%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; pointer-events: none; background: linear-gradient(transparent, var(--ink)); }
.hero-grid { position: relative; z-index: 1; display: grid; min-height: 100vh; grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); align-items: center; gap: clamp(28px, 6vw, 78px); padding-top: 100px; padding-bottom: 66px; }
.hero-copy { position: relative; z-index: 4; padding-top: 28px; }.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }.eyebrow span { width: 27px; height: 1px; background: var(--orange); }
h1, h2, h3, p { text-wrap: balance; }h1, h2, h3 { font-family: var(--font-geist-sans), Arial, sans-serif; }
h1 { max-width: 690px; margin: 0; font-size: clamp(47px, 5.35vw, 78px); font-weight: 900; line-height: .98; letter-spacing: -.07em; }h1 em, h2 em, .device-ui em, .beauty-layout em, .luxam-layout em, .founder-portrait em { color: var(--orange); font-style: normal; }
.hero-lead { max-width: 595px; margin: 26px 0 0; color: #afb3bc; font-size: 16px; line-height: 1.75; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 620px; margin: 28px 0 0; color: #a6abb4; font-size: 11px; font-weight: 600; line-height: 1.7; }.hero-trust svg { color: var(--orange); }.hero-trust span { color: var(--orange); }
.hero-visual { position: relative; min-width: 0; height: min(680px, calc(100vh - 122px)); min-height: 550px; isolation: isolate; }.visual-grid { position: absolute; z-index: -1; top: 8%; right: -19%; width: 95%; height: 84%; border: 1px solid rgba(255,106,0,.13); background-image: linear-gradient(rgba(255,106,0,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.11) 1px, transparent 1px); background-size: 35px 35px; transform: perspective(900px) rotateY(-14deg) rotateX(3deg); mask-image: linear-gradient(90deg, transparent, black 28%, black 76%, transparent); }.visual-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,106,0,.25); border-radius: 50%; }.orbit-one { right: -13%; top: 9%; width: 520px; height: 520px; box-shadow: 0 0 0 42px rgba(255,106,0,.028), 0 0 80px rgba(255,106,0,.13); }.orbit-two { right: 7%; top: 24%; width: 380px; height: 380px; border-color: rgba(255,255,255,.08); }
.hero-foxbot { position: absolute; z-index: 1; right: -8%; bottom: -8%; width: min(710px, 116%); height: 110%; object-fit: cover; object-position: 72% center; mix-blend-mode: screen; filter: contrast(1.06) saturate(1.05); mask-image: linear-gradient(90deg, transparent 0%, black 29%, black 82%, transparent 100%), linear-gradient(0deg, transparent, black 15%); mask-composite: intersect; }.hero-screen { position: absolute; z-index: 3; top: 18%; left: 3%; width: 255px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: linear-gradient(145deg, rgba(21,24,30,.93), rgba(8,9,11,.78)); box-shadow: var(--shadow); backdrop-filter: blur(14px); transform: perspective(900px) rotateY(9deg) rotateX(2deg); }.screen-bar { display: flex; gap: 5px; align-items: center; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.screen-bar span { width: 5px; height: 5px; border-radius: 50%; background: #565b64; }.screen-bar span:first-child { background: var(--orange); }.hero-screen small { display: block; margin-top: 24px; color: var(--orange); font-size: 7px; letter-spacing: .17em; }.hero-screen strong { display: block; margin-top: 10px; font-size: 23px; line-height: 1.03; letter-spacing: -.06em; }.screen-metrics { display: flex; align-items: end; gap: 5px; height: 37px; margin-top: 18px; }.screen-metrics span { width: 13px; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--orange), #ffb474); }.screen-metrics span:nth-child(1) { height: 43%; }.screen-metrics span:nth-child(2) { height: 63%; }.screen-metrics span:nth-child(3) { height: 94%; }
.hero-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(12,14,18,.78); box-shadow: 0 18px 50px rgba(0,0,0,.27); backdrop-filter: blur(12px); }.float-status { bottom: 17%; left: -4%; padding: 12px 15px; }.hero-float small { display: block; color: #969ca6; font-size: 8px; letter-spacing: .08em; }.hero-float b { display: block; margin-top: 4px; color: white; font-size: 11px; }.signal { width: 10px; height: 10px; border-radius: 50%; background: #68e7a9; box-shadow: 0 0 0 5px rgba(104,231,169,.12); }.float-growth { right: -2%; bottom: 4%; display: block; width: 170px; padding: 13px; }.mini-chart { display: flex; align-items: end; gap: 5px; height: 33px; margin-top: 11px; }.mini-chart i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(255,255,255,.18); }.mini-chart i:nth-child(1) { height: 34%; }.mini-chart i:nth-child(2) { height: 57%; }.mini-chart i:nth-child(3) { height: 49%; }.mini-chart i:nth-child(4) { height: 73%; }.mini-chart i:nth-child(5) { height: 100%; background: var(--orange); }

.trust-strip { position: relative; z-index: 5; border-block: 1px solid var(--line); background: #0c0e12; }.trust-items { display: grid; grid-template-columns: repeat(5, 1fr); }.trust-item { display: flex; min-height: 84px; align-items: center; gap: 13px; padding: 16px; border-right: 1px solid var(--line); }.trust-item:first-child { border-left: 1px solid var(--line); }.trust-item span { color: var(--orange); font-size: 10px; font-weight: 900; }.trust-item p { margin: 0; color: #d8dadd; font-size: 11px; font-weight: 700; line-height: 1.35; }

.intro-section { position: relative; overflow: hidden; background: #f4f3ef; color: #111318; }.intro-section::after { content: ""; position: absolute; right: -18%; bottom: -30%; width: 570px; height: 570px; border: 1px solid rgba(255,106,0,.22); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,106,0,.04), 0 0 0 104px rgba(255,106,0,.024); }.intro-grid, .responsive-grid, .founder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(50px, 10vw, 126px); }.intro-copy h2, .section-heading h2, .projects-head h2, .process-intro h2, .pricing-intro h2, .founder-copy h2, .testimonial-intro h2, .faq-intro h2, .final-cta h2 { margin: 0; font-size: clamp(39px, 4.7vw, 65px); font-weight: 900; line-height: 1.01; letter-spacing: -.065em; }.intro-copy > p:not(.section-kicker), .founder-copy > p:not(.section-kicker) { margin: 27px 0 0; color: var(--muted-dark); font-size: 15px; line-height: 1.78; }.check-list { display: grid; gap: 12px; margin: 29px 0 34px; padding: 0; list-style: none; }.check-list li { display: flex; align-items: center; gap: 11px; color: #3d424a; font-size: 13px; font-weight: 700; }.check-list svg { flex: none; color: var(--orange); }
.intro-system { position: relative; min-height: 465px; overflow: hidden; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; color: white; background: radial-gradient(circle at 59% 53%, rgba(255,99,0,.19), transparent 28%), linear-gradient(145deg, #15181e, #08090c); box-shadow: 0 30px 80px rgba(0,0,0,.18); }.intro-system::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 54% 52%, black, transparent 75%); }.system-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; color: #969ca6; font-size: 8px; font-weight: 800; letter-spacing: .13em; }.system-head p { margin: 0; }.system-head span:last-child { margin-left: auto; color: #81e9af; }.system-dot { width: 6px; height: 6px; border-radius: 50%; background: #81e9af; box-shadow: 0 0 12px #81e9af; }.system-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 224px; min-height: 190px; padding: 29px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: linear-gradient(140deg, rgba(38,42,51,.93), rgba(9,10,13,.92)); box-shadow: 0 20px 60px rgba(0,0,0,.4); transform: translate(-50%, -43%); }.system-logo { display: flex; align-items: center; gap: 10px; }.system-logo .brand-fox { transform: rotate(45deg) scale(.72); transform-origin: left center; }.system-logo strong { margin-left: -5px; font-size: 17px; letter-spacing: -.06em; }.system-core p { margin: 23px 0 0; color: #b4b7bd; font-size: 12px; line-height: 1.55; }.system-nodes { position: absolute; z-index: 2; inset: 0; }.system-nodes > div { position: absolute; display: grid; place-items: center; gap: 7px; width: 82px; height: 82px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; color: var(--orange); background: rgba(18,21,26,.76); box-shadow: 0 10px 25px rgba(0,0,0,.2); }.system-nodes > div span { color: #d8dbe0; font-size: 9px; font-weight: 800; }.system-nodes > div:nth-child(1) { top: 19%; left: 13%; }.system-nodes > div:nth-child(2) { top: 21%; right: 11%; }.system-nodes > div:nth-child(3) { bottom: 13%; left: 17%; }.system-nodes > div:nth-child(4) { right: 15%; bottom: 13%; }.system-line { position: absolute; z-index: 1; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,106,0,.08), var(--orange), rgba(255,106,0,.08)); }.line-a { top: 37%; left: 26%; width: 40%; transform: rotate(17deg); }.line-b { top: 63%; left: 27%; width: 39%; transform: rotate(-18deg); }.line-c { top: 51%; left: 25%; width: 50%; transform: rotate(0deg); opacity: .45; }

.solutions-section { background: var(--ink); }.section-heading { display: grid; grid-template-columns: 1.15fr .65fr; align-items: end; gap: 80px; }.section-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 58px; }.service-card { position: relative; display: flex; min-height: 292px; flex-direction: column; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(25,28,34,.78), rgba(11,13,16,.82)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.service-card::after { content: ""; position: absolute; right: -44px; bottom: -58px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; transition: transform .3s ease, border-color .3s ease; }.service-card:hover { z-index: 1; border-color: rgba(255,106,0,.62); box-shadow: 0 20px 45px rgba(0,0,0,.27); transform: translateY(-5px); }.service-card:hover::after { border-color: rgba(255,106,0,.35); transform: scale(1.15); }.service-card.is-featured { border-color: rgba(255,106,0,.6); background: radial-gradient(circle at 77% 19%, rgba(255,106,0,.24), transparent 23%), linear-gradient(145deg, #262019, #151312); }.service-card-top { display: flex; align-items: center; justify-content: space-between; }.service-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,106,0,.45); border-radius: 10px; color: var(--orange); background: rgba(255,106,0,.09); }.service-card-top small { color: #676d76; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.service-card h3 { margin: 35px 0 12px; font-size: 21px; letter-spacing: -.045em; }.service-card p { max-width: 315px; margin: 0; color: #aab0b9; font-size: 12px; line-height: 1.65; }.service-card > a { display: inline-flex; align-items: center; gap: 10px; width: max-content; margin-top: auto; padding-top: 23px; color: var(--orange-light); font-size: 11px; font-weight: 800; }.service-card > a svg { transition: transform .2s ease; }.service-card > a:hover svg { transform: translateX(4px); }.store-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; margin-top: 17px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(100deg, rgba(255,106,0,.1), rgba(255,255,255,.025)); }.store-mark { display: flex; align-items: center; gap: 10px; color: var(--orange); }.store-mark svg { width: 20px; }.store-mark span { color: white; font-size: 13px; font-weight: 900; letter-spacing: .02em; }.store-mark b { color: var(--orange); }.store-strip p { margin: 0; color: #c2c5ca; font-size: 12px; line-height: 1.5; }.soon-label { padding: 7px 10px; border: 1px solid rgba(255,106,0,.35); border-radius: 999px; color: var(--orange-light); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.projects-section { color: #131519; background: #efefeb; }.projects-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }.projects-head .section-kicker { color: var(--orange-deep); }.project-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.project-filters button { padding: 9px 11px; border: 1px solid #d0d1d0; border-radius: 999px; color: #575c63; font-size: 10px; font-weight: 800; background: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease; }.project-filters button:hover, .project-filters button.is-active { border-color: #24272b; color: white; background: #24272b; }.projects-list { display: grid; gap: clamp(72px, 10vw, 140px); margin-top: 64px; }.project-block { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: center; gap: clamp(38px, 7vw, 90px); }.project-block:nth-child(even) .project-preview { order: 2; }.project-preview { position: relative; min-height: 471px; overflow: hidden; border-radius: 20px; background: #1b140d; box-shadow: 0 26px 65px rgba(43,31,17,.22); }.project-preview::after { content: ""; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; right: -145px; top: -140px; box-shadow: 0 0 0 40px rgba(255,255,255,.04), 0 0 0 80px rgba(255,255,255,.025); }.project-luxam .project-preview { background: linear-gradient(135deg, #27221a, #0c0d0e 75%); }.project-browser { position: absolute; z-index: 2; top: 14%; left: 8%; width: 76%; overflow: hidden; border: 6px solid #151719; border-radius: 14px; background: #f5f0e5; box-shadow: 0 23px 60px rgba(0,0,0,.3); }.browser-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #151719; }.browser-bar span { width: 5px; height: 5px; border-radius: 50%; background: #53565a; }.browser-bar b { margin-left: auto; color: #d7d8d9; font-size: 6px; letter-spacing: .12em; }.beauty-layout { display: grid; min-height: 284px; grid-template-columns: 1.1fr .9fr; }.beauty-layout > div:first-child { display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 25px; background: radial-gradient(circle at 70% 22%, #f1cf9f, transparent 20%), linear-gradient(140deg, #f4ead8, #c29150); }.beauty-layout small, .luxam-layout small { color: #8a632e; font-family: Georgia, serif; font-size: 8px; letter-spacing: .22em; }.beauty-layout strong, .luxam-layout strong { margin-top: 10px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; line-height: .93; }.beauty-layout p { margin: 14px 0 0; color: #715027; font-size: 8px; }.beauty-bottles { display: flex; align-items: end; justify-content: center; gap: 8px; padding: 25px; background: linear-gradient(155deg, #22170d, #6a431d); }.beauty-bottles i { width: 23px; height: 102px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #79521d, #edcd72, #8e5c1d); box-shadow: inset 0 -24px rgba(0,0,0,.18); }.beauty-bottles i:nth-child(2) { width: 31px; height: 134px; }.project-phone { position: absolute; z-index: 4; right: 7%; bottom: 8%; display: flex; width: 102px; height: 198px; flex-direction: column; align-items: center; padding: 13px; border: 5px solid #111316; border-radius: 19px; background: linear-gradient(155deg, #ede1ca, #b77f36); box-shadow: 0 18px 42px rgba(0,0,0,.35); }.project-phone div { width: 30px; height: 4px; border-radius: 3px; background: #222; }.project-phone b { display: grid; width: 44px; height: 44px; place-items: center; margin-top: 35px; border: 1px solid #725022; color: #60421c; font-family: Georgia, serif; font-size: 16px; }.project-phone span { width: 30px; height: 3px; margin-top: auto; border-radius: 3px; background: rgba(0,0,0,.35); }.preview-caption { position: absolute; z-index: 3; bottom: 19px; left: 22px; color: rgba(255,255,255,.8); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.luxam-layout { position: relative; min-height: 284px; overflow: hidden; padding: 30px; color: #e4c576; background: radial-gradient(circle at 78% 42%, rgba(211,176,88,.22), transparent 20%), linear-gradient(135deg, #171512, #050606); }.luxam-layout small { color: #e3c470; }.luxam-layout strong { display: block; position: relative; z-index: 2; font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 27px; font-weight: 900; letter-spacing: -.07em; }.luxam-layout em { color: #e2ba59; }.watch-face { position: absolute; right: 9%; bottom: -23%; width: 170px; height: 170px; border: 14px solid #bb9245; border-radius: 50%; box-shadow: inset 0 0 0 9px #24211b, 0 0 40px rgba(226,186,89,.16); }.watch-face::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(226,186,89,.48); border-radius: 50%; }.watch-face b { position: absolute; top: 25px; left: 49%; color: #e4c576; font-family: Georgia, serif; font-size: 10px; }.watch-face i { position: absolute; top: 50%; left: 49%; width: 1px; height: 40px; background: #e4c576; transform: rotate(35deg); transform-origin: top; }.watch-face span { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #e4c576; transform: translate(-50%,-50%); }.project-copy h3 { margin: 0; font-size: clamp(31px, 3.8vw, 51px); line-height: 1; letter-spacing: -.065em; }.project-service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }.project-service-tags span { padding: 7px 10px; border: 1px solid #ced0d0; border-radius: 999px; color: #5f6266; font-size: 9px; font-weight: 800; }.project-copy dl { display: grid; gap: 20px; margin: 31px 0 0; }.project-copy dl div { display: grid; grid-template-columns: 108px 1fr; gap: 20px; }.project-copy dt { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.project-copy dd { margin: 0; color: #585c63; font-size: 13px; line-height: 1.67; }.text-link { display: inline-flex; align-items: center; gap: 11px; width: max-content; margin-top: 33px; padding-bottom: 7px; border-bottom: 2px solid var(--orange); color: #1d2025; font-size: 12px; font-weight: 900; }.text-link svg { color: var(--orange-deep); transition: transform .2s ease; }.text-link:hover svg { transform: translateX(4px); }.empty-projects { display: grid; place-items: center; min-height: 270px; padding: 40px; border: 1px dashed #b6b8b8; border-radius: 15px; color: #61666c; text-align: center; }.empty-projects svg { color: var(--orange-deep); }.empty-projects p { max-width: 390px; margin: 16px 0; font-size: 13px; line-height: 1.6; }.empty-projects button { border: 0; color: var(--orange-deep); font-size: 11px; font-weight: 900; background: none; }

.benefits-section { background: #111419; }.benefits-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 63px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }.benefits-grid::before { content: ""; position: absolute; z-index: 0; top: 20%; bottom: 20%; left: 16%; width: 67%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,106,0,.38), transparent); }.benefit-card { position: relative; z-index: 1; min-height: 258px; padding: 26px; background: #111419; transition: background .2s ease; }.benefit-card:hover { background: #181b21; }.benefit-card > div { display: flex; align-items: center; justify-content: space-between; }.benefit-number { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .1em; }.benefit-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,106,0,.4); border-radius: 50%; color: var(--orange); }.benefit-card h3 { margin: 46px 0 12px; font-size: 18px; letter-spacing: -.035em; }.benefit-card p { max-width: 280px; margin: 0; color: #a7acb5; font-size: 12px; line-height: 1.7; }

.responsive-section { overflow: hidden; color: #111318; background: #f5f4f0; }.responsive-copy > p:not(.section-kicker) { max-width: 495px; margin: 26px 0 0; color: var(--muted-dark); font-size: 15px; line-height: 1.78; }.responsive-proof { display: grid; gap: 11px; margin-top: 29px; }.responsive-proof span { display: flex; align-items: center; gap: 9px; color: #444950; font-size: 12px; font-weight: 750; }.responsive-proof svg { color: var(--orange-deep); }.device-stage { position: relative; min-height: 430px; }.desktop-device { position: absolute; top: 34px; left: 8%; width: 74%; height: 294px; padding: 11px; border: 8px solid #22262c; border-radius: 12px 12px 3px 3px; background: #22262c; box-shadow: 0 25px 55px rgba(18,22,25,.22); }.desktop-device::after { content: ""; position: absolute; bottom: -22px; left: -8%; width: 116%; height: 18px; border-radius: 3px 3px 12px 12px; background: linear-gradient(90deg, #30353a, #697076, #30353a); }.device-ui { position: relative; height: 100%; overflow: hidden; padding: 22px; color: white; background: radial-gradient(circle at 75% 18%, rgba(255,106,0,.35), transparent 23%), linear-gradient(130deg,#1c2128,#08090b); }.device-ui::after { content: ""; position: absolute; right: -12%; bottom: -28%; width: 54%; height: 82%; border: 1px solid rgba(255,106,0,.45); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,106,0,.06), 0 0 0 28px rgba(255,106,0,.04); }.device-ui small { position: relative; z-index: 2; color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .15em; }.device-ui strong { position: relative; z-index: 2; display: block; margin-top: 25px; font-size: 29px; line-height: 1; letter-spacing: -.07em; }.device-ui > span { position: relative; z-index: 2; display: block; width: 32%; height: 8px; margin-top: 11px; border-radius: 9px; background: rgba(255,255,255,.16); }.device-ui > span:nth-of-type(2) { width: 27%; }.device-ui > span:nth-of-type(3) { width: 17%; background: var(--orange); }.tablet-device { position: absolute; z-index: 3; right: 3%; bottom: 10px; width: 183px; height: 238px; padding: 8px; border: 8px solid #252a31; border-radius: 14px; background: #252a31; box-shadow: 0 20px 45px rgba(18,22,25,.27); transform: rotate(7deg); }.tablet-device .device-ui { padding: 14px; }.tablet-device .device-ui strong { margin-top: 20px; font-size: 21px; }.mobile-device { position: absolute; z-index: 4; bottom: -3px; left: 3%; width: 102px; height: 199px; padding: 7px; border: 7px solid #1d2026; border-radius: 17px; background: #1d2026; box-shadow: 0 15px 40px rgba(18,22,25,.28); transform: rotate(-7deg); }.mobile-device .device-ui { padding: 12px 10px; }.mobile-device .device-ui strong { margin-top: 22px; font-size: 16px; }.mobile-device .device-ui > span { width: 55%; height: 5px; }

.process-section { position: relative; overflow: hidden; background: radial-gradient(circle at 79% 13%, rgba(255,106,0,.13), transparent 27%), #090b0e; }.process-section::after { content: ""; position: absolute; right: -170px; bottom: -175px; width: 450px; height: 450px; border: 1px solid rgba(255,106,0,.24); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,106,0,.025), 0 0 0 120px rgba(255,106,0,.018); }.process-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .65fr; gap: 70px; align-items: end; }.process-intro > p:not(.section-kicker) { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }.timeline { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 67px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; list-style: none; background: var(--line); }.timeline-item { min-height: 245px; padding: 25px; background: #0d1014; }.timeline-item:nth-child(even) { background: #12161b; }.timeline-number { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,106,0,.46); border-radius: 50%; color: var(--orange); font-size: 10px; font-weight: 900; }.timeline-item h3 { margin: 42px 0 10px; font-size: 19px; letter-spacing: -.04em; }.timeline-item p { max-width: 310px; margin: 0; color: #a4aab3; font-size: 12px; line-height: 1.68; }

.pricing-section { color: #17191e; background: #efefeb; }.pricing-intro { display: grid; grid-template-columns: 1fr .65fr; gap: 65px; align-items: end; }.pricing-intro .section-kicker { color: var(--orange-deep); }.pricing-intro > p:not(.section-kicker) { max-width: 405px; margin: 0; color: #676c74; font-size: 14px; line-height: 1.72; }.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 62px; }.pricing-card { position: relative; display: flex; min-height: 433px; flex-direction: column; padding: 24px; border: 1px solid #d1d2d0; border-radius: 15px; background: #f7f7f4; }.pricing-card.is-featured { border-color: #25282d; color: white; background: #20242a; box-shadow: 0 20px 45px rgba(31,35,40,.2); transform: translateY(-10px); }.popular-label { position: absolute; top: -12px; left: 22px; padding: 6px 10px; border-radius: 999px; color: white; background: var(--orange-deep); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.pricing-card > div:first-child p { margin: 0; font-size: 16px; font-weight: 850; letter-spacing: -.035em; }.pricing-card > div:first-child small { display: block; margin-top: 21px; color: #71767f; font-size: 9px; font-weight: 800; text-transform: uppercase; }.pricing-card.is-featured > div:first-child small { color: #aeb3bc; }.price { display: flex; align-items: flex-start; margin-top: 2px; letter-spacing: -.08em; }.price span { margin-top: 12px; font-size: 13px; font-weight: 900; }.price strong { font-size: 49px; line-height: 1; }.price sup { margin-top: 10px; font-size: 15px; font-weight: 900; letter-spacing: -.04em; }.plan-time { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: #757a82; font-size: 10px; }.pricing-card.is-featured .plan-time { color: #b4bac1; }.pricing-card ul { display: grid; gap: 11px; margin: 27px 0 auto; padding: 19px 0 0; border-top: 1px solid #dbdcda; list-style: none; }.pricing-card.is-featured ul { border-color: rgba(255,255,255,.16); }.pricing-card li { display: flex; align-items: center; gap: 8px; color: #545960; font-size: 10px; font-weight: 700; }.pricing-card.is-featured li { color: #e0e2e5; }.pricing-card li svg { color: var(--orange-deep); }.pricing-card .button { width: 100%; min-height: 44px; margin-top: 22px; padding-inline: 11px; font-size: 10px; }.pricing-note { display: flex; align-items: flex-start; gap: 9px; max-width: 970px; margin: 32px auto 0; color: #6b7078; font-size: 11px; line-height: 1.7; text-align: center; }.pricing-note svg { flex: none; margin-top: 2px; color: var(--orange-deep); }

.founder-section { background: #12151a; }.founder-portrait { position: relative; min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 51% 40%, rgba(255,106,0,.27), transparent 22%), linear-gradient(145deg, #1d2026, #08090b); }.portrait-grid { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(135deg, black, transparent 78%); }.portrait-glow { position: absolute; top: 12%; left: 17%; width: 66%; height: 66%; border: 1px solid rgba(255,106,0,.32); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,106,0,.06), 0 0 0 40px rgba(255,106,0,.035), 0 0 80px rgba(255,106,0,.22); }.portrait-code { position: absolute; z-index: 2; top: 23px; left: 23px; color: #8e949e; font-size: 8px; font-weight: 900; letter-spacing: .14em; }.portrait-initials { position: absolute; z-index: 2; top: 50%; left: 50%; color: #f6f5f1; font-size: clamp(105px, 15vw, 166px); font-weight: 900; letter-spacing: -.12em; line-height: .8; transform: translate(-53%,-48%); text-shadow: 0 0 30px rgba(255,106,0,.28); }.founder-portrait p { position: absolute; z-index: 2; right: 25px; bottom: 23px; margin: 0; color: white; font-size: 12px; font-weight: 900; letter-spacing: .11em; line-height: 1.2; text-align: right; }.founder-copy > p:not(.section-kicker) { color: #b1b6bf; }.founder-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 30px 0 35px; padding: 0; list-style: none; }.founder-list li { display: flex; align-items: center; gap: 8px; color: #d8dbe0; font-size: 11px; font-weight: 700; }.founder-list svg { color: var(--orange); }

.testimonials-section { overflow: hidden; color: #14161a; background: #f6f5f1; }.testimonial-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 9vw, 122px); align-items: center; }.testimonial-intro > p:not(.section-kicker) { max-width: 410px; margin: 25px 0 0; color: #676d75; font-size: 14px; line-height: 1.7; }.testimonial-placeholder { position: relative; min-height: 325px; padding: 53px; overflow: hidden; border: 1px dashed #bfc1c0; border-radius: 17px; background: white; }.testimonial-placeholder::after { content: ""; position: absolute; right: -75px; bottom: -75px; width: 250px; height: 250px; border: 1px solid rgba(255,106,0,.18); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,106,0,.035); }.quote-mark { display: block; color: var(--orange-deep); font-family: Georgia, serif; font-size: 61px; line-height: .6; }.testimonial-placeholder > p { position: relative; z-index: 1; max-width: 470px; margin: 25px 0 35px; color: #555a62; font-size: 15px; line-height: 1.7; }.testimonial-placeholder > div { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }.placeholder-avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #c6c8c8; border-radius: 50%; color: var(--orange-deep); font-size: 20px; }.testimonial-placeholder b, .testimonial-placeholder small { display: block; }.testimonial-placeholder b { font-size: 11px; }.testimonial-placeholder small { margin-top: 4px; color: #838891; font-size: 10px; }.logo-marquee { margin-top: 78px; overflow: hidden; border-block: 1px solid #d7d7d3; background: #efeee9; }.logo-track { display: flex; width: max-content; align-items: center; gap: 39px; padding: 21px 0; color: #7b7f84; font-size: 16px; font-weight: 900; letter-spacing: .13em; animation: marquee 24s linear infinite; }.logo-track i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-deep); }.logo-track span { transition: color .2s ease; }.logo-track span:hover { color: var(--orange-deep); }@keyframes marquee { to { transform: translateX(-33.33%); } }

.faq-section { background: #0d1014; }.faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px, 9vw, 125px); }.faq-intro > p:not(.section-kicker) { max-width: 400px; margin: 26px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }.faq-intro .text-link { color: white; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 1px; color: #f0f0ef; font-size: 14px; font-weight: 800; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { display: grid; flex: none; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--orange); transition: transform .2s ease, background .2s ease; }.faq-list details[open] summary span { color: white; background: var(--orange-deep); transform: rotate(-45deg); }.faq-list details p { max-width: 650px; margin: -1px 46px 21px 0; color: #a6abb4; font-size: 12px; line-height: 1.72; }

.final-cta { position: relative; overflow: hidden; padding-block: clamp(94px, 11vw, 140px); background: radial-gradient(circle at 78% 53%, rgba(255,106,0,.27), transparent 24%), #12151a; }.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, transparent, black 50%, transparent); }.final-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 45px; }.final-cta-copy > p:not(.section-kicker) { max-width: 620px; margin: 27px 0 0; color: #afb4bc; font-size: 15px; line-height: 1.75; }.cta-benefits { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 25px; }.cta-benefits span { display: flex; align-items: center; gap: 7px; color: #d7dadf; font-size: 10px; font-weight: 700; }.cta-benefits svg { color: var(--orange); }.cta-visual { position: relative; min-height: 360px; }.cta-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.45); border-radius: 50%; transform: translate(-50%,-50%); }.ring-a { width: 300px; height: 300px; box-shadow: 0 0 0 31px rgba(255,106,0,.05), 0 0 70px rgba(255,106,0,.22); }.ring-b { width: 207px; height: 207px; border-color: rgba(255,255,255,.14); }.cta-badge { position: absolute; top: 50%; left: 50%; display: grid; width: 136px; height: 136px; place-items: center; align-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: linear-gradient(145deg, #22262d, #0c0e12); box-shadow: 0 25px 60px rgba(0,0,0,.4); transform: translate(-50%,-50%) rotate(7deg); }.cta-badge .brand-fox { transform: rotate(45deg) scale(.74); }.cta-badge strong { font-size: 18px; letter-spacing: -.06em; }.cta-badge small { color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .13em; }.cta-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); }.dot-a { top: 22%; left: 30%; }.dot-b { right: 19%; bottom: 21%; width: 11px; height: 11px; }.dot-c { top: 32%; right: 20%; width: 5px; height: 5px; }

.site-footer { padding: 70px 0 26px; background: #08090b; }.footer-grid { display: grid; grid-template-columns: 1.35fr .7fr .8fr 1fr; gap: 48px; padding-bottom: 55px; }.footer-brand-area p { max-width: 280px; margin: 20px 0; color: #a4aab2; font-size: 12px; line-height: 1.7; }.footer-email { color: var(--orange-light); font-size: 11px; font-weight: 800; }.footer-title { margin: 0 0 16px; color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.footer-links { display: grid; gap: 10px; }.footer-links a, .footer-contact > * { color: #c8ccd1; font-size: 11px; transition: color .2s ease; }.footer-links a:hover, .footer-contact a:hover { color: var(--orange); }.footer-contact { display: grid; gap: 10px; }.footer-contact span { color: #8e949d; line-height: 1.45; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); color: #747a84; font-size: 9px; }.footer-bottom div { display: flex; gap: 16px; }.footer-bottom a:hover { color: var(--orange); }

.floating-contact, .back-top { position: fixed; z-index: 40; right: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.23); }.floating-contact { bottom: 67px; gap: 8px; min-height: 43px; padding: 0 14px; border-color: rgba(255,106,0,.5); border-radius: 999px; color: white; background: var(--orange-deep); font-size: 10px; font-weight: 900; }.back-top { bottom: 18px; width: 38px; height: 38px; border-radius: 50%; background: #20242a; }.back-top svg { transform: rotate(-90deg); }.floating-contact:hover, .back-top:hover { transform: translateY(-2px); }

.reveal { animation: fade-up .65s both; }@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .desktop-nav { display: none; }.header-cta { display: none; }.menu-toggle { display: grid; place-items: center; }.mobile-menu { position: absolute; top: calc(100% + 8px); right: 18px; left: 18px; z-index: 5; display: grid; gap: 18px; max-height: 0; padding: 0 18px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; opacity: 0; visibility: hidden; background: rgba(13,15,19,.97); box-shadow: var(--shadow); transition: max-height .28s ease, padding .28s ease, opacity .25s ease, visibility .25s ease, border-color .25s ease; }.mobile-menu.is-open { max-height: 470px; padding: 18px; border-color: var(--line); opacity: 1; visibility: visible; }.mobile-menu nav { display: grid; gap: 2px; }.mobile-menu nav a { padding: 12px 0; border-bottom: 1px solid var(--line); color: #e6e7e9; font-size: 13px; font-weight: 750; }.mobile-menu .button { width: 100%; }
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 22px; }.hero-visual { height: 590px; min-height: 500px; }.hero-screen { left: -4%; }.float-status { left: -8%; }.services-grid { grid-template-columns: repeat(2, 1fr); }.pricing-grid { grid-template-columns: repeat(2, 1fr); }.pricing-card.is-featured { transform: none; }.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }.footer-grid > div:last-child { grid-column: 1 / -1; }.footer-contact { grid-template-columns: repeat(3, max-content); }
}

@media (max-width: 780px) {
  .shell { width: min(100% - 36px, 590px); }.section-space { padding-block: 84px; }.header-inner { min-height: 74px; }.brand-fox { width: 24px; height: 22px; }.brand-type { font-size: 23px; }.brand-agency { font-size: 7px; }.hero { min-height: unset; }.hero-grid { min-height: unset; grid-template-columns: 1fr; gap: 22px; padding-top: 113px; padding-bottom: 51px; }.hero-copy { padding-top: 0; }.eyebrow, .section-kicker { margin-bottom: 16px; font-size: 9px; }.hero-lead { margin-top: 21px; font-size: 14px; line-height: 1.67; }.hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 25px; }.button { width: 100%; min-height: 51px; }.hero-trust { margin-top: 21px; font-size: 10px; }.hero-visual { height: 420px; min-height: 0; margin-top: 3px; }.hero-foxbot { right: -6%; width: 111%; height: 110%; object-position: 74% center; }.visual-grid { right: -25%; }.orbit-one { right: -19%; top: 5%; width: 370px; height: 370px; }.orbit-two { width: 270px; height: 270px; }.hero-screen { top: 10%; left: -3%; width: 205px; padding: 11px; }.hero-screen small { margin-top: 16px; }.hero-screen strong { font-size: 18px; }.screen-metrics { height: 25px; margin-top: 13px; }.float-status { bottom: 7%; left: -2%; padding: 10px; }.float-growth { right: -2%; bottom: 3%; width: 128px; padding: 10px; }.hero-float b { font-size: 9px; }.trust-items { grid-template-columns: repeat(2, 1fr); }.trust-item { min-height: 70px; padding: 12px; }.trust-item:first-child { border-left: 0; }.trust-item:nth-child(2n) { border-right: 0; }.trust-item:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }.trust-item p { font-size: 10px; }
  .intro-grid, .responsive-grid, .founder-grid, .section-heading, .process-intro, .pricing-intro, .testimonial-grid, .faq-grid { grid-template-columns: 1fr; gap: 34px; }.intro-copy > p:not(.section-kicker), .responsive-copy > p:not(.section-kicker), .founder-copy > p:not(.section-kicker), .faq-intro > p:not(.section-kicker) { font-size: 14px; }.intro-system { min-height: 385px; }.system-core { width: 190px; min-height: 160px; padding: 22px; }.system-nodes > div { width: 68px; height: 68px; }.system-nodes > div:nth-child(1) { left: 7%; }.system-nodes > div:nth-child(2) { right: 6%; }.system-nodes > div:nth-child(3) { left: 10%; }.system-nodes > div:nth-child(4) { right: 9%; }.system-core p { margin-top: 15px; font-size: 10px; }.section-heading > p, .process-intro > p:not(.section-kicker), .pricing-intro > p:not(.section-kicker) { max-width: 530px; font-size: 14px; }.services-grid { grid-template-columns: 1fr; margin-top: 43px; }.service-card { min-height: 251px; }.service-card h3 { margin-top: 27px; }.store-strip { grid-template-columns: 1fr auto; gap: 12px; padding: 17px; }.store-strip p { grid-column: 1 / -1; grid-row: 2; }.projects-head { grid-template-columns: 1fr; gap: 27px; }.project-filters { justify-content: flex-start; }.project-block { grid-template-columns: 1fr; gap: 35px; }.project-block:nth-child(even) .project-preview { order: 0; }.project-preview { min-height: 352px; }.project-browser { top: 11%; width: 81%; }.beauty-layout, .luxam-layout { min-height: 214px; }.beauty-layout > div:first-child { padding: 19px; }.beauty-layout strong, .luxam-layout strong { font-size: 21px; }.beauty-bottles { padding: 17px; }.beauty-bottles i { width: 18px; height: 73px; }.beauty-bottles i:nth-child(2) { width: 24px; height: 99px; }.project-phone { width: 82px; height: 158px; right: 5%; bottom: 7%; border-width: 4px; }.project-phone b { width: 34px; height: 34px; margin-top: 27px; font-size: 12px; }.watch-face { width: 134px; height: 134px; border-width: 10px; }.project-copy dl div { grid-template-columns: 86px 1fr; gap: 12px; }.project-copy dd { font-size: 12px; }.benefits-grid { grid-template-columns: 1fr; margin-top: 43px; }.benefits-grid::before { top: 5%; bottom: 5%; left: 50%; width: 1px; height: 90%; background: linear-gradient(0deg, transparent, rgba(255,106,0,.38), transparent); }.benefit-card { min-height: 216px; }.benefit-card h3 { margin-top: 34px; }.device-stage { min-height: 357px; }.desktop-device { top: 11px; left: 4%; width: 77%; height: 230px; }.device-ui { padding: 16px; }.device-ui strong { margin-top: 17px; font-size: 22px; }.tablet-device { width: 135px; height: 180px; right: 0; bottom: 0; }.tablet-device .device-ui strong { font-size: 16px; }.mobile-device { width: 82px; height: 158px; bottom: -2px; left: 0; }.mobile-device .device-ui strong { font-size: 12px; }.timeline { grid-template-columns: 1fr; margin-top: 46px; }.timeline-item { min-height: 205px; }.timeline-item h3 { margin-top: 28px; }.pricing-grid { grid-template-columns: 1fr; margin-top: 44px; }.pricing-card { min-height: 385px; }.pricing-card.is-featured { transform: none; }.founder-portrait { min-height: 370px; }.founder-list { grid-template-columns: 1fr; }.testimonial-placeholder { min-height: 280px; padding: 37px 27px; }.logo-marquee { margin-top: 58px; }.logo-track { gap: 25px; font-size: 12px; }.faq-list details p { margin-right: 5px; }.final-cta-inner { grid-template-columns: 1fr; }.cta-visual { min-height: 252px; }.ring-a { width: 216px; height: 216px; }.ring-b { width: 154px; height: 154px; }.cta-badge { width: 106px; height: 106px; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 23px; }.footer-brand-area { grid-column: 1 / -1; }.footer-grid > div:last-child { grid-column: 1 / -1; }.footer-contact { grid-template-columns: 1fr; }.footer-bottom { flex-direction: column; }.floating-contact { right: 14px; bottom: 64px; }.back-top { right: 16px; bottom: 16px; }
}

@media (max-width: 390px) { .shell { width: calc(100% - 30px); }.project-filters { gap: 5px; }.project-filters button { padding: 7px 8px; font-size: 9px; }.trust-item p { font-size: 9px; }.float-growth { display: none; }.hero-screen { width: 186px; }.footer-grid { grid-template-columns: 1fr; }.footer-brand-area, .footer-grid > div:last-child { grid-column: auto; } }

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

/* Keep the longer process and pricing intros balanced on large screens. */
.process-intro, .pricing-intro { gap: 20px 70px; }
.process-intro .section-kicker, .pricing-intro .section-kicker { grid-column: 1 / -1; }
.process-intro h2, .pricing-intro h2 { grid-column: 1; }
.process-intro > p:not(.section-kicker), .pricing-intro > p:not(.section-kicker) { grid-column: 2; }

@media (max-width: 780px) {
  .process-intro .section-kicker, .pricing-intro .section-kicker,
  .process-intro h2, .pricing-intro h2,
  .process-intro > p:not(.section-kicker), .pricing-intro > p:not(.section-kicker) { grid-column: auto; }
}

/* Softer typography: keeps hierarchy while making large headings more refined. */
h1 { font-weight: 760; letter-spacing: -.058em; }
.intro-copy h2, .section-heading h2, .projects-head h2, .process-intro h2,
.pricing-intro h2, .founder-copy h2, .testimonial-intro h2, .faq-intro h2,
.final-cta h2 { font-weight: 740; letter-spacing: -.055em; }
.service-card h3, .project-copy h3, .benefit-card h3, .timeline-item h3 { font-weight: 710; }

/* Official Foxfy mark proportions. */
.system-logo { display: flex; align-items: center; }
.system-brand-logo { display: block; width: 116px; height: auto; }
.cta-badge { width: 154px; height: 136px; gap: 10px; }
.cta-brand-logo { display: block; width: 112px; height: auto; }

@media (max-width: 780px) {
  .brand-logo { width: 126px; }
  .cta-brand-logo { width: 91px; }
}

/* Premium motion system for the hero. */
.hero-premium {
  --hero-near-x: 0px;
  --hero-near-y: 0px;
  --hero-far-x: 0px;
  --hero-far-y: 0px;
  min-height: 100svh;
  background:
    radial-gradient(circle at 82% 46%, rgba(255, 92, 0, .2), transparent 26%),
    radial-gradient(circle at 62% 92%, rgba(255, 141, 48, .08), transparent 24%),
    radial-gradient(circle at 11% 9%, rgba(255, 255, 255, .055), transparent 23%),
    linear-gradient(135deg, #07080a 0%, #0a0c10 48%, #08090b 100%);
}
.hero-premium::before {
  opacity: .46;
  background-size: 72px 72px;
  animation: hero-grid-drift 22s linear infinite;
  mask-image: linear-gradient(90deg, black, rgba(0,0,0,.9) 55%, transparent 96%);
}
.hero-premium::after { z-index: 2; height: 150px; }
.hero-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora {
  position: absolute;
  top: 4%;
  right: -11%;
  width: min(780px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .7;
  background: radial-gradient(circle, rgba(255,104,0,.18), rgba(255,78,0,.055) 35%, transparent 69%);
  filter: blur(4px);
  animation: hero-aurora-breathe 7s ease-in-out infinite;
}
.hero-beam {
  position: absolute;
  top: -28%;
  right: 20%;
  width: 140px;
  height: 145%;
  opacity: .12;
  background: linear-gradient(90deg, transparent, rgba(255,139,57,.72), transparent);
  filter: blur(18px);
  transform: rotate(24deg);
  animation: hero-beam-sweep 10s ease-in-out infinite;
}
.hero-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px 3px rgba(255,106,0,.58); animation: hero-particle-float 6s ease-in-out infinite; }
.particle-1 { top: 21%; left: 7%; animation-delay: -1s; }.particle-2 { top: 73%; left: 43%; width: 3px; height: 3px; animation-delay: -3.2s; }.particle-3 { top: 17%; right: 26%; animation-delay: -4.4s; }.particle-4 { right: 8%; bottom: 17%; width: 6px; height: 6px; animation-delay: -2.1s; }.particle-5 { top: 52%; left: 49%; width: 2px; height: 2px; animation-delay: -.5s; }.particle-6 { top: 10%; left: 39%; width: 3px; height: 3px; animation-delay: -5.1s; }

.hero-premium .hero-grid { min-height: 100svh; grid-template-columns: minmax(0, .96fr) minmax(480px, 1.04fr); gap: clamp(26px, 4.5vw, 64px); padding-top: 112px; padding-bottom: 78px; }
.hero-copy.reveal { animation: none; }
.hero-copy > * { opacity: 0; animation: hero-copy-in .72s cubic-bezier(.2,.75,.25,1) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: .08s; }.hero-copy > *:nth-child(2) { animation-delay: .18s; }.hero-copy > *:nth-child(3) { animation-delay: .28s; }.hero-copy > *:nth-child(4) { animation-delay: .38s; }.hero-copy > *:nth-child(5) { animation-delay: .48s; }.hero-copy > *:nth-child(6) { animation-delay: .58s; }
.hero-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 610px; margin-bottom: 20px; }
.hero-kicker-row .eyebrow { margin: 0; }
.hero-live { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; border: 1px solid rgba(104,231,169,.2); border-radius: 999px; color: #9ea5ae; background: rgba(255,255,255,.025); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-live i { width: 6px; height: 6px; border-radius: 50%; background: #68e7a9; box-shadow: 0 0 11px #68e7a9; animation: hero-live-pulse 1.8s ease-in-out infinite; }
.hero-premium h1 em { background: linear-gradient(110deg, #ff6a00 12%, #ffb36f 42%, #ff6a00 72%); background-size: 220% 100%; background-clip: text; color: transparent; animation: hero-title-shimmer 5.4s ease-in-out infinite; }
.hero-premium .hero-lead { max-width: 575px; color: #b9bdc5; }
.hero-premium .hero-actions .button-primary { position: relative; overflow: hidden; box-shadow: 0 15px 38px rgba(232,77,0,.2); }
.hero-premium .hero-actions .button-primary::after { content: ""; position: absolute; inset: -45% auto -45% -35%; width: 27%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); animation: hero-button-glint 4.8s ease-in-out infinite; }
.hero-signature { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #6f747d; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.hero-signature i { width: 24px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }

.hero-premium .hero-visual { height: min(700px, calc(100svh - 112px)); min-height: 570px; perspective: 1200px; }
.hero-stage-glow { position: absolute; z-index: -2; top: 18%; right: 3%; width: 68%; height: 62%; border-radius: 50%; background: radial-gradient(circle, rgba(255,100,0,.24), rgba(255,100,0,.055) 47%, transparent 72%); filter: blur(12px); transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0); animation: hero-stage-pulse 5.8s ease-in-out infinite; }
.hero-scan { position: absolute; z-index: 5; top: 2%; right: 0; width: 76%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,156,76,.8), transparent); box-shadow: 0 0 20px rgba(255,106,0,.55); animation: hero-scan-line 5.5s linear infinite; pointer-events: none; }
.hero-premium .visual-grid { top: 5%; right: -14%; width: 98%; height: 88%; opacity: .8; background-size: 33px 33px; transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0) perspective(900px) rotateY(-14deg) rotateX(3deg); transition: transform .18s ease-out; animation: hero-grid-glow 6s ease-in-out infinite; }
.hero-premium .visual-orbit { transition: border-color .3s ease; }
.orbit-runner { position: absolute; inset: -1px; border-radius: inherit; animation: hero-orbit-spin 15s linear infinite; }
.orbit-runner::before { content: ""; position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff8b38; box-shadow: 0 0 18px 4px rgba(255,106,0,.65); }
.orbit-two .orbit-runner { animation-duration: 21s; animation-direction: reverse; }
.orbit-two .orbit-runner::before { width: 6px; height: 6px; opacity: .75; background: white; box-shadow: 0 0 15px rgba(255,255,255,.5); }
.hero-code-rail { position: absolute; z-index: 2; top: 19%; right: -4%; display: flex; align-items: center; gap: 9px; color: #7d838d; font-size: 7px; font-weight: 800; letter-spacing: .17em; writing-mode: vertical-rl; transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0); }
.hero-code-rail i { width: 1px; height: 42px; background: linear-gradient(var(--orange), transparent); }
.hero-premium .hero-foxbot { filter: contrast(1.08) saturate(1.1) drop-shadow(0 28px 35px rgba(0,0,0,.32)); animation: hero-fox-float 6.4s ease-in-out infinite; will-change: transform; }
.hero-premium .hero-screen { overflow: hidden; border-color: rgba(255,139,57,.26); background: linear-gradient(145deg, rgba(28,31,37,.94), rgba(7,9,12,.82)); box-shadow: 0 24px 75px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.04) inset; animation: hero-panel-float 5.8s ease-in-out infinite; will-change: transform; }
.hero-premium .hero-screen::after { content: ""; position: absolute; inset: 0; opacity: .15; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22), transparent 62%); transform: translateX(-110%); animation: hero-panel-shine 6.2s ease-in-out infinite; pointer-events: none; }
.screen-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.screen-top .screen-bar { padding: 0; border: 0; }
.screen-top > b { display: flex; align-items: center; gap: 5px; color: #70e8ab; font-size: 6px; letter-spacing: .12em; }
.screen-top > b i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.hero-premium .screen-metrics span { transform-origin: bottom; animation: hero-metric-rise 2.8s ease-in-out infinite alternate; }
.hero-premium .screen-metrics span:nth-child(2) { animation-delay: -.7s; }.hero-premium .screen-metrics span:nth-child(3) { animation-delay: -1.4s; }
.screen-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 14px; }
.screen-progress > span { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.screen-progress > span i { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange-deep), var(--orange-light)); animation: hero-progress 3.2s ease-in-out infinite; }
.hero-screen .screen-progress small { margin: 0; color: #818791; font-size: 6px; letter-spacing: .06em; white-space: nowrap; }
.hero-premium .hero-float { border-color: rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(20,23,28,.88), rgba(9,11,14,.72)); box-shadow: 0 18px 55px rgba(0,0,0,.31), 0 0 25px rgba(255,106,0,.035); }
.hero-premium .float-status { animation: hero-card-a 5.2s ease-in-out infinite; }
.hero-premium .float-growth { animation: hero-card-b 6s ease-in-out infinite; }
.hero-premium .mini-chart i { transform-origin: bottom; animation: hero-chart-bar 2.5s ease-in-out infinite alternate; }.hero-premium .mini-chart i:nth-child(2) { animation-delay: -.4s; }.hero-premium .mini-chart i:nth-child(3) { animation-delay: -.8s; }.hero-premium .mini-chart i:nth-child(4) { animation-delay: -1.2s; }.hero-premium .mini-chart i:nth-child(5) { animation-delay: -1.6s; }
.float-brand { top: 7%; right: 3%; padding: 11px 13px; animation: hero-card-c 6.6s ease-in-out infinite; }
.brand-orb { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,106,0,.35); border-radius: 10px; color: var(--orange-light); background: rgba(255,106,0,.1); box-shadow: 0 0 22px rgba(255,106,0,.12); }
.hero-scroll { position: absolute; z-index: 6; bottom: 22px; left: 50%; display: grid; justify-items: center; gap: 8px; color: #777d86; font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; transform: translateX(-50%); }
.hero-scroll i { position: relative; display: block; width: 1px; height: 26px; overflow: hidden; background: rgba(255,255,255,.12); }
.hero-scroll i::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 55%; background: var(--orange); animation: hero-scroll-line 2.1s ease-in-out infinite; }

@keyframes hero-grid-drift { to { background-position: 72px 72px; } }
@keyframes hero-aurora-breathe { 0%,100% { opacity: .54; transform: scale(.94); } 50% { opacity: .82; transform: scale(1.06); } }
@keyframes hero-beam-sweep { 0%,100% { opacity: .04; transform: translateX(-70px) rotate(24deg); } 50% { opacity: .16; transform: translateX(110px) rotate(24deg); } }
@keyframes hero-particle-float { 0%,100% { opacity: .2; transform: translateY(8px) scale(.75); } 50% { opacity: 1; transform: translateY(-12px) scale(1.15); } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-live-pulse { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes hero-title-shimmer { 0%,20%,100% { background-position: 100% 50%; } 55% { background-position: 0 50%; } }
@keyframes hero-button-glint { 0%,68% { left: -35%; opacity: 0; } 78% { opacity: 1; } 96%,100% { left: 125%; opacity: 0; } }
@keyframes hero-stage-pulse { 0%,100% { opacity: .62; scale: .95; } 50% { opacity: .92; scale: 1.05; } }
@keyframes hero-scan-line { 0%,8% { top: 5%; opacity: 0; } 15% { opacity: .65; } 70% { top: 91%; opacity: .25; } 78%,100% { top: 91%; opacity: 0; } }
@keyframes hero-grid-glow { 0%,100% { opacity: .55; } 50% { opacity: .86; } }
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hero-fox-float { 0%,100% { transform: translate3d(var(--hero-near-x), var(--hero-near-y), 0) scale(1.005); } 50% { transform: translate3d(var(--hero-near-x), calc(var(--hero-near-y) - 10px), 0) scale(1.02); } }
@keyframes hero-panel-float { 0%,100% { transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0) perspective(900px) rotateY(9deg) rotateX(2deg); } 50% { transform: translate3d(var(--hero-far-x), calc(var(--hero-far-y) - 8px), 0) perspective(900px) rotateY(6deg) rotateX(1deg); } }
@keyframes hero-panel-shine { 0%,65% { transform: translateX(-110%); } 92%,100% { transform: translateX(120%); } }
@keyframes hero-metric-rise { from { transform: scaleY(.68); filter: saturate(.8); } to { transform: scaleY(1); filter: saturate(1.25); } }
@keyframes hero-progress { 0%,100% { width: 66%; } 50% { width: 92%; } }
@keyframes hero-chart-bar { from { transform: scaleY(.62); } to { transform: scaleY(1); } }
@keyframes hero-card-a { 0%,100% { transform: translate3d(var(--hero-near-x), var(--hero-near-y), 0) rotate(-1deg); } 50% { transform: translate3d(var(--hero-near-x), calc(var(--hero-near-y) - 9px), 0) rotate(1deg); } }
@keyframes hero-card-b { 0%,100% { transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0) rotate(1deg); } 50% { transform: translate3d(var(--hero-far-x), calc(var(--hero-far-y) - 11px), 0) rotate(-1deg); } }
@keyframes hero-card-c { 0%,100% { transform: translate3d(var(--hero-far-x), var(--hero-far-y), 0); } 50% { transform: translate3d(var(--hero-far-x), calc(var(--hero-far-y) - 7px), 0); } }
@keyframes hero-scroll-line { 0% { top: -70%; } 75%,100% { top: 120%; } }

@media (max-width: 1120px) {
  .hero-premium .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 20px; }
  .hero-kicker-row { align-items: flex-start; flex-direction: column; gap: 11px; }
  .float-brand { right: -1%; }
}

@media (max-width: 780px) {
  .hero-premium { min-height: auto; }
  .hero-premium .hero-grid { min-height: auto; grid-template-columns: 1fr; gap: 18px; padding-top: 112px; padding-bottom: 48px; }
  .hero-kicker-row { flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
  .hero-live { padding: 6px 8px; font-size: 7px; }
  .hero-signature { display: none; }
  .hero-premium .hero-visual { height: 445px; min-height: 0; margin-top: 5px; }
  .hero-code-rail { display: none; }
  .hero-scan { width: 88%; }
  .float-brand { top: 3%; right: -1%; padding: 9px 10px; }
  .float-brand .brand-orb { width: 29px; height: 29px; }
  .float-brand b { font-size: 8px; }
  .float-brand small { font-size: 6px; }
  .hero-scroll { display: none; }
}

@media (max-width: 390px) {
  .hero-live, .float-brand { display: none; }
  .hero-premium .hero-visual { height: 425px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-premium::before, .hero-premium h1 em, .hero-atmosphere *, .hero-copy > *,
  .hero-stage-glow, .hero-scan, .orbit-runner, .hero-foxbot, .hero-screen,
  .hero-screen::after, .screen-metrics span, .screen-progress > span i,
  .hero-premium .hero-float, .hero-premium .mini-chart i, .hero-scroll i::after {
    animation: none !important;
  }
  .hero-copy > * { opacity: 1; }
}

/* Branded illustration for the second section. */
.intro-section {
  background:
    radial-gradient(circle at 87% 22%, rgba(255,106,0,.095), transparent 21%),
    radial-gradient(circle at 8% 92%, rgba(255,106,0,.05), transparent 24%),
    #f4f3ef;
}
.intro-section::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 58%, transparent); }
.intro-section::after { right: -11%; bottom: -37%; width: 660px; height: 660px; border-color: rgba(255,106,0,.25); box-shadow: 0 0 0 58px rgba(255,106,0,.04), 0 0 0 116px rgba(255,106,0,.022); }
.intro-section .intro-grid { grid-template-columns: minmax(0, .87fr) minmax(500px, 1.13fr); gap: clamp(52px, 7vw, 96px); }
.intro-art-card { position: relative; min-height: 545px; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 28px; color: white; background: #0a0c10; box-shadow: 0 34px 85px rgba(22,24,28,.28), 0 0 0 1px rgba(255,106,0,.05); isolation: isolate; }
.intro-art-card::before { content: ""; position: absolute; z-index: 2; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(135deg, transparent 12%, black 58%, transparent 94%); pointer-events: none; }
.intro-art-card::after { content: ""; position: absolute; z-index: 2; right: -23%; bottom: -37%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(255,137,55,.28); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,106,0,.045), 0 0 65px rgba(255,106,0,.2); pointer-events: none; }
.intro-art-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.05) saturate(1.1); transform: scale(1.035); animation: intro-art-breathe 8s ease-in-out infinite; }
.intro-art-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.28), transparent 34%, rgba(5,7,10,.28) 58%, rgba(5,7,10,.94) 100%), linear-gradient(90deg, rgba(4,6,9,.7), transparent 48%); }
.intro-art-scan { position: absolute; z-index: 5; top: 2%; left: 6%; width: 88%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,160,91,.88), transparent); box-shadow: 0 0 22px rgba(255,106,0,.6); animation: intro-art-scan 5.8s linear infinite; pointer-events: none; }
.intro-art-ring { position: absolute; z-index: 3; top: 12%; right: 7%; width: 72%; aspect-ratio: 1; border: 1px solid rgba(255,139,57,.26); border-radius: 50%; box-shadow: inset 0 0 48px rgba(255,106,0,.04); pointer-events: none; }
.intro-art-ring i { position: absolute; inset: -1px; border-radius: inherit; animation: intro-art-orbit 16s linear infinite; }
.intro-art-ring i::after { content: ""; position: absolute; top: calc(50% - 5px); right: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ff7a1b; box-shadow: 0 0 19px 5px rgba(255,106,0,.55); }
.intro-art-top { position: absolute; z-index: 6; top: 22px; right: 23px; left: 23px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.intro-art-top > img { display: block; width: 137px; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.intro-art-top > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(104,231,169,.2); border-radius: 999px; color: #aeb6c0; background: rgba(8,11,14,.62); backdrop-filter: blur(10px); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.intro-art-top > span i { width: 6px; height: 6px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 12px #70e8ab; animation: intro-status-pulse 1.8s ease-in-out infinite; }
.intro-art-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #edf0f4; background: linear-gradient(145deg, rgba(25,29,35,.84), rgba(8,10,13,.66)); box-shadow: 0 15px 38px rgba(0,0,0,.28); backdrop-filter: blur(12px); font-size: 8px; font-weight: 850; letter-spacing: .04em; }
.intro-art-chip svg { color: var(--orange-light); }
.intro-chip-site { top: 25%; left: 4%; animation: intro-chip-a 5.4s ease-in-out infinite; }.intro-chip-brand { top: 43%; right: 3%; animation: intro-chip-b 6.2s ease-in-out infinite; }.intro-chip-growth { bottom: 25%; left: 6%; animation: intro-chip-c 5.8s ease-in-out infinite; }
.intro-art-message { position: absolute; z-index: 6; right: 28px; bottom: 58px; left: 28px; }
.intro-art-message small { display: block; margin-bottom: 10px; color: #ff9b55; font-size: 7px; font-weight: 900; letter-spacing: .19em; }
.intro-art-message strong { display: block; max-width: 360px; font-size: clamp(26px, 3.2vw, 39px); font-weight: 720; line-height: .98; letter-spacing: -.055em; }
.intro-art-message em { color: var(--orange-light); font-style: normal; }
.intro-art-footer { position: absolute; z-index: 6; right: 28px; bottom: 23px; left: 28px; display: flex; align-items: center; gap: 9px; color: #7f858e; font-size: 6px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.intro-art-footer i { flex: 1; height: 1px; max-width: 26px; background: linear-gradient(90deg, var(--orange), transparent); }

@keyframes intro-art-breathe { 0%,100% { transform: scale(1.035); } 50% { transform: scale(1.075); } }
@keyframes intro-art-scan { 0%,8% { top: 5%; opacity: 0; } 16% { opacity: .72; } 68% { top: 91%; opacity: .25; } 78%,100% { top: 91%; opacity: 0; } }
@keyframes intro-art-orbit { to { transform: rotate(360deg); } }
@keyframes intro-status-pulse { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes intro-chip-a { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes intro-chip-b { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes intro-chip-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 1120px) {
  .intro-section .intro-grid { grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: 42px; }
  .intro-art-card { min-height: 510px; }
}

@media (max-width: 780px) {
  .intro-section .intro-grid { grid-template-columns: 1fr; gap: 42px; }
  .intro-art-card { min-height: 470px; border-radius: 22px; }
  .intro-art-top { top: 18px; right: 18px; left: 18px; }
  .intro-art-top > img { width: 122px; }
  .intro-art-message { right: 21px; bottom: 54px; left: 21px; }
  .intro-art-footer { right: 21px; bottom: 20px; left: 21px; }
  .intro-art-ring { top: 15%; right: 1%; width: 78%; }
  .intro-chip-site { left: 3%; }.intro-chip-brand { right: 2%; }.intro-chip-growth { left: 4%; }
}

@media (max-width: 390px) {
  .intro-art-card { min-height: 440px; }
  .intro-art-top > span { font-size: 6px; }
  .intro-chip-brand { display: none; }
  .intro-art-message strong { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-art-image, .intro-art-scan, .intro-art-ring i, .intro-art-top > span i,
  .intro-art-chip { animation: none !important; }
}

/* Premium light investment section with stronger value hierarchy. */
.pricing-section { position: relative; overflow: hidden; color: #17191e; background: #ffffff; border-block: 1px solid rgba(20,23,28,.07); }
.pricing-section::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(20,23,28,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,23,28,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, black 29%, black 77%, transparent); }
.pricing-section::after { content: ""; position: absolute; top: -250px; right: -210px; width: 570px; height: 570px; border: 1px solid rgba(255,106,0,.18); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,106,0,.025), 0 0 0 104px rgba(255,106,0,.014), 0 0 90px rgba(255,106,0,.055); }
.pricing-section > .shell { position: relative; z-index: 1; }
.pricing-section .pricing-intro { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .62fr); align-items: end; gap: clamp(50px, 8vw, 108px); }
.pricing-heading .section-kicker { margin-bottom: 18px; color: var(--orange-deep); }
.pricing-heading h2 { max-width: 720px; color: #17191e; }
.pricing-intro-copy > p { max-width: 450px; margin: 0; color: #626871; font-size: 14px; line-height: 1.75; }
.pricing-intro-proof { display: grid; gap: 9px; margin-top: 21px; }
.pricing-intro-proof span { display: flex; align-items: center; gap: 8px; color: #3e434b; font-size: 9px; font-weight: 750; }
.pricing-intro-proof svg { flex: none; color: var(--orange-deep); }

.pricing-section .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; margin-top: 72px; }
.pricing-section .pricing-card { position: relative; display: flex; min-height: 570px; flex-direction: column; overflow: hidden; padding: 27px 25px 25px; border: 1px solid rgba(25,28,34,.105); border-radius: 21px; color: #202329; background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(248,247,243,.98)); box-shadow: 0 18px 48px rgba(26,29,34,.075), 0 2px 7px rgba(26,29,34,.035); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.pricing-section .pricing-card::before { content: ""; position: absolute; z-index: 0; top: -120px; right: -110px; width: 230px; height: 230px; border: 1px solid rgba(255,106,0,.11); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,106,0,.018); transition: transform .35s ease, border-color .35s ease; }
.pricing-section .pricing-card::after { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 2px; opacity: .48; background: linear-gradient(90deg, transparent, rgba(255,106,0,.8), transparent); }
.pricing-section .pricing-card:hover { border-color: rgba(255,106,0,.38); box-shadow: 0 28px 65px rgba(38,32,27,.13), 0 0 30px rgba(255,106,0,.045); transform: translateY(-7px); }
.pricing-section .pricing-card:hover::before { border-color: rgba(255,106,0,.25); transform: scale(1.12); }
.pricing-section .pricing-card.is-featured { border-color: rgba(255,106,0,.58); color: #202329; background: radial-gradient(circle at 83% 10%, rgba(255,106,0,.13), transparent 28%), linear-gradient(155deg, #fffaf5, #ffffff 70%); box-shadow: 0 30px 76px rgba(74,49,30,.16), 0 0 0 1px rgba(255,106,0,.055), 0 0 42px rgba(255,106,0,.075); transform: translateY(-12px); }
.pricing-section .pricing-card.is-featured:hover { transform: translateY(-17px); }
.pricing-section .popular-label { top: 15px; right: 15px; left: auto; z-index: 3; padding: 7px 10px; border: 1px solid rgba(255,190,140,.26); color: #fff4ec; background: linear-gradient(90deg, #e84d00, #ff7417); box-shadow: 0 9px 22px rgba(232,77,0,.22); font-size: 7px; }
.plan-header { position: relative; z-index: 1; min-height: 145px; }
.pricing-card .plan-meta { display: flex; align-items: center; gap: 9px; }
.pricing-card .plan-meta > span { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.pricing-card .plan-meta > small { margin: 0; color: #747b85; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pricing-card.is-featured .plan-meta > small { color: #676d75; }
.pricing-card .plan-header h3 { margin: 22px 0 10px; color: #181b20; font-size: 22px; font-weight: 720; line-height: 1; letter-spacing: -.045em; }
.pricing-card .plan-header > p { max-width: 245px; margin: 0; color: #6e747d; font-size: 10px; font-weight: 500; line-height: 1.55; }
.pricing-card.is-featured .plan-header > p { color: #666c74; }
.pricing-card .price-panel { position: relative; z-index: 1; margin: 22px -10px 0; padding: 19px 10px 18px; border-block: 1px solid rgba(25,28,34,.09); background: linear-gradient(90deg, transparent, rgba(255,106,0,.045), transparent); text-align: center; }
.pricing-card.is-featured .price-panel { border-color: rgba(255,106,0,.16); background: linear-gradient(90deg, rgba(255,106,0,.01), rgba(255,106,0,.095), rgba(255,106,0,.01)); }
.pricing-card .price-panel > small { display: block; margin: 0 0 2px; color: #7d848e; font-size: 7px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.pricing-card.is-featured .price-panel > small { color: #696f77; }
.pricing-card .price { display: flex; align-items: flex-start; justify-content: center; margin: 0; color: #181b20; letter-spacing: -.075em; white-space: nowrap; }
.pricing-card .price span { margin-top: 14px; color: var(--orange-deep); font-size: 14px; font-weight: 900; letter-spacing: -.03em; }
.pricing-card .price strong { font-size: clamp(54px, 4.2vw, 66px); font-weight: 760; line-height: .94; }
.pricing-card.is-featured .price strong { font-size: clamp(59px, 4.5vw, 72px); text-shadow: 0 0 28px rgba(255,106,0,.16); }
.pricing-card .price sup { margin-top: 11px; color: var(--orange-deep); font-size: 15px; font-weight: 900; letter-spacing: -.03em; }
.pricing-card .price-panel > em { display: block; margin-top: 5px; color: #6f7680; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pricing-card.is-featured .price-panel > em { color: #737983; }
.pricing-section .plan-time { position: relative; z-index: 1; margin-top: 15px; color: #737983; }
.pricing-section .plan-time svg { color: var(--orange-deep); }
.plan-includes { position: relative; z-index: 1; margin: 21px 0 0; color: #747b84; font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pricing-section .pricing-card ul { position: relative; z-index: 1; gap: 10px; margin: 12px 0 auto; padding: 0; border: 0; }
.pricing-section .pricing-card li { color: #4e545c; font-size: 9px; }
.pricing-section .pricing-card li svg { color: var(--orange-deep); }
.pricing-section .pricing-card .button { position: relative; z-index: 1; min-height: 46px; margin-top: 25px; border-radius: 10px; }
.pricing-section .pricing-card .button-outline { border-color: rgba(25,28,34,.17); color: #1e2126; background: rgba(255,255,255,.7); }
.pricing-section .pricing-card .button-outline:hover { border-color: rgba(255,106,0,.5); color: var(--orange-deep); background: rgba(255,106,0,.055); }
.pricing-section .pricing-card.is-featured .button-primary { box-shadow: 0 13px 30px rgba(232,77,0,.2); }

.pricing-assurances { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; overflow: hidden; border: 1px solid rgba(25,28,34,.09); border-radius: 15px; background: rgba(255,255,255,.62); box-shadow: 0 13px 38px rgba(28,31,35,.045); }
.pricing-assurances > div { display: flex; min-height: 91px; align-items: center; gap: 13px; padding: 19px 22px; border-right: 1px solid rgba(25,28,34,.09); }
.pricing-assurances > div:last-child { border-right: 0; }
.pricing-assurances svg { flex: none; color: var(--orange); }
.pricing-assurances strong, .pricing-assurances small { display: block; }
.pricing-assurances strong { color: #25282d; font-size: 10px; }
.pricing-assurances small { margin-top: 5px; color: #757b84; font-size: 8px; }
.pricing-section .pricing-note { justify-content: center; max-width: 900px; margin-top: 25px; color: #676d75; }
.pricing-section .pricing-note svg { color: var(--orange); }

@media (max-width: 1120px) {
  .pricing-section .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .pricing-section .pricing-card.is-featured { transform: none; }
  .pricing-section .pricing-card.is-featured:hover { transform: translateY(-7px); }
  .pricing-card .price strong { font-size: 64px; }.pricing-card.is-featured .price strong { font-size: 68px; }
}

@media (max-width: 780px) {
  .pricing-section .pricing-intro { grid-template-columns: 1fr; gap: 27px; }
  .pricing-section .pricing-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .pricing-section .pricing-card { min-height: 0; padding: 25px 23px; }
  .plan-header { min-height: 0; }
  .pricing-card .price strong, .pricing-card.is-featured .price strong { font-size: 67px; }
  .pricing-assurances { grid-template-columns: 1fr; }
  .pricing-assurances > div { border-right: 0; border-bottom: 1px solid rgba(25,28,34,.09); }
  .pricing-assurances > div:last-child { border-bottom: 0; }
  .pricing-section .pricing-note { text-align: left; }
}

@media (max-width: 390px) {
  .pricing-card .price strong, .pricing-card.is-featured .price strong { font-size: 60px; }
  .pricing-section .pricing-card { padding-inline: 20px; }
}

/* Premium founder portrait using the supplied transparent photo. */
.founder-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 62%, rgba(255,106,0,.12), transparent 25%),
    radial-gradient(circle at 89% 18%, rgba(255,255,255,.035), transparent 23%),
    #12151a;
}
.founder-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
  pointer-events: none;
}
.founder-section .founder-grid {
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
  gap: clamp(54px, 8vw, 112px);
}
.founder-portrait {
  isolation: isolate;
  min-height: 560px;
  margin: 0;
  border-color: rgba(255,255,255,.14);
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,106,0,.29), transparent 28%),
    linear-gradient(145deg, #20242b 0%, #101318 48%, #07080a 100%);
  box-shadow: 0 36px 88px rgba(0,0,0,.38), 0 0 0 1px rgba(255,106,0,.035) inset;
}
.founder-portrait::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -22%;
  right: -33%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,139,57,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,106,0,.028), 0 0 0 76px rgba(255,106,0,.015);
  pointer-events: none;
}
.founder-portrait::after {
  content: "";
  position: absolute;
  z-index: 7;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,116,23,.9), transparent);
  box-shadow: 0 0 20px rgba(255,106,0,.4);
}
.founder-portrait .portrait-grid {
  z-index: 0;
  opacity: .25;
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 44%, black, transparent 79%);
}
.founder-portrait .portrait-glow {
  z-index: 1;
  top: 13%;
  left: 50%;
  width: 68%;
  height: auto;
  aspect-ratio: 1;
  border-color: rgba(255,122,31,.37);
  box-shadow: 0 0 0 23px rgba(255,106,0,.055), 0 0 0 47px rgba(255,106,0,.026), 0 0 90px rgba(255,106,0,.25);
  transform: translateX(-50%);
}
.founder-orbit {
  position: absolute;
  z-index: 2;
  top: 15%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.founder-orbit i {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  animation: founder-orbit-spin 18s linear infinite;
}
.founder-orbit i::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-light);
  box-shadow: 0 0 20px 5px rgba(255,106,0,.55);
}
.founder-portrait .portrait-code {
  z-index: 6;
  top: 23px;
  left: 23px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a7adb6;
}
.founder-portrait .portrait-code::before {
  content: "";
  width: 21px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.portrait-status {
  position: absolute;
  z-index: 6;
  top: 17px;
  right: 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(104,231,169,.19);
  border-radius: 999px;
  color: #b6bec7;
  background: rgba(7,10,13,.58);
  backdrop-filter: blur(12px);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.portrait-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70e8ab;
  box-shadow: 0 0 11px #70e8ab;
  animation: founder-status-pulse 1.9s ease-in-out infinite;
}
.founder-photo {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: -8%;
  display: block;
  width: 116%;
  height: calc(100% - 34px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.32));
  transform-origin: center bottom;
  transition: transform .45s cubic-bezier(.2,.75,.25,1);
}
.founder-portrait:hover .founder-photo { transform: scale(1.012); }
.founder-photo-fade {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(7,8,10,.9) 91%);
  pointer-events: none;
}
.founder-photo-caption {
  position: absolute;
  z-index: 6;
  right: 19px;
  bottom: 18px;
  left: 19px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: rgba(9,11,14,.64);
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
}
.founder-photo-caption small, .founder-photo-caption strong { display: block; }
.founder-photo-caption small { color: var(--orange-light); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.founder-photo-caption strong { margin-top: 5px; color: white; font-size: 18px; font-weight: 720; letter-spacing: -.035em; }
.founder-card-mark { color: #777e88; font-size: 7px; font-weight: 900; letter-spacing: .16em; white-space: nowrap; }

@keyframes founder-orbit-spin { to { transform: rotate(360deg); } }
@keyframes founder-status-pulse { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

@media (max-width: 1120px) {
  .founder-section .founder-grid { grid-template-columns: minmax(355px, .9fr) minmax(0, 1.1fr); gap: 48px; }
  .founder-portrait { min-height: 535px; }
}

@media (max-width: 780px) {
  .founder-section .founder-grid { grid-template-columns: 1fr; gap: 42px; }
  .founder-portrait { min-height: 500px; border-radius: 22px; }
  .founder-photo { left: -4%; width: 108%; height: calc(100% - 31px); }
}

@media (max-width: 390px) {
  .founder-portrait { min-height: 455px; }
  .founder-photo { left: -7%; width: 114%; }
  .founder-photo-caption { right: 14px; bottom: 14px; left: 14px; padding: 12px 13px; }
  .founder-photo-caption strong { font-size: 16px; }
  .founder-card-mark { display: none; }
  .portrait-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .founder-orbit i, .portrait-status i { animation: none !important; }
  .founder-photo { transition: none; }
}

/* Keep the founder commitments aligned in one horizontal row. */
.founder-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
}
.founder-list li {
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  padding: 11px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  line-height: 1.35;
  text-align: left;
}
.founder-list li span { min-width: 0; }
.founder-list li svg { flex: none; }

@media (max-width: 780px) {
  .founder-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .founder-list li { flex-direction: column; gap: 7px; min-height: 82px; padding: 10px 7px; font-size: 9px; text-align: center; }
}

@media (max-width: 390px) {
  .founder-list li { min-height: 86px; padding-inline: 5px; font-size: 8px; }
}

/* Unified mobile alignment: center content without changing the desktop layout. */
@media (max-width: 780px) {
  .mobile-menu nav a,
  .hero-copy,
  .intro-copy,
  .section-heading,
  .projects-head,
  .project-copy,
  .benefit-card,
  .responsive-copy,
  .process-intro,
  .timeline-item,
  .pricing-intro,
  .pricing-card,
  .founder-copy,
  .testimonial-intro,
  .testimonial-placeholder,
  .faq-intro,
  .faq-list,
  .final-cta-copy,
  .site-footer { text-align: center; }

  .eyebrow,
  .section-kicker { justify-content: center; }

  .hero-kicker-row { justify-content: center; align-items: center; }
  .hero-lead,
  .hero-trust,
  .intro-copy > p:not(.section-kicker),
  .section-heading > p,
  .service-card p,
  .project-copy dd,
  .benefit-card p,
  .responsive-copy > p:not(.section-kicker),
  .process-intro > p:not(.section-kicker),
  .timeline-item p,
  .pricing-intro-copy > p,
  .pricing-card .plan-header > p,
  .founder-copy > p:not(.section-kicker),
  .testimonial-intro > p:not(.section-kicker),
  .testimonial-placeholder > p,
  .faq-intro > p:not(.section-kicker),
  .faq-list details p,
  .final-cta-copy > p:not(.section-kicker),
  .footer-brand-area p { margin-right: auto; margin-left: auto; }

  .hero-trust,
  .check-list li,
  .responsive-proof span,
  .pricing-intro-proof span,
  .pricing-section .plan-time,
  .pricing-section .pricing-card li,
  .pricing-assurances > div,
  .cta-benefits,
  .cta-benefits span,
  .testimonial-placeholder > div { justify-content: center; }

  .trust-item { justify-content: center; text-align: center; }

  .check-list { justify-items: center; }
  .check-list li { max-width: 490px; text-align: center; }

  .service-card { align-items: center; text-align: center; }
  .service-card-top { width: 100%; justify-content: center; gap: 18px; }
  .service-card > a,
  .text-link { margin-right: auto; margin-left: auto; }

  .store-strip {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .store-strip p { grid-column: auto; grid-row: auto; max-width: 500px; margin-inline: auto; }
  .store-mark { justify-content: center; }

  .intro-art-message { text-align: center; }
  .intro-art-message strong { margin-inline: auto; }
  .intro-art-footer { justify-content: center; }

  .project-filters,
  .project-service-tags { justify-content: center; }
  .project-copy dl div { grid-template-columns: 1fr; gap: 7px; }
  .project-copy dt,
  .project-copy dd { text-align: center; }

  .benefit-card > div { justify-content: center; gap: 18px; }
  .benefit-card p { margin-inline: auto; }

  .responsive-proof { justify-items: center; }
  .device-ui { text-align: center; }
  .device-ui > span { margin-right: auto; margin-left: auto; }

  .timeline-number { margin-inline: auto; }
  .timeline-item p { margin-inline: auto; }

  .pricing-heading h2,
  .pricing-intro-copy > p,
  .pricing-card .plan-header > p { margin-inline: auto; }
  .pricing-card .plan-meta { justify-content: center; }
  .pricing-section .pricing-card ul { justify-items: center; }
  .pricing-section .pricing-card li { text-align: center; }
  .pricing-assurances > div { text-align: center; }
  .pricing-section .pricing-note {
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
  }

  .founder-photo-caption { justify-content: center; text-align: center; }
  .founder-card-mark { display: none; }

  .quote-mark { text-align: center; }

  .faq-list summary {
    position: relative;
    justify-content: center;
    padding-right: 42px;
    padding-left: 42px;
    text-align: center;
  }
  .faq-list summary span { position: absolute; right: 2px; }
  .faq-list details p { margin-right: auto; margin-left: auto; text-align: center; }

  .cta-benefits { align-items: center; }

  .footer-grid > div,
  .footer-bottom { text-align: center; }
  .footer-brand-area .brand { justify-content: center; margin-inline: auto; }
  .footer-contact { justify-items: center; }
  .footer-bottom { align-items: center; }
  .footer-bottom div { flex-wrap: wrap; justify-content: center; }
}

/* Fixed 30px lateral breathing room across the mobile layout. */
@media (max-width: 780px) {
  .shell {
    width: 100%;
    max-width: none;
    padding-right: 30px;
    padding-left: 30px;
  }

  .mobile-menu {
    right: 30px;
    left: 30px;
  }
}

/* Keep every investment card centered, legible and visually balanced. */
.pricing-section .pricing-card .plan-header {
  text-align: center;
}

.pricing-section .pricing-card .plan-meta {
  justify-content: center;
}

.pricing-section .pricing-card .plan-meta > small,
.pricing-section .pricing-card.is-featured .plan-meta > small {
  color: #676d75;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pricing-section .pricing-card .plan-header > p,
.pricing-section .pricing-card.is-featured .plan-header > p {
  min-height: 4.65em;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  color: #666c74;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

.pricing-section .pricing-card .plan-time {
  justify-content: center;
  text-align: center;
}

.pricing-section .pricing-card .plan-includes {
  font-size: 9px;
  letter-spacing: .12em;
  text-align: center;
}

.pricing-section .pricing-card ul {
  justify-items: center;
  gap: 12px;
}

.pricing-section .pricing-card li {
  justify-content: center;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

/* Premium responsive showcase: a dark product studio inside the white section. */
.responsive-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 106, 0, .08), transparent 18%),
    radial-gradient(circle at 9% 91%, rgba(255, 106, 0, .04), transparent 23%),
    #fff;
}

.responsive-showcase {
  position: relative;
  min-height: 525px;
  isolation: isolate;
}

.responsive-showcase::before {
  position: absolute;
  z-index: 0;
  inset: 36px 0 17px 3%;
  border: 1px solid rgba(14, 17, 23, .09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 77% 21%, rgba(255, 111, 22, .28), transparent 19%),
    radial-gradient(circle at 27% 79%, rgba(255, 106, 0, .12), transparent 26%),
    linear-gradient(138deg, #171a20 4%, #090b0f 62%, #12161c);
  box-shadow: 0 31px 70px rgba(16, 20, 27, .21), inset 0 1px rgba(255, 255, 255, .08);
  content: "";
}

.responsive-showcase::after {
  position: absolute;
  z-index: 1;
  top: 36px;
  right: 0;
  bottom: 17px;
  left: 3%;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(140deg, transparent 4%, black 32%, black 73%, transparent 100%);
  opacity: .68;
  pointer-events: none;
  content: "";
}

.responsive-stage-grid {
  position: absolute;
  z-index: 2;
  top: 76px;
  right: 2%;
  width: 45%;
  height: 55%;
  border: 1px solid rgba(255, 133, 50, .2);
  background-image:
    linear-gradient(rgba(255, 133, 50, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 133, 50, .11) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(850px) rotateY(-13deg) rotateX(3deg);
  mask-image: linear-gradient(90deg, transparent, black 26%, black 79%, transparent);
  opacity: .75;
}

.responsive-stage-orbit {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 129, 39, .3);
  border-radius: 50%;
  pointer-events: none;
}

.responsive-stage-orbit::after {
  position: absolute;
  top: 50%;
  right: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8c43;
  box-shadow: 0 0 16px 4px rgba(255, 106, 0, .52);
  content: "";
}

.responsive-stage-orbit.orbit-a {
  top: 62px;
  right: 8%;
  width: 350px;
  height: 350px;
  box-shadow: 0 0 0 28px rgba(255, 106, 0, .028), 0 0 70px rgba(255, 106, 0, .13);
  animation: responsive-orbit 18s linear infinite;
}

.responsive-stage-orbit.orbit-b {
  top: 130px;
  right: 22%;
  width: 210px;
  height: 210px;
  border-color: rgba(255, 255, 255, .12);
  animation: responsive-orbit 23s linear infinite reverse;
}

.responsive-stage-orbit.orbit-b::after {
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 13px rgba(255, 255, 255, .72);
}

.responsive-status {
  position: absolute;
  z-index: 5;
  top: 53px;
  left: 8%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(104, 231, 169, .21);
  border-radius: 999px;
  color: #c5cad1;
  background: rgba(12, 15, 20, .64);
  box-shadow: 0 8px 21px rgba(0, 0, 0, .12);
  backdrop-filter: blur(10px);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.responsive-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #68e7a9;
  box-shadow: 0 0 11px #68e7a9;
  animation: responsive-status-pulse 1.8s ease-in-out infinite;
}

.responsive-browser {
  position: absolute;
  z-index: 4;
  top: 102px;
  left: 7%;
  width: 73%;
  height: 304px;
  padding: 7px;
  border: 7px solid #252a30;
  border-radius: 16px 16px 5px 5px;
  background: linear-gradient(160deg, #373d45, #171a20);
  box-shadow: 0 29px 55px rgba(0, 0, 0, .41), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transform: perspective(1000px) rotateY(3deg) rotateX(1deg);
}

.responsive-browser::after {
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -28px;
  left: -8%;
  height: 20px;
  border-radius: 3px 3px 13px 13px;
  background: linear-gradient(90deg, #282d33, #707780 52%, #282d33);
  box-shadow: 0 9px 12px rgba(0, 0, 0, .17);
  content: "";
}

.responsive-browser::before {
  position: absolute;
  z-index: -2;
  right: 8%;
  bottom: -62px;
  left: 8%;
  height: 45px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .19);
  filter: blur(10px);
  content: "";
}

.responsive-browser-bar {
  display: flex;
  height: 24px;
  align-items: center;
  gap: 9px;
  padding: 0 7px 4px;
  color: #969ca6;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
}

.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #535961; }
.browser-dots i:first-child { background: var(--orange); }
.browser-url { max-width: 145px; overflow: hidden; color: #737983; text-overflow: ellipsis; white-space: nowrap; }
.responsive-browser-bar b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #83e7b0; font-size: 6px; }

.responsive-browser-canvas {
  position: relative;
  height: calc(100% - 21px);
  overflow: hidden;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(130deg, #13171d, #08090c);
}

.responsive-browser-canvas::after {
  position: absolute;
  right: -14%;
  bottom: -42%;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 106, 0, .45);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255, 106, 0, .055), 0 0 0 29px rgba(255, 106, 0, .03);
  content: "";
}

.canvas-nav {
  position: relative;
  z-index: 2;
  display: flex;
  height: 37px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #f4f5f6;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.canvas-mark {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  color: white;
  background: linear-gradient(135deg, var(--orange), #e64700);
  font-size: 7px;
  letter-spacing: -.08em;
}

.canvas-nav > i { width: 20px; height: 3px; margin-left: auto; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.canvas-nav > i + i { width: 15px; margin-left: 0; }.canvas-nav > i + i + i { width: 22px; margin-left: 0; background: var(--orange); }

.canvas-hero {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 143px;
  grid-template-columns: 1fr .56fr;
  padding: 23px 25px 16px;
}

.canvas-hero small { color: #ff974c; font-size: 6px; font-weight: 900; letter-spacing: .17em; }
.canvas-hero strong { display: block; margin-top: 10px; color: white; font-size: clamp(18px, 2vw, 27px); font-weight: 760; line-height: .93; letter-spacing: -.07em; }
.canvas-hero em, .responsive-tablet-screen em, .responsive-phone-screen em { color: var(--orange); font-style: normal; }
.canvas-hero > div:first-child > span { display: block; width: 37%; height: 5px; margin-top: 13px; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.canvas-hero > div:first-child > span + span { width: 26%; margin-top: 7px; background: rgba(255, 106, 0, .75); }

.canvas-orb {
  position: relative;
  justify-self: end;
  width: 106px;
  height: 106px;
  margin-top: 4px;
  border: 1px solid rgba(255, 132, 47, .48);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(255, 106, 0, .05), 0 0 42px rgba(255, 106, 0, .22);
}

.canvas-orb::before {
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: inherit;
  content: "";
}

.canvas-orb i { position: absolute; top: -4px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #ff954d; box-shadow: 0 0 13px 3px rgba(255, 106, 0, .7); }
.canvas-orb b { position: absolute; top: 50%; left: 50%; color: #fff; font-size: 19px; font-weight: 750; letter-spacing: -.08em; transform: translate(-50%, -50%); }

.canvas-cards { position: absolute; z-index: 3; right: 25px; bottom: 16px; left: 25px; display: grid; grid-template-columns: 1.35fr 1fr .72fr; gap: 7px; }
.canvas-cards i { height: 30px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025)); }.canvas-cards i:nth-child(2) { background: linear-gradient(135deg, rgba(255, 106, 0, .25), rgba(255, 106, 0, .035)); }.canvas-cards i:nth-child(3) { background: rgba(255, 255, 255, .055); }

.responsive-browser-stand { position: absolute; z-index: -1; bottom: -46px; left: 50%; width: 88px; height: 26px; border: 1px solid #262b31; border-bottom: 0; background: linear-gradient(90deg, #1c2026, #4a5159, #1c2026); clip-path: polygon(36% 0, 64% 0, 91% 100%, 9% 100%); transform: translateX(-50%); }

.responsive-tablet {
  position: absolute;
  z-index: 6;
  right: 1%;
  bottom: 42px;
  width: 172px;
  height: 223px;
  padding: 7px;
  border: 7px solid #252a31;
  border-radius: 15px;
  background: #252a31;
  box-shadow: 0 21px 48px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transform: rotate(7deg);
  animation: responsive-tablet-float 6.4s ease-in-out infinite;
}

.responsive-tablet-screen {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 19px 14px;
  overflow: hidden;
  border-radius: 6px;
  color: white;
  background: radial-gradient(circle at 75% 18%, rgba(255, 106, 0, .38), transparent 21%), linear-gradient(135deg, #1a1e24, #090b0f);
}

.responsive-tablet-screen span { color: #ff984e; font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.responsive-tablet-screen strong { margin-top: 22px; font-size: 19px; font-weight: 760; line-height: .95; letter-spacing: -.07em; }
.responsive-tablet-screen > i { width: 47%; height: 5px; margin-top: auto; border-radius: 99px; background: rgba(255, 255, 255, .16); }.responsive-tablet-screen > i + i { width: 31%; margin-top: 7px; background: var(--orange); }

.responsive-phone {
  position: absolute;
  z-index: 7;
  bottom: 20px;
  left: 1%;
  width: 104px;
  height: 202px;
  padding: 7px;
  border: 7px solid #1d2127;
  border-radius: 19px;
  background: #1d2127;
  box-shadow: 0 18px 43px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transform: rotate(-7deg);
  animation: responsive-phone-float 5.6s ease-in-out infinite;
}

.responsive-phone-notch { position: absolute; z-index: 3; top: 8px; left: 50%; width: 31px; height: 5px; border-radius: 0 0 5px 5px; background: #1d2127; transform: translateX(-50%); }
.responsive-phone-screen { display: flex; height: 100%; flex-direction: column; padding: 20px 11px 12px; overflow: hidden; border-radius: 10px; color: white; background: radial-gradient(circle at 80% 22%, rgba(255, 106, 0, .42), transparent 19%), linear-gradient(145deg, #161b21, #07090c); }
.responsive-phone-screen small { color: #ff984e; font-size: 5px; font-weight: 900; letter-spacing: .15em; }.responsive-phone-screen strong { margin-top: 20px; font-size: 15px; font-weight: 760; line-height: .87; letter-spacing: -.075em; }.responsive-phone-screen span { width: 52%; height: 4px; margin-top: auto; border-radius: 99px; background: var(--orange); }

.responsive-callout {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  color: #f1f3f6;
  background: linear-gradient(140deg, rgba(29, 33, 40, .9), rgba(11, 13, 17, .75));
  box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}

.responsive-callout svg { color: #ff9d57; }
.responsive-callout span { display: grid; gap: 3px; }.responsive-callout small { color: #858c96; font-size: 6px; font-weight: 900; letter-spacing: .15em; }.responsive-callout b { color: #f5f6f7; font-size: 8px; letter-spacing: -.015em; }
.responsive-callout-desktop { right: 17%; bottom: 30px; animation: responsive-callout-float 6.8s ease-in-out infinite; }.responsive-callout-mobile { top: 71px; right: 5%; animation: responsive-callout-float 6.2s ease-in-out -1.5s infinite; }

@keyframes responsive-orbit { to { transform: rotate(360deg); } }
@keyframes responsive-status-pulse { 0%, 100% { opacity: .52; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes responsive-tablet-float { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-8px); } }
@keyframes responsive-phone-float { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-7px); } }
@keyframes responsive-callout-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 1120px) {
  .responsive-browser { left: 4%; width: 77%; }
  .responsive-tablet { right: -2%; }
  .responsive-phone { left: -2%; }
  .responsive-callout-mobile { right: 0; }
}

@media (max-width: 780px) {
  .responsive-showcase { min-height: 444px; width: min(100%, 460px); margin-inline: auto; }
  .responsive-showcase::before { inset: 27px 0 7px; border-radius: 23px; }
  .responsive-showcase::after { top: 27px; right: 0; bottom: 7px; left: 0; border-radius: 23px; background-size: 34px 34px; }
  .responsive-status { top: 41px; left: 6%; padding: 6px 8px; font-size: 6px; }
  .responsive-stage-grid { top: 55px; right: -9%; width: 57%; height: 54%; background-size: 20px 20px; }
  .responsive-stage-orbit.orbit-a { top: 61px; right: 0; width: 260px; height: 260px; }.responsive-stage-orbit.orbit-b { top: 122px; right: 17%; width: 155px; height: 155px; }
  .responsive-browser { top: 81px; left: 8%; width: 74%; height: 220px; padding: 5px; border-width: 5px; border-radius: 11px 11px 4px 4px; }
  .responsive-browser::after { bottom: -18px; height: 13px; border-radius: 3px 3px 8px 8px; }.responsive-browser::before { bottom: -47px; }
  .responsive-browser-bar { height: 18px; gap: 6px; padding: 0 4px 3px; }.browser-dots { gap: 3px; }.browser-dots i { width: 4px; height: 4px; }.responsive-browser-bar b { font-size: 5px; }.responsive-browser-bar b svg { width: 9px; }.browser-url { max-width: 94px; font-size: 5px; }
  .canvas-nav { height: 28px; gap: 4px; padding: 0 8px; font-size: 5px; }.canvas-mark { width: 13px; height: 13px; border-radius: 4px; font-size: 5px; }.canvas-nav > i { width: 12px; height: 2px; }.canvas-nav > i + i { width: 9px; }.canvas-nav > i + i + i { width: 13px; }
  .canvas-hero { min-height: 102px; padding: 15px 16px 12px; }.canvas-hero small { font-size: 4px; }.canvas-hero strong { margin-top: 7px; font-size: 17px; }.canvas-hero > div:first-child > span { height: 4px; margin-top: 9px; }.canvas-hero > div:first-child > span + span { margin-top: 5px; }
  .canvas-orb { width: 70px; height: 70px; margin-top: 1px; box-shadow: 0 0 0 9px rgba(255, 106, 0, .05), 0 0 28px rgba(255, 106, 0, .2); }.canvas-orb::before { inset: 13px; }.canvas-orb i { width: 5px; height: 5px; top: -3px; right: 7px; }.canvas-orb b { font-size: 13px; }
  .canvas-cards { right: 16px; bottom: 11px; left: 16px; gap: 5px; }.canvas-cards i { height: 22px; border-radius: 4px; }
  .responsive-browser-stand { bottom: -34px; width: 63px; height: 18px; }
  .responsive-tablet { right: 0; bottom: 20px; width: 129px; height: 168px; padding: 5px; border-width: 5px; border-radius: 11px; }.responsive-tablet-screen { padding: 13px 10px; border-radius: 5px; }.responsive-tablet-screen span { font-size: 5px; }.responsive-tablet-screen strong { margin-top: 15px; font-size: 14px; }.responsive-tablet-screen > i { height: 4px; }.responsive-tablet-screen > i + i { margin-top: 5px; }
  .responsive-phone { bottom: 9px; left: -1%; width: 79px; height: 153px; padding: 5px; border-width: 5px; border-radius: 15px; }.responsive-phone-notch { top: 5px; width: 24px; height: 4px; }.responsive-phone-screen { padding: 14px 8px 8px; border-radius: 8px; }.responsive-phone-screen small { font-size: 4px; }.responsive-phone-screen strong { margin-top: 15px; font-size: 11px; }.responsive-phone-screen span { height: 3px; }
  .responsive-callout { padding: 7px 8px; gap: 6px; border-radius: 8px; }.responsive-callout svg { width: 12px; }.responsive-callout small { font-size: 5px; }.responsive-callout b { font-size: 7px; }.responsive-callout-mobile { top: 59px; right: 2%; }.responsive-callout-desktop { right: 13%; bottom: 10px; }
}

@media (max-width: 390px) {
  .responsive-showcase { min-height: 408px; }
  .responsive-browser { top: 76px; height: 197px; }.canvas-hero { min-height: 92px; }.canvas-hero strong { font-size: 15px; }.canvas-orb { width: 61px; height: 61px; }.canvas-cards i { height: 18px; }
  .responsive-tablet { width: 114px; height: 149px; bottom: 18px; }.responsive-phone { width: 70px; height: 136px; }.responsive-callout { display: none; }.responsive-status { left: 5%; }
}

@media (prefers-reduced-motion: reduce) {
  .responsive-stage-orbit,
  .responsive-status i,
  .responsive-tablet,
  .responsive-phone,
  .responsive-callout { animation: none !important; }
}

/* More informative responsive copy, without losing the section's clean rhythm. */
.responsive-copy .responsive-detail {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 3px 0 3px 15px;
  border-left: 2px solid var(--orange);
  color: #555b63;
  font-size: 12px;
  line-height: 1.7;
}

.responsive-copy .responsive-detail > span {
  color: var(--orange-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.responsive-proof {
  gap: 13px;
  margin-top: 31px;
}

.responsive-proof-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18, 22, 27, .1);
}

.responsive-proof-item:last-child { border-bottom: 0; }

.responsive-proof-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 106, 0, .34);
  border-radius: 9px;
  color: var(--orange-deep);
  background: rgba(255, 106, 0, .055);
}

.responsive-proof-item > div { display: grid; gap: 4px; padding-top: 1px; }
.responsive-proof-item b { color: #252a30; font-size: 12px; font-weight: 800; line-height: 1.28; }
.responsive-proof-item small { color: #676d75; font-size: 11px; line-height: 1.55; }

@media (max-width: 780px) {
  .responsive-copy .responsive-detail {
    justify-items: center;
    margin-top: 19px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(18, 22, 27, .12);
    border-left: 0;
    text-align: center;
  }

  .responsive-proof { justify-items: stretch; }
  .responsive-proof-item { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 15px 4px; text-align: center; }
  .responsive-proof-item > div { justify-items: center; }.responsive-proof-item small { max-width: 390px; }
}

/* Social-proof case card for the featured Beleza Natural project. */
.testimonial-card {
  min-height: 395px;
  border-style: solid;
  border-color: #d8d9d6;
  background:
    radial-gradient(circle at 87% 17%, rgba(255, 106, 0, .13), transparent 22%),
    linear-gradient(135deg, #fff 3%, #f3f2ee 100%);
  box-shadow: 0 25px 56px rgba(28, 32, 37, .11);
}

.testimonial-card::after {
  border-color: rgba(255, 106, 0, .27);
  box-shadow: 0 0 0 25px rgba(255, 106, 0, .045), 0 0 45px rgba(255, 106, 0, .08);
}

.testimonial-card-top {
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(21, 24, 29, .1);
}

.testimonial-card-top > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #31363d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.testimonial-card-top > span svg { color: var(--orange-deep); }
.testimonial-card-top > small { margin: 0; color: #9a6a48; font-size: 7px; font-weight: 900; letter-spacing: .13em; }

.testimonial-card .quote-mark { position: relative; z-index: 1; margin-top: 25px; }
.testimonial-card > .testimonial-copy {
  position: relative;
  z-index: 1;
  max-width: 490px;
  margin: 19px 0 26px;
  color: #343941;
  font-size: 15px;
  font-weight: 570;
  line-height: 1.75;
}

.testimonial-person { gap: 12px; }
.testimonial-brand-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 5px;
  border-color: rgba(213, 163, 60, .55);
  border-radius: 13px;
  background: radial-gradient(circle at 35% 25%, #303238, #0c0e12 76%);
  box-shadow: 0 10px 20px rgba(25, 23, 17, .24), inset 0 1px rgba(255, 255, 255, .1);
}

.testimonial-brand-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .42));
}

.testimonial-person b { color: #20242a; font-size: 12px; }
.testimonial-person small { color: #747a83; font-size: 10px; }

.testimonial-project-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--orange-deep);
  color: #24292f;
  font-size: 10px;
  font-weight: 900;
}

.testimonial-project-link svg { color: var(--orange-deep); transition: transform .2s ease; }
.testimonial-project-link:hover svg { transform: translateX(4px); }

.testimonial-card > .testimonial-note {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 13px 0 0;
  color: #8c9197;
  font-size: 8px;
  line-height: 1.55;
}

@media (max-width: 780px) {
  .testimonial-card { min-height: 0; padding: 31px 24px; }
  .testimonial-card-top { gap: 10px; }.testimonial-card-top > span { font-size: 8px; }.testimonial-card-top > small { font-size: 6px; }
  .testimonial-card .quote-mark { margin-top: 23px; }
  .testimonial-card > .testimonial-copy { margin: 16px auto 24px; font-size: 14px; }
  .testimonial-person { justify-content: center; }.testimonial-project-link { margin-inline: auto; }.testimonial-card > .testimonial-note { margin-right: auto; margin-left: auto; }
}

/* Animated signature for the final Foxfy call-to-action. */
.cta-visual {
  isolation: isolate;
  perspective: 1000px;
}

.cta-stage-glow {
  position: absolute;
  z-index: -2;
  top: 12%;
  left: 12%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 109, 11, .38), rgba(255, 106, 0, .11) 42%, transparent 71%);
  filter: blur(11px);
  animation: cta-glow-breathe 5.8s ease-in-out infinite;
}

.cta-grid {
  position: absolute;
  z-index: -1;
  top: 7%;
  right: 4%;
  bottom: 7%;
  left: 4%;
  border-radius: 50%;
  background-image:
    linear-gradient(rgba(255, 133, 50, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 133, 50, .14) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle, black 2%, transparent 67%);
  opacity: .6;
  animation: cta-grid-drift 11s linear infinite;
}

.cta-ring { z-index: 1; will-change: transform; }
.ring-a { animation: cta-orbit-a 18s linear infinite; }
.ring-b { animation: cta-orbit-b 23s linear infinite; }
.cta-ring::after {
  position: absolute;
  top: 13%;
  right: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9347;
  box-shadow: 0 0 16px 4px rgba(255, 106, 0, .65);
  content: "";
}

.ring-b::after {
  top: auto;
  right: auto;
  bottom: 8%;
  left: 16%;
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 13px rgba(255, 255, 255, .72);
}

.cta-badge {
  z-index: 4;
  overflow: hidden;
  border-color: rgba(255, 157, 83, .34);
  background: linear-gradient(145deg, #2a2d33, #090b0f 72%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 106, 0, .07) inset, 0 0 34px rgba(255, 106, 0, .15);
  animation: cta-badge-float 6.2s ease-in-out infinite;
}

.cta-badge::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  content: "";
}

.cta-brand-logo {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, .4));
  animation: cta-logo-breathe 5.4s ease-in-out infinite;
}

.cta-badge-shine {
  position: absolute;
  z-index: 3;
  top: -25%;
  bottom: -25%;
  left: -45%;
  width: 30%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-20deg);
  animation: cta-badge-shine 5.7s ease-in-out infinite;
}

.cta-dot { z-index: 3; animation: cta-dot-float 4.3s ease-in-out infinite; }
.dot-b { animation-delay: -1.4s; }.dot-c { animation-delay: -2.5s; }

.cta-particle {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff9b55;
  box-shadow: 0 0 11px rgba(255, 106, 0, .72);
  animation: cta-particle-drift 5.6s ease-in-out infinite;
}

.particle-a { top: 15%; right: 26%; animation-delay: -.8s; }.particle-b { right: 7%; bottom: 28%; width: 3px; height: 3px; animation-delay: -2.3s; }.particle-c { bottom: 11%; left: 22%; width: 5px; height: 5px; animation-delay: -3.5s; }.particle-d { top: 31%; left: 12%; width: 2px; height: 2px; animation-delay: -4.6s; }

@keyframes cta-glow-breathe { 0%, 100% { opacity: .56; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes cta-grid-drift { to { background-position: 48px 48px; } }
@keyframes cta-orbit-a { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cta-orbit-b { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes cta-badge-float { 0%, 100% { transform: translate(-50%, -50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(4deg) scale(1.025); } }
@keyframes cta-logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes cta-badge-shine { 0%, 62% { left: -45%; opacity: 0; } 70% { opacity: 1; } 94%, 100% { left: 120%; opacity: 0; } }
@keyframes cta-dot-float { 0%, 100% { transform: translateY(0) scale(.78); opacity: .6; } 50% { transform: translateY(-9px) scale(1.18); opacity: 1; } }
@keyframes cta-particle-drift { 0%, 100% { transform: translateY(8px) scale(.75); opacity: .28; } 50% { transform: translateY(-10px) scale(1.22); opacity: 1; } }

@media (max-width: 780px) {
  .cta-stage-glow { top: 8%; left: 16%; width: 68%; }
  .cta-grid { background-size: 18px 18px; }
  .cta-ring::after { width: 5px; height: 5px; }.ring-b::after { width: 4px; height: 4px; }
  .particle-a { top: 11%; right: 27%; }.particle-b { right: 10%; bottom: 20%; }.particle-c { bottom: 12%; left: 25%; }.particle-d { top: 30%; left: 13%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-stage-glow,
  .cta-grid,
  .cta-ring,
  .cta-badge,
  .cta-brand-logo,
  .cta-badge-shine,
  .cta-dot,
  .cta-particle { animation: none !important; }
}

/* About page: a dedicated editorial layer that carries the Foxfy visual system forward. */
.desktop-nav a.is-current { color: #fff; }
.desktop-nav a.is-current::after { width: 100%; }
.mobile-menu a.is-current { color: var(--orange); }

.about-page { background: var(--ink); }
.about-header:not(.is-scrolled) { border-bottom-color: rgba(255,255,255,.045); }

.about-hero {
  position: relative;
  min-height: min(880px, 100svh);
  overflow: clip;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 48%, rgba(255, 92, 0, .19), transparent 27%),
    radial-gradient(circle at 17% 11%, rgba(255,255,255,.052), transparent 26%),
    linear-gradient(128deg, #07080a 0%, #0d0f14 57%, #08090b 100%);
}
.about-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .42; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, black, rgba(0,0,0,.72) 58%, transparent 100%); }
.about-hero::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 170px; pointer-events: none; background: linear-gradient(transparent, #08090b); }
.about-hero-grid { position: absolute; z-index: 0; top: 16%; right: -10%; width: min(760px, 61vw); height: 66%; border: 1px solid rgba(255,126,42,.12); background-image: linear-gradient(rgba(255,106,0,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.11) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(850px) rotateY(-18deg) rotateX(5deg); mask-image: linear-gradient(90deg, transparent, black 24%, black 80%, transparent); animation: about-grid-drift 19s linear infinite; }
.about-hero-aurora { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.aurora-one { top: 13%; right: -4%; width: min(630px, 54vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,111,22,.23), rgba(255,94,0,.06) 46%, transparent 70%); animation: about-aurora-breathe 7.2s ease-in-out infinite; }
.aurora-two { bottom: -30%; left: -8%; width: 460px; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,122,42,.11), transparent 67%); animation: about-aurora-breathe 9.1s ease-in-out infinite reverse; }
.about-star { position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: var(--orange-light); box-shadow: 0 0 14px 3px rgba(255,106,0,.72); animation: about-star-float 4.8s ease-in-out infinite; }
.about-star-a { top: 27%; left: 10%; }.about-star-b { top: 19%; right: 34%; width: 3px; height: 3px; animation-delay: -2.1s; }.about-star-c { right: 7%; bottom: 25%; width: 5px; height: 5px; animation-delay: -3.3s; }
.about-hero-layout { position: relative; z-index: 2; display: grid; min-height: min(880px, 100svh); grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr); align-items: center; gap: clamp(36px, 6vw, 84px); padding-top: 118px; padding-bottom: 86px; }
.about-hero-copy { position: relative; z-index: 3; max-width: 668px; }
.about-hero-copy .eyebrow { margin-bottom: 13px; }
.about-hero-overline { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: #7c838d; font-size: 8px; font-weight: 850; letter-spacing: .145em; }
.about-hero-overline i { width: 6px; height: 6px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 10px #70e8ab; animation: about-status-pulse 2s ease-in-out infinite; }
.about-hero h1 { max-width: 715px; font-size: clamp(49px, 5.7vw, 81px); line-height: .965; }
.about-hero h1 em { background: linear-gradient(108deg, #ff6a00 5%, #ffb46f 45%, #ff6a00 78%); background-clip: text; background-size: 220% 100%; color: transparent; animation: about-title-shimmer 6.4s ease-in-out infinite; }
.about-hero-lead { max-width: 600px; margin: 27px 0 0; color: #b8bdc5; font-size: 16px; line-height: 1.78; }
.about-hero-actions { margin-top: 31px; }
.about-hero-signature { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: #737982; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.about-hero-signature i { width: 26px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }

.about-hero-visual { position: relative; min-height: 590px; isolation: isolate; perspective: 1100px; }
.about-visual-glow { position: absolute; z-index: -2; top: 12%; left: 7%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,102,0,.26), rgba(255,102,0,.08) 44%, transparent 69%); filter: blur(10px); animation: about-visual-glow 5.8s ease-in-out infinite; }
.about-orbit { position: absolute; z-index: -1; top: 49%; left: 52%; border: 1px solid rgba(255,117,28,.32); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.about-orbit i { position: absolute; inset: -1px; border-radius: inherit; animation: about-orbit-spin 17s linear infinite; }
.about-orbit i::after { position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff994e; box-shadow: 0 0 17px 4px rgba(255,106,0,.65); content: ""; }
.about-orbit-a { width: 425px; height: 425px; box-shadow: 0 0 0 38px rgba(255,106,0,.036), 0 0 75px rgba(255,106,0,.16); }.about-orbit-b { width: 286px; height: 286px; border-color: rgba(255,255,255,.11); }.about-orbit-b i { animation-duration: 23s; animation-direction: reverse; }.about-orbit-b i::after { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.65); }
.about-foxbot { position: absolute; z-index: 1; right: -11%; bottom: -1%; width: min(610px, 112%); height: 105%; object-fit: cover; object-position: 71% center; mix-blend-mode: screen; filter: contrast(1.08) saturate(1.06) drop-shadow(0 26px 38px rgba(0,0,0,.4)); mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 84%, transparent 100%), linear-gradient(0deg, transparent, black 14%); mask-composite: intersect; animation: about-fox-float 6.7s ease-in-out infinite; }
.about-studio-card { position: absolute; z-index: 3; top: 16%; left: -2%; width: min(282px, 48%); overflow: hidden; padding: 16px; border: 1px solid rgba(255,150,69,.3); border-radius: 17px; color: #fff; background: linear-gradient(145deg, rgba(28,31,37,.94), rgba(7,9,12,.82)); box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,106,0,.05) inset; backdrop-filter: blur(15px); transform: perspective(900px) rotateY(7deg) rotateX(2deg); animation: about-card-float 6s ease-in-out infinite; }
.about-studio-card::after { position: absolute; inset: 0; opacity: .14; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.25), transparent 62%); transform: translateX(-105%); content: ""; animation: about-card-shine 6.6s ease-in-out infinite; }
.about-studio-top, .about-studio-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.about-studio-top { padding-bottom: 12px; border-bottom: 1px solid var(--line); color: #8c929b; font-size: 7px; font-weight: 900; letter-spacing: .14em; }.about-studio-top span { display: flex; align-items: center; gap: 6px; }.about-studio-top span i { width: 5px; height: 5px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 8px #70e8ab; }.about-studio-top small { color: var(--orange-light); font-size: 8px; }
.about-studio-mark { position: relative; z-index: 1; display: grid; min-height: 91px; place-items: center; margin: 17px 0 13px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: radial-gradient(circle at 36% 0%, rgba(255,126,46,.16), transparent 46%), rgba(255,255,255,.025); }.about-studio-mark img { width: 135px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)); }
.about-studio-card > p { position: relative; z-index: 1; margin: 0; color: #d4d8dd; font-size: 11px; font-weight: 630; line-height: 1.56; }
.about-studio-bottom { position: relative; z-index: 1; justify-content: flex-start; gap: 7px; margin-top: 17px; padding-top: 11px; border-top: 1px solid var(--line); color: #838993; font-size: 6px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }.about-studio-bottom i { width: 2px; height: 2px; border-radius: 50%; background: var(--orange); }
.about-status-card { position: absolute; z-index: 4; bottom: 12%; left: -3%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(16,19,24,.84); box-shadow: 0 17px 42px rgba(0,0,0,.32); backdrop-filter: blur(13px); animation: about-status-card 5.1s ease-in-out infinite; }.about-status-card > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(104,231,169,.3); border-radius: 9px; background: rgba(104,231,169,.08); }.about-status-card > span i { width: 7px; height: 7px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 10px #70e8ab; animation: about-status-pulse 1.8s ease-in-out infinite; }.about-status-card small, .about-status-card b { display: block; }.about-status-card small { color: #858b94; font-size: 7px; font-weight: 700; }.about-status-card b { margin-top: 3px; color: #f1f2f2; font-size: 10px; }
.about-signal-card { position: absolute; z-index: 3; top: 8%; right: 2%; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(255,153,75,.25); border-radius: 10px; color: #d9dde1; background: rgba(16,18,23,.76); box-shadow: 0 17px 42px rgba(0,0,0,.25); backdrop-filter: blur(12px); font-size: 8px; font-weight: 850; letter-spacing: .04em; animation: about-signal-card 6.3s ease-in-out infinite; }.about-signal-card svg { color: var(--orange-light); }
.about-scroll { position: absolute; z-index: 4; bottom: 24px; left: 50%; display: grid; justify-items: center; gap: 8px; color: #787e86; font-size: 7px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; transform: translateX(-50%); }.about-scroll i { position: relative; display: block; width: 1px; height: 29px; overflow: hidden; background: rgba(255,255,255,.13); }.about-scroll i::after { position: absolute; top: -100%; left: 0; width: 100%; height: 55%; background: var(--orange); content: ""; animation: about-scroll-line 2.1s ease-in-out infinite; }

.about-manifesto { position: relative; overflow: hidden; color: #24282f; background: #f4f3ef; }.about-manifesto::before { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 45%, transparent); content: ""; }.about-manifesto::after { position: absolute; right: -12%; bottom: -38%; width: 620px; height: 620px; border: 1px solid rgba(255,106,0,.22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,106,0,.04), 0 0 0 110px rgba(255,106,0,.02); content: ""; }
.about-manifesto-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(395px, .85fr); align-items: center; gap: clamp(55px, 9vw, 130px); }.about-manifesto-copy h2, .about-section-heading h2, .about-method-intro h2, .about-founder-copy h2, .about-closing h2 { margin: 0; font-size: clamp(39px, 4.2vw, 63px); font-weight: 740; line-height: 1.01; letter-spacing: -.056em; }.about-manifesto-copy > p:not(.section-kicker) { max-width: 580px; margin: 24px 0 0; color: #626871; font-size: 15px; line-height: 1.8; }
.about-manifesto-panel { position: relative; overflow: hidden; padding: 29px; border: 1px solid rgba(21,24,29,.12); border-radius: 18px; color: #22272e; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(236,234,228,.9)); box-shadow: 0 26px 65px rgba(25,29,35,.12); }.about-manifesto-panel::before { position: absolute; top: -30%; right: -22%; width: 210px; aspect-ratio: 1; border: 1px solid rgba(255,106,0,.24); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,106,0,.035), 0 0 42px rgba(255,106,0,.1); content: ""; }.about-panel-label { position: relative; z-index: 1; margin: 0; color: var(--orange-deep); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }.about-manifesto-points { position: relative; z-index: 1; margin-top: 19px; border-top: 1px solid rgba(20,23,28,.1); }.about-manifesto-points > div { display: grid; grid-template-columns: 32px 1fr; gap: 13px; padding: 16px 0; border-bottom: 1px solid rgba(20,23,28,.1); }.about-manifesto-points > div > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: var(--orange-deep); background: rgba(255,106,0,.09); font-size: 8px; font-weight: 900; }.about-manifesto-points p { display: grid; gap: 3px; margin: 0; }.about-manifesto-points b { font-size: 12px; font-weight: 800; }.about-manifesto-points small { color: #6f757d; font-size: 11px; line-height: 1.5; }.about-panel-foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 23px; }.about-panel-foot span { color: #82878e; font-size: 7px; font-weight: 900; letter-spacing: .14em; }.about-panel-foot strong { max-width: 160px; color: #30353c; font-size: 15px; line-height: 1.15; text-align: right; }

.about-principles { position: relative; overflow: hidden; background: #0d1014; }.about-principles::before { position: absolute; inset: 0; opacity: .29; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); content: ""; }.about-principles::after { position: absolute; top: 18%; left: -19%; width: 410px; aspect-ratio: 1; border: 1px solid rgba(255,106,0,.17); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,106,0,.025), 0 0 70px rgba(255,106,0,.08); content: ""; }
.about-principles .shell { position: relative; z-index: 1; }.about-section-heading { display: grid; grid-template-columns: 1.03fr .7fr; align-items: end; gap: clamp(35px, 8vw, 115px); }.about-section-heading > p { max-width: 440px; margin: 0 0 5px; color: #9da3ac; font-size: 14px; line-height: 1.75; }.about-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.about-principle-card { position: relative; min-height: 320px; padding: 27px 31px 31px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: transform .28s ease, background .28s ease; }.about-principle-card:last-child { border-right: 0; }.about-principle-card:hover { z-index: 2; background: linear-gradient(150deg, rgba(255,106,0,.12), rgba(255,255,255,.02)); transform: translateY(-8px); }.about-principle-top { display: flex; align-items: center; justify-content: space-between; }.about-principle-top > span { color: #737a84; font-size: 9px; font-weight: 900; letter-spacing: .14em; }.about-principle-top > i { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,106,0,.29); border-radius: 11px; color: var(--orange-light); background: rgba(255,106,0,.08); }.about-principle-card h3 { max-width: 215px; margin: 49px 0 13px; color: #f2f3f3; font-size: 22px; font-weight: 750; line-height: 1.06; letter-spacing: -.037em; }.about-principle-card p { max-width: 290px; margin: 0; color: #9fa5ad; font-size: 12px; line-height: 1.72; }.about-principle-line { position: absolute; right: 31px; bottom: 26px; left: 31px; height: 1px; overflow: hidden; background: rgba(255,255,255,.1); }.about-principle-line::after { position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: var(--orange); content: ""; transition: width .3s ease; }.about-principle-card:hover .about-principle-line::after { width: 100%; }

.about-method { color: #262b31; background: #f7f7f5; }.about-method-grid { display: grid; grid-template-columns: minmax(0, .79fr) minmax(480px, 1.21fr); gap: clamp(56px, 10vw, 142px); }.about-method-intro { position: sticky; top: 124px; align-self: start; }.about-method-intro > p:not(.section-kicker) { max-width: 420px; margin: 24px 0 0; color: #676d75; font-size: 15px; line-height: 1.78; }.about-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 27px; padding-bottom: 5px; border-bottom: 1px solid var(--orange-deep); color: #20252b; font-size: 11px; font-weight: 900; }.about-text-link svg { color: var(--orange-deep); transition: transform .2s ease; }.about-text-link:hover svg { transform: translateX(4px); }.about-method-list { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(20,23,28,.15); list-style: none; }.about-method-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; padding: 27px 3px 28px 0; border-bottom: 1px solid rgba(20,23,28,.15); transition: padding .25s ease, background .25s ease; }.about-method-list li:hover { padding-left: 15px; background: rgba(255,106,0,.04); }.about-method-list > li > span { color: var(--orange-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; }.about-method-list h3 { margin: 0; color: #24292f; font-size: 19px; font-weight: 770; letter-spacing: -.037em; }.about-method-list p { max-width: 520px; margin: 8px 0 0; color: #6e747c; font-size: 12px; line-height: 1.7; }.about-method-list > li > svg { align-self: center; color: #a0a5ac; transition: transform .2s ease, color .2s ease; }.about-method-list li:hover > svg { color: var(--orange-deep); transform: translateX(5px); }

.about-founder-section { position: relative; overflow: hidden; background: #12151a; }.about-founder-section::before { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(90deg, black, transparent 73%); content: ""; }.about-founder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(55px, 8vw, 114px); }.about-founder-portrait { min-height: 575px; }.about-founder-copy > p:not(.section-kicker) { max-width: 585px; margin: 23px 0 0; color: #aeb3bc; font-size: 15px; line-height: 1.78; }.about-founder-notes { display: grid; gap: 9px; margin: 27px 0; }.about-founder-notes span { display: flex; align-items: center; gap: 9px; color: #dedfe1; font-size: 11px; font-weight: 700; }.about-founder-notes svg { color: var(--orange-light); }

.about-closing { position: relative; overflow: hidden; padding-block: clamp(96px, 12vw, 156px); background: radial-gradient(circle at 80% 52%, rgba(255,106,0,.29), transparent 24%), #0b0d10; }.about-closing::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,106,0,.5), transparent); content: ""; }.about-closing-grid { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); animation: about-closing-grid 16s linear infinite; }.about-closing-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 45px; }.about-closing-copy > p:not(.section-kicker) { max-width: 600px; margin: 26px 0 0; color: #afb4bc; font-size: 15px; line-height: 1.75; }.about-closing-mark { position: relative; min-height: 360px; isolation: isolate; }.about-closing-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.46); border-radius: 50%; transform: translate(-50%, -50%); }.about-closing-orbit.orbit-one { width: 305px; height: 305px; box-shadow: 0 0 0 32px rgba(255,106,0,.05), 0 0 70px rgba(255,106,0,.22); animation: about-closing-orbit-a 18s linear infinite; }.about-closing-orbit.orbit-two { width: 207px; height: 207px; border-color: rgba(255,255,255,.15); animation: about-closing-orbit-b 22s linear infinite; }.about-closing-orbit::after { position: absolute; top: 12%; right: 11%; width: 7px; height: 7px; border-radius: 50%; background: #ff9347; box-shadow: 0 0 15px 4px rgba(255,106,0,.64); content: ""; }.about-closing-orbit.orbit-two::after { top: auto; right: auto; bottom: 9%; left: 16%; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.72); }.about-closing-logo { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 157px; height: 142px; place-items: center; overflow: hidden; border: 1px solid rgba(255,157,83,.34); border-radius: 20px; background: linear-gradient(145deg, #2a2d33, #090b0f 72%); box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.07) inset, 0 0 34px rgba(255,106,0,.15); transform: translate(-50%, -50%) rotate(7deg); animation: about-closing-logo 6.2s ease-in-out infinite; }.about-closing-logo::after { position: absolute; top: -25%; bottom: -25%; left: -46%; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); content: ""; animation: about-closing-shine 5.7s ease-in-out infinite; }.about-closing-logo img { position: relative; z-index: 1; width: 114px; height: auto; filter: drop-shadow(0 8px 13px rgba(0,0,0,.4)); animation: about-logo-breathe 5.4s ease-in-out infinite; }.about-closing-dot { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: about-closing-dot 4.2s ease-in-out infinite; }.dot-one { top: 22%; left: 30%; }.dot-two { right: 18%; bottom: 21%; width: 11px; height: 11px; animation-delay: -1.7s; }

@keyframes about-grid-drift { to { background-position: 60px 60px; } }
@keyframes about-aurora-breathe { 0%,100% { opacity: .5; transform: scale(.92); } 50% { opacity: .95; transform: scale(1.08); } }
@keyframes about-star-float { 0%,100% { opacity: .25; transform: translateY(7px) scale(.75); } 50% { opacity: 1; transform: translateY(-10px) scale(1.16); } }
@keyframes about-status-pulse { 0%,100% { opacity: .52; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes about-title-shimmer { 0%,22%,100% { background-position: 100% 50%; } 57% { background-position: 0 50%; } }
@keyframes about-visual-glow { 0%,100% { opacity: .6; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes about-orbit-spin { to { transform: rotate(360deg); } }
@keyframes about-fox-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-11px) rotate(-.6deg); } }
@keyframes about-card-float { 0%,100% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(-9px); } }
@keyframes about-card-shine { 0%,66% { transform: translateX(-105%); } 90%,100% { transform: translateX(135%); } }
@keyframes about-status-card { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes about-signal-card { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(7px) rotate(-1deg); } }
@keyframes about-scroll-line { 0% { top: -100%; } 72%,100% { top: 120%; } }
@keyframes about-closing-grid { to { background-position: 52px 52px; } }
@keyframes about-closing-orbit-a { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes about-closing-orbit-b { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes about-closing-logo { 0%,100% { transform: translate(-50%, -50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(4deg) scale(1.025); } }
@keyframes about-closing-shine { 0%,62% { left: -46%; opacity: 0; } 70% { opacity: 1; } 94%,100% { left: 120%; opacity: 0; } }
@keyframes about-logo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes about-closing-dot { 0%,100% { transform: translateY(0) scale(.78); opacity: .6; } 50% { transform: translateY(-9px) scale(1.18); opacity: 1; } }

@media (max-width: 1120px) {
  .about-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(405px, .86fr); gap: 36px; }
  .about-hero-visual { min-height: 540px; }.about-hero h1 { font-size: clamp(47px, 5.2vw, 67px); }.about-studio-card { left: -5%; }
  .about-manifesto-grid { gap: 55px; }.about-founder-grid { gap: 48px; }.about-founder-portrait { min-height: 540px; }
}

@media (max-width: 780px) {
  .about-hero { min-height: auto; }.about-hero::after { height: 115px; }.about-hero-layout { display: grid; min-height: auto; grid-template-columns: 1fr; gap: 18px; padding-top: 114px; padding-bottom: 74px; }.about-hero-copy { padding-top: 0; }.about-hero-overline { margin-bottom: 17px; font-size: 7px; line-height: 1.45; }.about-hero h1 { font-size: clamp(43px, 12vw, 59px); }.about-hero-lead { margin-top: 22px; font-size: 14px; line-height: 1.7; }.about-hero-actions { margin-top: 25px; }.about-hero-signature { justify-content: center; margin-top: 20px; }.about-hero-visual { min-height: 404px; margin-top: 0; }.about-visual-glow { top: 8%; left: 11%; width: 70%; }.about-orbit { left: 53%; top: 49%; }.about-orbit-a { width: 305px; height: 305px; }.about-orbit-b { width: 207px; height: 207px; }.about-foxbot { right: -6%; width: 111%; height: 108%; }.about-studio-card { top: 9%; left: -2%; width: 201px; padding: 12px; border-radius: 13px; }.about-studio-top { padding-bottom: 9px; font-size: 5.5px; }.about-studio-mark { min-height: 63px; margin: 11px 0 9px; }.about-studio-mark img { width: 101px; }.about-studio-card > p { font-size: 8px; }.about-studio-bottom { gap: 5px; margin-top: 10px; padding-top: 8px; font-size: 4.5px; }.about-status-card { bottom: 5%; left: 0; padding: 9px 10px; }.about-status-card > span { width: 24px; height: 24px; }.about-status-card b { font-size: 8px; }.about-signal-card { top: 8%; right: 0; padding: 8px 9px; font-size: 6.5px; }.about-scroll { display: none; }
  .about-manifesto-grid, .about-section-heading, .about-method-grid, .about-founder-grid, .about-closing-inner { grid-template-columns: 1fr; gap: 38px; }.about-manifesto-copy, .about-section-heading, .about-method-intro, .about-founder-copy, .about-closing-copy { text-align: center; }.about-manifesto-copy .section-kicker, .about-section-heading .section-kicker, .about-method-intro .section-kicker, .about-founder-copy .section-kicker, .about-closing-copy .section-kicker { justify-content: center; }.about-manifesto-copy > p:not(.section-kicker), .about-section-heading > p, .about-method-intro > p:not(.section-kicker), .about-founder-copy > p:not(.section-kicker), .about-closing-copy > p:not(.section-kicker) { margin-right: auto; margin-left: auto; font-size: 14px; }.about-manifesto-copy h2, .about-section-heading h2, .about-method-intro h2, .about-founder-copy h2, .about-closing h2 { font-size: clamp(37px, 10.7vw, 53px); }.about-manifesto-panel { padding: 23px; text-align: left; }.about-panel-foot { align-items: center; }.about-principles-grid { grid-template-columns: 1fr; margin-top: 45px; }.about-principle-card { min-height: 244px; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }.about-principle-card:last-child { border-bottom: 0; }.about-principle-card h3 { max-width: none; margin: 29px 0 11px; font-size: 21px; }.about-principle-card p { max-width: 400px; margin-inline: auto; }.about-principle-top > span { order: 2; }.about-principle-top { justify-content: center; gap: 13px; }.about-principle-line { right: 24px; left: 24px; }.about-method { padding-bottom: 81px; }.about-method-intro { position: static; }.about-text-link { margin-inline: auto; }.about-method-list li { grid-template-columns: 36px 1fr; gap: 10px; padding: 20px 0; text-align: left; }.about-method-list li:hover { padding-left: 0; }.about-method-list > li > svg { display: none; }.about-method-list h3 { font-size: 16px; }.about-method-list p { margin-top: 6px; font-size: 11px; }.about-founder-portrait { min-height: 495px; }.about-founder-notes { justify-items: center; }.about-closing { padding-block: 86px; }.about-closing-mark { min-height: 245px; }.about-closing-orbit.orbit-one { width: 214px; height: 214px; }.about-closing-orbit.orbit-two { width: 153px; height: 153px; }.about-closing-logo { width: 111px; height: 102px; border-radius: 15px; }.about-closing-logo img { width: 79px; }.about-closing-orbit::after { width: 5px; height: 5px; }.about-closing-orbit.orbit-two::after { width: 4px; height: 4px; }
}

@media (max-width: 390px) {
  .about-hero-layout { padding-top: 103px; }.about-hero-visual { min-height: 373px; }.about-studio-card { width: 183px; }.about-signal-card { display: none; }.about-manifesto-panel { padding: 20px; }.about-manifesto-points > div { grid-template-columns: 28px 1fr; gap: 10px; }.about-panel-foot strong { font-size: 13px; }.about-founder-portrait { min-height: 455px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-grid, .about-hero-aurora, .about-star, .about-hero h1 em, .about-visual-glow, .about-orbit i, .about-foxbot, .about-studio-card, .about-studio-card::after, .about-status-card, .about-status-card > span i, .about-signal-card, .about-scroll i::after, .about-closing-grid, .about-closing-orbit, .about-closing-logo, .about-closing-logo::after, .about-closing-logo img, .about-closing-dot { animation: none !important; }
}

/* Solutions hub and sales pages. */
.solutions-page, .service-page { background: var(--ink); }
.solutions-header:not(.is-scrolled) { border-bottom-color: rgba(255,255,255,.045); }

.solutions-hero {
  position: relative;
  min-height: min(890px, 100svh);
  overflow: clip;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 47%, rgba(255, 99, 0, .21), transparent 27%),
    radial-gradient(circle at 16% 7%, rgba(255,255,255,.052), transparent 24%),
    linear-gradient(130deg, #07080a, #0e1016 53%, #08090b);
}
.solutions-hero::before, .solutions-hero::after { position: absolute; content: ""; pointer-events: none; }
.solutions-hero::before { z-index: 0; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.036) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.036) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg, black, rgba(0,0,0,.75) 59%, transparent); }
.solutions-hero::after { z-index: 1; right: 0; bottom: 0; left: 0; height: 165px; background: linear-gradient(transparent, #090a0d); }
.solutions-hero-grid { position: absolute; z-index: 0; top: 9%; right: -10%; width: min(790px, 62vw); height: 78%; border: 1px solid rgba(255,126,42,.14); background-image: linear-gradient(rgba(255,106,0,.105) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.105) 1px, transparent 1px); background-size: 31px 31px; transform: perspective(900px) rotateY(-17deg) rotateX(4deg); mask-image: linear-gradient(90deg, transparent, black 23%, black 80%, transparent); animation: solutions-grid-drift 20s linear infinite; }
.solutions-hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(9px); pointer-events: none; }
.solutions-hero-glow.glow-a { top: 20%; right: 4%; width: min(550px, 46vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,108,8,.22), rgba(255,106,0,.05) 47%, transparent 71%); animation: solutions-hero-glow 7.2s ease-in-out infinite; }
.solutions-hero-glow.glow-b { bottom: -31%; left: -7%; width: 430px; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,126,42,.1), transparent 68%); animation: solutions-hero-glow 9.2s ease-in-out infinite reverse; }
.solutions-hero-layout { position: relative; z-index: 2; display: grid; min-height: min(890px, 100svh); grid-template-columns: minmax(0, 1.01fr) minmax(445px, .99fr); align-items: center; gap: clamp(40px, 6vw, 86px); padding-top: 118px; padding-bottom: 82px; }
.solutions-hero-copy { max-width: 665px; }.solutions-hero-copy .eyebrow { margin-bottom: 14px; }.solutions-hero-overline { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: #7f858f; font-size: 8px; font-weight: 850; letter-spacing: .145em; }.solutions-hero-overline i { width: 6px; height: 6px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 11px #70e8ab; animation: solutions-status-pulse 1.9s ease-in-out infinite; }
.solutions-hero h1, .service-hero h1 { margin: 0; font-size: clamp(49px, 5.75vw, 81px); font-weight: 760; line-height: .965; letter-spacing: -.06em; }.solutions-hero h1 em, .service-hero h1 em { background: linear-gradient(110deg, #ff6a00 8%, #ffb56e 44%, #ff6a00 76%); background-size: 220% 100%; background-clip: text; color: transparent; animation: solutions-title-shimmer 6.2s ease-in-out infinite; }
.solutions-hero-copy > p:not(.eyebrow):not(.solutions-hero-overline):not(.solutions-hero-note) { max-width: 595px; margin: 26px 0 0; color: #b7bcc5; font-size: 16px; line-height: 1.78; }.solutions-hero-copy .hero-actions { margin-top: 31px; }.solutions-hero-note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: #a3a9b2; font-size: 10px; font-weight: 700; }.solutions-hero-note svg { color: var(--orange-light); }

.solutions-hero-art { position: relative; min-height: 585px; isolation: isolate; perspective: 1100px; }.solutions-art-glow { position: absolute; z-index: -2; top: 13%; left: 7%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,99,0,.28), rgba(255,99,0,.075) 46%, transparent 70%); filter: blur(10px); animation: solutions-art-glow 5.9s ease-in-out infinite; }.solutions-art-orbit { position: absolute; z-index: -1; top: 49%; left: 53%; border: 1px solid rgba(255,119,31,.31); border-radius: 50%; transform: translate(-50%, -50%); }.solutions-art-orbit i { position: absolute; inset: -1px; border-radius: inherit; animation: solutions-orbit-spin 18s linear infinite; }.solutions-art-orbit i::after { position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff9a4e; box-shadow: 0 0 17px 4px rgba(255,106,0,.68); content: ""; }.solutions-art-orbit-one { width: 436px; height: 436px; box-shadow: 0 0 0 39px rgba(255,106,0,.035), 0 0 76px rgba(255,106,0,.17); }.solutions-art-orbit-two { width: 288px; height: 288px; border-color: rgba(255,255,255,.11); }.solutions-art-orbit-two i { animation-duration: 23s; animation-direction: reverse; }.solutions-art-orbit-two i::after { width: 6px; height: 6px; background: white; box-shadow: 0 0 14px rgba(255,255,255,.67); }
.solutions-foxbot { position: absolute; z-index: 1; right: -12%; bottom: -3%; width: min(610px, 112%); height: 106%; object-fit: cover; object-position: 71% center; mix-blend-mode: screen; filter: contrast(1.08) saturate(1.06) drop-shadow(0 28px 38px rgba(0,0,0,.4)); mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 84%, transparent 100%), linear-gradient(0deg, transparent, black 14%); mask-composite: intersect; animation: solutions-fox-float 6.8s ease-in-out infinite; }.solutions-art-core { position: absolute; z-index: 3; top: 42%; left: 10%; display: grid; width: 195px; min-height: 144px; place-items: center; align-content: center; gap: 14px; padding: 18px; border: 1px solid rgba(255,147,64,.31); border-radius: 18px; background: linear-gradient(145deg, rgba(30,33,39,.94), rgba(7,9,12,.84)); box-shadow: 0 26px 70px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.05) inset; backdrop-filter: blur(14px); transform: perspective(900px) rotateY(7deg) rotateX(2deg); animation: solutions-core-float 6.2s ease-in-out infinite; }.solutions-art-core::before { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; content: ""; }.solutions-art-core img { position: relative; z-index: 1; width: 119px; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }.solutions-art-core small { position: relative; z-index: 1; color: #a5abb4; font-size: 6px; font-weight: 850; letter-spacing: .14em; }.solutions-art-token { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #e0e3e6; background: rgba(17,20,25,.85); box-shadow: 0 18px 42px rgba(0,0,0,.3); backdrop-filter: blur(12px); font-size: 8px; font-weight: 800; animation: solutions-token-float 5.5s ease-in-out infinite; }.solutions-art-token svg { color: var(--orange-light); }.token-1 { top: 15%; left: -2%; }.token-2 { top: 13%; right: 0; animation-delay: -1.4s; }.token-3 { right: -2%; bottom: 25%; animation-delay: -2.7s; }.token-4 { bottom: 10%; left: 1%; animation-delay: -4.1s; }.solutions-art-status { position: absolute; z-index: 4; right: 2%; bottom: 7%; display: flex; align-items: center; gap: 7px; color: #b3b8bf; font-size: 8px; font-weight: 800; letter-spacing: .04em; }.solutions-art-status i { width: 6px; height: 6px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 10px #70e8ab; animation: solutions-status-pulse 1.8s ease-in-out infinite; }

.solutions-intro { position: relative; overflow: hidden; color: #262b31; background: #f4f3ef; }.solutions-intro::before { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 50%, transparent); content: ""; }.solutions-intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .76fr; align-items: center; gap: clamp(45px, 9vw, 130px); }.solutions-intro h2, .solutions-directory-heading h2, .solutions-combinations h2, .service-what h2, .service-section-head h2, .service-audience h2, .service-delivery h2, .service-journey h2, .service-more h2, .solutions-final-cta h2 { margin: 0; font-size: clamp(39px, 4.2vw, 63px); font-weight: 740; line-height: 1.01; letter-spacing: -.056em; }.solutions-intro-grid > div:last-child > p { max-width: 462px; margin: 0; color: #666c75; font-size: 15px; line-height: 1.78; }.solutions-intro-signals { display: grid; gap: 10px; margin-top: 25px; }.solutions-intro-signals span { display: flex; align-items: center; gap: 8px; color: #3e444c; font-size: 11px; font-weight: 750; }.solutions-intro-signals svg { color: var(--orange-deep); }

.solutions-directory { position: relative; overflow: hidden; padding-block: clamp(98px, 12vw, 160px); color: #252a30; background: #f7f7f5; }.solutions-directory::after { position: absolute; right: -21%; bottom: -12%; width: 520px; aspect-ratio: 1; border: 1px solid rgba(255,106,0,.2); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,106,0,.03), 0 0 0 96px rgba(255,106,0,.018); content: ""; }.solutions-directory .shell { position: relative; z-index: 1; }.solutions-directory-heading { max-width: 675px; }.solutions-spotlights { display: grid; gap: 0; margin-top: 66px; border-top: 1px solid rgba(20,23,28,.13); }.solution-spotlight { display: grid; grid-template-columns: minmax(0, .99fr) minmax(400px, 1.01fr); align-items: center; gap: clamp(46px, 9vw, 125px); min-height: 465px; padding-block: 54px; border-bottom: 1px solid rgba(20,23,28,.13); }.solution-spotlight:nth-child(even) .solution-spotlight-copy { order: 2; }.solution-spotlight:nth-child(even) .solution-visual { order: 1; }.solution-spotlight-top { display: flex; align-items: center; gap: 11px; }.solution-spotlight-top > span { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .16em; }.solution-spotlight-top > i { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255,106,0,.25); border-radius: 10px; color: var(--orange-deep); background: rgba(255,106,0,.07); }.solution-spotlight h3 { margin: 25px 0 14px; color: #252a30; font-size: clamp(31px, 3vw, 45px); font-weight: 750; letter-spacing: -.055em; }.solution-spotlight-copy > p { max-width: 510px; margin: 0; color: #666c75; font-size: 14px; line-height: 1.78; }.solution-spotlight-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }.solution-spotlight-tags span { padding: 7px 9px; border: 1px solid rgba(20,23,28,.11); border-radius: 999px; color: #555b64; background: rgba(255,255,255,.54); font-size: 8px; font-weight: 800; }.solution-discover-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid var(--orange-deep); color: #24292f; font-size: 11px; font-weight: 900; }.solution-discover-link svg { color: var(--orange-deep); transition: transform .2s ease; }.solution-discover-link:hover svg { transform: translateX(4px); }

.solution-visual { position: relative; min-height: 342px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; color: white; background: radial-gradient(circle at 73% 32%, rgba(255,106,0,.24), transparent 29%), linear-gradient(145deg, #20242b, #090b0f 76%); box-shadow: 0 29px 72px rgba(19,22,28,.25), 0 0 0 1px rgba(255,106,0,.05) inset; isolation: isolate; }.solution-visual::before { position: absolute; z-index: 0; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(135deg, transparent 7%, black 58%, transparent 95%); content: ""; }.solution-visual-grid { position: absolute; z-index: 0; top: -14%; right: -24%; width: 95%; height: 130%; border: 1px solid rgba(255,128,42,.14); background-image: linear-gradient(rgba(255,106,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.1) 1px, transparent 1px); background-size: 23px 23px; transform: perspective(700px) rotateY(-15deg) rotateX(4deg); animation: solution-visual-grid 15s linear infinite; }.solution-visual-orbit { position: absolute; z-index: 0; top: 50%; left: 50%; border: 1px solid rgba(255,118,31,.35); border-radius: 50%; transform: translate(-50%,-50%); }.solution-visual-orbit i { position: absolute; inset: -1px; border-radius: inherit; animation: solution-visual-orbit 15s linear infinite; }.solution-visual-orbit i::after { position: absolute; top: calc(50% - 3px); right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-light); box-shadow: 0 0 14px 3px rgba(255,106,0,.66); content: ""; }.solution-visual-orbit.orbit-a { width: 250px; height: 250px; box-shadow: 0 0 0 25px rgba(255,106,0,.04), 0 0 45px rgba(255,106,0,.13); }.solution-visual-orbit.orbit-b { width: 165px; height: 165px; border-color: rgba(255,255,255,.12); }.solution-visual-orbit.orbit-b i { animation-duration: 21s; animation-direction: reverse; }.solution-visual-orbit.orbit-b i::after { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 11px rgba(255,255,255,.7); }.solution-visual-panel { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(246px, 68%); padding: 15px; border: 1px solid rgba(255,154,75,.28); border-radius: 14px; background: linear-gradient(145deg, rgba(27,30,36,.95), rgba(7,9,12,.84)); box-shadow: 0 20px 58px rgba(0,0,0,.38); backdrop-filter: blur(13px); transform: translate(-50%, -50%) rotate(-5deg); animation: solution-panel-float 5.8s ease-in-out infinite; }.solution-visual-panel-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.1); color: #a1a7b0; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.solution-visual-panel-top span { display: flex; align-items: center; gap: 5px; }.solution-visual-panel-top span i { width: 5px; height: 5px; border-radius: 50%; background: #70e8ab; box-shadow: 0 0 8px #70e8ab; }.solution-visual-panel-top small { color: var(--orange-light); font-size: 6px; }.solution-visual-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-top: 19px; border: 1px solid rgba(255,106,0,.32); border-radius: 12px; color: var(--orange-light); background: rgba(255,106,0,.09); }.solution-visual-panel strong { display: block; margin-top: 13px; color: #fff; font-size: 18px; font-weight: 760; letter-spacing: -.045em; }.solution-visual-panel p { margin: 5px 0 0; color: #abb0b8; font-size: 9px; line-height: 1.5; }.solution-visual-meter { display: flex; align-items: end; gap: 4px; height: 27px; margin-top: 15px; }.solution-visual-meter i { display: block; width: 19%; height: 42%; border-radius: 2px 2px 0 0; background: linear-gradient(var(--orange-light), var(--orange-deep)); animation: solution-meter 2.8s ease-in-out infinite alternate; }.solution-visual-meter i:nth-child(2) { height: 78%; animation-delay: -.6s; }.solution-visual-meter i:nth-child(3) { height: 58%; animation-delay: -1.2s; }.solution-visual-meter i:nth-child(4) { height: 96%; animation-delay: -1.8s; }.solution-visual-signal { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--orange-light); box-shadow: 0 0 13px 3px rgba(255,106,0,.65); animation: solution-signal 4.2s ease-in-out infinite; }.solution-visual-signal.signal-a { top: 16%; left: 16%; }.solution-visual-signal.signal-b { right: 13%; bottom: 20%; width: 8px; height: 8px; animation-delay: -1.7s; }.solution-visual-signal.signal-c { top: 23%; right: 20%; width: 3px; height: 3px; animation-delay: -3.1s; }.solution-visual.is-compact { min-height: 312px; }

.solutions-combinations { position: relative; overflow: hidden; background: #0d1014; }.solutions-combinations::before { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); content: ""; }.solutions-combinations .shell { position: relative; z-index: 1; }.solutions-combinations-heading { display: grid; grid-template-columns: 1.05fr .7fr; align-items: end; gap: clamp(38px, 8vw, 116px); }.solutions-combinations-heading > p { max-width: 430px; margin: 0 0 4px; color: #9ca2ab; font-size: 14px; line-height: 1.75; }.solutions-combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 62px; border: 1px solid var(--line); }.solutions-combo-grid article { min-height: 272px; padding: 27px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: transform .25s ease, background .25s ease; }.solutions-combo-grid article:last-child { border-right: 0; }.solutions-combo-grid article:hover { transform: translateY(-7px); background: rgba(255,255,255,.035); }.solutions-combo-grid article.is-featured { background: linear-gradient(150deg, rgba(255,106,0,.17), rgba(255,255,255,.025)); }.solutions-combo-grid span { color: var(--orange-light); font-size: 9px; font-weight: 900; letter-spacing: .14em; }.solutions-combo-grid h3 { margin: 43px 0 11px; color: #f2f3f3; font-size: 22px; font-weight: 750; letter-spacing: -.04em; }.solutions-combo-grid p { margin: 0; color: #9fa5ad; font-size: 12px; line-height: 1.7; }.solutions-combo-grid article > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }.solutions-combo-grid i { padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #cdd0d4; font-size: 7px; font-style: normal; font-weight: 800; }

.solutions-final-cta { position: relative; overflow: hidden; padding-block: clamp(96px, 12vw, 154px); background: radial-gradient(circle at 80% 52%, rgba(255,106,0,.29), transparent 24%), #0a0c10; }.solutions-final-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); animation: solutions-final-grid 16s linear infinite; }.solutions-final-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 44px; }.solutions-final-copy > p:not(.section-kicker) { max-width: 600px; margin: 25px 0 0; color: #afb4bc; font-size: 15px; line-height: 1.75; }.solutions-final-copy .hero-actions { margin-top: 29px; }.solutions-final-mark { position: relative; min-height: 360px; isolation: isolate; }.solutions-final-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.45); border-radius: 50%; transform: translate(-50%,-50%); }.solutions-final-ring-one { width: 305px; height: 305px; box-shadow: 0 0 0 32px rgba(255,106,0,.05), 0 0 70px rgba(255,106,0,.22); animation: solutions-final-orbit-one 18s linear infinite; }.solutions-final-ring-two { width: 208px; height: 208px; border-color: rgba(255,255,255,.14); animation: solutions-final-orbit-two 22s linear infinite; }.solutions-final-ring::after { position: absolute; top: 12%; right: 11%; width: 7px; height: 7px; border-radius: 50%; background: #ff9347; box-shadow: 0 0 15px 4px rgba(255,106,0,.64); content: ""; }.solutions-final-ring-two::after { top: auto; right: auto; bottom: 9%; left: 16%; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.72); }.solutions-final-logo { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 158px; height: 142px; place-items: center; overflow: hidden; border: 1px solid rgba(255,157,83,.34); border-radius: 20px; background: linear-gradient(145deg, #2a2d33, #090b0f 72%); box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.07) inset, 0 0 34px rgba(255,106,0,.15); transform: translate(-50%,-50%) rotate(7deg); animation: solutions-final-logo 6.2s ease-in-out infinite; }.solutions-final-logo::after { position: absolute; top: -25%; bottom: -25%; left: -46%; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); content: ""; animation: solutions-final-shine 5.7s ease-in-out infinite; }.solutions-final-logo img { position: relative; z-index: 1; width: 114px; height: auto; filter: drop-shadow(0 8px 13px rgba(0,0,0,.4)); animation: solutions-logo-breathe 5.4s ease-in-out infinite; }.solutions-final-dot { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: solutions-final-dot 4.2s ease-in-out infinite; }.solutions-final-dot-one { top: 22%; left: 30%; }.solutions-final-dot-two { right: 18%; bottom: 21%; width: 11px; height: 11px; animation-delay: -1.7s; }

/* Individual solution sales pages. */
.service-hero { position: relative; min-height: min(810px, 95svh); overflow: clip; color: var(--paper); background: radial-gradient(circle at 80% 46%, rgba(255,100,0,.2), transparent 28%), radial-gradient(circle at 9% 10%, rgba(255,255,255,.05), transparent 24%), linear-gradient(130deg, #08090b, #10131a 56%, #090a0d); }.service-hero::before, .service-hero::after { position: absolute; content: ""; pointer-events: none; }.service-hero::before { z-index: 0; inset: 0; opacity: .38; 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(90deg, black, transparent 84%); }.service-hero::after { z-index: 1; right: 0; bottom: 0; left: 0; height: 145px; background: linear-gradient(transparent, #f5f4f0); }.service-hero-grid { position: absolute; z-index: 0; top: 3%; right: -13%; width: min(790px, 60vw); height: 95%; border: 1px solid rgba(255,126,42,.12); background-image: linear-gradient(rgba(255,106,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.1) 1px, transparent 1px); background-size: 33px 33px; transform: perspective(900px) rotateY(-17deg) rotateX(4deg); mask-image: linear-gradient(90deg, transparent, black 27%, black 78%, transparent); animation: solutions-grid-drift 19s linear infinite; }.service-hero-sun { position: absolute; z-index: 0; top: 14%; right: 5%; width: min(520px, 47vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,109,11,.25), rgba(255,101,0,.07) 45%, transparent 70%); filter: blur(9px); animation: solutions-hero-glow 6.8s ease-in-out infinite; }.service-hero-layout { position: relative; z-index: 2; display: grid; min-height: min(810px, 95svh); grid-template-columns: minmax(0, .99fr) minmax(400px, 1.01fr); align-items: center; gap: clamp(38px, 6vw, 86px); padding-top: 118px; padding-bottom: 80px; }.service-hero-copy { max-width: 650px; }.service-breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 27px; color: #9aa0a9; font-size: 9px; font-weight: 800; }.service-breadcrumb svg { color: var(--orange-light); transform: rotate(180deg); }.service-hero-copy .eyebrow { margin-bottom: 17px; }.service-hero h1 { max-width: 710px; font-size: clamp(47px, 5.45vw, 75px); }.service-hero-copy > p:not(.eyebrow) { max-width: 570px; margin: 27px 0 0; color: #b8bdc5; font-size: 16px; line-height: 1.78; }.service-hero-copy .hero-actions { margin-top: 30px; }.service-hero-trust { display: flex; flex-wrap: wrap; gap: 13px 18px; margin-top: 24px; }.service-hero-trust span { display: flex; align-items: center; gap: 7px; color: #c7cbd0; font-size: 10px; font-weight: 700; }.service-hero-trust svg { color: var(--orange-light); }.service-hero-art { position: relative; min-height: 425px; }.service-hero-art .solution-visual { min-height: 420px; transform: perspective(1000px) rotateY(-4deg) rotateX(1deg); }.service-hero-art .solution-visual-panel { animation-duration: 5.4s; }

.service-what { position: relative; overflow: hidden; color: #252a30; background: #f5f4f0; }.service-what::before { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, black 50%, transparent); content: ""; }.service-what-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .83fr); align-items: center; gap: clamp(52px, 10vw, 144px); }.service-what-copy > p:not(.section-kicker) { max-width: 590px; margin: 23px 0 0; color: #666d75; font-size: 15px; line-height: 1.8; }.service-anchor-card { position: relative; overflow: hidden; padding: 31px; border: 1px solid rgba(23,26,31,.12); border-radius: 19px; color: white; background: radial-gradient(circle at 85% 18%, rgba(255,106,0,.24), transparent 22%), linear-gradient(145deg, #24282f, #0c0e12); box-shadow: 0 28px 70px rgba(20,22,28,.25); }.service-anchor-card::after { position: absolute; right: -25%; bottom: -45%; width: 260px; aspect-ratio: 1; border: 1px solid rgba(255,143,55,.25); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,106,0,.035), 0 0 50px rgba(255,106,0,.14); content: ""; }.service-anchor-icon { position: relative; z-index: 1; display: grid; width: 57px; height: 57px; place-items: center; border: 1px solid rgba(255,157,79,.35); border-radius: 14px; color: var(--orange-light); background: rgba(255,106,0,.1); }.service-anchor-card > p { position: relative; z-index: 1; max-width: 315px; margin: 43px 0 8px; color: #abb1b9; font-size: 11px; line-height: 1.6; }.service-anchor-card strong { position: relative; z-index: 1; display: block; max-width: 330px; color: #fff; font-size: 24px; line-height: 1.08; letter-spacing: -.04em; }.service-anchor-card > div { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 34px; color: #7d838c; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.service-anchor-card > div i { width: 3px; height: 3px; border-radius: 50%; background: var(--orange); }

.service-why { position: relative; overflow: hidden; background: #0d1014; }.service-why::before { position: absolute; inset: 0; opacity: .29; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(90deg, transparent, black 50%, transparent); content: ""; }.service-why .shell { position: relative; z-index: 1; }.service-section-head { display: grid; grid-template-columns: 1.05fr .7fr; align-items: end; gap: clamp(36px, 8vw, 112px); }.service-section-head > p { max-width: 435px; margin: 0 0 5px; color: #a0a6ae; font-size: 14px; line-height: 1.75; }.service-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 62px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.service-benefit-grid article { position: relative; min-height: 285px; padding: 27px 30px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: transform .25s ease, background .25s ease; }.service-benefit-grid article:last-child { border-right: 0; }.service-benefit-grid article:hover { z-index: 2; background: linear-gradient(150deg, rgba(255,106,0,.14), rgba(255,255,255,.02)); transform: translateY(-7px); }.service-benefit-grid article > span { color: var(--orange-light); font-size: 9px; font-weight: 900; letter-spacing: .14em; }.service-benefit-grid article > i { display: grid; width: 43px; height: 43px; place-items: center; margin-top: 25px; border: 1px solid rgba(255,106,0,.28); border-radius: 11px; color: var(--orange-light); background: rgba(255,106,0,.08); }.service-benefit-grid article p { max-width: 280px; margin: 22px 0 0; color: #d7dadd; font-size: 13px; font-weight: 650; line-height: 1.62; }.service-benefit-grid article b { position: absolute; bottom: 24px; left: 30px; color: #7c838c; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.service-audience { position: relative; overflow: hidden; color: #252a30; background: #f7f7f5; }.service-audience::after { position: absolute; right: -13%; bottom: -34%; width: 560px; aspect-ratio: 1; border: 1px solid rgba(255,106,0,.2); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,106,0,.03); content: ""; }.service-audience-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(54px, 9vw, 126px); }.service-audience-visual { position: relative; min-height: 410px; overflow: hidden; border: 1px solid rgba(24,27,32,.11); border-radius: 23px; background: radial-gradient(circle at 50% 46%, rgba(255,106,0,.16), transparent 37%), #e9e8e3; box-shadow: 0 27px 65px rgba(25,29,35,.1); }.service-audience-visual::before { position: absolute; inset: 0; opacity: .52; background-image: linear-gradient(rgba(18,21,26,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,21,26,.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(circle, black 8%, transparent 71%); content: ""; }.service-audience-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.35); border-radius: 50%; transform: translate(-50%,-50%); }.service-audience-ring-one { width: 282px; height: 282px; box-shadow: 0 0 0 29px rgba(255,106,0,.045), 0 0 54px rgba(255,106,0,.13); animation: service-audience-orbit-one 17s linear infinite; }.service-audience-ring-two { width: 186px; height: 186px; border-color: rgba(25,29,35,.17); animation: service-audience-orbit-two 23s linear infinite; }.service-audience-ring::after { position: absolute; top: 14%; right: 11%; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-deep); box-shadow: 0 0 14px 3px rgba(255,106,0,.5); content: ""; }.service-audience-ring-two::after { top: auto; right: auto; bottom: 12%; left: 16%; width: 5px; height: 5px; background: #30343a; box-shadow: none; }.service-audience-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 93px; height: 93px; place-items: center; border: 1px solid rgba(255,106,0,.4); border-radius: 17px; color: var(--orange-deep); background: linear-gradient(145deg, #fff, #eae8e1); box-shadow: 0 22px 46px rgba(28,30,33,.18); transform: translate(-50%,-50%) rotate(7deg); animation: service-center-float 5.7s ease-in-out infinite; }.audience-dot { position: absolute; z-index: 3; border-radius: 50%; background: var(--orange-deep); box-shadow: 0 0 15px rgba(255,106,0,.5); animation: audience-dot-float 4.2s ease-in-out infinite; }.audience-dot-one { top: 20%; left: 25%; width: 8px; height: 8px; }.audience-dot-two { right: 19%; bottom: 22%; width: 10px; height: 10px; animation-delay: -1.6s; }.audience-dot-three { top: 27%; right: 24%; width: 4px; height: 4px; animation-delay: -3.2s; }.service-audience-copy > p:not(.section-kicker) { max-width: 590px; margin: 23px 0 0; color: #686e76; font-size: 15px; line-height: 1.78; }.service-audience-copy ul { display: grid; gap: 13px; margin: 27px 0 0; padding: 0; list-style: none; }.service-audience-copy li { display: grid; grid-template-columns: 21px 1fr; gap: 9px; align-items: start; color: #373d44; font-size: 12px; font-weight: 700; line-height: 1.55; }.service-audience-copy li svg { margin-top: 1px; color: var(--orange-deep); }

.service-delivery { position: relative; overflow: hidden; background: #13161b; }.service-delivery::before { position: absolute; inset: 0; opacity: .27; 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: 62px 62px; mask-image: linear-gradient(90deg, black, transparent 68%); content: ""; }.service-delivery-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr); align-items: center; gap: clamp(55px, 10vw, 143px); }.service-delivery-copy > p:not(.section-kicker) { max-width: 470px; margin: 24px 0 0; color: #aeb4bd; font-size: 15px; line-height: 1.78; }.service-delivery-copy .button { margin-top: 28px; }.service-delivery-list { border-top: 1px solid var(--line); }.service-delivery-list > div { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; padding: 18px 2px; border-bottom: 1px solid var(--line); transition: padding .2s ease, background .2s ease; }.service-delivery-list > div:hover { padding-left: 12px; background: rgba(255,106,0,.055); }.service-delivery-list span { color: var(--orange-light); font-size: 9px; font-weight: 900; letter-spacing: .12em; }.service-delivery-list p { margin: 0; color: #e3e5e6; font-size: 13px; font-weight: 700; }.service-delivery-list svg { color: var(--orange-light); }

.service-journey { color: #252a30; background: #f4f3ef; }.service-journey-heading { max-width: 715px; }.service-journey ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 63px 0 0; padding: 0; border: 1px solid rgba(21,24,29,.13); list-style: none; }.service-journey li { min-height: 254px; padding: 29px; border-right: 1px solid rgba(21,24,29,.13); background: rgba(255,255,255,.35); }.service-journey li:last-child { border-right: 0; }.service-journey li > span { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .15em; }.service-journey h3 { margin: 52px 0 10px; color: #292e35; font-size: 20px; font-weight: 750; letter-spacing: -.04em; }.service-journey p { margin: 0; color: #6b7179; font-size: 12px; line-height: 1.68; }

.service-more { position: relative; overflow: hidden; background: #0c0f13; }.service-more::before { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); content: ""; }.service-more .shell { position: relative; z-index: 1; }.service-more-heading { max-width: 720px; }.service-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border: 1px solid var(--line); }.service-more-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 133px; padding: 23px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: transform .22s ease, background .22s ease; }.service-more-card:last-child { border-right: 0; }.service-more-card:hover { background: linear-gradient(145deg, rgba(255,106,0,.13), rgba(255,255,255,.02)); transform: translateY(-6px); }.service-more-card > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,106,0,.29); border-radius: 10px; color: var(--orange-light); background: rgba(255,106,0,.08); }.service-more-card small { color: #818792; font-size: 7px; font-weight: 900; letter-spacing: .12em; }.service-more-card h3 { margin: 5px 0 0; color: #f0f1f2; font-size: 17px; font-weight: 750; letter-spacing: -.04em; }.service-more-card > svg { color: var(--orange-light); transition: transform .2s ease; }.service-more-card:hover > svg { transform: translateX(4px); }

@keyframes solutions-grid-drift { to { background-position: 62px 62px; } }
@keyframes solutions-hero-glow { 0%,100% { opacity: .52; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes solutions-status-pulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.17); } }
@keyframes solutions-title-shimmer { 0%,20%,100% { background-position: 100% 50%; } 55% { background-position: 0 50%; } }
@keyframes solutions-art-glow { 0%,100% { opacity: .62; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes solutions-orbit-spin { to { transform: rotate(360deg); } }
@keyframes solutions-fox-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-.55deg); } }
@keyframes solutions-core-float { 0%,100% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(-9px); } }
@keyframes solutions-token-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes solution-visual-grid { to { background-position: 46px 46px; } }
@keyframes solution-visual-orbit { to { transform: rotate(360deg); } }
@keyframes solution-panel-float { 0%,100% { transform: translate(-50%, -50%) rotate(-5deg) translateY(0); } 50% { transform: translate(-50%, calc(-50% - 8px)) rotate(-3deg); } }
@keyframes solution-meter { from { transform: scaleY(.65); opacity: .6; } to { transform: scaleY(1.06); opacity: 1; } }
@keyframes solution-signal { 0%,100% { transform: translateY(6px) scale(.74); opacity: .28; } 50% { transform: translateY(-9px) scale(1.17); opacity: 1; } }
@keyframes solutions-final-grid { to { background-position: 52px 52px; } }
@keyframes solutions-final-orbit-one { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes solutions-final-orbit-two { from { transform: translate(-50%,-50%) rotate(360deg); } to { transform: translate(-50%,-50%) rotate(0deg); } }
@keyframes solutions-final-logo { 0%,100% { transform: translate(-50%,-50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(4deg) scale(1.025); } }
@keyframes solutions-final-shine { 0%,62% { left: -46%; opacity: 0; } 70% { opacity: 1; } 94%,100% { left: 120%; opacity: 0; } }
@keyframes solutions-logo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes solutions-final-dot { 0%,100% { transform: translateY(0) scale(.78); opacity: .6; } 50% { transform: translateY(-9px) scale(1.18); opacity: 1; } }
@keyframes service-audience-orbit-one { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes service-audience-orbit-two { from { transform: translate(-50%,-50%) rotate(360deg); } to { transform: translate(-50%,-50%) rotate(0deg); } }
@keyframes service-center-float { 0%,100% { transform: translate(-50%,-50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%,calc(-50% - 8px)) rotate(4deg); } }
@keyframes audience-dot-float { 0%,100% { transform: translateY(5px) scale(.75); opacity: .4; } 50% { transform: translateY(-8px) scale(1.13); opacity: 1; } }

@media (max-width: 1120px) {
  .solutions-hero-layout, .service-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(405px, .86fr); gap: 37px; }.solutions-hero-art { min-height: 540px; }.solutions-hero h1 { font-size: clamp(47px, 5.2vw, 67px); }.solution-spotlight { gap: 50px; }.service-what-grid, .service-delivery-grid { gap: 55px; }.service-audience-grid { gap: 48px; }
}

@media (max-width: 780px) {
  .solutions-hero { min-height: auto; }.solutions-hero::after { height: 112px; }.solutions-hero-layout, .service-hero-layout { min-height: auto; grid-template-columns: 1fr; gap: 18px; padding-top: 113px; padding-bottom: 75px; }.solutions-hero-copy, .service-hero-copy { text-align: center; }.solutions-hero-copy .eyebrow, .service-hero-copy .eyebrow, .solutions-final-copy .section-kicker { justify-content: center; }.solutions-hero-overline { justify-content: center; margin-bottom: 17px; font-size: 7px; }.solutions-hero h1, .service-hero h1 { font-size: clamp(42px, 11.8vw, 59px); }.solutions-hero-copy > p:not(.eyebrow):not(.solutions-hero-overline):not(.solutions-hero-note), .service-hero-copy > p:not(.eyebrow) { margin-right: auto; margin-left: auto; font-size: 14px; line-height: 1.7; }.solutions-hero-copy .hero-actions, .service-hero-copy .hero-actions { margin-top: 25px; }.solutions-hero-note, .service-hero-trust { justify-content: center; }.solutions-hero-art { min-height: 411px; }.solutions-art-glow { top: 7%; left: 12%; width: 70%; }.solutions-art-orbit { left: 53%; }.solutions-art-orbit-one { width: 306px; height: 306px; }.solutions-art-orbit-two { width: 207px; height: 207px; }.solutions-foxbot { right: -6%; width: 111%; height: 108%; }.solutions-art-core { top: 38%; left: 4%; width: 143px; min-height: 108px; gap: 10px; padding: 12px; border-radius: 13px; }.solutions-art-core img { width: 91px; }.solutions-art-core small { font-size: 4.7px; }.solutions-art-token { gap: 5px; padding: 7px 8px; font-size: 5.7px; }.solutions-art-token svg { width: 12px; height: 12px; }.token-1 { top: 10%; left: 0; }.token-2 { top: 9%; right: 0; }.token-3 { right: 0; bottom: 23%; }.token-4 { bottom: 9%; left: 1%; }.solutions-art-status { right: 2%; bottom: 4%; font-size: 6.5px; }
  .solutions-intro-grid, .solutions-combinations-heading, .service-what-grid, .service-section-head, .service-audience-grid, .service-delivery-grid, .solutions-final-inner { grid-template-columns: 1fr; gap: 38px; }.solutions-intro-grid, .solutions-combinations-heading, .service-what-copy, .service-section-head, .service-audience-copy, .service-delivery-copy, .service-journey-heading, .service-more-heading, .solutions-directory-heading, .solutions-final-copy { text-align: center; }.solutions-intro-grid .section-kicker, .solutions-combinations-heading .section-kicker, .service-what-copy .section-kicker, .service-section-head .section-kicker, .service-audience-copy .section-kicker, .service-delivery-copy .section-kicker, .service-journey-heading .section-kicker, .service-more-heading .section-kicker, .solutions-directory-heading .section-kicker, .solutions-final-copy .section-kicker { justify-content: center; }.solutions-intro h2, .solutions-directory-heading h2, .solutions-combinations h2, .service-what h2, .service-section-head h2, .service-audience h2, .service-delivery h2, .service-journey h2, .service-more h2, .solutions-final-cta h2 { font-size: clamp(36px, 10.6vw, 52px); }.solutions-intro-grid > div:last-child > p, .solutions-combinations-heading > p, .service-section-head > p, .service-what-copy > p:not(.section-kicker), .service-audience-copy > p:not(.section-kicker), .service-delivery-copy > p:not(.section-kicker), .solutions-final-copy > p:not(.section-kicker) { margin-right: auto; margin-left: auto; font-size: 14px; }.solutions-intro-signals { justify-items: center; }
  .solutions-directory { padding-block: 85px; }.solutions-spotlights { margin-top: 45px; }.solution-spotlight, .solution-spotlight:nth-child(even) { grid-template-columns: 1fr; gap: 29px; min-height: 0; padding-block: 42px; text-align: center; }.solution-spotlight:nth-child(even) .solution-spotlight-copy { order: 0; }.solution-spotlight:nth-child(even) .solution-visual { order: 0; }.solution-spotlight-top { justify-content: center; }.solution-spotlight h3 { margin-top: 19px; font-size: 34px; }.solution-spotlight-copy > p { margin-inline: auto; font-size: 13px; }.solution-spotlight-tags { justify-content: center; }.solution-discover-link { margin-top: 23px; }.solution-visual, .solution-visual.is-compact { min-height: 286px; border-radius: 19px; }.solution-visual-orbit.orbit-a { width: 213px; height: 213px; }.solution-visual-orbit.orbit-b { width: 143px; height: 143px; }.solution-visual-panel { width: min(206px, 65%); padding: 12px; }.solution-visual-icon { width: 39px; height: 39px; margin-top: 13px; border-radius: 9px; }.solution-visual-panel strong { margin-top: 9px; font-size: 15px; }.solution-visual-panel p { font-size: 7px; }.solution-visual-meter { height: 21px; margin-top: 10px; }.solution-visual-panel-top { padding-bottom: 8px; font-size: 5px; }.solution-visual-panel-top small { font-size: 5px; }
  .solutions-combo-grid, .service-benefit-grid, .service-journey ol, .service-more-grid { grid-template-columns: 1fr; }.solutions-combo-grid article, .service-benefit-grid article, .service-journey li, .service-more-card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }.solutions-combo-grid article:last-child, .service-benefit-grid article:last-child, .service-journey li:last-child, .service-more-card:last-child { border-bottom: 0; }.solutions-combo-grid h3 { margin-top: 27px; }.solutions-combo-grid article > div { justify-content: center; }.service-benefit-grid { margin-top: 44px; }.service-benefit-grid article { min-height: 222px; padding: 24px; }.service-benefit-grid article > i { margin: 18px auto 0; }.service-benefit-grid article p { margin: 17px auto 0; }.service-benefit-grid article b { right: 0; left: 0; bottom: 18px; }.service-audience-visual { min-height: 338px; }.service-audience-ring-one { width: 232px; height: 232px; }.service-audience-ring-two { width: 155px; height: 155px; }.service-audience-center { width: 77px; height: 77px; border-radius: 14px; }.service-audience-copy ul { justify-items: center; text-align: left; }.service-delivery-copy .button { margin-top: 25px; }.service-delivery-list > div { grid-template-columns: 35px 1fr auto; gap: 8px; text-align: left; }.service-delivery-list p { font-size: 11px; }.service-journey ol { margin-top: 45px; }.service-journey li { min-height: 187px; padding: 24px; }.service-journey h3 { margin-top: 28px; font-size: 18px; }.service-journey p { font-size: 11px; }.service-more-grid { margin-top: 43px; }.service-more-card { text-align: left; }.service-hero { min-height: auto; }.service-hero::after { height: 105px; }.service-hero-art { min-height: 327px; }.service-hero-art .solution-visual { min-height: 326px; }.service-breadcrumb { margin-bottom: 20px; }.solutions-final-cta { padding-block: 86px; }.solutions-final-mark { min-height: 245px; }.solutions-final-ring-one { width: 214px; height: 214px; }.solutions-final-ring-two { width: 153px; height: 153px; }.solutions-final-logo { width: 111px; height: 102px; border-radius: 15px; }.solutions-final-logo img { width: 79px; }.solutions-final-ring::after { width: 5px; height: 5px; }.solutions-final-ring-two::after { width: 4px; height: 4px; }
}

@media (max-width: 390px) {
  .solutions-hero-layout, .service-hero-layout { padding-top: 103px; }.solutions-hero-art { min-height: 375px; }.solutions-art-token.token-2, .solutions-art-status { display: none; }.solutions-art-core { left: 0; }.service-hero-art { min-height: 295px; }.service-hero-art .solution-visual { min-height: 294px; }.solution-visual-panel { width: 192px; }.service-anchor-card { padding: 23px; }.service-anchor-card > p { margin-top: 31px; }.service-anchor-card strong { font-size: 21px; }.service-audience-visual { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-hero-grid, .solutions-hero-glow, .solutions-hero-overline i, .solutions-hero h1 em, .service-hero h1 em, .solutions-art-glow, .solutions-art-orbit i, .solutions-foxbot, .solutions-art-core, .solutions-art-token, .solutions-art-status i, .solution-visual-grid, .solution-visual-orbit i, .solution-visual-panel, .solution-visual-meter i, .solution-visual-signal, .solutions-final-grid, .solutions-final-ring, .solutions-final-logo, .solutions-final-logo::after, .solutions-final-logo img, .solutions-final-dot, .service-hero-grid, .service-hero-sun, .service-audience-ring, .service-audience-center, .audience-dot { animation: none !important; }
}

/* Projects page: an editorial portfolio for completed Foxfy work. */
.portfolio-page { background: var(--ink); }
.portfolio-page .desktop-nav a.is-current, .portfolio-page .mobile-menu a.is-current { color: #fff; }
.portfolio-page .desktop-nav a.is-current::after { width: 100%; }

.portfolio-hero { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 84% 48%, rgba(255,98,0,.21), transparent 25%), radial-gradient(circle at 15% 9%, rgba(255,255,255,.065), transparent 22%), linear-gradient(135deg, #08090b 0%, #0e1116 53%, #090a0d 100%); }
.portfolio-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 175px; background: linear-gradient(transparent, var(--ink)); content: ""; pointer-events: none; }
.portfolio-hero-grid { position: absolute; inset: 0; opacity: .43; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, black, rgba(0,0,0,.78) 55%, transparent 94%); animation: portfolio-grid-drift 20s linear infinite; }
.portfolio-hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }.portfolio-glow-a { top: -15%; right: -8%; width: min(820px, 74vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,106,0,.22), rgba(255,106,0,.055) 43%, transparent 69%); animation: portfolio-glow-breathe 7s ease-in-out infinite; }.portfolio-glow-b { bottom: -28%; left: 33%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,154,72,.1), transparent 67%); animation: portfolio-glow-breathe 9s ease-in-out -4s infinite; }
.portfolio-hero-layout { position: relative; z-index: 2; display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); align-items: center; gap: clamp(34px, 6vw, 90px); padding-top: 113px; padding-bottom: 83px; }
.portfolio-hero-copy { position: relative; z-index: 2; max-width: 685px; }.portfolio-hero-copy .eyebrow { margin-bottom: 14px; }.portfolio-hero-overline { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: #838a94; font-size: 8px; font-weight: 900; letter-spacing: .145em; }.portfolio-hero-overline i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 11px #70e8aa; animation: portfolio-status-pulse 2s ease-in-out infinite; }
.portfolio-hero h1 { max-width: 730px; font-size: clamp(49px, 5.7vw, 83px); font-weight: 760; line-height: .965; letter-spacing: -.06em; }.portfolio-hero h1 em { background: linear-gradient(108deg, #ff6a00 8%, #ffbd81 45%, #ff6a00 80%); background-clip: text; background-size: 220% 100%; color: transparent; animation: portfolio-title-shimmer 6s ease-in-out infinite; }.portfolio-hero-copy > p:not(.eyebrow):not(.portfolio-hero-overline):not(.portfolio-hero-proof) { max-width: 590px; margin: 26px 0 0; color: #b4b9c1; font-size: 16px; line-height: 1.78; }
.portfolio-hero-copy .hero-actions { margin-top: 31px; }.portfolio-hero-contact { color: #f4f5f5; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.035); box-shadow: none; }.portfolio-hero-contact:hover { border-color: rgba(255,154,72,.8); background: rgba(255,106,0,.1); }
.portfolio-hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 22px; margin: 27px 0 0; color: #9096a0; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.portfolio-hero-proof span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #d7dadf; }.portfolio-hero-proof i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 9px #70e8aa; }

.portfolio-hero-art { position: relative; min-height: 565px; isolation: isolate; perspective: 1100px; }.portfolio-art-orbit { position: absolute; z-index: -1; top: 50%; left: 52%; border: 1px solid rgba(255,117,28,.32); border-radius: 50%; transform: translate(-50%, -50%); }.portfolio-art-orbit i { position: absolute; inset: -1px; border-radius: inherit; animation: portfolio-orbit-spin 18s linear infinite; }.portfolio-art-orbit i::after { position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff994e; box-shadow: 0 0 17px 4px rgba(255,106,0,.65); content: ""; }.portfolio-art-orbit-one { width: 420px; height: 420px; box-shadow: 0 0 0 38px rgba(255,106,0,.04), 0 0 76px rgba(255,106,0,.16); }.portfolio-art-orbit-two { width: 277px; height: 277px; border-color: rgba(255,255,255,.12); }.portfolio-art-orbit-two i { animation-duration: 23s; animation-direction: reverse; }.portfolio-art-orbit-two i::after { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.65); }
.portfolio-file-card { position: absolute; overflow: hidden; border: 1px solid rgba(255,152,72,.31); border-radius: 20px; background: linear-gradient(145deg, rgba(32,36,44,.96), rgba(8,10,14,.94)); box-shadow: 0 28px 75px rgba(0,0,0,.44), 0 0 0 1px rgba(255,106,0,.06) inset; backdrop-filter: blur(15px); }.portfolio-file-card::after { position: absolute; top: -25%; bottom: -25%; left: -46%; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); content: ""; animation: portfolio-card-shine 6.4s ease-in-out infinite; }.portfolio-file-main { z-index: 2; top: 17%; left: 14%; width: min(331px, 68%); padding: 19px; transform: perspective(950px) rotateY(7deg) rotateX(2deg); animation: portfolio-main-card-float 6.4s ease-in-out infinite; }.portfolio-file-top, .portfolio-file-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }.portfolio-file-top { padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #9399a3; font-size: 7px; font-weight: 900; letter-spacing: .14em; }.portfolio-file-top span { display: flex; align-items: center; gap: 6px; }.portfolio-file-top span i { width: 5px; height: 5px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 8px #70e8aa; }.portfolio-file-top small { color: var(--orange-light); font-size: 7px; }.portfolio-file-mark { position: relative; z-index: 1; display: flex; align-items: end; gap: 15px; min-height: 159px; padding: 21px 0 17px; border-bottom: 1px solid var(--line); }.portfolio-file-mark::before { position: absolute; top: 14px; right: 4px; width: 104px; height: 104px; border: 1px solid rgba(255,106,0,.24); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,106,0,.035); content: ""; }.portfolio-file-mark > span { position: relative; color: var(--orange); font-size: 78px; font-weight: 780; line-height: .78; letter-spacing: -.09em; }.portfolio-file-mark b { position: relative; color: #f4f5f5; font-size: 15px; line-height: .98; letter-spacing: -.05em; }.portfolio-file-lines { position: relative; z-index: 1; display: flex; gap: 5px; height: 33px; align-items: end; margin-top: 16px; }.portfolio-file-lines i { display: block; width: 10px; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--orange-deep), var(--orange-light)); animation: portfolio-file-meter 2.8s ease-in-out infinite alternate; }.portfolio-file-lines i:nth-child(1) { height: 37%; }.portfolio-file-lines i:nth-child(2) { height: 63%; animation-delay: -.7s; }.portfolio-file-lines i:nth-child(3) { height: 92%; animation-delay: -1.4s; }.portfolio-file-bottom { margin-top: 15px; padding-top: 11px; border-top: 1px solid var(--line); color: #8a9099; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.portfolio-file-bottom svg { color: var(--orange-light); }
.portfolio-art-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(15,18,23,.82); box-shadow: 0 18px 48px rgba(0,0,0,.31); backdrop-filter: blur(14px); }.portfolio-art-label > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,106,0,.32); border-radius: 8px; color: var(--orange-light); background: rgba(255,106,0,.08); font-size: 8px; font-weight: 900; }.portfolio-art-label small, .portfolio-art-label b { display: block; }.portfolio-art-label small { color: #848b94; font-size: 6px; font-weight: 850; letter-spacing: .11em; }.portfolio-art-label b { margin-top: 3px; color: #edf0f2; font-size: 10px; }.label-beleza { top: 8%; right: -3%; animation: portfolio-label-float-a 5.8s ease-in-out infinite; }.label-luxam { bottom: 12%; left: 0; animation: portfolio-label-float-b 6.8s ease-in-out infinite; }.portfolio-art-status { position: absolute; z-index: 2; right: 8%; bottom: 4%; display: flex; align-items: center; gap: 7px; color: #969ca5; font-size: 8px; font-weight: 850; letter-spacing: .08em; }.portfolio-art-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: portfolio-status-pulse 1.8s ease-in-out infinite; }
.portfolio-scroll { position: absolute; z-index: 4; bottom: 23px; left: 50%; display: grid; justify-items: center; gap: 8px; color: #7b818a; font-size: 7px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; transform: translateX(-50%); }.portfolio-scroll i { position: relative; display: block; width: 1px; height: 28px; overflow: hidden; background: rgba(255,255,255,.14); }.portfolio-scroll i::after { position: absolute; top: -100%; left: 0; width: 100%; height: 56%; background: var(--orange); content: ""; animation: portfolio-scroll-line 2.1s ease-in-out infinite; }

.portfolio-intro { position: relative; overflow: hidden; color: #252a30; background: #f4f3ef; }.portfolio-intro::before { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 49%, transparent); content: ""; }.portfolio-intro::after { position: absolute; right: -11%; bottom: -39%; width: 600px; height: 600px; border: 1px solid rgba(255,106,0,.22); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,106,0,.035), 0 0 0 112px rgba(255,106,0,.018); content: ""; }.portfolio-intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); align-items: center; gap: clamp(48px, 10vw, 138px); }.portfolio-intro h2, .portfolio-cases-heading h2, .portfolio-way-heading h2, .portfolio-closing h2 { margin: 0; font-size: clamp(40px, 4.45vw, 64px); font-weight: 750; line-height: 1.01; letter-spacing: -.057em; }.portfolio-intro-copy > p { max-width: 520px; margin: 0; color: #697079; font-size: 15px; line-height: 1.8; }.portfolio-intro-points { display: grid; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(20,23,28,.13); }.portfolio-intro-points span { display: flex; align-items: center; gap: 9px; color: #3e444b; font-size: 12px; font-weight: 750; }.portfolio-intro-points svg { color: var(--orange-deep); }

.portfolio-cases { padding-block: clamp(96px, 12vw, 158px); background: #0d1014; }.portfolio-cases-heading { max-width: 720px; }.portfolio-cases-heading h2 { color: #f3f4f4; }.portfolio-case-list { display: grid; gap: clamp(74px, 10vw, 132px); margin-top: 70px; }.portfolio-case { display: grid; grid-template-columns: minmax(0, .93fr) minmax(410px, 1.07fr); align-items: center; gap: clamp(44px, 8vw, 118px); padding-top: clamp(54px, 7vw, 86px); border-top: 1px solid var(--line); }.portfolio-case-copy { min-width: 0; }.portfolio-case-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--orange-light); font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.portfolio-case-kicker span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,106,0,.36); border-radius: 7px; background: rgba(255,106,0,.08); }.portfolio-case-segment { margin: 21px 0 0; color: #808791; font-size: 8px; font-weight: 850; letter-spacing: .15em; }.portfolio-case h3 { max-width: 515px; margin: 11px 0 0; color: #f4f5f5; font-size: clamp(34px, 3.45vw, 51px); font-weight: 760; line-height: .98; letter-spacing: -.06em; }.portfolio-case-lead { max-width: 535px; margin: 22px 0 0; color: #b7bdc5; font-size: 15px; line-height: 1.75; }.portfolio-case-notes { display: grid; gap: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }.portfolio-case-notes > div { display: grid; grid-template-columns: 92px 1fr; gap: 17px; padding: 16px 0; border-bottom: 1px solid var(--line); }.portfolio-case-notes dt { color: var(--orange-light); font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.portfolio-case-notes dd { margin: 0; color: #a9afb8; font-size: 11px; line-height: 1.68; }.portfolio-case-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }.portfolio-case-tags span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #c9cdd2; background: rgba(255,255,255,.025); font-size: 9px; font-weight: 760; }.portfolio-case-actions { display: grid; justify-items: start; gap: 14px; margin-top: 29px; }.portfolio-project-link { display: inline-flex; min-height: 49px; align-items: center; gap: 11px; padding: 0 18px; border: 1px solid rgba(255,124,43,.62); border-radius: 10px; color: #fff; background: linear-gradient(130deg, var(--orange), var(--orange-deep)); box-shadow: 0 14px 31px rgba(232,77,0,.18); font-size: 11px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease; }.portfolio-project-link:hover { box-shadow: 0 18px 38px rgba(232,77,0,.32); transform: translateY(-2px); }.portfolio-project-link svg { transition: transform .2s ease; }.portfolio-project-link:hover svg { transform: translateX(4px); }.portfolio-case-actions > p { display: flex; align-items: center; gap: 7px; margin: 0; color: #939aa3; font-size: 9px; font-weight: 740; }.portfolio-case-actions > p svg { color: #70e8aa; }
.portfolio-case-visual { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; box-shadow: 0 29px 75px rgba(0,0,0,.27); }.beleza-case-visual { background: radial-gradient(circle at 18% 18%, rgba(246,201,131,.72), transparent 29%), linear-gradient(135deg, #21150c, #795128 44%, #17100b); }.case-browser-bar { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; height: 39px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(18,13,8,.73); backdrop-filter: blur(8px); }.case-browser-bar > span { display: flex; gap: 5px; }.case-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.31); }.case-browser-bar i:first-child { background: var(--orange-light); }.case-browser-bar b { color: rgba(255,255,255,.64); font-size: 7px; font-weight: 700; letter-spacing: .05em; }.beleza-case-stage { position: absolute; inset: 39px 0 0; display: grid; grid-template-columns: 1.06fr .94fr; overflow: hidden; background: linear-gradient(134deg, #f7ead8 0%, #eed4aa 53%, #be7e35 100%); }.beleza-case-stage::after { position: absolute; top: -21%; right: -26%; width: 335px; height: 335px; border: 1px solid rgba(96,59,22,.17); border-radius: 50%; box-shadow: 0 0 0 34px rgba(96,59,22,.045), 0 0 0 68px rgba(96,59,22,.026); content: ""; }.beleza-case-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 43px 14px 35px 43px; color: #4f3216; }.beleza-case-copy small { color: #875b29; font-family: Georgia, serif; font-size: 8px; letter-spacing: .18em; }.beleza-case-copy strong { margin-top: 16px; font-family: Georgia, serif; font-size: clamp(29px, 3.1vw, 42px); font-weight: 500; line-height: .9; letter-spacing: -.06em; }.beleza-case-copy strong em { color: #a26628; font-style: normal; }.beleza-case-copy p { max-width: 180px; margin: 18px 0 0; color: #6f4b28; font-size: 10px; line-height: 1.55; }.beleza-case-copy > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; color: #674219; font-size: 7px; font-weight: 900; letter-spacing: .1em; }.beleza-case-copy > span svg { color: #9d6027; }.beleza-case-products { position: relative; z-index: 2; display: flex; align-items: end; justify-content: center; gap: 10px; padding: 74px 20px 48px; background: linear-gradient(155deg, rgba(43,26,12,.16), rgba(74,39,12,.37)); }.beleza-case-products::before { position: absolute; bottom: 35px; left: 12%; width: 76%; height: 16px; border-radius: 50%; background: rgba(50,26,9,.28); filter: blur(8px); content: ""; }.beleza-case-products i { position: relative; z-index: 1; width: 34px; height: 167px; border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg, #7b4816, #f6d68b 40%, #b57425 68%, #73410e); box-shadow: inset 0 -37px rgba(77,43,9,.23), 0 16px 17px rgba(54,29,9,.2); transform: translateY(0); animation: portfolio-product-float 5.5s ease-in-out infinite; }.beleza-case-products i::before { position: absolute; top: -24px; left: 20%; width: 60%; height: 24px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #916124, #e8c66f, #8a581c); content: ""; }.beleza-case-products i:nth-child(2) { width: 44px; height: 211px; animation-delay: -.9s; }.beleza-case-products i:nth-child(3) { width: 27px; height: 143px; animation-delay: -1.8s; }.beleza-case-products i:nth-child(4) { width: 37px; height: 184px; animation-delay: -2.8s; }.beleza-case-logo-wrap { position: absolute; z-index: 4; right: 25px; bottom: 26px; display: grid; width: 90px; height: 57px; place-items: center; overflow: hidden; padding: 9px; border: 1px solid rgba(87,52,18,.25); border-radius: 10px; background: rgba(247,234,216,.72); box-shadow: 0 13px 27px rgba(56,33,9,.17); backdrop-filter: blur(9px); }.beleza-case-logo-wrap img { display: block; max-width: 100%; max-height: 38px; object-fit: contain; mix-blend-mode: multiply; }.case-live-badge { position: absolute; z-index: 5; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #f8f0e7; background: rgba(45,25,10,.62); box-shadow: 0 11px 26px rgba(52,28,8,.19); font-size: 7px; font-weight: 900; letter-spacing: .1em; }.case-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7eeeb2; box-shadow: 0 0 9px #7eeeb2; animation: portfolio-status-pulse 1.8s ease-in-out infinite; }
.portfolio-case-luxam { grid-template-columns: minmax(410px, 1.07fr) minmax(0, .93fr); }.luxam-case-visual { background: radial-gradient(circle at 50% 49%, rgba(255,180,81,.15), transparent 29%), linear-gradient(145deg, #0b0c0f, #21201d 56%, #0d0e11); }.luxam-case-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(242,202,121,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(242,202,121,.1) 1px, transparent 1px); background-size: 33px 33px; mask-image: radial-gradient(circle at 50% 51%, black, transparent 74%); animation: portfolio-grid-drift 15s linear infinite reverse; }.luxam-case-halo { position: absolute; top: 50%; left: 50%; width: 318px; height: 318px; border: 1px solid rgba(238,188,90,.32); border-radius: 50%; box-shadow: 0 0 0 30px rgba(238,188,90,.038), 0 0 0 60px rgba(238,188,90,.018), 0 0 70px rgba(238,188,90,.13); transform: translate(-50%, -50%); animation: portfolio-halo-breathe 6s ease-in-out infinite; }.luxam-case-watch { position: absolute; z-index: 2; top: 50%; left: 50%; width: 212px; height: 212px; border: 13px solid #b88a34; border-radius: 50%; background: radial-gradient(circle at 33% 24%, #6d572d, #1f1d19 59%, #0c0c0d 100%); box-shadow: inset 0 0 0 2px #e8c86f, inset 0 0 0 8px rgba(16,15,13,.78), 0 24px 43px rgba(0,0,0,.42), 0 0 42px rgba(227,170,57,.12); transform: translate(-50%, -50%) rotate(-12deg); animation: portfolio-watch-float 6.2s ease-in-out infinite; }.luxam-case-watch::before, .luxam-case-watch::after { position: absolute; top: 50%; left: 50%; width: 4px; border-radius: 99px; background: #e7c16a; transform-origin: 50% 0; content: ""; }.luxam-case-watch::before { height: 63px; transform: translate(-50%, 0) rotate(52deg); }.luxam-case-watch::after { height: 48px; background: #ab7b2e; transform: translate(-50%, 0) rotate(197deg); }.luxam-case-watch span { position: absolute; color: #d1aa50; font-family: Georgia, serif; font-size: 11px; }.luxam-case-watch span:nth-child(1) { top: 12px; left: 50%; transform: translateX(-50%); }.luxam-case-watch span:nth-child(2) { top: 50%; right: 14px; transform: translateY(-50%); }.luxam-case-watch span:nth-child(3) { bottom: 11px; left: 50%; transform: translateX(-50%); }.luxam-case-watch span:nth-child(4) { top: 50%; left: 14px; transform: translateY(-50%); }.luxam-case-watch i, .luxam-case-watch b, .luxam-case-watch em { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); }.luxam-case-watch i { z-index: 2; width: 12px; height: 12px; border: 2px solid #e5bf68; background: #2a251d; }.luxam-case-watch b { width: 150px; height: 150px; border: 1px solid rgba(231,193,104,.23); }.luxam-case-watch em { width: 176px; height: 176px; border: 1px solid rgba(231,193,104,.13); }.luxam-case-mark { position: absolute; z-index: 3; top: 13%; left: 8%; display: grid; gap: 4px; color: #e5c06a; }.luxam-case-mark small { font-size: 7px; font-weight: 800; letter-spacing: .18em; }.luxam-case-mark strong { color: #efdcaa; font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: .16em; }.luxam-case-mark span { color: #9c9a90; font-size: 7px; font-weight: 850; letter-spacing: .14em; }.luxam-case-caption { position: absolute; z-index: 3; right: 8%; bottom: 10%; display: flex; align-items: center; gap: 8px; color: #a19d92; font-size: 7px; font-weight: 850; letter-spacing: .12em; }.luxam-case-caption i { width: 24px; height: 1px; background: linear-gradient(90deg, #dcb465, transparent); }

.portfolio-way { position: relative; overflow: hidden; color: #252a30; background: #f7f7f5; }.portfolio-way::before { position: absolute; top: 14%; left: -14%; width: 410px; aspect-ratio: 1; border: 1px solid rgba(255,106,0,.18); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,106,0,.025), 0 0 72px rgba(255,106,0,.08); content: ""; }.portfolio-way .shell { position: relative; z-index: 1; }.portfolio-way-heading { display: grid; grid-template-columns: 1fr .64fr; align-items: end; gap: clamp(40px, 9vw, 130px); }.portfolio-way-heading > p { max-width: 420px; margin: 0 0 5px; color: #6b7179; font-size: 14px; line-height: 1.76; }.portfolio-way-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 66px; border-top: 1px solid rgba(20,23,28,.15); border-bottom: 1px solid rgba(20,23,28,.15); }.portfolio-way-grid article { position: relative; min-height: 290px; padding: 26px 30px 33px; border-right: 1px solid rgba(20,23,28,.15); transition: transform .25s ease, background .25s ease; }.portfolio-way-grid article:last-child { border-right: 0; }.portfolio-way-grid article:hover { z-index: 1; background: linear-gradient(145deg, rgba(255,106,0,.1), rgba(255,255,255,.7)); transform: translateY(-8px); }.portfolio-way-grid article > span { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .13em; }.portfolio-way-grid article > i { display: grid; width: 42px; height: 42px; place-items: center; margin-top: 24px; border: 1px solid rgba(255,106,0,.35); border-radius: 11px; color: var(--orange-deep); background: rgba(255,106,0,.08); }.portfolio-way-grid h3 { margin: 27px 0 11px; color: #282d33; font-size: 20px; font-weight: 780; letter-spacing: -.04em; }.portfolio-way-grid p { max-width: 290px; margin: 0; color: #697079; font-size: 12px; line-height: 1.72; }.portfolio-way-grid b { position: absolute; right: 30px; bottom: 25px; left: 30px; height: 1px; overflow: hidden; background: rgba(20,23,28,.16); }.portfolio-way-grid b::after { position: absolute; left: 0; width: 35%; height: 100%; background: var(--orange-deep); content: ""; transition: width .28s ease; }.portfolio-way-grid article:hover b::after { width: 100%; }

.portfolio-closing { position: relative; overflow: hidden; padding-block: clamp(98px, 12vw, 158px); background: radial-gradient(circle at 80% 53%, rgba(255,106,0,.28), transparent 24%), #0b0d10; }.portfolio-closing-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 53px 53px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); animation: portfolio-grid-drift 17s linear infinite; }.portfolio-closing-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 45px; }.portfolio-closing-copy > p:not(.section-kicker) { max-width: 590px; margin: 25px 0 0; color: #afb4bc; font-size: 15px; line-height: 1.75; }.portfolio-closing-art { position: relative; min-height: 360px; isolation: isolate; }.portfolio-closing-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.47); border-radius: 50%; transform: translate(-50%, -50%); }.portfolio-closing-ring.ring-one { width: 306px; height: 306px; box-shadow: 0 0 0 32px rgba(255,106,0,.05), 0 0 70px rgba(255,106,0,.22); animation: portfolio-closing-orbit-a 18s linear infinite; }.portfolio-closing-ring.ring-two { width: 208px; height: 208px; border-color: rgba(255,255,255,.15); animation: portfolio-closing-orbit-b 22s linear infinite; }.portfolio-closing-ring::after { position: absolute; top: 11%; right: 11%; width: 7px; height: 7px; border-radius: 50%; background: #ff9347; box-shadow: 0 0 15px 4px rgba(255,106,0,.64); content: ""; }.portfolio-closing-ring.ring-two::after { top: auto; right: auto; bottom: 9%; left: 16%; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.72); }.portfolio-closing-logo { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 157px; height: 142px; place-items: center; border: 1px solid rgba(255,157,83,.34); border-radius: 20px; background: linear-gradient(145deg, #2a2d33, #090b0f 72%); box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.07) inset, 0 0 34px rgba(255,106,0,.15); transform: translate(-50%, -50%) rotate(7deg); animation: portfolio-closing-logo-float 6.2s ease-in-out infinite; }.portfolio-closing-logo img { width: 114px; height: auto; filter: drop-shadow(0 8px 13px rgba(0,0,0,.4)); }.portfolio-closing-dot { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: portfolio-closing-dot 4.2s ease-in-out infinite; }.portfolio-closing-dot.dot-one { top: 22%; left: 30%; }.portfolio-closing-dot.dot-two { right: 18%; bottom: 21%; width: 11px; height: 11px; animation-delay: -1.7s; }

@keyframes portfolio-grid-drift { to { background-position: 64px 64px; } }
@keyframes portfolio-glow-breathe { 0%,100% { opacity: .58; transform: scale(.94); } 50% { opacity: .98; transform: scale(1.07); } }
@keyframes portfolio-status-pulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes portfolio-title-shimmer { 0%,22%,100% { background-position: 100% 50%; } 57% { background-position: 0 50%; } }
@keyframes portfolio-orbit-spin { to { transform: rotate(360deg); } }
@keyframes portfolio-card-shine { 0%,68% { left: -46%; opacity: 0; } 78% { opacity: 1; } 96%,100% { left: 126%; opacity: 0; } }
@keyframes portfolio-main-card-float { 0%,100% { transform: perspective(950px) rotateY(7deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(950px) rotateY(7deg) rotateX(2deg) translateY(-11px); } }
@keyframes portfolio-file-meter { from { transform: scaleY(.72); } to { transform: scaleY(1); } }
@keyframes portfolio-label-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes portfolio-label-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes portfolio-scroll-line { 0% { top: -100%; } 58%,100% { top: 100%; } }
@keyframes portfolio-product-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes portfolio-halo-breathe { 0%,100% { opacity: .68; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes portfolio-watch-float { 0%,100% { transform: translate(-50%, -50%) rotate(-12deg) translateY(0); } 50% { transform: translate(-50%, -50%) rotate(-9deg) translateY(-12px); } }
@keyframes portfolio-closing-orbit-a { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes portfolio-closing-orbit-b { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes portfolio-closing-logo-float { 0%,100% { transform: translate(-50%, -50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%, -50%) rotate(4deg) translateY(-10px); } }
@keyframes portfolio-closing-dot { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.18); } }

@media (max-width: 980px) {
  .portfolio-hero-layout { grid-template-columns: minmax(0, .96fr) minmax(355px, 1.04fr); gap: 28px; }.portfolio-hero-art { min-height: 515px; }.portfolio-file-main { left: 8%; }.portfolio-case, .portfolio-case-luxam { grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr); gap: 42px; }.portfolio-case-visual { min-height: 455px; }.beleza-case-copy { padding-left: 30px; }.beleza-case-products { padding-right: 14px; padding-left: 14px; }.beleza-case-products i { width: 28px; height: 142px; }.beleza-case-products i:nth-child(2) { width: 37px; height: 177px; }.beleza-case-products i:nth-child(3) { width: 23px; height: 123px; }.beleza-case-products i:nth-child(4) { width: 31px; height: 156px; }
}

@media (max-width: 780px) {
  .portfolio-hero { min-height: auto; }.portfolio-hero-layout { min-height: auto; grid-template-columns: 1fr; gap: 23px; padding-top: 117px; padding-bottom: 66px; }.portfolio-hero-copy { text-align: center; }.portfolio-hero-copy .eyebrow, .portfolio-hero-overline { justify-content: center; }.portfolio-hero h1 { margin-inline: auto; font-size: clamp(43px, 12.4vw, 61px); }.portfolio-hero-copy > p:not(.eyebrow):not(.portfolio-hero-overline):not(.portfolio-hero-proof) { margin-right: auto; margin-left: auto; font-size: 14px; }.portfolio-hero-proof { justify-content: center; font-size: 8px; }.portfolio-hero-art { width: min(100%, 515px); min-height: 393px; margin-inline: auto; }.portfolio-art-orbit-one { width: 300px; height: 300px; }.portfolio-art-orbit-two { width: 205px; height: 205px; }.portfolio-file-main { top: 16%; left: 12%; width: min(270px, 67%); padding: 14px; }.portfolio-file-mark { min-height: 126px; padding: 17px 0 13px; }.portfolio-file-mark > span { font-size: 61px; }.portfolio-file-mark b { font-size: 12px; }.portfolio-file-mark::before { width: 83px; height: 83px; }.portfolio-file-lines { height: 24px; margin-top: 11px; }.portfolio-file-bottom { margin-top: 11px; padding-top: 9px; }.portfolio-art-label { padding: 9px 10px; }.label-beleza { top: 5%; right: -2%; }.label-luxam { bottom: 8%; left: 0; }.portfolio-art-status { right: 5%; bottom: 2%; font-size: 7px; }.portfolio-scroll { display: none; }
  .portfolio-intro-grid, .portfolio-way-heading, .portfolio-closing-inner { grid-template-columns: 1fr; gap: 35px; text-align: center; }.portfolio-intro-grid .section-kicker, .portfolio-way-heading .section-kicker, .portfolio-closing-copy .section-kicker { justify-content: center; }.portfolio-intro h2, .portfolio-cases-heading h2, .portfolio-way-heading h2, .portfolio-closing h2 { font-size: clamp(36px, 10.6vw, 52px); }.portfolio-intro-copy > p, .portfolio-way-heading > p, .portfolio-closing-copy > p:not(.section-kicker) { margin-right: auto; margin-left: auto; font-size: 14px; }.portfolio-intro-points { justify-items: center; }
  .portfolio-cases { padding-block: 84px; }.portfolio-cases-heading { margin-inline: auto; text-align: center; }.portfolio-cases-heading .section-kicker { justify-content: center; }.portfolio-case-list { gap: 74px; margin-top: 48px; }.portfolio-case, .portfolio-case-luxam { grid-template-columns: 1fr; gap: 34px; padding-top: 47px; text-align: center; }.portfolio-case-luxam .portfolio-case-visual { order: 0; }.portfolio-case-copy { max-width: 570px; margin-inline: auto; }.portfolio-case-kicker { justify-content: center; }.portfolio-case-lead { margin-right: auto; margin-left: auto; font-size: 14px; }.portfolio-case-notes > div { grid-template-columns: 1fr; gap: 7px; }.portfolio-case-tags { justify-content: center; }.portfolio-case-actions { justify-items: center; }.portfolio-case-visual { min-height: 386px; order: -1; }.portfolio-case-luxam .portfolio-case-visual { order: -1; }.beleza-case-copy { padding: 35px 10px 30px 28px; text-align: left; }.beleza-case-copy strong { font-size: 31px; }.beleza-case-copy p { font-size: 9px; }.beleza-case-products { gap: 7px; padding: 62px 15px 43px; }.beleza-case-products i { width: 24px; height: 118px; }.beleza-case-products i:nth-child(2) { width: 33px; height: 151px; }.beleza-case-products i:nth-child(3) { width: 20px; height: 102px; }.beleza-case-products i:nth-child(4) { width: 27px; height: 132px; }.beleza-case-logo-wrap { right: 17px; bottom: 18px; width: 75px; height: 50px; }.case-live-badge { bottom: 16px; left: 16px; }.luxam-case-watch { width: 175px; height: 175px; border-width: 11px; }.luxam-case-watch b { width: 121px; height: 121px; }.luxam-case-watch em { width: 145px; height: 145px; }.luxam-case-watch::before { height: 51px; }.luxam-case-watch::after { height: 39px; }.luxam-case-halo { width: 257px; height: 257px; }.luxam-case-mark { top: 10%; left: 7%; }.luxam-case-caption { right: 6%; bottom: 8%; }
  .portfolio-way-grid { grid-template-columns: 1fr; margin-top: 48px; }.portfolio-way-grid article { min-height: 0; padding: 27px 24px 37px; border-right: 0; border-bottom: 1px solid rgba(20,23,28,.15); }.portfolio-way-grid article:last-child { border-bottom: 0; }.portfolio-way-grid article > i { margin-right: auto; margin-left: auto; }.portfolio-way-grid p { margin-right: auto; margin-left: auto; }.portfolio-way-grid b { right: 24px; left: 24px; }.portfolio-closing-art { min-height: 255px; }.portfolio-closing-ring.ring-one { width: 215px; height: 215px; }.portfolio-closing-ring.ring-two { width: 151px; height: 151px; }.portfolio-closing-logo { width: 112px; height: 103px; border-radius: 15px; }.portfolio-closing-logo img { width: 80px; }.portfolio-closing-copy { text-align: center; }
}

@media (max-width: 390px) {
  .portfolio-hero-layout { padding-top: 107px; }.portfolio-file-main { left: 7%; }.label-beleza { right: -6%; }.portfolio-art-label b { font-size: 9px; }.portfolio-art-label small { font-size: 5px; }.portfolio-case-visual { min-height: 350px; }.beleza-case-copy { padding-left: 21px; }.beleza-case-copy strong { font-size: 28px; }.beleza-case-products { padding-right: 8px; padding-left: 8px; }.portfolio-project-link { width: 100%; justify-content: center; }.luxam-case-mark strong { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-hero-grid, .portfolio-hero-glow, .portfolio-hero-overline i, .portfolio-hero h1 em, .portfolio-art-orbit i, .portfolio-file-card::after, .portfolio-file-main, .portfolio-file-lines i, .portfolio-art-label, .portfolio-art-status i, .portfolio-scroll i::after, .beleza-case-products i, .case-live-badge i, .luxam-case-grid, .luxam-case-halo, .luxam-case-watch, .portfolio-closing-grid, .portfolio-closing-ring, .portfolio-closing-logo, .portfolio-closing-dot { animation: none !important; }
}

/* Store page: a premium, WooCommerce-ready catalog for Foxfy templates. */
.store-page { background: var(--ink); }
.store-page .desktop-nav a.is-current, .store-page .mobile-menu a.is-current { color: #fff; }
.store-page .desktop-nav a.is-current::after { width: 100%; }

.store-hero { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 86% 46%, rgba(255,97,0,.23), transparent 25%), radial-gradient(circle at 17% 9%, rgba(255,255,255,.065), transparent 22%), linear-gradient(135deg, #07080a 0%, #11141a 54%, #090a0d 100%); }.store-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 175px; background: linear-gradient(transparent, var(--ink)); content: ""; pointer-events: none; }.store-hero-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.046) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.046) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(90deg, black, rgba(0,0,0,.78) 55%, transparent 94%); animation: store-grid-drift 21s linear infinite; }.store-hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }.store-glow-a { top: -14%; right: -9%; width: min(830px, 75vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,106,0,.23), rgba(255,106,0,.055) 42%, transparent 69%); animation: store-glow-breathe 7.2s ease-in-out infinite; }.store-glow-b { bottom: -29%; left: 34%; width: 470px; height: 470px; background: radial-gradient(circle, rgba(255,151,67,.11), transparent 67%); animation: store-glow-breathe 9.4s ease-in-out -4s infinite; }
.store-hero-layout { position: relative; z-index: 2; display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); align-items: center; gap: clamp(34px, 6vw, 90px); padding-top: 113px; padding-bottom: 83px; }.store-hero-copy { position: relative; z-index: 2; max-width: 700px; }.store-hero-copy .eyebrow { margin-bottom: 14px; }.store-hero-overline { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: #838a94; font-size: 8px; font-weight: 900; letter-spacing: .145em; }.store-hero-overline i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 11px #70e8aa; animation: store-status-pulse 2s ease-in-out infinite; }.store-hero h1 { max-width: 743px; font-size: clamp(48px, 5.55vw, 81px); font-weight: 760; line-height: .965; letter-spacing: -.06em; }.store-hero h1 em { background: linear-gradient(108deg, #ff6a00 8%, #ffbd81 45%, #ff6a00 80%); background-clip: text; background-size: 220% 100%; color: transparent; animation: store-title-shimmer 6s ease-in-out infinite; }.store-hero-copy > p:not(.eyebrow):not(.store-hero-overline):not(.store-hero-notes) { max-width: 590px; margin: 26px 0 0; color: #b4b9c1; font-size: 16px; line-height: 1.78; }.store-hero-copy .hero-actions { margin-top: 31px; }.store-hero-contact { border-color: rgba(255,255,255,.22); color: #f4f5f5; background: rgba(255,255,255,.035); box-shadow: none; }.store-hero-contact:hover { border-color: rgba(255,154,72,.8); background: rgba(255,106,0,.1); }.store-hero-notes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 26px 0 0; color: #aeb3bb; font-size: 10px; font-weight: 720; }.store-hero-notes span { display: inline-flex; align-items: center; gap: 7px; }.store-hero-notes svg { color: #70e8aa; }
.store-hero-art { position: relative; min-height: 565px; isolation: isolate; perspective: 1100px; }.store-hero-orbit { position: absolute; z-index: -1; top: 50%; left: 52%; border: 1px solid rgba(255,117,28,.32); border-radius: 50%; transform: translate(-50%, -50%); }.store-hero-orbit i { position: absolute; inset: -1px; border-radius: inherit; animation: store-orbit-spin 18s linear infinite; }.store-hero-orbit i::after { position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff994e; box-shadow: 0 0 17px 4px rgba(255,106,0,.65); content: ""; }.store-orbit-one { width: 426px; height: 426px; box-shadow: 0 0 0 39px rgba(255,106,0,.04), 0 0 78px rgba(255,106,0,.16); }.store-orbit-two { width: 282px; height: 282px; border-color: rgba(255,255,255,.12); }.store-orbit-two i { animation-duration: 23s; animation-direction: reverse; }.store-orbit-two i::after { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.65); }.store-hero-window { position: absolute; z-index: 2; top: 15%; left: 12%; width: min(368px, 76%); overflow: hidden; border: 1px solid rgba(255,153,73,.32); border-radius: 20px; background: linear-gradient(145deg, rgba(31,35,43,.97), rgba(7,9,13,.94)); box-shadow: 0 28px 75px rgba(0,0,0,.44), 0 0 0 1px rgba(255,106,0,.06) inset; backdrop-filter: blur(15px); transform: perspective(950px) rotateY(7deg) rotateX(2deg); animation: store-window-float 6.5s ease-in-out infinite; }.store-hero-window::after { position: absolute; top: -25%; bottom: -25%; left: -46%; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); content: ""; animation: store-card-shine 6.4s ease-in-out infinite; }.store-window-top { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: #8d949d; font-size: 6px; font-weight: 900; letter-spacing: .1em; }.store-window-top > span { display: flex; gap: 4px; }.store-window-top > span i { width: 5px; height: 5px; border-radius: 50%; background: #555c66; }.store-window-top > span i:first-child { background: var(--orange); }.store-window-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.store-window-top small { color: var(--orange-light); font-size: 6px; }.store-window-body { position: relative; z-index: 1; display: grid; min-height: 275px; grid-template-columns: 1.12fr .88fr; overflow: hidden; background: radial-gradient(circle at 75% 18%, rgba(255,119,35,.2), transparent 29%), #15181e; }.store-window-body::after { position: absolute; right: -24%; bottom: -40%; width: 232px; height: 232px; border: 1px solid rgba(255,106,0,.21); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,106,0,.038), 0 0 0 48px rgba(255,106,0,.017); content: ""; }.store-window-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 25px 0 25px 23px; }.store-window-copy small { color: var(--orange-light); font-size: 7px; font-weight: 900; letter-spacing: .14em; }.store-window-copy strong { margin-top: 12px; color: #f2f3f4; font-size: 24px; font-weight: 750; line-height: .95; letter-spacing: -.06em; }.store-window-copy strong em { color: var(--orange-light); font-style: normal; }.store-window-copy p { max-width: 186px; margin: 15px 0 0; color: #a6adb6; font-size: 9px; line-height: 1.55; }.store-window-copy > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #f2b278; font-size: 6px; font-weight: 900; letter-spacing: .1em; }.store-window-cards { position: relative; z-index: 1; display: grid; align-content: center; gap: 7px; padding: 23px 15px 23px 7px; }.store-mini-card { display: grid; gap: 2px; min-height: 58px; align-content: end; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font-style: normal; box-shadow: 0 10px 23px rgba(0,0,0,.2); }.store-mini-card b { font-size: 9px; letter-spacing: -.04em; }.store-mini-card span { font-size: 5px; font-weight: 850; letter-spacing: .12em; }.store-mini-card.card-a { background: linear-gradient(135deg, #203142, #17202b); }.store-mini-card.card-b { margin-left: 10px; background: linear-gradient(135deg, #7b4d46, #d9a48c); }.store-mini-card.card-c { background: linear-gradient(135deg, #18505b, #4ba0a4); }.store-hero-pill { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(15,18,23,.82); box-shadow: 0 18px 48px rgba(0,0,0,.31); backdrop-filter: blur(14px); }.store-hero-pill > i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 10px #70e8aa; animation: store-status-pulse 1.8s ease-in-out infinite; }.pill-ready { top: 8%; right: -2%; color: #d9dde1; font-size: 7px; font-weight: 850; letter-spacing: .1em; animation: store-pill-float-a 5.9s ease-in-out infinite; }.pill-digital { bottom: 12%; left: -1%; color: #e3e6e9; animation: store-pill-float-b 6.7s ease-in-out infinite; }.pill-digital svg { color: var(--orange-light); }.pill-digital span { display: grid; gap: 2px; color: #8e959f; font-size: 7px; font-weight: 700; }.pill-digital b { color: #eff1f2; font-size: 9px; }.store-hero-label { position: absolute; z-index: 3; right: 2%; bottom: 4%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,155,76,.28); border-radius: 12px; background: rgba(18,19,22,.76); box-shadow: 0 17px 42px rgba(0,0,0,.25); backdrop-filter: blur(12px); animation: store-label-float 6.1s ease-in-out infinite; }.store-hero-label > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,106,0,.32); border-radius: 8px; color: var(--orange-light); background: rgba(255,106,0,.08); font-size: 8px; font-weight: 900; }.store-hero-label small, .store-hero-label b { display: block; }.store-hero-label small { color: #848b94; font-size: 6px; font-weight: 850; letter-spacing: .11em; }.store-hero-label b { max-width: 129px; margin-top: 3px; color: #edf0f2; font-size: 9px; line-height: 1.2; }.store-scroll { position: absolute; z-index: 4; bottom: 23px; left: 50%; display: grid; justify-items: center; gap: 8px; color: #7b818a; font-size: 7px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; transform: translateX(-50%); }.store-scroll i { position: relative; display: block; width: 1px; height: 28px; overflow: hidden; background: rgba(255,255,255,.14); }.store-scroll i::after { position: absolute; top: -100%; left: 0; width: 100%; height: 56%; background: var(--orange); content: ""; animation: store-scroll-line 2.1s ease-in-out infinite; }

.store-intro { position: relative; overflow: hidden; color: #252a30; background: #f4f3ef; }.store-intro::before { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 49%, transparent); content: ""; }.store-intro::after { position: absolute; right: -11%; bottom: -39%; width: 600px; height: 600px; border: 1px solid rgba(255,106,0,.22); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,106,0,.035), 0 0 0 112px rgba(255,106,0,.018); content: ""; }.store-intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); align-items: center; gap: clamp(48px, 10vw, 138px); }.store-intro h2, .store-catalog-heading h2, .store-personalization h2, .store-woocommerce h2, .store-closing h2 { margin: 0; font-size: clamp(40px, 4.45vw, 64px); font-weight: 750; line-height: 1.01; letter-spacing: -.057em; }.store-intro-copy > p { max-width: 520px; margin: 0; color: #697079; font-size: 15px; line-height: 1.8; }.store-intro-points { display: grid; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(20,23,28,.13); }.store-intro-points span { display: flex; align-items: center; gap: 10px; color: #3e444b; font-size: 12px; font-weight: 750; }.store-intro-points svg { color: var(--orange-deep); }

.store-catalog { position: relative; padding-block: clamp(94px, 11.5vw, 155px); overflow: hidden; color: #24292f; background: #eeede8; }.store-catalog::before { position: absolute; top: 7%; right: -16%; width: 480px; height: 480px; border: 1px solid rgba(255,106,0,.15); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,106,0,.023), 0 0 78px rgba(255,106,0,.06); content: ""; }.store-catalog .shell { position: relative; z-index: 1; }.store-catalog-heading { display: grid; grid-template-columns: 1fr .66fr; align-items: end; gap: clamp(39px, 8vw, 116px); }.store-catalog-heading > p { max-width: 425px; margin: 0 0 5px; color: #687079; font-size: 14px; line-height: 1.76; }.store-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 55px; padding: 15px 0; border-top: 1px solid rgba(20,23,28,.15); border-bottom: 1px solid rgba(20,23,28,.15); }.store-catalog-toolbar > p { margin: 0; color: #6e747b; font-size: 10px; font-weight: 720; }.store-catalog-toolbar > p strong { margin-right: 5px; color: var(--orange-deep); font-size: 15px; }.store-filter-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.store-filter-list button { padding: 8px 11px; border: 1px solid #c7c9c9; border-radius: 999px; color: #5f656b; background: transparent; font-size: 9px; font-weight: 850; transition: color .2s ease, border-color .2s ease, background .2s ease; }.store-filter-list button:hover, .store-filter-list button.is-active { border-color: #292e34; color: #fff; background: #292e34; }.store-filter-list button:focus-visible, .store-template-cta:focus-visible, .store-template-link:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }.store-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }.store-template-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(26,30,35,.12); border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: 0 21px 45px rgba(29,33,39,.085); transition: transform .27s ease, border-color .27s ease, box-shadow .27s ease; }.store-template-card:hover { z-index: 1; border-color: rgba(255,106,0,.54); box-shadow: 0 29px 60px rgba(29,33,39,.15); transform: translateY(-7px); }.store-template-preview { position: relative; min-height: 250px; overflow: hidden; color: #fff; }.store-template-preview::after { position: absolute; right: -14%; bottom: -38%; width: 190px; height: 190px; border: 1px solid currentColor; border-radius: 50%; opacity: .16; box-shadow: 0 0 0 22px currentColor, 0 0 0 44px currentColor; content: ""; }.store-preview-browser { position: relative; z-index: 2; display: flex; height: 30px; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.68); background: rgba(0,0,0,.16); font-size: 6px; font-weight: 850; letter-spacing: .09em; }.store-preview-browser > span { display: flex; gap: 4px; }.store-preview-browser i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }.store-preview-content { position: relative; z-index: 2; display: flex; height: 220px; flex-direction: column; justify-content: center; padding: 23px; }.store-preview-content small { font-size: 7px; font-weight: 850; letter-spacing: .14em; }.store-preview-content strong { max-width: 235px; margin-top: 12px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: .97; letter-spacing: -.05em; }.store-preview-content p { max-width: 195px; margin: 13px 0 0; font-size: 9px; line-height: 1.55; }.store-preview-content > i { display: inline-flex; align-items: center; gap: 5px; margin-top: 17px; font-style: normal; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.store-preview-shape { position: absolute; z-index: 1; border-radius: 50%; }.store-preview-shape.shape-one { top: 23%; right: 9%; width: 112px; height: 112px; border: 1px solid currentColor; opacity: .32; }.store-preview-shape.shape-two { right: 22%; bottom: -7%; width: 87px; height: 87px; background: currentColor; opacity: .12; }.store-preview-index { position: absolute; z-index: 2; right: 18px; bottom: 14px; font-size: 25px; font-weight: 800; letter-spacing: -.07em; opacity: .72; }.preview-advocacia { color: #dcc184; background: radial-gradient(circle at 79% 29%, rgba(223,196,132,.24), transparent 19%), linear-gradient(138deg, #182536, #101824); }.preview-advocacia .store-preview-content p { color: #c6cbd2; }.preview-beleza { color: #fff0e4; background: radial-gradient(circle at 81% 24%, rgba(255,234,215,.4), transparent 19%), linear-gradient(140deg, #754b44, #cd997e); }.preview-beleza .store-preview-content p { color: #f8ded0; }.preview-saude { color: #eaf8f7; background: radial-gradient(circle at 76% 24%, rgba(230,255,252,.25), transparent 20%), linear-gradient(140deg, #17606b, #4f9c9e); }.preview-saude .store-preview-content p { color: #cfebea; }.preview-fitness { color: #ffa24a; background: radial-gradient(circle at 78% 27%, rgba(255,106,0,.25), transparent 21%), linear-gradient(140deg, #161719, #33363c); }.preview-fitness .store-preview-content p { color: #c2c7ce; }.preview-imobiliaria { color: #4e371d; background: radial-gradient(circle at 76% 25%, rgba(255,254,242,.58), transparent 21%), linear-gradient(140deg, #d4b77d, #f3e4ba); }.preview-imobiliaria .store-preview-browser { color: rgba(72,49,20,.68); background: rgba(255,255,255,.25); }.preview-imobiliaria .store-preview-content p { color: #6b5335; }.preview-comercio { color: #f0e7d0; background: radial-gradient(circle at 78% 25%, rgba(235,215,157,.25), transparent 21%), linear-gradient(140deg, #1c4238, #496b4e); }.preview-comercio .store-preview-content p { color: #d9dfce; }.store-template-content { display: flex; flex: 1; flex-direction: column; padding: 21px 20px 19px; }.store-template-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.store-template-top > span { color: var(--orange-deep); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.store-template-top > i { padding: 5px 7px; border: 1px solid rgba(255,106,0,.24); border-radius: 999px; color: #a7581d; background: rgba(255,106,0,.065); font-size: 7px; font-style: normal; font-weight: 850; white-space: nowrap; }.store-template-content h3 { margin: 16px 0 8px; color: #282d33; font-size: 22px; font-weight: 780; letter-spacing: -.05em; }.store-template-content > p { margin: 0; color: #697078; font-size: 11px; line-height: 1.68; }.store-template-meta { display: flex; flex-wrap: wrap; gap: 8px 11px; margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(23,27,32,.12); }.store-template-meta span { display: inline-flex; align-items: center; gap: 5px; color: #545b63; font-size: 9px; font-weight: 760; }.store-template-meta svg { color: var(--orange-deep); }.store-template-content ul { display: grid; gap: 7px; margin: 17px 0 0; padding: 0; list-style: none; }.store-template-content li { display: flex; align-items: center; gap: 6px; color: #646b72; font-size: 10px; line-height: 1.4; }.store-template-content li svg { flex: none; color: var(--orange-deep); }.store-template-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }.store-template-cta { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(255,106,0,.66); border-radius: 9px; color: #fff; background: linear-gradient(130deg, var(--orange), var(--orange-deep)); box-shadow: 0 11px 24px rgba(232,77,0,.16); font-size: 10px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease; }.store-template-cta:hover { box-shadow: 0 15px 30px rgba(232,77,0,.29); transform: translateY(-2px); }.store-template-cta svg { transition: transform .2s ease; }.store-template-cta:hover svg { transform: translateX(3px); }.store-template-link { padding-bottom: 4px; border-bottom: 1px solid #a5a9ad; color: #51575e; font-size: 9px; font-weight: 820; }.store-template-link:hover { border-color: var(--orange-deep); color: var(--orange-deep); }.store-template-future { display: flex; align-items: center; gap: 6px; margin: 16px 0 0 !important; padding-top: 13px; border-top: 1px solid rgba(23,27,32,.1); color: #8b9198 !important; font-size: 8px !important; font-weight: 700; }.store-template-future svg { color: var(--orange-deep); }

.store-personalization { position: relative; overflow: hidden; background: #101318; }.store-personalization::before { position: absolute; inset: 0; opacity: .29; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, black, transparent 76%); content: ""; }.store-personalization-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px, .97fr) minmax(0, 1.03fr); align-items: center; gap: clamp(55px, 9vw, 130px); }.store-personalization-visual { position: relative; min-height: 510px; isolation: isolate; }.store-personalization-gridlines { position: absolute; inset: 6% 0 4% 0; border: 1px solid rgba(255,106,0,.16); background-image: linear-gradient(rgba(255,106,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,0,.1) 1px, transparent 1px); background-size: 31px 31px; mask-image: radial-gradient(circle at 53% 50%, black, transparent 70%); transform: perspective(900px) rotateY(11deg) rotateX(3deg); }.store-personalization-card { position: absolute; overflow: hidden; border: 1px solid rgba(255,151,70,.3); border-radius: 17px; background: linear-gradient(145deg, rgba(31,35,43,.96), rgba(8,10,14,.93)); box-shadow: 0 25px 64px rgba(0,0,0,.38), 0 0 0 1px rgba(255,106,0,.05) inset; backdrop-filter: blur(14px); }.store-personalization-card.card-base { z-index: 2; top: 14%; left: 8%; width: 260px; min-height: 260px; padding: 20px; transform: perspective(900px) rotateY(7deg) rotateX(2deg); animation: store-base-card-float 6.3s ease-in-out infinite; }.store-personalization-card.card-base small, .store-personalization-card.card-brand small { display: block; color: #8f969f; font-size: 7px; font-weight: 900; letter-spacing: .13em; }.store-personalization-card.card-base b { display: block; margin-top: 19px; color: #f1f2f3; font-size: 22px; line-height: .96; letter-spacing: -.06em; }.store-personalization-card.card-base > i { display: block; height: 9px; margin-top: 22px; border-radius: 5px; background: linear-gradient(90deg, var(--orange), #f5b06b); }.store-personalization-card.card-base > i:nth-of-type(2) { width: 74%; margin-top: 10px; opacity: .57; }.store-personalization-card.card-base > i:nth-of-type(3) { width: 51%; margin-top: 10px; opacity: .3; }.store-personalization-card.card-brand { z-index: 3; right: 2%; bottom: 16%; width: 231px; min-height: 185px; padding: 18px; background: radial-gradient(circle at 77% 21%, rgba(255,106,0,.2), transparent 31%), linear-gradient(145deg, #2d2520, #0d0e12); transform: perspective(900px) rotateY(-8deg) rotateX(2deg); animation: store-brand-card-float 6.8s ease-in-out infinite; }.store-personalization-card.card-brand b { display: block; margin-top: 17px; color: #f4f0eb; font-size: 20px; line-height: .95; letter-spacing: -.06em; }.store-personalization-card.card-brand > span { position: absolute; bottom: 22px; width: 25px; height: 25px; border-radius: 7px; background: var(--orange); box-shadow: 0 0 16px rgba(255,106,0,.35); }.store-personalization-card.card-brand > span:nth-of-type(1) { left: 18px; background: #ff6a00; }.store-personalization-card.card-brand > span:nth-of-type(2) { left: 52px; background: #f1bb77; }.store-personalization-card.card-brand > span:nth-of-type(3) { left: 86px; background: #eff0ee; }.store-personalization-card.card-live { z-index: 4; bottom: 7%; left: 3%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #e7eaed; font-size: 7px; font-style: normal; font-weight: 850; letter-spacing: .09em; animation: store-live-card-float 5.4s ease-in-out infinite; }.store-personalization-card.card-live > i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 10px #70e8aa; animation: store-status-pulse 1.8s ease-in-out infinite; }.store-personalization-copy > p:not(.section-kicker) { max-width: 570px; margin: 24px 0 0; color: #abb1ba; font-size: 15px; line-height: 1.78; }.store-personalization-copy ol { display: grid; gap: 0; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.store-personalization-copy li { display: grid; grid-template-columns: 39px 1fr; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }.store-personalization-copy li > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(255,106,0,.32); border-radius: 8px; color: var(--orange-light); background: rgba(255,106,0,.08); font-size: 8px; font-weight: 900; }.store-personalization-copy li b { color: #eff1f2; font-size: 12px; font-weight: 800; }.store-personalization-copy li p { margin: 4px 0 0; color: #9da4ad; font-size: 10px; line-height: 1.58; }

.store-woocommerce { position: relative; overflow: hidden; padding-block: clamp(98px, 12vw, 158px); color: #252a30; background: #f7f6f2; }.store-woocommerce-grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(17,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,19,24,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, black 49%, transparent); }.store-woocommerce-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(395px, .95fr); align-items: center; gap: clamp(52px, 9vw, 130px); }.store-woocommerce-copy > p:not(.section-kicker) { max-width: 590px; margin: 25px 0 0; color: #697079; font-size: 15px; line-height: 1.78; }.store-woocommerce-benefits { display: grid; gap: 11px; margin-top: 27px; }.store-woocommerce-benefits span { display: flex; align-items: center; gap: 9px; color: #424950; font-size: 12px; font-weight: 750; }.store-woocommerce-benefits svg { color: var(--orange-deep); }.store-woocommerce-panel { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(255,151,70,.3); border-radius: 19px; color: #f1f2f2; background: radial-gradient(circle at 83% 18%, rgba(255,106,0,.2), transparent 22%), linear-gradient(145deg, #262a31, #0c0e12); box-shadow: 0 25px 60px rgba(25,29,35,.23); }.store-woocommerce-panel::after { position: absolute; right: -27%; bottom: -38%; width: 290px; height: 290px; border: 1px solid rgba(255,106,0,.21); border-radius: 50%; box-shadow: 0 0 0 31px rgba(255,106,0,.04); content: ""; }.store-woo-panel-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: #8c939c; font-size: 7px; font-weight: 900; letter-spacing: .12em; }.store-woo-panel-top span { display: flex; align-items: center; gap: 6px; }.store-woo-panel-top span i { width: 5px; height: 5px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 8px #70e8aa; }.store-woo-panel-top small { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,106,0,.35); border-radius: 8px; color: var(--orange-light); background: rgba(255,106,0,.09); font-size: 8px; }.store-woo-product { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.035); }.store-woo-product > div { display: flex; align-items: center; gap: 11px; }.store-woo-product > div > i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,106,0,.32); border-radius: 10px; color: var(--orange-light); background: rgba(255,106,0,.08); }.store-woo-product small, .store-woo-product b { display: block; }.store-woo-product small { color: #8e959e; font-size: 7px; font-weight: 820; letter-spacing: .1em; }.store-woo-product b { margin-top: 4px; font-size: 12px; }.store-woo-product > em { padding: 7px 9px; border: 1px solid rgba(255,106,0,.32); border-radius: 999px; color: #ffd2a9; font-size: 8px; font-style: normal; font-weight: 850; }.store-woo-line { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--line); color: #b9bec5; font-size: 10px; font-weight: 720; }.store-woo-line i { width: 44%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--orange-deep), var(--orange-light)); }.store-woo-line:nth-of-type(4) i { width: 57%; opacity: .78; }.store-woo-checkout { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 18px; padding: 15px; border: 1px solid rgba(112,232,170,.24); border-radius: 11px; background: rgba(112,232,170,.06); }.store-woo-checkout span { display: flex; align-items: center; gap: 7px; color: #9ae7bd; font-size: 7px; font-weight: 900; letter-spacing: .11em; }.store-woo-checkout span i { width: 6px; height: 6px; border-radius: 50%; background: #70e8aa; box-shadow: 0 0 9px #70e8aa; }.store-woo-checkout b { color: #ebeff0; font-size: 11px; font-weight: 760; }

.store-closing { position: relative; overflow: hidden; padding-block: clamp(98px, 12vw, 158px); background: radial-gradient(circle at 80% 53%, rgba(255,106,0,.29), transparent 24%), #0b0d10; }.store-closing-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 53px 53px; mask-image: linear-gradient(90deg, transparent, black 52%, transparent); animation: store-grid-drift 17s linear infinite; }.store-closing-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 45px; }.store-closing-copy > p:not(.section-kicker) { max-width: 590px; margin: 25px 0 0; color: #afb4bc; font-size: 15px; line-height: 1.75; }.store-closing-mark { position: relative; min-height: 360px; isolation: isolate; }.store-closing-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,106,0,.47); border-radius: 50%; transform: translate(-50%, -50%); }.store-closing-ring.ring-one { width: 306px; height: 306px; box-shadow: 0 0 0 32px rgba(255,106,0,.05), 0 0 70px rgba(255,106,0,.22); animation: store-closing-orbit-a 18s linear infinite; }.store-closing-ring.ring-two { width: 208px; height: 208px; border-color: rgba(255,255,255,.15); animation: store-closing-orbit-b 22s linear infinite; }.store-closing-ring::after { position: absolute; top: 11%; right: 11%; width: 7px; height: 7px; border-radius: 50%; background: #ff9347; box-shadow: 0 0 15px 4px rgba(255,106,0,.64); content: ""; }.store-closing-ring.ring-two::after { top: auto; right: auto; bottom: 9%; left: 16%; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 13px rgba(255,255,255,.72); }.store-closing-logo { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 157px; height: 142px; place-items: center; border: 1px solid rgba(255,157,83,.34); border-radius: 20px; background: linear-gradient(145deg, #2a2d33, #090b0f 72%); box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,106,0,.07) inset, 0 0 34px rgba(255,106,0,.15); transform: translate(-50%, -50%) rotate(7deg); animation: store-closing-logo-float 6.2s ease-in-out infinite; }.store-closing-logo img { width: 114px; height: auto; filter: drop-shadow(0 8px 13px rgba(0,0,0,.4)); }.store-closing-dot { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: store-closing-dot 4.2s ease-in-out infinite; }.store-closing-dot.dot-one { top: 22%; left: 30%; }.store-closing-dot.dot-two { right: 18%; bottom: 21%; width: 11px; height: 11px; animation-delay: -1.7s; }

@keyframes store-grid-drift { to { background-position: 66px 66px; } }
@keyframes store-glow-breathe { 0%,100% { opacity: .58; transform: scale(.94); } 50% { opacity: .98; transform: scale(1.07); } }
@keyframes store-status-pulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes store-title-shimmer { 0%,22%,100% { background-position: 100% 50%; } 57% { background-position: 0 50%; } }
@keyframes store-orbit-spin { to { transform: rotate(360deg); } }
@keyframes store-window-float { 0%,100% { transform: perspective(950px) rotateY(7deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(950px) rotateY(7deg) rotateX(2deg) translateY(-11px); } }
@keyframes store-card-shine { 0%,68% { left: -46%; opacity: 0; } 78% { opacity: 1; } 96%,100% { left: 126%; opacity: 0; } }
@keyframes store-pill-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes store-pill-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes store-label-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes store-scroll-line { 0% { top: -100%; } 58%,100% { top: 100%; } }
@keyframes store-base-card-float { 0%,100% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(900px) rotateY(7deg) rotateX(2deg) translateY(-11px); } }
@keyframes store-brand-card-float { 0%,100% { transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(11px); } }
@keyframes store-live-card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes store-closing-orbit-a { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes store-closing-orbit-b { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes store-closing-logo-float { 0%,100% { transform: translate(-50%, -50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%, -50%) rotate(4deg) translateY(-10px); } }
@keyframes store-closing-dot { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.18); } }

@media (max-width: 1060px) {
  .store-hero-layout { grid-template-columns: minmax(0, .96fr) minmax(355px, 1.04fr); gap: 28px; }.store-hero-art { min-height: 515px; }.store-hero-window { left: 7%; }.store-template-grid { grid-template-columns: repeat(2, 1fr); }.store-personalization-grid { grid-template-columns: minmax(350px, .93fr) minmax(0, 1.07fr); gap: 45px; }.store-personalization-card.card-base { left: 1%; }.store-personalization-card.card-brand { right: 0; }
}

@media (max-width: 780px) {
  .store-hero { min-height: auto; }.store-hero-layout { min-height: auto; grid-template-columns: 1fr; gap: 23px; padding-top: 117px; padding-bottom: 66px; }.store-hero-copy { text-align: center; }.store-hero-copy .eyebrow, .store-hero-overline { justify-content: center; }.store-hero h1 { margin-inline: auto; font-size: clamp(42px, 12vw, 60px); }.store-hero-copy > p:not(.eyebrow):not(.store-hero-overline):not(.store-hero-notes) { margin-right: auto; margin-left: auto; font-size: 14px; }.store-hero-notes { justify-content: center; font-size: 9px; }.store-hero-art { width: min(100%, 515px); min-height: 395px; margin-inline: auto; }.store-orbit-one { width: 300px; height: 300px; }.store-orbit-two { width: 205px; height: 205px; }.store-hero-window { top: 15%; left: 10%; width: min(294px, 73%); }.store-window-top { padding: 10px 11px; font-size: 5px; }.store-window-top small { font-size: 5px; }.store-window-body { min-height: 223px; }.store-window-copy { padding: 20px 0 20px 17px; }.store-window-copy small { font-size: 5px; }.store-window-copy strong { font-size: 19px; }.store-window-copy p { margin-top: 10px; font-size: 7px; }.store-window-copy > span { margin-top: 13px; font-size: 5px; }.store-window-cards { gap: 5px; padding: 17px 10px 17px 5px; }.store-mini-card { min-height: 43px; padding: 6px; }.store-mini-card b { font-size: 7px; }.store-mini-card span { font-size: 4px; }.store-hero-pill { padding: 8px 9px; }.pill-ready { top: 5%; right: -2%; font-size: 6px; }.pill-digital { bottom: 8%; left: 0; }.pill-digital span { font-size: 6px; }.pill-digital b { font-size: 7px; }.store-hero-label { right: 1%; bottom: 1%; padding: 8px 9px; }.store-hero-label b { font-size: 8px; }.store-scroll { display: none; }
  .store-intro-grid, .store-catalog-heading, .store-personalization-grid, .store-woocommerce-layout, .store-closing-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }.store-intro-grid .section-kicker, .store-catalog-heading .section-kicker, .store-personalization-copy .section-kicker, .store-woocommerce-copy .section-kicker, .store-closing-copy .section-kicker { justify-content: center; }.store-intro h2, .store-catalog-heading h2, .store-personalization h2, .store-woocommerce h2, .store-closing h2 { font-size: clamp(36px, 10.6vw, 52px); }.store-intro-copy > p, .store-catalog-heading > p, .store-personalization-copy > p:not(.section-kicker), .store-woocommerce-copy > p:not(.section-kicker), .store-closing-copy > p:not(.section-kicker) { margin-right: auto; margin-left: auto; font-size: 14px; }.store-intro-points, .store-woocommerce-benefits { justify-items: center; }
  .store-catalog { padding-block: 84px; }.store-catalog-toolbar { display: grid; justify-items: center; margin-top: 43px; text-align: center; }.store-filter-list { justify-content: center; }.store-template-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 31px; }.store-template-card { max-width: 530px; margin-inline: auto; text-align: left; }.store-template-preview { min-height: 235px; }.store-preview-content { height: 205px; }.store-preview-content strong { font-size: 25px; }.store-personalization-visual { width: min(100%, 500px); min-height: 405px; margin-inline: auto; }.store-personalization-card.card-base { top: 12%; left: 7%; width: 220px; min-height: 220px; padding: 17px; }.store-personalization-card.card-base b { font-size: 19px; }.store-personalization-card.card-brand { right: 3%; bottom: 14%; width: 194px; min-height: 157px; padding: 15px; }.store-personalization-card.card-brand b { font-size: 17px; }.store-personalization-card.card-brand > span { bottom: 17px; width: 21px; height: 21px; }.store-personalization-card.card-brand > span:nth-of-type(2) { left: 45px; }.store-personalization-card.card-brand > span:nth-of-type(3) { left: 72px; }.store-personalization-card.card-live { bottom: 4%; left: 0; }.store-personalization-copy ol { text-align: left; }.store-woocommerce-panel { max-width: 540px; margin-inline: auto; text-align: left; }.store-woocommerce-benefits span { text-align: left; }.store-closing-art { min-height: 255px; }.store-closing-ring.ring-one { width: 215px; height: 215px; }.store-closing-ring.ring-two { width: 151px; height: 151px; }.store-closing-logo { width: 112px; height: 103px; border-radius: 15px; }.store-closing-logo img { width: 80px; }.store-closing-copy { text-align: center; }
}

@media (max-width: 390px) {
  .store-hero-layout { padding-top: 107px; }.store-hero-window { left: 4%; }.pill-ready { right: -7%; }.store-hero-label { right: -4%; }.store-hero-label b { max-width: 106px; }.store-template-actions { grid-template-columns: 1fr; }.store-template-link { width: max-content; margin-inline: auto; }.store-personalization-visual { min-height: 371px; }.store-personalization-card.card-base { left: 0; width: 200px; }.store-personalization-card.card-brand { right: 0; width: 174px; }.store-personalization-card.card-live { padding: 8px 9px; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .store-hero-grid, .store-hero-glow, .store-hero-overline i, .store-hero h1 em, .store-hero-orbit i, .store-hero-window, .store-hero-window::after, .store-hero-pill, .store-hero-label, .store-hero-pill > i, .store-scroll i::after, .store-personalization-card, .store-personalization-card.card-live > i, .store-closing-grid, .store-closing-ring, .store-closing-logo, .store-closing-dot { animation: none !important; }
}

/* WordPress compatibility layer. */
:root { --font-geist-sans: "Segoe UI", Inter, Arial, sans-serif; --font-geist-mono: "Cascadia Code", Consolas, monospace; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
.site-header .desktop-nav .is-current { color: #fff; }
.site-header .desktop-nav .is-current::after { width: 100%; }
.menu-toggle .menu-open-icon, .menu-toggle .menu-close-icon { display: grid; place-items: center; }
.foxfy-cart-link { position: relative; display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); }
.foxfy-cart-count { position: absolute; top: -6px; right: -6px; display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 999px; color: #fff; background: var(--orange); font-size: 10px; font-weight: 900; }
.store-strip .soon-label { color: white; }
.foxfy-woo-missing { margin: 48px 0 100px; padding: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; text-align: center; background: rgba(255,255,255,.035); }
.foxfy-woo-missing span { display: inline-grid; width: 68px; height: 68px; place-items: center; border-radius: 18px; color: var(--orange); background: rgba(255,106,0,.1); }
.foxfy-woo-missing h3 { margin: 22px 0 10px; font-size: 26px; }
.foxfy-woo-missing p { max-width: 600px; margin: 0 auto; color: #aeb3bb; line-height: 1.7; }
.generic-page { min-height: 70vh; padding: 150px 0 90px; background: #f6f5f1; color: #16181c; }
.generic-page article { max-width: 850px; margin: 0 auto; }
.generic-page h1 { max-width: none; font-size: clamp(42px,7vw,74px); }
.generic-page .entry-content { margin-top: 35px; color: #565b63; line-height: 1.8; }
@media (max-width: 780px) { .foxfy-cart-link { width: 40px; height: 40px; }.header-actions .foxfy-cart-link { display: inline-grid; } }