/* Campus Connect ERP - Premium UI V3 */

:root {
  --brand:#88324f;
  --brand-deep:#6c233d;
  --brand-soft:#f8edf2;
  --ink:#1c1b25;
  --ink-muted:#686777;
  --premium-radius:20px;
  --premium-shadow:0 22px 60px rgba(34,20,36,.09);
}

body {
  font-family:"DM Sans",Arial,sans-serif;
  color:var(--ink);
  font-size:15px;
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family:"Manrope",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.035em;
}

::selection {
  background:#e8b6ca;
  color:#351421;
}

/* Header */
.site-header {
  box-shadow:0 5px 28px rgba(20,18,30,.045);
  transition:box-shadow .25s ease,background .25s ease;
}

.site-header.is-scrolled {
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 35px rgba(20,18,30,.09);
}

.site-header .navbar {
  min-height:86px;
}

.navbar-brand {
  min-width:185px;
  gap:10px;
}

.brand-image {
  max-height:62px;
  max-width:245px;
}

.brand-text {
  font-size:18px;
  line-height:1.2;
}

.brand-text small {
  font-size:10px;
  margin-top:4px;
}

.brand.has-image .brand-text {
  display:none;
}

.navbar .nav-link {
  position:relative;
  font-size:13px;
  font-weight:700;
  transition:color .2s ease;
}

.navbar .nav-link.active {
  color:var(--brand);
}

@media(min-width:992px) {
  .navbar .nav-link:not(.btn)::after {
    content:"";
    position:absolute;
    height:2px;
    width:0;
    bottom:1px;
    left:8px;
    background:var(--brand);
    transition:width .25s ease;
  }

  .navbar .nav-link.active::after,
  .navbar .nav-link:hover::after {
    width:calc(100% - 16px);
  }
}

/* Hero */
.hero-section {
  background:
    radial-gradient(ellipse at 80% 22%,rgba(176,80,115,.28),transparent 45%),
    radial-gradient(ellipse at 12% 90%,rgba(122,59,88,.16),transparent 40%),
    linear-gradient(125deg,#191922,#27202c 60%,#49243b);
}

.hero-content h1 {
  font-weight:800;
  letter-spacing:-.055em;
  line-height:1.13;
  text-wrap:balance;
}

.hero-content h1 span {
  background:linear-gradient(100deg,#f4c1d4,#dc91ad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-description {
  max-width:570px;
  font-size:17px;
  line-height:1.85;
}

.hero-pill {
  letter-spacing:.02em;
  backdrop-filter:blur(12px);
}

.hero-actions .btn {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.dashboard-shell {
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    0 32px 85px rgba(0,0,0,.26),
    0 0 0 8px rgba(255,255,255,.035);
}

.dash-stat {
  transition:transform .25s ease,background .25s ease;
}

.dash-stat:hover {
  transform:translateY(-3px);
  background:#f5edf1;
}

/* Sections */
.section-space {
  padding-top:108px;
  padding-bottom:108px;
}

.section-heading {
  max-width:780px;
}

.section-heading h2,
.large-heading {
  letter-spacing:-.045em;
  text-wrap:balance;
}

.section-heading p {
  line-height:1.85;
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
}

.section-tag {
  letter-spacing:.17em;
}

/* Cards */
.feature-card,
.module-card,
.institution-card {
  border-color:#eae5eb;
  box-shadow:0 5px 20px rgba(20,18,30,.025);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.feature-card:hover,
.module-card:hover,
.institution-card:hover {
  transform:translateY(-6px);
  border-color:#d8b4c2;
  box-shadow:var(--premium-shadow);
}

.feature-number {
  letter-spacing:-.06em;
}

.module-icon {
  transition:transform .3s ease,background .3s ease;
}

.module-card:hover .module-icon {
  transform:scale(1.07);
  background:#f0dce5;
}

/* Mobile app */
.mobile-app-section {
  background:linear-gradient(180deg,#fff 0%,#fdf9fb 100%);
}

.mobile-app-heading {
  letter-spacing:-.05em;
}

.platform-card {
  transition:transform .25s ease,box-shadow .25s ease;
}

.platform-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(60,30,45,.08);
}

/* Contact */
.contact-section {
  background:
    radial-gradient(circle at 15% 20%,rgba(172,80,116,.15),transparent 35%),
    linear-gradient(120deg,#191923,#46253a);
}

.contact-form {
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 28px 75px rgba(0,0,0,.18);
}

.contact-form .form-control {
  min-height:48px;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.contact-form textarea.form-control {
  min-height:115px;
}

.contact-form .form-control:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(136,50,79,.11);
}

/* Buttons */
.btn-brand,
.btn-light-premium,
.btn-hero-outline {
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

.btn-brand:focus-visible,
.btn-light-premium:focus-visible,
.btn-hero-outline:focus-visible,
.nav-link:focus-visible {
  outline:3px solid #d99cb3;
  outline-offset:3px;
}

/* Scroll progress */
.cc-scroll-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:2000;
  background:linear-gradient(90deg,#88324f,#e6a4bb);
  pointer-events:none;
}

/* Responsive */
@media(max-width:1199px) {
  .navbar .nav-link {
    margin-left:2px;
    margin-right:2px;
  }
}

@media(max-width:991px) {
  .site-header .navbar {
    min-height:72px;
  }

  .navbar-collapse {
    max-height:75vh;
    overflow-y:auto;
  }

  .hero-section {
    padding:78px 0 90px;
  }

  .hero-content h1 {
    max-width:700px;
  }

  .dashboard-shell {
    max-width:650px;
    margin:0 auto;
  }

  .section-space {
    padding-top:75px;
    padding-bottom:75px;
  }
}

@media(max-width:575px) {
  .brand-image {
    max-width:185px;
    max-height:52px;
  }

  .brand-text {
    font-size:15px;
  }

  .hero-content h1 {
    font-size:clamp(36px,10vw,48px);
    letter-spacing:-.045em;
  }

  .hero-description {
    font-size:15px;
  }

  .section-heading h2,
  .large-heading {
    font-size:clamp(29px,8vw,38px);
  }

  .section-space {
    padding-top:64px;
    padding-bottom:64px;
  }

  .feature-card,
  .module-card {
    padding:25px;
  }

  .contact-form {
    padding:22px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important;
  }

  *,
  *::before,
  *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .reveal {
    opacity:1!important;
    transform:none!important;
  }
}