/* Jacob the AI Generalist. One ground, one ink, one accent. Glass is reserved for the product tiles:
   it is the thing Jacob builds, so it is the signature, not decoration. */
:root{
  --ground:#06090f;
  --ink:#f3f5f8;
  --mute:#9aa4b2;
  --accent:#ffb23f;
  --field:#0b111b;
  --s1:15px;--s2:18px;--s3:clamp(22px,2.4vw,28px);--s4:clamp(36px,5vw,64px);--s5:clamp(40px,5.4vw,84px);
  --gut:clamp(16px,2.6vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--s2)/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1{font-size:var(--s5);line-height:.98;letter-spacing:-.045em;font-weight:700;white-space:nowrap}
h1 span{display:block}
h2{font-size:var(--s4);line-height:.98;letter-spacing:-.035em;font-weight:700;max-width:16ch}
h3{font-size:var(--s3);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.w{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
.mute{color:var(--mute)}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--gut);top:12px;z-index:50;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:8px}

/* Bar: wordmark, three links, one action. Sits flat on the ground. */
.bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.mark{font-weight:700;letter-spacing:-.02em;text-decoration:none;font-size:var(--s2)}
.mark span{color:var(--mute);font-weight:500}
.bar nav{display:none;gap:32px;font-size:var(--s1)}
.bar nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.bar nav a:hover{color:var(--ink)}
.act{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--accent);color:#1a1205;font-weight:650;font-size:var(--s1);text-decoration:none;letter-spacing:-.01em;transition:transform .25s var(--ease),filter .25s}
.act:hover{transform:translateY(-1px);filter:brightness(1.06)}
.act.big{min-height:60px;padding:0 30px;font-size:var(--s2)}
.link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:1px}

/* Hero. The light field behind the glass is the dawn over the water: the only place colour blooms. */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(980px,100svh)}
.sky{position:absolute;inset:-10% -10% 0;z-index:-1;pointer-events:none}
.sky i{position:absolute;border-radius:50%;filter:blur(120px);opacity:.85}
.sky i:nth-child(1){width:66vw;height:66vw;max-width:1040px;max-height:1040px;right:-16vw;top:-24vw;background:#2471a8}
.sky i:nth-child(2){width:44vw;height:44vw;max-width:700px;max-height:700px;right:16vw;top:12vw;background:#139090;opacity:.6}
.sky i:nth-child(3){width:36vw;height:36vw;max-width:560px;max-height:560px;right:-4vw;top:26vw;background:#e08a2e;opacity:.5}
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--ground) 96%)}
.hero .in{display:grid;gap:56px;padding-top:clamp(40px,8vw,120px);padding-bottom:clamp(72px,9vw,140px)}
.lede{margin-top:32px;font-size:var(--s3);line-height:1.3;letter-spacing:-.015em;color:#d6dbe3;max-width:30ch}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:44px}
.where{margin-top:40px;font-size:var(--s1);color:var(--mute)}

/* Glass tiles: layered like the real macOS widgets. Body blur, a top specular sheen, a lit rim,
   and a soft contact shadow so they sit above the water, not on it. */
.stack{position:relative;min-height:520px}
.g{position:absolute;width:min(380px,86vw);border-radius:28px;padding:22px 22px 20px;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.08) inset;
  transform:translate3d(0,0,0);transition:transform .8s var(--ease)}
