/* Project page, option 1 "Stage" (review copy, 2026-10-07).
   Almost pure visual: the name, one line, the live-site button. An app comes
   first (three phones in the hero), then the website as one still preview,
   then the rest of the app's screens in one row to swipe. Website only: the
   hero and the small end, nothing else. The look is the dark studio page
   (design-dark.lemonstone.io): near-black, grain, Outfit 200 silver, Urbanist.
   The business's own colour is used ONLY as light behind its devices. */

@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/outfit-full.woff2) format('woff2')}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/urbanist.woff2) format('woff2')}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/comfortaa.woff2) format('woff2')}

:root{
  --g1:#08090C;
  --ink:#F2F3F6; --ink2:#AAAFBA; --ink3:#7A7F8A; --ink4:#555963;
  --lemon:#FFE45C; --magenta:#FF3D8A;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(16px,4.4vw,64px); --max:1320px; --nav:72px;
  --edge:max(var(--gut),calc((100vw - var(--max)) / 2));
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ac:var(--lemon); /* the business's own colour, set on <body> by the page */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--g1);overflow-x:clip}
body{margin:0;min-height:100svh;background:var(--g1);color:var(--ink);font-family:'Urbanist',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img,svg{display:block}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{position:relative;width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px;border-radius:8px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main{position:relative;z-index:2}
.silver{background:linear-gradient(to bottom right,#fff 30%,rgba(255,255,255,.5));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* the grain: fixed, under the content, so the pictures stay clean */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:var(--noise);background-size:160px 160px}

/* ---------- logo 54: lemon + lemonstone + DESIGN ---------- */
.lemon{--s:1em;display:inline-block;flex:none;width:calc(var(--s) * 1.031);height:var(--s);background:currentColor;
  -webkit-mask:url(assets/lemon-mark-mask.png) center/contain no-repeat;mask:url(assets/lemon-mark-mask.png) center/contain no-repeat}
.lg54{display:inline-flex;align-items:center;gap:.44em;min-height:44px;font-family:'Outfit',sans-serif;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.lg54 .lemon{--s:1.7em;color:var(--lemon)}
.lg54 .w b{display:block;margin-left:.013em;font-family:'Comfortaa','Outfit',sans-serif;font-weight:700;font-size:.908em;line-height:1.1012;letter-spacing:-.03em;text-transform:lowercase;position:relative;top:.084em}
.lg54 .w .d{display:block;font-size:.52em;font-weight:500;letter-spacing:.22em;margin-right:-.22em;margin-top:.46em;text-transform:uppercase;opacity:.72}

/* ---------- buttons: the shaded silver, and dark glass (no blur behind it: a phone scrolls on its own thread) ---------- */
.btn,.btn-g{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px 0 24px;border-radius:999px;
  font:600 16px/1 'Urbanist',sans-serif;letter-spacing:.005em;white-space:nowrap;transition:background .25s,box-shadow .35s var(--ease),transform .35s var(--ease),color .25s}
.btn{color:#0b0b0c;
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 48%),linear-gradient(180deg,#f2f3f4 0%,#d7d9db 46%,#b9bcbf 54%,#d3d5d7 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.14),0 14px 34px -14px rgba(255,61,138,.55),0 10px 30px -12px rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn-g{color:#fff;padding:0 22px 0 20px;border:1.5px solid rgba(255,255,255,.08);background:var(--noise),linear-gradient(104deg,rgba(253,253,253,.06) 5%,rgba(240,240,228,.11) 100%)}
.ar{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.wa{width:19px;height:19px;flex:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 50%),linear-gradient(180deg,#f7f8f8 0%,#e1e3e4 46%,#c9cbce 54%,#e0e1e3 100%);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.28),0 18px 40px -14px rgba(255,61,138,.7),0 3px 32px rgba(255,255,255,.22)}
  .btn:hover .ar{transform:translate(2px,-2px)}
  .btn-g:hover{background:var(--noise),rgba(255,255,255,.92);color:#000}
}
.btn:active,.btn-g:active{transform:scale(.98)}

/* ---------- nav: the logo, then a quiet way back right after it, nothing else ---------- */
.nav{position:relative;z-index:3;padding-top:env(safe-area-inset-top)}
.nav-in{height:var(--nav);display:flex;align-items:center;justify-content:flex-start;gap:clamp(18px,2vw,28px)}
.nav .lg54{font-size:18px}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;color:var(--ink2);font:500 11.5px/1 'Urbanist',sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
.back .ar{width:13px;height:13px}
.back-top{margin-bottom:22px}
@media (hover:hover) and (pointer:fine){.back:hover{color:#fff}.back:hover .ar{transform:translateX(-3px)}}

/* ---------- devices, drawn at true scale ---------- */
/* a phone: a dark body with a lit edge, the real screen inside. --pw is its width and has to be a length (the corners are fractions of it) */
.phone{--pw:260px;position:relative;display:block;flex:none;width:var(--pw);padding:calc(var(--pw) * .036);border-radius:calc(var(--pw) * .165);
  background:linear-gradient(155deg,#2a2d34 0%,#121318 18%,#0a0b0e 60%,#15171c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1.5px 1px rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.55),0 50px 90px -40px rgba(0,0,0,.95),0 24px 50px -24px rgba(0,0,0,.7)}
.phone::before,.phone::after{content:"";position:absolute;width:max(2px,calc(var(--pw) * .01));border-radius:2px;background:linear-gradient(90deg,#3a3d44,#16181c)}
.phone::before{left:calc(var(--pw) * -.008);top:21%;height:6%}
.phone::after{right:calc(var(--pw) * -.008);top:26%;height:10%}
.scr{position:relative;display:block;overflow:hidden;background:#06070A;aspect-ratio:16/10}
.scr img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.phone .scr{aspect-ratio:var(--pa,390/844);border-radius:calc(var(--pw) * .129);-webkit-mask-image:-webkit-radial-gradient(white,black)}
/* a browser: a still picture of the site's first screen */
.browser{display:block;border-radius:12px;overflow:hidden;background:#0E1015;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 60px 120px -50px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.7)}
.bx{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#15171C;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.bx i{width:9px;height:9px;border-radius:50%;background:#2F323A}
.bx span{margin:0 auto;transform:translateX(-20px);height:21px;display:inline-flex;align-items:center;padding:0 14px;border-radius:7px;background:#0B0C10;color:var(--ink3);font:500 11px/1 'Urbanist',sans-serif;letter-spacing:.02em}

/* the business's colour, as light only */
.glow{position:absolute;z-index:0;left:50%;top:50%;width:150%;height:125%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 30%,transparent),color-mix(in srgb,var(--ac) 11%,transparent) 40%,color-mix(in srgb,var(--ac) 3.5%,transparent) 66%,transparent)}

/* ============================================================
   Hero: the name, one line and the button on the left; the pictures on the right
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow-x:clip}
.hero-bg{position:absolute;inset:-72px 0 0;z-index:-1;pointer-events:none;background:
  radial-gradient(34% 30% at 8% 6%,rgba(255,255,255,.045),transparent 70%),
  radial-gradient(46% 42% at 68% 52%,rgba(255,255,255,.03),transparent 72%)}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,64px);align-items:center;
  min-height:calc(100svh - var(--nav) - env(safe-area-inset-top));padding:8px 0 56px}
.copy{position:relative;z-index:3;min-width:0}
.name{font:200 clamp(56px,7.4vw,124px)/.96 'Outfit',sans-serif;letter-spacing:-.045em;padding:0 .04em .08em 0;text-wrap:balance}
/* a name with a word of ten letters or more is set smaller, so it stays in its column */
.name.long{font-size:clamp(46px,5.6vw,92px);line-height:1}
.line{margin-top:22px;max-width:22em;font:300 clamp(19px,1.7vw,25px)/1.4 'Outfit',sans-serif;letter-spacing:-.01em;color:#A9AEB8;text-wrap:pretty}
.line span{color:var(--ink3);white-space:nowrap}
/* the kind, a quiet line of small capitals under the sentence (his pick of five, 2026-10-08) */
.kind{margin-top:16px;font:600 12.5px/1 'Urbanist',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.kind em{font-style:normal;color:var(--ink2)}
.kind i{font-style:normal;margin:0 .55em;opacity:.6}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.art{position:relative;isolation:isolate;min-width:0;min-height:clamp(380px,46vw,680px);display:flex;align-items:center;justify-content:center}
/* the business's logo, very large and faint behind its phones */
.biglogo{position:absolute;z-index:1;left:50%;top:50%;width:auto;height:150%;max-width:none;transform:translate(-50%,-50%);opacity:.085;pointer-events:none;user-select:none;
  -webkit-mask:linear-gradient(transparent 2%,#000 24%,#000 72%,transparent 96%);mask:linear-gradient(transparent 2%,#000 24%,#000 72%,transparent 96%)}
/* an app: three phones, the first screen in the middle */
.trio{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.trio .phone{--pw:clamp(150px,17.5vw,262px)}
.trio .phone:nth-child(1){margin-right:calc(var(--pw) * -.42);transform:translateY(5%) rotate(-9deg) scale(.86);transform-origin:50% 100%}
.trio .phone:nth-child(2){z-index:2}
.trio .phone:nth-child(3){margin-left:calc(var(--pw) * -.42);transform:translateY(5%) rotate(9deg) scale(.86);transform-origin:50% 100%}
.trio .phone:not(:nth-child(2)) .scr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.06),rgba(8,9,12,.3))}
html.js:not(.rm) .trio .phone:nth-child(2){animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{translate:0 -9px}}
/* a website: the still picture in a tilted browser, the phone view in front */
.art.web{perspective:1800px;display:block}
.art.web .browser{position:absolute;z-index:2;left:0;top:50%;width:100%;transform:translateY(-50%) rotateY(-16deg) rotateX(5deg) rotateZ(1.2deg);transform-origin:left center}
.art.web .phone{position:absolute;z-index:3;right:-1%;bottom:3%;--pw:clamp(112px,15vw,230px);transform:rotateY(-16deg) rotateX(5deg) rotateZ(1.2deg)}

/* ============================================================
   The website, once, as a still preview: the whole thing is the link to the live site
   ============================================================ */
.site{position:relative;padding-top:clamp(40px,5vw,80px)}
.site-a{position:relative;display:block;border-radius:14px}
.stage{position:relative;display:block;isolation:isolate;perspective:2200px;padding:2% 0 7%;max-width:1220px}
.stage .glow{width:120%;height:140%;top:46%}
.stage .browser{position:relative;z-index:2;width:86%;transform:rotateY(-13deg) rotateX(5deg) rotateZ(.8deg);transform-origin:left center;transition:transform 1.2s var(--ease)}
.stage .phone{position:absolute;z-index:3;right:3%;bottom:0;--pw:clamp(96px,17vw,236px);transform:rotateY(-13deg) rotateX(5deg) rotateZ(.8deg);transition:transform 1.2s var(--ease)}
/* a dashboard: the browser alone (no phone in front), so it takes the room the phone had */
.site.dash .stage{padding-bottom:3%}
.site.dash .stage .browser{width:92%}
.site-cap{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:6px;color:var(--ink3);font:500 11.5px/1 'Urbanist',sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
@media (hover:hover) and (pointer:fine){
  .site-a:hover .browser{transform:rotateY(-9deg) rotateX(3deg) rotateZ(.5deg)}
  .site-a:hover .phone{transform:rotateY(-9deg) rotateX(3deg) rotateZ(.5deg) translateY(-6px)}
  .site-a:hover .site-cap{color:#fff}
  .site-a:hover .site-cap .ar{transform:translate(2px,-2px)}
}

/* ============================================================
   The rest of the app's screens: one row to swipe, true scale, a title under each
   ============================================================ */
.screens{position:relative;padding-top:clamp(84px,10vw,150px)}
.hero+.screens{padding-top:clamp(28px,4vw,64px)}
.row{position:relative;display:flex;gap:clamp(22px,2.6vw,44px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:30px var(--edge) 34px;scroll-padding-inline:var(--edge)}
.row::-webkit-scrollbar{display:none}
.row::after{content:"";flex:0 0 1px}
.row figure{flex:none;scroll-snap-align:start}
.row .phone{--pw:clamp(200px,18vw,250px)}
.row figcaption{margin-top:20px;padding-left:4px;color:var(--ink3);font:500 11px/1.3 'Urbanist',sans-serif;letter-spacing:.2em;text-transform:uppercase}
/* arrows, for a mouse only (a finger swipes the row) */
.row-nav{display:none}
.row-nav[hidden]{display:none!important}
@media (hover:hover) and (pointer:fine){
  html.js .row-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
  .row-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid rgba(255,255,255,.08);background:var(--noise),rgba(255,255,255,.05);transition:background .25s,color .25s,opacity .3s}
  .row-nav button:hover{background:var(--noise),rgba(255,255,255,.92);color:#000}
  .row-nav button[aria-disabled="true"]{opacity:.3;pointer-events:none}
  .row-nav .ar{width:15px;height:15px}
}

/* ============================================================
   The end: small. The lemon, one line, WhatsApp.
   ============================================================ */
.end{position:relative;text-align:center;padding:clamp(120px,14vw,200px) 0 calc(48px + env(safe-area-inset-bottom))}
.end-in{position:relative;display:flex;flex-direction:column;align-items:center}
.end-in::before{content:"";position:absolute;left:50%;top:calc(clamp(60px,7vw,100px) * -1);width:min(520px,72%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14) 30%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.14) 70%,rgba(255,255,255,0))}
.end .lemon{--s:34px;color:var(--lemon);filter:drop-shadow(0 0 18px rgba(255,228,92,.22))}
.end-h{margin-top:22px;font:200 clamp(30px,3.2vw,46px)/1.12 'Outfit',sans-serif;letter-spacing:-.03em}
.end .btn-g{margin-top:28px}
.end .back{margin-top:22px;color:var(--ink3)}
/* a website-only page: the end stays tiny */
.end.tiny{padding-top:clamp(64px,7vw,110px)}
.end.tiny .end-in::before{top:calc(clamp(36px,3.6vw,56px) * -1);width:min(360px,60%)}
.end.tiny .lemon{--s:24px}
.end.tiny .end-h{margin-top:16px;font-size:clamp(21px,1.9vw,27px)}
.end.tiny .btn-g{margin-top:20px;height:48px}

/* ---------- reveals: sections rise in once as they are reached; finished at once without the script, with reduced motion or ?static=1 ---------- */
html.js:not(.rm) .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
html.js:not(.rm) .rv.in{opacity:1;transform:none}
html.js:not(.rm) .ld{animation:ld 1.1s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes ld{from{opacity:0;transform:translateY(16px)}}

/* ---------- phone and tablet ---------- */
@media (max-width:899px){
  :root{--nav:64px}
  .nav .lg54{font-size:16.5px}
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;padding:12px 0 24px}
  .line{margin-top:16px}
  .acts{margin-top:26px}
  .art{min-height:0;margin-top:34px;padding:6% 0}
  .trio .phone{--pw:min(35vw,250px)}
  .trio .phone:nth-child(1){transform:translateY(5%) rotate(-7deg) scale(.88)}
  .trio .phone:nth-child(3){transform:translateY(5%) rotate(7deg) scale(.88)}
  .biglogo{height:128%}
  .art.web{min-height:0;height:62vw;margin-top:30px;padding:0}
  .art.web .browser{width:96%}
  .art.web .phone{--pw:25vw;right:0;bottom:-2%}
  .stage{padding:4% 0 10%}
  .stage .browser{width:90%;transform:rotateY(-10deg) rotateX(4deg) rotateZ(.6deg)}
  .stage .phone{--pw:27vw;right:0;transform:rotateY(-10deg) rotateX(4deg) rotateZ(.6deg)}
  .site.dash .stage{padding-bottom:4%}
  .site.dash .stage .browser{width:96%}
  .bx{height:24px;padding:0 9px;gap:5px}
  .bx i{width:6px;height:6px}
  .bx span{height:15px;padding:0 9px;font-size:8.5px;border-radius:5px;transform:translateX(-12px)}
  .browser{border-radius:8px}
  .row{gap:18px;padding-top:20px}
  .row figure{scroll-snap-align:center}
  .row .phone{--pw:min(60vw,280px)}
}