:root{
  --bg:#0a0a0a;
  --surface:#141412;
  --surface-2:#1c1b18;
  --line:rgba(255,255,255,.09);
  --orange:#ff7a29;
  --orange-deep:#c2410c;
  --text:#f2f0ea;
  --muted:#9a968c;
  --tagline:#d8b596;
  --mark-text:#0a0a0a;
  --shadow-strong:rgba(0,0,0,.7);
  --grid-dot:rgba(255,255,255,.07);
}

html[data-theme="light"]{
  --bg:#faf8f4;
  --surface:#ffffff;
  --surface-2:#f1ede4;
  --line:rgba(10,10,10,.09);
  --orange:#ff7a29;
  --orange-deep:#c2410c;
  --text:#181712;
  --muted:#6f6a5f;
  --tagline:#a5652f;
  --mark-text:#0a0a0a;
  --shadow-strong:rgba(0,0,0,.15);
  --grid-dot:rgba(10,10,10,.05);
}

/* let Bootstrap's own components pick up the theme too */
body{
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-link-color:var(--orange);
  --bs-link-hover-color:#ffb27a;
  font-family:'Vazirmatn','Tahoma','Segoe UI',sans-serif;
  transition:background-color .25s ease, color .25s ease;
}

a{ text-decoration:none; }
a:hover{ color:#ffb27a; }

/* ---------- Top bar ---------- */
.topbar{
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
  background-color:var(--bg);
}

.brand-mark{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:var(--mark-text);
  clip-path:polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
.brand-name{ font-size:.95rem; color:var(--muted); white-space:nowrap; }
.brand-name strong{ color:var(--text); font-weight:600; }

.navbar-nav .nav-link{
  color:var(--muted);
  font-weight:500;
  border-bottom:2px solid transparent;
}
.navbar-nav .nav-link:hover{ color:var(--text); }
.navbar-nav .nav-link.active{ color:var(--text); border-bottom-color:var(--orange); }

@media (min-width:992px){
  .navbar-nav .nav-link{ padding-top:.3rem; padding-bottom:.3rem; }
}

.btn-call{
  background:var(--orange);
  color:#0a0a0a;
  font-weight:600;
  padding:.5rem 1.15rem;
  border:none;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition:.2s ease;
  font-size:.92rem;
}
.btn-call:hover{ background:#ffb27a; color:#0a0a0a; }

.theme-toggle{
  width:38px; height:38px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--orange);
  border-radius:50%;
  font-size:1rem;
  transition:.2s ease;
}
.theme-toggle:hover{ background:var(--orange); color:#0a0a0a; }

.navbar-toggler{
  width:38px; height:38px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:8px;
  font-size:1.1rem;
  box-shadow:none;
}
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(255,122,41,.25); }

@media (max-width:991.98px){
  .navbar-collapse{
    border-bottom:1px solid var(--line);
  }
  .navbar-nav .nav-link{ padding:.65rem 0; border-bottom:1px solid var(--line); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size:28px 28px;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  filter:blur(6px);
}
.hero::before{
  top:-140px; inset-inline-end:-160px;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,122,41,.18), transparent 70%);
  animation:heroBlobA 19s ease-in-out infinite;
}
.hero::after{
  bottom:-170px; inset-inline-start:-150px;
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(194,65,12,.15), transparent 70%);
  animation:heroBlobB 24s ease-in-out infinite;
}
.hero > .container{
  position:relative;
  z-index:1;
}
@keyframes heroBlobA{
  0%, 100%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(-32px, 36px) scale(1.08); }
}
@keyframes heroBlobB{
  0%, 100%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(28px, -28px) scale(1.06); }
}
.hero-logo{
  width:300px;
 
}
.hero h1 .accent{ color:var(--orange); }
.hero .role{ color:var(--muted); }
.hero .divider-line{ width:56px; height:2px; background:var(--orange); }
.hero .tagline{
  color:var(--tagline);
  font-style:italic;
  max-width:420px;
}
.link-muted{ color:var(--muted); }
.link-muted:hover{ color:var(--orange); }

@media (max-width:767.98px){
  .hero-logo{ width:160px; }
}

/* ---------- Section shell ---------- */
.eyebrow-line{
  width:34px; height:2px;
  background:var(--orange);
}
.section-head p{ color:var(--muted); max-width:520px; }

/* ---------- About ---------- */
.about-text{
  color:var(--text);
  opacity:.85;
  font-size:1.05rem;
  line-height:2;
  max-width:680px;
}

/* ---------- Expertise ---------- */
.expertise-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  padding:1.9rem 1.6rem;
}
.expertise-card::before,
.expertise-card::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  opacity:.55;
}
.expertise-card::before{
  top:8px; inset-inline-start:8px;
  border-top:2px solid var(--orange);
  border-inline-start:2px solid var(--orange);
}
.expertise-card::after{
  bottom:8px; inset-inline-end:8px;
  border-bottom:2px solid var(--orange);
  border-inline-end:2px solid var(--orange);
}
.expertise-card .icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,41,.1);
  color:var(--orange);
  font-size:1.3rem;
}
.expertise-card h3{ font-size:1.05rem; }
.expertise-card p{ color:var(--muted); font-size:.92rem; }

