@charset "UTF-8";

/* =========================
   Typography Baseline (18px minimum)
   ========================= */
html { font-size: 18px; }              /* 1rem = 18px */

:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --text:#d4d4d4;
  --muted:#a3a3a3;
  --line:#262626;
  --amber:#f59e0b;
  --amber2:#d97706;
}

body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background-color: var(--bg);
  margin: 0;
  font-style: normal;
  font-weight: 400;

  /* minimum readable default */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
	text-aling:left;
}

/* Optional: keep links inheriting your theme */
a{ color: inherit; }

/* =========================
   Container
   ========================= */
.container{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 1000px;
  background-color: var(--bg);
}

/* =========================
   Bullet list
   ========================= */
.pf-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.pf-list li{
  position: relative;
  padding-left: 1.1em;
  margin: .45em 0;
  color: var(--muted);
  font-size: 1rem;          /* 18px minimum */
  line-height: 1.6;
}

.pf-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  line-height: 1;
}

/* =========================
   Navigation
   ========================= */
header{
  width: 100%;
  height: 5%;
  background-color: var(--bg);
  border-bottom: 1px solid var(--line);
}

.logo{
  color: var(--text);
  font-weight: bold;
  text-align: undefined;
  width: 10%;
  float: left;
  margin-top: 15px;
  margin-left: 25px;
  letter-spacing: 4px;
}

nav{
  float: right;
  width: 50%;
  text-align: right;
  margin-right: 25px;
}

header nav ul{
  list-style: none;
  float: right;
}

nav ul li{
  float: left;
  color: var(--text);
  font-size: 1rem;          /* was 14px -> now 18px minimum */
  text-align: left;
  margin-right: 25px;
  letter-spacing: 2px;
  font-weight: bold;
  transition: all 0.3s linear;
}

ul li a{
  color: var(--text);
  text-decoration: none;
}

ul li:hover a{
  color: var(--amber);
}

.hero_header{
  color: #f5f5f5;
  text-align: center;
  margin: 0;
  letter-spacing: 4px;
}

/* =========================
   Hero Section
   ========================= */
.hero{
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(10,10,10,0.6), rgba(10,10,10,0.6)),
    url("../images/mainbackground.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding-top: 150px;
  padding-bottom: 150px;
}

.light{
  font-weight: bold;
  color: var(--amber);
}

.tagline{
  font-size: 1.333rem;      /* 24px (still >= 18px) */
  text-align: center;
  color: var(--text);
  margin-top: 4px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* =========================
   About Section
   ========================= */
.text_column{
  width: 29%;
  text-align: left;
  font-weight: 300;
  line-height: 1.6;         /* was 30pt */
  font-size: 1rem;          /* was 18pt -> now consistent 18px */
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--muted);
}

.about{
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 35px;
  display: inline-block;
  background-color: var(--bg);
  margin-top: 0;
}

/* =========================
   Stats Gallery
   ========================= */
.stats{
  color: var(--text);
  margin-bottom: 5px;
}

.gallery{
  clear: both;
  display: inline-block;
  width: 100%;
  background-color: var(--bg);
  padding-bottom: 35px;
  padding-top: 0;
  margin-top: -5px;
  margin-bottom: 0;
}

.thumbnail{
  width: 33%;
  text-align: center;
  float: left;
  margin-top: 35px;
}

.gallery .thumbnail h4{
  margin: 5px;
  color: var(--amber);
  font-size: 1rem;          /* was 16pt -> min 18px */
  line-height: 1.3;
}

.gallery .thumbnail p{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;          /* was 14pt -> min 18px */
  line-height: 1.6;
}

/* =========================
   Parallax Section
   ========================= */
.banner{
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(10,10,10,0.6), rgba(10,10,10,0.6)),
    url("../images/Parralax.png");
  height: 400px;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.parallax{
  color: var(--amber);
  text-align: right;
  padding-right: 100px;
  padding-top: 110px;
  letter-spacing: 2px;
  margin-top: 0;
  font-size: 1.667rem;      /* 30px */
  line-height: 1.2;
}

