:root {
  --tn-primary:#2563eb;
  --tn-primary-dark:#1d4ed8;
  --tn-primary-soft:#eff6ff;
  --tn-green:#16a34a;
  --tn-green-soft:#f0fdf4;
  --tn-red:#dc2626;
  --tn-red-soft:#fef2f2;
  --tn-purple:#7c3aed;
  --tn-purple-soft:#f5f3ff;
  --tn-text:#172033;
  --tn-muted:#64748b;
  --tn-border:#e2e8f0;
  --tn-background:#f8fafc;
  --tn-surface:#fff;
  --tn-dark:#0f172a;
}

* { box-sizing:border-box; }
/* overflow-x:clip, not hidden: "hidden" turns html/body into scroll containers, which stops the navbar's
   position:sticky (.sticky-top) from ever sticking. "clip" still blocks sideways scrolling. "hidden" stays
   first only as a fallback for very old browsers that don't know "clip". */
html { scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body { margin:0; overflow-x:hidden; overflow-x:clip; font-family:"Inter",sans-serif; color:var(--tn-text); background:var(--tn-surface); }
a { text-decoration:none; }
img { max-width:100%; }

.tn-section-space { padding:105px 0; }
.tn-section-bg { background:var(--tn-background); }
.tn-section-label { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #bfdbfe; border-radius:100px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:13px; font-weight:700; }
.tn-section-title { margin:18px 0; font-size:44px; line-height:1.12; font-weight:800; letter-spacing:-1.7px; }
.tn-section-copy { max-width:650px; color:var(--tn-muted); font-size:18px; line-height:1.75; }

/* NAVBAR */
.tn-navbar { min-height:78px; border-bottom:1px solid rgba(226,232,240,.9); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); transition:min-height .32s ease, box-shadow .32s ease, background .32s ease; }
.tn-navbar-brand { display:inline-flex; color:var(--tn-text); font-size:22px; font-weight:800; letter-spacing:-.6px; transition:font-size .32s ease; }
.tn-brand-logo { height:38px; width:auto; display:block; transition:height .32s ease; }
.tn-navbar .nav-link { padding:9px 12px!important; color:#475569; font-size:14px; font-weight:600; transition:font-size .32s ease, padding .32s ease; }
.tn-navbar .nav-link:hover { color:var(--tn-primary); }

/* NAVBAR -- shrunk/sticky-scrolled state (toggled by common.js past a small scroll threshold) */
.tn-navbar.tn-navbar-scrolled { min-height:60px; background:rgba(255,255,255,.98); box-shadow:0 6px 24px rgba(15,23,42,.07); }
.tn-navbar.tn-navbar-scrolled .tn-navbar-brand { font-size:18px; }
.tn-navbar.tn-navbar-scrolled .tn-brand-logo { height:30px; }
.tn-navbar.tn-navbar-scrolled .nav-link { font-size:13px; padding:7px 10px!important; }

/* LANGUAGE DROPDOWN */
.tn-lang-dropdown { position:relative; }
.tn-lang-toggle { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 11px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; color:var(--tn-text); font-size:13px; font-weight:700; line-height:1; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.tn-lang-toggle i.fa-globe { font-size:13px; color:var(--tn-muted); }
.tn-lang-toggle:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-lang-toggle:focus-visible { outline:2px solid var(--tn-primary); outline-offset:2px; }
.tn-lang-toggle.dropdown-toggle::after { display:none; }
.tn-lang-caret { margin-left:1px; font-size:9px; color:var(--tn-muted); transition:transform .22s ease; }
.tn-lang-toggle[aria-expanded="true"] { border-color:var(--tn-primary); background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-lang-toggle[aria-expanded="true"] .tn-lang-caret { transform:rotate(180deg); }

.tn-lang-menu { display:block!important; min-width:168px; margin-top:10px!important; padding:6px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; box-shadow:0 16px 36px rgba(15,23,42,.14); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s ease; }
.tn-lang-menu.show { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.tn-lang-menu .dropdown-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; color:var(--tn-text); font-size:13px; font-weight:600; }
.tn-lang-menu .dropdown-item:hover, .tn-lang-menu .dropdown-item:focus-visible { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-lang-menu .dropdown-item.active { background:var(--tn-primary-soft); color:var(--tn-primary); font-weight:700; }
.tn-lang-menu .dropdown-item .tn-lang-item-code { margin-left:auto; color:var(--tn-muted); font-size:11px; font-weight:700; }
.tn-lang-menu .dropdown-item.active .tn-lang-item-code { color:var(--tn-primary); }

@media (prefers-reduced-motion:reduce) {
  .tn-navbar, .tn-navbar-brand, .tn-brand-logo, .tn-navbar .nav-link, .tn-lang-menu, .tn-lang-caret { transition:none; }
}

.tn-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid var(--tn-primary); border-radius:10px; background:var(--tn-primary); color:#fff; font-size:14px; font-weight:700; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.tn-btn-primary:hover { border-color:var(--tn-primary-dark); background:var(--tn-primary-dark); color:#fff; transform:translateY(-1px); }

.tn-btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; color:var(--tn-text); font-size:14px; font-weight:700; transition:border-color .2s ease,transform .2s ease; }
.tn-btn-secondary:hover { border-color:#94a3b8; color:var(--tn-text); transform:translateY(-1px); }

/* =========================================================
   HERO
========================================================= */
.tn-hero { position:relative; isolation:isolate; overflow:hidden; padding:88px 0 74px; background:radial-gradient(circle at 79% 37%,rgba(37,99,235,.085),transparent 31%),linear-gradient(180deg,#fff 0%,#fff 78%,#fbfdff 100%); }
.tn-hero .container { position:relative; z-index:2; }
.tn-hero-app { position:relative; min-height:auto; }
.tn-hero-row { position:relative; z-index:2; }
.tn-hero-copy-col { position:relative; z-index:4; }
.tn-hero-visual-col { position:relative; z-index:3; }
.tn-hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid #bbf7d0; border-radius:100px; background:var(--tn-green-soft); color:#15803d; font-size:13px; font-weight:700; }
.tn-hero-title { max-width:700px; margin:21px 0 22px; color:var(--tn-text); font-size:62px; line-height:1.025; font-weight:800; letter-spacing:-3px; }
.tn-hero-title span { color:var(--tn-primary); }
.tn-hero-description { max-width:610px; margin:0; color:var(--tn-muted); font-size:18px; line-height:1.7; }
.tn-hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:29px; }

/* HERO BACKGROUND */
.tn-hero-bg-shape { position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
.tn-hero-bg-shape-one { top:-205px; right:-185px; width:650px; height:650px; background:radial-gradient(circle,rgba(37,99,235,.075) 0%,rgba(37,99,235,.025) 48%,transparent 72%); }
.tn-hero-bg-shape-two { display:none; }
.tn-hero-grid { position:absolute; top:78px; right:3.5%; z-index:1; width:112px; height:106px; opacity:.15; background-image:radial-gradient(#2563eb 1.4px,transparent 1.4px); background-size:16px 16px; pointer-events:none; }

/* HERO BENEFITS */
.tn-hero-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:620px; margin-top:24px; }
.tn-hero-benefit { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid #e5eaf1; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(15,23,42,.045); }
.tn-hero-benefit-icon { width:33px; height:33px; display:grid; place-items:center; flex:0 0 33px; border-radius:9px; font-size:12px; }
.tn-benefit-green,.tn-hero-benefit-green { background:#f0fdf4; color:#16a34a; }
.tn-benefit-blue,.tn-hero-benefit-blue { background:#eff6ff; color:#2563eb; }
.tn-benefit-purple,.tn-hero-benefit-purple { background:#f5f3ff; color:#7c3aed; }
.tn-hero-benefit-text { min-width:0; }
.tn-hero-benefit strong { display:block; overflow:hidden; color:#172033; font-size:10px; line-height:1.2; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.tn-hero-benefit span { display:block; overflow:hidden; margin-top:2px; color:#788598; font-size:7px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }

/* HERO RIGHT SIDE */
.tn-android-hero-wrap { position:relative; width:100%; max-width:690px; min-height:700px; margin:0 auto; overflow:visible; }
.tn-android-hero-wrap::before { content:""; position:absolute; top:78px; left:50%; z-index:0; width:540px; height:540px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.11) 0%,rgba(37,99,235,.045) 44%,rgba(37,99,235,.012) 61%,transparent 73%); pointer-events:none; }
.tn-android-hero-wrap .android_hero { position:relative; z-index:5; }

/* HERO FLOATING CARDS */
.tn-hero-floating { position:absolute; z-index:30; display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(226,232,240,.9); border-radius:14px; background:rgba(255,255,255,.85); box-shadow:0 16px 38px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); }
.tn-hero-floating-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:10px; font-size:13px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.04); }
.tn-floating-blue { background:linear-gradient(155deg,#eff6ff,#dbeafe); color:#2563eb; }
.tn-floating-green { background:linear-gradient(155deg,#f0fdf4,#dcfce7); color:#16a34a; }
.tn-floating-purple { background:linear-gradient(155deg,#f5f3ff,#ede9fe); color:#7c3aed; }
.tn-hero-floating strong { display:block; color:#172033; font-size:11px; font-weight:800; line-height:1.15; white-space:nowrap; }
.tn-hero-floating span { display:block; margin-top:2px; color:#738094; font-size:8px; line-height:1.2; white-space:nowrap; }
.tn-hero-floating-sync { top:68px; right:-4px; }
.tn-hero-floating-offline { left:-2px; top:340px; }


/* OLD HERO MOCKUP - KEEP FOR OTHER COMPONENTS */
.tn-product-demo { position:relative; min-height:530px; }
.tn-web-window { position:absolute; top:10px; right:0; width:92%; padding:9px; border:1px solid #cbd5e1; border-radius:19px; background:#fff; box-shadow:0 28px 70px rgba(15,23,42,.13); }
.tn-browser-top { display:flex; align-items:center; gap:6px; padding:5px 6px 12px; }
.tn-browser-dot { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.tn-web-screen { height:397px; overflow:hidden; border:1px solid #edf2f7; border-radius:12px; background:#f8fafc; }
.tn-mock-dashboard { display:grid; grid-template-columns:74px 1fr; height:100%; }
.tn-mock-sidebar { padding:20px 12px; border-right:1px solid var(--tn-border); background:#fff; }
.tn-side-icon { width:32px; height:8px; margin-bottom:16px; border-radius:5px; background:#e2e8f0; }
.tn-mock-main { padding:18px; }
.tn-mock-heading { width:145px; height:14px; margin-bottom:18px; border-radius:7px; background:#cbd5e1; }
.tn-mock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tn-mock-stat { height:78px; border:1px solid var(--tn-border); border-radius:11px; background:#fff; }
.tn-mock-list { margin-top:13px; padding:10px 14px; border:1px solid var(--tn-border); border-radius:11px; background:#fff; }
.tn-mock-line { height:10px; margin:14px 0; border-radius:5px; background:#e2e8f0; }
.tn-mock-line:nth-child(2),.tn-mock-line:nth-child(4) { width:72%; }

.tn-phone { position:absolute; left:0; bottom:0; width:192px; padding:7px; border-radius:32px; background:#111827; box-shadow:0 22px 55px rgba(15,23,42,.24); }
.tn-phone-inner { height:385px; padding:14px 12px; overflow:hidden; border-radius:26px; background:#f8fafc; }
.tn-phone-notch { width:56px; height:7px; margin:0 auto 17px; border-radius:8px; background:#111827; }
.tn-phone-heading { width:72%; height:13px; margin-bottom:16px; border-radius:5px; background:#bfdbfe; }
.tn-phone-total { height:78px; margin-bottom:13px; border:1px solid var(--tn-border); border-radius:13px; background:#fff; }
.tn-phone-entry { height:54px; margin-bottom:9px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; }

/* TRUST */
.tn-trust-bar { border-top:1px solid var(--tn-border); border-bottom:1px solid var(--tn-border); background:var(--tn-background); }
.tn-trust-item { display:flex; align-items:center; justify-content:center; gap:11px; min-height:86px; padding:15px; }
.tn-trust-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; color:var(--tn-primary); }
.tn-trust-item strong { display:block; font-size:14px; }
.tn-trust-item span { color:var(--tn-muted); font-size:12px; }

/* FREE */
.tn-free-box { padding:50px; border:1px solid #bbf7d0; border-radius:24px; background:var(--tn-green-soft); }
.tn-free-icon { width:66px; height:66px; display:grid; place-items:center; border-radius:18px; background:#fff; color:var(--tn-green); font-size:28px; }
.tn-free-title { margin:20px 0 12px; font-size:39px; font-weight:800; letter-spacing:-1.5px; }
.tn-free-point { display:flex; align-items:center; gap:11px; margin:13px 0; color:#334155; font-weight:600; }
.tn-free-point i { color:var(--tn-green); }

/* FEATURES */
.tn-feature-card { height:100%; padding:30px; border:1px solid var(--tn-border); border-radius:18px; background:#fff; transition:border-color .2s ease,transform .2s ease; }
.tn-feature-card:hover { border-color:#cbd5e1; transform:translateY(-3px); }
.tn-feature-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:21px; border-radius:13px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:19px; }
.tn-feature-card h3 { margin-bottom:10px; font-size:19px; font-weight:700; }
.tn-feature-card p { margin:0; color:var(--tn-muted); font-size:15px; line-height:1.7; }

/* MOBILE APP */
.tn-app-panel { position:relative; min-height:520px; padding:42px; overflow:hidden; border:1px solid var(--tn-border); border-radius:24px; background:#f8fafc; }
.tn-big-phone { width:235px; margin:auto; padding:8px; border-radius:39px; background:#111827; box-shadow:0 25px 55px rgba(15,23,42,.18); }
.tn-big-phone-inner { height:460px; padding:18px 14px; border-radius:32px; background:#fff; }
.tn-screenshot-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed #d7dee8; border-radius:23px; color:#94a3b8; text-align:center; }
.tn-screenshot-placeholder i { margin-bottom:13px; font-size:33px; }
.tn-screenshot-placeholder strong { color:#64748b; }

.tn-reason { display:flex; gap:15px; margin-top:25px; }
.tn-reason-icon { width:43px; height:43px; display:grid; place-items:center; flex:0 0 43px; border-radius:11px; background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-reason h4 { margin:0 0 5px; font-size:16px; font-weight:700; }
.tn-reason p { margin:0; color:var(--tn-muted); font-size:14px; line-height:1.6; }

/* WEB */
.tn-desktop-showcase { padding:16px; border:1px solid #cbd5e1; border-radius:22px; background:#fff; box-shadow:0 18px 45px rgba(15,23,42,.08); }
.tn-desktop-placeholder { height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed #d7dee8; border-radius:14px; background:#f8fafc; color:#94a3b8; text-align:center; }
.tn-desktop-placeholder i { margin-bottom:14px; font-size:38px; }
.tn-desktop-placeholder strong { color:#64748b; }

/* SHARED MEMBERS IMAGE */
.tn-share-visual { width:100%; display:flex; align-items:center; justify-content:center; }
.tn-share-image { display:block; width:100%; height:auto; max-width:760px; object-fit:contain; }

/* SYNC IMAGE */
/* SYNC IMAGE */
.tn-sync-header { max-width:820px; margin:0 auto; text-align:center; }
.tn-sync-visual { width:100%; max-width:1250px; margin:42px auto 0; text-align:center; }
.tn-sync-image { display:block; width:100%; height:auto; margin:0 auto; object-fit:contain; }

/* DOWNLOAD */
.tn-download-section { padding-bottom:105px; }
.tn-download-box { position:relative; overflow:hidden; padding:67px; border-radius:28px; background:var(--tn-dark); color:#fff; }
.tn-download-title { max-width:700px; margin:0; font-size:45px; font-weight:800; letter-spacing:-1.7px; }
.tn-download-copy { max-width:630px; margin:18px 0 27px; color:#cbd5e1; font-size:17px; line-height:1.7; }
.tn-play-button { display:inline-flex; align-items:center; gap:13px; padding:12px 20px; border:1px solid #334155; border-radius:11px; background:#fff; color:var(--tn-dark); }
.tn-play-button:hover { color:var(--tn-dark); }
.tn-play-button i { font-size:28px; }
.tn-play-button small { display:block; color:#64748b; font-size:10px; text-transform:uppercase; }
.tn-play-button strong { display:block; font-size:17px; }

/* FOOTER */
.tn-footer { padding:64px 0 30px; border-top:1px solid var(--tn-border); background:var(--tn-background); }
.tn-footer-heading { margin-bottom:14px; font-size:14px; font-weight:700; }
.tn-footer-link { display:block; margin:9px 0; color:var(--tn-muted); font-size:13px; }
.tn-footer-link:hover { color:var(--tn-primary); }

/* MOBILE MENU */
.tn-offcanvas { max-width:310px; }
.tn-mobile-menu .nav-link { padding:12px 0!important; color:#334155; font-size:16px; font-weight:600; }

/* LIGHTWEIGHT REVEAL */
.tn-reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
.tn-reveal.tn-visible { opacity:1; transform:none; }


.tn-hero-floating-sync { top:68px; right:-4px; animation:tnHeroSyncFloat 4.8s ease-in-out infinite; }
.tn-hero-floating-offline { left:-2px; top:340px; animation:tnHeroOfflineFloat 5.4s ease-in-out .45s infinite; }

.tn-hero-floating-sync .tn-hero-floating-icon i { animation:tnHeroSyncIcon 5.2s ease-in-out infinite; }
.tn-hero-floating-offline .tn-hero-floating-icon { animation:tnHeroWifiPulse 3.8s ease-in-out .5s infinite; }

@keyframes tnHeroSyncFloat {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(0,-8px,0); }
}

@keyframes tnHeroOfflineFloat {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(5px,-7px,0); }
}

@keyframes tnHeroSyncIcon {
  0%,68%,100% { transform:rotate(0deg); }
  82% { transform:rotate(180deg); }
  94% { transform:rotate(360deg); }
}

@keyframes tnHeroWifiPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(22,163,74,0); }
  50% { transform:scale(1.06); box-shadow:0 0 0 7px rgba(22,163,74,.08); }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1199px) {
  .tn-share-image { max-width:680px; }
  .tn-hero-title { font-size:55px; letter-spacing:-2.5px; }
  .tn-android-hero-wrap { min-height:610px; }
  .tn-android-hero-wrap .android_hero { position:absolute; top:0; left:50%; width:650px; max-width:none; margin:0; transform:translateX(-50%) scale(.84); transform-origin:top center; }
  .tn-hero-floating-sync { top:54px; right:1%; }
  .tn-hero-floating-offline { left:1%; top:286px; }
}

@media (max-width:991px) {
  .tn-section-space { padding:80px 0; }
  .tn-hero { padding:70px 0 56px; }
  .tn-hero-title { max-width:620px; font-size:50px; letter-spacing:-2.2px; }
  .tn-hero-description { max-width:620px; }
  .tn-android-hero-wrap { max-width:720px; min-height:630px; margin-top:34px; }
  .tn-android-hero-wrap .android_hero { width:650px; transform:translateX(-50%) scale(.88); }
  .tn-android-hero-wrap::before { top:70px; width:500px; height:500px; }
  .tn-hero-floating-sync { top:48px; right:7%; }
  .tn-hero-floating-offline { left:7%; top:299px; }

  .tn-product-demo { min-height:500px; margin-top:50px; }
  .tn-section-title { font-size:37px; }
  .tn-download-box { padding:50px 36px; }
  .tn-download-title { font-size:38px; }
  .tn-share-visual { margin-top:15px; }
  .tn-share-image { max-width:760px; }
  .tn-sync-visual { margin-top:38px; }
}

@media (max-width:767px) {
  .tn-section-space { padding:70px 0; }
  .tn-trust-item { justify-content:flex-start; padding:15px 8px; }
  .tn-free-box { padding:36px 30px; }
  .tn-share-image { max-width:100%; }
  .tn-sync-image { width:100%; }

  .tn-android-hero-wrap { max-width:100%; min-height:570px; margin-top:28px; overflow:visible; }
  .tn-android-hero-wrap::before { top:82px; width:355px; height:355px; }
  .tn-android-hero-wrap .android_hero { top:0; width:340px; height:680px; transform:translateX(-50%) scale(.82); }
  .tn-hero-grid { display:none; }
  .tn-hero-floating { padding:8px 10px; gap:7px; border-radius:11px; }
  .tn-hero-floating-icon { width:30px; height:30px; flex-basis:30px; font-size:11px; }
  .tn-hero-floating strong { font-size:9px; }
  .tn-hero-floating span { font-size:7px; }
  .tn-hero-floating-sync { top:34px; right:5%; }
  .tn-hero-floating-offline { left:5%; top:279px; }
}

@media (max-width:575px) {
  .tn-section-space { padding:62px 0; }
  .tn-hero { padding:52px 0 38px; }
  .tn-hero-title { margin:18px 0; font-size:39px; line-height:1.04; letter-spacing:-1.7px; }
  .tn-hero-description { font-size:16px; line-height:1.62; }
  .tn-hero-actions { display:grid; margin-top:24px; }
  .tn-hero-actions a { width:100%; }

  .tn-hero-benefits { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:18px; }
  .tn-hero-benefit { display:block; padding:8px 4px; text-align:center; }
  .tn-hero-benefit-icon { width:29px; height:29px; margin:0 auto 6px; font-size:11px; }
  .tn-hero-benefit strong { font-size:8px; white-space:normal; }
  .tn-hero-benefit span { font-size:6px; white-space:normal; }

  .tn-android-hero-wrap { width:100%; min-height:535px; margin:24px auto 0; overflow:visible; }
  .tn-android-hero-wrap::before { top:75px; width:315px; height:315px; }
  .tn-android-hero-wrap .android_hero { transform:translateX(-50%) scale(.78); }
  .tn-hero-floating { box-shadow:0 10px 24px rgba(15,23,42,.09); }
  .tn-hero-floating span { display:none; }
  .tn-hero-floating-sync { top:28px; right:1%; }
  .tn-hero-floating-offline { left:1%; top:265px; }

  .tn-product-demo { min-height:380px; margin-top:40px; }
  .tn-web-window { width:94%; }
  .tn-web-screen { height:275px; }
  .tn-phone { width:140px; }
  .tn-phone-inner { height:280px; }
  .tn-mock-dashboard { grid-template-columns:44px 1fr; }
  .tn-mock-sidebar { padding:12px 7px; }
  .tn-mock-main { padding:10px; }

  .tn-section-title { font-size:31px; letter-spacing:-1px; }
  .tn-section-copy { font-size:16px; line-height:1.65; }

  .tn-free-box { padding:30px 22px; border-radius:20px; }
  .tn-free-title { font-size:30px; }
  .tn-app-panel { min-height:auto; padding:24px; }

  .tn-share-visual { margin-top:5px; }
  .tn-share-image { width:100%; }

  .tn-sync-visual { width:calc(100% + 24px); margin:30px -12px 0; }
  .tn-sync-image { width:100%; }

  .tn-download-box { padding:37px 22px; border-radius:22px; }
  .tn-download-title { font-size:31px; }
  .tn-play-button { width:100%; justify-content:center; }
}

@media (max-width:400px) {
  .tn-android-hero-wrap { min-height:500px; }
  .tn-android-hero-wrap::before { width:285px; height:285px; }
  .tn-android-hero-wrap .android_hero { transform:translateX(-50%) scale(.72); }
  .tn-hero-floating-sync { right:0; }
  .tn-hero-floating-offline { left:0; top:245px; }
}

@media (max-width:370px) {
  .tn-hero-title { font-size:36px; }
  .tn-hero-benefit strong { font-size:7.5px; }
  .tn-hero-benefit span { font-size:5.8px; }
}

/* BACK TO TOP */
.tn-back-to-top { position:fixed; right:24px; bottom:24px; z-index:1000; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--tn-primary); border-radius:50%; background:var(--tn-primary); color:#fff; font-size:17px; opacity:0; visibility:hidden; transform:translateY(12px); box-shadow:0 10px 24px rgba(37,99,235,.28); transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background .2s ease,border-color .2s ease; }
.tn-back-to-top.tn-visible { opacity:1; visibility:visible; transform:translateY(0); }
.tn-back-to-top:hover { background:var(--tn-primary-dark); border-color:var(--tn-primary-dark); transform:translateY(-2px); }

@media (max-width:575px) {
  .tn-back-to-top { right:16px; bottom:16px; width:44px; height:44px; font-size:15px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .tn-reveal { opacity:1; transform:none; transition:none; }
  .tn-back-to-top { transition:opacity .15s ease,visibility .15s ease; }
}