@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;600;700;800&display=swap');

:root{
  --cyan:#69eeff;
  --blue:#1576ff;
  --gold:#ffd479;
  --pink:#ff4bd8;
  --text:#f4ffff;
  --muted:rgba(244,255,255,.72);
  --card:rgba(18,16,26,.62);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#03040a;color:var(--text);font-family:Inter,system-ui,sans-serif}

.experience{position:relative;width:100vw;height:100vh;overflow:hidden;perspective:1600px;background:#03040a}
#particleCanvas{position:fixed;inset:0;z-index:5;pointer-events:none}

.hero{position:relative;width:100%;height:100%;overflow:hidden}
.bg-cover{
  position:absolute;inset:-5%;
  background:url("assets/tractor.jpg") center/cover no-repeat;
  transform:scale(1.08);
  filter:blur(22px) saturate(1.12) brightness(.42);
  opacity:.70;
}
.bg-blur{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 66% 42%,rgba(255,224,150,.24),transparent 23%),
    radial-gradient(circle at 58% 43%,rgba(255,255,255,.22),transparent 10%),
    radial-gradient(circle at 47% 43%,rgba(105,238,255,.23),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 38%,rgba(0,0,0,.24) 70%,rgba(0,0,0,.78) 100%);
  mix-blend-mode:screen;
}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at 55% 48%,transparent 35%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.92) 100%);z-index:2}
.gold-wash{position:absolute;right:12%;top:16%;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,rgba(255,212,121,.18),rgba(255,120,70,.07) 38%,transparent 68%);filter:blur(50px);z-index:1;animation:goldBreath 5s ease-in-out infinite}

