/* ========================================================
   Fjordify.ink — Complete ready-to-paste CSS
   File: css/style.css
   Prefix: fjordify-ink-*
   Palette:
     --bg: #2a0007
     --accent: #ff6492
     --text: #ffa7bc
     --btn-text: #2a0007
     --btn-hover: #ffa7bc
   Font: Poppins (loaded by HTML)
   ======================================================== */

/* -------------------------
   CSS Variables & Base
   ------------------------- */
:root{
  --bg: #2a0007;
  --accent: #ff6492;
  --text: #ffa7bc;
  --btn-text: #2a0007;
  --btn-hover: #ffa7bc;
  --card-bg: rgba(255,255,255,0.02);
  --glass-border: rgba(255,100,146,0.15);
  --max-game-width: 900px;
  --radius: 14px;
  --ease-fast: 180ms;
  --ease: 300ms;
  --shadow-accent: 0 8px 30px rgba(255,100,146,0.08);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  -webkit-tap-highlight-color: transparent;
}

/* Links */
a{ color: var(--accent); text-decoration: none; transition: color var(--ease); }
a:hover{ color: var(--btn-hover); text-decoration: none; }

/* Utility helpers */
.container{ max-width:1200px; margin:0 auto; padding:0 18px; }
.text-center{ text-align:center; }

/* -------------------------
   Unified Section Titles — Centered Everywhere
   ------------------------- */
.fjordify-ink-section-title,
.fjordify-ink-hero-title,
.fjordify-ink-disclaimer-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--accent);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0 auto 18px auto;

  text-align: center !important;
  display: block !important;
  width: 100%;
  position: relative;
}



.fjordify-ink-section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--accent);
  margin: 10px auto 0 auto;
  opacity: 0.8;
}

/* Hero title */
.fjordify-ink-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.3;
}

/* Disclaimer heading */
.fjordify-ink-disclaimer-title {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
}

/* Override Bootstrap or flex alignments that cause offset */
section[class*="fjordify-ink"] h1,
section[class*="fjordify-ink"] h2,
section[class*="fjordify-ink"] .fjordify-ink-section-title {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* -------------------------
   NAVBAR
   ------------------------- */
.fjordify-ink-nav{
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  position: sticky;
  top:0;
  z-index:1000;
  padding:10px 0;
  border-bottom: 1px solid rgba(255,100,146,0.06);
  backdrop-filter: blur(6px);
}
.fjordify-ink-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fjordify-ink-logo{ height:46px; display:block; transition: transform var(--ease); }
.fjordify-ink-logo:hover{ transform: scale(1.03); }

/* nav links */
.fjordify-ink-nav .nav-link{
  color: var(--text);
  font-weight:500;
  margin:0 10px;
  transition: color var(--ease), text-shadow var(--ease);
}
.fjordify-ink-nav .nav-link:hover,
.fjordify-ink-nav .nav-link.active{
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255,100,146,0.22);
}

/* toggler */
.navbar-toggler{
  border: none;
  background: var(--accent);
  color: var(--btn-text);
  padding:8px 10px;
  border-radius:8px;
}
.navbar-toggler:focus{ outline:none; box-shadow: 0 0 14px rgba(255,100,146,0.18); }
.fjordify-ink-toggler-icon i{ color: var(--btn-text); font-size:18px; }

/* mobile collapse styling */
@media (max-width: 991px){
  .fjordify-ink-nav .navbar-collapse{
    background: rgba(42,0,7,0.98);
    padding: 12px 18px;
    border-top: 1px solid rgba(255,100,146,0.04);
  }
  .fjordify-ink-nav .nav-link{ display:block; padding:10px 0; margin:4px 0; }
}

/* -------------------------
   HERO
   ------------------------- */
.fjordify-ink-hero{
  position: relative;
  min-height: 56vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 64px 18px;
  background:
    linear-gradient(180deg, rgba(42,0,7,0.72), rgba(42,0,7,0.72)),
    url('images/hero-bg.jpg') center/cover no-repeat;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,100,146,0.04);
}
.fjordify-ink-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 40%, rgba(255,100,146,0.06), transparent 40%);
  z-index:1;
}
.fjordify-ink-hero .container{ position:relative; z-index:2; max-width:920px; }

/* hero text */
.fjordify-ink-hero-title{ margin-bottom:12px; line-height:1.05; }
.fjordify-ink-hero-sub{
  color: var(--text);
  max-width:760px;
  margin: 0 auto 22px;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  opacity: 0.95;
  line-height:1.6;
}

