/* ============================================================
   App & Design — style.css
   Instrument Serif + Inter | Mobile-first
   Breakpoints: 768px (tablet) | 1024px (desktop)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
ul,ol{list-style:none;}
input,textarea,select{font:inherit;}

/* ── Tokens ── */
:root{
  --bg:#000;--bg1:#090909;--bg2:#111;
  --surface:#161616;--surface2:#1c1c1c;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.04);
  --orange:#f5a400;--orange2:#ffc233;
  --white:#fff;--text:#e8e5e0;--muted:#6b6b6b;--muted2:#3a3a3a;
  --ff-serif:'Instrument Serif',Georgia,serif;
  --ff-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-full:9999px;
  --t:.22s ease;
  --nav-h:64px;
}

/* ── Base ── */
body{background:var(--bg);color:var(--text);font-family:var(--ff-sans);font-size:16px;line-height:1.6;}

/* ── Container ── */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem;}

/* ── Section ── */
.section{padding:5rem 0;}

/* ── Typography ── */
.display-xl{font-family:var(--ff-serif);font-size:clamp(2.8rem,8vw,5.5rem);font-weight:400;line-height:1.06;letter-spacing:-.03em;color:var(--white);}
.display-lg{font-family:var(--ff-serif);font-size:clamp(2rem,5vw,3.8rem);font-weight:400;line-height:1.08;letter-spacing:-.025em;color:var(--white);}
.display-md{font-family:var(--ff-serif);font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:400;line-height:1.15;letter-spacing:-.02em;color:var(--white);}
.text-orange{color:var(--orange);}
.text-muted{color:var(--muted);}
.italic{font-style:italic;}

/* ── Label ── */
.label{display:inline-flex;align-items:center;gap:.55rem;font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.label::before{content:'';display:block;width:16px;height:1px;background:var(--muted2);flex-shrink:0;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--r-md);font-family:var(--ff-sans);font-size:.875rem;font-weight:500;min-height:44px;white-space:nowrap;transition:all var(--t);cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--orange);color:#000;font-weight:600;border-color:var(--orange);}
.btn-primary:hover{background:var(--orange2);border-color:var(--orange2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(245,164,0,.25);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.btn-ghost{background:transparent;color:var(--muted);padding:.75rem 0;border:none;}
.btn-ghost .arr{color:var(--orange);display:inline-block;transition:transform var(--t);}
.btn-ghost:hover{color:var(--text);}
.btn-ghost:hover .arr{transform:translateX(4px);}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .85rem;border-radius:var(--r-full);border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:.72rem;font-weight:500;color:var(--muted);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:bdot 2.5s ease-in-out infinite;}
@keyframes bdot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.5);}50%{opacity:.7;box-shadow:0 0 0 4px rgba(34,197,94,0);}}

/* ── Tags ── */
.tag{display:inline-block;font-size:.6rem;font-weight:500;letter-spacing:.07em;color:var(--muted2);border:1px solid rgba(255,255,255,.06);border-radius:4px;padding:.18rem .5rem;}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;}

/* ── Section heads ── */
.sec-head{margin-bottom:2.5rem;}
.sec-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;}

/* ── Page hero ── */
.page-hero{background:var(--bg);padding:5rem 0 4rem;border-bottom:1px solid var(--border2);position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(245,164,0,.05) 0%,transparent 65%);pointer-events:none;}
.page-kicker{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:var(--r-full);border:1px solid var(--border2);background:rgba(255,255,255,.02);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem;}

/* ── Ticker ── */
.ticker{border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);background:rgba(255,255,255,.01);overflow:hidden;padding:.85rem 0;}
.ticker-track{display:flex;width:max-content;gap:2.5rem;animation:ticker-scroll 30s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:.65rem;white-space:nowrap;font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);}
.ticker-item b{color:var(--orange);font-weight:400;font-size:.5rem;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Card grid ── */
.card-grid{display:grid;gap:1px;background:var(--border2);border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden;}
.card-grid>*{background:var(--bg1);}
.card{background:var(--bg1);padding:1.75rem;transition:background var(--t);}
.card:hover{background:var(--bg2);}

/* ── Metrics strip ── */
.metrics-strip{background:var(--orange);overflow:hidden;position:relative;}
.metrics-strip::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:metrics-shine 4s ease-in-out infinite;pointer-events:none;}
@keyframes metrics-shine{0%{left:-100%;}60%,100%{left:130%;}}
.metrics-row{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:0 auto;padding:0 1.25rem;}
.metric-cell{
  padding:2.75rem 1.5rem;
  text-align:center;
  border-right:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  transition:transform .2s ease;
}
.metric-cell:hover{transform:translateY(-2px);}
.metric-cell:nth-child(even){border-right:none;}
.metric-cell:nth-last-child(-n+2){border-bottom:none;}
.metric-n{
  font-family:var(--ff-sans);
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:700;
  color:#000;
  line-height:1;
  letter-spacing:-.03em;
  display:block;
}
.metric-l{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
  display:block;
}
.metric-bar{
  width:24px;
  height:2px;
  background:rgba(0,0,0,.2);
  border-radius:2px;
  margin-top:.1rem;
}

