/* TexSecure home page. Generated from the approved design. */
/* Typefaces (SIL Open Font License, see assets/fonts) */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root { --accent: #D40F1A; --sky: #8DB6FF; }
html { scroll-behavior: smooth; }
body.texsecure-home { margin: 0; padding: 0; background: #06142E; }
.tx a { color: #F4F7FC; text-decoration: none; }
.tx a:hover { color: var(--sky); }
.tx .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); box-sizing: border-box; }
.tx .ac { color: var(--sky); }
.tx .hot { color: #EA2A35; }
.tx .ac-s { stroke: var(--sky); }
.tx .bl-f { fill: #5B9BFF; }
.tx .ac-f { fill: var(--accent); }
.tx .ac-bg { background: var(--accent); }
.tx [id] { scroll-margin-top: 100px; }

/* nav */
.tx .nl { text-decoration: none; position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.tx .nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.tx .nl:hover::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .tx .links { display: none !important; }
  .tx .logo { height: 48px !important; }
}

/* buttons */
.tx .btn { position: relative; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.tx .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.45); color: #FFFFFF; }
.tx .btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: rgba(255,255,255,.35); transform: skewX(-20deg); transition: left .55s ease; }
.tx .btn:hover::after { left: 130%; }
.tx .ghost { text-decoration: none; transition: border-color .25s ease, color .25s ease, transform .2s ease; }
.tx .ghost:hover { border-color: var(--sky) !important; color: #FFFFFF; transform: translateY(-2px); }
.tx .go { text-decoration: none; }
.tx .go svg { transition: transform .25s ease; }
.tx .go:hover svg { transform: translateX(5px); }

/* hero load-in */
@keyframes rise {
  from { opacity: 0; transform: translateY(.55em); }
  to { opacity: 1; transform: none; }
}
.tx .w { display: inline-block; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.tx .a1 { animation-delay: .05s; } .tx .a2 { animation-delay: .13s; } .tx .a3 { animation-delay: .21s; } .tx .a4 { animation-delay: .29s; }
.tx .a5 { animation-delay: .37s; } .tx .a6 { animation-delay: .45s; } .tx .a7 { animation-delay: .53s; } .tx .a8 { animation-delay: .61s; }
.tx .a9 { animation-delay: .8s; } .tx .a10 { animation-delay: .95s; } .tx .a11 { animation-delay: 1.1s; }
@keyframes fadeIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
.tx .scope { animation: fadeIn 1.2s cubic-bezier(.2,.7,.2,1) .3s both; }

/* hero grid drift */
@keyframes drift {
  to { background-position: 56px 56px, 56px 56px; }
}
.tx .gridbg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#0F2450 1px, transparent 1px), linear-gradient(90deg, #0F2450 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 72% 45%, #000 0%, transparent 68%); mask-image: radial-gradient(ellipse at 72% 45%, #000 0%, transparent 68%); animation: drift 9s linear infinite; }

/* word roller */
@keyframes roll {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-20%); }
  50%, 70% { transform: translateY(-40%); }
  75%, 95% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
.tx .roll-in { animation: roll 10s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.tx .caret { animation: caret 1s steps(1) infinite; }

/* scope graphic */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes spinBack {
  to { transform: rotate(-360deg); }
}
.tx .sweep { transform-origin: 260px 260px; animation: spin 6s linear infinite; }
.tx .orbit { transform-origin: 260px 260px; animation: spinBack 48s linear infinite; }
@keyframes ripple {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.7); opacity: 0; }
}
.tx .rip { transform-origin: 260px 260px; animation: ripple 4.5s ease-out infinite; }
.tx .rip2 { animation-delay: 2.25s; }
@keyframes ping {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(4.2); opacity: 0; }
}
.tx .ping { transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; }
.tx .p2 { animation-delay: .5s; } .tx .p3 { animation-delay: 1s; } .tx .p4 { animation-delay: 1.5s; } .tx .p5 { animation-delay: 2s; }
@keyframes dash {
  to { stroke-dashoffset: -24; }
}
.tx .flow { stroke-dasharray: 4 8; animation: dash 1.1s linear infinite; }
@keyframes glow {
  0%, 100% { opacity: .1; }
  50% { opacity: .26; }
}
.tx .glow { animation: glow 3.2s ease-in-out infinite; }

/* ticker */
@keyframes slide {
  to { transform: translateX(-50%); }
}
.tx .track { display: flex; width: max-content; animation: slide 44s linear infinite; }
.tx .ticker:hover .track { animation-play-state: paused; }

/* scroll reveal */
.tx .rv { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.tx .ln { transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tx .d1 { transition-delay: .1s; } .tx .d2 { transition-delay: .2s; } .tx .d3 { transition-delay: .3s; } .tx .d4 { transition-delay: .4s; } .tx .d5 { transition-delay: .5s; }
.tx.anim .sec:not(.in) .rv { opacity: 0; transform: translateY(30px); }
.tx.anim .sec:not(.in) .ln { transform: scaleX(0); }

/* photos */
.tx .ph { position: relative; overflow: hidden; }
.tx .ph-in { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.tx .card:hover .ph-in { transform: scale(1.07); }
.tx .hatch { background-image: repeating-linear-gradient(135deg, rgba(141,182,255,.09) 0 2px, transparent 2px 14px); }
.tx .wipe { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1) .15s; }
.tx.anim .sec:not(.in) .wipe { clip-path: inset(0 100% 0 0); }
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.tx .kb { animation: kenburns 18s ease-in-out infinite alternate; }

/* process track */
@keyframes travel {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.tx .runner { animation: travel 5.5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.tx .stop { animation: beat 2.4s ease-in-out infinite; }
.tx .s2 { animation-delay: .8s; } .tx .s3 { animation-delay: 1.6s; }

/* service cards */
.tx .card { position: relative; overflow: hidden; height: 100%; box-sizing: border-box; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.tx .card:hover { transform: translateY(-8px); border-color: var(--sky) !important; background: #102A5C !important; box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.tx .bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tx .card:hover .bar { transform: scaleX(1); }
@keyframes blink {
  0%, 55%, 100% { opacity: .25; }
  25% { opacity: 1; }
}
.tx .led { animation: blink 1.8s ease-in-out infinite; }
.tx .l2 { animation-delay: .35s; } .tx .l3 { animation-delay: .7s; }
@keyframes draw {
  0% { stroke-dashoffset: 30; }
  35%, 82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 30; }
}
.tx .chk { stroke-dasharray: 30; animation: draw 3.4s ease-in-out infinite; }
@keyframes scan {
  0% { transform: translateY(0); opacity: 0; }
  15%, 85% { opacity: .9; }
  100% { transform: translateY(26px); opacity: 0; }
}
.tx .scan { animation: scan 2.6s ease-in-out infinite; }
@keyframes bobUp {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}
@keyframes bobDown {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
.tx .up { animation: bobUp 1.6s ease-in-out infinite; }
.tx .dn { animation: bobDown 1.6s ease-in-out infinite; }

/* form */
.tx .fld { transition: border-color .2s ease, box-shadow .2s ease; }
.tx .fld:focus { border-color: var(--sky) !important; box-shadow: 0 0 0 3px rgba(141,182,255,.25); outline: 2px solid var(--sky); outline-offset: 1px; }
.tx .cb { accent-color: var(--accent); }
.tx a:focus-visible, .tx button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* motion off */
.tx.still *, .tx.still *::before, .tx.still *::after { animation: none !important; transition: none !important; }
.tx.still .rv { opacity: 1 !important; transform: none !important; }
.tx.still .ln { transform: none !important; }
.tx.still .wipe { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tx *, .tx *::before, .tx *::after { animation: none !important; transition: none !important; }
  .tx .rv { opacity: 1 !important; transform: none !important; }
  .tx .ln { transform: none !important; }
  .tx .wipe { clip-path: none !important; }
}

/* WordPress integration */
.tx, .tx *, .tx *::before, .tx *::after { box-sizing: border-box; }
.tx img { max-width: none; height: auto; border: 0; }
.tx h1, .tx h2, .tx h3, .tx p { margin: 0; }
.tx button, .tx input, .tx textarea { letter-spacing: normal; text-transform: none; }
body.admin-bar .tx > header { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar .tx > header { top: 46px !important; }
}
@media (max-width: 600px) {
  body.admin-bar .tx > header { top: 0 !important; }
}
.tx .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: #FFFFFF; color: #011A3C; font-weight: 600; }
.tx .skip:focus { left: 8px; top: 8px; color: #011A3C; }
.tx .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tx .notice { padding: 14px 16px; border-radius: 4px; font-size: 15px; font-weight: 500; }
.tx .notice-ok { background: #0E3B2A; border: 1px solid #2E9B6B; color: #D9F5E8; }
.tx .notice-error { background: #3F0F14; border: 1px solid #D40F1A; color: #FFE1E3; }