:root { /* TrechPro brand colors inspired by the actual logo */ --blue: #2f6bff; --blue-deep: #1f4fd1; --blue-soft: #eaf1ff; --cyan: #16b9d8; --cyan-deep: #0f8faa; --cyan-soft: #e9fbff; --gold: #f4b400; --gold-deep: #e39a00; --gold-soft: #fff7df; --bg: #ffffff; --bg-soft: #f7f9fc; --bg-soft2: #eef4fb; --surface: #ffffff; --text: #111827; --text-soft: #1c2540; --muted: #5b6475; --line: #e6ebf2; --line-strong: #d8e2ee; --shadow: 0 18px 60px rgba(15, 23, 42, 0.10); --shadow2: 0 10px 28px rgba(15, 23, 42, 0.08); --shadow3: 0 24px 70px rgba(7, 18, 40, 0.20); --radius: 18px; --radius2: 28px; --radius3: 999px; --container: 1180px; --brand-grad: linear-gradient(135deg, var(--blue-deep), var(--blue), var(--cyan)); --brand-grad-soft: linear-gradient(135deg, rgba(31, 79, 209, 0.10), rgba(47, 107, 255, 0.08), rgba(22, 185, 216, 0.08)); --accent-grad: linear-gradient(135deg, var(--gold-deep), var(--gold)); } /* Reset */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-padding-top: 92px; scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; } a { color: inherit; text-decoration: none; } .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; } /* Selection */ ::selection { background: rgba(47, 107, 255, 0.16); color: var(--text); } /* NAV */ header.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(230, 235, 242, 0.9); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 88px; } .brand { display: flex; align-items: center; flex: 0 0 auto; min-width: auto; } .logo-img { width: 210px; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; display: block; } nav.links { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-weight: 500; font-size: 14px; } nav.links a { padding: 11px 14px; border-radius: 12px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } nav.links a:hover { background: rgba(47, 107, 255, 0.08); color: var(--blue-deep); transform: translateY(-1px); } .nav-actions { display: flex; gap: 10px; align-items: center; } /* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 18% 20%, rgba(255, 221, 64, 0.22), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(255, 196, 0, 0.20), transparent 24%),
    radial-gradient(circle at 72% 78%, rgba(230, 145, 20, 0.18), transparent 24%),
    linear-gradient(135deg, #fff27a 0%, #ffd83a 26%, #f5b21a 58%, #d98a12 100%); color: var(--text-soft); font-weight: 600; font-size: 14px; line-height: 1; box-shadow: var(--shadow2); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); border-color: rgba(47, 107, 255, 0.22); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10); } .btn.primary { border: none; background: var(--brand-grad); color: #fff; box-shadow: 0 16px 36px rgba(31, 79, 209, 0.28); } 

.btn.primary:hover { filter: saturate(1.04) brightness(1.03); box-shadow: 0 18px 38px rgba(31, 79, 209, 0.34); } a:focus-visible, button:focus-visible { outline: 3px solid rgba(47, 107, 255, 0.24); outline-offset: 3px; border-radius: 14px; } /* HERO */ .hero { position: relative; min-height: clamp(580px, 80vh, 860px); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: #081120; } .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); filter: saturate(1.04) contrast(1.02); } 
.hero .overlay { position: absolute; inset: 0; background:
    radial-gradient(circle at 14% 20%, rgba(47, 107, 255, 0.34), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(25, 167, 206, 0.24), transparent 26%),
    radial-gradient(circle at 74% 78%, rgba(224, 168, 0, 0.16), transparent 24%),
    linear-gradient(135deg, #0a2f7a 0%, #144fb8 34%, #0f6f92 72%, #6f5600 100%); pointer-events: none; }

.hero-content { position: relative; z-index: 2; width: 100%; padding: 68px 0 60px; } 

.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 26px; align-items: end; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .badge { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 13px; border-radius: var(--radius3); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.17); color: rgba(255, 255, 255, 0.96); font-size: 12px; font-weight: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .spark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 4px rgba(244, 180, 0, 0.18); flex: 0 0 auto; } .hero h1 { margin: 0; color: #fff; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -1.2px; text-shadow: 0 14px 42px rgba(0, 0, 0, 0.42); } .headline-rotator { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: baseline; } .rotate-wrap { position: relative; display: inline-block; min-width: 260px; vertical-align: baseline; } .rotate { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.55s ease, transform 0.55s ease; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22)); } .rotate.show { position: relative; opacity: 1; transform: translateY(0); } .hero-sub { margin: 18px 0 0; max-width: 66ch; color: rgba(255, 255, 255, 0.90); font-size: 15px; line-height: 1.85; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.26); } .hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .contact-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 46px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.17); background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; font-weight: 500; } .contact-inline .sep { opacity: 0.5; } /* Hero panel */ .hero-panel { border-radius: var(--radius2); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow3); padding: 18px; } .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #fff; } .panel-title b { font-size: 15px; letter-spacing: -0.2px; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 11px; border-radius: var(--radius3); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.96); } .chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-grad); display: inline-block; flex: 0 0 auto; } .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kpi { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); padding: 14px; color: #fff; } .kpi .num { margin: 0 0 6px; font-weight: 800; letter-spacing: -0.3px; font-size: 16px; background: linear-gradient(135deg, #ffffff, #bfeeff); -webkit-background-clip: text; background-clip: text; color: transparent; } .kpi .lbl { margin: 0; color: rgba(255, 255, 255, 0.84); font-size: 12px; line-height: 1.45; } /* Sections */ section { padding: 72px 0; background: var(--bg); } section:nth-of-type(even) { background: linear-gradient(180deg, #f9fbff 0%, #f5f8fd 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 34px; } .section-head h2 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.7px; color: var(--text); } .section-head p { margin: 12px 0 0; max-width: 76ch; color: var(--muted); font-size: 14px; line-height: 1.85; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Cards */ .card { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow2); padding: 24px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10); border-color: rgba(47, 107, 255, 0.18); } .card::after { content: ""; position: absolute; inset: auto -20% -62% -20%; height: 220px; background: radial-gradient(closest-side, rgba(47, 107, 255, 0.07), transparent 72%); pointer-events: none; } .card .top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(47, 107, 255, 0.10); background: linear-gradient(135deg, rgba(47, 107, 255, 0.12), rgba(22, 185, 216, 0.08)); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); } .card h3 { position: relative; z-index: 1; margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: -0.2px; color: var(--text-soft); } .card p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--muted); line-height: 1.8; font-size: 14px; } .bullets { position: relative; z-index: 1; margin: 12px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.9; } .bullets li::marker { color: var(--blue); } /* Media */ .media { position: relative; overflow: hidden; min-height: 380px; border-radius: var(--radius2); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); } .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .media:hover img { transform: scale(1.04); } .media .media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(6, 14, 32, 0.12) 100%); pointer-events: none; } /* Testimonial */ .quote { border-radius: var(--radius2); border: 1px solid var(--line); background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: var(--shadow); padding: 34px; text-align: center; position: relative; overflow: hidden; } .quote::before { content: ""; position: absolute; inset: auto auto -80px -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 107, 255, 0.08), transparent 68%); pointer-events: none; } .quote p { position: relative; z-index: 1; margin: 0; font-size: 16px; line-height: 1.9; color: var(--text-soft); font-style: italic; } .quote .who { position: relative; z-index: 1; margin-top: 16px; color: var(--muted); font-size: 14px; font-weight: 600; } /* CTA */ .cta { position: relative; overflow: hidden; border-radius: 30px; border: 1px solid var(--line); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: var(--shadow); padding: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px circle at right top, rgba(47, 107, 255, 0.08), transparent 56%), radial-gradient(500px circle at 82% 32%, rgba(22, 185, 216, 0.06), transparent 58%); pointer-events: none; } .cta h3 { position: relative; z-index: 1; margin: 0; font-size: 24px; letter-spacing: -0.35px; color: var(--text); } .cta p { position: relative; z-index: 1; margin: 8px 0 0; max-width: 72ch; color: var(--muted); line-height: 1.8; font-size: 14px; } .cta > div { position: relative; z-index: 1; } /* Footer */
footer {
  padding: 50px 0 34px;
  border-top: 1px solid rgba(18, 126, 82, 0.34);
 background:
  radial-gradient(circle at 18% 20%, rgba(255, 235, 120, 0.16), transparent 30%),
  radial-gradient(circle at 82% 18%, rgba(255, 220, 120, 0.14), transparent 28%),
  radial-gradient(circle at 72% 78%, rgba(255, 200, 120, 0.12), transparent 28%),
  linear-gradient(135deg, #fffbe0 0%, #fff3b8 30%, #ffe58a 65%, #ffd76a 100%);
}
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 24px; } 
.foot-title {  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
 color: #7a4a00; } 
.foot-desc { margin: 0; max-width: 48ch;  color: rgba(92, 55, 0, 0.86); font-size: 14px; line-height: 1.85; } 
.foot-col h4 {  margin: 0 0 16px;
  font-size: 14px;
  color: #7a4a00;} 
.foot-col a {  display: block;
  padding: 6px 0;
   color: rgba(92, 55, 0, 0.86);
  font-size: 14px;
  transition: color 0.2s ease, transform 0.2s ease; } 
.foot-col a:hover {
  color: #d9a400;
  transform: translateX(2px);
} 
.foot-bottom { margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(32, 199, 111, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(92, 55, 0, 0.86);
  font-size: 13px; } 
/* Reveal animation */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.75s ease, transform 0.75s ease; } .reveal.show { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 1100px) { .nav-inner { min-height: 82px; } .logo-img { width: 190px; max-height: 66px; } nav.links { gap: 2px; font-size: 13px; } nav.links a { padding: 10px 10px; } .btn { padding: 11px 14px; } } @media (max-width: 980px) { nav.links { display: none; } .hero-grid { grid-template-columns: 1fr; align-items: start; } .grid-3, .grid-2, .foot-grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } .cta { flex-direction: column; align-items: flex-start; } .rotate-wrap { min-width: 220px; } .media { min-height: 300px; } .nav-actions { gap: 8px; } .nav-actions .btn { min-height: 42px; padding: 10px 12px; font-size: 13px; } } @media (max-width: 700px) { .container { width: min(var(--container), calc(100% - 28px)); } .nav-inner { min-height: 76px; } .logo-img { width: 168px; max-height: 58px; } .hero { min-height: auto; } .hero-content { padding: 54px 0 46px; } .hero h1 { font-size: clamp(30px, 9vw, 42px); line-height: 1.08; } .section-head h2 { font-size: 26px; } .quote, .card, .cta { padding: 24px; } .kpis { grid-template-columns: 1fr; } .hero-actions { align-items: stretch; } .contact-inline { width: 100%; } } @media (max-width: 520px) { html { scroll-padding-top: 76px; } .container { width: min(var(--container), calc(100% - 22px)); } .nav-inner { gap: 10px; } .logo-img { width: 150px; max-height: 52px; } .nav-actions { flex-wrap: wrap; justify-content: flex-end; } .nav-actions .btn { font-size: 12px; padding: 10px 11px; min-height: 40px; border-radius: 12px; } .hero-badges { gap: 8px; } .badge { font-size: 11px; padding: 7px 11px; } .hero-sub, .section-head p, .card p, .bullets, .cta p, .foot-desc { font-size: 13px; } section { padding: 60px 0; } .media { min-height: 250px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } * { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero video { display: none; } .hero { background: radial-gradient(900px 520px at 15% 18%, rgba(47, 107, 255, 0.20), transparent 55%), radial-gradient(800px 460px at 82% 14%, rgba(22, 185, 216, 0.18), transparent 55%), linear-gradient(180deg, #081120 0%, #0b1630 100%); } }

.has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.has-dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.has-dropdown .caret {
  transition: transform 0.2s ease;
}

.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 8px 0;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
}

/* keeps the hover bridge so the menu doesn't close in the gap */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #1a1a1a;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu a:hover {
  background: #fff7d6;
  color: #d98a12;
}

/* mobile sub-link indent */
.mobile-sublink {
  padding-left: 24px;
  opacity: 0.85;
  font-size: 0.95rem;
}