:root {
  color-scheme: light dark;
  --ink: #101722;
  --muted: #5f6b7a;
  --paper: #f5f7fa;
  --surface: #ffffff;
  --line: rgba(16, 23, 34, 0.12);
  --blue: #147af3;
  --blue-bright: #4ba3ff;
  --orange: #ff8a34;
  --green: #2ecf8f;
  --night: #07111f;
  --night-soft: #0d1a2a;
  --night-line: rgba(255, 255, 255, 0.1);
  --radius: 24px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--font); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:where(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%); padding: 10px 16px; border-radius: 8px; background: white; color: #111; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; z-index: 50; top: 18px; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 32px)); min-height: 66px; padding: 9px 10px 9px 12px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(7,17,31,.62); color: white; box-shadow: 0 16px 50px rgba(0,0,0,.12); backdrop-filter: blur(24px) saturate(150%); transition: min-height .25s, background .25s, border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { min-height: 58px; background: rgba(7,17,31,.9); border-color: rgba(255,255,255,.17); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 38px; flex: 0 0 auto; overflow:hidden; padding:5px; border:1px solid rgba(20,33,51,.09); border-radius:11px; background:#fff; box-shadow:0 6px 16px rgba(13,29,49,.09); }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-size: 14px; }
.brand-copy span { color: rgba(255,255,255,.6); font-size: 11px; }
.main-nav { display: flex; gap: 7px; }
.main-nav a { padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none; transition: color .2s, background .2s; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-current { background: rgba(255,255,255,.1); color: white; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.language-toggle { display:inline-flex; min-width:58px; height:38px; gap:7px; align-items:center; justify-content:center; padding:0 9px; border:0; border-radius:10px; background:transparent; color:rgba(255,255,255,.75); font-size:11px; font-weight:750; cursor:pointer; }
.language-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.language-toggle:hover { background: rgba(255,255,255,.08); color: white; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 20px; border: 0; border-radius: 13px; font-weight: 650; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button:active, .language-toggle:active, .file-row:active { transform: translateY(1px) scale(.99); }
.button-small { min-height: 40px; padding: 0 16px; background: white; color: #101722; font-size: 13px; }
.button-primary { background: var(--blue); color: white; box-shadow: 0 10px 30px rgba(20,122,243,.28); }
.button-primary:hover { box-shadow: 0 14px 34px rgba(20,122,243,.38); }
.button-secondary { border: 1px solid var(--line); background: var(--surface); }
.text-link { display: inline-flex; gap: 9px; align-items: center; font-weight: 650; text-decoration: none; }
.text-link span:last-child { transition: transform .2s; }
.text-link:hover span:last-child { transform: translate(3px, -2px); }
.hero { position: relative; min-height: 100dvh; padding: 154px max(24px, calc((100vw - 1280px) / 2)) 92px; overflow: hidden; background: var(--night); color: white; }
.hero::before { content: ""; position: absolute; top: -18%; left: 43%; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle, rgba(39,117,255,.24), rgba(20,122,243,.04) 48%, transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .04; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 80%); pointer-events: none; }
.hero-intro { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 32px 80px; width: min(1280px, 100%); margin-bottom: 58px; }
.hero-intro > .eyebrow { grid-column: 1 / -1; margin-bottom: -5px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero .eyebrow { color: #a8cfff; }
.status-dot, .live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(46,207,143,.12); }
.hero h1 { max-width: 840px; margin: 0; font-size: clamp(58px, 6vw, 94px); line-height: .94; letter-spacing: -.067em; }
.hero-accent { color: #8cc4ff; background: linear-gradient(105deg, #f5f9ff 5%, #76b8ff 47%, #8d7cff 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-support { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; }
.hero-copy { max-width: 510px; margin: 0; color: rgba(255,255,255,.68); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.62; }
.hero-actions { display:flex; gap:12px; align-items:stretch; margin-top:30px; }
.hero-actions .button { min-height:52px; padding:0 21px; border-radius:15px; font-size:14px; line-height:1; text-align:center; white-space:nowrap; }
.hero-secondary-action { gap:13px; border:1px solid rgba(152,176,207,.28); background:rgba(255,255,255,.035); color:#f3f7fc; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.hero-secondary-action:hover { border-color:rgba(100,163,255,.48); background:rgba(255,255,255,.07); box-shadow:0 12px 30px rgba(0,0,0,.12); }
.hero-action-icon { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:9px; background:rgba(255,255,255,.08); font-size:13px; line-height:1; transition:transform .2s,background .2s; }
.hero-secondary-action:hover .hero-action-icon { transform:translateY(2px); background:rgba(255,255,255,.12); }
.hero-signals { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 28px; color: rgba(255,255,255,.43); font-size: 10px; }
.hero-signals span { display: inline-flex; gap: 7px; align-items: center; }
.hero-signals b { font-weight: 500; }
.hero-signals i { width: 4px; height: 4px; border-radius: 50%; background: #6db5ff; box-shadow: 0 0 0 3px rgba(109,181,255,.1); }
.studio-shell { position: relative; z-index: 2; width: min(1280px, 100%); height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 21px; background: #0d1724; box-shadow: 0 45px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; transition: border-color .35s, box-shadow .35s; }
.studio-shell:hover { border-color: rgba(127,185,255,.3); box-shadow: 0 52px 130px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 80px rgba(27,106,214,.07); }
.studio-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--night-line); background: linear-gradient(#1b2634, #131d2a); }
.traffic-lights { display: flex; gap: 7px; }
.traffic-lights span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.traffic-lights span:nth-child(2) { background: #febc2e; }
.traffic-lights span:nth-child(3) { background: #28c840; }
.scheme { display: flex; gap: 8px; align-items: center; padding: 6px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(0,0,0,.18); color: rgba(255,255,255,.78); font-size: 11px; }
.scheme-icon, .swift-icon { color: var(--orange); }
.scheme-device { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); }
.build-status { justify-self: end; display: flex; gap: 6px; color: rgba(255,255,255,.48); font-size: 10px; }
.build-status span:first-child { color: var(--green); }
.studio-body { display: grid; grid-template-columns: 200px minmax(300px, .9fr) minmax(330px, 1.1fr); height: calc(100% - 48px); }
.studio-navigator { padding: 16px 9px; border-right: 1px solid var(--night-line); background: #111c29; }
.navigator-title { margin: 0 10px 12px; color: rgba(255,255,255,.28); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.file-row { display: flex; width: 100%; gap: 7px; align-items: center; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.58); font-family: var(--font); font-size: 11px; text-align: left; cursor: pointer; }
.file-row span { color: var(--orange); font-size: 9px; }
.file-row:hover, .file-row.is-active { background: rgba(65,130,210,.25); color: white; }
.navigator-group { margin: 17px 9px 8px; color: rgba(255,255,255,.48); font-size: 10px; }
.resource-row { display: flex; gap: 8px; align-items: center; padding: 5px 17px; color: rgba(255,255,255,.4); font-size: 10px; }
.asset-dot { width: 8px; height: 8px; border-radius: 2px; }
.asset-blue { background: var(--blue); }.asset-orange { background: var(--orange); }
.code-editor { min-width: 0; border-right: 1px solid var(--night-line); background: #0d1724; }
.editor-tabs, .preview-header { height: 38px; border-bottom: 1px solid var(--night-line); background: #111c29; color: rgba(255,255,255,.48); font-size: 10px; }
.editor-tab { display: inline-flex; height: 100%; gap: 7px; align-items: center; padding: 0 13px; border-right: 1px solid var(--night-line); background: #0d1724; color: rgba(255,255,255,.7); }
.code-editor pre { height: calc(100% - 38px); margin: 0; overflow: auto; padding: 24px 20px; font-family: var(--mono); font-size: 11px; line-height: 1.75; tab-size: 2; }
.code-editor code { color: #d6deeb; white-space: pre-wrap; }
.syntax-keyword { color: #c792ea; }.syntax-type { color: #82aaff; }.syntax-string { color: #c3e88d; }.syntax-comment { color: #52677d; }.syntax-number { color: #f78c6c; }.syntax-property { color: #ffcb6b; }
.preview-pane { min-width: 0; background: #0a1320; }
.preview-header { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; }
.preview-controls { display:flex; gap:9px; align-items:center; color: rgba(255,255,255,.34); font-size:9px; letter-spacing:0; }
.preview-controls button { display:grid; width:24px; height:24px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:rgba(255,255,255,.04); color:rgba(255,255,255,.58); cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.preview-controls button:hover { background:rgba(255,255,255,.1); color:white; transform:rotate(-20deg); }
.code-editor code.is-typing::after { content:""; display:inline-block; width:1.5px; height:1.25em; margin-left:2px; vertical-align:-.18em; background:#8cc4ff; animation:codeCaret .75s steps(1) infinite; }
@keyframes codeCaret { 50% { opacity:0; } }
.proof-strip strong, .case-index, .music-times, .fd-mac-kpis strong, .fd-mac-bottom strong, .mini-fd-stats strong, .mini-fd-invoice > b { font-variant-numeric: tabular-nums; }
.device-stage { display: grid; height: calc(100% - 38px); place-items: center; padding: 24px; background: radial-gradient(circle at 50% 45%, rgba(49,93,145,.16), transparent 53%); }
.iphone-frame { position: relative; width: 254px; height: 528px; padding: 8px; border: 2px solid #384454; border-radius: 45px; background: #05090f; box-shadow: 0 28px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.15); }
.dynamic-island { position: absolute; z-index: 3; top: 17px; left: 50%; width: 76px; height: 21px; transform: translateX(-50%); border-radius: 16px; background: #020304; }
.iphone-screen { height: 100%; overflow: hidden; border-radius: 36px; background: #f3f6fb; color: #142033; }
.preview-app { display: flex; height: 100%; flex-direction: column; padding: 50px 17px 18px; animation: previewIn .32s ease both; }
@keyframes previewIn { from { opacity: 0; transform: translateY(7px); } }
.preview-profile { background: radial-gradient(circle at 80% 10%, #dcecff, transparent 34%), #f6f8fc; }
.profile-build { gap:10px; padding:48px 14px 15px; }
.profile-build-part { opacity:0; transform:translateY(10px) scale(.985); transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1); }
.profile-build-part.is-built { opacity:1; transform:none; }
.profile-build-identity { display:grid; grid-template-columns:54px minmax(0,1fr); gap:11px; align-items:center; }
.profile-build-identity .avatar-orb { width:54px; height:54px; margin:0; border-radius:18px; }
.profile-build-identity h4 { margin:3px 0 2px; font-size:17px; }
.profile-build-identity p { font-size:7px; }
.profile-focus { display:flex; flex-wrap:wrap; gap:5px; }
.profile-focus span { padding:5px 7px; border:1px solid rgba(20,122,243,.13); border-radius:8px; background:rgba(255,255,255,.72); color:#35618f; font-size:6px; font-weight:700; }
.profile-company-list { display:grid; gap:5px; }
.profile-company-row { display:grid; min-height:38px; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; padding:3px 7px; border:1px solid rgba(20,38,64,.07); border-radius:10px; background:rgba(255,255,255,.78); }
.profile-company-row .company-logo { width:32px; height:32px; padding:5px; border-radius:9px; }
.profile-company-row p { min-width:0; margin:0; }
.profile-company-row strong,.profile-company-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-company-row strong { color:#172235; font-size:8px; }
.profile-company-row small { margin-top:2px; color:#758398; font-size:5.5px; }
.profile-experience-card,.profile-project-card { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; padding:10px; border:1px solid rgba(20,38,64,.08); border-radius:14px; background:rgba(255,255,255,.82); box-shadow:0 8px 22px rgba(31,62,102,.06); }
.profile-experience-card .company-logo { width:40px; height:40px; }
.profile-experience-card small,.profile-project-card small { display:block; margin-bottom:2px; color:#758398; font-size:5.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.profile-experience-card strong,.profile-project-card strong { display:block; color:#172235; font-size:9px; }
.profile-experience-card p,.profile-project-card p { margin-top:2px; font-size:6.5px; line-height:1.35; }
.project-symbol { display:grid; width:40px; height:40px; place-items:center; border-radius:11px; background:linear-gradient(145deg,#147af3,#6454e8); color:white; font-size:9px; font-weight:800; }
.profile-build .preview-button { margin-top:auto; }
.profile-presentation { position:relative; padding:0; background:linear-gradient(165deg,#f9fbff,#edf3fb); }
.profile-slides { position:relative; flex:1; min-height:0; overflow:hidden; }
.profile-slide { position:absolute; inset:0; display:flex; overflow:hidden; flex-direction:column; padding:48px 15px 66px; opacity:0; transform:translateX(22px); pointer-events:none; transition:opacity .32s ease,transform .38s cubic-bezier(.2,.8,.2,1); }
.profile-slide.is-active { z-index:1; opacity:1; transform:none; pointer-events:auto; }
.tab-build-part { opacity:0; transform:translateY(9px) scale(.985); transition:opacity .38s ease,transform .42s cubic-bezier(.2,.8,.2,1); }
.tab-build-part.is-built { opacity:1; transform:none; }
.profile-home { justify-content:center; gap:10px; }
.profile-hero-card { padding:14px; border:1px solid rgba(24,43,72,.08); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 14px 35px rgba(36,65,105,.09); }
.profile-build-surface { position:relative; min-height:204px; }
.profile-build-surface::before { content:"Preview"; position:absolute; top:12px; right:12px; padding:3px 6px; border-radius:6px; background:#eef4fb; color:#8794a5; font:700 5px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.profile-live-part { opacity:0; transform:translateY(8px) scale(.985); transition:opacity .38s ease,transform .42s cubic-bezier(.2,.8,.2,1); }
.profile-live-part.is-built { opacity:1; transform:none; }
.profile-identity { display:block; }
.profile-hero-card .avatar-orb { width:62px; height:62px; margin:0 0 12px; border-radius:20px; }
.profile-hero-card h4 { margin:5px 0 4px; font-size:21px; }
.profile-hero-card > p { font-size:8px; }
.profile-metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.profile-metrics span { padding:7px; border-radius:9px; background:#f2f6fb; color:#6c7a8e; font-size:6px; }
.profile-metrics strong { display:block; color:#172235; font-size:11px; }
.profile-promise { display:grid; grid-template-columns:1fr; gap:7px; }
.profile-promise > span { display:grid; min-height:57px; grid-template-columns:37px minmax(0,1fr); gap:10px; align-items:center; padding:9px 11px; border:1px solid rgba(20,122,243,.14); border-radius:13px; background:rgba(255,255,255,.9); color:#244f7d; box-shadow:0 7px 18px rgba(31,76,130,.055); }
.profile-promise i { display:grid; width:37px; height:37px; place-items:center; border-radius:11px; background:#eaf3ff; color:#147af3; font:800 10px var(--mono); font-style:normal; }
.profile-promise b { display:block; font-weight:inherit; }
.profile-promise strong,.profile-promise small { display:block; }
.profile-promise strong { color:#17263a; font-size:9.5px; line-height:1.15; }
.profile-promise small { margin-top:4px; color:#66768a; font-size:6.5px; font-weight:500; line-height:1.3; }
.profile-promise .capability-architecture i { background:#f0edff; color:#6654dc; }
.profile-promise .capability-accessibility i { background:#eaf8f0; color:#23804d; }
.profile-primary-action { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:auto; padding:10px 11px; border:0; border-radius:11px; background:#147af3; color:#fff; font:700 8px var(--font); text-decoration:none; cursor:pointer; box-shadow:0 10px 24px rgba(20,122,243,.22); transition:transform .2s,box-shadow .2s; }
.profile-primary-action b { font-size:12px; }
.profile-primary-action:hover,.profile-primary-action.is-auto-tapping { transform:scale(.96); box-shadow:0 4px 12px rgba(20,122,243,.18); }
.profile-primary-action:not(.is-built) { pointer-events:none; }
.profile-slide-header { margin-bottom:12px; }
.profile-slide-header h4 { margin:6px 0 5px; font-size:18px; }
.profile-slide-header p { font-size:7px; }
.journey-build-part { opacity:0; transform:translateY(9px) scale(.985); transition:opacity .38s ease,transform .42s cubic-bezier(.2,.8,.2,1); }
.journey-build-part.is-built { opacity:1; transform:none; }
.journey-build-skeleton { position:absolute; z-index:0; top:105px; right:15px; left:15px; display:grid; gap:7px; pointer-events:none; }
.journey-build-skeleton > span { display:grid; min-height:55px; grid-template-columns:46px 1fr; grid-template-rows:1fr 1fr; gap:4px 11px; align-items:center; padding:7px 10px; border:1px solid rgba(24,43,72,.055); border-radius:13px; background:rgba(255,255,255,.45); opacity:1; transition:opacity .24s ease,transform .28s ease; }
.journey-build-skeleton > span.is-filled { opacity:0; transform:scale(.98); }
.journey-build-skeleton i { grid-row:1/-1; width:44px; height:44px; border-radius:12px; background:linear-gradient(90deg,#e8edf4 25%,#f4f7fa 50%,#e8edf4 75%); background-size:200% 100%; animation:journeyShimmer 1.2s linear infinite; }
.journey-build-skeleton b,.journey-build-skeleton small { display:block; border-radius:4px; background:#e5ebf2; }
.journey-build-skeleton b { width:72%; height:7px; align-self:end; }
.journey-build-skeleton small { width:52%; height:5px; align-self:start; }
@keyframes journeyShimmer { to { background-position:-200% 0; } }
.career-progression { display:grid; gap:8px; }
.career-progression > div { display:grid; min-height:55px; grid-template-columns:46px 1fr; gap:11px; align-items:center; padding:7px 10px; border:1px solid rgba(24,43,72,.09); border-radius:13px; background:rgba(255,255,255,.9); box-shadow:0 6px 16px rgba(31,53,82,.05); }
.journey-company-mark { display:grid; width:44px; height:44px; place-items:center; overflow:hidden; padding:6px; border:1px solid rgba(24,43,72,.08); border-radius:12px; background:#fff; }
.journey-company-mark img { display:block; width:100%; max-height:100%; object-fit:contain; }
.journey-company-dark { background:#151515; }
.journey-company-word { padding:3px; color:#65748a; font-size:6px; font-weight:800; letter-spacing:-.06em; }
.journey-company-word b { color:#8bc53f; }
.journey-company-rg { padding:5px 3px; }
.career-progression strong,.career-progression small { display:block; }
.career-progression strong { color:#101b2d; font-size:10.5px; line-height:1.18; letter-spacing:-.01em; }
.career-progression small { margin-top:4px; color:#5f6f84; font-size:7.5px; line-height:1.2; }
.career-progression .is-highlighted { border-color:rgba(20,122,243,.2); background:#fff; box-shadow:0 7px 18px rgba(20,80,150,.08); }
.career-progression .is-highlighted::after { content:"Scale"; align-self:start; margin:1px 0 0 auto; padding:3px 5px; border-radius:6px; background:#eaf3ff; color:#147af3; font-size:4.8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.career-progression .is-highlighted { grid-template-columns:46px minmax(0,1fr) auto; }
.career-progression .is-current { min-height:66px; grid-template-columns:46px minmax(0,1fr) auto; border-color:rgba(35,128,77,.18); background:linear-gradient(105deg,#fff,#f0faf5); }
.career-progression .is-current em { align-self:start; margin-top:2px; padding:4px 6px; border-radius:7px; background:#e6f7ee; color:#23804d; font-size:5px; font-style:normal; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.reason-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.reason-grid article { min-height:75px; padding:8px; border:1px solid rgba(24,43,72,.07); border-radius:11px; background:rgba(255,255,255,.8); }
.reason-grid article:last-child { grid-column:1/-1; min-height:62px; }
.reason-grid b { color:#147af3; font:700 6px var(--mono); }
.reason-grid strong { display:block; margin:5px 0 3px; font-size:9.5px; }
.reason-grid p { font-size:7px; line-height:1.38; }
.profile-case-stack { display:grid; gap:7px; }
.profile-case-stack article,.open-source-card { display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:center; padding:9px; border:1px solid rgba(24,43,72,.07); border-radius:12px; background:rgba(255,255,255,.82); }
.profile-case-stack .company-logo,.profile-case-stack .project-symbol,.open-source-card .project-symbol { width:38px; height:38px; }
.profile-case-stack small,.open-source-card small { display:block; color:#147af3; font-size:6px; font-weight:750; text-transform:uppercase; }
.profile-case-stack strong,.open-source-card strong { display:block; margin:3px 0; font-size:9.5px; }
.profile-case-stack p,.open-source-card p { font-size:7px; line-height:1.38; }
.open-source-card { margin-top:8px; padding:12px 9px; }
.profile-contact-slide { justify-content:center; }
.profile-contact-slide h4 { max-width:190px; margin:9px 0; font-size:25px; }
.profile-contact-slide > p { font-size:8px; }
.profile-contact-slide .profile-primary-action { margin-top:20px; }
.contact-proof { margin-top:14px; padding:10px; border:1px solid rgba(24,43,72,.07); border-radius:11px; background:rgba(255,255,255,.7); }
.contact-proof span,.contact-proof small { display:block; }
.contact-proof span { color:#23804d; font-size:7px; font-weight:750; }
.contact-proof small { margin-top:3px; color:#748196; font-size:5.5px; }
.profile-tabbar { position:absolute; z-index:4; right:9px; bottom:9px; left:9px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:5px; border:1px solid rgba(24,43,72,.09); border-radius:14px; background:rgba(255,255,255,.88); box-shadow:0 9px 24px rgba(31,53,82,.12); backdrop-filter:blur(18px); }
.profile-tabbar button { display:flex; min-width:0; flex-direction:column; gap:2px; align-items:center; padding:4px 1px; border:0; border-radius:8px; background:transparent; color:#7b8798; cursor:pointer; }
.profile-tabbar button span { display:grid; width:18px; height:14px; place-items:center; }
.profile-tabbar button svg { width:13px; height:13px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s ease; }
.profile-tabbar button small { max-width:100%; overflow:hidden; font-size:4.8px; text-overflow:ellipsis; white-space:nowrap; }
.profile-tabbar button.is-active { background:#eaf3ff; color:#147af3; }
.profile-tabbar button.is-active svg { transform:translateY(-1px) scale(1.08); }
.profile-tabbar button:hover { color:#147af3; }
.profile-tabbar button.is-auto-tapping { color:#147af3; background:#eaf3ff; transform:scale(.88); }
.profile-tabbar button { transition:color .2s,background .2s,transform .2s; }
.preview-kicker { color: #718095; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.preview-app h4 { margin: 9px 0; font-size: 23px; line-height: 1.04; letter-spacing: -.045em; }
.preview-app p { margin: 0; color: #6b7788; font-size: 9px; line-height: 1.5; }
.profile-presentation .profile-hero-card h4 { margin:5px 0 4px; font-size:21px; }
.profile-presentation .profile-hero-card > p { font-size:8px; }
.profile-presentation .profile-slide-header h4 { margin:6px 0 5px; font-size:18px; }
.profile-presentation .profile-slide-header p { font-size:7px; }
.profile-presentation .reason-grid p,.profile-presentation .profile-case-stack p,.profile-presentation .open-source-card p { font-size:7px; }
.profile-presentation .profile-contact-slide h4 { margin:9px 0; font-size:25px; }
.profile-presentation .profile-contact-slide > p { font-size:8px; }
.avatar-orb { width: 64px; height: 64px; margin-bottom: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.85); border-radius: 22px; background: linear-gradient(145deg, #267fea, #7257e8); box-shadow: 0 15px 28px rgba(45,103,216,.24); }
.avatar-orb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.preview-stats div { padding: 11px; border: 1px solid rgba(16,23,34,.07); border-radius: 12px; background: rgba(255,255,255,.72); }
.preview-stats strong { display: block; font-size: 14px; }.preview-stats span { color: #748196; font-size: 7px; }
.preview-button { margin-top: 10px; padding: 10px; border-radius: 10px; background: #147af3; color: white; font-size: 8px; font-weight: 700; text-align: center; }
.preview-player { background: linear-gradient(160deg, #111a29, #070c13); color: white; }
.mini-album { display: grid; height: 180px; margin: 12px 0 18px; place-items: center; border-radius: 20px; background: linear-gradient(145deg, #ff844a, #ed4d8d 48%, #634ee5); font-size: 50px; box-shadow: 0 18px 35px rgba(0,0,0,.3); }
.preview-player p { color: rgba(255,255,255,.48); }.preview-player h4 { font-size: 19px; }
.mini-progress { height: 3px; margin: 15px 0 8px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.13); }.mini-progress span { display: block; width: 62%; height: 100%; background: white; }
.mini-controls { display: flex; align-items: center; justify-content: space-around; margin-top: 14px; font-size: 14px; }.mini-controls strong { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: white; color: #111; }
.batch-chip { margin-top: auto; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); font-family: var(--mono); font-size: 7px; }
.preview-freelance { background: #f8f6f1; }.preview-freelance h4 { font-size: 20px; }.mini-timer { margin: 16px 0 10px; padding: 15px; border-radius: 15px; background: #171b22; color: white; }.mini-timer span { display: block; color: rgba(255,255,255,.5); font-size: 7px; }.mini-timer strong { display: block; margin-top: 5px; font-family: var(--mono); font-size: 22px; }
.mini-invoice { display: flex; justify-content: space-between; margin-top: 7px; padding: 12px; border: 1px solid #e5e1d9; border-radius: 13px; background: white; }.mini-invoice span { color: #7b7d81; font-size: 8px; }.mini-invoice strong { font-size: 12px; }
.preview-player { padding:46px 16px 16px; background:#fff; color:#111820; }.mini-player-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }.mini-player-header span { display:grid; min-width:34px; height:25px; place-items:center; padding:0 7px; border:1px solid #e4e6e8; border-radius:15px; color:#555b62; font-size:6px; }.mini-player-art { position:relative; width:74%; aspect-ratio:1; margin:0 auto 15px; overflow:hidden; border-radius:16px; background:linear-gradient(160deg,#15213c 0 48%,#e56c36 49% 62%,#2c3852 63%); box-shadow:0 12px 25px rgba(26,35,54,.18); }.mini-player-art i { position:absolute; top:15%; right:15%; width:28px; height:28px; border-radius:50%; background:#f4b45c; }.mini-player-art b { position:absolute; top:12px; left:12px; color:white; font-size:6px; letter-spacing:.15em; }.mini-player-art em { position:absolute; right:8%; bottom:-17%; width:30%; height:76%; transform:rotate(24deg); background:#111827; clip-path:polygon(36% 0,64% 0,100% 100%,0 100%); }.preview-player h4 { margin:0 0 2px; font-size:14px; }.preview-player p { color:#777d85; font-size:8px; }.preview-player .mini-progress { height:3px; margin:12px 0 4px; background:#e4e6e8; }.preview-player .mini-progress span { width:44%; background:#111820; }.mini-player-times { display:flex; justify-content:space-between; color:#969aa0; font-size:5px; }.preview-player .mini-controls { justify-content:space-between; margin-top:10px; font-size:10px; }.preview-player .mini-controls strong { width:auto; height:auto; background:transparent; color:#111820; font-size:22px; }.mini-player-options { display:flex; justify-content:space-between; margin-top:13px; padding:0 6px; font-size:10px; }.preview-player .batch-chip { margin-top:auto; border-color:#e1e4e8; background:#f5f7f9; color:#66717e; }
.fd-phone-preview { padding:45px 13px 12px; background:#fff; color:#101318; }.mini-fd-actions { display:flex; justify-content:flex-end; gap:5px; }.mini-fd-actions span,.mini-fd-actions strong { display:grid; width:26px; height:26px; place-items:center; border:1px solid #e2e5e9; border-radius:14px; color:#1f67ea; font-size:9px; }.fd-phone-preview h4 { margin:13px 0 4px; font-size:24px; }.fd-phone-preview > p { color:#818792; font-size:7px; }.mini-fd-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:11px; padding:8px; border:1px solid #dfe3e8; border-radius:10px; }.mini-fd-stats div { display:flex; flex-direction:column; gap:3px; padding:5px; border-radius:7px; background:#f7f8fa; }.mini-fd-stats span { color:#818792; font-size:5px; }.mini-fd-stats strong { font-size:9px; }.mini-fd-stats .green { color:#20bd63; }.mini-fd-stats .blue { color:#286cec; }.mini-fd-stats .red { color:#ea3338; }.mini-fd-search { display:flex; gap:5px; align-items:center; margin-top:8px; padding:7px 8px; border:1px solid #dfe3e8; border-radius:7px; color:#a3a8b0; font-size:6px; }.mini-fd-invoice { display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; margin-top:8px; padding:9px 7px; border:1px solid #dfe3e8; border-radius:9px; }.mini-fd-invoice > i { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:#8735ec; color:white; font-size:6px; font-style:normal; }.mini-fd-invoice > span { display:flex; min-width:0; flex-direction:column; }.mini-fd-invoice span strong { font-size:7px; }.mini-fd-invoice span small { overflow:hidden; color:#858b95; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }.mini-fd-invoice span em { width:max-content; margin-top:3px; padding:2px 4px; border-radius:4px; background:#edf2ff; color:#286cec; font-size:4px; font-style:normal; }.mini-fd-invoice > b { font-size:7px; }.mini-fd-tabbar { display:flex; justify-content:space-around; margin-top:auto; padding:8px 4px 4px; border-top:1px solid #eceef1; font-size:10px; }.mini-fd-tabbar span { color:#1b1e23; }.mini-fd-tabbar span.active { color:#2468e9; }
.preview-journey { background: linear-gradient(165deg, #f9fbfe 0%, #eef3fa 100%); }
.preview-journey h4 { margin:7px 0; font-size: 18px; }
.journey-company-list { display: grid; gap: 6px; margin-top: 11px; }
.journey-company-list > div { display: grid; min-height:51px; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; padding: 5px 8px; border: 1px solid rgba(24, 42, 68, .09); border-radius: 12px; background: rgba(255, 255, 255, .88); box-shadow: 0 6px 18px rgba(31, 53, 82, .05); }
.journey-company-list p { min-width: 0; margin: 0; }
.journey-company-list strong, .journey-company-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-company-list strong { color: #172235; font-size: 9px; line-height:1.15; }
.journey-company-list small { margin-top: 3px; color: #69778a; font-size: 6.5px; }
.company-logo { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; padding: 6px; border: 1px solid rgba(19, 39, 65, .08); border-radius: 11px; background: #fff; }
.company-logo img { display: block; width: 100%; max-height: 100%; object-fit: contain; }
.company-logo-rg { padding: 5px 3px; background:#fff; }
.company-logo-wembley { background: #151515; }
.company-logo-groopify { padding: 3px; background: #fff; }
.groopify-wordmark { color: #65748a; font-size: 6.5px; font-weight: 700; letter-spacing: -.06em; }
.groopify-wordmark b { color: #8bc53f; font: inherit; }
.mobile-preview-note { display: none; }
.proof-strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(1180px, calc(100% - 48px)); margin: 48px auto 0; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 20px 55px rgba(23,44,71,.06); }
.proof-strip::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 38%; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); }
.proof-strip div { display: flex; flex-direction: column; gap: 5px; padding: 0 30px; border-right: 1px solid var(--line); }.proof-strip div:first-child { padding-left: 0; }.proof-strip div:last-child { border: 0; }
.proof-strip strong { font-size: 20px; letter-spacing: -.03em; }.proof-strip span { color: var(--muted); font-size: 13px; }
.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 130px 0; }
.section-heading { max-width: 720px; margin-bottom: 60px; }.section-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: 1; letter-spacing: -.055em; }.section-heading > p:last-child { max-width: 630px; margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.case-study { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 620px; margin-bottom: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 60px rgba(17,35,56,.04); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.case-study:hover { transform: translateY(-4px); border-color: rgba(20,122,243,.26); box-shadow: 0 30px 80px rgba(17,35,56,.1); }
.case-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(32px, 5vw, 64px); }.case-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 44px; }.case-index { margin-right: 8px; color: #9ba5b2; font-family: var(--mono); font-size: 11px; }.pill { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.case-copy h3, .compact-case h3 { margin: 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.03; letter-spacing: -.052em; }.case-copy > p { margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.impact-callout { margin-top: 30px; padding: 15px 18px; border-left: 3px solid var(--orange); background: #fff8f2; }.impact-callout span { display: block; margin-bottom: 5px; color: #a95821; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.impact-callout strong { font-size: 13px; line-height: 1.5; }
.case-points { display: grid; gap: 11px; margin: 28px 0; padding: 0; list-style: none; }.case-points li { position: relative; padding-left: 22px; color: #405064; font-size: 13px; line-height: 1.55; }.case-points li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.adjacent-case { margin-top: auto; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(20,122,243,.04); }.adjacent-case span { display: block; margin-bottom: 7px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.adjacent-case strong { display: block; font-size: 13px; }.adjacent-case p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.case-visual { position: relative; overflow: hidden; min-height: 540px; }.mega-visual { display: flex; flex-direction: column; justify-content: center; padding: 55px; background: radial-gradient(circle at 80% 20%, rgba(89,73,231,.38), transparent 31%), linear-gradient(145deg, #111a2a, #080d15); color: white; }.visual-label { position: absolute; top: 24px; left: 28px; display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,.5); font-size: 10px; }.live-dot { width: 6px; height: 6px; }
.album-art { display: grid; width: min(280px, 80%); aspect-ratio: 1; margin: 0 auto -45px; place-items: center; border-radius: 35px; background: radial-gradient(circle at 65% 25%, rgba(255,255,255,.35), transparent 18%), linear-gradient(145deg,#ff9142,#f04486 45%,#5a48d9); font-size: 100px; font-weight: 200; box-shadow: 0 35px 70px rgba(0,0,0,.4); }.track-lines { display: grid; gap: 8px; width: 84%; margin: 0 auto; padding: 65px 24px 25px; border: 1px solid rgba(255,255,255,.09); border-radius: 25px; background: rgba(15,24,38,.82); backdrop-filter: blur(22px); }.track-lines span { height: 5px; border-radius: 4px; background: rgba(255,255,255,.13); }.track-lines span:nth-child(2n) { width: 70%; }.track-lines span:nth-child(3n) { width: 88%; }
.playback-bar { display: flex; gap: 14px; align-items: center; width: 92%; margin: -7px auto 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(26,38,56,.92); box-shadow: 0 18px 35px rgba(0,0,0,.3); }.play-button { display:grid; width:35px; height:35px; flex:0 0 auto; place-items:center; border-radius:50%; background:white; color:#111; font-size:10px; }.playback-bar div:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; }.playback-bar strong { font-size:11px; }.playback-bar small { overflow:hidden; color:rgba(255,255,255,.42); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.equalizer { display:flex; height:20px; gap:2px; align-items:center; }.equalizer i { width:2px; height:40%; background:var(--green); animation:eq .8s ease-in-out infinite alternate; }.equalizer i:nth-child(2) { height:90%; animation-delay:-.3s; }.equalizer i:nth-child(3) { height:60%; animation-delay:-.6s; }.equalizer i:nth-child(4) { height:75%; animation-delay:-.15s; } @keyframes eq { to { height: 95%; } }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }.metric-grid div { padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04); }.metric-grid span { display:block; color:rgba(255,255,255,.4); font-size:8px; }.metric-grid strong { display:block; margin-top:4px; font-size:12px; }
.freelance-case { grid-template-columns: 1fr 1fr; }.freelance-visual { display:grid; place-items:center; padding:46px; background:#e7ebf1; }.freelance-window { display:flex; width:110%; max-width:620px; min-height:390px; overflow:hidden; transform:rotate(-2deg); border:1px solid rgba(16,23,34,.12); border-radius:20px; background:#f8f6f1; box-shadow:0 35px 70px rgba(55,70,90,.2); }.fd-sidebar { display:flex; width:52px; flex-direction:column; align-items:center; gap:17px; padding:18px 0; background:#1c212a; }.fd-logo { display:grid; width:28px; height:28px; margin-bottom:12px; place-items:center; border-radius:8px; background:#f1a54b; color:#1c212a; font-weight:800; }.fd-sidebar i { width:14px; height:14px; border:2px solid rgba(255,255,255,.24); border-radius:4px; }.fd-sidebar i.active { border-color:#f1a54b; background:#f1a54b; }.fd-content { flex:1; padding:28px; color:#222832; }.fd-heading { display:flex; justify-content:space-between; }.fd-heading div { display:flex; flex-direction:column; }.fd-heading small { color:#8c8d8e; font-size:9px; }.fd-heading strong { margin-top:5px; font-size:19px; }.fd-timer { display:flex; align-items:center; justify-content:space-between; margin:25px 0 14px; padding:19px; border-radius:16px; background:#1c212a; color:white; }.fd-timer div { display:flex; flex-direction:column; }.fd-timer span { color:rgba(255,255,255,.45); font-size:8px; }.fd-timer strong { margin-top:5px; font-family:var(--mono); font-size:21px; }.fd-timer button { width:35px; height:35px; border:0; border-radius:50%; background:#f1a54b; color:#1c212a; }.fd-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.fd-cards > div { display:flex; flex-direction:column; padding:15px; border:1px solid #e4dfd5; border-radius:13px; background:white; }.fd-cards span { color:#8b8e92; font-size:8px; }.fd-cards strong { margin:7px 0; font-size:18px; }.fd-cards small { color:#578763; font-size:8px; }.fd-reminder { display:flex; gap:10px; align-items:center; margin-top:10px; padding:12px; border:1px solid #e4dfd5; border-radius:12px; background:white; }.reminder-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:#fff0d9; color:#b77927; }.fd-reminder div { display:flex; flex-direction:column; }.fd-reminder strong { font-size:9px; }.fd-reminder small { color:#8b8e92; font-size:8px; }.sync-badge { position:absolute; right:23px; bottom:29px; display:grid; grid-template-columns:auto auto; gap:1px 7px; align-items:center; padding:11px 14px; border-radius:12px; background:#1c212a; color:white; box-shadow:0 15px 30px rgba(0,0,0,.25); }.sync-badge span:first-child { grid-row:1/3; color:#7bb6ff; }.sync-badge span { font-size:9px; font-weight:700; }.sync-badge small { color:rgba(255,255,255,.45); font-size:7px; }

/* Product visuals based on the real iOS and macOS design language. */
.mega-visual { display:grid; place-items:center; padding:54px 36px; background:linear-gradient(145deg,#c7c9cd,#e7e8ea); color:#111; }
.mega-visual .visual-label { color:rgba(17,22,28,.48); }
.music-phone { position:relative; display:flex; width:420px; max-width:82%; min-height:680px; box-sizing:border-box; flex-direction:column; padding:28px 30px 32px; border:1px solid rgba(17,22,28,.12); border-radius:52px; background:#fff; box-shadow:0 40px 90px rgba(25,31,39,.25); }
.music-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; color:#3d4146; font-size:11px; }.music-topbar span { display:grid; min-width:48px; height:38px; place-items:center; padding:0 10px; border:1px solid #e3e4e6; border-radius:22px; background:#fbfbfb; }.music-topbar span:last-child { min-width:38px; letter-spacing:.12em; }
.music-phone .album-art { position:relative; width:78%; aspect-ratio:1; margin:0 auto 30px; overflow:hidden; border-radius:25px; background:linear-gradient(160deg,#15213c 0 48%,#e56c36 49% 62%,#2c3852 63%); box-shadow:0 18px 40px rgba(26,35,54,.2); }
.album-sun { position:absolute; top:17%; right:17%; width:44px; height:44px; border-radius:50%; background:#f4b45c; box-shadow:0 0 35px rgba(244,180,92,.55); }.album-title { position:absolute; z-index:2; top:18px; left:19px; color:white; font-size:10px; font-weight:800; letter-spacing:.2em; line-height:1.3; }.album-road { position:absolute; right:8%; bottom:-16%; width:30%; height:75%; transform:rotate(24deg); background:#111827; clip-path:polygon(36% 0,64% 0,100% 100%,0 100%); }.album-road::after { content:""; position:absolute; top:5%; bottom:0; left:49%; width:2px; background:repeating-linear-gradient(to bottom,#f7d487 0 8px,transparent 8px 16px); }
.track-info { display:flex; flex-direction:column; gap:3px; }.track-info strong { font-size:18px; letter-spacing:-.025em; }.track-info span { color:#777d85; font-size:12px; }.music-progress { height:4px; margin-top:18px; overflow:hidden; border-radius:3px; background:#e5e6e8; }.music-progress i { display:block; width:44%; height:100%; border-radius:3px; background:#111820; }.music-times { display:flex; justify-content:space-between; margin-top:6px; color:#8b9097; font-size:8px; }.music-controls { display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:18px; }.music-controls > span:first-child,.music-controls > span:last-child { position:relative; font-size:17px; }.music-controls small { position:absolute; top:5px; left:5px; font-size:6px; }.music-controls strong { font-size:34px; font-weight:700; }.music-options { display:flex; justify-content:space-between; margin-top:auto; padding:0 7px; color:#34383d; font-size:17px; }.preload-status { position:absolute; right:22px; bottom:22px; display:flex; gap:10px; align-items:center; padding:11px 14px; border-radius:14px; background:rgba(12,20,32,.92); color:white; box-shadow:0 16px 35px rgba(20,29,40,.25); backdrop-filter:blur(16px); }.preload-status > span { display:flex; flex-direction:column; }.preload-status strong { font-size:8px; }.preload-status small { color:rgba(255,255,255,.48); font-size:7px; }

.freelance-visual { display:grid; place-items:center; padding:38px 20px; background:radial-gradient(circle at 75% 20%,rgba(58,108,214,.15),transparent 36%),#090b0f; }
.fd-mac-window { display:flex; width:118%; max-width:760px; min-height:465px; overflow:hidden; transform:rotate(-1.2deg); border:1px solid #303238; border-radius:17px; background:#101113; color:#f5f5f6; box-shadow:0 38px 90px rgba(0,0,0,.48); }
.fd-mac-sidebar { position:relative; display:flex; width:126px; flex:0 0 auto; flex-direction:column; padding:13px 8px; border-right:1px solid #2c2d31; background:#191a1c; }.fd-traffic { display:flex; gap:5px; margin:0 0 17px 1px; }.fd-traffic i { width:7px; height:7px; border-radius:50%; background:#ff5f57; }.fd-traffic i:nth-child(2) { background:#febc2e; }.fd-traffic i:nth-child(3) { background:#28c840; }.fd-search-mini { padding:6px 8px; border-radius:6px; background:#27282b; color:#86888e; font-size:7px; }.fd-mac-sidebar nav { display:grid; gap:2px; margin-top:8px; }.fd-mac-sidebar nav span,.fd-sidebar-bottom span { display:flex; gap:7px; align-items:center; padding:6px 8px; border-radius:5px; color:#c7c8cc; font-size:7px; }.fd-mac-sidebar b,.fd-content b { font-weight:650; }.fd-mac-sidebar nav span.active { background:#203967; color:white; }.fd-sidebar-bottom { display:grid; gap:2px; margin-top:auto; border-top:1px solid #2c2d31; padding-top:8px; }
.fd-mac-window .fd-content { flex:1; padding:24px 25px; background:#0e0f11; color:#f5f5f6; }.fd-mac-heading { display:flex; align-items:flex-start; justify-content:space-between; }.fd-mac-heading div { display:flex; flex-direction:column; gap:4px; }.fd-mac-heading strong { font-size:20px; letter-spacing:-.035em; }.fd-mac-heading small { color:#8d9098; font-size:7px; }.fd-mac-heading > span { display:grid; width:23px; height:23px; place-items:center; border:1px solid #282a2e; border-radius:50%; color:#aaa; font-size:9px; }
.fd-mac-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }.fd-mac-kpis > div { display:flex; min-height:83px; flex-direction:column; padding:14px; border:1px solid #292b2f; border-radius:8px; background:#191a1c; }.fd-mac-kpis small { color:#8d9098; font-size:6px; }.fd-mac-kpis strong { margin:12px 0 7px; font-size:18px; }.fd-mac-kpis span { color:#8d9098; font-size:6px; }.fd-mac-kpis span.positive { color:#35c96f; }
.fd-action-center { margin-top:14px; padding:12px; border:1px solid #292b2f; border-radius:8px; background:#17181a; }.fd-center-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }.fd-center-title strong { font-size:8px; }.fd-center-title > span { padding:4px 7px; border:1px solid #2f3135; border-radius:5px; color:#b5b6ba; font-size:6px; }.fd-action-row { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-top:5px; padding:8px 9px; border-radius:5px; background:#111214; }.fd-action-row i { color:#f3a900; font-style:normal; font-size:9px; }.fd-action-row p { display:flex; min-width:0; flex-direction:column; gap:2px; margin:0; }.fd-action-row strong { font-size:7px; }.fd-action-row small { overflow:hidden; color:#858891; font-size:5.5px; text-overflow:ellipsis; white-space:nowrap; }.fd-action-row > span { padding:4px 7px; border:1px solid #2c2e32; border-radius:4px; color:#c8c9cd; font-size:5.5px; }
.fd-quick-actions { display:flex; gap:7px; margin-top:12px; }.fd-quick-actions span { padding:7px 10px; border:1px solid rgba(40,111,245,.24); border-radius:5px; background:rgba(30,91,206,.12); color:#4b8cff; font-size:6px; }.fd-quick-actions span:nth-child(2) { border-color:rgba(41,194,95,.25); background:rgba(29,132,66,.14); color:#42cf76; }.fd-quick-actions span:nth-child(3) { border-color:rgba(236,164,0,.25); background:rgba(175,119,0,.15); color:#efad1b; }.fd-mac-bottom { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }.fd-mac-bottom div { display:flex; flex-direction:column; gap:8px; padding:11px; border:1px solid #292b2f; border-radius:7px; background:#191a1c; }.fd-mac-bottom small { color:#8d9098; font-size:6px; }.fd-mac-bottom strong { font-size:11px; }.sync-badge { z-index:2; }
.secondary-cases { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.compact-case { min-height:410px; padding:40px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }.compact-case:hover { transform:translateY(-4px); border-color:rgba(20,122,243,.24); box-shadow:0 24px 65px rgba(17,35,56,.08); }.compact-icon { display:grid; width:54px; height:54px; margin:50px 0 30px; place-items:center; border-radius:16px; background:#edf4ff; color:var(--blue); font-size:22px; }.compact-case h3 { font-size:32px; }.compact-case p { color:var(--muted); line-height:1.65; }
.journey { position:relative; }.timeline { position:relative; display:grid; gap:0; max-width:880px; margin-left:auto; }.timeline-line { position:absolute; top:18px; bottom:45px; left:149px; width:1px; background:var(--line); }.timeline-item { position:relative; display:grid; grid-template-columns:120px 1fr; gap:60px; padding:0 0 55px; }.timeline-item::before { content:""; position:absolute; top:7px; left:143px; width:11px; height:11px; border:4px solid var(--paper); border-radius:50%; background:#aab3be; }.timeline-item.is-current::before { background:var(--blue); box-shadow:0 0 0 5px rgba(20,122,243,.12); }.timeline-year { padding-top:5px; color:#8893a1; font-family:var(--mono); font-size:11px; text-align:right; }.timeline-entry { display:grid; grid-template-columns:52px minmax(0,1fr); gap:17px; align-items:start; }.timeline-item h3 { margin:2px 0 9px; font-size:22px; letter-spacing:-.025em; }.timeline-item p { max-width:550px; margin:0; color:var(--muted); line-height:1.6; }.timeline-company-logo { display:grid; width:52px; height:52px; place-items:center; overflow:hidden; padding:8px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(26,45,70,.07); }.timeline-company-logo img { display:block; width:100%; max-height:100%; object-fit:contain; }.timeline-logo-rg { padding:7px 5px; background:#fff; }.timeline-logo-wembley { background:#151515; }.timeline-logo-groopify { padding:4px; color:#65748a; font-size:8px; font-weight:750; letter-spacing:-.06em; }.timeline-logo-groopify b { color:#8bc53f; }.timeline-logo-indra { padding:10px 7px; }.journey-actions { display:flex; gap:24px; align-items:center; margin:10px 0 0 180px; }
.writing { width:100%; max-width:none; padding-right:max(24px,calc((100vw - 1180px)/2)); padding-left:max(24px,calc((100vw - 1180px)/2)); background:var(--night); color:white; }.writing .section-heading .eyebrow { color:#a8cfff; }.writing .section-heading > p:last-child { color:rgba(255,255,255,.56); }.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.article-card { display:flex; min-height:440px; overflow:hidden; flex-direction:column; border:1px solid rgba(255,255,255,.11); border-radius:20px; background:rgba(255,255,255,.035); text-decoration:none; transition:transform .25s,border-color .25s,background .25s; }.article-card:hover { transform:translateY(-6px); border-color:rgba(89,157,255,.45); background:rgba(255,255,255,.06); }.article-cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:#050608; }.article-cover::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(6,11,18,.62)); }.article-cover img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.article-card:hover .article-cover img { transform:scale(1.025); }.article-number { position:absolute; z-index:1; top:15px; left:16px; display:grid; width:28px; height:28px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(4,8,13,.72); color:rgba(255,255,255,.78); font-family:var(--mono); font-size:9px; backdrop-filter:blur(12px); }.article-body { display:flex; flex:1; flex-direction:column; padding:24px 26px 26px; }.article-topic { color:#8bbdff; font-size:9px; font-weight:800; letter-spacing:.1em; }.article-card h3 { margin:13px 0 24px; font-size:23px; line-height:1.14; letter-spacing:-.03em; }.article-link { margin-top:auto; color:rgba(255,255,255,.48); font-size:12px; }.newsletter-cta { margin-top:32px; border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:white; }
.open-source { padding-bottom:80px; }.repo-list { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); }.repo-list a { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:25px 28px; border-bottom:1px solid var(--line); text-decoration:none; }.repo-list a:last-child { border:0; }.repo-list a:hover { background:#f9fbfd; }.repo-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:13px; background:#edf4ff; color:var(--blue); }.repo-icon-skill { background:#fff0ee; color:#e53b31; font-family:var(--mono); font-size:10px; font-weight:800; }.repo-list strong,.repo-list small { display:block; }.repo-list small { margin-top:5px; color:var(--muted); }.repo-kind,.repo-proof { display:inline-block; margin-left:7px; padding:3px 6px; border-radius:999px; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.08em; text-transform:uppercase; vertical-align:2px; }.repo-kind { background:#fff0ee; color:#c9352e; }.repo-proof { background:#eaf8f0; color:#23804d; }.repo-proof::before { content:"↧ "; }.repo-arrow { color:#9ca6b2; }
.contact { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }.contact-intro h2 { margin:0; font-size:clamp(43px,5vw,70px); line-height:1; letter-spacing:-.055em; }.contact-intro > p:nth-of-type(2) { margin:25px 0; color:var(--muted); font-size:17px; line-height:1.65; }.contact-availability { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:32px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 25px 70px rgba(30,50,75,.08); }.contact-form label { display:flex; flex-direction:column; gap:8px; color:#485567; font-size:12px; font-weight:650; }.contact-form label:nth-child(3),.contact-form label:nth-child(4) { grid-column:1/-1; }.contact-form input,.contact-form textarea,.contact-form select { width:100%; border:1px solid var(--line); border-radius:11px; background:#f8fafc; color:var(--ink); padding:13px 14px; transition:border-color .2s,box-shadow .2s; }.contact-form textarea { resize:vertical; }.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,122,243,.1); }.contact-form button { grid-column:1/-1; }.form-note { grid-column:1/-1; margin:0; color:#8a95a2; font-size:10px; text-align:center; }
.site-footer { display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; padding:38px max(24px,calc((100vw - 1180px)/2)); border-top:1px solid var(--line); background:var(--surface); }.site-footer > div:first-child { display:flex; gap:12px; align-items:center; }.site-footer p { margin:0; color:var(--muted); font-size:11px; }.site-footer p strong,.site-footer p span { display:block; }.site-footer p strong { color:var(--ink); font-size:13px; }.footer-links { display:flex; gap:9px; }.footer-links a { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--muted); text-decoration:none; transition:color .2s,border-color .2s,transform .2s,box-shadow .2s; }.footer-links a:hover { border-color:rgba(20,122,243,.35); color:var(--blue); transform:translateY(-2px); box-shadow:0 8px 20px rgba(23,44,71,.08); }.footer-links svg { width:18px; height:18px; fill:currentColor; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal[data-delay="1"] { transition-delay:.1s; }.reveal[data-delay="2"] { transition-delay:.2s; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width: 980px) {
  .main-nav { display:none; }.hero-intro { grid-template-columns:1fr; gap:25px; }.hero-intro > .eyebrow { margin-bottom:0; }.hero-support { max-width:680px; }.studio-shell { height:620px; }.studio-body { grid-template-columns:150px minmax(260px,.8fr) minmax(300px,1.2fr); }.case-study,.freelance-case { grid-template-columns:1fr; }.case-visual { min-height:580px; }.contact { gap:40px; }.article-grid { grid-template-columns:1fr; }.article-card { min-height:0; }.article-cover { aspect-ratio:2/1; }
}
@media (min-width: 1280px) and (min-height: 900px) {
  .hero { min-height:100dvh; padding-top:110px; padding-bottom:38px; }
  .hero-intro { gap:24px 70px; margin-bottom:30px; }
  .hero-intro > .eyebrow { margin-bottom:-8px; }
  .hero h1 { font-size:clamp(58px,5.1vw,82px); }
  .hero-copy { font-size:18px; line-height:1.5; }
  .hero-actions { margin-top:22px; }
  .hero-signals { margin-top:18px; }
  .studio-shell { height:clamp(680px,calc(100dvh - 385px),820px); }
  .studio-body { grid-template-columns:190px minmax(390px,2fr) minmax(470px,3fr); }
  .code-editor pre { padding:28px 24px; font-size:12px; line-height:1.78; }
  .device-stage { padding:20px; }
  .iphone-frame { width:clamp(254px,calc((100dvh - 385px) * .42),330px); height:clamp(528px,calc(100dvh - 495px),690px); }
}
@media (max-width: 740px) {
  .site-header { top:10px; width:calc(100% - 20px); }.brand-copy { display:none; }.header-actions .button { display:none; }.hero { padding:135px 18px 68px; }.hero-intro { display:block; margin-bottom:40px; }.hero-intro > .eyebrow { margin-bottom:18px; }.hero h1 { font-size:clamp(48px,15vw,76px); }.hero-support { display:block; }.hero-copy { margin-top:25px; font-size:17px; }.hero-actions { align-items:flex-start; flex-direction:column; }.hero-signals { margin-top:24px; }.studio-shell,.studio-shell:hover { width:100%; height:auto; overflow:visible; transform:none; border:0; border-radius:0; background:transparent; box-shadow:none; }.studio-toolbar,.studio-navigator,.code-editor,.preview-header { display:none; }.studio-body { display:block; height:auto; }.preview-pane { background:transparent; }.device-stage { height:auto; padding:0; background:transparent; }.iphone-frame { width:min(330px,90vw); height:680px; border-radius:58px; }.iphone-screen { border-radius:48px; }.dynamic-island { top:19px; width:92px; height:25px; }.preview-app { padding:64px 23px 24px; }.preview-app h4 { font-size:30px; }.preview-app p { font-size:12px; }.profile-presentation { padding:0; }.profile-presentation .profile-slide { padding:66px 20px 82px; }.profile-presentation .journey-build-skeleton { top:126px; right:20px; left:20px; }.profile-presentation .profile-promise span { min-height:43px; padding:10px 13px 10px 37px; font-size:10px; }.profile-presentation .profile-promise span::before { left:14px; width:10px; height:10px; }.profile-presentation .profile-hero-card h4 { font-size:25px; }.profile-presentation .profile-hero-card > p { font-size:10px; }.profile-presentation .profile-slide-header h4 { font-size:23px; }.profile-presentation .profile-slide-header p { font-size:9px; }.profile-presentation .career-progression strong,.profile-presentation .reason-grid strong,.profile-presentation .profile-case-stack strong,.profile-presentation .open-source-card strong { font-size:10px; }.profile-presentation .career-progression small,.profile-presentation .reason-grid p,.profile-presentation .profile-case-stack p,.profile-presentation .open-source-card p { font-size:7px; }.profile-presentation .profile-contact-slide h4 { font-size:31px; }.avatar-orb { width:84px;height:84px;border-radius:27px;font-size:27px; }.preview-stats span { font-size:9px; }.preview-stats strong { font-size:18px; }.preview-button { padding:13px;font-size:10px; }.profile-build { gap:10px; padding:62px 18px 18px; }.profile-build .profile-build-identity { grid-template-columns:62px minmax(0,1fr); }.profile-build .profile-build-identity .avatar-orb { width:62px; height:62px; border-radius:20px; }.profile-build .profile-build-identity h4 { font-size:20px; }.profile-build .profile-build-identity p { font-size:8px; }.profile-build .profile-focus span { padding:5px 7px; font-size:7px; }.profile-build .profile-company-list { gap:6px; }.profile-build .profile-company-row { min-height:43px; grid-template-columns:36px minmax(0,1fr); }.profile-build .profile-company-row .company-logo { width:36px; height:36px; }.profile-build .profile-company-row strong { font-size:9px; }.profile-build .profile-company-row small { font-size:6px; }.profile-build .profile-project-card { grid-template-columns:44px minmax(0,1fr); padding:9px; }.profile-build .project-symbol { width:44px; height:44px; }.profile-build .profile-project-card strong { font-size:10px; }.profile-build .profile-project-card p { font-size:7px; }.mobile-preview-note { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:25px; color:rgba(255,255,255,.46); font-size:11px; }.proof-strip { grid-template-columns:1fr; width:calc(100% - 36px); margin-top:24px; padding:12px 20px; }.proof-strip div,.proof-strip div:first-child { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }.proof-strip div:last-child { border:0; }.section { width:calc(100% - 36px); padding:90px 0; }.section-heading { margin-bottom:40px; }.section-heading h2 { font-size:43px; }.case-copy { padding:30px 25px; }.case-copy h3 { font-size:37px; }.case-meta { margin-bottom:30px; }.case-visual { min-height:500px; }.mega-visual { padding:35px 20px; }.album-art { width:78%; }.freelance-visual { min-height:460px;padding:28px 12px; }.freelance-window { width:112%; min-height:360px; }.fd-content { padding:20px 15px; }.fd-heading strong { font-size:16px; }.secondary-cases { grid-template-columns:1fr; }.compact-case { min-height:350px; padding:28px; }.timeline { margin-left:0; }.timeline-line { left:5px; }.timeline-item { grid-template-columns:1fr; gap:8px; padding-left:30px; }.timeline-item::before { left:-1px; }.timeline-year { text-align:left; }.timeline-entry { grid-template-columns:44px minmax(0,1fr); gap:13px; }.timeline-company-logo { width:44px; height:44px; border-radius:13px; }.timeline-item h3 { margin-top:0; font-size:20px; }.journey-actions { margin-left:30px; flex-wrap:wrap; }.writing { width:100%; padding-right:18px; padding-left:18px; }.contact { grid-template-columns:1fr; }.contact-form { grid-template-columns:1fr; padding:22px; }.contact-form label { grid-column:1/-1; }.site-footer { grid-template-columns:1fr; gap:22px; }.site-footer > p { order:3; }
}
@media (max-width: 740px) {
  .music-phone { width:330px; max-width:92%; min-height:570px; padding:22px 24px 26px; border-radius:44px; }
  .music-topbar { margin-bottom:28px; }
  .music-phone .album-art { margin-bottom:24px; }
  .fd-mac-window { width:148%; min-height:440px; transform:scale(.73) rotate(-1.2deg); }
  .hero-actions { width:min(100%,360px); gap:10px; align-items:stretch; margin-right:auto; margin-left:auto; }
  .hero-actions .button { width:100%; min-height:54px; }
  .hero-secondary-action { justify-content:center; }
  .profile-presentation .profile-promise > span { min-height:65px; grid-template-columns:43px minmax(0,1fr); padding:10px 12px; }
  .profile-presentation .profile-promise i { width:43px; height:43px; font-size:11px; }
  .profile-presentation .profile-promise strong { font-size:11px; }
  .profile-presentation .profile-promise small { font-size:7.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-build-part { transition:none; }
  .code-editor code.is-typing::after { animation:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }.reveal { opacity:1; transform:none; }
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#edf3fb; --muted:#9ba8b9; --paper:#09121e; --surface:#101b29; --line:rgba(255,255,255,.11); }
  .proof-strip,.section:not(.writing),.site-footer { color:var(--ink); }.button-secondary,.repo-list,.compact-case,.case-study,.contact-form { background:var(--surface); }.impact-callout { background:rgba(255,138,52,.1); }.case-points li { color:#bdc8d5; }.repo-list a:hover { background:#142233; }.contact-form input,.contact-form textarea,.contact-form select { background:#0c1623;color:var(--ink); }.timeline-item::before { border-color:var(--paper); }.preview-pane,.mega-visual,.freelance-visual { color-scheme:light; }
}