/* styles.css */

/* Premium font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap");

:root{
  --bg:#0b0c0e;
  --panel:#121419;
  --panel2:#0f1115;
  --text:#e9ecf1;
  --muted:#b7bfcc;
  --muted2:#8f99aa;
  --line:#262b35;

  --brand:#e01111;
  --brand2:#c60f0f;

  --radius:16px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);

  --wrap:1120px;
  --header-h:72px;

  --focus: 0 0 0 3px rgba(224,17,17,.35);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; }
:focus-visible{ outline:none; box-shadow: var(--focus); border-radius:12px; }

.container{
  width: min(100% - 32px, var(--wrap));
  margin-inline:auto;
}

.section{ padding: 44px 0; }
@media (min-width: 820px){ .section{ padding: 64px 0; } }

.kicker{
  margin:0 0 10px;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 12px;
}
.h2{
  margin:0 0 14px;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing:-.03em;
  font-weight: 950;
}
.h1{
  margin:0;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing:-.04em;
  line-height:1.06;
  font-weight: 950;
}
.p{ margin:0; color: var(--muted); }
.small{ font-size:13px; color: var(--muted2); }

.panel{
  background: linear-gradient(180deg, rgba(18,20,25,.92), rgba(15,17,21,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad{ padding:18px; }

.hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:16px 0;
}

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(11,12,14,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius: 14px;
  background:#0b0c0e;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand-text{ min-width:0; }

.brand-title{
  margin:0;
  font-weight: 950;
  letter-spacing:-.03em;
  font-size: 16px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-links{
  display:none;
  align-items:center;
  gap:8px;
}
.nav-links a{
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 850;
  font-size: 14px;
}
.nav-links a:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.nav-links a[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}

.hamburger{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
}
.hamburger svg{ width:22px; height:22px; }

@media (min-width: 920px){
  .nav-links{ display:flex; }
  .hamburger{ display:none; }
}

/* Mobile menu */
.mobile-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(11,12,14,.96);
}
.mobile-menu.open{ display:block; }
.mobile-menu .container{ padding: 10px 0 14px; }
.mobile-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 950;
}
.mobile-menu a:hover{ background: rgba(255,255,255,.05); color: var(--text); }
.mobile-menu a[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 950;
  letter-spacing:.01em;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn.primary{
  background: var(--brand);
  border-color: rgba(0,0,0,.25);
  color:#fff;
  box-shadow: 0 14px 40px rgba(224,17,17,.22);
}
.btn.primary:hover{ background: var(--brand2); }
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}

/* Hero */
.hero{
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding: 26px 0;
}
.hero-grid{
  display:grid;
  gap:14px;
  align-items:stretch;
}
@media (min-width: 920px){
  .hero-grid{ grid-template-columns: 1.35fr .95fr; }
}

.hero-media{
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:#0a0b0d;
  box-shadow: var(--shadow);
}
.hero-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#0a0b0d;
}

.hero-copy .sub{
  margin: 10px 0 0;
  color: rgba(233,236,241,.92);
  font-size: 15px;
  max-width: 62ch;
}
.hero-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Cards grid */
.cards{
  display:grid;
  gap:14px;
  margin-top: 14px;
}
@media (min-width: 820px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}

