/* Fonts are loaded via a link tag in index.html */

:root {
  /* default wallpaper (falls back if no per-customer wallpaper provided) */
  --wallpaper: url('/images/nfccard.jpg');
  --overlay: rgba(0,0,0,0.35);

  /* Theme variables (tweak these to change the site look quickly) */
  --primary: #273891;
  --primary-strong: #162363;
  --accent: #ff6b6b;
  --bg: #f7f9fc;
  --card-bg: #ffffff;
  --text: #333333;
  --muted: #666666;
  --radius: 15px;
  --small-radius: 8px;
  --shadow: 0 10px 20px rgba(0,0,0,0.10);
  --card-shadow: 0 10px 30px rgba(0,0,0,0.08);
  --container-max-width: 1100px;
  --hero-gap: 36px;
}

body {
  font-family: 'Open Sans',sans-serif;
  /* wallpaper instead of solid color; provide a gradient fallback */
  background-image: var(--wallpaper), linear-gradient(180deg,#071335 0%, #021026 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  padding: 20px;
  margin: 0;
  position: relative;
}

/* optional dark overlay to keep the white card readable — adjust rgba() alpha as needed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--overlay);
  pointer-events: none;
  z-index: 0;
}

.card-container {
  width: 100%;
  max-width: 450px; /* Standard mobile width */
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  text-align: center;
  position: relative; /* ensure card sits above overlay */
  z-index: 1;
}

.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid var(--primary); /* Brand color border */
}

/* header layout: profile photo and company logo side-by-side on wider screens */
.profile-header { text-align: center; }
.profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 8px;
}
.company-logo--large {
  /* match profile photo size but square corners by default */
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--small-radius);
}

/* Wrap the profile photo so we can position a company badge over it */
.photo-wrap {
  position: relative;
  display: inline-block;
}

/* small square badge positioned on top of the profile photo */
.company-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--small-radius); /* square with slightly rounded corners */
  border: 3px solid var(--card-bg); /* border to separate from photo */
  background: var(--card-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

@media (max-width: 480px) {
  .profile-top { flex-direction: column; gap: 10px; }
  .company-logo--large { width: 72px; height: 72px; }
  .profile-photo { width: 72px; height: 72px; }
  .company-badge { width: 28px; height: 28px; top: -6px; right: -6px; border-width: 2px; }
}

h1 {
    font-size: 1.8em;
    margin-bottom: 5px;
  color: var(--text);
}

h2 {
    font-size: 1em;
    font-weight: bold;
  color: var(--muted);
    margin-bottom: 30px;
}

/* --- Buttons Styling --- */
.contact-links, .social-links {
    margin-bottom: 25px;
}

.btn {
  display: block;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

/* Contact buttons should be wide on mobile */
.contact-links .btn { width: 90%; }

.primary-btn {
  background-color: var(--primary); /* Primary Action Color */
  color: rgb(255, 255, 255);
  border: 2px solid #000000;
}

.primary-btn:hover {
  background-color: var(--primary-strong);
}

.secondary-btn {
  background-color: var(--primary);
  color: #fffefe;
  border: 2px solid #000000;
}

.secondary-btn:hover {
  background-color: var(--primary-strong);
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center; /* center heading + buttons */
  text-align: center;
}

.social-links h3 { margin: 0; width: 100%; }

/* the row of icon buttons */
.social-btns {
  display: flex;
  gap: 8px; /* reduced gap so icons are closer together */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* center icons horizontally */
  width: auto;
}

/* icon styling */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px; /* slightly smaller touch area to tighten layout */
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  min-width: 36px;
  min-height: 36px;
}

.social-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* Branding */
.branding-footer {
  margin-top: 30px;
  border-top: 1px solid var(--primary);
  padding-top: 15px;
}

.branding-footer p {
  font-size: 0.8em;
  color: var(--primary);
}

/* center the website button */
.website-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center logo + label horizontally */
  gap: 8px;
  margin: 0 auto;
  padding: 10px 14px;
}

.company-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.website-label { display: none; }

/* Icon-only website button (circle) */
.website-btn.icon-only {
  padding: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  justify-content: center;
}
.website-btn.icon-only .company-logo {
  width: 24px;
  height: 24px;
  border-radius: 0;
}

/* Disabled state styling for pill website button */
.website-btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
  filter: grayscale(60%);
  transform: none !important;
  box-shadow: none !important;
}

/* Only show hover transform for enabled website buttons */
.website-btn:not([aria-disabled="true"]):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Focus-visible for accessibility */
.website-btn:focus {
  outline: 3px solid rgba(39,56,145,0.15);
  outline-offset: 3px;
}

/* standard rounded (small radius) */
.btn.rounded { 
  border-radius: var(--small-radius);
  background-color: var(--primary); /* Primary Action Color */
  color: rgb(255, 255, 255);
  border: 2px solid #000000;
}