.parallax_description{
  color: var(--text);
  text-align: right;
  padding-right: 100px;
  width: 30%;
  float: right;
  font-weight: 300;
  line-height: 1.6;         /* was 23px */
  margin: 0;
  font-size: 1.667rem;      /* 30px */
}

/* =========================
   Footer
   ========================= */
footer{
  background-color: var(--bg);
  padding-bottom: 35px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.footer_column{
  width: 50%;
  text-align: center;
  padding-top: 30px;
  display: inline-block;
  float: none;
}

footer .footer_column h3{
  color: var(--amber);
  text-align: center;
  font-size: 1.111rem;      /* 20px-ish */
  line-height: 1.3;
}

footer .footer_column p{
  color: var(--muted);
  background-color: var(--bg);
  font-size: 1rem;          /* 18px minimum */
  line-height: 1.6;         /* consistent */
  max-width: 400px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.cards{
  width: 100%;
  height: auto;
  max-width: 400px;
  max-height: 200px;
}

/* =========================
   Button (basic rectangular button)
   ========================= */
.button{
  width: 200px;
  margin-top: 40px;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  text-align: center;
  vertical-align: middle;
  border-radius: 0px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  border: 3px solid var(--amber2);
  color: var(--amber);
  transition: all 0.3s linear;
  font-size: 1rem;          /* keep >= 18px */
}

.button:hover{
  background-color: var(--amber2);
  color: var(--bg);
  cursor: pointer;
}

.copyright{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: var(--bg);
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2px;
  border-top-width: 2px;
  font-size: 1rem;          /* keep >= 18px */
  line-height: 1.4;
}

.footer_banner{
  background-color: #111111;
  padding-top: 60px;
  padding-bottom: 60px;
  margin-bottom: 0;
  background-image: url(../images/pattern.png);
  background-repeat: repeat;
}

.hidden{ display: none; }

/* =========================
   Textured panel (neutral)
   ========================= */
.textured-panel{
  position: relative;
  background: var(--panel);
}

/* =========================
   Centered block text
   ========================= */
.text-default{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;          /* 18px minimum */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);

  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   PictelForge Forge Button (animated)
   ========================= */
.pf-btn{
  --metal1:#151515;
  --metal2:#0c0c0c;

  --amber:#f59e0b;
  --amber2:#d97306;
  --highlight:#fff0c8;

  position: relative;
  display: inline-block;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(247,182,74,0.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--metal1), var(--metal2));
  color: #d4d4d4;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 1rem;          /* was 2rem -> now consistent minimum */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65) inset,
    0 10px 22px rgba(0,0,0,.55);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.pf-btn > span{
  position: relative;
  z-index: 5;
}

.pf-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 14px;
  z-index: 1;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(245,158,11,.30), transparent 60%),
    radial-gradient(50% 70% at 50% 140%, rgba(217,119,6,.22), transparent 65%);
  opacity: 0;
  transition: opacity .18s ease;
}

.pf-btn::after{
  content:"";
  position:absolute;
  left:-18%;
  right:-18%;
  bottom:-70%;
  height: 190%;
  z-index: 2;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .18s ease, transform .18s ease;

  background:
    linear-gradient(
      0deg,
      rgba(217,119,6,.85) 0%,
      rgba(245,158,11,.90) 35%,
      rgba(245,158,11,.55) 60%,
      rgba(255,240,200,.18) 78%,
      transparent 92%
    ),
    conic-gradient(from 210deg at 22% 82%,
      transparent 0 28deg,
      rgba(217,119,6,.55) 42deg,
      rgba(245,158,11,.85) 68deg,
      transparent 95deg 360deg),
    conic-gradient(from 205deg at 42% 86%,
      transparent 0 30deg,
      rgba(217,119,6,.50) 44deg,
      rgba(245,158,11,.88) 70deg,
      transparent 98deg 360deg),
    conic-gradient(from 200deg at 62% 86%,
      transparent 0 30deg,
      rgba(217,119,6,.48) 46deg,
      rgba(245,158,11,.85) 72deg,
      transparent 100deg 360deg),
    conic-gradient(from 195deg at 82% 82%,
      transparent 0 28deg,
      rgba(217,119,6,.50) 42deg,
      rgba(245,158,11,.82) 68deg,
      transparent 96deg 360deg);

  background-repeat: no-repeat;
  background-size: 100% 220%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 50% 110%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;

  -webkit-mask-image: radial-gradient(75% 55% at 50% 82%, #000 55%, transparent 72%);
          mask-image: radial-gradient(75% 55% at 50% 82%, #000 55%, transparent 72%);

  filter: blur(.55px) saturate(1.1);
}

.pf-btn > span::after{
  content:"";
  position:absolute;
  left:50%;
  top:115%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  z-index: 4;
  pointer-events:none;
  opacity: 0;
  background: rgba(245,158,11,.85);
  box-shadow:
    -70px  20px rgba(245,158,11,.45),
    -40px  52px rgba(217,119,6,.40),
    -15px  34px rgba(245,158,11,.40),
     10px  60px rgba(217,119,6,.35),
     35px  28px rgba(245,158,11,.40),
     62px  48px rgba(245,158,11,.30),
    -58px  76px rgba(217,119,6,.25),
     52px  86px rgba(245,158,11,.25);
  filter: blur(.1px);
}

.pf-btn:hover,
.pf-btn:focus-visible{
  color: #f5f5f5;
  border-color: rgba(245,158,11,.78);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7) inset,
    0 14px 32px rgba(0,0,0,.65),
    0 0 34px rgba(245,158,11,.20);
}

.pf-btn:hover::before,
.pf-btn:focus-visible::before{
  opacity: 1;
}

.pf-btn:hover::after,
.pf-btn:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
  animation: pf-flame-rise .85s ease-in-out infinite;
}

@keyframes pf-flame-rise{
  0%{
    background-position: 50% 118%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    filter: blur(.6px) saturate(1.05);
    transform: translateY(0) scaleY(1);
  }
  50%{
    background-position: 50% 90%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    filter: blur(.45px) saturate(1.2);
    transform: translateY(-6px) scaleY(1.07);
  }
  100%{
    background-position: 50% 118%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    filter: blur(.6px) saturate(1.05);
    transform: translateY(0) scaleY(1);
  }
}

.pf-btn:hover > span::after,
.pf-btn:focus-visible > span::after{
  opacity: 1;
  animation: pf-particles 1.1s linear infinite;
}

@keyframes pf-particles{
  0%   { transform: translate(-50%, 0) scale(1);      opacity: 0; }
  15%  { opacity: 1; }
  65%  { transform: translate(-50%, -55px) scale(.9); opacity: .8; }
  100% { transform: translate(-50%, -95px) scale(.8); opacity: 0; }
}

.pf-btn:active{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .pf-btn::after,
  .pf-btn:hover::after,
  .pf-btn > span::after{
    animation: none !important;
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 320px){
  .logo{
    width: 100%;
    text-align: center;
    margin-top: 13px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .container header nav{
    margin: 0;
    width: 100%;
    float: none;
    display: none;
  }

  nav ul li{
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .text_column{
    width: 100%;
    text-align: left;
    padding: 0;
  }

  .thumbnail{ width: 100%; }

  .footer_column{
    width: 100%;
    margin-top: 0;
  }

  .parallax{
    text-align: center;
    margin: 0;
    padding-top: 40%;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    width: 100%;
    font-size: 1rem;        /* 18px */
  }

  .parallax_description{
    padding: 0;
    width: 90%;
    margin-top: 25px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 12px;
    float: none;
    text-align: center;
    font-size: 1rem;        /* 18px */
  }

  .banner{
    background-color: var(--bg);
    background-image: none;
  }

  .tagline{
    margin-top: 20px;
  }

  .hero_header{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 321px) and (max-width: 767px){
  .logo{
    width: 100%;
    text-align: center;
    margin-top: 13px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    color: var(--text);
  }

  .container header nav{
    margin: 0;
    width: 100%;
    float: none;
    overflow: auto;
    display: inline-block;
    background: var(--bg);
  }

  header nav ul{
    padding: 0;
    float: none;
  }

  nav ul li{
    margin: 0;
    width: 100%;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .text_column{
    width: 100%;
    text-align: left;
    padding: 0;
  }

  .thumbnail{ width: 50%; }

  .footer_column{
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .parallax{
    text-align: center;
    margin: 0;
    padding-top: 20%;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    width: 100%;
    font-size: 1rem;        /* 18px */
  }

  .parallax_description{
    margin: 0;
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    font-size: 1rem;        /* 18px */
  }

  .banner{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1096px){
  .text_column{ width: 100%; padding: 0; }
  .thumbnail{ width: 50%; }
  .banner{ margin-top: 0; padding-top: 0; }
}




/* =========================
   Minimal Mobile Fixes
   ========================= */

/* Make images never overflow their columns */
img{ max-width: 100%; height: auto; }

/* Let the container breathe on phones */
@media (max-width: 767px){
  .container{ width: 94%; height: auto; } /* stop fixed 1000px feel */
}

/* Header: stack logo + nav cleanly */
@media (max-width: 767px){
  header{
    height: auto;                 /* was 5% */
    padding: 12px 0;
  }

  .logo{
    float: none;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  nav{
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
    text-align: center;
  }

  header nav ul{
    float: none;
    padding: 0;
    margin: 0;
  }

  nav ul li{
    float: none;                  /* stack links */
    display: inline-block;        /* still feels like a nav */
    margin: 0 10px;
  }
}

/* Hero: make the big PictelForge title responsive */
@media (max-width: 767px){
  .hero{
    padding-top: 90px;            /* was 150px */
    padding-bottom: 90px;
  }

  /* If you removed inline style and used .hero_title */
  .hero_title{
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    letter-spacing: .08em;
    line-height: 1.05;
  }

  .hero_llc{
    font-size: .55em;             /* keeps LLC smaller */
    vertical-align: baseline;
    opacity: .9;
  }

  /* If you KEEP the inline style="font-size:64pt" this helps anyway */
  .hero_header{
    font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
    line-height: 1.05;
  }

  .tagline{
    font-size: 1.05rem;           /* still >= 18px base, just tighter */
    padding: 0 10px;
  }

  .text-default{
    padding: 0 12px;
  }
}

/* About columns: stack to one column */
@media (max-width: 767px){
  .text_column{
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 18px 0;
  }
}

/* Gallery thumbnails: stack to one column on phones */
@media (max-width: 767px){
  .thumbnail{
    float: none;
    width: 100%;
  }
  .thumbnail img{
    max-width: 100% !important;  /* overrides your inline max-width:400px */
  }
}

/* Parallax section: prevent awkward right-aligned overflow */
@media (max-width: 767px){
  .banner{
    background-attachment: scroll; /* fixed can be janky on mobile */
    height: auto;
    padding: 60px 0;
  }

  .parallax,
  .parallax_description{
    float: none;
    width: 100%;
    text-align: center;
    padding-right: 0;
    padding-top: 0;
    margin: 0;
    font-size: 1.1rem;           /* readable */
  }

  .parallax{ margin-bottom: 10px; }
}

/* Footer column: full width on phones */
@media (max-width: 767px){
  .footer_column{
    width: 100%;
  }
  footer .footer_column p{
    max-width: 60ch;
  }
}