/*
Campus Connect V2
Foundation Stylesheet
Generated Architecture Foundation
*/

:root{
  --bg:#030712;
  --surface:#0b1220;
  --surface-2:#111827;
  --primary:#7C5CFF;
  --secondary:#9D7DFF;
  --text:#FFFFFF;
  --muted:#A1A1AA;
  --border:rgba(255,255,255,.08);

  --container:1200px;
  --radius:20px;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:5rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}

.container{
  width:min(100% - 2rem,var(--container));
  margin-inline:auto;
}

section{padding:120px 0}

h1{font-size:clamp(3rem,6vw,5rem);line-height:1.05}
h2{font-size:clamp(2rem,4vw,3.5rem)}
h3{font-size:1.5rem}

p{color:var(--muted)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  border-radius:999px;
  padding:.9rem 1.4rem;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}

.btn-secondary{
  border:1px solid var(--border);
  color:#fff;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
}

.grid{
  display:grid;
  gap:1.5rem;
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.navbar{
  position:sticky;
  top:0;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.footer{
  border-top:1px solid var(--border);
  padding:4rem 0;
}

@media(max-width:900px){
  section{padding:80px 0}
  .grid-3{grid-template-columns:1fr}
}

.navbar.is-scrolled{
  background: rgba(3,7,18,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

[data-mobile-menu]{
  display:none;
}

[data-mobile-menu].active{
  display:block;
}
/*
====================================================
Campus Connect V2
FINAL Production CSS
Part 1/5
Foundation + Reset + Layout + Typography
====================================================
*/

:root {

  /* Colors */

  --bg: #030712;
  --surface: #0b1220;
  --surface-2: #111827;
  --surface-3: #1f2937;

  --primary: #7C5CFF;
  --primary-hover: #8c70ff;

  --secondary: #9D7DFF;

  --text: #FFFFFF;
  --muted: #A1A1AA;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --border: rgba(255,255,255,.08);

  /* Layout */

  --container: 1200px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  /* Shadows */

  --shadow-sm:
    0 4px 10px rgba(0,0,0,.15);

  --shadow:
    0 10px 30px rgba(0,0,0,.25);

  --shadow-lg:
    0 20px 60px rgba(0,0,0,.35);

  /* Spacing */

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;

  /* Animation */

  --transition:
    .3s cubic-bezier(.4,0,.2,1);

}

/* ====================================================
RESET
==================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding-left: 1.5rem;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

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

button {
  cursor: pointer;
  border: none;
}

/* ====================================================
BODY
==================================================== */

body {

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.7;

  overflow-x: hidden;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

}

/* ====================================================
SELECTION
==================================================== */

::selection {

  background: var(--primary);

  color: #fff;

}

/* ====================================================
SCROLLBAR
==================================================== */

::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {

  background: var(--surface-3);

  border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--primary);

}

/* ====================================================
LAYOUT
==================================================== */

.container {

  width:
    min(
      100% - 2rem,
      var(--container)
    );

  margin-inline: auto;

}

section {

  padding:
    120px 0;

  position: relative;

}

section:first-of-type {

  padding-top: 160px;

}

/* ====================================================
TYPOGRAPHY
==================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-weight: 700;

  letter-spacing: -.03em;

  line-height: 1.1;

  color: var(--text);

}

h1 {

  font-size:
    clamp(
      3rem,
      6vw,
      5.5rem
    );

}

h2 {

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

}

h3 {

  font-size:
    clamp(
      1.2rem,
      2vw,
      1.5rem
    );

}

p {

  color: var(--muted);

  font-size: 1.05rem;

}

strong {

  color: var(--text);

}

/* ====================================================
TEXT SPACING
==================================================== */

h1 + p,
h2 + p,
h3 + p {

  margin-top: 1rem;

}

p + p {

  margin-top: 1rem;

}

h2 {

  margin-bottom: 1rem;

}

h3 {

  margin-bottom: .75rem;

}

/* ====================================================
LISTS
==================================================== */

ul,
ol {

  margin-top: 1rem;

  color: var(--muted);

}

li + li {

  margin-top: .5rem;

}

/* ====================================================
SECTION HEADERS
==================================================== */

section h2 {

  margin-bottom: 1rem;

}

section > .container > p {

  max-width: 750px;

}

/* ====================================================
DIVIDERS
==================================================== */

hr {

  border: none;

  height: 1px;

  background: var(--border);

  margin: 3rem 0;

}

/* ====================================================
HELPERS
==================================================== */

.text-center {

  text-align: center;

}

.text-left {

  text-align: left;

}

.text-right {

  text-align: right;

}

.w-full {

  width: 100%;

}

.hidden {

  display: none !important;

}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

/* ====================================================
IMAGE DEFAULTS
==================================================== */

img {

  border-radius: var(--radius-sm);

}

img[alt] {

  height: auto;

}

/* ====================================================
REVEAL ANIMATION
==================================================== */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition:
    opacity .8s ease,
    transform .8s ease;

}

.reveal.revealed {

  opacity: 1;

  transform: translateY(0);

}

/*
====================================================
Campus Connect V2
FINAL Production CSS
Part 2/5
Navbar + Hero + Buttons
====================================================
*/

/* ====================================================
NAVBAR
==================================================== */

.navbar {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(3, 7, 18, .7);

  backdrop-filter: blur(16px);

  border-bottom: 1px solid transparent;

  transition: all .3s ease;

}

.navbar.is-scrolled {

  background: rgba(3, 7, 18, .95);

  border-bottom: 1px solid var(--border);

}

.navbar .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 80px;

  gap: 2rem;

}

/* ====================================================
LOGO
==================================================== */

.logo {

  display: flex;

  align-items: center;

  gap: .8rem;

  font-weight: 700;

  font-size: 1.1rem;

  color: var(--text);

  white-space: nowrap;

}

.logo img {

  width: 42px;

  height: 42px;

  object-fit: contain;

  border-radius: 10px;

}

/* ====================================================
NAVIGATION
==================================================== */

nav {

  display: flex;

  align-items: center;

  gap: 1.75rem;

}

nav a {

  color: var(--muted);

  font-size: .95rem;

  font-weight: 500;

  transition: var(--transition);

  position: relative;

}

nav a:hover {

  color: var(--text);

}

nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 2px;

  background: var(--primary);

  transition: .3s ease;

}