/* pill (fully rounded) */
.btn.pill { border-radius: 999px;
  background-color: var(--primary); /* Primary Action Color */
  color: rgb(255, 255, 255);
  border: 2px solid #000000;
}

/* square (no rounding) */
.btn.square { border-radius: 0; 
  background-color: var(--primary); /* Primary Action Color */
  color: rgb(255, 255, 255);
  border: 2px solid #000000;
}

/* beveled (cut corners) */
.btn.beveled {
  border-radius: 6px;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}

/* circle (use for icon-only buttons) */
.social-btn.circle {
  width:48px;
  height:48px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* squircle-like (soft corners) */
.btn.squircle { border-radius: 20% / 30%; }

/* subtle hover effect for all variants */
.btn, .social-btn {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover, .social-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* Button + social-icon interactive enhancements */
.btn, .social-btn {
  position: relative;
  overflow: hidden; /* required for ripple visual */
}

/* ripple pseudo-element (simple center-based ripple) */
.btn::after, .social-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.12);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms cubic-bezier(.2,.9,.3,1), opacity 420ms linear;
}

/* Expand ripple on active/click */
.btn:active::after, .social-btn:active::after {
  transform: translate(-50%, -50%) scale(6);
  opacity: 1;
  transition: transform 300ms cubic-bezier(.2,.9,.3,1), opacity 600ms ease-out;
}

/* Make ripple color adapt for dark/light card backgrounds */
.btn, .social-btn { --ripple: rgba(255,255,255,0.12); }
@media (prefers-color-scheme: light) { .btn, .social-btn { --ripple: rgba(0,0,0,0.08); } }
.btn::after, .social-btn::after { background: var(--ripple); }

/* Focus-visible accessibility */
.btn:focus-visible, .social-btn:focus-visible {
  outline: 3px solid rgba(39,56,145,0.12);
  outline-offset: 3px;
}

/* --- Subtle entrance animations for landing page --- */
:root {
  --anim-ease: cubic-bezier(.2,.9,.3,1);
  --anim-duration: 620ms;
}

/* Global animation helpers */
:root { --fade-up-duration: 560ms; --stagger-step: 80ms; }

.fade-up { opacity: 0; transform: translateY(8px); transition: opacity var(--fade-up-duration) var(--anim-ease), transform var(--fade-up-duration) var(--anim-ease); }
.is-loaded .fade-up { opacity: 1; transform: none; }

.stagger-1 { transition-delay: calc(var(--stagger-step) * 1); }
.stagger-2 { transition-delay: calc(var(--stagger-step) * 2); }
.stagger-3 { transition-delay: calc(var(--stagger-step) * 3); }

/* Card entrance and hover */
.card { transform-origin: center; will-change: transform, box-shadow; transition: transform 420ms var(--anim-ease), box-shadow 420ms var(--anim-ease); }
.is-loaded .card { transform: translateY(0); }
.card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 30px 80px rgba(2,6,23,0.22); }

/* Image subtle parallax/scale on hover */
.img-zoom { transition: transform 540ms var(--anim-ease), box-shadow 540ms var(--anim-ease); }
.img-zoom:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 30px 60px rgba(2,6,23,0.28); }

/* Button micro interactions */
.btn { transition: transform 200ms ease, box-shadow 200ms ease, background-color 180ms ease; }
.btn:active { transform: translateY(1px) scale(0.995); }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .card, .img-zoom, .btn { transition: none !important; transform: none !important; }
}

/* initial hidden state for animated components */
.hero-left, .hero-right, .product-card, .features .feature, .buy-cta {
  opacity: 0;
  transform: translateY(10px) scale(.995);
  transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}

/* reveal with subtle stagger when body has .is-loaded */
.is-loaded .hero-left { opacity:1; transform:none; transition-delay: 80ms; }
.is-loaded .product-card { opacity:1; transform:none; transition-delay: 160ms; }
.is-loaded .hero-right { opacity:1; transform:none; transition-delay: 240ms; }
.is-loaded .buy-cta { opacity:1; transform:none; transition-delay: 320ms; }
.is-loaded .features .feature:nth-child(1) { opacity:1; transform:none; transition-delay: 200ms; }
.is-loaded .features .feature:nth-child(2) { opacity:1; transform:none; transition-delay: 260ms; }
.is-loaded .features .feature:nth-child(3) { opacity:1; transform:none; transition-delay: 320ms; }
.is-loaded .features .feature:nth-child(4) { opacity:1; transform:none; transition-delay: 380ms; }

/* micro-interaction for the CTA */
.buy-cta { transform-origin: center; will-change: transform; }
.buy-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }

/* respect user reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-left, .hero-right, .product-card, .features .feature, .buy-cta {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}