:root{--bg:#0a0d0b;--panel:#101511;--panel2:#151b16;--text:#eef1eb;--muted:#8e978e;--line:#29302a;--green:#a9df72;--green2:#6f9f45;--max:1160px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.nav{width:min(var(--max),calc(100% - 44px));height:84px;margin:auto;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font:700 25px "Space Grotesk";letter-spacing:-1px;color:var(--green)}nav{display:flex;gap:34px}nav a,.talk{font-size:13px;color:#b7beb6}nav a:hover,.talk:hover{color:var(--green)}.talk{border:1px solid var(--line);padding:9px 14px;border-radius:3px}.talk b{color:var(--green);margin-left:8px}.hero,.section{width:min(var(--max),calc(100% - 44px));margin:auto}.hero{min-height:670px;padding:90px 0 105px;display:grid;grid-template-columns:1.4fr .6fr;gap:80px;align-items:center}.eyebrow{font:600 10px "Space Grotesk";letter-spacing:1.7px;text-transform:uppercase;color:var(--green)}.eyebrow span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px}h1,h2,h3{font-family:"Space Grotesk",sans-serif}h1{font-size:clamp(54px,7vw,88px);line-height:.96;letter-spacing:-5px;margin:20px 0 28px}em{font-style:normal;color:var(--green)}.lead{max-width:600px;color:var(--muted);font-size:17px;line-height:1.8}.lead strong{color:var(--text)}.actions{display:flex;gap:10px;margin-top:34px}.btn{padding:12px 17px;font-size:13px;font-weight:600;border-radius:3px}.fill{background:var(--green);color:#0b1009}.outline{border:1px solid var(--line)}.btn span{margin-left:9px}.facts{display:flex;gap:22px;margin-top:43px;color:#687068;font-size:11px}.facts span+span:before{content:"·";color:var(--green2);margin-right:22px}.portrait{width:340px;justify-self:end;position:relative}.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;filter:saturate(.78);border:1px solid var(--line)}.portrait-label{position:absolute;bottom:-18px;left:-22px;background:var(--green);color:#0a1008;padding:13px 16px;display:grid;grid-template-columns:auto auto;column-gap:12px}.portrait-label small{font:700 10px "Space Grotesk";grid-row:span 2}.portrait-label strong{font:700 12px "Space Grotesk"}.portrait-label span{font-size:10px}.section{padding:112px 0}.heading{border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:1px;display:flex;justify-content:space-between;align-items:end}.heading h2{font-size:clamp(43px,5vw,66px);line-height:1;letter-spacing:-3px;margin-top:12px}.heading>p{color:var(--muted);font-size:12px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}.feature,.app-showcase{min-height:610px}.feature{padding:26px;background:linear-gradient(145deg,#122014,#0d120e);display:flex;flex-direction:column;justify-content:space-between}.project-meta{display:flex;justify-content:space-between;color:#687068;font:600 10px "Space Grotesk";letter-spacing:1px}.project-meta span:last-child{color:var(--green)}.type{font-size:10px;color:var(--green);margin-bottom:7px}.feature h3,.app-copy h3{font-size:37px;letter-spacing:-1.8px}.feature p,.app-copy p{color:var(--muted);font-size:13px;max-width:420px;margin-top:8px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.tags span{border:1px solid var(--line);padding:4px 8px;color:#9aa39a;font-size:9px}.app-showcase{background:#0d1210;position:relative;overflow:hidden;padding:26px}.phones{height:330px;position:relative;margin-top:25px}.phone{position:absolute;width:160px;height:338px;overflow:hidden;border:5px solid #1d241e;border-radius:20px;box-shadow:0 20px 50px #0008;background:#111}.phone img{width:100%;height:100%;object-fit:cover}.phone-back{left:90px;top:12px;transform:rotate(5deg);opacity:.85}.phone-front{left:220px;top:-5px;transform:rotate(-3deg);z-index:2}.app-copy{position:absolute;left:26px;bottom:28px}.project-list{border:1px solid var(--line);border-top:0}.row-project{min-height:150px;padding:27px 24px;display:grid;grid-template-columns:60px 1fr 1.1fr 100px;gap:18px;align-items:center;border-top:1px solid var(--line);transition:background .2s}.row-project:first-child{border-top:0}.row-project:hover{background:var(--panel)}.number{color:#596159;font:600 11px "Space Grotesk"}.row-project h3{font-size:22px;letter-spacing:-.7px}.row-project p{color:var(--muted);font-size:12px}.arrow{font-size:11px;color:var(--green);text-align:right}.about{display:grid;grid-template-columns:.6fr 1.4fr;gap:90px;border-top:1px solid var(--line)}.side{display:flex;justify-content:space-between}.side>span{color:#596159;font:600 11px "Space Grotesk"}.about h2{font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-3px;margin-bottom:28px}.about-text{max-width:650px;color:var(--muted);font-size:16px;line-height:1.9}.skill-line{display:flex;flex-wrap:wrap;gap:17px 25px;margin-top:30px}.skill-line span{font-size:12px;color:#c4cac3;border-bottom:1px solid var(--line);padding-bottom:4px}.contact{border-top:1px solid var(--line)}.contact h2{font-size:clamp(52px,7vw,90px);line-height:.98;letter-spacing:-4px;margin:18px 0 60px}.contact-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:end}.big-email{font:600 clamp(19px,3vw,32px) "Space Grotesk";letter-spacing:-1px}.big-email span{color:var(--green)}.contact-bottom div{display:flex;flex-direction:column;text-align:right;gap:5px;color:var(--muted);font-size:12px}.contact-bottom a:hover{color:var(--green)}footer{width:min(var(--max),calc(100% - 44px));margin:auto;border-top:1px solid var(--line);padding:25px 0 34px;color:#5f685f;font-size:10px;display:flex;justify-content:space-between}
/* ── Legal links (under FinTrack card) ───────────────────── */
.legal-links{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.legal-links a{font-size:10px;font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--green);border:1px solid var(--line);padding:4px 10px;border-radius:3px;letter-spacing:.3px;transition:background .2s,border-color .2s}
.legal-links a:hover{background:#1a2b15;border-color:var(--green)}
/* ── Hamburger Menu ──────────────────────────────────────── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--bg);z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:36px}
.mobile-nav.open{display:flex}
.mobile-nav a{font:600 28px "Space Grotesk";color:var(--text);letter-spacing:-1px}
.mobile-nav a:hover{color:var(--green)}
.mobile-nav .close-btn{position:absolute;top:28px;right:28px;font-size:24px;background:none;border:none;color:var(--text);cursor:pointer}

/* ── Tablet (≤1024px) ─────────────────────────────────── */
@media(max-width:1024px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .hero{padding:70px 0 90px;gap:50px}
  .phones{height:290px}
  .phone{width:140px;height:295px}
  .phone-back{left:60px}
  .phone-front{left:185px}
}

/* ── Mobile (≤768px) ──────────────────────────────────── */
@media(max-width:768px){
  nav{display:none}
  .hamburger{display:flex}
  .hero{grid-template-columns:1fr;gap:50px;min-height:auto;padding:60px 0 80px}
  .portrait{justify-self:start;width:min(100%,300px)}
  .portrait-label{left:-10px}
  .feature-grid{grid-template-columns:1fr}
  .feature,.app-showcase{min-height:480px}
  .app-showcase{padding:22px 22px 180px}
  .phones{height:260px;margin-top:20px}
  .phone{width:130px;height:274px}
  .phone-back{left:30px;top:10px}
  .phone-front{left:150px;top:-5px}
  .app-copy{position:absolute;left:22px;bottom:22px;right:22px}
  .app-copy h3{font-size:28px;letter-spacing:-1px}
  .row-project{grid-template-columns:45px 1fr;min-height:auto;padding:20px 18px}
  .row-project p,.arrow{grid-column:2}
  .arrow{text-align:left}
  .about{grid-template-columns:1fr;gap:30px}
  .contact-bottom{display:block}
  .contact-bottom div{text-align:left;margin-top:20px}
  footer{gap:12px;flex-wrap:wrap}
  .section{padding:80px 0}
  .heading h2{font-size:clamp(36px,5vw,56px)}
}

/* ── Small Mobile (≤480px) ───────────────────────────── */
@media(max-width:480px){
  .nav,.hero,.section,footer{width:calc(100% - 28px)}
  h1{font-size:clamp(44px,12vw,68px);letter-spacing:-3px}
  .lead{font-size:15px}
  .facts{flex-wrap:wrap;gap:6px 12px}
  .facts span+span:before{display:none}
  .actions{flex-direction:column}
  .btn{text-align:center}
  .portrait{width:min(100%,280px)}
  .portrait-label{left:0;bottom:-14px}
  .feature,.app-showcase{min-height:440px}
  .app-showcase{padding:18px 18px 190px}
  .phones{height:220px;margin-top:16px}
  .phone{width:110px;height:232px;border-width:4px}
  .phone-back{left:16px;top:8px}
  .phone-front{left:120px;top:-4px}
  .app-copy h3{font-size:24px}
  .feature h3{font-size:28px}
  .row-project h3{font-size:18px}
  .section{padding:60px 0}
  .about h2{font-size:clamp(36px,9vw,52px)}
  .contact h2{font-size:clamp(38px,10vw,60px);letter-spacing:-2px}
  .big-email{font-size:clamp(16px,4.5vw,22px)}
  footer{font-size:9px}
}