/* ── CTA section ── */
.sec-cta{background:var(--bg);border-top:1px solid var(--border2);padding:5rem 0;text-align:center;position:relative;overflow:hidden;}
.sec-cta::before{content:'';position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse at center bottom,rgba(245,164,0,.08) 0%,transparent 60%);pointer-events:none;}
.sec-cta::after{content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(to right,transparent,rgba(245,164,0,.22),transparent);}
.cta-inner{position:relative;z-index:1;}
.cta-h{font-family:var(--ff-serif);font-size:clamp(2.4rem,9vw,6rem);font-weight:400;font-style:italic;color:var(--white);line-height:1.08;letter-spacing:-.028em;max-width:14ch;margin:.75rem auto 1.25rem;}
.cta-sub{font-size:.97rem;color:var(--muted);line-height:1.77;max-width:42ch;margin:0 auto 2.25rem;}
.cta-btns{display:flex;justify-content:center;align-items:center;gap:.85rem;flex-wrap:wrap;}
.cta-email{margin-top:1.5rem;font-size:.77rem;color:var(--muted2);}
.cta-email a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color var(--t);}
.cta-email a:hover{color:var(--text);}

/* ═══════════════════════════════ NAV ═══════════════════════════════ */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(0,0,0,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border2);transition:border-color var(--t),background var(--t);}
.site-nav.scrolled{border-bottom-color:var(--border);background:rgba(0,0,0,.96);}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.nav-logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0;transition:opacity var(--t);}
.nav-logo:hover{opacity:.85;}
.nav-logo-img{height:38px;width:auto;flex-shrink:0;}
.nav-wordmark{font-family:var(--ff-sans);font-size:1.05rem;font-weight:600;color:var(--white);letter-spacing:-.01em;line-height:1;}
.nav-amp{color:var(--orange);font-weight:400;}
.nav-links{display:none;align-items:center;gap:.25rem;}
.nav-link{display:block;padding:.45rem .75rem;font-size:.85rem;font-weight:500;color:var(--muted);border-radius:var(--r-sm);transition:color var(--t),background var(--t);}
.nav-link:hover,.nav-link.active{color:var(--white);background:rgba(255,255,255,.06);}
.nav-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0;}
.nav-cta{display:none;}
.nav-ham{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t);}
.nav-ham:hover{background:rgba(255,255,255,.07);}
.ham-bar{display:block;height:1.5px;background:var(--white);border-radius:2px;transition:all .25s ease;transform-origin:center;}
.nav-ham[aria-expanded="true"] .ham-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-ham[aria-expanded="true"] .ham-bar:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-ham[aria-expanded="true"] .ham-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;backdrop-filter:blur(2px);animation:ovin .25s ease;}
.nav-overlay.open{display:block;}
@keyframes ovin{from{opacity:0;}to{opacity:1;}}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);z-index:300;background:#0a0a0a;border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border2);height:var(--nav-h);flex-shrink:0;}
.nav-drawer-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);color:var(--muted);cursor:pointer;transition:background var(--t),color var(--t);}
.nav-drawer-close:hover{background:rgba(255,255,255,.07);color:var(--white);}
.nav-drawer-links{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.25rem;}
.nav-drawer-link{display:block;padding:.85rem 1rem;font-size:1rem;font-weight:500;color:var(--muted);border-radius:var(--r-md);border:1px solid transparent;transition:all var(--t);}
.nav-drawer-link:hover,.nav-drawer-link.active{color:var(--white);background:rgba(255,255,255,.05);border-color:var(--border2);}
.nav-drawer-foot{padding:1.25rem;border-top:1px solid var(--border2);display:flex;flex-direction:column;gap:1rem;}
.nav-drawer-email{text-align:center;font-size:.78rem;color:var(--muted2);}
.nav-drawer-email a{color:var(--muted);transition:color var(--t);}
.nav-drawer-email a:hover{color:var(--orange);}
.metric-n.counting{opacity:.6;}
.metric-n.done{transition:opacity .3s ease;opacity:1;}
body.nav-open{overflow:hidden;}
main{padding-top:var(--nav-h);}