/* Card base */
.card{
  padding:16px;
  background: linear-gradient(180deg, rgba(18,20,25,.92), rgba(14,16,20,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.card h3{
  margin:0 0 8px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing:-.02em;
}
.card p{ margin:0; color: var(--muted); font-size:14px; }

/* Card icons (fix oversized icons on mobile) */
.card-ico{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.card-ico svg{
  width: 22px;
  height: 22px;
  display:block;
}
@media (max-width: 520px){
  .card-ico{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    margin-bottom: 8px;
  }
  .card-ico svg{
    width: 19px;
    height: 19px;
  }
}

/* About */
.about{
  display:grid;
  gap:16px;
  margin-top:16px;
}
@media (min-width: 900px){
  .about{
    grid-template-columns: 1fr 1fr;
    gap:18px;
    align-items:stretch;
  }
}

/* Slightly roomier panel padding where you use .panel.pad */
.panel.pad{ padding: 22px; }
@media (min-width: 900px){
  .panel.pad{ padding: 26px; }
}

.about-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  border-radius: 16px;
  background: rgba(15,17,21,.72);
  border:1px solid rgba(255,255,255,.10);
}
.about-logo img{
  width: 170px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Bullet rows */
.bullets{
  display:grid;
  gap:12px;
  margin-top: 2px;
}
.bullet{
  display:grid;
  grid-template-columns: 14px 1fr;
  gap:12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(15,17,21,.62);
  border:1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.bullet:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(15,17,21,.78);
}
.bullet .dot{
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(224,17,17,.16);
}
.bullet b{
  display:block;
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.bullet span{
  display:block;
  color: rgba(183,191,204,.92);
  font-size: 13.5px;
  line-height: 1.5;
}
@media (min-width: 900px){
  .bullet span{ font-size: 14px; }
}

/* Facebook embeds (normal 16:9) */
.embed-grid{
  display:grid;
  gap:14px;
  margin-top: 14px;
}
@media (min-width: 820px){
  .embed-grid{ grid-template-columns: repeat(2, 1fr); }
}
.embed{
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:#0a0b0d;
  box-shadow: var(--shadow);
}
.ratio{ aspect-ratio: 16/9; }
.embed iframe{ width:100%; height:100%; border:0; display:block; }

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background: radial-gradient(1200px 500px at 20% 0%, rgba(224,17,17,.08), transparent 60%),
              radial-gradient(900px 450px at 90% 20%, rgba(255,255,255,.06), transparent 55%),
              #07080a;
  padding: 34px 0 22px;
}

.footer-top{
  display:grid;
  gap:22px;
  align-items:start;
}
@media (min-width: 920px){
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr; }
}

.footer-brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.footer-brand img{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  background:#0b0c0e;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.footer-title{
  margin:0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing:-.02em;
}
.footer-sub{
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer a{ color: rgba(233,236,241,.92); }
.site-footer a:hover{ color: #fff; text-decoration: underline; }

.footer-block h3{
  margin: 2px 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,236,241,.90);
  font-weight: 950;
}
.footer-block ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  color: var(--muted);
  font-size: 14px;
}
.footer-block li{
  display:flex;
  gap:10px;
  align-items:center;
}
.footer-block li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(224,17,17,.95);
  box-shadow: 0 0 0 6px rgba(224,17,17,.10);
}

.footer-bottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(183,191,204,.92);
  font-size: 13px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Back to top */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(18,20,25,.86);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.to-top:hover{ background: rgba(18,20,25,.95); }
.to-top.show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.to-top svg{ width:20px; height:20px; }

/* Desktop/Laptop sizing guard */
@media (min-width: 1024px){
  .container{ width: min(100% - 56px, 1120px); }
  .section{ padding: 56px 0; }
  .btn{ padding: 10px 12px; font-size: 14px; }
  .card{ padding: 14px; }
  .card h3{ font-size: 14.5px; }
  .card p{ font-size: 13.5px; }
  .footer-brand img{ width: 82px; height: 82px; }
}

/* Mobile header title fit */
@media (max-width: 520px){
  :root{ --header-h: 78px; }
  .header-inner{ height: var(--header-h); gap: 10px; }
  .brand{ gap: 10px; min-width: 0; flex: 1; }
  .brand img{ width: 46px; height: 46px; }
  .brand-text{ min-width: 0; flex: 1; }
  .brand-title{
    font-size: 14px;
    line-height: 1.1;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Footer mobile layout */
@media (max-width: 640px){
  .footer-top{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    align-items:start;
  }
  .footer-brand{ grid-column: 1 / -1 !important; align-items:flex-start; }
  .footer-brand img{ width: 72px; height: 72px; }
  .footer-bottom{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px){
  .footer-top{ grid-template-columns: 1fr !important; }
}

/* ===== Projects blocks ===== */
.project{ overflow:hidden; }
.project-grid{ display:grid; gap:18px; align-items:start; }
@media (min-width: 920px){
  .project-grid{ grid-template-columns: 1.15fr .85fr; align-items:center; }
}
.project-media{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,17,21,.60);
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
}
.project-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  max-height: 520px;
}
@media (max-width: 920px){
  .project-media img{ max-height: 420px; }
}

.project-title{
  margin: 8px 0 10px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.project-tags{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,236,241,.92);
  font-weight: 800;
  font-size: 12px;
}

/* =========================================================
   REELS (USED ON INDEX + PROJECTS)
   - Fixes “box bigger than video”
   - Portrait centered
   ========================================================= */
.embed-grid.reels-grid{
  display:grid;
  gap:14px;
  margin-top:14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:start;
}
@media (max-width: 820px){
  .embed-grid.reels-grid{ grid-template-columns: 1fr; }
}

.embed.reel{
  background:#07080a;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,.40);
  transition: transform .18s ease, border-color .18s ease;
}
.embed.reel:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

.reel-frame{
  padding: 12px;
  display:grid;
  place-items:center;
}

.ratio.reel{
  aspect-ratio: 9 / 16;
  width: min(100%, 340px);
  background:#000;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.ratio.reel iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}

@media (hover:none){
  .embed.reel:hover{ transform:none; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-grid{
  display:grid;
  gap:14px;
  margin-top: 14px;
}
@media (min-width: 920px){
  .contact-grid{
    grid-template-columns: 1.15fr .85fr;
    align-items:start;
  }
}

.contact-form{ position: relative; }
.contact-form .field{
  display:grid;
  gap:8px;
  margin-bottom: 14px;
}

.field-row{
  display:grid;
  gap:14px;
}
@media (min-width: 720px){
  .field-row{ grid-template-columns: 1fr 1fr; }
}

.contact-form label{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(233,236,241,.90);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline:none;
  box-shadow: none;
}

.contact-form textarea{ resize: vertical; min-height: 140px; }

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(183,191,204,.70);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(224,17,17,.35);
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 8px;
}

.hp-wrap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.contact-info{
  display:grid;
  gap:12px;
  margin-top: 10px;
}
.contact-line{
  display:grid;
  grid-template-columns: 14px 1fr;
  gap:12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(15,17,21,.62);
  border:1px solid rgba(255,255,255,.10);
}
.contact-line .dot{
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(224,17,17,.16);
}
.contact-line b{ font-weight: 950; }
.contact-line a{ border-bottom: 1px solid rgba(255,255,255,.18); }
.contact-line a:hover{ border-bottom-color: rgba(255,255,255,.32); }