/* Tidy Tank placeholder site. Palette from the app icon. */
:root{
  --bg:#121212; --charcoal:#1b1b1b; --panel:#202020; --line:#2e2e2e; --drive:#5a5a5a;
  --teal:#1f9aa0; --teal-2:#2bb7bc; --teal-deep:#156a70; --bubble:#6fd3d3;
  --orange:#f26b1d; --pleco:#d9782a; --green:#7ddc3a;
  --text:#ecebe7; --muted:#a3a19b;
  --radius:18px; --wrap:1120px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(900px 500px at 80% -10%, rgba(31,154,160,.16), transparent 60%),
  radial-gradient(700px 400px at -10% 30%, rgba(242,107,29,.07), transparent 60%),
  var(--bg);
  color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-2)}
a:hover{color:var(--bubble)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
code,pre{font-family:var(--mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.dim{color:var(--muted)}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--green);color:#111;padding:8px 14px;border-radius:8px;font-weight:700;z-index:10}
.skip-link:focus{top:12px}

/* header */
.site-header{position:sticky;top:0;z-index:5;background:rgba(18,18,18,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:-.01em;font-size:1.1rem}
.brand.small{font-size:.95rem}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--text)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:56px}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:.85rem;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(125,220,58,.15)}
h1{font-size:clamp(2.8rem,7vw,5rem);line-height:1;margin:0 0 18px;letter-spacing:-.035em;font-weight:900}
h1::after{content:">_";font-family:var(--mono);color:var(--green);font-size:.38em;margin-left:.35em;vertical-align:.25em;letter-spacing:0}
.tagline{font-size:clamp(1.1rem,2vw,1.3rem);color:#d4d2cc;max-width:34ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn-primary{background:var(--orange);color:#1a0d04}
.btn-primary:hover{background:#ff7d33;transform:translateY(-1px)}
.btn-primary:disabled{cursor:not-allowed;opacity:1;background:linear-gradient(180deg,#f2782e,#d95c14)}
.btn-primary:disabled:hover{transform:none}
.soon{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.25);color:#fff3ea;padding:2px 7px;border-radius:999px}
.btn-ghost{background:transparent;color:var(--text);border-color:#3a3a3a}
.btn-ghost:hover{border-color:var(--teal);color:var(--text);background:rgba(31,154,160,.08)}
.snippet{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:440px;background:#0d0d0d;border:1px solid var(--line);border-radius:12px;padding:10px 10px 10px 16px}
.snippet code{color:var(--text);font-size:.95rem;white-space:nowrap;overflow-x:auto}
.prompt{color:var(--green);margin-right:6px}
.ph{color:var(--orange);font-style:italic}
.copy{font:600 .8rem var(--sans);background:var(--panel);color:var(--muted);border:1px solid #333;border-radius:8px;padding:6px 10px;cursor:pointer}
.copy:hover{color:var(--text);border-color:var(--teal)}
.fineprint{font-size:.82rem;color:var(--muted);margin:8px 0 0}
.hero-art{position:relative;display:grid;place-items:center}
.icon-glow{position:absolute;inset:12%;background:radial-gradient(circle, rgba(31,154,160,.45), transparent 65%);filter:blur(30px)}
.hero-icon{position:relative;width:min(400px,100%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}

/* sections */
section{scroll-margin-top:80px}
.section-head{margin-bottom:24px}
.section-head h2{font-size:clamp(1.7rem,3.5vw,2.3rem);margin:0 0 6px;letter-spacing:-.02em}
.section-head p{margin:0;color:var(--muted);max-width:62ch}
.aquarium-section,.features,.demo,.faq{padding-top:56px;padding-bottom:24px}

/* aquarium */
.tank{position:relative;height:300px;border-radius:24px;overflow:hidden;border:6px solid var(--teal);background:#0e1617;box-shadow:inset 0 0 0 2px #0b0b0b, 0 20px 50px rgba(0,0,0,.4)}
.water{position:absolute;inset:0;background:
   linear-gradient(180deg, rgba(43,183,188,.10) 0%, rgba(31,154,160,.55) 22%, var(--teal-deep) 100%)}
.water::before{content:"";position:absolute;left:0;right:0;top:18%;height:6px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 24px, transparent 24px 48px);opacity:.45;animation:surface 6s linear infinite}
.water::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg, transparent 0 60px, rgba(255,255,255,.035) 60px 90px);animation:rays 12s ease-in-out infinite alternate}
@keyframes surface{to{background-position:48px 0}}
@keyframes rays{to{transform:translateX(40px)}}
.gravel{position:absolute;left:0;right:0;bottom:0;height:34px;
  background:
   radial-gradient(circle at 10px 10px,#3b3b3b 5px,transparent 6px) 0 0/22px 18px,
   radial-gradient(circle at 6px 6px,#2a2a2a 4px,transparent 5px) 8px 8px/18px 16px,
   #1d1d1d;border-top:2px solid #2b2b2b}
.plant{position:absolute;bottom:28px;width:14px;border-radius:8px 8px 0 0;background:linear-gradient(#5fbf3a,#2e7d22);transform-origin:bottom center;animation:sway 5s ease-in-out infinite}
.plant::before,.plant::after{content:"";position:absolute;bottom:20%;width:12px;height:60%;border-radius:8px 8px 0 0;background:inherit}
.plant::before{left:-12px;transform:rotate(-18deg)}
.plant::after{right:-12px;transform:rotate(18deg);height:45%}
.p1{left:7%;height:120px}
.p2{right:9%;height:90px;animation-delay:-2s}
@keyframes sway{50%{transform:rotate(4deg)}}
.junk{position:absolute;left:0;right:0;bottom:35px;height:40px}
.j{position:absolute;bottom:0;font:700 .72rem var(--mono);color:#1a1a1a;padding:4px 7px;border-radius:4px;background:#8b8b8b;box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .7s ease, opacity .7s ease}
.j.cache{left:18%;background:#a1a1a1;transform:rotate(-6deg)}
.j.logs{left:33%;background:#c9b48a;transform:rotate(4deg)}
.j.dmg{left:50%;background:#9a8fb0;transform:rotate(-3deg)}
.j.tmp{left:64%;background:#b48a7a;transform:rotate(7deg)}
.j.dl{left:76%;background:#8fa79a;transform:rotate(-5deg)}
.tank.clean .j{opacity:0;transform:translateY(-140px) scale(.6)}
.tank.clean .j.logs{transition-delay:.15s}.tank.clean .j.dmg{transition-delay:.3s}.tank.clean .j.tmp{transition-delay:.45s}.tank.clean .j.dl{transition-delay:.6s}
.swimmer{position:absolute;z-index:2;bottom:56px;left:0;width:104px;animation:swim 16s linear infinite}
.swimmer img{width:104px;image-rendering:pixelated;animation:bob 1.4s ease-in-out infinite}
@keyframes swim{
  0%{transform:translateX(calc(-120px)) scaleX(-1)}
  48%{transform:translateX(calc(100cqw + 20px)) scaleX(-1)}
  50%{transform:translateX(calc(100cqw + 20px)) scaleX(1)}
  98%{transform:translateX(-120px) scaleX(1)}
  100%{transform:translateX(-120px) scaleX(-1)}
}
.tank{container-type:inline-size}
@keyframes bob{50%{transform:translateY(-4px)}}
.bubbles span{position:absolute;bottom:-20px;width:12px;height:12px;border:2px solid var(--bubble);border-radius:3px;opacity:.85;animation:rise 7s linear infinite}
.bubbles span:nth-child(1){left:12%;animation-delay:0s}
.bubbles span:nth-child(2){left:22%;width:8px;height:8px;animation-delay:-2s;animation-duration:6s}
.bubbles span:nth-child(3){left:41%;animation-delay:-4s;animation-duration:8s}
.bubbles span:nth-child(4){left:55%;width:16px;height:16px;animation-delay:-1s}
.bubbles span:nth-child(5){left:68%;width:8px;height:8px;animation-delay:-5s;animation-duration:5.5s}
.bubbles span:nth-child(6){left:80%;animation-delay:-3s;animation-duration:9s}
.bubbles span:nth-child(7){left:88%;width:10px;height:10px;animation-delay:-6s}
.bubbles span:nth-child(8){left:33%;width:6px;height:6px;animation-delay:-3.5s;animation-duration:6.5s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.85}50%{transform:translate(8px,-160px)}90%{opacity:.6}100%{transform:translate(-4px,-330px);opacity:0}}
.tank-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.tank-status{color:var(--muted);font-size:.9rem}

/* cards */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{grid-column:span 2}
.card:nth-child(n+4){grid-column:span 3}
.card{background:linear-gradient(180deg,#1f1f1f,#191919);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:var(--teal);transform:translateY(-2px)}
.card h3{margin:12px 0 6px;font-size:1.1rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card em{color:#7c7a75;font-style:normal;font-size:.8rem}
.card code{color:var(--green);background:#0d0d0d;padding:1px 6px;border-radius:5px;font-size:.88em}
.card-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(31,154,160,.14);border:1px solid rgba(31,154,160,.35);font-size:1.3rem}
.card-ico.mono{font:800 1rem var(--mono);color:var(--green);background:rgba(125,220,58,.08);border-color:rgba(125,220,58,.3)}

/* terminal */
.terminal{margin:0;background:#0b0b0b;border:1px solid #2c2c2c;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1c1c1c;border-bottom:1px solid #2a2a2a}
.tl{width:12px;height:12px;border-radius:50%}
.tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
.term-title{margin-left:10px;color:var(--muted);font:600 .8rem var(--mono)}
.term-body{margin:0;padding:20px 22px;color:#d8d6d0;font-size:.92rem;line-height:1.7;overflow-x:auto}
.term-body .p{color:var(--green)}
.term-body .m{color:var(--pleco)}
.term-body .k{color:var(--teal-2)}
.term-body .o{color:var(--orange);font-weight:700}
.term-body .q{color:var(--green);font-weight:700}
.term-body .dim{color:#6f6d68}
.cursor{color:var(--green);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.terminal figcaption{padding:10px 16px;border-top:1px solid #222;color:var(--muted);font-size:.82rem}

/* faq */
.faq-list{display:grid;gap:10px;max-width:800px}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 18px}
details[open]{border-color:#3a3a3a}
summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--teal-2);font-size:1.2rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px;color:var(--muted)}

/* footer */
.site-footer{margin-top:72px;border-top:1px solid var(--line);padding:28px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot p{margin:0;font-size:.9rem}
.term-sig{font-family:var(--mono);color:var(--green)!important;font-weight:800}

/* 404 */
.notfound{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.notfound img{margin:0 auto 18px;width:160px}
.notfound h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.notfound h1::after{content:none}
.notfound p{color:var(--muted);margin:0 0 24px}

/* responsive */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:36px;padding-bottom:24px;gap:24px;text-align:left}
  .cards{grid-template-columns:1fr 1fr}
  .card,.card:nth-child(n+4){grid-column:auto}
  .card:last-child{grid-column:1/-1}
  .hero-art{order:-1}
  .hero-icon{width:min(240px,64vw)}
  .tank{height:240px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .nav ul{gap:14px}
  .nav a{font-size:.88rem}
  .brand span{font-size:1rem}
  .cta .btn{flex:1 1 100%;justify-content:center}
  .cards{grid-template-columns:1fr}
  .aquarium-section,.features,.demo,.faq{padding-top:44px}
  .snippet code{font-size:.85rem}
  .j{font-size:.62rem;padding:3px 5px}
  .j.dl{left:72%}
  .term-body{font-size:.78rem;padding:16px}
  .swimmer,.swimmer img{width:80px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .swimmer{left:38%;transform:scaleX(-1)}
  .bubbles span{display:none}
  .bubbles span:nth-child(-n+3){display:block;bottom:auto;opacity:.7}
  .bubbles span:nth-child(1){top:30%}.bubbles span:nth-child(2){top:45%}.bubbles span:nth-child(3){top:22%}
}