nav a:hover::after {

  width: 100%;

}

/* ====================================================
BUTTONS
==================================================== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .6rem;

  padding: .95rem 1.5rem;

  border-radius: 999px;

  font-weight: 600;

  transition: var(--transition);

  cursor: pointer;

  white-space: nowrap;

}

.btn:hover {

  transform: translateY(-2px);

}

.btn-primary {

  background: var(--primary);

  color: #fff;

  box-shadow:
    0 10px 30px rgba(124,92,255,.35);

}

.btn-primary:hover {

  background: var(--primary-hover);

  box-shadow:
    0 15px 40px rgba(124,92,255,.45);

}

.btn-secondary {

  border: 1px solid var(--border);

  background: transparent;

  color: var(--text);

}

.btn-secondary:hover {

  background: rgba(255,255,255,.03);

  border-color: rgba(255,255,255,.15);

}

/* ====================================================
BADGE
==================================================== */

.badge {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  padding: .55rem 1rem;

  border-radius: 999px;

  background:
    rgba(124,92,255,.12);

  border:
    1px solid rgba(124,92,255,.25);

  color:
    var(--secondary);

  font-size: .85rem;

  font-weight: 600;

  margin-bottom: 1.5rem;

}

/* ====================================================
HERO
==================================================== */

.hero {

  position: relative;

  overflow: hidden;

}

.hero::before {

  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  background:
    radial-gradient(
      circle,
      rgba(124,92,255,.18),
      transparent 70%
    );

  top: -200px;

  right: -150px;

  pointer-events: none;

}

.hero .container {

  display: grid;

  grid-template-columns: 1.3fr .7fr;

  align-items: center;

  gap: 3rem;

}

.hero-content {

  max-width: 760px;

}

.hero h1 {

  max-width: 850px;

  font-size: clamp(4rem, 6vw, 6rem);

  line-height: .95;

}

.hero-content p {

  margin-top: 1.5rem;

  font-size: 1.15rem;

  max-width: 600px;

}

.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 2rem;

}

/* ====================================================
HERO SHOWCASE
==================================================== */

.hero-showcase {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

}

.hero-showcase img {

  width: 100%;

  height: 380px;

  object-fit: cover;

  border-radius: 20px;

  border: 1px solid var(--border);

  transition: .4s ease;

  background: var(--surface);

}

