:root{
  --ink:#0b1220;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f8fafc;

  /* Hughes-ish accent vibe */
  --accent:#f59e0b;    /* amber */
  --accent2:#111827;   /* dark */
  --btn:#f59e0b;
  --btn-hover:#d97706;
}

body{ color:var(--text); }
a{ color: inherit; text-decoration: none; }

/* Top strip (phone/email) */
.top-strip{
  background:#0f172a;
  color:#fff;
  font-size:.95rem;
}
.top-strip a{ color:#fff; opacity:.95; }
.top-strip a:hover{ opacity:1; text-decoration: underline; }

/* Header / Nav */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.brand{
  font-weight:900;
  letter-spacing:.2px;
  color:#0f172a;
}
.nav-link{
  font-weight:700;
  color:#0f172a;
  opacity:.85;
}
.nav-link:hover{ opacity:1; }
.btn-primaryish{
  background:var(--btn);
  border:1px solid var(--btn);
  color:#111827;
  font-weight:900;
  padding:.7rem 1.0rem;
  border-radius:.8rem;
}
.btn-primaryish:hover{
  background:var(--btn-hover);
  border-color:var(--btn-hover);
  color:#111827;
}

/* ScrollSpy active nav styling */
.navbar .nav-link.active{
  opacity: 1;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.25rem;
  right:.25rem;
  bottom:.25rem;
  height:2px;
  background: var(--accent);
  border-radius: 999px;
}

/* =========================
   HERO PRO (Redesign)
   ========================= */

.hero--pro{
  position:relative;
  overflow:hidden;
  padding: clamp(4.25rem, 7vw, 7rem) 0;
  color:#fff;
  background:
    linear-gradient(0deg, rgba(15,23,42,.70), rgba(15,23,42,.70)),
    url("/images/hero/hero-bg.jpg") center/cover no-repeat;
}

/* layered background motion */
.hero--pro .hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero--pro .hero-glow{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 25%, rgba(245,158,11,.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(56,189,248,.18), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(245,158,11,.20), transparent 50%);
  filter: blur(28px);
  opacity:.75;
  animation: heroGlow 10s ease-in-out infinite;
}
@keyframes heroGlow{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(1.5%, -1.2%, 0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* subtle dotted texture with drift */
.hero--pro .hero-dots{
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.12;
  animation: dotsDrift 14s linear infinite;
}
@keyframes dotsDrift{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-22px, -22px, 0); }
}

.hero--pro .hero-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 35%, transparent 0%, rgba(0,0,0,.30) 70%, rgba(0,0,0,.50) 100%);
  opacity:.9;
}

/* left text styling */
.hero--pro .hero-kicker{
  display:inline-block;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.82rem;
  color: rgba(255,255,255,.82);
  padding:.35rem .7rem;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
}

.hero--pro .hero-title{
  margin-top: .9rem;
  margin-bottom: 0;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.02;
}
.hero--pro .hero-title-line{
  display:block;
  font-size: clamp(2.35rem, 4.8vw, 4.2rem);
}
.hero--pro .hero-title-line.accent{ color: var(--accent); }

.hero--pro .hero-lead{
  max-width: 58ch;
  color: rgba(255,255,255,.86);
  font-size: 1.1rem;
}

/* small “reveal” motion */
.hero--pro .reveal{
  opacity: 0;
  transform: translateY(10px);
  animation: revealIn .8s ease forwards;
}
.hero--pro .reveal:nth-child(1){ animation-delay: .05s; }
.hero--pro .reveal:nth-child(2){ animation-delay: .14s; }
.hero--pro .reveal:nth-child(3){ animation-delay: .23s; }

@keyframes revealIn{
  to { opacity:1; transform: translateY(0); }
}

.hero--pro .hero-cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  align-items:center;
}

.hero--pro .hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.hero--pro .trust-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-weight:800;
  font-size:.92rem;
}

/* right proof block */
.hero--pro .hero-proof{
  position:relative;
  padding: 1rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 42px rgba(2,6,23,.35);
}