/* ═══════════════════════════════ FOOTER ═══════════════════════════════ */
.site-footer{background:#050505;border-top:1px solid var(--border2);padding:4rem 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--border2);}
.footer-logo{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;transition:opacity var(--t);}
.footer-logo:hover{opacity:.85;}
.footer-logo-img{height:36px;width:auto;flex-shrink:0;}
.footer-wordmark{font-family:var(--ff-sans);font-size:1rem;font-weight:600;color:var(--white);letter-spacing:-.01em;}
.footer-amp{color:var(--orange);font-weight:400;}
.footer-desc{font-size:.85rem;color:var(--muted);line-height:1.72;max-width:32ch;margin-bottom:1.25rem;}
.footer-social{display:flex;gap:.5rem;}
.footer-soc{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border2);color:var(--muted);background:rgba(255,255,255,.02);transition:all var(--t);}
.footer-soc:hover{color:var(--white);border-color:var(--border);background:rgba(255,255,255,.06);}
.footer-col-title{font-family:var(--ff-sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:1rem;}
.footer-col-links{display:flex;flex-direction:column;gap:.55rem;}
.footer-col-links a{font-size:.875rem;color:var(--muted);transition:color var(--t);display:inline-block;padding:.1rem 0;}
.footer-col-links a:hover{color:var(--white);}
.footer-email-link{display:block;font-size:.875rem;color:var(--muted);margin-bottom:.4rem;transition:color var(--t);}
.footer-email-link:hover{color:var(--orange);}
.footer-hours{font-size:.8rem;color:var(--muted2);margin-bottom:1.25rem;}
.footer-bottom{display:flex;flex-direction:column;gap:.75rem;padding-top:1.5rem;}
.footer-copy{font-size:.78rem;color:var(--muted2);}
.footer-legal{display:flex;gap:1.25rem;}
.footer-legal a{font-size:.78rem;color:var(--muted2);transition:color var(--t);}
.footer-legal a:hover{color:var(--muted);}

/* ── Scroll reveal ── */
.fi{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.fi.on{opacity:1;transform:none;}
.fi.d1{transition-delay:.07s;}.fi.d2{transition-delay:.14s;}.fi.d3{transition-delay:.21s;}.fi.d4{transition-delay:.28s;}.fi.d5{transition-delay:.35s;}

/* ── Focus / Selection ── */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px;}
::selection{background:rgba(245,164,0,.25);color:var(--white);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--muted2);border-radius:3px;}

/* ─────────────────── RESPONSIVE ─────────────────── */
@media(min-width:768px){
  :root{--nav-h:72px;}
  .wrap{padding:0 2rem;}
  .section{padding:6.5rem 0;}
  .nav-logo-img{height:42px;}
  .nav-wordmark{font-size:1.1rem;}
  .nav-links{display:flex;}
  /* Tablet: hide Home + Contact, show core 3 */
  .nav-links li:first-child,.nav-links li:last-child{display:none;}
  .nav-cta{display:inline-flex;}
  .nav-ham{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:3rem 2.5rem;}
  .footer-brand{grid-column:1/-1;}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;}
  .metrics-row{grid-template-columns:repeat(4,1fr);padding:0 2rem;}
  .metric-cell{border-bottom:none;padding:3rem 2rem;}
  .metric-cell:nth-child(even){border-right:1px solid rgba(0,0,0,.1);}
  .metric-cell:last-child{border-right:none;}
  .sec-cta{padding:7rem 0;}
}
@media(min-width:1024px){
  :root{--nav-h:76px;}
  .wrap{padding:0 3rem;}
  .section{padding:8rem 0;}
  .nav-logo-img{height:46px;}
  .nav-wordmark{font-size:1.15rem;}
  .nav-links li{display:list-item !important;}
  .nav-links{gap:.35rem;}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2rem 3rem;}
  .footer-brand{grid-column:auto;}
  .site-footer{padding:5rem 0 2.5rem;}
  .sec-cta{padding:9rem 0;}
}

/* ── Icon box (from icons.php helper) ── */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Service card — icon sits 0.75rem above the heading ── */
.svc-card > div[style*="border-radius"],
.svc-card > .svc-icon {
  margin-bottom: 0.75rem;
}

/* ── Hover: icon box warms up ── */
.svc-card:hover > div[style*="border-radius"] {
  background: rgba(245,164,0,.09) !important;
  border-color: rgba(245,164,0,.25) !important;
}
.svc-card:hover > div[style*="border-radius"] svg {
  stroke: var(--orange) !important;
}

/* ── Value cards (about page) ── */
.value-card > div[style*="border-radius"] {
  margin-bottom: 0.85rem;
}
.value-card:hover > div[style*="border-radius"] {
  background: rgba(245,164,0,.09) !important;
  border-color: rgba(245,164,0,.25) !important;
}
.value-card:hover > div[style*="border-radius"] svg {
  stroke: var(--orange) !important;
}

/* ── Engagement cards (freelancers page) ── */
.eng-card > div[style*="border-radius"] {
  margin-bottom: 0.85rem;
}

/* ── Guarantee cards (contact page) ── */
.guarantee-card {
  align-items: flex-start;
  gap: 1rem;
}
.guarantee-card > div[style*="border-radius"] {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Location card (about page) ── */
.location-item > div[style*="border-radius"] {
  flex-shrink: 0;
}

/* ── Contact info card ── */
.contact-info-item > div[style*="border-radius"] {
  flex-shrink: 0;
}
.contact-info-item:hover > div[style*="border-radius"] svg {
  stroke: var(--orange) !important;
}

/* ── Tech stack grid ── */
.tech-cell > div[style*="border-radius"] {
  flex-shrink: 0;
}
.tech-cell:hover > div[style*="border-radius"] {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.tech-cell:hover > div[style*="border-radius"] svg {
  stroke: rgba(255,255,255,0.85) !important;
}

/* ── Service tag with icon ── */
.svc-card-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ── Skill row icon ── */
.skill-name {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── How-it-works cards (freelancers) ── */
.how-card > div[style*="border-radius"] {
  flex-shrink: 0;
}