@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

html { scroll-behavior: smooth; }
body {
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--itsal-ink);
  background: var(--itsal-bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.navbar-brand { font-family:"Manrope",sans-serif; }

a { color: var(--itsal-green); }
a:hover { color: var(--itsal-green-dark); }

.topbar {
  background: var(--itsal-green-dark);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
}
.topbar span { letter-spacing:.02em; }
.topbar a { color: #fff; text-decoration: none; }

.site-navbar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(0,79,73,.1);
  box-shadow:0 6px 24px rgba(0,79,73,.04);
  backdrop-filter: blur(12px);
}
.site-navbar .container { min-height:72px; }
.navbar-brand { display:flex; align-items:center; gap:.85rem; color:var(--itsal-ink)!important; }
.brand-mark {
  width: 52px; height:52px; object-fit:contain;
}
.brand-text strong { display:block; line-height:1.05; color:var(--itsal-green-dark); font-size:1.08rem; }
.brand-text small { color:var(--itsal-gold); font-size:.66rem; font-weight:800; letter-spacing:.1em; }
.nav-link { position:relative; font-weight:600; color:#38514d!important; font-size:.92rem; }
.nav-link:hover, .nav-link.active { color:var(--itsal-green)!important; }
.nav-link:not(.btn)::after { content:""; position:absolute; left:.5rem; right:.5rem; bottom:.15rem; height:2px; background:var(--itsal-gold); transform:scaleX(0); transition:transform .2s ease; }
.nav-link.active::after,.nav-link:hover::after { transform:scaleX(1); }

.btn-itsal {
  background: var(--itsal-green);
  color:#fff!important;
  border:1px solid var(--itsal-green);
  border-radius:10px;
  font-weight:700;
  padding:.72rem 1.05rem;
}
.btn-itsal:hover { background:var(--itsal-green-dark); border-color:var(--itsal-green-dark); }

.btn-outline-itsal {
  background:#fff;
  color:var(--itsal-green)!important;
  border:1px solid rgba(7,88,79,.25);
  border-radius:10px;
  font-weight:700;
  padding:.72rem 1.05rem;
}
.btn-outline-itsal:hover { background:var(--itsal-green-soft); border-color:var(--itsal-green); }

.hero {
  position:relative;
  overflow:hidden;
  background: radial-gradient(circle at 80% 20%,rgba(0,166,151,.3),transparent 34%), linear-gradient(125deg,#006e66 0%,#003f3b 78%);
  color:#fff;
  border-radius:2px 2px 42px 2px;
  padding: 5.4rem 3.8rem;
  box-shadow: var(--shadow-md);
}
.hero::after {
  content:"";
  position:absolute;
  width:360px; height:360px;
  border-radius:50%;
  right:-110px; top:-150px;
  background:rgba(255,255,255,.06);
}
.hero::before {
  content:"";
  position:absolute;
  width:210px; height:210px;
  border-radius:50%;
  right:160px; bottom:-150px;
  border:34px solid rgba(197,165,77,.09);
}
.hero-content { position:relative; z-index:2; max-width:730px; }
.hero-emblem { position:absolute; z-index:1; width:min(38%,410px); height:auto; right:1.5rem; top:50%; transform:translateY(-50%); opacity:.16; filter:saturate(.8); }
.eyebrow {
  color:var(--itsal-gold);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
}
.eyebrow::before { content:""; display:inline-block; width:28px; height:2px; margin-right:.65rem; vertical-align:middle; background:currentColor; }
.hero h1 { font-weight:800; font-size:clamp(2.5rem,5vw,4.9rem); line-height:.98; letter-spacing:-.035em; }
.hero h1 span { color:var(--itsal-gold); }
.hero p { color:rgba(255,255,255,.88); font-size:1.08rem; max-width:760px; }

.info-strip {
  margin:0 2.5rem; position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border-bottom:1px solid var(--itsal-border); box-shadow:0 18px 45px rgba(6,63,58,.08);
}
.info-item { display:flex; align-items:center; gap:1.1rem; padding:1.6rem; border-right:1px solid var(--itsal-border); }
.info-item:last-child { border-right:0; }
.info-item>span { color:var(--itsal-gold); font:700 .75rem/1 "Manrope",sans-serif; }
.info-item strong,.info-item small { display:block; }
.info-item strong { color:var(--itsal-ink); font-size:.95rem; }
.info-item small { color:var(--itsal-muted); margin-top:.15rem; }

.section-wrap { padding:5.5rem 0; }
.section-title { max-width:780px; margin-bottom:2rem; }
.section-title .eyebrow { margin-bottom:.45rem; display:block; }
.section-title h2 { font-weight:800; color:var(--itsal-ink); font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-.04em; line-height:1.08; }
.section-title p { color:var(--itsal-text); }
.editorial-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:5rem; align-items:end; margin-bottom:3rem; }
.editorial-heading h2,.service-intro h2 { margin:0; font-weight:800; font-size:clamp(2.1rem,4.5vw,3.7rem); line-height:1.05; letter-spacing:-.055em; }
.editorial-heading p { color:var(--itsal-text); font-size:1.03rem; line-height:1.7; margin:0 0 .35rem; }
.database-directory { border-top:1px solid #cbdad7; }
.database-entry { display:grid; grid-template-columns:200px 1fr 64px; align-items:center; gap:2rem; min-height:155px; border-bottom:1px solid #cbdad7; transition:background .2s ease,padding .2s ease; }
.database-entry:hover { background:#fff; padding-inline:1.25rem; }
.database-entry .database-logo { margin:0; height:100px; }
.database-copy { display:grid; grid-template-columns:minmax(150px,.45fr) minmax(260px,1fr); align-items:center; gap:.5rem 2rem; }
.database-copy .tag { grid-column:1; color:var(--itsal-green); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.database-copy h3 { grid-column:1; margin:0; font-size:1.55rem; font-weight:800; }
.database-copy p { grid-column:2; grid-row:1 / span 2; color:var(--itsal-text); margin:0; max-width:500px; }
.directory-link { display:grid; place-items:center; width:52px; height:52px; border:1px solid #b7cbc7; border-radius:50%; color:var(--itsal-green); text-decoration:none; font-size:1.35rem; transition:.2s ease; }
.directory-link:hover { color:#fff; background:var(--itsal-green); border-color:var(--itsal-green); transform:rotate(10deg); }
.text-link { display:inline-flex; gap:1rem; align-items:center; margin-top:2rem; color:var(--itsal-green); font-weight:800; text-decoration:none; border-bottom:1px solid var(--itsal-green); padding-bottom:.3rem; }
.text-link span { transition:transform .2s ease; }.text-link:hover span { transform:translateX(4px); }
.database-note { display:grid; grid-template-columns:180px 1fr; gap:2rem; margin-top:2.2rem; padding-top:1.5rem; border-top:3px solid var(--itsal-gold); }
.database-note h3 { margin:0; color:var(--itsal-green-dark); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; }
.database-note p { margin:0; color:var(--itsal-text); }

.database-card {
  position:relative; overflow:hidden; background:#fff; border:0;
  border-radius:2px; padding:1.8rem;
  box-shadow:0 10px 35px rgba(24,49,46,.08); height:100%;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.database-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--itsal-green); transform:scaleY(.25); transform-origin:bottom; transition:transform .25s ease; }
.database-card.gold::before { background:var(--itsal-gold); }
.database-card:hover::before { transform:scaleY(1); }
.database-logo {
  height:84px; display:flex; align-items:center; justify-content:flex-start;
  margin-bottom:1.25rem; padding:.4rem .25rem;
}
.database-logo img { display:block; max-width:170px; max-height:76px; width:auto; height:auto; object-fit:contain; }
.database-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.database-badge {
  width:58px; height:58px; border-radius:14px;
  display:grid; place-items:center; font-weight:800;
  margin-bottom:1.25rem; background:var(--itsal-green-soft); color:var(--itsal-green);
}
.database-card.gold .database-badge { background:var(--itsal-gold-soft); color:#876f2d; }
.database-card h3 { font-size:1.25rem; font-weight:800; margin-bottom:.3rem; }
.database-card .tag { color:var(--itsal-green); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.database-card p { color:var(--itsal-text); flex-grow:1; }

.feature-card {
  position:relative; background:#fff; border:0; border-radius:2px;
  padding:2rem; height:100%; box-shadow:0 10px 35px rgba(24,49,46,.07);
}
.feature-card::after { content:""; position:absolute; left:2rem; top:0; width:46px; height:3px; background:var(--itsal-gold); }
.feature-icon {
  width:auto; height:auto; background:none;
  display:block; color:rgba(0,122,112,.22); font:800 2.8rem/1 "Manrope",sans-serif; margin-bottom:1.1rem;
}
.feature-card h3 { font-size:1.1rem; font-weight:800; }
.feature-card p { color:var(--itsal-text); margin-bottom:0; }
.service-section { background:var(--itsal-green-dark); color:#fff; padding:6rem 0; margin:1rem 0 5rem; }
.service-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:7rem; align-items:start; }
.service-intro h2 { color:#fff; margin-top:1rem; }
.service-index { border-top:1px solid rgba(255,255,255,.2); }
.service-index a { display:grid; grid-template-columns:42px 1fr auto; grid-template-areas:"n title arrow" "n text arrow"; gap:.2rem 1rem; align-items:center; padding:1.45rem .2rem; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; text-decoration:none; transition:padding .2s ease,background .2s ease; }
.service-index a:hover { padding-inline:1rem; background:rgba(255,255,255,.055); }
.service-index span { grid-area:n; color:var(--itsal-gold); font-size:.72rem; }
.service-index strong { grid-area:title; font:700 1.08rem/1.3 "Manrope",sans-serif; }
.service-index small { grid-area:text; color:rgba(255,255,255,.62); }
.service-index b { grid-area:arrow; color:var(--itsal-gold); font-size:1.25rem; }

.cta {
  background:#fff;
  border:1px solid var(--itsal-border);
  border-left:6px solid var(--itsal-gold);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--shadow-sm);
}
.cta h3 { font-weight:800; color:var(--itsal-green-dark); }
.cta p { color:var(--itsal-text); margin-bottom:0; }

.page-hero {
  position:relative; overflow:hidden; background:linear-gradient(120deg,#006e66,#003f3b);
  color:#fff; border-radius:2px 2px 34px 2px; padding:4.4rem 3.4rem; margin-top:2rem;
}
.page-hero::after { content:"ITSAL"; position:absolute; right:-.04em; bottom:-.28em; color:rgba(255,255,255,.045); font:800 9rem/1 "Manrope",sans-serif; letter-spacing:-.08em; }
.page-hero h1 { position:relative; z-index:1; font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.045em; }
.page-hero .eyebrow { color:var(--itsal-gold); }
.page-hero p { color:rgba(255,255,255,.85); max-width:760px; }

.resource-list .list-group-item {
  position:relative; border:0; border-bottom:1px solid var(--itsal-border);
  padding:1.5rem 4rem 1.5rem 1.5rem;
}
.resource-list .list-group-item::after { content:"↗"; position:absolute; right:1.5rem; top:50%; transform:translateY(-50%); color:var(--itsal-gold); font-size:1.4rem; }
.resource-list strong { color:var(--itsal-ink); }
.resource-list small { color:var(--itsal-muted); }
.guide-layout { display:grid; grid-template-columns:300px 1fr; gap:7rem; align-items:start; }
.guide-layout aside { position:sticky; top:130px; }
.guide-layout aside h2 { margin:1rem 0; font-size:2rem; font-weight:800; letter-spacing:-.04em; }
.guide-layout aside p { color:var(--itsal-text); }
.guide-accordion { border-top:1px solid #bdcfcb; }
.guide-accordion .accordion-item { border:0; border-bottom:1px solid #bdcfcb; border-radius:0; background:transparent; }
.guide-accordion .accordion-button { gap:1.25rem; padding:1.65rem .25rem; background:transparent; color:var(--itsal-ink); box-shadow:none; font:700 1.15rem/1.35 "Manrope",sans-serif; }
.guide-accordion .accordion-button:not(.collapsed) { color:var(--itsal-green); }
.guide-accordion .accordion-button::after { filter:none; }
.guide-accordion .accordion-body { padding:.1rem 3.25rem 1.7rem; color:var(--itsal-text); font-size:1rem; line-height:1.75; }
.menu-glyph { width:26px; flex:0 0 26px; color:var(--itsal-gold); font-size:1.25rem; line-height:1; transition:transform .2s ease; }
.accordion-button:not(.collapsed) .menu-glyph { transform:rotate(90deg); }
.contact-email { position:relative; display:flex; flex-direction:column; padding:1.4rem 3.5rem 1.4rem 0; margin-top:1.5rem; border-top:1px solid #bed0cc; border-bottom:1px solid #bed0cc; text-decoration:none; }
.contact-email span { color:var(--itsal-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.contact-email strong { color:var(--itsal-green); font-size:clamp(1.15rem,3vw,1.65rem); margin-top:.25rem; }
.contact-email b { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); color:var(--itsal-gold); font-size:1.4rem; }
.mission-statement { display:grid; grid-template-columns:100px 1fr; gap:2rem; max-width:1040px; margin-inline:auto; align-items:start; }
.mission-statement>span { color:var(--itsal-gold); font:700 8rem/.75 Georgia,serif; }
.mission-statement p { margin:0; max-width:820px; color:var(--itsal-ink); font:600 clamp(1.25rem,2.4vw,2rem)/1.5 "Manrope",sans-serif; letter-spacing:-.025em; }

.login-shell {
  max-width:1040px; margin:4.5rem auto;
  background:#fff; border:0;
  border-radius:2px 2px 32px 2px; box-shadow:0 24px 70px rgba(6,63,58,.14); overflow:hidden;
}
.login-side { position:relative; overflow:hidden; min-height:570px; background:linear-gradient(145deg,#007a70,#003d39); color:#fff; padding:4rem 3.2rem; display:flex; flex-direction:column; justify-content:flex-end; }
.login-side::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(215,173,63,.35); border-radius:50%; left:-120px; top:-100px; }
.login-emblem { position:absolute; width:290px; top:35px; right:-70px; opacity:.16; }
.login-side h1 { position:relative; font-size:clamp(2.5rem,4vw,3.6rem); line-height:1.02; letter-spacing:-.05em; }
.login-side p,.login-side .eyebrow { position:relative; }
.login-main { padding:4.2rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.login-kicker { color:var(--itsal-gold); font-weight:800; letter-spacing:.13em; text-transform:uppercase; font-size:.75rem; margin-bottom:.65rem; }
.login-main h2 { font-size:2rem; font-weight:800; letter-spacing:-.035em; margin-bottom:.55rem; }
.login-intro { color:var(--itsal-text); margin-bottom:2rem; }
.login-form .form-label { font-weight:700; color:var(--itsal-ink); font-size:.9rem; margin-bottom:.55rem; }
.login-form .form-control { min-height:54px; border:1px solid #d5e2df; border-radius:2px; padding:.8rem 1rem; background:#fbfdfc; }
.login-form .form-control:focus { border-color:var(--itsal-green); box-shadow:0 0 0 4px rgba(0,122,112,.1); background:#fff; }
.login-help { color:var(--itsal-green); font-size:.82rem; font-weight:700; text-decoration:none; }
.form-check-input:checked { background-color:var(--itsal-green); border-color:var(--itsal-green); }
.login-main .notice { background:var(--itsal-green-soft); border:1px solid #cfe4df; border-radius:12px; padding:1rem; color:#355b55; }

footer {
  margin-top:4rem; background:var(--itsal-green-dark); color:rgba(255,255,255,.78);
}
.footer-brand { display:block; width:230px; margin-bottom:1.25rem; padding:.65rem .85rem; background:rgba(255,255,255,.96); border:1px solid rgba(215,173,63,.45); border-radius:2px 2px 14px 2px; }
.footer-brand img { display:block; width:100%; height:auto; filter:drop-shadow(0 2px 2px rgba(0,79,73,.08)); }
footer h5 { color:#fff; font-weight:800; }
footer a { color:rgba(255,255,255,.82); text-decoration:none; }
footer a:hover { color:#fff; }
footer .status-pill { display:flex; width:max-content; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); }

.status-pill {
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:999px; padding:.45rem .75rem;
  background:var(--itsal-green-soft); color:var(--itsal-green); font-weight:700; font-size:.82rem;
}
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--itsal-green); }