.hero--pro .browser-frame{
  border-radius: 1rem;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,23,42,.70);
  transform: translateY(0);
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.hero--pro .browser-top{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.85);
}
.hero--pro .browser-top .dot{
  width:10px; height:10px; border-radius:999px; display:inline-block;
}
.hero--pro .browser-top .dot.red{ background:#ef4444; }
.hero--pro .browser-top .dot.yellow{ background:#f59e0b; }
.hero--pro .browser-top .dot.green{ background:#22c55e; }
.hero--pro .browser-top .url{
  margin-left:.35rem;
  font-size:.85rem;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.hero--pro .browser-body{
  background: rgba(0,0,0,.20);
}
.hero--pro .browser-img{
  width:100%;
  display:block;
  aspect-ratio: 16/11;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.hero--pro .mini-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.75rem;
}
@media (max-width: 575.98px){
  .hero--pro .mini-cards{ grid-template-columns: 1fr; }
}

.hero--pro .mini-card{
  display:block;
  padding:.85rem .9rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.hero--pro .mini-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.22);
}
.hero--pro .mini-title{
  font-weight: 900;
  color:#fff;
  margin-bottom:.2rem;
}
.hero--pro .mini-sub{
  font-size:.9rem;
  color: rgba(255,255,255,.74);
}

.hero--pro .hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.75rem;
}
.hero--pro .metric{
  padding:.7rem .75rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.hero--pro .metric-num{
  font-weight: 900;
  color:#fff;
  line-height: 1.1;
}
.hero--pro .metric-label{
  font-size:.85rem;
  color: rgba(255,255,255,.70);
  font-weight: 800;
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .hero--pro .hero-glow,
  .hero--pro .hero-dots,
  .hero--pro .browser-frame,
  .hero--pro .reveal{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.btn-ghost{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:900;
  padding:.7rem 1.0rem;
  border-radius:.8rem;
  background:transparent;
}
.btn-ghost:hover{
  border-color:#fff;
  color:#fff;
}

/* Section titles like the reference (small kicker + big title) */
.kicker{
  font-weight:900;
  color:var(--accent);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
}
.section-title{
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
}
.section-sub{ color:var(--muted); }

/* Anchor offset for sticky header */
section[id]{
  scroll-margin-top: 90px;
}

/* Portfolio grid (image + title) */
.work-card{
  border:1px solid var(--line);
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.work-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 24px rgba(2,6,23,.10);
}
.work-thumb{
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.work-meta{
  padding:1rem 1rem 1.15rem;
}
.work-meta h3{
  font-size:1.05rem;
  font-weight:900;
  margin:0;
}

/* Blur-up loading effect */
.img-blur{
  filter: blur(10px);
  transform: scale(1.02);
  transition: filter 5.25s cubic-bezier(.22,1,.36,1),
              transform 5.25s cubic-bezier(.22,1,.36,1);
}

.img-blur.is-loaded{
  filter: blur(0);
  transform: scale(1);
}

/* Portfolio width constraint (for 2-card layout) */
.portfolio-wrap{
  max-width: 1100px;
}

/* Strategy 3-up icons */
.strategy{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strategy-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.25rem;
  height:100%;
}
.strategy-icon{
  width:54px;height:54px;
  border-radius:14px;
  background: rgba(245,158,11,.18);
  display:grid;place-items:center;
  color:#92400e;
  font-size:1.35rem;
  margin-bottom:.9rem;
}
.strategy-card h3{
  font-weight:900;
  font-size:1.15rem;
  margin-bottom:.35rem;
}
.strategy-card p{ color:var(--muted); margin:0; }

/* FAQ accordion */
.accordion-button{ font-weight:900; }
.accordion-body{ color:var(--muted); }

/* Contact section */
.contact{
  background:
    linear-gradient(180deg, #0f172a, #0b1220);
  color:#fff;
}
.contact .section-title{ color:#fff; }
.contact .section-sub{ color:rgba(255,255,255,.78); }
.contact-card{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  padding:1.25rem;
}
.form-control, .form-select{
  border-radius:.8rem;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.form-control::placeholder{ color:rgba(255,255,255,.65); }
.form-label{ font-weight:800; }
.small-link{ color:rgba(255,255,255,.85); }
.small-link:hover{ color:#fff; text-decoration: underline; }

/* Footer */
footer{
  background:#0b1220;
  color:rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.10);
}

.footer-muted-link{
  color: var(--muted);
  opacity: .50;
}

.footer-muted-link:hover{
  color: #fff;
  opacity: .55;
  text-decoration: underline;
}

/* =========================
   Scroll Toggle (Top / Bottom)
   ========================= */

.scroll-toggle{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,23,42,.85);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 10px 28px rgba(2,6,23,.35);
  backdrop-filter: blur(6px);
  transition:
    transform .15s ease,
    opacity .15s ease,
    background .15s ease,
    border-color .15s ease;
  opacity: 0;
  pointer-events: none;
}
.scroll-toggle:hover{
  transform: translateY(-2px);
  background: rgba(15,23,42,.95);
  border-color: rgba(255,255,255,.35);
}
.scroll-toggle.show{
  opacity: 1;
  pointer-events: auto;
}
.scroll-toggle i{
  font-size: 1.1rem;
  transition: transform .2s ease;
}
/* motion safety */
@media (prefers-reduced-motion: reduce){
  .scroll-toggle,
  .scroll-toggle i{
    transition: none;
  }
}