.hero-showcase img:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(124,92,255,.35);

}

.hero-showcase img:nth-child(1) {
  transform: translateY(0);
}

.hero-showcase img:nth-child(2) {
  transform: translateY(30px);
}

.hero-showcase img:nth-child(3) {
  transform: translateY(60px);
}

/* ====================================================
MOBILE MENU BUTTON
==================================================== */

.menu-toggle {

  display: none;

  background: transparent;

  border: none;

  color: var(--text);

  font-size: 1.6rem;

}

/* ====================================================
MOBILE MENU
==================================================== */

[data-mobile-menu] {

  display: none;

}

[data-mobile-menu].active {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  background: var(--surface);

  padding: 1.5rem;

  border-bottom: 1px solid var(--border);

}

[data-mobile-menu] a {

  color: var(--text);

  padding: .75rem 0;

}

/* ====================================================
RESPONSIVE HERO
==================================================== */

@media (max-width: 1100px) {

  .hero .container {

    grid-template-columns: 1fr;

  }

  .hero-showcase {

    margin-top: 2rem;

  }

}

@media (max-width: 768px) {

  nav {

    display: none;

  }

  .menu-toggle {

    display: block;

  }

  .hero {

    text-align: center;

  }

  .hero-content {

    margin-inline: auto;

  }

  .hero-actions {

    justify-content: center;

  }

  .hero-showcase {

    grid-template-columns: 1fr;

  }

  .hero-showcase img {

    height: auto;

    margin-top: 0 !important;

  }

}

/*
====================================================
Campus Connect V2
FINAL Production CSS
Part 3/5
Cards + Grid System + Sections
====================================================
*/

/* ====================================================
GRID SYSTEM
==================================================== */

.grid {

  display: grid;

  gap: 1.5rem;

}

.grid-2 {

  grid-template-columns:
    repeat(2, minmax(0,1fr));

}

.grid-3 {

  grid-template-columns:
    repeat(3, minmax(0,1fr));

}

.grid-4 {

  grid-template-columns:
    repeat(4, minmax(0,1fr));

}

/* ====================================================
CARDS
==================================================== */

.card {

  position: relative;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 2rem;

  overflow: hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}

.card::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(124,92,255,.03),
      transparent
    );

  pointer-events: none;

}

.card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(124,92,255,.25);

  box-shadow:
    0 20px 50px rgba(0,0,0,.35);

}

.card h3 {

  margin-bottom: .75rem;

}

.card p {

  margin: 0;

}

/* ====================================================
FEATURE CARDS
==================================================== */

.features-grid .card {

  min-height: 240px;

}

.features-grid .card h3 {

  margin-top: 1rem;

}

.feature-icon {

  width: 56px;

  height: 56px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(124,92,255,.12);

  color: var(--secondary);

  font-size: 1.4rem;

}

/* ====================================================
MODULE CARDS
==================================================== */

.module-card {

  height: 100%;

}

.module-card ul {

  margin-top: 1rem;

}

.module-card li {

  color: var(--muted);

}

/* ====================================================
SCREENSHOT SECTION
==================================================== */

.screenshot-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 1.5rem;

}

.screenshot-grid img {

  width: 100%;

  border-radius: 24px;

  border: 1px solid var(--border);

  transition: .35s ease;

}

.screenshot-grid img:hover {

  transform:
    scale(1.03);

  border-color:
    rgba(124,92,255,.35);

}

/* ====================================================
PRODUCT SHOWCASE
==================================================== */

.product-showcase {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 3rem;

  align-items: center;

}

.product-showcase img {

  border-radius: 24px;

  border: 1px solid var(--border);

}

/* ====================================================
METRICS
==================================================== */

.metrics {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 1.5rem;

}

.metric {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 2rem;

  text-align: center;

}

.metric h3 {

  font-size:
    clamp(2rem,4vw,3rem);

  color: var(--primary);

  margin-bottom: .5rem;

}

.metric p {

  font-size: .95rem;

}

/* ====================================================
TEAM SECTION
==================================================== */

.team-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 1.5rem;

}

.team-member {

  text-align: center;

}

.team-member img {

  width: 110px;

  height: 110px;

  border-radius: 50%;

  object-fit: cover;

  margin: 0 auto 1rem;

  border: 2px solid var(--border);

}