/* CTA */
.fjordify-ink-btn{
  display:inline-block;
  background: var(--accent);
  color: var(--btn-text);
  padding: 12px 28px;
  border-radius: 999px;
  font-weight:700;
  box-shadow: var(--shadow-accent);
  transition: transform var(--ease), background var(--ease);
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.fjordify-ink-btn:hover{
  background: var(--btn-hover);
  transform: translateY(-3px);
}

/* -------------------------
   DISCLAIMER CARD (home)
   ------------------------- */
.fjordify-ink-disclaimer{ padding:60px 18px; }
.fjordify-ink-disclaimer-card{
  max-width:860px;
  margin:0 auto;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding:36px 30px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), inset 0 0 24px rgba(255,100,146,0.03);
  backdrop-filter: blur(8px);
}
.fjordify-ink-disclaimer-title{ margin-bottom:12px; }
.fjordify-ink-disclaimer-text{ color:var(--text); margin-bottom:12px; }

/* small button */
.fjordify-ink-small-btn{
  display:inline-block;
  margin-top:8px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding:8px 16px;
  border-radius: 999px;
}
.fjordify-ink-small-btn:hover{ background: var(--btn-hover); color:var(--btn-text); border-color: var(--btn-hover); }

/* -------------------------
   PLAY / GAME (responsive 16:9, max 900px)
   ------------------------- */
.fjordify-ink-play{ padding:60px 18px; text-align:center; }
.fjordify-ink-game-wrap{ max-width: var(--max-game-width); width:100%; margin:0 auto; }
.fjordify-ink-video-ratio{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 20px rgba(255,100,146,0.04);
  border: 1px solid rgba(255,100,146,0.05);
}
.fjordify-ink-video-ratio iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000;
}

/* -------------------------
   FEATURES GRID
   ------------------------- */
.fjordify-ink-features{ padding:60px 18px; }
.fjordify-ink-features-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}
.fjordify-ink-feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-radius: 12px;
  padding:22px;
  text-align:center;
  border:1px solid rgba(255,100,146,0.04);
  transition: transform var(--ease), box-shadow var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.fjordify-ink-feature-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 46px rgba(0,0,0,0.6); }
.fjordify-ink-feature-icon{ color:var(--accent); font-size:1.8rem; margin-bottom:10px; }

/* ABOUT SECTION */
.fjordify-ink-about {
  background-color: #2a0007;
  color: #ffa7bc;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.fjordify-ink-about-content {
  max-width: 600px;
  margin: 0 auto;
}

.fjordify-ink-section-title {
  color: #ff6492;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(255, 100, 146, 0.5);
  border-bottom: 2px solid #ff6492;
  display: inline-block;
  padding-bottom: 6px;
}

.fjordify-ink-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  font-weight: 500;
}

.fjordify-ink-body {
  font-size: 1rem;
  line-height: 1.7;
}

.fjordify-ink-about-img {
  width: 100%;
  max-width: 500px;
  border: 2px solid #ff6492;
  border-radius: 18px;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.fjordify-ink-about-img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(255, 100, 146, 0.6);
}

.fjordify-ink-image-overlay {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(42, 0, 7, 0.1), rgba(42, 0, 7, 0.6));
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .fjordify-ink-about-content {
    text-align: center;
  }
  .fjordify-ink-about-img {
    max-width: 90%;
  }
}

/* -------------------------
   REVIEWS
   ------------------------- */
.fjordify-ink-reviews{ padding:60px 18px; }
.fjordify-ink-reviews-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  align-items:start;
}
.fjordify-ink-review-card{
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  padding:20px;
  border-radius:12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  transition: transform var(--ease);
}
.fjordify-ink-review-card:hover{ transform: translateY(-6px); }
.fjordify-ink-review-card p{ margin:0 0 10px; color:var(--text); font-style:italic; }
.fjordify-ink-review-card h5{ margin:0; color:var(--accent); font-size:.95rem; font-weight:600; text-transform:none; }

/* -------------------------
   CONTACT
   ------------------------- */
