:root {
  --tt-bg: #0c0b10;
  --tt-panel: #17151d;
  --tt-panel-2: #201d26;
  --tt-border: #302c37;
  --tt-text: #f7f7fb;
  --tt-muted: #aaa5b3;
  --tt-orange: #ff8a24;
  --tt-pink: #ff4f76;
  --tt-green: #6fe47f;
  --tt-radius: 18px;
}
* { box-sizing: border-box; }
html { background: var(--tt-bg); }
body.tiktox-app-theme { margin: 0; background: radial-gradient(circle at 75% 5%, rgba(255,138,36,.12), transparent 32%), var(--tt-bg); color: var(--tt-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.tt-site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.tt-public-header { position: sticky; top: 0; z-index: 50; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 4vw; border-bottom:1px solid transparent; background:rgba(12,11,16,.72); backdrop-filter:blur(18px); transition:.2s ease; }
.tt-public-header.is-scrolled { border-color:var(--tt-border); background:rgba(12,11,16,.94); }
.tt-brand { display:flex; gap:12px; align-items:center; }
.tt-brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,var(--tt-orange),var(--tt-pink)); color:#fff; font-weight:800; box-shadow:0 10px 28px rgba(255,79,118,.18); }
.tt-brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.tt-brand-copy strong { font-size:18px; }
.tt-brand-copy small { color:var(--tt-muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.tt-public-nav { display:flex; align-items:center; gap:18px; }
.tt-public-nav .menu-item { list-style:none; }
.tt-nav-link { color:var(--tt-muted); font-weight:600; }
.tt-nav-button, .tt-button { border-radius:12px; padding:12px 18px; font-weight:700; transition:.2s ease; }
.tt-nav-button, .tt-button-primary { background:linear-gradient(135deg,var(--tt-orange),#ff6b31); color:#fff; box-shadow:0 12px 28px rgba(255,138,36,.18); }
.tt-button-secondary { border:1px solid var(--tt-border); background:var(--tt-panel); }
.tt-nav-button:hover, .tt-button:hover { transform:translateY(-1px); }
.tt-site-content { width:100%; flex:1; }
.tt-hero { width:min(1320px,92vw); margin:0 auto; min-height:calc(100vh - 76px); display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,.9fr); gap:7vw; align-items:center; padding:80px 0; }
.tt-eyebrow { color:var(--tt-orange); font-weight:800; font-size:12px; letter-spacing:.18em; }
.tt-hero h1 { max-width:760px; margin:18px 0; font-size:clamp(46px,6vw,82px); line-height:.98; letter-spacing:-.055em; }
.tt-hero-copy p { max-width:680px; color:var(--tt-muted); font-size:18px; line-height:1.75; }
.tt-hero-actions { display:flex; gap:12px; margin-top:28px; }
.tt-hero-demo { position:relative; padding:20px; border:1px solid var(--tt-border); border-radius:28px; background:linear-gradient(145deg,rgba(32,29,38,.96),rgba(17,15,22,.96)); box-shadow:0 35px 100px rgba(0,0,0,.38); transform:rotate(1deg); }
.tt-hero-demo::before { content:""; position:absolute; inset:-1px; border-radius:28px; padding:1px; background:linear-gradient(135deg,rgba(255,138,36,.7),transparent 35%,rgba(255,79,118,.6)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.tt-demo-top { display:flex; align-items:center; gap:8px; padding:0 2px 16px; color:var(--tt-muted); font-size:13px; }
.tt-demo-top b { margin-left:auto; color:#ff6584; font-size:11px; border:1px solid rgba(255,101,132,.3); padding:4px 7px; border-radius:999px; }
.tt-demo-dot { width:8px; height:8px; border-radius:50%; background:var(--tt-green); box-shadow:0 0 0 5px rgba(111,228,127,.08); }
.tt-demo-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }
.tt-demo-panel, .tt-demo-card { min-height:310px; border:1px solid var(--tt-border); border-radius:20px; background:#111016; padding:22px; }
.tt-demo-panel small { color:var(--tt-orange); font-weight:800; letter-spacing:.08em; }
.tt-demo-panel > strong { display:block; font-size:22px; margin:8px 0 18px; }
.tt-demo-timer { font-size:58px; font-weight:800; letter-spacing:-.05em; margin:6px 0 20px; }
.tt-demo-row { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid #26232c; color:var(--tt-muted); }
.tt-demo-row b { color:var(--tt-text); }
.tt-demo-card { display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; background:linear-gradient(155deg,#221e28,#121117); }
.tt-demo-avatar { width:82px; height:82px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--tt-orange),var(--tt-pink)); font-size:22px; font-weight:800; box-shadow:0 0 0 8px rgba(255,138,36,.08); }
.tt-demo-card strong { margin-top:24px; color:var(--tt-muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.tt-demo-card h3 { margin:8px 0; font-size:24px; }
.tt-demo-card span { color:var(--tt-orange); }
.tt-feature-grid { width:min(1320px,92vw); margin:0 auto 100px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tt-feature-grid article, .tt-content-card { border:1px solid var(--tt-border); border-radius:var(--tt-radius); padding:28px; background:rgba(23,21,29,.82); }
.tt-feature-grid article > span { color:var(--tt-orange); font-weight:800; }
.tt-feature-grid h2 { margin:34px 0 10px; font-size:20px; }
.tt-feature-grid p { margin:0; color:var(--tt-muted); line-height:1.65; }
.tt-page { width:min(1500px,96vw); margin:28px auto 60px; }
.tt-page-header { padding:24px 0; }
.tt-page-header h1 { font-size:42px; }
.tt-page-content > p { color:var(--tt-muted); }
.tt-public-footer { width:min(1320px,92vw); margin:0 auto; display:flex; justify-content:space-between; gap:24px; padding:28px 0 38px; border-top:1px solid var(--tt-border); color:var(--tt-muted); font-size:13px; }
@media (max-width:980px) {
  .tt-hero { grid-template-columns:1fr; padding:56px 0; }
  .tt-hero h1 { font-size:clamp(42px,11vw,68px); }
  .tt-feature-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .tt-public-header { padding:0 18px; }
  .tt-brand-copy small { display:none; }
  .tt-public-nav .menu-item, .tt-nav-link { display:none; }
  .tt-nav-button { padding:10px 12px; font-size:13px; }
  .tt-hero { width:min(100% - 32px,1320px); min-height:auto; padding:50px 0; }
  .tt-hero-copy p { font-size:16px; }
  .tt-hero-actions { flex-direction:column; }
  .tt-button { text-align:center; }
  .tt-demo-grid { grid-template-columns:1fr; }
  .tt-demo-card { min-height:230px; }
  .tt-feature-grid { width:min(100% - 32px,1320px); }
  .tt-public-footer { width:min(100% - 32px,1320px); flex-direction:column; }
}