.team-member h3 {

  margin-bottom: .3rem;

}

.team-member p {

  font-size: .95rem;

}

/* ====================================================
ROADMAP
==================================================== */

.roadmap {

  position: relative;

  max-width: 900px;

  margin: 0 auto;

}

.roadmap::before {

  content: "";

  position: absolute;

  left: 32px;

  top: 0;

  bottom: 0;

  width: 2px;

  background:
    rgba(124,92,255,.25);

}

.roadmap-item {

  position: relative;

  padding-left: 90px;

  margin-bottom: 3rem;

}

.roadmap-item:last-child {

  margin-bottom: 0;

}

.roadmap-dot {

  position: absolute;

  left: 20px;

  top: 12px;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: var(--primary);

  box-shadow:
    0 0 0 6px rgba(124,92,255,.12);

}

.roadmap-card {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 2rem;

}

.roadmap-phase {

  color: var(--secondary);

  font-size: .9rem;

  font-weight: 600;

  margin-bottom: .5rem;

}

/* ====================================================
TEAM PREVIEW
==================================================== */

.team-preview .card {

  text-align: center;

}

/* ====================================================
CTA SECTION
==================================================== */

.cta {

  position: relative;

  overflow: hidden;

}

.cta::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(124,92,255,.12),
      transparent 70%
    );

  pointer-events: none;

}

.cta .container {

  position: relative;

  text-align: center;

  max-width: 900px;

}

.cta h2 {

  margin-bottom: 1rem;

}

.cta p {

  max-width: 700px;

  margin:
    0 auto 2rem;

}

/* ====================================================
IMPACT SECTION
==================================================== */

.impact-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 1.5rem;

}

.impact-card {

  text-align: center;

  padding: 2rem;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

}

.impact-card h3 {

  color: var(--primary);

  font-size: 2rem;

}

/* ====================================================
PREVIEW CARDS
==================================================== */

.preview-card {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.preview-card img {

  border-radius: 18px;

  border: 1px solid var(--border);

}

/* ====================================================
SECTION BACKGROUNDS
==================================================== */

.section-surface {

  background: var(--surface);

}

.section-surface-2 {

  background: var(--surface-2);

}

/* ====================================================
RESPONSIVE
==================================================== */

@media (max-width: 1100px) {

  .grid-4,
  .metrics,
  .impact-grid {

    grid-template-columns:
      repeat(2,1fr);

  }

  .product-showcase {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4,
  .metrics,
  .impact-grid,
  .team-grid,
  .screenshot-grid {

    grid-template-columns: 1fr;

  }

  .card {

    padding: 1.5rem;

  }

  .roadmap-item {

    padding-left: 70px;

  }

  .roadmap::before {

    left: 24px;

  }

  .roadmap-dot {

    left: 12px;

  }

}

/*
====================================================
Campus Connect V2
FINAL Production CSS
Part 4/5
Forms + FAQ + Blog + Articles
====================================================
*/

/* ====================================================
FORMS
==================================================== */

form {

  width: 100%;

}

.form-group {

  display: flex;

  flex-direction: column;

  gap: .6rem;

  margin-bottom: 1.5rem;

}

label {

  color: var(--text);

  font-size: .95rem;

  font-weight: 600;

}

input,
textarea,
select {

  width: 100%;

  padding: 1rem 1.1rem;

  border-radius: 14px;

  border: 1px solid var(--border);

  background: var(--surface-2);

  color: var(--text);

  transition: var(--transition);

}

input::placeholder,
textarea::placeholder {

  color: var(--muted);

}

input:focus,
textarea:focus,
select:focus {

  outline: none;

  border-color: rgba(124,92,255,.6);

  box-shadow:
    0 0 0 4px rgba(124,92,255,.15);

}

textarea {

  resize: vertical;

  min-height: 140px;

}

select {

  cursor: pointer;

}

/* ====================================================
CONTACT PAGE
==================================================== */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

}

.contact-card {

  height: 100%;

}

.contact-info {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.contact-info a {

  color: var(--secondary);

}

/* ====================================================
FAQ
==================================================== */

.faq-item {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

  margin-bottom: 1rem;

}

.faq-question {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.25rem 1.5rem;

  cursor: pointer;

  background: transparent;

  color: var(--text);

  font-weight: 600;

}

.faq-question:hover {

  background: rgba(255,255,255,.02);

}

.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height .35s ease;

}

.faq-answer p {

  padding: 0 1.5rem 1.5rem;

}

.faq-item.open .faq-answer {

  max-height: 300px;

}

/* ====================================================
BLOG PAGE
==================================================== */

.blog-grid {

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 1.5rem;

}

.blog-card {

  height: 100%;

  display: flex;

  flex-direction: column;

}

.blog-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  margin-bottom: 1rem;

  border-radius: 16px;

}

