/*======================================
THE WORD & NOTE
Premium Luxury Theme
======================================*/

/*==============================
GOOGLE FONTS
==============================*/
:root{
/* Background */
--bg:#FFFFFF;
--bg-secondary:#F8FAFC;

/* Glass */
--surface:rgba(255,255,255,.85);
--surface-border:rgba(15,23,42,.08);

/* Text */
--white:#FFFFFF;
--text:#0F172A;
--text-light:#64748B;

/* Brand */
--primary:#2563EB;
--secondary:#3B82F6;
--gradient:linear-gradient(135deg,#2563EB,#3B82F6);

/* Fonts */
--heading:'Lora',serif;
--body:'Manrope',sans-serif;

/* Radius */
--radius-sm:12px;
--radius:20px;
--radius-lg:32px;

/* Shadow */
--shadow:0 20px 60px rgba(15,23,42,.08);

/* Transition */
--transition:.35s ease;
}

/*==============================
RESET
==============================*/
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing:border-box;
}

html, body {
margin: 0 !important;
padding: 0 !important;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
font-family:var(--body);
overflow-x:hidden;
line-height:1.7;
}

/*==============================
TYPOGRAPHY
==============================*/
h1,h2,h3,h4,h5,h6{
font-family:var(--heading);
color:var(--text);
line-height:1.2;
margin-top: 0;
}

p{
color:var(--text-light);
}

a{
color:inherit;
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

section{
padding:120px 0;
}

/*==============================
SCROLLBAR
==============================*/
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:var(--bg);
}

::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:50px;
}

/*==============================
SELECTION
==============================*/
::selection{
background:var(--primary);
color:#fff;
}

/*======================================
GLOBAL COMPONENTS
======================================*/

/* Container */
.container-lg{
max-width:1320px;
}

/* Section Badge */
.section-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 18px;
border:1px solid rgba(37, 99, 235, 0.15);
background:rgba(37, 99, 235, 0.05);
backdrop-filter:blur(18px);
border-radius:50px;
color:var(--primary);
font-size:.88rem;
font-weight:700;
letter-spacing:.5px;
margin-bottom:20px;
}

/* Section Title */
.section-title{
font-family:var(--heading);
font-size:clamp(2.3rem,5vw,4rem);
color:var(--text);
margin-bottom:20px;
line-height:1.15;
}

.section-text{
max-width:700px;
color:var(--text-light);
font-size:1.08rem;
}

/* Glass Card */
.glass-card{
background:var(--surface);
border:1px solid var(--surface-border);
backdrop-filter:blur(24px);
border-radius:28px;
box-shadow:var(--shadow);
transition:var(--transition);
}

.glass-card:hover{
transform:translateY(-8px);
border-color:rgba(37, 99, 235, 0.3);
}

/* Primary Button */
.btn-primary-custom{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 34px;
border-radius:50px;
background:var(--gradient);
color:#fff !important;
font-weight:700;
text-decoration:none;
white-space:nowrap;
transition:var(--transition);
margin:0;
}

.btn-primary-custom:hover{
transform:translateY(-4px);
color:#fff !important;
box-shadow:0 10px 25px rgba(37, 99, 235, 0.3);
}

/* Secondary Button */
.btn-secondary-custom{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 34px;
border-radius:50px;
border:1px solid rgba(15, 23, 42, 0.15);
background:rgba(255, 255, 255, 0.8);
backdrop-filter:blur(18px);
color:var(--text) !important;
font-weight:600;
text-decoration:none;
white-space:nowrap;
transition:var(--transition);
margin:0;
}

.btn-secondary-custom:hover{
transform:translateY(-4px);
border-color:var(--primary);
color:var(--primary) !important;
background:#fff;
}

/*======================================
NAVBAR
======================================*/
.custom-navbar{
padding:22px 0;
transition:.4s ease;
z-index:9999;
margin-top: 0 !important;
}

.custom-navbar.scrolled{
background:rgba(255,255,255,.85);
backdrop-filter:blur(22px);
border-bottom:1px solid rgba(15,23,42,.08);
box-shadow:0 15px 40px rgba(0,0,0,.08);
padding:14px 0;
}

.navbar-brand img{
height:52px;
width:auto;
}

.nav-link{
color:var(--text)!important;
margin:0 14px;
font-weight:600;
position:relative;
transition:.3s;
}

.nav-link:hover{
color:var(--primary)!important;
}

.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--gradient);
transition:.3s;
}

.nav-link:hover::after{
width:100%;
}

.navbar-toggler{
border:none;
box-shadow:none!important;
}

/*======================================
HERO
======================================*/
.hero{
position:relative;
overflow:hidden;
padding:120px 0 100px;
background:var(--bg);
margin-top: 0 !important;
}

