:root{
  --bg-0:#0b1020;        /* deep night */
  --bg-1:#101735;        /* indigo */
  --bg-2:#182257;        /* sapphire */
  --ink:#e8eefc;         /* pale ink */
  --ink-dim:#bcc7e9;
  --card:#111830;        /* dark card */
  --card-2:#0d1428;
  --edge:#2a3d86;        /* edge/border */
  --glow:#5b7bff;        /* arcane blue */
  --glow-2:#8fb0ff;
  --glow-3:#3b56c9;
  --accent: var(--glow);
  --shadow:0 14px 36px rgba(0,0,0,.55);
}

html,body{height:100%;}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(143,176,255,.12), transparent 60%),
    radial-gradient(900px 700px at 90% 120%, rgba(59,86,201,.20), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 50%, var(--bg-1));
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.55;
}

/* Arcane swirls as page accents */
body::before, body::after{
  content:""; position:fixed; inset:-10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(120px 120px at 20% 35%, rgba(143,176,255,.18), transparent 60%),
    conic-gradient(from 30deg at 80% 20%, rgba(91,123,255,.12), transparent 40%, rgba(91,123,255,.10), transparent 70%);
  filter: blur(12px) saturate(130%);
  animation: swirlA 28s linear infinite;
  opacity:.8;
}
body::after{ animation: swirlB 36s linear infinite reverse; opacity:.55; }
@keyframes swirlA{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes swirlB{ from{ transform: rotate(0deg) scale(1.02);} to{ transform: rotate(-360deg) scale(1);} }

/* Lightning bolt accent using SVG mask on headings & buttons */
.arcane-bolt{
  position:relative;
}
.arcane-bolt::after{
  content:""; position:absolute; left:-8px; top:-8px; right:-8px; bottom:-8px; border-radius:14px;
  background: radial-gradient(60px 60px at 12% 30%, rgba(143,176,255,.25), transparent 60%),
              radial-gradient(40px 40px at 85% 70%, rgba(91,123,255,.18), transparent 65%);
  mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 120 120\"><path d=\"M56 2 L30 70 H60 L48 118 L94 46 H64 L76 2 Z\" fill=\"white\" opacity=\"0.8\"/></svg>') center/30% no-repeat,
    linear-gradient(#fff,#fff);
  mix-blend-mode: screen;
  opacity:.35;
}

/* Containers */
.wrap{
  position:relative; z-index:1;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border-radius: 16px;
  padding: 1.25rem;
}

/* Masthead & nav */
.masthead .brand-name{ color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.35); }
nav ul li a{ color:var(--ink-dim); }
nav ul li a.active{ color:var(--accent); text-shadow:0 0 10px rgba(143,176,255,.35); }

/* Hero */
.hero{
  position:relative; overflow:hidden; min-height:220px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid rgba(91,123,255,.25);
  background: linear-gradient(180deg, rgba(16,23,53,.92), rgba(16,23,53,.78));
  border-radius:18px; padding:1.25rem; box-shadow: var(--shadow);
}
.hero .hero-copy{ max-width:720px; }
.hero .hero-title{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin:0 0 .3rem 0; color:#f0f4ff; }
.hero .hero-sub{ margin:0 0 .75rem 0; color: var(--ink-dim); }
.hero .hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero .card-fan{ position:absolute; right:-40px; bottom:-40px; display:flex; gap:.4rem; transform: rotate(-12deg);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.hero .fan-card{
  width:160px; height:220px; background: linear-gradient(180deg, var(--card), var(--card-2));
  border-radius: 14px; border:1px solid rgba(91,123,255,.25);
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
}

/* Buttons & links */
a{ color:#cfe1ff; text-decoration:none; }
a:hover{ color:#8fb0ff; text-decoration:underline; text-underline-offset:2px; }
.button{
  display:inline-block; padding:.6rem 1rem; border-radius:12px;
  background: linear-gradient(180deg, rgba(143,176,255,.12), rgba(59,86,201,.08));
  border:1px solid rgba(91,123,255,.35); color:#f2f6ff;
  box-shadow: 0 8px 26px rgba(34,40,84,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.button:hover{ transform: translateY(-2px);
  border-color: rgba(143,176,255,.8);
  box-shadow: 0 16px 40px rgba(34,40,84,.65), 0 0 0 2px rgba(143,176,255,.25) inset;
}

/* Card grid */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin-top:1rem; }
.card{
  position:relative; background: linear-gradient(180deg, var(--card), var(--card-2));
  border-radius: 16px; border:1px solid rgba(91,123,255,.25); box-shadow: var(--shadow);
  padding: 1rem; transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.6); border-color: rgba(143,176,255,.5); }
.card h3{ margin:0 0 .5rem 0; font-weight:700; color:#eaf0ff; }
.card .meta{ color:#c7d2f3; font-size:.9rem; }

/* Flip cards */
.card.flip{ perspective: 1000px; padding:0; background: transparent; border:none; box-shadow:none; }
.card.flip .flip-inner{ position:relative; width:100%; height:260px; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.card.flip:hover .flip-inner{ transform: rotateY(180deg); }
.card.flip .face{
  position:absolute; inset:0; border-radius: 16px; overflow:hidden;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(91,123,255,.25); box-shadow: var(--shadow);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; padding:1rem;
}
.card.flip .back{ transform: rotateY(180deg); background: linear-gradient(180deg, rgba(24,34,87,.95), rgba(24,34,87,.85)); color:#eaf0ff; }

/* PDF viewer panels */
.pdf-viewer{
  background: linear-gradient(180deg, rgba(16,23,53,.9), rgba(16,23,53,.7));
  border: 1px solid rgba(91,123,255,.35); border-radius: 16px; padding: .75rem; box-shadow: var(--shadow);
}
.pdf-viewer iframe{ background:#0a0f22; border-radius: 10px; }

/* Modal */
.modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(5,8,18,.75); z-index: 50; padding: 2vw; }
.modal[open]{ display:flex; }
.modal .modal-card{ background: linear-gradient(180deg, rgba(16,23,53,.95), rgba(16,23,53,.8));
  border: 1px solid rgba(143,176,255,.35); border-radius: 16px; width: min(1100px, 96vw); box-shadow: var(--shadow);
  padding: .75rem;
}
.modal header{ display:flex; justify-content:space-between; align-items:center; color:#eaf0ff; padding:.25rem .5rem .5rem .5rem; }
.modal .close{ background: transparent; border:1px solid rgba(143,176,255,.35); color:#dfe8ff; border-radius:8px; padding:.25rem .5rem; cursor:pointer; }
.modal iframe{ width:100%; height:75vh; border-radius: 10px; display:block; background:#0a0f22; border:1px solid rgba(91,123,255,.35); }

footer{ color:#cbd6f6; }

/* Utility */
.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } .hero .card-fan{ display:none; } }


/* === ARCANE BLUE OVERHAUL === */
:root{
  --bg-deep:#0a1026;
  --bg-mid:#121937;
  --bg-glow:#1f2e70;
  --parchment:#0f1531; /* dark parchment */
  --ink:#cfe1ff;       /* cool ink */
  --accent:#4b6bce;    /* sapphire */
  --accent-bright:#8fb0ff;
  --accent-soft:#1b2a64;
  --gold:#b8891a; /* legacy var kept; unused visually */
  --shadow:0 14px 40px rgba(4,8,24,.55);
}

html, body { height:100%; }

body{
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.55;
  background:
    radial-gradient(900px 500px at 65% -10%, rgba(79,118,255,.16), transparent 60%),
    radial-gradient(1200px 700px at -10% 110%, rgba(80,110,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-mid), var(--bg-deep));
}

/* Containers */
.wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(500px 180px at 50% 0, rgba(143,176,255,.06), transparent 60%);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Nav */
nav ul li a{ color: #cfe1ff; }
nav ul li a.active{ color: var(--accent-bright); text-shadow: 0 0 8px rgba(143,176,255,.4); }

/* Buttons & Links */
body a{ color:#cfe1ff; text-decoration: none; }
body a:hover{ color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.button{
  display:inline-block; padding:.6rem 1rem; border-radius:999px;
  border:1px solid rgba(143,176,255,.25);
  background: linear-gradient(180deg, rgba(30,50,120,.35), rgba(10,18,48,.55));
  color:#eaf1ff;
  box-shadow: inset 0 0 0 1px rgba(143,176,255,.15), 0 8px 24px rgba(6,12,32,.6);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.button:hover{ transform: translateY(-2px); border-color: var(--accent-bright); box-shadow: 0 12px 34px rgba(16,30,80,.65); }
.button:focus-visible{ outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* Hero */
.hero{
  position: relative;
  background: linear-gradient(180deg, rgba(18,26,64,.85), rgba(12,18,46,.75));
  border: 1px solid rgba(143,176,255,.14);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero .hero-copy{ color:#e6eeff; }
.hero .hero-title{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin:0 0 .3rem 0; text-shadow: 0 2px 18px rgba(120,160,255,.25); }
.hero .hero-sub{ opacity:.95; margin:0 0 .75rem 0; color:#c7d8ff; }

/* (Lightning removed) */

/* Magical swirl overlay (subtle) */
.swirl-overlay{
  position:fixed; inset:0; pointer-events:none; z-index: 1;
  background:
    radial-gradient(60px 200px at 20% 30%, rgba(120,160,255,.09), transparent 70%),
    radial-gradient(120px 400px at 75% 70%, rgba(120,160,255,.08), transparent 70%),
    conic-gradient(from 210deg at 20% 30%, rgba(100,140,255,.05), transparent 40%, rgba(100,140,255,.05), transparent 80%);
  mix-blend-mode: screen;
}

/* Card grid */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; position:relative; z-index:2; }
.card{
  position:relative; background: linear-gradient(180deg, rgba(24,32,72,.85), rgba(14,20,52,.9));
  border-radius: 16px; border: 1px solid rgba(143,176,255,.14); box-shadow: var(--shadow);
  padding: 1rem; transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(10,18,48,.8); border-color: rgba(143,176,255,.3); }
.card h3{ margin:0 0 .5rem 0; font-weight:700; color:#e6eeff; }
.card .meta{ color:#b9cbff; font-size:.9rem; }

/* Flip card */
.card.flip{ background: transparent; border:none; box-shadow:none; padding:0; }
.card.flip .flip-inner{ position:relative; width:100%; height:260px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.card.flip:hover .flip-inner{ transform: rotateY(180deg); }
.card.flip .face{
  position:absolute; inset:0; border-radius: 16px; overflow:hidden;
  background: linear-gradient(180deg, rgba(24,32,72,.9), rgba(14,20,52,.95));
  border:1px solid rgba(143,176,255,.16); box-shadow: var(--shadow);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding:1rem; color:#dbe7ff;
}
.card.flip .back{
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(40,56,120,.9), rgba(18,28,80,.92));
  border:1px solid rgba(143,176,255,.25);
}

/* PDF viewer panels */
.pdf-viewer{
  background: linear-gradient(180deg, rgba(18,26,64,.85), rgba(12,18,46,.75));
  border: 1px solid rgba(143,176,255,.18);
  border-radius: 16px; padding: .75rem;
  box-shadow: var(--shadow);
}
.pdf-viewer iframe{ background: #0a0f24; border-radius: 10px; }

/* Footer */
footer{ color:#b3c6ff; }

/* Responsive */
@media (max-width: 900px){ .hero .lightning{ display:none; } }


/* Hero-local swirls (decorative, non-blocking) */
.hero{
  position: relative;
}
.hero .swirls{
  position:absolute; inset:0; pointer-events:none; z-index: 0;
  background:
    radial-gradient(120px 380px at 15% 35%, rgba(120,160,255,.10), transparent 70%),
    radial-gradient(220px 520px at 85% 60%, rgba(120,160,255,.08), transparent 70%),
    conic-gradient(from 260deg at 30% 40%, rgba(120,160,255,.08), transparent 35%, rgba(120,160,255,.06), transparent 80%);
  mix-blend-mode: screen;
  animation: swirl-shift 24s linear infinite;
}
@keyframes swirl-shift {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-1%,0) rotate(2deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

/* Ensure text / buttons are above any decorations */
.hero .hero-copy.on-top{ position: relative; z-index: 2; }
.card, .pdf-viewer { position: relative; z-index: 1; }

/* Remove any chance of decorative layers blocking interactions */
.swirl-overlay, .hero .swirls { pointer-events: none; }


/* Home */
nav ul li:nth-child(2) a::before{ content:"📜"; } /* Project Details */
nav ul li:nth-child(3) a::before{ content:"🧙"; } /* Team */
nav ul li:nth-child(4) a::before{ content:"📚"; } /* Documents */
nav ul li:nth-child(5) a::before{ content:"🧪"; } /* Code & Demo */
nav ul li:nth-child(6) a::before{ content:"✉️"; } /* Contact */

/* Make cards obviously interactive */
.card[data-pdf], .card.flip{ cursor: pointer; }
.card[data-pdf]:hover .front h3, .card.flip:hover .front h3 { text-decoration: underline; text-decoration-color: var(--accent-bright); }


/* Page icons in nav (custom SVGs) */
nav ul li a::before{
  content:"";
  display:inline-block;
  width:1.1em; height:1.1em;
  margin-right:.45rem;
  vertical-align:-0.15em;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(16,30,80,.35));
}
nav ul li:nth-child(1) a::before{ background-image:url('icons/home-quill.svg'); }
nav ul li:nth-child(2) a::before{ background-image:url('icons/project-scroll.svg'); }
nav ul li:nth-child(3) a::before{ background-image:url('icons/team-wizardhat.svg'); }
nav ul li:nth-child(4) a::before{ background-image:url('icons/docs-books.svg'); }
nav ul li:nth-child(5) a::before{ background-image:url('icons/code-flask.svg'); }
nav ul li:nth-child(6) a::before{ background-image:url('icons/contact-envelope.svg'); }


/* Brighter section headers for readability */
main h1, main h2, main h3,
section > h1, section > h2, section > h3,
.section h1, .section h2, .section h3 {
  color: #eaf1ff; /* very light sapphire-white */
  text-shadow: 0 2px 10px rgba(120,160,255,.25);
}

/* Slight spacing to separate headers from content */
main h2 { margin-top: 1.2rem; margin-bottom: .6rem; }
main h3 { margin-top: 1rem; margin-bottom: .5rem; }


/* Document card fronts: icon-centric */
.face.front .doc-icon{
  display:flex; align-items:center; justify-content:center;
  padding-top:.5rem;
}
.face.front .doc-icon img{
  width: 72%; max-width: 220px; height:auto; display:block;
  filter: drop-shadow(0 8px 24px rgba(16,30,80,.45));
}
.face.front .doc-label{
  text-align:center; margin-top:.5rem; color:#eaf1ff; font-weight:600; letter-spacing:.2px;
  opacity:.95;
}

/* Backs: description text and actions */
.face.back .doc-desc{ color:#d2e0ff; margin: .25rem 0 .75rem 0; line-height:1.45; }
.face.back .doc-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }


/* Arcane blue pulsing logo effect */
.brand img {
  height: 80px;  /* adjust size as you like */
  animation: pulseGlow 6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(120,160,255,0.4));
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(120,160,255,0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 14px rgba(160,200,255,0.6));
  }
}