/* AutomateJake homepage (automatejake.com). Always dark. */
:root{
  --bg:#08090b;
  --bg-2:#0e1013;
  --fg:#eef1f2;
  --muted:#98a3a8;
  --line:#1f2428;
  --accent:#4fe0c0;
  --accent-ink:#04120e;
  --node:#4fe0c0;
  --node-dim:#4a5a60;
  --display:'Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-padding-top:60px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--display);font-size:18px;line-height:1.6;padding-inline:20px;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
.wrap{max-width:1120px;margin-inline:auto}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-inline:-20px;padding-inline:20px}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.aj-face{border-radius:50%;object-fit:cover;flex:none}
.aj-face.nav{width:32px;height:32px}
.aj-face.foot{width:28px;height:28px;display:inline-block;vertical-align:middle;margin-right:8px}
.brand i{font-style:normal;color:var(--accent)}
.links{display:flex;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.links a{text-decoration:none;color:var(--muted);transition:color .2s}
.links a:hover{color:var(--fg)}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--fg);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,background .25s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
nav.open .menu-btn span{background:transparent}
nav.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
nav.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:720px){
  .menu-btn{display:flex}
  .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 20px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
  nav.open .links{display:flex}
  .links a{padding:14px 0;font-size:14px;color:var(--fg);border-bottom:1px solid var(--line)}
  .links a:last-child{border-bottom:0}
}

/* hero */
.hero{position:relative;margin-inline:-20px;padding-inline:20px;overflow:hidden;border-bottom:1px solid var(--line);min-height:calc(100dvh - 60px);display:flex;align-items:center}
#net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.intro{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;width:100%;padding-block:16px}
.hint{position:absolute;left:20px;bottom:14px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.aj-peek{display:none}
.intro-copy h1{font-size:clamp(40px,5vw,68px);max-width:12ch;margin:0}
.intro-copy p{max-width:36em;color:var(--muted);font-size:clamp(18px,1.7vw,21px);margin:18px 0 0}
.intro-copy strong{color:var(--fg);font-weight:500}
.intro-copy a{color:var(--accent);text-decoration:none}
.intro-copy a:hover{text-decoration:underline}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 18px;border-radius:999px;border:1px solid var(--line);transition:transform .2s,background .2s,border-color .2s}
.btn.main{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:500}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}

/* sections */
section{padding-block:104px}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.sec-head h2{font-size:clamp(34px,5.4vw,60px);max-width:16ch}

/* verticals: open rows */
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) auto;gap:12px 40px;align-items:center;padding:34px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .45s}
.row:hover::after,.row:focus-visible::after{width:100%}
.row:hover,.row:focus-visible{padding-left:16px}
.row h3{font-size:clamp(26px,3.6vw,42px)}
.row h3 span{color:var(--muted);font-weight:300}
.row p{margin:0;color:var(--muted);font-size:17px;max-width:30em}
.status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--node-dim)}
.live .dot{background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
.live{color:var(--accent)}
.arrow{transition:transform .3s}
.row:hover .arrow{transform:translateX(6px)}
.row.soon{cursor:default}
.row.soon h3{color:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}}
@media(max-width:900px){.row{grid-template-columns:1fr}}

/* cursor spotlight on interactive rows */
.row,.work{--mx:50%;--my:50%}
.row::before,.work::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.row:hover::before,.work:hover::before{opacity:1}

/* selected work */
.worklist{border-top:1px solid var(--line)}
.work{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 150px;gap:8px 40px;align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--line);transition:padding .3s}
.work::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .45s}
.work:hover::after{width:100%}
.work:hover{padding-left:16px}
.work h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.015em;font-weight:700;transition:color .25s}
.work:hover h3{color:var(--accent)}
.work p{margin:0;color:var(--muted);font-size:16px}
.work .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;transition:color .25s,transform .3s}
.work:hover .tag{color:var(--accent);transform:translateX(-6px)}
@media(max-width:900px){.work{grid-template-columns:1fr}.work .tag{text-align:left}.work:hover .tag{transform:none}}