.hero-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(37,99,235,.12),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(59,130,246,.10),transparent 35%),
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
z-index:0;
}

.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.35;
}

.hero-glow-1{
width:320px;
height:320px;
background:#7C5CFC;
top:-80px;
left:-120px;
}

.hero-glow-2{
width:300px;
height:300px;
background:#00D4FF;
right:-100px;
bottom:80px;
}

.hero .container{
position:relative;
z-index:2;
}

.hero-logo{
width:170px;
margin:0 auto 30px;
}

.hero-title{
font-size:clamp(3rem,7vw,5.8rem);
margin:30px 0;
line-height:1.1;
color:var(--text);
}

.hero-title span{
background:var(--gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-description{
max-width:900px;
margin:0 auto;
font-size:1.12rem;
color:var(--text-light);
}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
margin-top:45px;
flex-wrap:wrap;
width:100%;
text-align:center;
}

/*======================================
HERO STATISTICS
======================================*/
.hero-stats{
margin-top:90px;
row-gap:24px;
}

.stat-card{
padding:40px 25px;
text-align:center;
height:100%;
}

.stat-card h2{
font-size:3rem;
font-weight:700;
margin-bottom:12px;
background:var(--gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat-card p{
margin:0;
color:var(--text);
font-size:.95rem;
line-height:1.6;
}

/*======================================
TRUST STRIP & CTA BANNER
======================================*/
.hero-trust{
margin-top:90px;
}

.hero-trust h6{
font-family:var(--body);
font-size:1rem;
font-weight:600;
color:var(--text-light);
margin-bottom:30px;
}

.industry-tags{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.industry-tags span{
padding:12px 22px;
border-radius:50px;
background:rgba(255,255,255,.05);
border:1px solid rgba(15,23,42,.08);
backdrop-filter:blur(18px);
color:var(--text);
transition:.35s ease;
cursor:default;
}

.industry-tags span:hover{
transform:translateY(-5px);
border-color:rgba(37, 99, 235, 0.45);
background:rgba(255,255,255,.08);
}

.cta .glass-card {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: var(--shadow);
}
/*======================================
FORCE CENTERING OVERRIDES
======================================*/

/* Force the parent container inside CTA to align flex items dead center */
.cta .glass-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Force CTA buttons wrapper to align horizontally in the center */
.cta .glass-card .d-flex,
.cta .glass-card div[class*="d-flex"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent buttons from floating or taking 100% width unless on mobile */
.cta .btn-primary-custom,
.cta .btn-secondary-custom {
  margin: 0 !important;
  flex-shrink: 0 !important;
}
/* ABSOLUTE FORCE CENTER OVERRIDE */
.cta .btn-primary-custom,
.cta .btn-secondary-custom,
.hero .btn-primary-custom,
.hero .btn-secondary-custom {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    margin: 8px !important;
    display: inline-flex !important;
    vertical-align: middle !important;
}

.cta .glass-card,
.hero {
    text-align: center !important;
}
/*======================================
HERO BRAND TEXT OVERRIDES
======================================*/
.hero-logo-text {
  font-family: var(--heading) !important; /* Lora luxury serif font */
  font-size: clamp(3rem, 6vw, 4.8rem) !important; /* Large, responsive size */
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  margin-bottom: 25px !important;
}

/* "TheWord" in crisp high-contrast dark blue/black or white depending on background */
.hero-logo-text .brand-word {
  color: var(--text) !important; /* Forces dark slate text if hero background is light */
}

/* "And" in vibrant brand blue */
.hero-logo-text .brand-and {
  color: #2563EB !important;
  padding: 0 4px !important;
}

/* "Note" in vibrant gradient blue */
.hero-logo-text .brand-note {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
/*======================================
COMPACT RIGHT-ALIGNED NAVBAR
======================================*/
.custom-navbar {
  padding: 10px 0 !important; /* Compact header height */
}

.custom-navbar.scrolled {
  padding: 8px 0 !important;
}

.custom-navbar .navbar-brand img {
  height: 38px !important; /* Scaled down logo */
  width: auto;
}

.custom-navbar .nav-link {
  font-size: 0.85rem !important; /* Compact font size */
  margin: 0 8px !important;
  padding: 4px 0 !important;
  white-space: nowrap;
}

.custom-navbar .nav-btn {
  padding: 8px 18px !important; /* Smaller button */
  font-size: 0.85rem !important;
}

/* Force elements to push to the far right */
.custom-navbar .navbar-collapse {
  justify-content: flex-end !important;
}
/* Watermark Logo Background for Hero Section */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; /* Adjust size of the watermark */
  height: 500px;
  background-image: url('../images/branding/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06; /* Adjust visibility (0.05 to 0.15 works best) */
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1; /* Keeps text layered above the watermark */
}