/* ==========================================================
   TAHAI Web Services — modern overrides + shared brand tokens
   Signature assets (do not replace):
   - Geo pattern hero background: img/1920x1080/01.jpg
   - Stairs near footer:          img/1920x1080/02.jpg
   ========================================================== */

:root{
  /* Brand tokens (reuse across properties) */
  --brand-ink: #0b1220;             /* deep navy */
  --brand-paper: #f7f8fb;           /* off-white */
  --brand-white: #ffffff;

  --brand-accent: #59cbd6;          /* cool cyan */
  --brand-accent-2: #2aa9b6;        /* teal */
  --brand-warm: #f28c28;            /* sparing accent */

  --brand-border: rgba(11,18,32,.10);
  --brand-shadow: rgba(11,18,32,.22);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

body{
  background:
    radial-gradient(900px 480px at 10% 0%, rgba(42,169,182,.14), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(242,140,40,.12), transparent 60%),
    linear-gradient(var(--brand-white), var(--brand-paper));
  color: var(--brand-ink);
}

/* Header polish */
.header{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--brand-border);
}
.navbar-nav>li>a, .nav>li>a, ul.nav li a{
  letter-spacing:.08em;
}
.navbar-nav>li.active>a, .nav>li.active>a, ul.nav li.active a{
  color: var(--brand-accent) !important;
}
a{ color: var(--brand-accent-2); }
a:hover{ color: var(--brand-accent); }

/* --- Top hero (geo pattern background) --- */
.tws-hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 66px;
}
.tws-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image:
    linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.66) 42%, rgba(11,18,32,.22) 100%),
    url("../img/1920x1080/01.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(.95) contrast(1.03);
}
.tws-hero::after{
  /* white strip accent */
  content:"";
  position:absolute;
  left:-10%; right:-10%;
  top:78%;
  height: 110px;
  transform: translateY(-50%) rotate(-1.1deg);
  background: rgba(255,255,255,.58);
  border-top: 1px solid rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  pointer-events:none;
}
.tws-hero .tws-inner{ position: relative; z-index: 2; }
.tws-hero .tws-kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.80);
  margin: 0 0 12px;
}
.tws-hero h1{
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.tws-hero .tws-lead{
  color: rgba(255,255,255,.86);
  max-width: 64ch;
  font-size: 16px;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.tws-hero .tws-what{
  margin-top: 10px;
  max-width: 70ch;
  color: rgba(255,255,255,.80);
  font-size: 13px;
  letter-spacing: .01em;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* Buttons / actions */
.tws-actions a{
  display:inline-block;
  margin-right: 10px;
  margin-top: 12px;
}
.tws-cta{
  background: linear-gradient(180deg, rgba(89,203,214,.98), rgba(42,169,182,.98));
  color: #062029 !important;
  font-weight: 900;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: 0 16px 34px var(--brand-shadow);
  border: 1px solid rgba(255,255,255,.14);
}
.tws-ghost{
  background: rgba(11,18,32,.30);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.94) !important;
  font-weight: 800;
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

/* Trust strip */
.tws-trust{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.86);
}
.tws-trust-dot{
  width:10px; height:10px; border-radius: 99px;
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(89,203,214,.18);
}
.tws-trust-link{ color: rgba(255,255,255,.92) !important; text-decoration: underline; }
.tws-trust-muted{ color: rgba(255,255,255,.70); }
.tws-trust-sep{ opacity: .8; }

/* Rebrand artwork integration */
.tws-rebrand{ position:relative; padding: 22px 0 10px; }
.tws-rebrand-card{
  position: relative;
  overflow: hidden;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  background: rgba(11,18,32,.92);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.tws-rebrand-card img{
  width: 320px; max-width: 100%;
  height: auto; border-radius: var(--radius-md);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}
.tws-rebrand-copy{ color: rgba(255,255,255,.88); max-width: 46ch; }
.tws-rebrand-copy h2{
  margin: 0 0 6px;
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tws-rebrand-copy p{ margin:0; color: rgba(255,255,255,.78); }

/* --- Stairs near footer (signature image) --- */
.tws-stairs{
  position: relative;
  padding: 86px 0 78px;
  overflow:hidden;
}
.tws-stairs::before{
  content:"";
  position:absolute;
  inset:-20px;
  background-image:
    linear-gradient(180deg, rgba(247,248,251,0) 0%, rgba(247,248,251,.92) 45%, rgba(247,248,251,1) 100%),
    url("../img/1920x1080/02.jpg");
  background-size: cover;
  background-position: bottom center;
  filter: saturate(.95) contrast(1.02);
  transform: scale(1.02);
}
.tws-stairs .tws-inner{ position: relative; z-index: 2; }
.tws-stairs-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: var(--radius-lg);
  padding: 18px 18px 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
  max-width: 860px;
}
.tws-stairs-card h2{
  margin-top: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tws-stairs-card p{
  margin: 8px 0 10px;
  color: rgba(11,18,32,.78);
}

/* Simple bullet list for services page */
.tws-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
}
.tws-bullets li{ margin: 6px 0; }

/* Hide unused forms (LinkedIn only) */
input, textarea, form{ display:none !important; }

/* Footer tweaks (template footer uses a dark background image) */
.tws-footer-tagline{
  text-align:center;
  padding: 14px 12px 0;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  letter-spacing: .01em;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.tws-footer-primary{
  text-align:center;
  padding: 6px 12px 14px;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.tws-footer-primary a{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  text-decoration: underline;
}
.tws-footer-primary a:hover{ color: #fff; }

/* Small-screen adjustments */
@media (max-width: 768px){
  .tws-rebrand-card{ padding: 12px; }
  .tws-rebrand-card img{ width: 100%; }
  .tws-hero{ padding: 104px 0 56px; }
  .tws-stairs{ padding: 70px 0 60px; }
}