/* cursor glow + ripple */
#glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 9%,transparent),transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
body.glowing #glow{opacity:1}
nav,section,footer,header{position:relative;z-index:1}
nav{position:sticky;z-index:10}
.btn{will-change:transform}
@media(hover:none){#glow{display:none}}

/* platform strip */
.plat{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:36px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.plat b{color:var(--fg);font-weight:500}

/* about */
.aj-jake{width:min(240px,calc((100dvh - 160px) * 470 / 1045));margin:0 0 8px;line-height:0;cursor:pointer}
@media(max-width:860px){
  .hero{min-height:0;display:block}
  .intro{grid-template-columns:1fr;padding-block:12px 28px}
  .aj-jake,.hint{display:none}
  .intro-copy{position:relative;margin-top:min(52vw,200px)}
  .aj-peek{display:block;position:absolute;left:50%;bottom:calc(100% - 10px);width:min(78vw,320px);height:auto;transform:translateX(-50%);pointer-events:none;animation:aj-hang 2.8s ease-in-out infinite}
  .aj-sep{display:none}
}
@keyframes aj-hang{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
.aj-jake-body{position:relative;display:block;transform-origin:50% 100%}
.aj-jake img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
.aj-jake-wave{position:relative;display:block}
.aj-jake-torso{position:relative;z-index:1}
.aj-jake-hand{position:absolute;left:0;top:0;z-index:1;transform-origin:25.11% 24.4%;animation:aj-wave 1.15s ease-in-out infinite}
.aj-jake-startled{position:absolute;left:0;top:0;opacity:0;z-index:2}
.aj-jake:hover .aj-jake-startled,.aj-jake.is-startled .aj-jake-startled{opacity:1}
.aj-jake:hover .aj-jake-torso,.aj-jake:hover .aj-jake-hand,.aj-jake.is-startled .aj-jake-torso,.aj-jake.is-startled .aj-jake-hand{opacity:0}
.aj-jake:hover .aj-jake-hand,.aj-jake.is-startled .aj-jake-hand{animation:none}
.aj-jake:hover .aj-jake-body,.aj-jake.is-startled .aj-jake-body{animation:aj-jump .5s ease}
@keyframes aj-wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-8deg)}}
@keyframes aj-jump{0%{transform:translateY(0)}16%{transform:translateY(8px) scale(1.03,.97)}40%{transform:translateY(-22px) scale(.98,1.03)}62%{transform:translateY(0) scale(1.02,.98)}78%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@media(hover:none){
  .aj-jake:hover .aj-jake-startled{opacity:0}
  .aj-jake:hover .aj-jake-torso,.aj-jake:hover .aj-jake-hand{opacity:1}
  .aj-jake:hover .aj-jake-body{animation:none}
  .aj-jake:hover .aj-jake-hand{animation:aj-wave 1.15s ease-in-out infinite}
}
.ventures{border-top:1px solid var(--line)}
.v{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.v .yr{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);padding-top:5px}
.v h3{font-size:22px;letter-spacing:-.01em;font-weight:700}
.v p{margin:4px 0 0;font-size:16px}
@media(max-width:480px){.v{grid-template-columns:1fr}}

/* contact */
.contact{border-top:1px solid var(--line);text-align:left}
.contact-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:center;padding-top:28px}
.contact-copy{display:contents}
.contact-lead .label{grid-column:1;grid-row:1}
.contact h2{grid-column:1;grid-row:2;font-size:clamp(40px,8vw,96px);max-width:12ch}
.aj-stand{grid-column:2;grid-row:2;justify-self:end;align-self:center;width:min(280px,34vw);line-height:0;cursor:pointer}
.aj-stand-body{position:relative;display:block}
.aj-stand img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.aj-stand .aj-stand-crossed{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);opacity:0}
.aj-stand:hover .aj-stand-crossed,.aj-stand.is-startled .aj-stand-crossed{opacity:1}
.aj-stand:hover .aj-stand-still,.aj-stand.is-startled .aj-stand-still{opacity:0}
@media(hover:none){
  .aj-stand:hover .aj-stand-crossed{opacity:0}
  .aj-stand:hover .aj-stand-still{opacity:1}
}
@media(max-width:860px){
  .contact-lead{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .contact-copy{display:block}
  .aj-stand{grid-column:auto;grid-row:auto;width:min(240px,72vw)}
}
.mail{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:36px}
.mail code{font-family:var(--mono);font-size:clamp(15px,2.4vw,22px);color:var(--fg)}
.copy{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:none;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color .2s}
.copy:hover{border-color:var(--accent)}
.social{display:flex;gap:26px;margin-top:28px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.social a{color:var(--muted);text-decoration:none}
.social a:hover{color:var(--accent)}
footer{border-top:1px solid var(--line);margin-inline:-20px;padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* section separators: the same Jake illustration crossing the screen */
.aj-sep{position:relative;height:220px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:8px;overflow:hidden;pointer-events:none}
.aj-sep-mover{position:absolute;left:0;bottom:0;z-index:1;animation:aj-sep-cross 30s linear infinite}
.aj-sep-rig{position:relative;width:260px;height:210px}
.aj-sep-jake{position:absolute;left:72px;bottom:0;height:188px;width:auto;z-index:1;-webkit-user-drag:none;user-select:none}
@keyframes aj-sep-cross{from{transform:translateX(-120%)}to{transform:translateX(100vw)}}
.aj-sep-sail{background:linear-gradient(180deg,transparent 0 78%,#0d221e 78% 100%)}
.aj-sep-sail .aj-sep-rig{animation:aj-bob 2.6s ease-in-out infinite}
.aj-sail{position:absolute;left:156px;bottom:46px;width:88px;height:148px;z-index:0}
.aj-sheet{transform-box:fill-box;transform-origin:0% 80%;animation:aj-flutter 2.2s ease-in-out infinite}
.aj-hull{position:absolute;left:0;bottom:0;width:260px;height:108px;z-index:2}
@keyframes aj-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(6px) rotate(1.1deg)}}
@keyframes aj-flutter{0%,100%{transform:skewY(0deg)}50%{transform:skewY(3deg)}}
.aj-sep-water{position:absolute;left:0;right:0;bottom:0;height:28px;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 26'%3E%3Cpath d='M0 14 Q11 6 22 14 T44 14 T66 14 T88 14 V26 H0 Z' fill='%23143a34'/%3E%3Cpath d='M0 15 Q11 9 22 15 T44 15 T66 15 T88 15' fill='none' stroke='%234fe0c0' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:88px 28px;background-position:bottom left;animation:aj-water 2.8s linear infinite}
@keyframes aj-water{from{background-position:0 100%}to{background-position:-88px 100%}}
.aj-sep-mine{height:260px;background:linear-gradient(#14181c,#08090b)}
.aj-sep-mine::before{content:"";position:absolute;left:0;right:0;top:0;height:42px;z-index:0;background:linear-gradient(#3a291e,#3a291e) top/100% 8px no-repeat,repeating-linear-gradient(90deg,transparent 0 64px,#3a291e 64px 72px,transparent 72px 136px) bottom/100% 34px no-repeat}
.aj-rails{position:absolute;left:0;right:0;bottom:14px;height:10px;z-index:0;background:linear-gradient(#d5dbde,#d5dbde) center/100% 3px no-repeat,repeating-linear-gradient(90deg,#5c4030 0 12px,transparent 12px 34px) bottom/34px 6px repeat-x}
.aj-sep-mine .aj-sep-mover{bottom:18px;animation-name:aj-sep-mine;animation-duration:30s}
.aj-mine-driver{display:block;height:192px;width:auto}
@keyframes aj-sep-mine{from{transform:translateX(-120%)}to{transform:translateX(100vw)}}

/* gentle reveal; visible at rest if JS or motion is off */
.rv{transition:opacity .7s,transform .7s}
.js .rv.pre{opacity:.001;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv.pre{opacity:1;transform:none}
  .aj-sep-mover{left:18%;transform:none}
}

/* large screens: wider column, larger type */
@media(min-width:1600px){
  body{font-size:20px}
  .wrap{max-width:min(1440px,80vw)}
  .sec-head h2{font-size:clamp(60px,3.8vw,76px)}
  .row h3{font-size:48px}
  .row p,.work p{font-size:18px}
  .work h3{font-size:30px}
  .links{font-size:13px}
}

.foot-links{display:flex;gap:20px;flex-wrap:wrap}.foot-links a{text-decoration:none}.foot-links a:hover{color:var(--fg)}