/* ---------- Contact ---------- */
.contact-panel{
  background:var(--surface);
  border:1px solid var(--line);
  padding:2.4rem;
  position:relative;
}
.contact-panel::before,
.contact-panel::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
}
.contact-panel::before{
  top:12px; inset-inline-start:12px;
  border-top:2px solid var(--orange);
  border-inline-start:2px solid var(--orange);
}
.contact-panel::after{
  bottom:12px; inset-inline-end:12px;
  border-bottom:2px solid var(--orange);
  border-inline-end:2px solid var(--orange);
}
.contact-item .ic{
  width:38px; height:38px;
  flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,41,.1);
  color:var(--orange);
}
.contact-item .label{ color:var(--muted); font-size:.78rem; }
.contact-item .value{ color:var(--text); font-weight:500; }
.contact-item:last-child{ border-bottom:none !important; }

.card-frame img{
  width:380px;
  border-radius:10px;
  box-shadow:0 30px 60px -20px var(--shadow-strong), 0 0 0 1px var(--line);
  transform:rotate(-3deg);
  transition:transform .35s ease;
}
.card-frame:hover img{ transform:rotate(0deg) scale(1.02); }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  color:var(--muted);
}
footer .foot-tagline{ color:var(--tagline); }

/* ---------- Motion ---------- */
@keyframes revealFadeIn{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes revealFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* hero + page-header: one orchestrated sequence on load, no JS needed */
.hero-logo{ animation:revealFadeIn .8s ease both; }
.hero h1{ animation:revealFadeUp .7s ease both .15s; }
.hero .role{ animation:revealFadeUp .7s ease both .3s; }
.hero .divider-line{ animation:revealFadeUp .7s ease both .42s; }
.hero .tagline{ animation:revealFadeUp .7s ease both .52s; }
.hero-actions{ animation:revealFadeUp .7s ease both .64s; }

.page-hero h1{ animation:revealFadeUp .7s ease both; }
.page-hero p{ animation:revealFadeUp .7s ease both .15s; }

/* scroll-triggered reveals, toggled by reveal.js adding is-visible */
.reveal,
.reveal-right{
  opacity:0;
  transition:opacity .6s ease, transform .6s ease;
}
.reveal{ transform:translateY(20px); }
.reveal-right{ transform:translateX(48px); }
.reveal.is-visible,
.reveal-right.is-visible{
  opacity:1;
  transform:none;
}

.expertise-grid > .col:nth-child(1) .reveal-right{ transition-delay:.05s; }
.expertise-grid > .col:nth-child(2) .reveal-right{ transition-delay:.16s; }
.expertise-grid > .col:nth-child(3) .reveal-right{ transition-delay:.27s; }
.expertise-grid > .col:nth-child(4) .reveal-right{ transition-delay:.38s; }

.contact-panel .contact-item:nth-child(1){ transition-delay:.05s; }
.contact-panel .contact-item:nth-child(2){ transition-delay:.15s; }
.contact-panel .contact-item:nth-child(3){ transition-delay:.25s; }
.contact-panel .contact-item:nth-child(4){ transition-delay:.35s; }

.about-text:nth-of-type(2){ transition-delay:.12s; }

@media (prefers-reduced-motion: reduce){
  .hero-logo, .hero h1, .hero .role, .hero .divider-line, .hero .tagline, .hero-actions,
  .page-hero h1, .page-hero p{
    animation:none;
  }
  .reveal, .reveal-right{
    opacity:1;
    transform:none;
    transition:none;
  }
  .hero::before,
  .hero::after{
    animation:none;
  }
}
.footer-badge{
  height:42px;
  width:auto;
  border-radius:6px;
  filter:grayscale(1) opacity(.7);
  transition:filter .25s ease;
}
.footer-badge:hover{ filter:grayscale(0) opacity(1); }
.footer-jo{  height:150px !important;}
.footer-badge-frame{
  position:relative;
  width:150px;
  height:75px;
  border-radius:10px;
  overflow:hidden;
  flex:0 0 auto;
}
.footer-badge-frame::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 0deg, transparent 0 58%, var(--orange) 74%, var(--orange-deep) 82%, transparent 94%);
  animation:badgeSpin 3.6s linear infinite;
}
.footer-badge-frame::after{
  content:"";
  position:absolute;
  inset:2px;
  background:var(--surface);
  border-radius:8px;
}
.footer-badge{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:8px;
  filter:grayscale(1) opacity(.7);
  transition:filter .25s ease;
}
.footer-badge-frame:hover .footer-badge{ filter:grayscale(0) opacity(1); }

.badge-shine{
  position:absolute;
  inset:2px;
  z-index:2;
  border-radius:8px;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size:220% 100%;
  mix-blend-mode:overlay;
  animation:badgeShine 3.2s ease-in-out infinite;
}

@keyframes badgeSpin{ to{ transform:rotate(360deg); } }
@keyframes badgeShine{
  0%{ background-position:220% 0; }
  55%, 100%{ background-position:-120% 0; }
}