/* Page-specific rules only. Shared styles: tn-base.css + tn-components.css */

/* ============================================================ HERO APP CARD */
.tn-app{position:relative;}
.tn-app__card{background:linear-gradient(180deg,var(--navy-850),var(--navy-870)); border-radius:28px;
  box-shadow:var(--shadow-deep); border:1px solid var(--hairline-2); padding:22px;}
.tn-app__bar{display:flex; align-items:center; gap:8px; margin-bottom:18px; padding-left:4px;}
.tn-app__bar i{width:11px; height:11px; border-radius:50%; display:block;}
.tn-app__bar .r{background:#ff5f57;} .tn-app__bar .y{background:#febc2e;} .tn-app__bar .g{background:#28c840;}
.tn-app__bar span{margin-left:10px; font-family:var(--font-mono); font-size:11.5px; color:var(--t-low);}
.tn-app__modules{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tn-app__mod{display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--hairline);
  border-radius:12px; padding:13px 13px;}
.tn-app__mod .ic{width:32px; height:32px; flex-shrink:0; border-radius:9px; background:rgba(39,148,252,.14);
  display:flex; align-items:center; justify-content:center;}
.tn-app__mod .ic .tn-i{width:17px; height:17px; color:var(--blue-bright);}
.tn-app__mod b{font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff;}
.tn-app__mod--gold .ic{background:rgba(255,201,33,.16);} .tn-app__mod--gold .ic .tn-i{color:var(--gold);}
.tn-app__metric{position:absolute; bottom:-20px; right:-18px; background:var(--grad-gold); color:var(--navy-900);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-gold); display:flex; align-items:center; gap:10px; white-space:nowrap;}
.tn-app__metric .tn-i{width:19px; height:19px;}
.tn-app__metric span{font-family:var(--font-display); font-weight:800; font-size:14px;}

/* ============================================================ TRUTH (three jobs) */
.tn-truth{background:var(--navy-900);}
.tn-truth__lead{max-width:840px;}
.tn-truth__lead p{font-size:20px; line-height:1.6; color:var(--t-mid); margin-top:18px;}
.tn-truth__lead strong{color:#fff; font-weight:600;}
.tn-jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px;}
.tn-job{position:relative; padding:30px 26px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px;}
.tn-job__n{font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--gold); margin-bottom:20px;}
.tn-job__icon{width:50px; height:50px; border-radius:14px; background:rgba(39,148,252,.12); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.tn-job__icon .tn-i{color:var(--blue-bright);}
.tn-job h3{font-weight:700; font-size:20px; letter-spacing:-.02em; margin-bottom:9px;}
.tn-job p{font-size:15px; line-height:1.58; color:var(--t-mid);}

/* ============================================================ WHAT YOU GET */
.tn-get{background:var(--navy-950);}
.tn-grid-get{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px;}
.tn-gc{display:flex; gap:16px; padding:24px 24px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:20px;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);}
.tn-gc:hover{transform:translateY(-4px); background:var(--surface-2); border-color:var(--hairline-2); box-shadow:var(--shadow-deep);}
.tn-gc__icon{width:46px; height:46px; flex-shrink:0; border-radius:13px; background:var(--grad-blue);
  display:flex; align-items:center; justify-content:center;}
.tn-gc__icon .tn-i{color:#fff; width:22px; height:22px;}
.tn-gc h3{font-weight:700; font-size:18px; letter-spacing:-.02em; margin-bottom:6px;}
.tn-gc p{font-size:14.5px; line-height:1.55; color:var(--t-mid);}

/* ============================================================ CASES (two case studies) */
.tn-cases{background:var(--navy-900);}
.tn-cases__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.tn-case{position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--hairline-2);
  background:linear-gradient(180deg,var(--navy-850),var(--navy-870)); box-shadow:var(--shadow-deep); display:flex; flex-direction:column;
  transition:transform .22s var(--ease),border-color .22s var(--ease);}
.tn-case:hover{transform:translateY(-4px); border-color:rgba(255,201,33,.34);}
.tn-case__media{position:relative; height:200px; border-bottom:1px solid var(--hairline-2);}
.tn-case__media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px),var(--navy-800);
  color:var(--t-low); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:16px;}
.tn-case__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.tn-case__media .scrim{position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(3,21,48,.85) 100%); pointer-events:none;}
.tn-case__tag{position:absolute; left:18px; bottom:16px; z-index:2;}
.tn-case__body{padding:28px 28px 30px; flex:1; display:flex; flex-direction:column;}
.tn-case__body h3{font-weight:800; font-size:23px; letter-spacing:-.025em; color:#fff; margin-bottom:4px;}
.tn-case__loc{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:14px;}
.tn-case__body p{font-size:15px; line-height:1.6; color:var(--t-mid); margin-bottom:18px;}
.tn-case__feats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.tn-case__feats span{font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--t-mid);
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:999px; padding:6px 12px;}
.tn-case__link{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-weight:700; font-size:14.5px; color:var(--gold);}
.tn-case__link .tn-i{width:17px; height:17px;}

/* section band backgrounds (shared components handle inner layout) */
.tn-process{background:var(--navy-950);}
.tn-why{background:var(--navy-900);}
.tn-faq{background:var(--navy-950);}

/* ============================================================ RESPONSIVE */
@media (max-width:940px){ .tn-app{max-width:520px;} }
@media (max-width:900px){
  .tn-jobs{grid-template-columns:1fr;}
  .tn-cases__grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .tn-grid-get{grid-template-columns:1fr;}
}