.g::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.g::after{content:"";position:absolute;inset:1px 1px 55%;border-radius:27px 27px 60% 60%/27px 27px 24px 24px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
.g .top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(243,245,248,.72)}
.g .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#43d17a;margin-right:8px;box-shadow:0 0 0 3px rgba(67,209,122,.18)}
.g .big{font-size:30px;font-weight:650;letter-spacing:-.03em;line-height:1.1;margin-top:14px}
.g .say{margin-top:12px;font-size:15px;line-height:1.45;color:rgba(243,245,248,.86)}
.g .say b{font-weight:600;color:var(--ink)}
.g .row{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;font-size:13px;color:rgba(243,245,248,.7);background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0)) top/100% 1px no-repeat}
.g.a{right:6%;top:0;z-index:3}
.g.b{right:36%;top:236px;z-index:2;width:min(300px,80vw)}
.g.c{right:0;top:420px;z-index:4;width:min(300px,78vw)}
.g .bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:16px}
.g .bars span{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.28))}
.g .bars span:nth-child(1){height:30%}.g .bars span:nth-child(2){height:45%}.g .bars span:nth-child(3){height:38%}.g .bars span:nth-child(4){height:62%}.g .bars span:nth-child(5){height:54%}.g .bars span:nth-child(6){height:78%}.g .bars span:nth-child(7){height:96%}
.g .bars span:last-child{background:linear-gradient(180deg,#ffd27f,var(--accent))}
.note{position:absolute;right:4%;bottom:-6px;font-size:13px;color:var(--mute)}

/* Sections: each one a different shape. */
section{padding-block:clamp(110px,14vw,210px)}
.field{background:var(--field)}
.split{display:grid;gap:48px}
.split p{font-size:var(--s2);color:#c9cfd8;max-width:52ch}
.split p+p{margin-top:18px}
.big-num{font-size:var(--s5);font-weight:700;letter-spacing:-.05em;line-height:.85}

.offer{display:grid;gap:0;margin-top:72px}
.bio{margin-top:32px}
.send{margin-top:12px}
button.act{border:0;cursor:pointer;font-family:inherit}
button.act:disabled{opacity:.6;cursor:wait}
.offer article{display:grid;gap:18px;padding-block:44px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,0)) top/100% 1px no-repeat}
.offer article:first-child{background:none}
.offer h3{font-size:var(--s4);letter-spacing:-.035em;line-height:1}
.offer p{color:#c9cfd8;max-width:46ch}

.steps{display:grid;gap:64px;margin-top:80px}
.steps h3{margin-bottom:12px}
.steps p{color:#c9cfd8;max-width:36ch}

.me{display:grid;gap:48px;align-items:end}
.me blockquote{margin:0;font-size:var(--s3);line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.me p{color:#c9cfd8;max-width:48ch}

.cta{text-align:left}
.cta h2{max-width:14ch}
.cta form{display:grid;gap:14px;margin-top:56px;max-width:640px}
.cta label{font-size:var(--s1);color:var(--mute);display:grid;gap:8px}
.cta input,.cta textarea{width:100%;border:0;border-radius:14px;background:#111926;color:var(--ink);font:inherit;padding:16px 18px;min-height:56px}
.cta textarea{min-height:120px;resize:vertical}
.cta input:focus,.cta textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.cta .two{display:grid;gap:14px}
.hp{position:absolute;left:-9999px}
.cta .fine{font-size:var(--s1);color:var(--mute)}

footer{padding-block:56px 72px;font-size:var(--s1);color:var(--mute)}
footer .w{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(min-width:820px){
  .bar nav{display:flex}
  .split{grid-template-columns:5fr 7fr;gap:96px;align-items:start}
  .offer article{grid-template-columns:5fr 6fr;gap:96px;align-items:baseline}
  .steps{grid-template-columns:repeat(3,1fr);gap:64px}
  .me{grid-template-columns:7fr 5fr;gap:96px}
  .cta .two{grid-template-columns:1fr 1fr}
}
@media(min-width:1100px){
  .hero .in{grid-template-columns:7fr 6fr;align-items:center}
  .stack{min-height:620px}
}
@media(max-width:1099px){
  .stack{min-height:600px;max-width:520px}
  .g.a{right:auto;left:0}.g.b{right:auto;left:8%;top:210px}.g.c{right:0;top:350px}
  .note{right:auto;left:0}
}
@media(max-width:560px){
  .stack{min-height:560px}
  .g.b{left:4%;top:220px}.g.c{top:380px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.g,.act{transition:none}}
@media(prefers-reduced-transparency:reduce){.g{background:#1a2230;-webkit-backdrop-filter:none;backdrop-filter:none}}