/* Mulbra Media — Charlie build */
:root{
  --ink:#070a0c; --bg:#080c11; --bone:#f3f2ea; --muted:#9aa3ad;
  --mint:#21f0b6; --sky:#30c9ff; --violet:#9b7bff;
  --border:rgba(255,255,255,.12); --glass:rgba(255,255,255,.06);
  --radius:18px; --e:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;background:
  radial-gradient(1200px 600px at 85% -200px, rgba(48,201,255,.08), transparent 60%),
  radial-gradient(900px 500px at -10% -220px, rgba(155,123,255,.08), transparent 60%),
  linear-gradient(180deg,#06080a,#0a1017);
color:var(--bone);font:16px/1.6 Poppins,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.container{width:min(1200px,92%);margin-inline:auto}
.grid{display:grid;gap:16px}
.card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:.55rem .85rem;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.chip.primary{border-color:transparent;background:linear-gradient(135deg,var(--mint),var(--sky));color:#071015;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:8px;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);font-size:.85rem;}
.nav{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid var(--border);
  background:linear-gradient(to bottom,rgba(7,10,12,.75),rgba(7,10,12,.35));backdrop-filter:saturate(120%) blur(8px);}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:900;letter-spacing:.2px;position:relative}
.brand img{width:28px;height:28px;border-radius:10px;object-fit:cover}
.brand .mulbra{font-weight:800; opacity:.95;}
.brand .media{
  background:linear-gradient(90deg,var(--mint),var(--sky),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900; letter-spacing:.4px;
}
.brand .au{ margin-left:8px; font-size:.72rem; padding:.12rem .4rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); opacity:.9;
}
.brand .spark{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:8px;
  background:
    radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 40%, transparent 70%),
    linear-gradient(90deg, var(--mint), var(--sky));
  box-shadow:0 0 16px rgba(48,201,255,.7), 0 0 32px rgba(33,240,182,.5);
  animation:pulse 2.8s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.2); opacity:.8; } }
.links{display:flex;gap:10px;align-items:center}
.nav .nav-toggle{display:none;margin-left:auto;font-size:1.45rem;line-height:1;padding:.45rem .65rem;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--bone);position:relative;z-index:120}
.nav .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.nav.open .scrim{opacity:1;pointer-events:auto}
@media (max-width:860px){
  .nav .nav-toggle{display:inline-block}
  .nav .links{position:fixed;top:0;right:0;height:100dvh;width:min(82vw,360px);transform:translateX(100%);
    background:linear-gradient(180deg,rgba(7,10,12,.98),rgba(7,10,12,.92));border-left:1px solid var(--border);
    box-shadow:-20px 0 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;
    padding:80px 18px 18px 18px;transition:transform .28s var(--e);z-index:95}
  .nav.open .links{transform:translateX(0)}
  body.nav-open{overflow:hidden}
}
header#home{padding-top:calc(72px + 32px)}
@media (max-width:860px){ header#home{padding-top:calc(68px + 36px)} }
.hero{display:grid;grid-template-columns:1fr;gap:18px}
.hero h1{font-size:clamp(30px,6.2vw,56px);line-height:1.07;margin:0}
.hero .sub{opacity:.9;margin:4px 0 12px 0;max-width:65ch}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
.hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.hero .meta .badge{opacity:.95}
.hero .hero-card{
  position:relative; border:1px solid var(--border); border-radius:24px; padding:24px 20px;
  background:
    radial-gradient(800px 400px at -10% -20%, rgba(33,240,182,.12), transparent 55%),
    radial-gradient(700px 350px at 110% -30%, rgba(48,201,255,.12), transparent 55%),
    rgba(255,255,255,.02);
  overflow:hidden; isolation:isolate;
}
.hero .hero-card::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0;
  background:conic-gradient(from 120deg at 50% 50%, rgba(33,240,182,.4), rgba(48,201,255,.4), rgba(155,123,255,.35), rgba(33,240,182,.4));
  filter:blur(28px); opacity:.20; pointer-events:none;
}
.hero .hero-card > *{ position:relative; z-index:1; }
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; opacity:.92;
  padding:.25rem .6rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.04);
  margin-bottom:8px;
}
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:linear-gradient(90deg,var(--mint),var(--sky)); box-shadow:0 0 10px rgba(48,201,255,.7); }
.hero h1 .em{ background:linear-gradient(90deg,var(--mint),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .actions .chip{ transform:translateZ(0); transition:transform .18s var(--e), box-shadow .18s var(--e); }
.hero .actions .chip:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
section#work{padding:30px 0}
h2{font-size:clamp(22px,3.4vw,30px);margin:0 0 10px 0}
.work-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.project{position:relative;overflow:hidden}
.project .mock{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0b0f12}
.project .mock img{width:100%;height:auto}
.project .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.project .title{font-weight:700}
.project .ext{font-size:.9rem;opacity:.8}
.project:hover{transform:translateY(-2px);transition:transform .25s var(--e)}
.project .tag{font-size:.9rem;opacity:.9}
.features{padding:30px 0}
.features-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{position:relative;display:flex;flex-direction:column;height:100%}
.feature .icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;background:rgba(255,255,255,.04);margin-bottom:8px;flex:0 0 auto}
.feature h3{margin:0 0 6px 0;font-size:1.05rem}
.feature p{margin-top:auto;opacity:.9}
.cta{margin:36px 0 20px 0;border:1px solid var(--border);border-radius:18px;padding:22px 18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03))}
.cta .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta h3{margin:0;font-size:clamp(20px,3.2vw,26px)}
.cta p{margin:6px 0 0 0;opacity:.9}
footer{padding:24px 0;border-top:1px solid var(--border);opacity:.9}
.case header.casehead{padding-top:calc(72px + 28px)}
.case .crumbs{display:flex;align-items:center;gap:8px;margin-bottom:10px;opacity:.9}
.case h1{font-size:clamp(26px,5vw,42px);margin:.2rem 0 .6rem 0}
.case .mockgrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.case img{border-radius:14px;border:1px solid var(--border);background:#0b0f12}
@media (max-width: 780px){
  .container{ padding-left:16px; padding-right:16px; }
  h1{ font-size:clamp(28px,7vw,36px); }
  .sub{ font-size:1rem; }
}

/* Contact form */
.hidden{ display:none !important; }
.form{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:10px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; opacity:.95; }
.form label.full{ grid-column:1 / -1; }
.form input, .form textarea{ appearance:none; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.03); color:var(--bone); padding:.75rem .9rem; font:inherit; line-height:1.5; }
.form textarea{ resize:vertical; min-height:140px; }
.form input:focus, .form textarea:focus{ outline:2px solid transparent; border-color:transparent; box-shadow:0 0 0 2px rgba(33,240,182,.55); }
.form .actions{ grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }


.footer-social {
  margin-bottom: 1rem;
  text-align: center;
}
.footer-social h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #fff;
}
.footer-social .social-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.footer-social .social-links li a {
  text-decoration: none;
  color: #ddd;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.footer-social .social-links li a:hover {
  color: #00ff66;
}
.footer-social img {
  width: 20px;
  height: 20px;
}



.footer-social .social-links li a {
  text-decoration: none;
  color: #ddd;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.footer-social .social-links li a:hover {
  color: #00ff66;
}
.footer-social .social-links li a img.icon {
  width: 18px;
  height: 18px;
}



.footer-social .social-links li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-social .social-links li a .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}



/* SEO body copy block */
.home-copy { padding: 3rem 0; }
.home-copy h2, .home-copy h3 { margin: 0 0 0.75rem; }
.home-copy p { line-height: 1.75; margin: 0 0 1rem; }
.home-copy ul { margin: 0 0 1rem 1.25rem; }
.home-copy li { margin: 0.25rem 0; }
@media (max-width: 640px) { .home-copy { padding: 2rem 0; } }



/* Homepage intro SEO section */
.home-intro { padding: 3rem 1rem; text-align: center; }
.home-intro h2 { margin-bottom: 0.5rem; }
.home-intro .tagline { margin-bottom: 2rem; color: #ccc; font-size: 1.1rem; }
.seo-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.seo-highlights .card {
  background: #111;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.seo-highlights .card h3 { margin-bottom: 0.5rem; }



/* Concise homepage SEO section */
.home-intro { padding: 3rem 1rem; text-align: center; }
.home-intro h2 { margin-bottom: 0.5rem; }
.home-intro .tagline { margin-bottom: 2rem; color: #ccc; font-size: 1.1rem; }

.seo-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.seo-highlights .card {
  background: #111;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.seo-highlights .card h3 { margin-bottom: 0.5rem; }



/* --- UX Enhancements (added) --- */
html { scroll-behavior: smooth; }

/* Prevent headings from hiding behind the sticky nav on anchor jumps */
#services, #features, #work, #contact { scroll-margin-top: 96px; }

/* Improve keyboard accessibility for interactive chips and nav links */
a.chip:focus-visible, button:focus-visible { 
  outline: 2px solid currentColor; 
  outline-offset: 3px; 
  border-radius: 9999px;
}