.blog-card .badge {

  margin-bottom: 1rem;

}

.blog-card p {

  margin-bottom: 1.2rem;

}

.blog-card a {

  color: var(--secondary);

  font-weight: 600;

}

/* ====================================================
ARTICLE HERO
==================================================== */

.article-hero {

  padding-bottom: 80px;

}

.article-hero .container {

  max-width: 900px;

}

.article-meta {

  display: flex;

  flex-wrap: wrap;

  gap: .75rem;

  margin-top: 1.5rem;

  color: var(--muted);

  font-size: .95rem;

}

/* ====================================================
ARTICLE CONTENT
==================================================== */

.article-content {

  padding-top: 0;

}

.article-content .container {

  max-width: 850px;

}

.article-content h2 {

  margin-top: 3rem;

  margin-bottom: 1rem;

}

.article-content h3 {

  margin-top: 2rem;

}

.article-content p {

  margin-bottom: 1.2rem;

}

.article-content img {

  margin:
    2rem auto;

}

.article-content ul,
.article-content ol {

  margin:
    1rem 0 2rem;

}

.article-content li {

  margin-bottom: .6rem;

}

/* ====================================================
BLOCKQUOTE
==================================================== */

blockquote {

  margin:
    2rem 0;

  padding:
    1.5rem 2rem;

  border-left:
    4px solid var(--primary);

  background:
    rgba(124,92,255,.06);

  border-radius:
    0 16px 16px 0;

  color:
    var(--text);

  font-size:
    1.1rem;

  font-style:
    italic;

}

/* ====================================================
AUTHOR CARD
==================================================== */

.author-card {

  display: flex;

  gap: 1.5rem;

  align-items: center;

}

.author-card img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

}

/* ====================================================
RELATED ARTICLES
==================================================== */

.related-articles {

  margin-top: 4rem;

}

.related-articles .card {

  height: 100%;

}

/* ====================================================
DOWNLOAD PAGE
==================================================== */

.download-card {

  text-align: center;

}

.download-card img {

  max-width: 220px;

  margin:
    0 auto 1.5rem;

}

/* ====================================================
SUPPORT PAGE
==================================================== */

.support-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 1.5rem;

}

/* ====================================================
LEGAL PAGES
==================================================== */

.legal-content {

  max-width: 900px;

  margin: 0 auto;

}

.legal-content h2 {

  margin-top: 3rem;

}

.legal-content ul {

  margin-top: 1rem;

}

/* ====================================================
TABLES
==================================================== */

table {

  width: 100%;

  border-collapse: collapse;

  margin:
    2rem 0;

}

th,
td {

  padding: 1rem;

  border:
    1px solid var(--border);

}

th {

  background:
    var(--surface-2);

  color:
    var(--text);

}

td {

  color:
    var(--muted);

}

/* ====================================================
NEWSLETTER
==================================================== */

.newsletter {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

}

.newsletter input {

  flex: 1;

}

/* ====================================================
RESPONSIVE
==================================================== */

@media (max-width: 900px) {

  .contact-grid {

    grid-template-columns: 1fr;

  }

  .blog-grid {

    grid-template-columns: 1fr;

  }

  .support-grid {

    grid-template-columns: 1fr;

  }

  .newsletter {

    flex-direction: column;

  }

  .article-meta {

    gap: .5rem;

  }

}

@media (max-width: 768px) {

  blockquote {

    padding: 1.25rem;

    font-size: 1rem;

  }

  .article-content .container {

    max-width: 100%;

  }

}

/*
====================================================
Campus Connect V2
FINAL Production CSS
Part 5/5
Footer + Utilities + Final Responsive
====================================================
*/

/* ====================================================
FOOTER
==================================================== */

.footer {

  border-top: 1px solid var(--border);

  background: var(--surface);

  padding: 5rem 0 3rem;

}