.fjordify-ink-contact{ padding:60px 18px; }
.fjordify-ink-contact-wrapper{ gap:26px; display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.fjordify-ink-contact-info{
  flex:1 1 300px;
  min-width:260px;
  background: var(--card-bg);
  border-radius:12px;
  padding:22px;
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.fjordify-ink-contact-heading{ color:var(--accent); font-weight:700; margin-bottom:8px; }
.fjordify-ink-contact-form{
  flex:1 1 340px;
  min-width:260px;
  background: var(--card-bg);
  padding:18px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.fjordify-ink-contact-form input,
.fjordify-ink-contact-form textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid rgba(255,100,146,0.06);
  background: rgba(255,255,255,0.01);
  color: var(--text);
  outline:none;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.fjordify-ink-contact-form input:focus,
.fjordify-ink-contact-form textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255,100,146,0.08);
}

/* -------------------------
   FOOTER
   ------------------------- */
.fjordify-ink-footer{
  padding:48px 18px;
  border-top:1px solid rgba(255,100,146,0.04);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}
.fjordify-ink-footer-logo{ max-width:140px; margin:0 auto 12px; display:block; filter: drop-shadow(0 6px 18px rgba(255,100,146,0.08)); }
.fjordify-ink-footer-nav{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:18px; }
.fjordify-ink-footer-nav a{ color:var(--text); font-weight:500; transition: color var(--ease); }
.fjordify-ink-footer-nav a:hover{ color:var(--accent); text-shadow: 0 0 8px rgba(255,100,146,0.14); }
.fjordify-ink-footer-disclaimer{
  max-width:920px; margin:0 auto 18px; text-align:center;
  background: var(--card-bg); border-radius:12px; padding:18px; border:1px solid var(--glass-border);
}
.fjordify-ink-footer-copy{ color:var(--text); font-size:.95rem; }

/* === POPUP OVERLAY === */
.fjordify-ink-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(42, 0, 7, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Visible state */
.fjordify-ink-popup.active {
  visibility: visible;
  opacity: 1;
}

/* === POPUP INNER BOX === */
.fjordify-ink-popup-inner {
  background: #2a0007;
  border: 2px solid #ff6492;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255, 100, 146, 0.6);
  padding: 40px 30px;
  max-width: 520px;
  text-align: center;
  color: #ffa7bc;
  animation: fadeUp 0.5s ease forwards;
}

.fjordify-ink-popup-title {
  color: #ff6492;
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-shadow: 0 0 8px #ff6492;
  border-bottom: 1px solid rgba(255, 100, 146, 0.4);
  display: inline-block;
  padding-bottom: 8px;
}

.fjordify-ink-popup-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #ffa7bc;
}

/* === BUTTON === */
.fjordify-ink-btn {
  background: #ff6492;
  color: #2a0007;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(255, 100, 146, 0.5);
}

.fjordify-ink-btn:hover {
  background: #ffa7bc;
  color: #2a0007;
  box-shadow: 0 0 18px rgba(255, 167, 188, 0.8);
}

/* === FADE ANIMATION === */
@keyframes fadeUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* === SCROLL BUTTON === */
.fjordify-ink-scroll {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 44px; height: 44px;
  background: #ff6492;
  color: #2a0007;
  border: none;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 100, 146, 0.6);
  transition: all 0.3s ease;
  z-index: 1500;
}

.fjordify-ink-scroll:hover {
  background: #ffa7bc;
  color: #2a0007;
  box-shadow: 0 0 20px rgba(255, 167, 188, 0.8);
}

/* -------------------------
   FORM / BUTTONS / ACCESSIBILITY
   ------------------------- */
button, .fjordify-ink-btn, .fjordify-ink-small-btn{
  cursor:pointer;
}
.fjordify-ink-btn:focus, .fjordify-ink-small-btn:focus, .fjordify-ink-nav .nav-link:focus{
  outline: 3px solid rgba(255,100,146,0.12);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------
   RESPONSIVE
   ------------------------- */
@media (max-width: 992px){
  .fjordify-ink-hero{ padding:48px 14px; min-height:50vh; }
  .fjordify-ink-hero-sub{ font-size:1rem; }
  .fjordify-ink-features-grid{ gap:16px; }
  .fjordify-ink-reviews-grid{ gap:14px; }
  .fjordify-ink-contact-wrapper{ flex-direction:column; align-items:center; }
  .fjordify-ink-about{ padding:40px 14px; }
}

@media (max-width: 576px){
  .container{ padding:0 14px; }
  .fjordify-ink-hero{ padding:36px 12px; }
  .fjordify-ink-hero-title{ font-size:1.6rem; }
  .fjordify-ink-hero-sub{ font-size:.95rem; }
  .fjordify-ink-footer-nav{ gap:10px; }
  .fjordify-ink-feature-card{ padding:18px; }
  .fjordify-ink-disclaimer-card{ padding:24px; border-radius:12px; }
}

/* -------------------------
   Minor helpers (spacing, hidden)
   ------------------------- */
.mb-4{ margin-bottom:1.25rem; }
.mt-3{ margin-top:1rem; }
.w-100{ width:100%; }

/* Contact alert message */
.fjordify-ink-alert {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6492;
  color: #2a0007;
  padding: 12px 25px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.fjordify-ink-alert.error {
  background: #ff3b6b;
  color: #fff;
}
.fjordify-ink-alert.success {
  background: #ffa7bc;
  color: #2a0007;
}


/* === LEGAL PAGES === */
.fjordify-ink-legal {
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

.fjordify-ink-legal h1,
.fjordify-ink-legal h2 {
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.fjordify-ink-legal h2 {
  font-size: 1.4rem;
  margin-top: 30px;
  border-bottom: 1px solid rgba(255, 100, 146, 0.2);
  padding-bottom: 6px;
  display: inline-block;
}

.fjordify-ink-legal p {
  font-size: 1rem;
  margin-bottom: 18px;
  color: var(--text);
}

.fjordify-ink-legal a {
  color: var(--accent);
  text-decoration: none;
}

.fjordify-ink-legal a:hover {
  color: var(--text);
  text-decoration: underline;
}