/* =================================================================
* TariffWolf — Main Stylesheet
* Palette: Sovran Navy (base) · Gold (primary highlight) · Red-Orange (accent)
* ================================================================= */
:root {
/* Sovran Navy palette */
--tw-navy-deepest: #060e1c;
--tw-navy-darker: #08111f;
--tw-navy: #0a1628; /* Sovran Navy — base */
--tw-navy-light: #122340;
--tw-navy-soft: #1b2c4a;
--tw-navy-line: rgba(255,255,255,0.07);
/* Gold */
--tw-gold: #c9a84c;
--tw-gold-bright: #d4b85a;
--tw-gold-deep: #a88a3d;
--tw-gold-soft: rgba(201,168,76,0.12);
/* Red-Orange */
--tw-red: #ff5733;
--tw-red-bright: #ff7a55;
--tw-red-soft: rgba(255,87,51,0.12);
/* Text */
--tw-text: #e6edf6;
--tw-text-soft: #b3becf;
--tw-text-mute: #7e8aa0;
--tw-text-dim: #5b6678;
/* Surfaces */
--tw-surface: #0e1a30;
--tw-surface-2: #15233e;
--tw-card-border: rgba(255,255,255,0.06);
--tw-card-border-hover: rgba(201,168,76,0.4);
/* Sizing */
--tw-radius-sm: 8px;
--tw-radius: 14px;
--tw-radius-lg: 22px;
--tw-shadow: 0 8px 28px -10px rgba(0,0,0,0.45);
--tw-shadow-gold: 0 12px 40px -12px rgba(201,168,76,0.35);
--tw-container: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--tw-navy);
color: var(--tw-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tw-gold); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--tw-gold-bright); }
h1, h2, h3, h4, h5, h6 {
color: #fff;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 .6em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.tw-container {
max-width: var(--tw-container);
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* Skip link */
.skip-link.screen-reader-text { position: absolute; left: -9999px; }
.skip-link.screen-reader-text:focus {
left: 16px; top: 16px; background: var(--tw-gold); color: var(--tw-navy);
padding: 10px 18px; border-radius: 8px; z-index: 9999; font-weight: 700;
}
/* ===================== HEADER / NAV ===================== */
.tw-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(10,22,40,0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--tw-navy-line);
transition: background .25s ease, box-shadow .25s ease;
}
.tw-header.is-scrolled {
background: rgba(8,17,31,0.96);
box-shadow: 0 6px 18px -6px rgba(0,0,0,0.45);
}
.tw-nav {
max-width: var(--tw-container);
margin: 0 auto;
height: 76px;
padding: 0 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 28px;
}
.tw-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tw-brand img { height: 38px; width: 38px; }
.tw-brand-name {
font-size: 1.45rem; font-weight: 800; color: #fff;
letter-spacing: -0.02em;
}
.tw-brand-name .tm { color: var(--tw-gold); font-weight: 700; }
.tw-menu { display: flex; align-items: center; gap: 28px; }
.tw-menu > .menu-item, .tw-menu > li {
position: relative;
list-style: none;
}
.tw-menu a {
color: var(--tw-text-soft);
font-size: 0.92rem;
font-weight: 500;
transition: color .2s ease;
padding: 8px 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tw-menu a:hover, .tw-menu .current-menu-item > a {
color: var(--tw-gold);
}
/* Submenus */
.tw-menu .sub-menu, .tw-menu ul.sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 240px;
background: var(--tw-surface-2);
border: 1px solid var(--tw-navy-line);
border-radius: 12px;
padding: 8px;
box-shadow: var(--tw-shadow);
opacity: 0; visibility: hidden;
transition: opacity .22s ease, transform .22s ease, visibility .22s;
list-style: none;
margin: 0;
}
.tw-menu li.menu-item-has-children > a::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 9px;
margin-left: 4px;
opacity: .7;
}
.tw-menu li:hover > .sub-menu,
.tw-menu li:focus-within > .sub-menu {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
.tw-menu .sub-menu li { list-style: none; }
.tw-menu .sub-menu a {
display: block;
padding: 10px 14px;
border-radius: 8px;
color: var(--tw-text-soft);
font-size: 0.88rem;
}
.tw-menu .sub-menu a:hover {
background: var(--tw-gold-soft);
color: var(--tw-gold-bright);
}
/* Header right cluster */
.tw-nav-right { display: flex; align-items: center; gap: 14px; }
/* Login/Register dropdown */
.tw-login-wrap { position: relative; }
.tw-login-toggle {
background: transparent;
border: 1px solid var(--tw-navy-line);
color: var(--tw-text-soft);
padding: 9px 14px;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
transition: all .2s ease;
}
.tw-login-toggle:hover { border-color: var(--tw-gold); color: var(--tw-gold); }
.tw-login-menu {
position: absolute;
top: calc(100% + 8px); right: 0;
min-width: 240px;
background: var(--tw-surface-2);
border: 1px solid var(--tw-navy-line);
border-radius: 12px;
padding: 8px;
box-shadow: var(--tw-shadow);
opacity: 0; visibility: hidden;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease, visibility .22s;
z-index: 200;
list-style: none;
margin: 0;
}
.tw-login-wrap.is-open .tw-login-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.tw-login-menu li { list-style: none; }
.tw-login-menu a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--tw-text-soft);
font-size: 0.86rem;
}
.tw-login-menu a:hover { background: var(--tw-gold-soft); color: var(--tw-gold-bright); }
.tw-login-menu .tw-login-divider {
height: 1px; background: var(--tw-navy-line); margin: 6px 8px;
}
/* Social icons */
.tw-socials { display: flex; align-items: center; gap: 8px; }
.tw-socials a {
width: 36px; height: 36px; border-radius: 9px;
background: var(--tw-navy-soft);
border: 1px solid var(--tw-navy-line);
display: inline-flex; align-items: center; justify-content: center;
color: var(--tw-text-soft);
transition: all .2s ease;
font-size: 0.85rem;
}
.tw-socials a:hover {
background: var(--tw-gold);
border-color: var(--tw-gold);
color: var(--tw-navy);
transform: translateY(-2px);
}
/* Mobile menu toggle */
.tw-menu-toggle {
display: none;
background: transparent;
border: 1px solid var(--tw-navy-line);
color: var(--tw-text);
width: 42px; height: 42px;
border-radius: 10px;
cursor: pointer;
font-size: 1.1rem;
}
@media (max-width: 1024px) {
.tw-menu, .tw-nav-right .tw-socials, .tw-nav-right .tw-login-wrap { display: none; }
.tw-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
.tw-nav { height: 68px; }
}
/* Mobile drawer */
.tw-mobile-drawer {
position: fixed;
inset: 0;
background: rgba(6,14,28,0.85);
backdrop-filter: blur(8px);
z-index: 200;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
.tw-mobile-drawer.is-open { opacity: 1; visibility: visible; }
.tw-mobile-drawer-inner {
background: var(--tw-navy-darker);
width: min(360px, 90%);
height: 100%;
padding: 24px;
margin-left: auto;
overflow-y: auto;
transform: translateX(100%);
transition: transform .3s ease;
border-left: 1px solid var(--tw-navy-line);
}
.tw-mobile-drawer.is-open .tw-mobile-drawer-inner { transform: translateX(0); }
.tw-mobile-close { float: right; background: transparent; border: 1px solid var(--tw-navy-line); color: #fff; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; }
.tw-mobile-menu {
list-style: none; padding: 0; margin: 60px 0 0;
display: flex; flex-direction: column; gap: 4px;
}
.tw-mobile-menu li { list-style: none; }
.tw-mobile-menu a {
display: block;
padding: 12px 14px;
border-radius: 10px;
color: var(--tw-text);
font-weight: 500;
font-size: 0.95rem;
}
.tw-mobile-menu a:hover { background: var(--tw-navy-soft); color: var(--tw-gold); }
.tw-mobile-menu .sub-menu { padding-left: 14px; margin-top: 4px; list-style: none; }
.tw-mobile-menu .sub-menu a { font-size: 0.86rem; opacity: .85; }
/* ===================== BUTTONS ===================== */
.tw-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
padding: 13px 26px;
border-radius: 12px;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.01em;
border: 1px solid transparent;
cursor: pointer;
transition: all .22s ease;
text-align: center;
line-height: 1.2;
}
.tw-btn:hover { transform: translateY(-2px); }
.tw-btn-primary {
background: linear-gradient(135deg, var(--tw-gold) 0%, var(--tw-gold-deep) 100%);
color: var(--tw-navy);
box-shadow: var(--tw-shadow-gold);
}
.tw-btn-primary:hover {
background: linear-gradient(135deg, var(--tw-gold-bright) 0%, var(--tw-gold) 100%);
color: var(--tw-navy);
}
.tw-btn-ghost {
background: var(--tw-navy-soft);
color: #fff;
border-color: var(--tw-navy-line);
}
.tw-btn-ghost:hover {
background: var(--tw-navy-light);
border-color: var(--tw-gold);
color: var(--tw-gold);
}
.tw-btn-outline {
background: transparent;
color: var(--tw-gold);
border-color: var(--tw-gold);
}
.tw-btn-outline:hover {
background: var(--tw-gold);
color: var(--tw-navy);
}
.tw-btn-block { width: 100%; }
.tw-btn-lg { padding: 16px 32px; font-size: 1rem; }
/* ===================== HERO ===================== */
.tw-hero {
position: relative;
padding: 180px 0 100px;
overflow: hidden;
background: radial-gradient(circle at 50% 10%, var(--tw-navy-light) 0%, var(--tw-navy) 50%, var(--tw-navy-darker) 100%);
text-align: center;
}
.tw-hero::before {
content: '';
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 1100px;
height: 700px;
background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 60%);
filter: blur(60px);
pointer-events: none;
}
.tw-hero-inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; }
.tw-hero-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: var(--tw-gold-soft);
border: 1px solid rgba(201,168,76,0.28);
color: var(--tw-gold-bright);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 28px;
animation: tw-float 6s ease-in-out infinite;
}
@keyframes tw-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.tw-hero h1 {
font-size: clamp(2.4rem, 5.4vw, 4.4rem);
font-weight: 800;
margin-bottom: 24px;
}
.tw-hero h1 .gold {
background: linear-gradient(120deg, #fff 0%, var(--tw-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tw-hero p.lead {
font-size: clamp(1rem, 1.6vw, 1.18rem);
color: var(--tw-text-soft);
max-width: 760px;
margin: 0 auto 36px;
line-height: 1.75;
}
.tw-highlight-red {
color: var(--tw-red);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
.tw-cta-row {
display: flex; flex-wrap: wrap; gap: 14px;
justify-content: center;
}
/* ===================== DEMO CARD ===================== */
.tw-demo-wrapper {
max-width: 720px;
margin: 32px auto 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .55s ease, opacity .4s ease;
}
.tw-demo-wrapper.is-open {
max-height: 1800px;
opacity: 1;
}
.tw-demo-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-navy-line);
border-radius: 22px;
padding: 28px;
text-align: left;
box-shadow: var(--tw-shadow);
}
.tw-demo-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 22px;
}
.tw-demo-card-head h3 {
margin: 0;
font-size: 1.2rem;
display: inline-flex; align-items: center; gap: 10px;
}
.tw-demo-card-head h3 i { color: var(--tw-gold); }
.tw-demo-close {
background: transparent;
border: 1px solid var(--tw-navy-line);
color: var(--tw-text-mute);
width: 36px; height: 36px;
border-radius: 8px;
cursor: pointer;
transition: all .2s ease;
}
.tw-demo-close:hover { color: var(--tw-red); border-color: var(--tw-red); }
.tw-field { margin-bottom: 16px; }
.tw-field label {
display: block;
font-size: 0.86rem;
font-weight: 600;
color: var(--tw-text-soft);
margin-bottom: 6px;
}
.tw-field .req { color: var(--tw-red); }
.tw-field .opt { color: var(--tw-text-mute); font-weight: 400; font-size: 0.78rem; }
.tw-input {
width: 100%;
padding: 12px 14px;
background: var(--tw-navy-darker);
border: 1px solid var(--tw-navy-line);
border-radius: 10px;
color: var(--tw-text);
font-size: 0.92rem;
font-family: inherit;
transition: border-color .2s ease, box-shadow .2s ease;
}
.tw-input:focus {
outline: none;
border-color: var(--tw-gold);
box-shadow: 0 0 0 3px var(--tw-gold-soft);
}
textarea.tw-input { resize: vertical; min-height: 90px; }
.tw-captcha-box {
background: var(--tw-navy-darker);
border: 1px solid var(--tw-navy-line);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
}
.tw-captcha-box label { color: var(--tw-text-soft); font-size: 0.86rem; font-weight: 600; }
.tw-captcha-box label i { color: var(--tw-gold); margin-right: 4px; }
.tw-captcha-row {
display: flex; align-items: center; gap: 14px; margin-top: 10px;
}
.tw-captcha-q {
font-size: 1.1rem;
font-weight: 700;
color: var(--tw-gold-bright);
min-width: 80px;
}
.tw-cap-input { max-width: 100px; }
.tw-privacy {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.85rem; color: var(--tw-text-soft);
margin: 8px 0 18px;
cursor: pointer;
}
.tw-privacy input { margin-top: 3px; flex-shrink: 0; accent-color: var(--tw-gold); }
.tw-actions { display: flex; align-items: center; gap: 14px; }
.tw-spinner { color: var(--tw-gold); font-size: 1.2rem; }
.tw-form-status {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
font-size: 0.88rem;
display: none;
}
.tw-form-status.is-error {
display: block;
background: var(--tw-red-soft);
color: var(--tw-red-bright);
border: 1px solid rgba(255,87,51,0.3);
}
.tw-form-status.is-success {
display: block;
background: rgba(34,197,94,0.1);
color: #4ade80;
border: 1px solid rgba(34,197,94,0.3);
}
/* Cal.com stage */
.tw-cal-success {
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.25);
color: #6ee7b7;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.88rem;
margin-bottom: 16px;
}
.tw-cal-frame-wrap {
position: relative;
width: 100%;
border-radius: 14px;
overflow: hidden;
background: var(--tw-navy-darker);
border: 1px solid var(--tw-navy-line);
}
.tw-cal-frame {
width: 100%;
height: 700px;
border: 0;
display: block;
}
.tw-cal-fallback {
font-size: 0.85rem;
color: var(--tw-text-mute);
text-align: center;
margin-top: 14px;
}
/* ===================== ABOUT / SLIDER SECTION ===================== */
.tw-section { padding: 96px 0; }
.tw-section-tight { padding: 64px 0; }
.tw-bg-darker { background: var(--tw-navy-darker); }
.tw-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
.tw-grid-2 { grid-template-columns: 1fr; gap: 40px; }
}
.tw-section-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.tw-section-title .gold { color: var(--tw-gold); }
.tw-section-sub {
color: var(--tw-text-soft);
font-size: 1.05rem;
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.tw-section-head { text-align: center; margin-bottom: 56px; }
.tw-about-checks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 24px;
}
.tw-about-check { display: flex; align-items: flex-start; gap: 10px; color: var(--tw-text-soft); font-size: 0.95rem; }
.tw-about-check i { color: var(--tw-gold); margin-top: 4px; }
/* Slider card */
.tw-slider-card {
position: relative;
background: var(--tw-surface-2);
border: 1px solid var(--tw-navy-line);
border-radius: 24px;
padding: 32px;
box-shadow: var(--tw-shadow);
}
.tw-slider-card::before {
content: '';
position: absolute;
inset: -16px;
background: var(--tw-gold-soft);
filter: blur(40px);
border-radius: inherit;
z-index: -1;
}
.tw-slider-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--tw-navy-line);
}
.tw-slider-head-left { display: flex; align-items: center; gap: 14px; }
.tw-slider-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--tw-red-soft);
color: var(--tw-red);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.tw-slider-head h4 { margin: 0; font-size: 1.05rem; }
.tw-slider-arrows { display: flex; gap: 8px; }
.tw-slider-arrow {
width: 38px; height: 38px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--tw-navy-line);
color: var(--tw-text-soft);
cursor: pointer;
transition: all .2s ease;
font-size: 0.78rem;
}
.tw-slider-arrow:hover { background: var(--tw-gold); color: var(--tw-navy); border-color: var(--tw-gold); }
.tw-slider-viewport { overflow: hidden; min-height: 180px; }
.tw-slider-track {
display: flex;
transition: transform .55s cubic-bezier(.645,.045,.355,1);
}
.tw-slide {
flex: 0 0 100%;
width: 100%;
}
.tw-slide-quote {
background: var(--tw-navy-darker);
border-left: 4px solid var(--tw-red);
padding: 18px 20px;
border-radius: 12px;
margin-bottom: 14px;
}
.tw-slide-quote p {
font-style: italic;
color: #fff;
margin: 0;
font-size: 0.96rem;
}
.tw-slide-text {
color: var(--tw-text-soft);
font-size: 0.92rem;
margin: 0;
}
.tw-slider-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 24px; padding-top: 18px;
border-top: 1px solid var(--tw-navy-line);
}
.tw-slider-dots { display: flex; gap: 6px; }
.tw-dot {
width: 8px; height: 8px;
border-radius: 999px;
background: var(--tw-text-dim);
border: 0;
cursor: pointer;
padding: 0;
transition: all .25s ease;
}
.tw-dot.is-active { width: 22px; background: var(--tw-gold); }
.tw-slider-foot-text {
color: var(--tw-gold);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
/* ===================== SERVICE CARDS ===================== */
.tw-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.tw-service-card {
background: linear-gradient(160deg, var(--tw-surface-2) 0%, var(--tw-navy-darker) 100%);
border: 1px solid var(--tw-card-border);
border-radius: 20px;
padding: 32px;
transition: all .3s ease;
display: flex;
flex-direction: column;
}
.tw-service-card:hover {
border-color: var(--tw-card-border-hover);
transform: translateY(-6px);
box-shadow: var(--tw-shadow-gold);
}
.tw-service-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
background: var(--tw-gold-soft);
color: var(--tw-gold);
margin-bottom: 22px;
}
.tw-service-icon.is-red { background: var(--tw-red-soft); color: var(--tw-red); }
.tw-service-icon.is-blue { background: rgba(56,189,248,0.12); color: #38bdf8; }
.tw-service-card h3 { margin: 0 0 10px; }
.tw-service-card .tw-card-lead {
color: var(--tw-text-soft);
font-size: 0.94rem;
margin: 0 0 18px;
line-height: 1.65;
}
.tw-service-card ul {
list-style: none;
margin: 0 0 22px;
padding: 0;
color: var(--tw-text);
font-size: 0.9rem;
}
.tw-service-card ul li {
padding-left: 26px;
position: relative;
margin-bottom: 9px;
color: var(--tw-text-soft);
}
.tw-service-card ul li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--tw-gold);
position: absolute;
left: 0; top: 2px;
font-size: 0.78rem;
}
.tw-service-card .tw-btn {
margin-top: auto;
align-self: flex-start;
}
/* ===================== BLOG SECTION ===================== */
.tw-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.tw-blog-grid.cols-2 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .tw-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tw-blog-grid { grid-template-columns: 1fr; } }
.tw-blog-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
overflow: hidden;
display: flex; flex-direction: column;
transition: all .3s ease;
}
.tw-blog-card:hover {
border-color: var(--tw-card-border-hover);
transform: translateY(-4px);
}
.tw-blog-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.tw-blog-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .4s ease;
}
.tw-blog-card:hover .tw-blog-thumb img { transform: scale(1.05); }
.tw-blog-body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.tw-blog-meta {
display: flex; flex-wrap: wrap; gap: 12px;
color: var(--tw-text-mute);
font-size: 0.78rem;
margin-bottom: 12px;
}
.tw-blog-meta i { margin-right: 4px; }
.tw-blog-cat { color: var(--tw-gold); }
.tw-blog-title { font-size: 1.18rem; line-height: 1.35; margin: 0 0 12px; }
.tw-blog-title a { color: #fff; }
.tw-blog-title a:hover { color: var(--tw-gold); }
.tw-blog-excerpt { color: var(--tw-text-soft); font-size: 0.92rem; margin: 0; flex: 1; }
.tw-read-more { color: var(--tw-gold); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.tw-read-more i { font-size: 0.7rem; transition: transform .2s ease; }
.tw-read-more:hover i { transform: translateX(3px); }
/* ===================== STRATEGIC VISION CARD (gold gradient) ===================== */
.tw-vision-card {
background: linear-gradient(135deg, var(--tw-gold) 0%, var(--tw-gold-deep) 100%);
border-radius: 36px;
padding: 64px;
color: var(--tw-navy);
position: relative;
overflow: hidden;
}
.tw-vision-card::after {
content: '';
position: absolute;
right: -120px; bottom: -120px;
width: 480px; height: 480px;
background: rgba(255,255,255,0.12);
border-radius: 50%;
pointer-events: none;
}
.tw-vision-card h2 { color: #fff; max-width: 600px; }
.tw-vision-card .tw-vision-text {
font-size: 1.18rem;
line-height: 1.7;
color: #fff;
max-width: 720px;
margin-bottom: 28px;
opacity: .96;
}
.tw-vision-tags {
display: flex; flex-wrap: wrap; gap: 10px;
position: relative; z-index: 2;
}
.tw-vision-tag {
padding: 9px 18px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
backdrop-filter: blur(6px);
}
@media (max-width: 720px) { .tw-vision-card { padding: 40px 28px; } }
/* ===================== ABOUT PAGE BLOCKS ===================== */
.tw-text-block { color: var(--tw-text-soft); font-size: 1.02rem; line-height: 1.8; }
.tw-text-block strong { color: #fff; }
.tw-list-strong {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 720px) { .tw-list-strong { grid-template-columns: 1fr; } }
.tw-list-strong li {
background: var(--tw-surface-2);
border: 1px solid var(--tw-navy-line);
border-radius: 12px;
padding: 16px 18px;
color: var(--tw-text);
font-size: 0.95rem;
display: flex; gap: 10px; align-items: flex-start;
}
.tw-list-strong li i { color: var(--tw-gold); margin-top: 4px; }
/* Founder cards */
.tw-founders-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
max-width: 900px;
margin: 0 auto;
}
.tw-founder-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 22px;
padding: 32px;
text-align: center;
transition: all .3s ease;
}
.tw-founder-card:hover { border-color: var(--tw-gold); transform: translateY(-4px); }
.tw-founder-photo {
width: 130px; height: 130px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 3px solid var(--tw-gold);
background: var(--tw-navy-darker);
}
.tw-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.tw-founder-name { font-size: 1.35rem; margin: 0 0 4px; }
.tw-founder-role { color: var(--tw-gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 16px; }
.tw-founder-bio { color: var(--tw-text-soft); font-size: 0.92rem; margin-bottom: 16px; }
.tw-founder-card .tw-socials { justify-content: center; }
/* ===================== FOOTER ===================== */
.tw-footer {
background: var(--tw-navy-deepest);
border-top: 1px solid var(--tw-navy-line);
padding: 64px 0 28px;
color: var(--tw-text-soft);
}
.tw-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
@media (max-width: 900px) { .tw-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .tw-footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.tw-footer-brand .tw-brand-name { font-size: 1.4rem; }
.tw-footer-brand p {
color: var(--tw-text-mute);
font-size: 0.9rem;
margin: 14px 0 18px;
line-height: 1.7;
}
.tw-footer-widget-title, .tw-footer h4 {
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 16px;
}
.tw-footer-widget ul, .tw-footer-col ul {
list-style: none; padding: 0; margin: 0;
}
.tw-footer-widget li, .tw-footer-col li { margin-bottom: 9px; }
.tw-footer-widget a, .tw-footer-col a {
color: var(--tw-text-soft);
font-size: 0.88rem;
transition: color .2s;
}
.tw-footer-widget a:hover, .tw-footer-col a:hover { color: var(--tw-gold); }
.tw-footer-bar {
display: flex; align-items: center; justify-content: space-between;
padding-top: 24px;
border-top: 1px solid var(--tw-navy-line);
flex-wrap: wrap; gap: 12px;
font-size: 0.82rem;
color: var(--tw-text-mute);
}
.tw-footer-bar-links { display: flex; gap: 18px; flex-wrap: wrap; }
/* ===================== BLOG SIDEBAR (single) ===================== */
.tw-single-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
align-items: flex-start;
}
@media (max-width: 980px) { .tw-single-layout { grid-template-columns: 1fr; } }
.tw-single-meta {
display: flex; gap: 16px; flex-wrap: wrap;
color: var(--tw-text-mute);
font-size: 0.85rem;
margin-bottom: 18px;
}
.tw-single-meta i { color: var(--tw-gold); margin-right: 4px; }
.tw-single-banner {
width: 100%; aspect-ratio: 16/8;
overflow: hidden;
border-radius: 18px;
margin-bottom: 32px;
background: var(--tw-surface-2);
}
.tw-single-banner img { width: 100%; height: 100%; object-fit: cover; }
.tw-single-content {
color: var(--tw-text-soft);
font-size: 1.02rem;
line-height: 1.85;
}
.tw-single-content h2, .tw-single-content h3, .tw-single-content h4 { color: #fff; margin-top: 1.5em; }
.tw-single-content a { color: var(--tw-gold); border-bottom: 1px solid currentColor; }
.tw-single-content blockquote {
border-left: 4px solid var(--tw-gold);
background: var(--tw-surface-2);
padding: 18px 22px;
margin: 24px 0;
border-radius: 0 12px 12px 0;
color: var(--tw-text);
font-style: italic;
}
.tw-single-content code {
background: var(--tw-navy-darker);
color: var(--tw-gold);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.92em;
}
.tw-single-content pre {
background: var(--tw-navy-darker);
border: 1px solid var(--tw-navy-line);
padding: 18px;
border-radius: 12px;
overflow-x: auto;
}
.tw-breadcrumbs {
display: flex; gap: 8px; flex-wrap: wrap;
color: var(--tw-text-mute);
font-size: 0.82rem;
margin-bottom: 18px;
}
.tw-breadcrumbs a { color: var(--tw-gold); }
.tw-breadcrumbs .sep { color: var(--tw-text-dim); }
/* Sidebar card */
.tw-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
@media (max-width: 980px) { .tw-sidebar { position: static; } }
.tw-sidebar-card {
background: linear-gradient(160deg, var(--tw-surface-2) 0%, var(--tw-navy-darker) 100%);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
padding: 26px;
text-align: center;
}
.tw-sidebar-card-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: var(--tw-gold-soft);
color: var(--tw-gold);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.3rem;
margin-bottom: 14px;
}
.tw-sidebar-card-title { color: #fff; font-size: 1.1rem; margin: 0 0 8px; }
.tw-sidebar-card-sub { color: var(--tw-text-soft); font-size: 0.88rem; margin-bottom: 18px; }
.tw-widget {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
padding: 22px;
}
.tw-widget-title {
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--tw-navy-line);
}
.tw-mini-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tw-mini-posts li { display: flex; gap: 12px; align-items: flex-start; }
.tw-mini-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; }
.tw-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tw-mini-body { flex: 1; min-width: 0; }
.tw-mini-title {
display: block; color: #fff;
font-size: 0.86rem; font-weight: 600; line-height: 1.35;
margin-bottom: 4px;
}
.tw-mini-title:hover { color: var(--tw-gold); }
.tw-mini-date { color: var(--tw-text-mute); font-size: 0.74rem; }
/* ===================== PAGINATION ===================== */
.tw-pagination {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 8px;
margin-top: 56px;
}
.tw-pagination .page-numbers {
min-width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 14px;
border-radius: 10px;
background: var(--tw-surface-2);
color: var(--tw-text-soft);
border: 1px solid var(--tw-navy-line);
font-size: 0.86rem;
font-weight: 600;
transition: all .2s ease;
}
.tw-pagination .page-numbers:hover,
.tw-pagination .page-numbers.current {
background: var(--tw-gold);
color: var(--tw-navy);
border-color: var(--tw-gold);
}
.tw-pagination .dots { background: transparent; border: 0; color: var(--tw-text-mute); }
/* ===================== PAGE HEADER (interior) ===================== */
.tw-page-header {
padding: 160px 0 80px;
background: linear-gradient(180deg, var(--tw-navy-light) 0%, var(--tw-navy) 100%);
text-align: center;
border-bottom: 1px solid var(--tw-navy-line);
position: relative;
overflow: hidden;
}
.tw-page-header::before {
content: '';
position: absolute;
top: -200px; left: 50%;
transform: translateX(-50%);
width: 700px; height: 500px;
background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.tw-page-header h1 { position: relative; z-index: 2; margin-bottom: 14px; }
.tw-page-header p { position: relative; z-index: 2; color: var(--tw-text-soft); font-size: 1.05rem; max-width: 720px; margin: 0 auto; }
/* ===================== BOOK CARD CTA ===================== */
.tw-book-card {
background: linear-gradient(135deg, var(--tw-navy-light) 0%, var(--tw-surface-2) 100%);
border: 1px solid var(--tw-card-border);
border-radius: 22px;
padding: 40px;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.tw-book-card.is-compact { padding: 28px; }
.tw-book-card-icon {
width: 64px; height: 64px;
border-radius: 16px;
background: var(--tw-gold-soft);
color: var(--tw-gold);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.6rem;
margin-bottom: 16px;
}
.tw-book-card-title { font-size: 1.4rem; margin: 0 0 10px; }
.tw-book-card-sub { color: var(--tw-text-soft); margin-bottom: 22px; }
/* ===================== CONTACT / PRICE ===================== */
.tw-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: flex-start;
}
@media (max-width: 880px) { .tw-contact-grid { grid-template-columns: 1fr; } }
.tw-info-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
padding: 28px;
display: flex; gap: 18px; align-items: flex-start;
margin-bottom: 18px;
}
.tw-info-card-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: var(--tw-gold-soft);
color: var(--tw-gold);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.tw-info-card h4 { margin: 0 0 6px; color: #fff; }
.tw-info-card p { color: var(--tw-text-soft); margin: 0; font-size: 0.92rem; }
.tw-form-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 22px;
padding: 36px;
}
/* Price page */
.tw-partner-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
margin: 32px 0;
}
.tw-partner-tile {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 14px;
padding: 20px;
text-align: center;
transition: all .25s ease;
}
.tw-partner-tile:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-partner-tile i {
color: var(--tw-gold);
font-size: 1.6rem;
margin-bottom: 12px;
display: block;
}
.tw-partner-tile strong { color: #fff; display: block; margin-bottom: 4px; }
.tw-partner-tile span { color: var(--tw-text-mute); font-size: 0.85rem; }
/* ===================== FEATURE STRIP ===================== */
.tw-feature-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 22px;
padding: 32px;
}
.tw-feature-item { text-align: center; }
.tw-feature-num { color: var(--tw-gold); font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.tw-feature-label { color: var(--tw-text-soft); font-size: 0.86rem; }
/* ===================== GENERIC CONTENT ===================== */
.tw-page-content {
color: var(--tw-text-soft);
font-size: 1rem;
line-height: 1.8;
max-width: 880px;
margin: 0 auto;
}
.tw-page-content h2, .tw-page-content h3 { color: #fff; }
.tw-page-content ul { padding-left: 22px; }
.tw-page-content ul li { margin-bottom: 10px; }
/* Comments */
.tw-comments { margin-top: 56px; }
.tw-comments .comment-list { list-style: none; padding: 0; }
.tw-comments .comment {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 14px;
padding: 20px;
margin-bottom: 16px;
}
/* Sticky bar offset for fixed header anchors */
:target { scroll-margin-top: 100px; }
/* Utilities */
.tw-mb-0 { margin-bottom: 0 !important; }
.tw-mt-0 { margin-top: 0 !important; }
.tw-text-center { text-align: center; }
.tw-text-gold { color: var(--tw-gold) !important; }
.tw-text-red { color: var(--tw-red) !important; }
/* =====================================================================
ADDITIONAL TEMPLATE STYLES
===================================================================== */
/* Eyebrow label (used on page headers) */
.tw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tw-gold);
margin-bottom: 14px;
}
.tw-eyebrow i { font-size: 0.85rem; }
.tw-page-sub {
color: var(--tw-text-soft);
font-size: 1.05rem;
max-width: 760px;
margin: 12px auto 0;
line-height: 1.65;
}
.tw-page-header .tw-cta-row { margin-top: 28px; justify-content: center; }
.tw-page-content { max-width: 820px; margin: 0 auto; line-height: 1.75; color: var(--tw-text-soft); }
.tw-page-content h2, .tw-page-content h3 { color: #fff; margin-top: 1.4em; }
.tw-page-content a { color: var(--tw-gold); }
/* Section CTA centered button row */
.tw-section-cta { text-align: center; margin-top: 40px; }
/* ABOUT — Reasons grid (Section 1) */
.tw-reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tw-reason-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 28px 24px;
transition: all 0.25s;
}
.tw-reason-card:hover {
border-color: var(--tw-gold);
transform: translateY(-3px);
background: rgba(201, 168, 76, 0.05);
}
.tw-reason-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--tw-gold), #b89542);
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-bottom: 18px;
}
.tw-reason-card h3 { color: #fff; font-size: 1.1rem; margin: 0 0 10px; }
.tw-reason-card p { color: var(--tw-text-soft); font-size: 0.94rem; margin: 0; line-height: 1.55; }
/* MOAT */
.tw-moat-section { background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 76, 0.04) 50%, transparent 100%); }
.tw-moat-text { max-width: 880px; margin: 0 auto 48px; text-align: center; color: var(--tw-text-soft); line-height: 1.75; font-size: 1.02rem; }
.tw-moat-text p + p { margin-top: 16px; }
.tw-moat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.tw-moat-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(201,168,76,0.25);
border-radius: 18px;
padding: 32px 28px;
position: relative;
overflow: hidden;
}
.tw-moat-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(201,168,76,0.12), transparent 60%);
pointer-events: none;
}
.tw-moat-num {
font-size: 2.4rem;
font-weight: 800;
color: var(--tw-gold);
line-height: 1;
margin-bottom: 16px;
}
.tw-moat-card h3 { color: #fff; font-size: 1.15rem; margin: 0 0 10px; }
.tw-moat-card p { color: var(--tw-text-soft); margin: 0; line-height: 1.6; font-size: 0.95rem; }
/* VS LLM table */
.tw-vs-content { max-width: 880px; margin: 0 auto 40px; color: var(--tw-text-soft); line-height: 1.75; }
.tw-vs-content p + p { margin-top: 14px; }
.tw-vs-table {
max-width: 980px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
overflow: hidden;
}
.tw-vs-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1.4fr;
gap: 0;
}
.tw-vs-row > div {
padding: 16px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 0.94rem;
color: var(--tw-text-soft);
}
.tw-vs-row > div + div { border-left: 1px solid rgba(255,255,255,0.06); }
.tw-vs-row:last-child > div { border-bottom: 0; }
.tw-vs-head > div {
background: rgba(201,168,76,0.08);
color: #fff;
font-weight: 700;
letter-spacing: 0.04em;
font-size: 0.82rem;
text-transform: uppercase;
}
.tw-vs-row > div:last-child i { color: var(--tw-gold); margin-right: 6px; }
/* FOUNDERS fallback icon style */
.tw-founder-photo i {
font-size: 2.5rem;
color: var(--tw-gold);
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
/* HERO — gold span emphasis */
.tw-hero p.lead .hl {
color: var(--tw-red);
font-weight: 600;
border-bottom: 2px solid rgba(255,87,51,0.6);
}
.tw-zero-lead .hl {
color: var(--tw-red);
font-weight: 600;
border-bottom: 2px solid rgba(255,87,51,0.5);
}
/* FEATURE STRIP (zero tolerance bottom row) */
.tw-feature-strip {
display: flex;
gap: 32px;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
list-style: none;
padding-left: 0;
}
.tw-feature-strip li {
display: flex;
align-items: center;
gap: 8px;
color: var(--tw-text-soft);
font-size: 0.95rem;
}
.tw-feature-strip li i { color: var(--tw-gold); }
.tw-zero-section { background: rgba(255,255,255,0.01); }
.tw-zero-grid { gap: 56px; align-items: center; }
.tw-zero-body { color: var(--tw-text-soft); line-height: 1.7; margin-top: 20px; }
.tw-zero-body strong { color: #fff; }
/* SLIDER */
.tw-slider {
background: linear-gradient(180deg, rgba(201,168,76,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 28px;
min-height: 280px;
display: flex;
flex-direction: column;
}
.tw-slider-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.tw-slider-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255,87,51,0.15);
color: var(--tw-red);
display: flex;
align-items: center;
justify-content: center;
}
.tw-slider-title { color: #fff; font-size: 1.05rem; margin: 0; flex: 1; }
.tw-slider-nav { display: flex; gap: 6px; }
.tw-slider-nav button {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.tw-slider-nav button:hover { background: var(--tw-gold); color: var(--tw-navy); border-color: var(--tw-gold); }
.tw-slides { position: relative; flex: 1; min-height: 150px; }
.tw-slide { display: none; }
.tw-slide.is-active { display: block; animation: twFadeIn 0.4s ease; }
@keyframes twFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tw-slide blockquote {
color: #fff;
font-size: 1rem;
font-weight: 500;
margin: 0 0 14px;
padding: 12px 16px;
background: rgba(255,87,51,0.08);
border-left: 3px solid var(--tw-red);
border-radius: 4px;
line-height: 1.55;
}
.tw-slide-body { color: var(--tw-text-soft); margin: 0; line-height: 1.6; font-size: 0.93rem; }
.tw-slider-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
margin-top: 18px;
border-top: 1px solid rgba(255,255,255,0.06);
gap: 12px;
}
.tw-slider-dots { display: flex; gap: 8px; }
.tw-slider-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
cursor: pointer;
transition: all 0.2s;
}
.tw-slider-dots .dot.is-active { background: var(--tw-gold); width: 22px; border-radius: 4px; }
.tw-slider-tag { color: var(--tw-gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; }
/* SECTION CTA + section-cta inline */
.tw-section-cta { text-align: center; margin-top: 48px; }
/* WHY section stats */
.tw-why-section .tw-eyebrow { margin-bottom: 16px; }
.tw-why-grid { gap: 60px; align-items: center; }
.tw-why-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.tw-stat-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 24px 20px;
text-align: center;
transition: all 0.25s;
}
.tw-stat-card:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-stat-num {
color: var(--tw-gold);
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
}
.tw-stat-label {
color: var(--tw-text-soft);
font-size: 0.85rem;
line-height: 1.45;
}
.tw-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
/* TRUSTED CTA */
.tw-trusted-card {
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(10,22,40,0.5));
border: 1px solid rgba(201,168,76,0.3);
border-radius: 22px;
padding: 48px;
display: flex;
gap: 32px;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.tw-trusted-text h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.tw-trusted-text p { color: var(--tw-text-soft); margin: 0; max-width: 560px; }
.tw-trusted-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* CHECK LIST */
.tw-check-list {
list-style: none;
padding: 0;
margin: 16px 0 0;
}
.tw-check-list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--tw-text-soft);
padding: 8px 0;
font-size: 0.94rem;
line-height: 1.5;
}
.tw-check-list li i { color: var(--tw-gold); margin-top: 4px; flex-shrink: 0; }
/* CODE CARD (API service) */
.tw-feature-grid { gap: 56px; align-items: center; }
.tw-code-card {
background: #0d1a30;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.tw-code-head {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tw-code-head .dot { width: 12px; height: 12px; border-radius: 50%; }
.tw-code-head .dot-r { background: #ff5f57; }
.tw-code-head .dot-y { background: #ffbd2e; }
.tw-code-head .dot-g { background: #27c93f; }
.tw-code-file { margin-left: auto; color: var(--tw-text-mute); font-size: 0.82rem; font-family: 'Monaco','Menlo',monospace; }
.tw-code-block {
margin: 0;
padding: 22px;
color: #d3dbe6;
font-family: 'Monaco','Menlo','Courier New',monospace;
font-size: 0.84rem;
line-height: 1.6;
overflow-x: auto;
white-space: pre;
background: transparent;
}
/* INTEGRATIONS */
.tw-integrations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.tw-integration {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 28px 22px;
text-align: center;
transition: all 0.25s;
}
.tw-integration:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-integration i { font-size: 2rem; color: var(--tw-gold); margin-bottom: 14px; display: block; }
.tw-integration h4 { color: #fff; margin: 0 0 8px; font-size: 1rem; }
.tw-integration p { color: var(--tw-text-soft); margin: 0; font-size: 0.88rem; line-height: 1.5; }
/* PROCESS */
.tw-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
}
.tw-process-step {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 28px 22px;
position: relative;
transition: all 0.25s;
}
.tw-process-step:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-step-num {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--tw-gold);
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.15rem;
margin-bottom: 16px;
}
.tw-process-step h3 { color: #fff; font-size: 1.05rem; margin: 0 0 10px; }
.tw-process-step p { color: var(--tw-text-soft); margin: 0; font-size: 0.92rem; line-height: 1.55; }
/* SECURITY */
.tw-security-section { background: rgba(255,255,255,0.01); }
.tw-security-grid { gap: 56px; align-items: center; }
.tw-security-callout {
background: linear-gradient(135deg, rgba(201,168,76,0.1), rgba(255,255,255,0.02));
border: 1px solid rgba(201,168,76,0.25);
border-radius: 18px;
padding: 36px 30px;
text-align: center;
}
.tw-security-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 16px;
background: linear-gradient(135deg, var(--tw-gold), #b89542);
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
}
.tw-security-callout h3 { color: #fff; margin: 0 0 12px; }
.tw-security-callout p { color: var(--tw-text-soft); margin: 0; line-height: 1.6; }
/* REGIMES */
.tw-regimes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.tw-regime-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 28px 24px;
transition: all 0.25s;
}
.tw-regime-card:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-regime-flag {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(201,168,76,0.12);
color: var(--tw-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 18px;
}
.tw-regime-card h3 { color: #fff; font-size: 1.1rem; margin: 0 0 10px; }
.tw-regime-card p { color: var(--tw-text-soft); margin: 0; font-size: 0.94rem; line-height: 1.55; }
/* CAPABILITY BLOCKS */
.tw-cap-grid { gap: 28px; }
.tw-cap-block {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 26px 24px;
transition: all 0.25s;
}
.tw-cap-block:hover { border-color: var(--tw-gold); }
.tw-cap-block h3 { color: #fff; font-size: 1.05rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.tw-cap-block h3 i { color: var(--tw-gold); }
.tw-cap-block p { color: var(--tw-text-soft); margin: 0; line-height: 1.6; font-size: 0.94rem; }
/* MISSION & VISION */
.tw-mv-grid { gap: 28px; }
.tw-mv-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 40px 36px;
transition: all 0.25s;
}
.tw-mv-card:hover { border-color: var(--tw-gold); }
.tw-mv-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--tw-gold), #b89542);
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 22px;
}
.tw-mv-card h2 { color: #fff; margin: 0 0 14px; font-size: 1.5rem; }
.tw-mv-card p { color: var(--tw-text-soft); margin: 0; line-height: 1.7; }
/* PILLARS */
.tw-pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.tw-pillar-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 28px 22px;
transition: all 0.25s;
}
.tw-pillar-card:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-pillar-num {
color: var(--tw-gold);
font-size: 1.6rem;
font-weight: 800;
margin-bottom: 12px;
}
.tw-pillar-card h3 { color: #fff; font-size: 1rem; margin: 0 0 8px; }
.tw-pillar-card p { color: var(--tw-text-soft); margin: 0; font-size: 0.9rem; line-height: 1.55; }
/* ROADMAP */
.tw-roadmap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.tw-roadmap-item {
position: relative;
padding: 28px 24px 28px 28px;
background: rgba(255,255,255,0.03);
border-left: 3px solid var(--tw-gold);
border-radius: 0 14px 14px 0;
}
.tw-roadmap-dot {
position: absolute;
left: -8px;
top: 32px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--tw-gold);
box-shadow: 0 0 0 3px var(--tw-navy);
}
.tw-roadmap-item h4 { color: #fff; margin: 0 0 10px; font-size: 1.05rem; }
.tw-roadmap-item p { color: var(--tw-text-soft); margin: 0; font-size: 0.94rem; line-height: 1.55; }
/* PARTNER GRID (Price page) */
.tw-partner-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.tw-partner-tile {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 36px 32px;
display: flex;
flex-direction: column;
transition: all 0.25s;
}
.tw-partner-tile:hover { border-color: var(--tw-gold); transform: translateY(-3px); }
.tw-partner-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(201,168,76,0.12);
color: var(--tw-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 22px;
}
.tw-partner-tile h3 { color: #fff; margin: 0 0 12px; font-size: 1.25rem; }
.tw-partner-tile > p { color: var(--tw-text-soft); margin: 0 0 14px; line-height: 1.6; }
.tw-partner-tile .tw-check-list { flex: 1; margin-bottom: 24px; }
/* CONTACT GRID */
.tw-contact-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 32px;
}
.tw-contact-info { display: flex; flex-direction: column; gap: 16px; }
.tw-info-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 28px 24px;
transition: all 0.25s;
}
.tw-info-card:hover { border-color: var(--tw-gold); }
.tw-info-icon {
width: 44px;
height: 44px;
border-radius: 11px;
background: linear-gradient(135deg, var(--tw-gold), #b89542);
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
margin-bottom: 16px;
}
.tw-info-card h3 { color: #fff; margin: 0 0 8px; font-size: 1.05rem; }
.tw-info-card p { color: var(--tw-text-soft); margin: 0 0 16px; font-size: 0.92rem; line-height: 1.55; }
.tw-info-card .tw-socials.is-large a { width: 40px; height: 40px; font-size: 1rem; }
.tw-form-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 40px 36px;
}
.tw-form-title { color: #fff; margin: 0 0 6px; font-size: 1.4rem; display: flex; align-items: center; gap: 12px; }
.tw-form-title i { color: var(--tw-gold); }
.tw-form-sub { color: var(--tw-text-soft); margin: 0 0 28px; font-size: 0.94rem; }
.tw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tw-contact-form .tw-field { margin-bottom: 16px; }
.tw-contact-form select.tw-input { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
/* SINGLE — sidebar layout */
.tw-single-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; }
.tw-single-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; align-self: start; }
.tw-widget {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 24px;
}
.tw-widget-title {
color: #fff;
font-size: 1rem;
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 8px;
}
.tw-widget-title i { color: var(--tw-gold); }
.tw-widget-book-demo p { color: var(--tw-text-soft); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5; }
.tw-latest-list { list-style: none; padding: 0; margin: 0; }
.tw-latest-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-latest-item:last-child { border-bottom: 0; }
.tw-latest-thumb {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background: rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
}
.tw-latest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tw-latest-thumb i { color: var(--tw-text-mute); font-size: 1.2rem; }
.tw-latest-body { flex: 1; min-width: 0; }
.tw-latest-title { color: #fff; font-weight: 600; font-size: 0.88rem; line-height: 1.4; display: block; margin-bottom: 4px; }
.tw-latest-title:hover { color: var(--tw-gold); }
.tw-latest-meta { color: var(--tw-text-mute); font-size: 0.78rem; }
/* SINGLE — banner */
.tw-single-banner-wrap { padding-bottom: 12px; }
.tw-single-header { padding-bottom: 32px; }
/* SINGLE — content */
.tw-single-content { line-height: 1.8; color: var(--tw-text-soft); font-size: 1rem; }
.tw-single-content > * { max-width: 760px; }
.tw-single-content p { margin: 0 0 1.4em; }
.tw-single-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.2em 0; }
.tw-single-content ul, .tw-single-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.tw-single-content li { margin-bottom: 0.4em; }
.tw-post-tags { margin: 32px 0 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.tw-post-tags i { color: var(--tw-gold); margin-right: 8px; }
.tw-tag-pill {
display: inline-block;
padding: 4px 12px;
margin: 0 6px 6px 0;
background: rgba(201,168,76,0.1);
border: 1px solid rgba(201,168,76,0.3);
border-radius: 20px;
color: var(--tw-gold);
font-size: 0.82rem;
text-decoration: none;
}
.tw-tag-pill:hover { background: var(--tw-gold); color: var(--tw-navy); }
.tw-post-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 24px 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-top: 24px;
flex-wrap: wrap;
}
.tw-post-author { display: flex; align-items: center; gap: 14px; }
.tw-post-author img { border-radius: 50%; }
.tw-author-name { color: #fff; font-weight: 600; }
.tw-author-bio { color: var(--tw-text-soft); font-size: 0.85rem; }
.tw-post-share { display: flex; align-items: center; gap: 10px; color: var(--tw-text-soft); font-size: 0.9rem; }
.tw-post-share a {
width: 34px; height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.tw-post-share a:hover { background: var(--tw-gold); color: var(--tw-navy); }
.tw-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.tw-post-nav-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 18px 22px;
color: var(--tw-text-soft);
transition: all 0.25s;
display: block;
text-decoration: none;
}
.tw-post-nav-item:hover { border-color: var(--tw-gold); transform: translateY(-2px); }
.tw-post-nav-item.is-next { text-align: right; }
.tw-post-nav-item .tw-pn-arrow { color: var(--tw-gold); font-size: 0.9rem; }
.tw-post-nav-item .tw-pn-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tw-text-mute); margin: 4px 0; }
.tw-post-nav-item .tw-pn-title { color: #fff; font-weight: 600; display: block; }
/* EMPTY STATE */
.tw-empty-state {
text-align: center;
padding: 80px 20px;
color: var(--tw-text-soft);
}
.tw-empty-state i { font-size: 3rem; color: var(--tw-gold); margin-bottom: 20px; opacity: 0.5; }
.tw-empty-state h3 { color: #fff; margin: 0 0 8px; }
/* 404 */
.tw-404-section { padding: 96px 0; }
.tw-404-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.tw-404-num {
font-size: clamp(5rem, 14vw, 9rem);
font-weight: 800;
line-height: 1;
margin-bottom: 20px;
}
.tw-404-num span { color: #fff; }
.tw-404-num span.gold { color: var(--tw-gold); }
.tw-404-search { display: flex; gap: 8px; max-width: 480px; margin: 32px auto 0; }
.tw-404-search .tw-input { flex: 1; }
/* BLOG SECTION ON HOME */
.tw-blog-home-section { background: rgba(255,255,255,0.01); }
/* RESPONSIVE */
@media (max-width: 980px) {
.tw-reasons-grid,
.tw-moat-grid,
.tw-regimes-grid,
.tw-integrations-grid,
.tw-roadmap { grid-template-columns: repeat(2, 1fr); }
.tw-process-grid,
.tw-pillars-grid,
.tw-stats-row { grid-template-columns: repeat(2, 1fr); }
.tw-zero-grid,
.tw-feature-grid,
.tw-security-grid,
.tw-mv-grid,
.tw-cap-grid,
.tw-why-grid { grid-template-columns: 1fr; gap: 32px; }
.tw-partner-grid { grid-template-columns: 1fr; }
.tw-contact-grid { grid-template-columns: 1fr; }
.tw-single-layout { grid-template-columns: 1fr; }
.tw-single-sidebar { position: relative; top: auto; }
.tw-vs-row { grid-template-columns: 1fr 1fr 1.4fr; font-size: 0.85rem; }
.tw-trusted-card { padding: 32px 24px; }
}
@media (max-width: 640px) {
.tw-reasons-grid,
.tw-moat-grid,
.tw-regimes-grid,
.tw-integrations-grid,
.tw-process-grid,
.tw-pillars-grid,
.tw-stats-row,
.tw-roadmap,
.tw-why-stats { grid-template-columns: 1fr; }
.tw-field-row { grid-template-columns: 1fr; }
.tw-post-nav { grid-template-columns: 1fr; }
.tw-vs-row { grid-template-columns: 1fr; }
.tw-vs-row > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
.tw-form-card, .tw-mv-card, .tw-partner-tile { padding: 28px 22px; }
}
/* =================================================================
* v1.1 PATCH — applied changes per spec update (Apr 30, 2026)
* 1. Brand: stronger logo + brand name highlight
* 2. Hero: 2-column layout (text L, stats R), button order swap,
* stats panel with random pop-in, demo form swaps with stats
* 3. Feature strip: remove card/shadow look (clean inline row)
* 4. Services title: tighter font so it fits on a single line
* 5. Service cards: icon + title side-by-side (not stacked)
* 6. Blog: subhead fits on a single line
* 7. Blog grid: single column on mobile (≤768px)
* ================================================================= */
/* ----- 1. BRAND highlight ----- */
.tw-brand {
gap: 6px;
padding: 4px 12px 4px 4px;
border-radius: 14px;
background: transparent;
border: 0;
transition: transform .2s ease;
position: relative;
}
.tw-brand::before {
/* Bright gold glow behind the logo */
content: '';
position: absolute;
left: -2px; top: 50%;
width: 80px; height: 80px;
transform: translateY(-50%);
background: radial-gradient(circle, rgba(201,168,76,0.55) 0%, rgba(201,168,76,0.25) 35%, transparent 70%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.tw-brand img,
.tw-brand-name {
position: relative;
z-index: 1;
}
.tw-brand img {
height: 44px;
width: 44px;
filter:
drop-shadow(0 0 12px rgba(201,168,76,0.85))
drop-shadow(0 0 24px rgba(201,168,76,0.5))
drop-shadow(0 2px 4px rgba(0,0,0,0.4));
transition: filter .25s ease, transform .2s ease;
}
.tw-brand:hover img { transform: scale(1.05); }
.tw-brand-name {
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(95deg, #ffffff 0%, #fff 35%, var(--tw-gold-bright) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 24px rgba(201,168,76,0.18);
}
.tw-brand-name .tm {
-webkit-text-fill-color: var(--tw-gold);
color: var(--tw-gold);
font-size: 0.7em;
margin-left: 2px;
font-weight: 700;
}
/* ----- 2. HERO 2-column layout ----- */
.tw-hero {
padding: 150px 0 90px;
text-align: left;
}
.tw-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
}
.tw-hero-left { max-width: 620px; }
.tw-hero-pill { margin-bottom: 22px; }
.tw-hero h1 {
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.1;
margin-bottom: 22px;
}
.tw-hero p.lead {
margin: 0 0 32px;
max-width: 580px;
font-size: clamp(0.98rem, 1.2vw, 1.1rem);
line-height: 1.7;
}
.tw-hero .tw-cta-row { justify-content: flex-start; }
/* Right column: stats panel ↔ demo form swap */
.tw-hero-right {
position: relative;
min-height: 520px;
}
.tw-hero-right .tw-demo-wrapper {
max-width: none;
margin: 0;
max-height: 0;
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity .45s ease, transform .45s ease, max-height .55s ease;
overflow: hidden;
}
.tw-hero-right .tw-demo-wrapper.is-open {
max-height: 1800px;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.tw-hero-right .tw-demo-card {
background: linear-gradient(160deg, var(--tw-surface-2) 0%, var(--tw-navy-darker) 100%);
}
.tw-hero-right.is-form-open .tw-hero-stats {
opacity: 0;
transform: translateY(-12px) scale(0.98);
pointer-events: none;
max-height: 0;
margin-top: 0;
overflow: hidden;
transition: opacity .35s ease, transform .35s ease, max-height .45s ease;
}
/* Stats panel */
.tw-hero-stats {
background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(10,22,40,0.5) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 28px;
box-shadow: 0 12px 40px -16px rgba(0,0,0,0.5);
transition: opacity .35s ease, transform .35s ease, max-height .45s ease;
}
.tw-hero-stats-head { margin-bottom: 14px; }
.tw-hero-stats-head + .tw-stat-pop-grid { margin-bottom: 4px; }
.tw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tw-eyebrow-red { color: var(--tw-red-bright); }
.tw-eyebrow-gold { color: var(--tw-gold-bright); }
.tw-hero-stats-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0 18px;
color: var(--tw-text-mute);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tw-hero-stats-divider::before,
.tw-hero-stats-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent);
}
.tw-hero-stats-divider span { color: var(--tw-gold); font-weight: 700; }
/* Pop-in stat cards */
.tw-stat-pop-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.tw-stat-pop {
background: rgba(10,22,40,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 16px 14px;
opacity: 0;
transform: translateY(18px) scale(0.92);
transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.tw-stat-pop.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.tw-stat-pop:hover { border-color: rgba(201,168,76,0.35); }
.tw-stat-pop.is-pain { border-color: rgba(255,87,51,0.18); }
.tw-stat-pop.is-pain:hover { border-color: rgba(255,87,51,0.5); }
.tw-stat-pop-num {
font-size: 1.55rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 8px;
display: flex;
align-items: baseline;
gap: 2px;
flex-wrap: wrap;
}
.tw-stat-pop.is-pain .tw-stat-pop-num { color: var(--tw-red-bright); }
.tw-stat-pop.is-win .tw-stat-pop-num { color: var(--tw-gold-bright); }
.tw-stat-pop-suffix {
font-size: 0.65em;
font-weight: 700;
margin-left: 2px;
color: inherit;
opacity: 0.85;
}
.tw-stat-pop-prefix { color: inherit; }
.tw-stat-pop-label {
font-size: 0.78rem;
color: var(--tw-text-soft);
line-height: 1.4;
}
/* Override hero ::before glow to feel right with the right-side panel */
.tw-hero::before {
left: 75%;
top: -150px;
width: 900px;
height: 600px;
}
/* Tablet / Mobile: stack hero columns */
@media (max-width: 980px) {
.tw-hero { padding: 120px 0 60px; text-align: center; }
.tw-hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.tw-hero-left { max-width: none; margin: 0 auto; }
.tw-hero p.lead { margin-left: auto; margin-right: auto; }
.tw-hero .tw-cta-row { justify-content: center; }
.tw-hero-right { min-height: 0; }
.tw-hero::before { left: 50%; top: -200px; }
}
@media (max-width: 640px) {
.tw-stat-pop-grid {
grid-template-columns: 1fr 1fr;
}
.tw-stat-pop-num { font-size: 1.35rem; }
.tw-hero-stats { padding: 22px 18px; }
.tw-hero-right .tw-demo-card { padding: 22px 18px; }
}
/* ----- 3. FEATURE STRIP — remove the card / shadow look ----- */
.tw-feature-strip {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
padding-top: 24px;
padding-left: 0;
margin-top: 28px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-wrap: wrap;
gap: 32px;
list-style: none;
}
/* ----- 4. SERVICES section title — fit on a single line ----- */
.tw-section-title.tw-section-title-fit {
font-size: clamp(1.15rem, 2.4vw, 1.75rem);
letter-spacing: -0.015em;
line-height: 1.3;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1100px) {
.tw-section-title.tw-section-title-fit {
white-space: nowrap;
}
}
/* ----- 5. SERVICE cards — icon and title on the same row ----- */
.tw-service-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.tw-service-head .tw-service-icon {
margin-bottom: 0;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
font-size: 1.2rem;
}
.tw-service-head h3 {
margin: 0;
font-size: 1.18rem;
line-height: 1.25;
}
/* ----- 6. BLOG subhead — fit on a single line ----- */
.tw-section-sub.tw-section-sub-fit {
font-size: clamp(0.78rem, 1.05vw, 0.95rem);
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1100px) {
.tw-section-sub.tw-section-sub-fit {
white-space: nowrap;
}
}
@media (max-width: 540px) {
.tw-section-sub.tw-section-sub-fit {
font-size: 0.85rem;
line-height: 1.5;
}
}
/* ----- 7. BLOG grid — 1 column on phones, 2 on tablets, 3 on desktop ----- */
@media (max-width: 1000px) { .tw-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .tw-blog-grid { grid-template-columns: 1fr; gap: 22px; } }
/* =================================================================
* v1.2 PATCH — SEO / educational content blocks
* ================================================================= */
/* Section eyebrow when used as a heading prefix on internal pages */
.tw-section-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: var(--tw-gold-soft);
border: 1px solid rgba(201,168,76,0.28);
color: var(--tw-gold-bright);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 18px;
}
/* Explainer cards (FAQ-style two-column on desktop, single-col mobile) */
.tw-explainer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
@media (max-width: 880px) { .tw-explainer-grid { grid-template-columns: 1fr; } }
.tw-explainer-card {
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
padding: 28px 26px;
transition: border-color .25s ease, transform .2s ease;
}
.tw-explainer-card:hover {
border-color: var(--tw-card-border-hover);
transform: translateY(-3px);
}
.tw-explainer-card h3 {
margin: 0 0 12px;
color: #fff;
font-size: 1.1rem;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.tw-explainer-card h3 .tw-tag {
font-size: 0.7rem;
font-weight: 700;
color: var(--tw-gold);
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--tw-gold-soft);
padding: 3px 8px;
border-radius: 6px;
}
.tw-explainer-card p {
margin: 0 0 10px;
color: var(--tw-text-soft);
font-size: 0.94rem;
line-height: 1.7;
}
.tw-explainer-card p:last-child { margin-bottom: 0; }
.tw-explainer-card strong { color: var(--tw-text); font-weight: 600; }
.tw-explainer-card .tw-related {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
color: var(--tw-text-mute);
font-size: 0.78rem;
line-height: 1.6;
}
.tw-explainer-card .tw-related b {
color: var(--tw-gold);
font-weight: 700;
margin-right: 4px;
}
/* Glossary list — definition-style */
.tw-glossary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 32px;
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 18px;
padding: 32px;
}
@media (max-width: 720px) { .tw-glossary { grid-template-columns: 1fr; padding: 24px 20px; } }
.tw-glossary dt {
color: var(--tw-gold);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
margin-bottom: 4px;
}
.tw-glossary dd {
margin: 0 0 8px;
color: var(--tw-text-soft);
font-size: 0.9rem;
line-height: 1.6;
}
/* Keyword / topic strip — pill-style related terms */
.tw-topic-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 22px 24px;
background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(201,168,76,0.15);
border-radius: 16px;
}
.tw-topic-strip .tw-topic-label {
width: 100%;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tw-gold-bright);
margin-bottom: 4px;
}
.tw-topic-strip .tw-topic {
display: inline-block;
padding: 6px 12px;
background: rgba(10,22,40,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
color: var(--tw-text-soft);
font-size: 0.8rem;
font-weight: 500;
transition: all .2s ease;
}
.tw-topic-strip .tw-topic:hover {
color: var(--tw-gold-bright);
border-color: rgba(201,168,76,0.35);
}
/* Inline prose paragraphs on long-form sections */
.tw-prose {
max-width: 880px;
margin: 0 auto;
color: var(--tw-text-soft);
line-height: 1.8;
font-size: 1rem;
}
.tw-prose p { margin: 0 0 16px; }
.tw-prose h3 {
color: #fff;
margin: 28px 0 12px;
font-size: 1.2rem;
}
.tw-prose strong { color: var(--tw-text); font-weight: 600; }
.tw-prose code {
background: rgba(201,168,76,0.1);
color: var(--tw-gold-bright);
padding: 1px 6px;
border-radius: 4px;
font-size: 0.92em;
font-family: 'Menlo', 'Monaco', monospace;
}
/* =================================================================
* v1.3 PATCH — "What we cover" 2-column layout
* ================================================================= */
.tw-cover-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.tw-cover-prose {
color: var(--tw-text-soft);
font-size: 0.98rem;
line-height: 1.75;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tw-cover-prose p { margin: 0 0 16px; }
.tw-cover-prose p:last-child { margin-bottom: 0; }
.tw-cover-prose strong { color: var(--tw-text); font-weight: 600; }
.tw-cover-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.tw-cover-card {
display: flex;
gap: 14px;
padding: 18px 16px;
background: var(--tw-surface-2);
border: 1px solid var(--tw-card-border);
border-radius: 14px;
transition: border-color .25s ease, transform .2s ease, background .25s ease;
align-items: flex-start;
}
.tw-cover-card:hover {
border-color: var(--tw-card-border-hover);
transform: translateY(-2px);
background: linear-gradient(160deg, var(--tw-surface-2) 0%, var(--tw-navy-darker) 100%);
}
.tw-cover-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
background: var(--tw-gold-soft);
color: var(--tw-gold);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
}
.tw-cover-card-body { flex: 1; min-width: 0; }
.tw-cover-card h4 {
margin: 0 0 4px;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.tw-cover-card p {
margin: 0;
color: var(--tw-text-soft);
font-size: 0.82rem;
line-height: 1.5;
}
@media (max-width: 980px) {
.tw-cover-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
@media (max-width: 540px) {
.tw-cover-cards { grid-template-columns: 1fr; }
}
/* =================================================================
* v1.1.0 — Website.pdf revisions (icon+title inline, 2-col MOAT,
* red-orange text, simplified contact card, partner tile inline).
* ================================================================= */
/* Red-orange text token (used in /about hero subtitle) */
.tw-red-text { color: var(--tw-red); }
/* Reduced gap between Section 1 and Section 2 of /about */
.tw-section-tight-bottom { padding-bottom: 48px; }
.tw-section-tight-top { padding-top: 48px; }
/* /about — Reason cards inline (icon+title in a flex row) */
.tw-reason-card-inline .tw-reason-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.tw-reason-card-inline .tw-reason-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-reason-card-inline h3 { margin: 0; }
/* /about — MOAT 2-column layout (paragraph left / cards stacked right) */
.tw-moat-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.tw-moat-layout .tw-moat-text {
max-width: none;
margin: 0;
text-align: left;
}
.tw-moat-grid-stacked {
grid-template-columns: 1fr;
gap: 20px;
}
.tw-moat-card-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.tw-moat-card-head .tw-moat-num {
margin-bottom: 0;
font-size: 1.8rem;
}
.tw-moat-card-head h3 { margin: 0; }
@media (max-width: 900px) {
.tw-moat-layout {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* /api-service & /bulk-classification — Service card inline icon+title */
.tw-service-card-inline .tw-service-card-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.tw-service-card-inline .tw-service-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-service-card-inline h3 { margin: 0; }
/* /bulk-classification — Process step inline number+title */
.tw-process-step-inline .tw-step-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.tw-process-step-inline .tw-step-num {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-process-step-inline h3 { margin: 0; }
/* /export-control — Regime card inline flag-icon+title */
.tw-regime-card-inline .tw-regime-card-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.tw-regime-card-inline .tw-regime-flag {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-regime-card-inline h3 { margin: 0; }
/* /strategic-vision — Mission/Vision card inline icon+title */
.tw-mv-card-inline .tw-mv-card-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.tw-mv-card-inline .tw-mv-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-mv-card-inline h2 { margin: 0; }
/* /price — Partner tile inline icon+title */
.tw-partner-tile-inline .tw-partner-tile-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.tw-partner-tile-inline .tw-partner-icon {
margin-bottom: 0;
flex-shrink: 0;
}
.tw-partner-tile-inline h3 { margin: 0; }
/* /contact — Single consolidated info card (left side) */
.tw-contact-detail-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 28px;
}
.tw-contact-detail-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.tw-contact-detail-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--tw-gold-soft);
color: var(--tw-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.tw-contact-detail-body { flex: 1; min-width: 0; }
.tw-contact-detail-body h3 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 700;
color: #fff;
}
.tw-contact-detail-body p {
margin: 0 0 8px;
color: var(--tw-text-soft);
font-size: 0.92rem;
line-height: 1.55;
}
.tw-contact-detail-body p:last-child { margin-bottom: 0; }
.tw-contact-detail-body a { color: var(--tw-gold); }
.tw-contact-detail-body a:hover { color: var(--tw-gold-bright); }
.tw-contact-detail-body .tw-btn { margin-top: 4px; }
.tw-contact-detail-body .tw-socials { margin-top: 4px; }
.tw-contact-detail-body .tw-contact-address { margin: 0 0 8px; font-size: 0.9rem; }
.tw-contact-detail-body .tw-contact-address strong {
color: var(--tw-gold);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tw-contact-detail-body .tw-contact-address-text {
color: var(--tw-text-soft);
font-size: 0.92rem;
}
.tw-contact-divider {
height: 1px;
background: var(--tw-navy-line);
margin: 22px 0;
}
/* ================================================================
* v1.2 ADDITIONS — TariffWolf Theme Update
* ================================================================ */
/* /about — MOAT 3 emoji-keypoints (top), then centered prose paragraph */
.tw-moat-keypoints {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 36px;
align-items: stretch;
}
.tw-moat-keypoint {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(201,168,76,0.25);
border-radius: 18px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .25s, transform .25s;
}
.tw-moat-keypoint:hover {
border-color: var(--tw-gold);
transform: translateY(-2px);
}
.tw-moat-keypoint-head {
display: flex;
align-items: center;
gap: 14px;
}
.tw-moat-keypoint-emoji {
font-size: 1.7rem;
line-height: 1;
flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(201,168,76,0.25));
}
.tw-moat-keypoint h3 {
color: #fff;
font-size: 1.05rem;
margin: 0;
line-height: 1.3;
}
.tw-moat-keypoint p {
color: var(--tw-text-soft);
margin: 0;
font-size: 0.95rem;
line-height: 1.65;
}
.tw-moat-prose {
max-width: 980px;
margin: 0 auto;
color: var(--tw-text-soft);
line-height: 1.85;
font-size: 1.02rem;
text-align: justify;
text-justify: inter-word;
}
.tw-moat-prose p { margin: 0; }
@media (max-width: 900px) {
.tw-moat-keypoints { grid-template-columns: 1fr; }
.tw-moat-prose { text-align: left; }
}
/* /strategic-vision — single centered Vision card */
.tw-mv-grid-single {
display: grid;
grid-template-columns: 1fr;
max-width: 760px;
margin: 0 auto;
}
.tw-mv-card-center {
text-align: center;
align-items: center;
}
.tw-mv-card-center .tw-mv-card-head {
justify-content: center;
}
.tw-mv-card-center .tw-mv-icon {
margin: 0 auto 18px;
}
.tw-mv-card-center .tw-check-list {
display: inline-block;
text-align: left;
margin-top: 18px;
}
/* /export-control — accent subhead and red-text utility */
.tw-page-sub-accent {
font-size: 1.35rem;
font-weight: 600;
color: #fff;
max-width: 880px;
margin: 0 auto 24px;
}
.tw-page-sub-accent .tw-red-text {
color: var(--tw-red);
}
.tw-red-text { color: var(--tw-red); }
/* /api-service — Models pricing grid */
.tw-api-models-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin: 0 0 40px;
}
.tw-api-model-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 26px 22px 30px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tw-api-model-card:hover {
border-color: var(--tw-gold);
transform: translateY(-3px);
box-shadow: var(--tw-shadow-gold);
}
.tw-api-model-card.is-featured {
border-color: rgba(201,168,76,0.55);
background: linear-gradient(160deg, rgba(201,168,76,0.10), rgba(255,255,255,0.01));
}
.tw-api-model-card.is-featured::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(201,168,76,0.18), transparent 60%);
pointer-events: none;
}
.tw-api-model-head {
display: flex;
align-items: center;
gap: 14px;
position: relative;
}
.tw-api-model-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, var(--tw-gold), var(--tw-gold-deep));
color: var(--tw-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
}
.tw-api-model-card h3 { margin: 0; }
.tw-api-model-id {
font-family: 'Menlo', 'Monaco', 'SF Mono', 'Consolas', monospace;
color: #fff;
font-size: 0.98rem;
background: transparent;
padding: 0;
font-weight: 700;
letter-spacing: -0.01em;
}
.tw-api-model-tag {
display: inline-block;
margin-top: 4px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
}
.tw-api-model-tag-1 { background: rgba(255,255,255,0.06); color: var(--tw-text-soft); }
.tw-api-model-tag-2 { background: rgba(201,168,76,0.18); color: var(--tw-gold); }
.tw-api-model-tag-3 { background: rgba(255,87,51,0.15); color: var(--tw-red); }
.tw-api-model-tag-4 { background: linear-gradient(135deg, var(--tw-gold), var(--tw-gold-bright)); color: var(--tw-navy); }
.tw-api-model-desc {
color: var(--tw-text-soft);
font-size: 0.92rem;
line-height: 1.6;
margin: 0;
flex: 1;
position: relative;
}
.tw-api-model-price {
border-top: 1px dashed rgba(255,255,255,0.08);
padding-top: 14px;
margin-top: 4px;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
position: relative;
}
.tw-api-model-price-num {
font-size: 2rem;
font-weight: 800;
color: var(--tw-gold);
line-height: 1;
letter-spacing: -0.02em;
}
.tw-api-model-price-unit {
font-size: 0.78rem;
color: var(--tw-text-mute);
font-weight: 500;
}
/* /api-service — Export Control callout */
.tw-api-export-callout {
display: flex;
gap: 22px;
align-items: flex-start;
background: linear-gradient(160deg, rgba(255,87,51,0.06), rgba(255,255,255,0.01));
border: 1px solid rgba(255,87,51,0.22);
border-radius: 16px;
padding: 26px 28px;
}
.tw-api-export-callout-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--tw-red), var(--tw-red-bright));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.tw-api-export-callout-body h3 {
margin: 0 0 8px;
color: #fff;
font-size: 1.15rem;
}
.tw-api-export-callout-body p {
margin: 0;
color: var(--tw-text-soft);
line-height: 1.7;
font-size: 0.96rem;
}
/* /api-service — Apply form */
.tw-api-apply-section { background: rgba(201,168,76,0.03); }
.tw-api-apply-card {
max-width: 760px;
margin: 0 auto;
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(201,168,76,0.28);
border-radius: 22px;
padding: 44px 40px;
}
.tw-api-apply-head { text-align: center; margin-bottom: 30px; }
.tw-api-apply-head h2 { margin: 12px 0 10px; font-size: 1.9rem; }
.tw-api-apply-head p { color: var(--tw-text-soft); margin: 0; }
.tw-api-apply-form .tw-actions {
margin-top: 22px;
display: flex;
align-items: center;
gap: 14px;
}
@media (max-width: 700px) {
.tw-api-apply-card { padding: 32px 22px; }
}
/* Responsive grids */
@media (max-width: 1100px) {
.tw-api-models-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.tw-api-models-grid { grid-template-columns: 1fr; }
.tw-api-export-callout { flex-direction: column; gap: 14px; }
}
/* /contact — black button variant for the Cal.com card CTA */
.tw-btn.tw-btn-black,
.tw-btn.tw-btn-primary.tw-btn-black {
color: #000 !important;
}
.tw-btn.tw-btn-black:hover,
.tw-btn.tw-btn-primary.tw-btn-black:hover {
color: #000 !important;
}
.tw-btn.tw-btn-black i { color: #000 !important; }
/* /api-service — code block: allow long descriptions to wrap nicely */
.tw-code-block {
white-space: pre-wrap;
word-break: break-word;
}
/* ================================================================
* v1.3 ADDITIONS — TariffWolf Theme Update
* ================================================================ */
/* Header — calendar social icon (same look as LinkedIn / X) */
.tw-socials .tw-social-cal { /* matches existing .tw-socials a styles */ }
/* /home — hero stat numeric prefix (e.g. ~$ ) sits inline with the big number */
.tw-stat-pop .tw-stat-pop-prefix {
font-size: 0.75em;
font-weight: 700;
margin-right: 1px;
letter-spacing: -0.02em;
color: inherit;
}
/* /export-control — ECCN.help logo button (gold ECCN, red dot, white help) */
.tw-eccn-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 14px 28px;
background: #0a1628;
color: #fff;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
font-family: 'Inter', 'Segoe UI', sans-serif;
transition: transform .2s, border-color .2s, box-shadow .2s;
white-space: nowrap;
min-height: 50px;
box-sizing: border-box;
}
.tw-eccn-help-btn:hover {
transform: translateY(-1px);
border-color: var(--tw-gold);
box-shadow: var(--tw-shadow-gold);
}
.tw-eccn-help-prefix { color: var(--tw-gold); letter-spacing: 0.04em; }
.tw-eccn-help-dot { color: var(--tw-red); margin: 0 1px; }
.tw-eccn-help-suffix { color: #fff; letter-spacing: 0.01em; }
/* /export-control — Intelligent Platform section (left description / right video) */
.tw-eccn-platform-section { background: rgba(201,168,76,0.02); }
.tw-eccn-platform-grid {
gap: 48px;
align-items: center;
}
.tw-eccn-platform-left .tw-section-title { text-align: left; }
.tw-eccn-platform-lead {
color: var(--tw-text-soft);
font-size: 1.05rem;
line-height: 1.7;
margin: 0 0 22px;
}
.tw-eccn-secure-callout {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(160deg, rgba(34, 197, 94, 0.08), rgba(255,255,255,0.01));
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 12px;
padding: 16px 18px;
margin: 0 0 22px;
}
.tw-eccn-secure-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.95rem;
}
.tw-eccn-secure-callout h4 {
margin: 0 0 4px;
color: #22c55e;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.tw-eccn-secure-callout p {
margin: 0;
color: var(--tw-text-soft);
font-size: 0.88rem;
line-height: 1.55;
}
.tw-eccn-feature-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
}
.tw-eccn-feature-list li {
display: flex;
align-items: center;
gap: 10px;
color: var(--tw-text-soft);
font-size: 0.92rem;
line-height: 1.4;
}
.tw-eccn-feature-list li i {
color: var(--tw-gold);
font-size: 0.85rem;
width: 16px;
flex-shrink: 0;
text-align: center;
}
@media (max-width: 900px) {
.tw-eccn-feature-list { grid-template-columns: 1fr; }
}
/* /export-control + /api-service — shared video card */
.tw-video-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.tw-video-card-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tw-video-card-brand {
font-weight: 700;
font-size: 0.95rem;
color: #fff;
letter-spacing: -0.01em;
}
.tw-video-card-version {
font-size: 0.65rem;
font-weight: 800;
color: var(--tw-gold);
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 3px 8px;
border: 1px solid rgba(201,168,76,0.4);
border-radius: 4px;
}
.tw-video-embed {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
width: 100%;
}
.tw-video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.tw-video-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: linear-gradient(135deg, #0a1628 0%, #142847 100%);
padding: 24px;
text-align: center;
}
.tw-video-placeholder-title {
color: #fff;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
}
.tw-video-play {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--tw-gold), var(--tw-gold-deep));
border: 0;
color: var(--tw-navy);
font-size: 1.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding-left: 4px; /* visually center the triangle */
transition: transform .2s, box-shadow .2s;
box-shadow: 0 8px 24px rgba(201,168,76,0.4);
}
.tw-video-play:hover {
transform: scale(1.08);
box-shadow: 0 12px 32px rgba(201,168,76,0.55);
}
.tw-video-placeholder-meta {
color: var(--tw-text-soft);
font-size: 0.82rem;
margin: 0;
line-height: 1.4;
}
.tw-video-placeholder-meta.tw-video-placeholder-sub { color: var(--tw-text-mute); font-size: 0.78rem; }
.tw-video-card-foot {
padding: 12px 18px;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
color: var(--tw-text-soft);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 10px;
}
.tw-video-card-foot i { color: var(--tw-gold); }
/* /export-control — Coverage 3-column grid + Coming Soon block */
.tw-regimes-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 900px) { .tw-regimes-grid-3 { grid-template-columns: 1fr; } }
.tw-coming-soon-block { margin-top: 56px; }
.tw-coming-soon-head { text-align: center; margin: 0 0 24px; }
.tw-coming-soon-title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin: 8px 0 0;
}
.tw-regimes-grid-soon .tw-regime-card-soon {
position: relative;
opacity: 0.85;
border-style: dashed !important;
border-color: rgba(201,168,76,0.3) !important;
}
.tw-regimes-grid-soon .tw-regime-card-soon::after {
content: 'COMING SOON';
position: absolute;
top: 12px;
right: 12px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.15em;
color: var(--tw-gold);
background: rgba(201,168,76,0.12);
padding: 3px 7px;
border-radius: 4px;
}
.tw-regime-flag-emoji {
font-size: 1.7rem !important;
line-height: 1 !important;
background: transparent !important;
border: 0 !important;
width: auto !important;
height: auto !important;
color: inherit !important;
box-shadow: none !important;
}
/* /api-service — Video tutorial section */
.tw-api-video-section { background: rgba(201,168,76,0.02); }
.tw-api-video-grid { gap: 48px; align-items: center; }
.tw-api-video-left .tw-section-title { text-align: left; }
/* /bulk-classification — two service cards (In-House vs AI) */
.tw-bulk-services-grid { gap: 28px; align-items: stretch; }
.tw-bulk-service-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.09);
border-radius: 18px;
padding: 30px 28px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tw-bulk-service-card:hover {
border-color: var(--tw-gold);
transform: translateY(-3px);
box-shadow: var(--tw-shadow-gold);
}
.tw-bulk-service-card-ai {
border-color: rgba(201,168,76,0.3);
background: linear-gradient(160deg, rgba(201,168,76,0.06), rgba(255,255,255,0.01));
}
.tw-bulk-service-head {
display: flex;
align-items: flex-start;
gap: 16px;
}
.tw-bulk-service-icon {
width: 52px;
height: 52px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--tw-gold), var(--tw-gold-deep));
color: var(--tw-navy);
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.tw-bulk-service-icon.is-ai {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
}
.tw-bulk-service-card h3 {
margin: 4px 0 0;
color: #fff;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.tw-bulk-service-tag {
display: inline-block;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 4px;
}
.tw-bulk-service-tag-expert {
background: rgba(201,168,76,0.18);
color: var(--tw-gold);
}
.tw-bulk-service-tag-ai {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
.tw-bulk-service-lead {
color: var(--tw-text-soft);
line-height: 1.65;
font-size: 0.96rem;
margin: 0;
}
.tw-bulk-service-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.tw-bulk-service-list li {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--tw-text-soft);
font-size: 0.92rem;
line-height: 1.55;
}
.tw-bulk-service-list li i {
color: var(--tw-gold);
font-size: 0.95rem;
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(201,168,76,0.10);
border-radius: 6px;
margin-top: 1px;
}
.tw-bulk-service-card-ai .tw-bulk-service-list li i {
color: #818cf8;
background: rgba(99, 102, 241, 0.12);
}
.tw-bulk-service-list li strong {
color: #fff;
font-weight: 600;
}
/* /contact — first section needs less top padding now that the page header is gone */
.tw-section-tight-top { padding-top: 64px; }
@media (max-width: 700px) { .tw-section-tight-top { padding-top: 40px; } }
/* footer — centered single-row copyright (removes the right-side links) */
.tw-footer-bar.tw-footer-bar-center {
justify-content: center;
text-align: center;
}
.tw-footer-bar.tw-footer-bar-center .tw-footer-bar-links { display: none; }
/* v1.3.1 — HTML5