.mega-orbit{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:.86;pointer-events:none}
.orbit-core ellipse,.orbit-core path{fill:none;stroke:rgba(238,255,255,.42);stroke-width:1.3;stroke-dasharray:8 14;animation:dash 22s linear infinite}
.orbit-core path:nth-child(5),.orbit-core path:nth-child(6){stroke:rgba(255,212,121,.48);stroke-dasharray:10 18}
.fine-grid path{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1}
.gold-routes path{fill:none;stroke:rgba(255,212,121,.74);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:3 24;animation:route 3s linear infinite}
.nodes circle{fill:var(--gold);stroke:#fff;stroke-width:1;animation:nodePulse 2s ease-in-out infinite}

.nav{position:absolute;left:3.4vw;right:3.4vw;top:28px;z-index:20;height:54px;display:grid;grid-template-columns:170px 180px 1fr 150px;align-items:center;gap:18px}
.back,.cta,.actions button{height:42px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.075);color:#fff;font:800 13px Inter,sans-serif;cursor:pointer;backdrop-filter:blur(16px)}
.logo{font:900 23px Inter,sans-serif;color:#fff}.logo span{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid rgba(172,87,255,.68);border-radius:10px;color:#b564ff;margin-right:10px;box-shadow:0 0 24px rgba(172,87,255,.22)}
.nav nav{display:flex;justify-content:center;gap:38px}.nav a{font:700 13px Inter,sans-serif;color:rgba(255,255,255,.70)}
.cta{background:linear-gradient(135deg,#a94dff,#69eeff);color:#070711;border:none}

.content{position:absolute;inset:0;z-index:10;display:grid;grid-template-columns:34vw 1fr;align-items:center;padding:110px 6vw 100px}
.left-copy{position:relative;z-index:15;max-width:520px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;padding:9px 13px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.065);font:800 11px JetBrains Mono,monospace;letter-spacing:.22em;color:rgba(255,255,255,.68);backdrop-filter:blur(14px)}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink)}
h1{margin:0;font:900 clamp(58px,7vw,130px)/.92 Inter,sans-serif;letter-spacing:-.07em;text-shadow:0 0 30px rgba(255,255,255,.22)}
h1 span{background:linear-gradient(90deg,#fff,var(--gold),#69eeff);-webkit-background-clip:text;background-clip:text;color:transparent}
p{max-width:500px;margin:28px 0 34px;color:rgba(255,255,255,.78);font:500 17px/1.7 Inter,sans-serif}
.actions{display:flex;gap:14px}.actions button:first-child{background:linear-gradient(135deg,#ffe79b,#ffc4b0);color:#050508;border:none}.actions button:last-child{padding:0 22px}

.tractor-zone{position:relative;height:min(78vh,760px);min-height:560px;transform-style:preserve-3d}
.tractor-aura{position:absolute;left:50%;top:50%;width:82%;height:74%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.30),rgba(255,212,121,.16) 22%,rgba(105,238,255,.14) 42%,transparent 72%);filter:blur(44px);animation:aura 4.5s ease-in-out infinite}
.tractor-frame{position:absolute;left:50%;top:50%;width:min(64vw,900px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:28px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 80px rgba(105,238,255,.16);transition:transform .18s ease-out}
.tractor-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.06) brightness(.95)}
.image-light{position:absolute;inset:0;background:radial-gradient(circle at 48% 43%,rgba(255,255,255,.22),transparent 16%),radial-gradient(circle at 64% 20%,rgba(255,212,121,.30),transparent 8%),radial-gradient(circle at 20% 40%,rgba(105,238,255,.25),transparent 14%);mix-blend-mode:screen;pointer-events:none}
.scan{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,transparent 44%,rgba(255,255,255,.16) 50%,transparent 57%,transparent 100%);transform:translateX(-120%);animation:sweep 6s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}

.tractor-overlay{position:absolute;left:50%;top:50%;width:min(64vw,900px);aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:6;pointer-events:none}
.exact-zones path,.floor ellipse,.floor path{fill:none;stroke:rgba(105,238,255,.58);stroke-width:1.35;stroke-dasharray:7 11;animation:dash 14s linear infinite}
.accurate-callouts path{fill:none;stroke:rgba(255,212,121,.78);stroke-width:1.35;stroke-dasharray:5 9;animation:dashReverse 9s linear infinite}
.accurate-callouts circle{fill:var(--gold);stroke:white;stroke-width:1;animation:nodePulse 1.8s ease-in-out infinite}
.micro-lines path{fill:none;stroke:rgba(105,238,255,.34);stroke-width:1.1;stroke-dasharray:2 18;animation:micro 2.4s linear infinite}

.cards-layer{position:absolute;inset:0;pointer-events:none;z-index:22}
.float-card{position:absolute;width:188px;padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(24,18,28,.66);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.32);animation:cardFloat 4.5s ease-in-out infinite}
.float-card small{display:block;font:900 10px JetBrains Mono,monospace;letter-spacing:.16em;color:#ff4bd8}.float-card strong{display:block;margin-top:8px;font:900 18px Inter,sans-serif}.float-card span{display:block;margin-top:6px;font:700 12px Inter,sans-serif;color:rgba(255,255,255,.72)}
.card1{left:51%;top:23%}.card2{right:7%;top:28%;animation-delay:-1s}.card3{right:10%;bottom:25%;animation-delay:-2s}.card4{left:48%;bottom:18%;animation-delay:-3s}

.bottom-strip{position:absolute;left:23vw;right:9vw;bottom:50px;z-index:25;height:44px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.075);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 22px;box-shadow:0 16px 50px rgba(0,0,0,.25)}
.bottom-strip div{display:flex;align-items:baseline;gap:8px;border-right:1px solid rgba(255,255,255,.13);padding:0 14px}.bottom-strip div:last-child{border-right:0}.bottom-strip strong{font:900 25px Inter,sans-serif;color:#ff4bd8}.bottom-strip span{font:800 10px JetBrains Mono,monospace;letter-spacing:.08em;color:rgba(255,255,255,.72);text-transform:uppercase}

body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important}
body.boost .tractor-aura{filter:blur(28px);opacity:1}body.boost .bg-cover{filter:blur(16px) saturate(1.25) brightness(.48)}
body.boost .tractor-frame{box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 120px rgba(105,238,255,.26),0 0 120px rgba(255,212,121,.18)}

@keyframes goldBreath{50%{transform:scale(1.08);opacity:.76}}@keyframes dash{to{stroke-dashoffset:-260}}@keyframes dashReverse{to{stroke-dashoffset:260}}@keyframes route{to{stroke-dashoffset:-300}}@keyframes micro{to{stroke-dashoffset:-220}}@keyframes nodePulse{50%{r:7;opacity:.72}}@keyframes aura{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.85}}@keyframes sweep{0%,45%{transform:translateX(-120%);opacity:0}55%{opacity:1}100%{transform:translateX(120%);opacity:0}}@keyframes cardFloat{50%{transform:translateY(-10px)}}@keyframes float{to{transform:translate(20px,18px)}}@keyframes gentle{0%,100%{transform:translate(-50%,-50%) rotateY(-3deg) rotateX(1deg)}50%{transform:translate(-50%,-50%) rotateY(4deg) rotateX(-1deg)}}

@media(max-width:1100px){
  body{overflow:auto}.experience{height:auto;min-height:100vh}.hero{height:auto;min-height:100vh}
  .nav{position:relative;left:auto;right:auto;top:auto;margin:18px;grid-template-columns:1fr;justify-items:center;height:auto}.nav nav{display:none}
  .content{position:relative;inset:auto;display:block;padding:30px 18px 160px}.left-copy{max-width:none;text-align:center;margin:auto}h1{font-size:58px}.actions{justify-content:center}
  .tractor-zone{height:620px;margin-top:30px}.tractor-frame,.tractor-overlay{width:min(92vw,720px)}.cards-layer,.bottom-strip{display:none}
}