h1:focus {
    outline: none;
}

/* Use Bai Jamjuree as the default website font */
html, body {
    font-family: 'Bai Jamjuree', sans-serif;
}


@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1550px;
    }
}

/* Use Inter font for all heading tags */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2696996NzguMzA1IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Landing page styles */
.landing { font-family: 'Bai Jamjuree', sans-serif; color: #0b2340; }
.hero { display:flex; gap:3rem; align-items:center; padding:4rem 6rem; background: linear-gradient(180deg,#f6fbff 0%, #ffffff 100%); }
.hero-content { max-width:620px; }
.eyebrow { display:inline-block; font-size:12px; color:#3b82f6; background:#eef6ff; padding:6px 10px; border-radius:999px; margin-bottom:1rem; text-transform:uppercase; }
.hero h1 { font-size:2.25rem; margin:0 0 1rem; line-height:1.05; color:#072146; }
.lead { color:#5a6b7a; margin-bottom:1.25rem; }
.hero-actions { display:flex; gap:0.75rem; }
.btn { padding:0.6rem 1rem; border-radius:8px; border:1px solid transparent; cursor:pointer; font-weight:600 }
.btn.primary { background:#0b4db7; color:white; }
.btn.outline { background:transparent; color:#0b4db7; border-color:#dbeafe; }
.hero-image { flex:1; display:flex; justify-content:center; }
.device-mock { width:360px; height:260px; background:linear-gradient(135deg,#e6f0f6 0%, #cfe9ee 100%); border-radius:8px; box-shadow:0 8px 20px rgba(17,24,39,0.08); border:6px solid white; }

.features { display:flex; gap:2rem; padding:3rem 6rem; align-items:center }
.feature-image.card { width:420px; height:260px; background:#f5f7f9; border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,0.06); }
.feature-right { max-width:520px }
.feature-right h3 { color:#0b2340 }
.link { color:#0b4db7; font-weight:600 }

.info-grid { display:flex; gap:2rem; padding:2rem 6rem; }
.info-card { background:white; padding:1.25rem; border-radius:10px; box-shadow:0 4px 12px rgba(2,6,23,0.04); flex:1 }
.info-card.verified { display:flex; flex-direction:column; justify-content:center; align-items:flex-start }
.badge { background:#eefaf1; color:#0b6b35; padding:8px 12px; border-radius:8px; font-weight:700; margin-bottom:0.5rem }
.progress { width:100%; background:#eef2f7; height:10px; border-radius:999px; margin-top:0.8rem }
.progress .line { width:70%; height:100%; background:#10b981; border-radius:999px }

.system-features { text-align:center; padding:3rem 6rem; background:linear-gradient(180deg,#fbfdff 0%, #f6fbff 100%); }
.system-features h2 { margin-bottom:0.25rem }
.system-features .muted { color:#6b7280 }
.cards { display:flex; gap:1rem; justify-content:center; margin-top:1.5rem }
.card.small { width:220px; padding:1rem; border-radius:10px; background:white; box-shadow:0 6px 18px rgba(2,6,23,0.04); }

.testimonials { padding:3rem 6rem }
.test-grid { display:flex; gap:1rem; }
.testimonial.card { padding:1rem; border-radius:10px; background:#ffffff; box-shadow:0 6px 18px rgba(2,6,23,0.04); flex:1 }
.author { margin-top:0.75rem; font-weight:700; color:#0b2340 }

.cta-band { background:#072146; color:white; text-align:center; padding:2.5rem 6rem; }
.cta-band .btn.primary { background:white; color:#072146 }
.cta-band .btn.outline { border-color:rgba(255,255,255,0.25); color:white }

@media (max-width:900px) {
    .hero { flex-direction:column; padding:2rem }
    .hero-image, .hero-content { width:100% }
    .features, .info-grid, .test-grid { flex-direction:column; padding:1.25rem }
    .cards { flex-direction:column; align-items:center }
}

/* Site navigation and footer */
.site-nav { background: white; border-bottom:1px solid #eef2f7; }
.site-nav .nav-inner { max-width:1100px; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between }
.site-nav .brand { font-weight:800; color:#072146; text-decoration:none }
.site-nav .nav-links { list-style:none; display:flex; gap:1rem; margin:0; padding:0 }
.site-nav .nav-links a { color:#0b4db7; text-decoration:none; font-weight:600 }

.site-footer { background:#f8fafc; color:#0b2340; padding:2.25rem 0; }
.site-footer .footer-inner { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.site-footer .footer-columns { display:flex; gap:2rem; justify-content:space-between; margin-bottom:1.25rem }
.site-footer .col { flex:1 }
.site-footer h4, .site-footer h5 { margin:0 0 0.5rem }
.site-footer p, .site-footer ul { margin:0 }
.site-footer ul { list-style:none; padding:0 }
.site-footer a { color:#0b4db7; text-decoration:none }
.site-footer .footer-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e6eef6; padding-top:0.75rem; margin-top:0.75rem }

@media (max-width:900px) {
    .site-footer .footer-columns { flex-direction:column; gap:1rem }
    .site-footer .footer-bottom { flex-direction:column; gap:0.5rem; align-items:flex-start }
}

/* Feature image (left) styling to match screenshot */
.feature-image-large {
  width:100%;
  height:420px;
  border-radius:12px;
  box-shadow: 0 18px 40px rgba(9,30,63,0.08);
  border:6px solid white;
  background:linear-gradient(180deg,#ffffff 0%, #f6f8fa 100%);
  background-size:cover;
  background-position:center;
  position:relative;
}
.feature-image-large::after {
  /* inset placeholder to simulate the certificate photo */
  content: '';
  position:absolute;
  left:20px;
  top:20px;
  right:20px;
  bottom:20px;
  border-radius:8px;
  background:linear-gradient(180deg,#fbfcfd 0%, #eceff1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.two-col-section .text-col { padding-left:3rem; }
.two-col-section h3 { font-size:1.75rem; color:#072146; font-weight:800 }
.link-elu { color:#072146; font-weight:700 }

@media (max-width:768px) {
  .feature-image-large { height:260px }
  .two-col-section .text-col { padding-left:0; margin-top:1rem }
}

/* Feature cards */
.features-header small { letter-spacing:0.18em; color:#6b7280 }
.feature-card { background:white; border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,0.04); text-align:left }
.feature-card h5 { color:#072146; font-weight:800; margin-top:0.25rem }
.feature-card p { color:#6b7280; margin-top:0.75rem }
.feature-card a { display:inline-block; margin-top:1rem; color:#0b4db7 }
.feature-icon { width:56px; height:56px; border-radius:12px }
.bg-soft-blue { background:#eaf3ff; }
.bg-soft-peach { background:#fff4ef; }
.bg-soft-indigo { background:#eef3ff; }
.bg-soft-gray { background:#f5f6f7; }

@media (min-width:992px) {
  .features-cards { padding-left:2rem; padding-right:2rem }
  .feature-card { padding:2rem }
}

/* Testimonials */
.testimonials-precise { background: #f3f8fb; }
.testimonial-card { background:white; border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,0.04); }
.testimonial-card .quote-mark { position:absolute; right:20px; top:18px; font-size:40px; color:#e6eef6 }
.testimonial-card p { color:#32434f; }
.avatar { width:44px; height:44px; font-weight:700 }
.bg-elu-primary { background:#072146 }

/* CTA band dotted background */
.cta-band-dotted { background-color:#072146; background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:28px 28px; }
.cta-band-dotted h3 { color: #ffffff; font-weight:800 }
.cta-band-dotted p.lead { color: rgba(255,255,255,0.9) }
.btn-outline-light { border-color: rgba(255,255,255,0.45); color: white }
.btn-outline-light:hover { background: rgba(255,255,255,0.06) }

@media (max-width:768px) {
  .testimonial-card { padding:1rem }
  .testimonial-card .quote-mark { right:12px; top:12px }
  .cta-band-dotted { padding:2rem 0 }
}

/* Social band under CTA */
.social-band { background:#e9eff3; }
.social-band h5 { color:#072146 }
.social-band .small { color:#62727a }
.social-icon { width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:white; box-shadow:0 6px 18px rgba(2,6,23,0.06); text-decoration:none }
.social-icon svg { display:block }
.social-icon:hover { transform:translateY(-3px); transition:all .18s ease }

.btn-elu-cta { background:#ffffff; color:#072146; border:0; border-radius:8px; padding:0.75rem 1.25rem; font-weight:700 }
.btn-elu-cta:hover { background: #f5f7fb }

@media (max-width:576px) {
  .cta-band-dotted h2 { font-size:1.5rem }
  .btn-elu-cta { width:100% }
  .btn-outline-light { width:100% }
  .d-flex.justify-content-center.gap-4 { flex-direction:column }
}

/* Design system tokens and overrides (Reliant Enterprise) */
:root {
  /* Colors */
  --color-surface: #f6faff;
  --color-surface-dim: #d2dbe4;
  --color-surface-bright: #f6faff;
  --color-surface-container: #e6eff8;
  --color-surface-container-high: #e0e9f2;
  --color-on-surface: #141d23;
  --color-on-surface-variant: #434751;
  --color-outline: #737782;
  --color-primary: #00336e;
  --color-primary-container: #1a4a8e;
  --color-secondary: #00629e;
  --color-background: #f6faff;
  --color-text-muted: #767676;
  --color-success: #2D8A39;

  /* Typography */
  --font-family-base: 'Bai Jamjuree', sans-serif;
  --display-lg-size: 32px;
  --display-lg-weight: 700;
  --display-lg-line-height: 40px;
  --headline-md-size: 20px;
  --headline-md-weight: 600;
  --title-sm-size: 16px;
  --body-md-size: 14px;
  --body-md-weight: 400;
  --label-caps-size: 11px;

  /* Rounding */
  --round-sm: 0.125rem;
  --round: 0.25rem; /* default */
  --round-md: 0.375rem;
  --round-lg: 0.5rem;

  /* Spacing */
  --space-unit: 4px;
  --gutter: 24px;
  --page-margin: 40px;
  --container-max: 1440px;

  /* Elevation */
  --shadow-card: 0px 2px 4px rgba(0,0,0,0.05);
  --shadow-pop: 0px 10px 15px rgba(0,0,0,0.10);
}

/* Apply base font family and sensible defaults from the design system */
html, body {
    font-family: var(--font-family-base);
    background-color: var(--color-background);
    color: var(--color-on-surface);
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
}

/* Hero */
.hero-precise {
  background: linear-gradient(180deg, var(--color-surface-container) 0%, var(--color-surface-bright) 60%);
}
.hero-title {
  font-size: var(--display-lg-size);
  font-weight: var(--display-lg-weight);
  line-height: var(--display-lg-line-height);
  color: var(--color-on-surface);
}
.hero-lead { color: var(--color-on-surface-variant); }

/* Buttons */
.btn-elu-primary { background: var(--color-primary); color: var(--color-primary-on, #fff); border-radius: var(--round); box-shadow:none; }
.btn-elu-primary:hover { background: var(--color-primary-container); }
.btn-elu-outline { color: var(--color-primary); border:1px solid rgba(0,0,0,0.06); background: transparent; }

/* Feature cards */
.feature-card { background: var(--color-surface-container-lowest, #ffffff); border-radius: 8px; border:1px solid #e6eef6; box-shadow: var(--shadow-card); padding:1rem; }
.feature-card h5 { font-size: var(--headline-md-size); font-weight:600; color:var(--color-on-surface); }
.feature-card p { color: var(--color-text-muted); }
.feature-icon { width:56px; height:56px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center }
.bg-soft-blue { background: var(--color-surface-container); }
.bg-soft-peach { background:#fff4ef; }
.bg-soft-indigo { background:#eef3ff; }
.bg-soft-gray { background:#f5f6f7; }

/* Feature image framing should use card elevation */
.feature-image-large { border-radius: 12px; border:1px solid #e6eef6; box-shadow: var(--shadow-card); background-color: #ffffff; }

/* Auth/verified card */
.auth-outer { background: var(--color-surface-container); padding: var(--space-unit); border-radius: 12px; }
.auth-inner { box-shadow: var(--shadow-card); border:1px solid #e6eef6; }
.auth-icon { background: var(--color-surface-bright); color: var(--color-success); }
.auth-progress { background:#eef5ef; }
.auth-line { background: var(--color-success); }

/* Testimonials */
.testimonial-card { border-radius: 12px; background: #ffffff; border:1px solid #e6eef6; box-shadow: var(--shadow-card); }
.testimonial-card p { color: var(--color-on-surface-variant); }
.avatar { background: var(--color-primary); }

/* CTA band */
.cta-band-dotted { background-color: var(--color-primary); background-image: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px); background-size:28px 28px; }
.cta-band-dotted h2, .cta-band-dotted h3 { color: var(--color-surface-bright); }
.cta-band-dotted p.lead { color: rgba(255,255,255,0.9); }
.btn-outline-light { border-color: rgba(255,255,255,0.45); color: white }

/* Social band */
.social-band { background: var(--color-surface-high); }
.social-band h5 { color: var(--color-primary); }
.social-icon { background: var(--color-surface-container); }

/* Footer */
.site-footer-dark { background: var(--color-primary); color: var(--color-on-primary, #fff); }
.site-footer-dark .footer-brand { color: var(--color-surface-bright); }
.site-footer-dark .footer-desc { color: rgba(255,255,255,0.85); }
.site-footer-dark .footer-heading { color: rgba(255,255,255,0.95); }
.site-footer-dark .footer-links a { color: rgba(255,255,255,0.9); }
.site-footer-dark .contact-icon { background: rgba(255,255,255,0.06); }
.site-footer-dark .footer-bottom { border-top:1px solid rgba(255,255,255,0.06); }

/* Utility: container max width per design */
.container { max-width: 1440px; }

/* Increase vertical padding of main sections by +5rem (navigation excluded) */
/* Base: Bootstrap py-5 == 3rem, py-4 == 1.5rem - we add 5rem to each */
.hero-precise {
  padding-top: 8rem; /* 3rem + 5rem */
  padding-bottom: 8rem;
}
.two-col-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.info-verified {
  padding-top: 8.5rem; /* 3.5rem + 5rem (was custom 3.5rem) */
  padding-bottom: 8.5rem;
}
.features-cards {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.testimonials-precise {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.cta-precise .cta-band-dotted {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.social-band {
  padding-top: 6.5rem; /* 1.5rem + 5rem */
  padding-bottom: 6.5rem;
}




/* Auth card for Stop Certificate Forgery section */
.auth-outer { background: linear-gradient(180deg,#fbfdff 0%, #f6fafc 100%); padding:2rem; }
.auth-inner { border-radius:8px; }
.auth-icon { width:56px; height:56px; background:#eefaf1; border-radius:12px; color:#0b6b35 }
.auth-progress { width:100%; background:#eef2f7; height:10px; border-radius:999px }
.auth-line { width:90%; height:100%; background:#10b981; border-radius:999px }
.text-elu-success { color:#0b6b35 }

/* Padding alignment to match screenshot spacing */
.info-verified { padding-top:3.5rem; padding-bottom:3.5rem }
.info-verified .display-5 { font-weight:800 }

@media (max-width:768px) {
  .auth-outer { padding:1rem }
}
.landing-precise { font-family: 'Bai Jamjuree', sans-serif; color: #072146; }
.hero-precise { background: linear-gradient(180deg, #f4fbff 0%, #ffffff 60%); }
.eyebrow-pill { display:inline-block; font-size:11px; color:#0b4db7; background:#eef6ff; padding:6px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700 }
.hero-title { font-size:2.5rem; line-height:1.02; margin-top:0.5rem; color:#072146; font-weight:800 }
.hero-lead { color:#5b6b7a; max-width:540px; }
.btn-elu-primary { background:#072146; color:white; border-radius:8px; padding:0.6rem 1.15rem; border:1px solid rgba(0,0,0,0.04); box-shadow:0 6px 18px rgba(7,20,40,0.08) }
.btn-elu-outline { background:transparent; color:#072146; border:1px solid rgba(7,20,40,0.08); border-radius:8px; padding:0.55rem 1rem }

.hero-device { width:420px; height:320px; border-radius:12px; background:linear-gradient(135deg,#e6f0f6 0%, #d7eef6 100%); padding:18px; box-shadow:0 18px 40px rgba(9,30,63,0.12); border:6px solid white }
.hero-device-image { width:100%; height:100%; background:#f8fbfd; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(2,6,23,0.02) }

.two-col-section .feature-image-large { width:100%; height:300px; background:#f5f7f9; border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,0.06) }
.text-elu-dark { color:#072146 }
.link-elu { color:#072146; font-weight:600 }

.verified-card { background:white }
.verified-badge { display:inline-block; background:#eefaf1; color:#0b6b35; padding:8px 12px; border-radius:10px; font-weight:700 }
.verified-progress { width:100%; background:#eef2f7; height:10px; border-radius:999px; margin-top:0.8rem }
.verified-line { width:76%; height:100%; background:#10b981; border-radius:999px }

.bg-faint { background:linear-gradient(180deg,#fbfdff 0%, #f6fbff 100%) }

.testimonial-quote { min-height:90px }

.cta-precise .cta-band-precise { background: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(180deg,#072146,#072146); background-size:18px 18px, auto; }
.btn-elu-cta { background:#062e66; color:white; border-radius:8px; padding:0.6rem 1.1rem; box-shadow:0 8px 20px rgba(2,6,23,0.2); border:1px solid rgba(255,255,255,0.06) }

@media (max-width:900px) {
  .hero-title { font-size:1.75rem }
  .hero-device { width:280px; height:200px }
  .hero-device-image { height:100% }
}

/* Navbar precise styling */
.navbar { border-bottom: 1px solid #e6eef6; }
.navbar .navbar-brand { color:#062e66 !important; font-weight:800; }
.navbar .nav-link { color:#64748b; font-weight:600; padding:0.5rem 0.75rem; }
.navbar .nav-link:hover { color:#072146; }
.navbar .nav-item .nav-link.active,
.site-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
}

.site-logo-mark {
  width: 44px;
  height: 44px;
  display: block;
}

.navbar .nav-item .nav-link[aria-current="page"] { color:#072146; position:relative; }
.navbar .nav-item .nav-link[aria-current="page"]::after { content: ""; position:absolute; height:3px; width:44px; left:50%; transform:translateX(-50%); bottom:-8px; background:#072146; border-radius:2px; }
.navbar .btn-elu-primary { background:#072146; color:white; border-radius:8px; padding:0.5rem 1rem; box-shadow:none; }

/* Feature cards and section styling (shared) */
.features-section-bg { background-color: #f4f6fa; }
.features-header-small { color: #1d4677; letter-spacing: 1.5px; font-size: 0.8rem; }
.features-header-title { color: #1f2937; font-size: 2.2rem; }
.features-header-desc { color: #6b7280; max-width: 650px; font-size: 1.1rem; line-height: 1.6; }
.feature-card-custom { padding: 2.25rem; border: none; transition: transform 0.2s; }
.feature-card-custom:hover { transform: translateY(-5px); }
.feature-icon-wrapper { width: 52px; height: 52px; }
.feature-icon-blue { background-color: #d1e1f8; }
.feature-icon-peach { background-color: #fee1d0; }
.feature-icon-indigo { background-color: #d8e2f8; }
.feature-icon-gray { background-color: #e5e7eb; }
.feature-card-title { color: #1f2937; font-size: 1.1rem; }
.feature-card-desc { color: #6b7280; font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; }
.feature-card-link { color: #06407b; font-size: 0.85rem; letter-spacing: 0.5px; }

/* Hero precise adjustments to match screenshot scale */
.hero-precise { padding-top:48px; padding-bottom:48px; }
.hero-title { font-size:3.25rem; line-height:1.02; }
.hero-lead { font-size:0.98rem; color:#5b6b7a; margin-top:0.75rem }

/* White framed screenshot on right */
.hero-device { display:inline-block; border-radius:10px; padding:14px; background:white; box-shadow: 0 20px 40px rgba(9,30,63,0.12); }
.hero-device-image { width:560px; height:360px; border-radius:6px; background:linear-gradient(135deg,#cfe9ee 0%, #9cc0c6 100%); box-shadow: inset 0 0 0 4px rgba(255,255,255,0.8); }

/* align left column with navbar spacing */
.container { max-width:1100px; }

@media (max-width:1200px) {
  .hero-title { font-size:2.25rem }
  .hero-device-image { width:420px; height:280px }
}

/* Common Utility Classes - Shared across pages */

/* Color Utilities */
.text-gray-900 { color: #1f2937; }
.text-gray-600 { color: #4b5563; }
.text-gray-500 { color: #6b7280; }
.text-gray-400 { color: #9ca3af; }
.text-gray-300 { color: #d1d5db; }
.text-elu-blue { color: #0b3a76; }
.text-elu-dark-blue { color: #072a55; }
.text-secondary-text { color: #374151; }

.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-light-blue-50 { background-color: #eaf3ff; }
.bg-light-peach-50 { background-color: #fff1ea; }
.bg-light-indigo-50 { background-color: #eef2ff; }

/* Gradient Utilities */
.bg-gradient-primary {
  background: linear-gradient(135deg, #0b3a76 0%, #072a55 100%);
}

.bg-gradient-light-blue {
  background: linear-gradient(135deg, #eaf3ff 0%, #d4e7ff 100%);
}

.bg-gradient-light-peach {
  background: linear-gradient(135deg, #fff1ea 0%, #ffe4d4 100%);
}

/* Border Utilities */
.border-gray-200 { border-color: #e5e7eb !important; }
.border-elu-blue { border-color: #0b3a76; }

/* Layout Utilities */
.max-w-600 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.max-w-700 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.line-height-relaxed { line-height: 1.8; }
.line-height-normal { line-height: 1.6; }
.lead-text-opacity { opacity: 0.9; }

/* Button Utilities */
.btn-elu-blue {
  background-color: #0b3a76;
  color: white;
  font-weight: 600;
}

.btn-outline-elu-blue {
  border-color: #0b3a76;
  color: #0b3a76;
}

.btn-outline-elu-blue:hover {
  background-color: #0b3a76;
  color: white;
}

/* Icon Box Utilities */
.icon-box-60 {
  width: 60px;
  height: 60px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-step-circle {
  width: 60px;
  height: 60px;
  background-color: #0b3a76;
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Feature Image Utilities */
.feature-image-placeholder {
  border-radius: 1rem;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
}