:root {
  --blue: #1BA4D8;
  --blue-dark: #1488B4;
  --blue-light: #E8F6FC;
  --dark: #0F172A;
  --gray: #64748B;
  --gray-light: #F8FAFC;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; color: var(--dark); }

/* ── Navbar ── */
.trv-navbar { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.trv-navbar .navbar-brand { font-weight: 700; font-size: 1.2rem; color: var(--dark) !important; display: flex; align-items: center; gap: .5rem; }
.trv-navbar .nav-link { font-size: .875rem; font-weight: 500; color: #475569 !important; transition: color .2s; }
.trv-navbar .nav-link:hover, .trv-navbar .nav-link.active { color: var(--blue) !important; }
.btn-trv { background: var(--blue); color: #fff !important; font-weight: 600; font-size: .875rem; border-radius: .5rem; padding: .45rem 1.2rem; border: none; transition: background .2s; }
.btn-trv:hover { background: var(--blue-dark); }
.btn-trv-outline { border: 2px solid #fff; color: #fff !important; font-weight: 600; font-size: .9rem; border-radius: .75rem; padding: .75rem 2rem; background: transparent; transition: background .2s; display: inline-block; text-decoration: none; }
.btn-trv-outline:hover { background: rgba(255,255,255,.12); }
.btn-trv-white { background: #fff; color: var(--blue) !important; font-weight: 700; font-size: .9rem; border-radius: .75rem; padding: .75rem 2.2rem; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .2s; display: inline-block; text-decoration: none; }
.btn-trv-white:hover { background: #f1f5f9; }
.btn-trv-dark { background: #1e293b; color: #fff !important; font-weight: 700; font-size: .875rem; border-radius: .75rem; padding: .85rem 0; border: none; width: 100%; transition: background .2s; }
.btn-trv-dark:hover { background: #334155; }

/* ── Hero ── */
.hero-blue { background: linear-gradient(135deg, var(--blue) 0%, #1070A0 100%); position: relative; overflow: hidden; }
.hero-blue .bubble { position: absolute; background: rgba(255,255,255,.08); border-radius: 50%; }
.hero-blue .bubble-1 { width: 380px; height: 380px; top: -120px; right: -80px; }
.hero-blue .bubble-2 { width: 260px; height: 260px; bottom: -80px; left: -60px; }

/* ── Stats bar ── */
.stats-bar { background: #0f172a; }
.stat-val { font-size: 2.4rem; font-weight: 800; color: var(--blue); }
.stat-lbl { color: #94a3b8; font-size: .85rem; }

/* ── Feature cards ── */
.feature-card { border: 1.5px solid #f1f5f9; border-radius: 1rem; padding: 1.5rem; transition: border-color .2s, box-shadow .2s; }
.feature-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(27,164,216,.1); }
.feat-icon { width: 48px; height: 48px; border-radius: .75rem; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--blue); transition: background .2s, color .2s; }
.feature-card:hover .feat-icon { background: var(--blue); color: #fff; }
.feature-card h5 { font-weight: 700; margin: .75rem 0 .4rem; font-size: 1rem; }
.feature-card p { color: var(--gray); font-size: .875rem; line-height: 1.6; margin: 0; }

/* ── Studio pills ── */
.studio-pill { display: inline-block; background: #fff; border: 1.5px solid #e2e8f0; color: #334155; font-size: .875rem; font-weight: 500; padding: .5rem 1.25rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: border-color .2s, color .2s; cursor: default; }
.studio-pill:hover { border-color: var(--blue); color: var(--blue); }

/* ── Pricing ── */
.price-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 1.25rem; padding: 2rem; }
.price-card.featured { border-color: var(--blue); box-shadow: 0 8px 32px rgba(27,164,216,.15); }
.price-badge { display: inline-block; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .9rem; border-radius: 999px; }
.price-amount { font-size: 3rem; font-weight: 800; color: var(--dark); line-height: 1; }
.price-period { color: var(--gray); font-size: .9rem; }
.price-note { color: #94a3b8; font-size: .8rem; }
.price-list li { font-size: .875rem; color: #334155; display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .6rem; }
.price-list li.excluded { color: #94a3b8; }
.check-icon { color: var(--blue); flex-shrink: 0; margin-top: .1rem; }
.cross-icon { color: #cbd5e1; flex-shrink: 0; margin-top: .1rem; }

/* ── Services detail card ── */
.service-card { border: 1.5px solid #f1f5f9; border-radius: 1.25rem; padding: 2rem; display: flex; gap: 1.25rem; transition: border-color .2s, box-shadow .2s; }
.service-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(27,164,216,.1); }
.service-card .feat-icon { width: 56px; height: 56px; flex-shrink: 0; }
.service-card:hover .feat-icon { background: var(--blue); color: #fff; }
.service-card h5 { font-weight: 700; font-size: 1.1rem; margin: 0 0 .2rem; }
.service-card .sub { color: var(--blue); font-size: .8rem; font-weight: 600; margin-bottom: .75rem; }
.service-card ul { list-style: none; padding: 0; margin: 0; }
.service-card ul li { font-size: .85rem; color: #475569; display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .4rem; }

/* ── Comparison table ── */
.cmp-table th { font-weight: 600; padding: .9rem 1.25rem; background: #fff; }
.cmp-table td { padding: .75rem 1.25rem; font-size: .875rem; }
.cmp-table tr:nth-child(odd) td { background: var(--gray-light); }
.cmp-table tr:nth-child(even) td { background: #fff; }

/* ── Policy pages ── */
.policy-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin: 0 0 .5rem; }
.policy-section p, .policy-section li { font-size: .9rem; color: #475569; line-height: 1.75; }
.policy-section ul { padding-left: 1.25rem; }
.notice-box { background: var(--blue-light); border: 1px solid rgba(27,164,216,.2); border-radius: .75rem; padding: 1rem 1.25rem; font-size: .85rem; color: #334155; }
.info-box { background: var(--gray-light); border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem 1.25rem; }
.info-row { display: flex; gap: 1rem; font-size: .85rem; padding: .35rem 0; }
.info-row .lbl { color: var(--gray); width: 140px; flex-shrink: 0; }
.info-row .val { color: #1e293b; }

/* ── Contact ── */
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .65rem 1rem; border: 1.5px solid #e2e8f0; border-radius: .6rem; font-size: .875rem; outline: none; background: #fff; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,164,216,.1); }
.contact-form label { font-size: .8rem; font-weight: 600; color: #374151; display: block; margin-bottom: .4rem; }
.form-field { margin-bottom: 1rem; }
.btn-submit { background: var(--blue); color: #fff; font-weight: 700; font-size: .9rem; border: none; border-radius: .75rem; padding: .9rem; width: 100%; cursor: pointer; transition: background .2s; }
.btn-submit:hover { background: var(--blue-dark); }
.btn-submit:disabled { opacity: .6; cursor: default; }
.success-msg { text-align: center; padding: 2.5rem 0; }
.success-icon { width: 64px; height: 64px; background: var(--blue-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--blue); }

/* ── Footer ── */
.trv-footer { background: #0f172a; color: #94a3b8; }
.trv-footer a { color: #94a3b8; text-decoration: none; transition: color .2s; }
.trv-footer a:hover { color: #fff; }
.trv-footer h6 { color: #fff; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.footer-divider { border-color: #1e293b; }
.footer-copy { font-size: .75rem; }

/* ── Utilities ── */
.section-tag { display: inline-block; background: rgba(255,255,255,.2); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .35rem 1rem; border-radius: 999px; }
.check-li { list-style: none; padding: 0; }
.check-li li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; margin-bottom: .5rem; }
.faq-card { background: #fff; border: 1.5px solid #f1f5f9; border-radius: .75rem; padding: 1.25rem 1.5rem; }
.faq-card p:first-child { font-weight: 600; color: var(--dark); margin-bottom: .35rem; font-size: .9rem; }
.faq-card p:last-child { color: var(--gray); font-size: .85rem; margin: 0; line-height: 1.65; }
.custom-dev-card { background: var(--blue-light); border: 1px solid rgba(27,164,216,.2); border-radius: 1rem; padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
.custom-dev-icon { width: 36px; height: 36px; background: var(--blue); border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }