/* =========================================================
   RAZIK TK PORTFOLIO — CUSTOM STYLES
   Palette inspired by the reference design: deep maroon/black
   background, cream headline type, red accent.
========================================================= */

:root{
  --bg-black:        #170b0c;
  --bg-maroon:       #2a1013;
  --bg-maroon-light: #391418;
  --cream:           #f1e7d3;
  --cream-dim:       #cfc3ab;
  --accent-red:      #b3282d;
  --accent-red-dim:  #7a1c20;
  --border-soft:     rgba(241,231,211,0.12);
  --font-display:    'Bebas Neue', sans-serif;
  --font-body:       'Poppins', sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background-color:var(--bg-black);
  color:var(--cream-dim);
  font-family:var(--font-body);
  overflow-x:hidden;
}

a{ text-decoration:none; }

::selection{ background:var(--accent-red); color:var(--cream); }

/* Scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg-black); }
::-webkit-scrollbar-thumb{ background:var(--accent-red-dim); border-radius:10px; }

.accent{ color:var(--accent-red); }

/* Note: scroll-reveal animations and hover micro-interactions
   live in css/animations.css (driven by js/animations.js) to
   keep this file focused on layout/theme. */

/* =========================================================
   NAVBAR
========================================================= */
.custom-navbar{
  background:rgba(23,11,12,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  padding:.8rem 0;
  transition:background .3s ease;
}
.custom-navbar .navbar-brand{
  font-family:var(--font-display);
  font-size:1.7rem;
  letter-spacing:2px;
  color:var(--cream);
}
.custom-navbar .nav-link{
  color:var(--cream-dim);
  font-size:.85rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:0 .6rem;
  position:relative;
  transition:color .25s ease;
}
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active{
  color:var(--cream);
}
.custom-navbar .nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--accent-red);
  transition:width .25s ease;
}
.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after{ width:100%; }

.btn-outline-cream{
  border:1px solid var(--cream-dim);
  color:var(--cream);
  letter-spacing:1px;
  font-size:.8rem;
  text-transform:uppercase;
  border-radius:2px;
}
.btn-outline-cream:hover{
  background:var(--accent-red);
  border-color:var(--accent-red);
  color:var(--cream);
}

/* =========================================================
   HERO
========================================================= */
.hero-section{
  position:relative;
  padding-top:7rem;
  padding-bottom:3rem;
  background:
    radial-gradient(circle at 50% 20%, var(--bg-maroon-light) 0%, var(--bg-black) 65%);
  border-bottom:1px solid var(--border-soft);
}

.hero-topbar{
  font-size:.7rem;
  letter-spacing:3px;
  color:var(--cream-dim);
  text-transform:uppercase;
  margin-bottom:1rem;
}
.blink-dot{ font-size:.5rem; color:var(--accent-red); animation:blink 1.4s infinite; vertical-align:middle; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.2;} }

.hero-title-wrap{ overflow:hidden; }
.hero-giant{
  font-family:var(--font-display);
  font-size:clamp(4rem, 16vw, 12rem);
  color:var(--cream);
  text-align:center;
  line-height:.85;
  letter-spacing:4px;
  margin:0 0 1.5rem 0;
  -webkit-text-stroke:1px var(--border-soft);
}

.hero-content{ position:relative; padding-top:1rem; }

.hero-left{ padding-right:1rem; }
.eyebrow{
  font-size:.7rem;
  letter-spacing:2px;
  color:var(--accent-red);
  text-transform:uppercase;
  margin-bottom:.7rem;
}
.hero-tags{ font-size:.75rem; letter-spacing:1px; color:var(--cream-dim); margin-bottom:1.5rem; }
.hero-tags li{ margin-bottom:.4rem; position:relative; padding-left:1rem; }
.hero-tags li::before{ content:"—"; position:absolute; left:0; color:var(--accent-red); }

.quote-block{
  border-left:2px solid var(--accent-red);
  padding-left:1rem;
  margin-top:2rem;
}
.quote-icon{ font-size:1.6rem; color:var(--accent-red); }
.quote-block p{
  font-size:.78rem;
  letter-spacing:.5px;
  color:var(--cream);
  line-height:1.5;
  margin-bottom:.5rem;
}
.signature{
  font-family:'Brush Script MT', cursive;
  font-size:1.3rem;
  color:var(--cream-dim);
}

.hero-image-wrap{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:420px;
}
.hero-circle{
  position:absolute;
  width:78%;
  aspect-ratio:1/1;
  background:radial-gradient(circle, var(--accent-red-dim) 0%, transparent 72%);
  border-radius:50%;
  z-index:0;
  filter:blur(2px);
}
.hero-portrait{
  position:relative;
  z-index:1;
  max-height:460px;
  width:auto;
  margin:0 auto;
  display:block;
  border-radius:14px;
  box-shadow:0 25px 60px rgba(0,0,0,.6);
}
.badge-spin{
  position:absolute;
  top:6%;
  right:0%;
  width:110px;
  height:110px;
  z-index:2;
}
.spin-svg{ width:100%; height:100%; animation:spin 14s linear infinite; }
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.center-star{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--accent-red);
  font-size:1.3rem;
}

.hero-section{ position:relative; }

/* Everything else in the hero stacks above the canvas */
.hero-topbar, .hero-title-wrap, .hero-content{ position:relative; z-index:1; }

.hero-right{ padding-left:1rem; }
.name-title{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:var(--cream);
  line-height:.95;
  letter-spacing:2px;
  margin-bottom:.4rem;
}
.role-title{
  color:var(--accent-red);
  font-size:.85rem;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.hero-desc{
  font-size:.85rem;
  line-height:1.7;
  color:var(--cream-dim);
  margin-bottom:1.8rem;
}

.stats-row{
  display:flex;
  gap:1.2rem;
  border-top:1px solid var(--border-soft);
  padding-top:1.4rem;
  flex-wrap:wrap;
}
.stat-item{ text-align:left; }
.stat-item i{ color:var(--accent-red); font-size:1.1rem; margin-bottom:.3rem; display:block; }
.stat-item h3{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--cream);
  margin:0;
}
.stat-item span{
  font-size:.65rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cream-dim);
}

/* =========================================================
   SECTION HEADINGS (shared)
========================================================= */
.section-heading{ margin-bottom:2.2rem; }
.section-heading.text-center{ text-align:center; }
.tag-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:2px;
  color:var(--cream);
  border-bottom:3px solid var(--accent-red);
  padding-bottom:.3rem;
}
.section-sub{
  color:var(--cream-dim);
  font-size:.85rem;
  max-width:640px;
  margin:.8rem auto 0;
}

/* =========================================================
   SERVICES
========================================================= */
.services-section{
  padding:4.5rem 0;
  background:var(--bg-maroon);
  border-bottom:1px solid var(--border-soft);
}
.service-card{
  background:var(--bg-black);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:1.8rem 1.2rem;
  height:100%;
  text-align:left;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent-red);
  background:var(--bg-maroon-light);
}
.service-icon{ font-size:1.8rem; color:var(--accent-red); margin-bottom:1rem; display:block; }
.service-card h5{ color:var(--cream); font-size:1rem; margin-bottom:.5rem; }
.service-card p{ font-size:.8rem; color:var(--cream-dim); margin:0; line-height:1.5; }

/* =========================================================
   PROCESS / ABOUT
========================================================= */
.process-section{ padding:5rem 0; background:var(--bg-black); border-bottom:1px solid var(--border-soft); }
.about-section{ padding:5rem 0; background:var(--bg-black); }

.process-list{ position:relative; }
.process-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--border-soft);
}
.process-item:last-child{ border-bottom:none; }
.process-num{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--accent-red-dim);
  width:2.2rem;
}
.process-icon{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--accent-red);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-red);
  flex-shrink:0;
}
.process-item h6{ color:var(--cream); margin-bottom:.2rem; font-size:.95rem; }
.process-item p{ font-size:.8rem; color:var(--cream-dim); margin:0; }

.about-box{ background:var(--bg-maroon); border:1px solid var(--border-soft); border-radius:12px; padding:1.5rem; }
.about-photo{ border-radius:10px; filter:grayscale(20%); }
.about-box p{ font-size:.85rem; line-height:1.7; color:var(--cream-dim); }
.trait-list li{ font-size:.82rem; color:var(--cream); margin-bottom:.4rem; }
.trait-list i{ color:var(--accent-red); margin-right:.4rem; }

/* =========================================================
   PROJECTS / FEATURED WORK
========================================================= */
.projects-section{
  padding:5rem 0;
  background:var(--bg-maroon);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.project-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border-soft);
  background:var(--bg-black);
  transition:transform .35s cubic-bezier(.16,.8,.24,1), border-color .35s ease, box-shadow .35s ease;
}
.project-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.16,.8,.24,1);
}
.project-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-red);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.project-card:hover img{ transform:scale(1.06); }

.project-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.6rem 1rem .9rem;
  background:linear-gradient(to top, rgba(10,5,6,.92) 0%, rgba(10,5,6,.55) 55%, transparent 100%);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.project-card:hover .project-overlay{ opacity:1; transform:translateY(0); }
.project-cat{
  display:block;
  font-size:.65rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent-red);
  margin-bottom:.2rem;
}
.project-overlay h5{ color:var(--cream); font-size:.95rem; margin:0; }

/* On touch devices there's no hover, so keep captions visible */
@media (hover: none){
  .project-overlay{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   TOOLS I USE (auto-scrolling marquee)
========================================================= */
.tools-section{
  padding:5rem 0;
  background:var(--bg-black);
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
}
.tools-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  margin-top:2.5rem;
  /* fade the edges so chips slide in/out softly */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.tools-track{
  display:flex;
  width:max-content;
  animation:toolsScroll 32s linear infinite;
}
.tools-set{
  display:flex;
  gap:1rem;
  padding-right:1rem;
  flex-shrink:0;
}
@keyframes toolsScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); } /* exactly one duplicated set */
}
/* Pause on hover so people can read the names */
.tools-marquee:hover .tools-track{ animation-play-state:paused; }

.tool-chip{
  display:flex;
  align-items:center;
  gap:.6rem;
  white-space:nowrap;
  background:var(--bg-maroon);
  border:1px solid var(--border-soft);
  border-radius:50px;
  padding:.75rem 1.5rem;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.tool-chip:hover{
  border-color:var(--accent-red);
  background:var(--bg-maroon-light);
  transform:translateY(-3px);
}
.tool-chip i{ color:var(--accent-red); font-size:1.15rem; }
.tool-chip span{
  color:var(--cream);
  font-size:.85rem;
  letter-spacing:.5px;
}

@media (prefers-reduced-motion: reduce){
  .tools-track{ animation:none; }
  .tools-marquee{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* =========================================================
   CERTIFICATIONS
========================================================= */
.certifications-section{
  padding:5rem 0;
  background:var(--bg-maroon);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.cert-card{
  background:#fff;
  border-radius:10px;
  padding:.5rem;
  border:1px solid var(--border-soft);
  transition:transform .3s ease, border-color .3s ease;
}
.cert-card:hover{ transform:scale(1.04); border-color:var(--accent-red); }
.cert-img{
  border-radius:6px;
  display:block;
  width:100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{ filter:invert(1); }

/* =========================================================
   FAQ
========================================================= */
.faq-section{ padding:5rem 0; background:var(--bg-black); }
.accordion-item{
  background:transparent;
  border:1px solid var(--border-soft);
  margin-bottom:.7rem;
  border-radius:8px !important;
  overflow:hidden;
}
.accordion-button{
  background:var(--bg-maroon);
  color:var(--cream);
  font-size:.9rem;
  font-weight:500;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  background:var(--accent-red-dim);
  color:var(--cream);
}
.accordion-button::after{ filter:invert(1); }
.accordion-body{
  background:var(--bg-black);
  color:var(--cream-dim);
  font-size:.85rem;
  line-height:1.7;
}

/* =========================================================
   CONTACT
========================================================= */
.contact-section{ padding:5rem 0; background:var(--bg-maroon); }
.contact-lead{ font-size:.9rem; color:var(--cream-dim); margin-bottom:1.5rem; }
.contact-info li{
  font-size:.85rem;
  color:var(--cream);
  margin-bottom:.9rem;
}
.contact-info i{ color:var(--accent-red); margin-right:.6rem; width:18px; text-align:center; }

.social-links{ margin:1.2rem 0 1.5rem; }
.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--border-soft);
  border-radius:50%;
  color:var(--cream);
  margin-right:.6rem;
  transition:all .25s ease;
}
.social-links a:hover{ background:var(--accent-red); border-color:var(--accent-red); }

.map-embed{ border-radius:10px; overflow:hidden; border:1px solid var(--border-soft); }

.enquire-box{
  background:var(--bg-black);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:2rem;
}
.enquire-box h4{ color:var(--cream); font-family:var(--font-display); letter-spacing:1px; font-size:1.6rem; }
.enquire-box p{ font-size:.85rem; color:var(--cream-dim); margin-bottom:1.5rem; }

.form-label{ color:var(--cream-dim); font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; }
.form-control, .form-select{
  background:var(--bg-maroon);
  border:1px solid var(--border-soft);
  color:var(--cream);
  font-size:.85rem;
  padding:.6rem .8rem;
}
.form-control:focus, .form-select:focus{
  background:var(--bg-maroon);
  color:var(--cream);
  border-color:var(--accent-red);
  box-shadow:0 0 0 .2rem rgba(179,40,45,.25);
}
.form-control::placeholder{ color:var(--cream-dim); opacity:.6; }

.btn-cream{
  background:var(--cream);
  color:var(--bg-black);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:.8rem;
  padding:.75rem 1.5rem;
  border-radius:3px;
  border:none;
  transition:all .25s ease;
}
.btn-cream:hover{ background:var(--accent-red); color:var(--cream); }

.form-success{
  color:#8fd19e;
  font-size:.85rem;
  background:rgba(143,209,158,.1);
  border:1px solid rgba(143,209,158,.3);
  padding:.7rem 1rem;
  border-radius:6px;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  background:var(--bg-black);
  border-top:1px solid var(--border-soft);
  padding:1.4rem 0;
  font-size:.78rem;
  color:var(--cream-dim);
}
.footer-tagline{
  font-family:var(--font-display);
  letter-spacing:2px;
  color:var(--cream-dim);
  font-size:.85rem;
}
#scrollTopBtn{ border-radius:50%; width:36px; height:36px; padding:0; }

/* =========================================================
   RESPONSIVE TWEAKS
========================================================= */
@media (max-width: 991px){
  .hero-image-wrap{ min-height:320px; margin-bottom:2rem; }
  .hero-portrait{ max-height:340px; }
  .badge-spin{ width:90px; height:90px; top:0; right:5%; }
  .hero-left, .hero-right{ text-align:center; padding:0; }
  .stats-row{ justify-content:center; }
  .quote-block{ text-align:left; margin-top:1.5rem; }
}

@media (max-width: 576px){
  .hero-giant{ letter-spacing:1px; }
  .name-title{ font-size:2rem; }
}