:root { --ink:#161616; --cream:#fff6e5; --yellow:#ffd84d; --purple:#8e72ff; --lavender:#e1d7ff; --mint:#a9f2c4; --pink:#ffc7d6; --sky:#aee8ff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; } .wrap { width:min(1120px,calc(100% - 40px)); margin:auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:22px 0; position:relative; z-index:3; } .brand { font-weight:900; font-size:28px; letter-spacing:-1px; text-decoration:none; } .nav a { font-weight:800; text-decoration:none; } .navlinks { display:flex; gap:20px; align-items:center; }
.button { display:inline-block; border:3px solid var(--ink); border-radius:16px; background:var(--yellow); box-shadow:5px 5px 0 var(--ink); padding:14px 19px; font-weight:900; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; } .button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); } .button.dark { background:var(--ink); color:var(--yellow); }
.hero { overflow:hidden; padding:54px 0 86px; background:linear-gradient(135deg,#fff6e5 0%,#e1d7ff 100%); } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; } .eyebrow { display:inline-block; padding:8px 12px; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font-size:12px; font-weight:900; letter-spacing:.6px; } h1 { font-size:clamp(44px,7vw,82px); line-height:.93; margin:18px 0; letter-spacing:-4px; max-width:700px; } .lead { font-size:19px; line-height:1.5; font-weight:700; max-width:550px; } .hero-actions { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.phone-stage { min-height:520px; display:grid; place-items:center; perspective:1100px; position:relative; } .phone { width:min(310px,78vw); transform:rotateY(-13deg) rotateX(5deg) rotateZ(4deg); border:8px solid var(--ink); border-radius:38px; overflow:hidden; box-shadow:22px 24px 0 #6d54d2; animation:float 5s ease-in-out infinite; background:var(--ink); } .phone img { width:100%; display:block; } .spark { position:absolute; font-size:48px; font-weight:900; color:var(--purple); animation:pulse 2.5s ease-in-out infinite; } .s1 { top:20px; right:0; } .s2 { left:5px; bottom:54px; color:var(--yellow); }
section { padding:82px 0; } h2 { font-size:clamp(32px,5vw,58px); letter-spacing:-2px; line-height:1; margin:0 0 18px; } .section-lead { font-size:18px; font-weight:700; line-height:1.5; max-width:650px; }
.features { background:var(--ink); color:white; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; } .card { min-height:250px; padding:22px; border:3px solid var(--ink); border-radius:24px; box-shadow:7px 7px 0 var(--ink); color:var(--ink); transition:transform .25s ease; } .card:hover { transform:translateY(-8px) rotate(-1deg); } .card:nth-child(1){background:var(--yellow)} .card:nth-child(2){background:var(--pink)} .card:nth-child(3){background:var(--mint)} .card h3 { font-size:25px; margin:0 0 10px; } .card p { font-weight:700; line-height:1.45; } .emoji { font-size:48px; }
.showcase { background:var(--sky); overflow:hidden; } .screens { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:38px; align-items:start; } .screen { border:6px solid var(--ink); border-radius:30px; overflow:hidden; box-shadow:10px 12px 0 var(--ink); background:var(--ink); transform:rotate(-2deg); } .screen:nth-child(2){transform:translateY(28px)} .screen:nth-child(3){transform:rotate(2deg)} .screen img { width:100%; display:block; }
.privacy { background:var(--mint); } .security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .security { background:white; border:3px solid var(--ink); border-radius:20px; padding:20px; box-shadow:5px 5px 0 var(--ink); } .security strong { display:block; font-size:18px; margin-bottom:8px; }
.cta { text-align:center; background:var(--pink); } .footer { padding:38px 0; background:var(--ink); color:white; } .footer-inner { display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap; } .footer a { color:var(--yellow); font-weight:700; margin-right:16px; }
.legal { max-width:800px; padding:64px 0; } .legal h1 { font-size:46px; letter-spacing:-2px; } .legal h2 { font-size:26px; margin-top:34px; } .legal p,.legal li { font-size:16px; line-height:1.6; } .notice { border:3px solid var(--ink); background:var(--yellow); padding:18px; border-radius:16px; font-weight:700; }
.delete-card { max-width:620px; background:var(--lavender); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); border-radius:22px; padding:24px; margin:28px 0; } .delete-card form { display:grid; gap:10px; } .delete-card input { font:inherit; border:2px solid var(--ink); border-radius:12px; padding:13px; background:#fff; } .delete-card button { margin-top:10px; } .delete-card button:disabled { opacity:.65; cursor:wait; }
@keyframes float { 50% { transform:rotateY(-13deg) rotateX(5deg) rotateZ(1deg) translateY(-15px); } } @keyframes pulse { 50% { transform:scale(1.18) rotate(10deg); } }
@media(max-width:760px){ .navlinks a:not(.button){display:none}.hero-grid{grid-template-columns:1fr}.phone-stage{min-height:410px}.cards,.screens,.security-grid{grid-template-columns:1fr}.screen:nth-child(2){transform:none}.footer-inner{align-items:flex-start;flex-direction:column}h1{letter-spacing:-2px}.nav{padding-top:16px} }

/* Neo_DEV: a compact neo-brutalist developer page. */
.subtrack-logo{width:96px;height:96px;border:3px solid var(--ink);border-radius:22px;box-shadow:4px 4px 0 var(--ink);object-fit:cover}
.dev-page{background:var(--lavender)} .dev-hero{padding:40px 0 82px;background:var(--yellow);overflow:hidden}.dev-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;min-height:500px}.dev-sticker{width:min(330px,80vw);aspect-ratio:1;justify-self:end;display:grid;place-items:center;position:relative;border:5px solid var(--ink);border-radius:42px;background:var(--purple);box-shadow:14px 14px 0 var(--ink);color:var(--yellow);font-size:88px;font-weight:900;transform:rotate(6deg)}.dev-sticker span{position:absolute;bottom:31px;right:28px;color:#fff;font-size:32px;line-height:.85;letter-spacing:-2px}.dev-apps{background:var(--cream)}.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}.app-card{min-height:420px;padding:24px;border:4px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:18px}.app-card h3{margin:0;font-size:39px;letter-spacing:-2px}.app-card p{font-size:16px;line-height:1.45;font-weight:700;max-width:370px}.app-card .button{margin-top:auto}.habi-card{background:var(--yellow)}.subtrack-card{background:var(--purple);color:#fff}.subtrack-card .button{background:#fff;color:var(--ink)}.app-type{margin:0;font-size:12px!important;letter-spacing:1px;font-weight:900!important}.app-mark{width:88px;height:88px;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:22px;font-size:47px;font-weight:900}.habi-mark{background:#fff6e5}.subtrack-mark{border-radius:50%;background:#121218;color:#a986ff;font-size:22px}.subtrack-mark span{border:2px solid #a986ff;border-radius:50%;padding:10px 6px}.dev-about{background:var(--sky)}.dev-about-card{border:4px solid var(--ink);border-radius:28px;background:var(--mint);padding:32px;box-shadow:10px 10px 0 var(--ink)}@media(max-width:760px){.dev-hero-grid,.app-grid{grid-template-columns:1fr}.dev-hero-grid{min-height:auto}.dev-sticker{justify-self:center;width:240px}.app-card{min-height:340px}}