.footer .container {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.footer-grid {

  display: grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap: 2rem;

}

.footer h3,
.footer h4 {

  margin-bottom: 1rem;

}

.footer p,
.footer a {

  color: var(--muted);

}

.footer a {

  transition: var(--transition);

}

.footer a:hover {

  color: var(--text);

}

.footer-links {

  display: flex;

  flex-direction: column;

  gap: .75rem;

}

.footer-bottom {

  border-top: 1px solid var(--border);

  padding-top: 2rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

}

.footer-social {

  display: flex;

  gap: 1rem;

}

/* ====================================================
UTILITY CLASSES
==================================================== */

.flex {

  display: flex;

}

.flex-center {

  display: flex;

  align-items: center;

  justify-content: center;

}

.flex-between {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.flex-column {

  display: flex;

  flex-direction: column;

}

.items-center {

  align-items: center;

}

.justify-center {

  justify-content: center;

}

.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

.rounded {

  border-radius: var(--radius);

}

.rounded-lg {

  border-radius: var(--radius-lg);

}

.border {

  border: 1px solid var(--border);

}

.surface {

  background: var(--surface);

}

.surface-2 {

  background: var(--surface-2);

}

/* ====================================================
WIDTH UTILITIES
==================================================== */

.max-600 {

  max-width: 600px;

}

.max-700 {

  max-width: 700px;

}

.max-800 {

  max-width: 800px;

}

.max-900 {

  max-width: 900px;

}

.mx-auto {

  margin-inline: auto;

}

/* ====================================================
SPACING UTILITIES
==================================================== */

.py-1 { padding-block: 1rem; }
.py-2 { padding-block: 2rem; }
.py-3 { padding-block: 3rem; }

.px-1 { padding-inline: 1rem; }
.px-2 { padding-inline: 2rem; }
.px-3 { padding-inline: 3rem; }

.m-auto {

  margin: auto;

}

/* ====================================================
ANIMATIONS
==================================================== */

@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(40px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes float {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

  100% {

    transform: translateY(0);

  }

}

.fade-in {

  animation: fadeIn .8s ease;

}

.slide-up {

  animation: slideUp .8s ease;

}

.float {

  animation: float 4s ease-in-out infinite;

}

/* ====================================================
BACK TO TOP
==================================================== */

.back-to-top {

  position: fixed;

  right: 24px;

  bottom: 24px;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  border: 1px solid var(--border);

  background: var(--surface);

  color: var(--text);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  z-index: 999;

  transition: var(--transition);

}

.back-to-top.show {

  opacity: 1;

  visibility: visible;

}

.back-to-top:hover {

  background: var(--primary);

}

/* ====================================================
IMAGE ENHANCEMENTS
==================================================== */

img {

  user-select: none;

}

.image-frame {

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

}

.image-frame img {

  transition: .4s ease;

}

.image-frame:hover img {

  transform: scale(1.03);

}

/* ====================================================
ACCESSIBILITY
==================================================== */

:focus-visible {

  outline: 3px solid rgba(124,92,255,.55);

  outline-offset: 3px;

}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

    scroll-behavior: auto !important;

  }

}

/* ====================================================
PRINT
==================================================== */

@media print {

  .navbar,
  .footer,
  .cta,
  .btn {

    display: none !important;

  }

  body {

    background: #fff;

    color: #000;

  }

}

/* ====================================================
FINAL RESPONSIVE
==================================================== */

@media (max-width: 1100px) {

  .footer-grid {

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media (max-width: 768px) {

  section {

    padding: 80px 0;

  }

  section:first-of-type {

    padding-top: 130px;

  }

  h1 {

    font-size:
      clamp(
        2.5rem,
        10vw,
        4rem
      );

  }

  h2 {

    font-size:
      clamp(
        1.8rem,
        7vw,
        2.8rem
      );

  }

  .btn {

    width: 100%;

  }

  .footer-grid {

    grid-template-columns: 1fr;

  }

  .footer-bottom {

    flex-direction: column;

    text-align: center;

  }

}

@media (max-width: 480px) {

  .container {

    width: min(100% - 1.25rem, var(--container));

  }

  .card {

    padding: 1.25rem;

  }

  .hero-actions {

    flex-direction: column;

  }

}

/* ====================================================
END OF FILE
Campus Connect V2 Production CSS
====================================================
*/