:root{
  --bg:#07090d;
  --bg-soft:#0d1118;
  --card:#10151d;
  --card-2:#141b24;
  --text:#fff;
  --muted:#9ca4b3;
  --green:#a6ff3f;
  --green-dark:#83d92b;
  --border:rgba(255,255,255,.10);
  --container:1340px;
  --radius:24px;
  --transition:.3s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(7,9,13,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(16px);
  transition:var(--transition);
}
.site-header.scrolled{background:rgba(7,9,13,.94);border-color:var(--border)}
.navbar{
  width:min(100% - 48px,var(--container));height:82px;
  margin:auto;display:flex;align-items:center;justify-content:space-between;
}

.brand img {
  width: 100px;
  height: auto;
  display: block;
}

.footer-brand img {
  width: 150px;
  height: auto;
  display: block;
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links>a{font-size:14px;color:#d8dce4;transition:var(--transition)}
.nav-links>a:hover,.nav-links>a.active{color:var(--green)}
.nav-links .nav-cta{
  padding:11px 18px;border:1px solid rgba(166,255,63,.5);
  border-radius:999px;color:var(--green);
}
.nav-links .nav-cta:hover{background:var(--green);color:#081006}
.nav-cta span{margin-left:5px}
.menu-toggle{display:none;background:none;border:0;cursor:pointer}
.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px 0}

.portfolio-hero{
  min-height:72vh;position:relative;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;padding:130px 24px 80px;
}
.hero-bg{
  position:absolute;inset:0;z-index:-3;
  background:url("../assets/images/hero/hero.webp") center/cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(4,7,11,.98) 0%,rgba(4,7,11,.88) 38%,rgba(4,7,11,.42) 72%,rgba(4,7,11,.80) 100%);
}
.portfolio-hero:after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 75% 45%,rgba(166,255,63,.12),transparent 35%);
}
.hero-content{width:min(100%,var(--container));margin:auto}
.eyebrow{
  color:var(--green);font-size:12px;font-weight:800;letter-spacing:3px;
  margin-bottom:14px;text-transform:uppercase;
}
.hero-content h1{
  max-width:780px;font-size:clamp(48px,7vw,88px);line-height:1.02;
  letter-spacing:-3px;font-weight:800;
}
.hero-content h1 span,.section-heading h2 span,.cta-box h2 span{color:var(--green)}
.hero-text{max-width:610px;color:#b6bdc9;font-size:18px;margin-top:24px}

.section{width:min(100% - 48px,var(--container));margin:auto}
.projects-section{padding:105px 0 70px}
.section-heading{margin-bottom:48px}
.section-heading h2{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-2px}
.section-heading>p:last-child{color:var(--muted);margin-top:15px;font-size:16px}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.project-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.project-card:hover{
  transform:translateY(-7px);
  border-color:rgba(166,255,63,.35);
  box-shadow:0 20px 55px rgba(0,0,0,.30);
}
.project-visual{
  height:390px;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.project-number{
  position:absolute;top:20px;right:22px;font-size:12px;
  color:rgba(255,255,255,.6);letter-spacing:2px;
}
.project-one{background:radial-gradient(circle at 50% 40%,#243227 0,#101713 38%,#080b0e 75%)}
.project-two{background:radial-gradient(circle at 50% 45%,#1e2b1d 0,#0e1510 42%,#080a0d 78%)}
.project-three{background:linear-gradient(135deg,#182018,#0a0d11)}
.project-four{background:radial-gradient(circle at 65% 40%,#29371e,#10150d 45%,#080a0d 80%)}
.project-five{background:linear-gradient(145deg,#101720,#18271a 55%,#080a0d)}
.project-six{background:radial-gradient(circle at 50% 45%,#26351e,#10140e 45%,#080a0d 80%)}

.mock-browser{
  width:74%;height:68%;background:#e9eee8;border-radius:14px;
  overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.45);
  transform:perspective(900px) rotateX(5deg) rotateY(-5deg);
}
.browser-top{height:30px;background:#d4d9d3;display:flex;gap:6px;align-items:center;padding-left:13px}
.browser-top i{width:7px;height:7px;border-radius:50%;background:#7d857d}
.mock-content{height:calc(100% - 30px);padding:42px;background:#f4f7f2;color:#101510}
.mock-content small{font-size:9px;letter-spacing:2px}
.mock-content strong{display:block;font-size:31px;line-height:1.05;margin-top:20px}
.mock-content span{display:block;width:90px;height:8px;border-radius:10px;background:#a6ff3f;margin-top:25px}

.phone-mockup{
  width:205px;height:360px;border:7px solid #252c25;border-radius:31px;
  background:#0b100c;box-shadow:0 25px 60px rgba(0,0,0,.55);padding:10px;
}
.phone-notch{width:75px;height:17px;background:#252c25;border-radius:0 0 13px 13px;margin:-10px auto 8px}
.phone-screen{height:calc(100% - 15px);border-radius:20px;padding:30px 18px;background:linear-gradient(145deg,#e9f3e5,#b8d8ae);color:#111}
.phone-screen small{font-size:8px;letter-spacing:2px}
.phone-screen b{display:block;font-size:23px;line-height:1.1;margin-top:28px}
.phone-button{display:block;width:75px;height:8px;background:#101710;border-radius:8px;margin-top:30px}

.brand-sheet{
  width:70%;height:72%;padding:35px;background:#e9eee8;color:#111;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 22px 45px rgba(0,0,0,.38);
  transform:rotate(-4deg);
}
.brand-symbol{font-size:28px;font-weight:900;letter-spacing:-2px}
.brand-sheet strong{font-size:48px;line-height:.88;letter-spacing:-3px}
.brand-sheet small{font-size:9px;letter-spacing:2px}

.campaign-card{
  width:70%;padding:38px 34px;background:#dcebd8;color:#0d130c;
  border-radius:20px;box-shadow:0 22px 50px rgba(0,0,0,.4);
  transform:rotate(3deg);
}
.campaign-card small{font-size:8px;letter-spacing:2px}
.campaign-card strong{display:block;font-size:38px;line-height:.9;margin-top:22px;letter-spacing:-2px}
.chart{height:65px;margin-top:25px;display:flex;align-items:end;gap:8px}
.chart span{display:block;flex:1;background:#10170f;border-radius:5px 5px 0 0}
.chart span:nth-child(1){height:25%}.chart span:nth-child(2){height:40%}
.chart span:nth-child(3){height:55%}.chart span:nth-child(4){height:72%}.chart span:nth-child(5){height:100%}

.ui-dashboard{
  width:78%;height:65%;background:#e8eee6;border-radius:15px;
  display:flex;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.45);
}
.dash-sidebar{width:23%;background:#192219}
.dash-main{flex:1;padding:25px}
.dash-title{width:42%;height:10px;background:#172016;border-radius:5px}
.dash-boxes{display:flex;gap:10px;margin-top:25px}
.dash-boxes i{height:45px;flex:1;background:#c8d7c4;border-radius:7px}
.dash-chart{height:100px;margin-top:22px;border-radius:10px;background:linear-gradient(165deg,transparent 55%,#a6ff3f 56%,#a6ff3f 59%,transparent 60%)}

.video-frame{
  width:72%;height:68%;border-radius:18px;
  background:linear-gradient(135deg,#263620,#121812);
  border:1px solid rgba(166,255,63,.28);
  padding:35px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 25px 55px rgba(0,0,0,.45);
}
.video-frame small{font-size:8px;letter-spacing:2px;color:var(--green)}
.video-frame strong{font-size:38px;line-height:.92;margin-top:12px;letter-spacing:-2px}
.play{
  width:55px;height:55px;border-radius:50%;background:var(--green);color:#0a1008;
  display:grid;place-items:center;font-size:18px;padding-left:3px;margin-bottom:auto;
}

.project-info{
  min-height:105px;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;
}
.project-type{color:var(--green);font-size:10px;font-weight:800;letter-spacing:2px}
.project-info h3{font-size:22px;margin-top:5px}
.project-info>a{
  width:45px;height:45px;border:1px solid var(--border);border-radius:50%;
  display:grid;place-items:center;font-size:20px;transition:var(--transition);
}
.project-card:hover .project-info>a{background:var(--green);color:#081006;border-color:var(--green);transform:rotate(45deg)}

.stats-section{padding:45px 0 100px}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);
}
.stat{padding:35px 25px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat strong{display:block;color:var(--green);font-size:40px;line-height:1}
.stat span{display:block;color:var(--muted);font-size:13px;margin-top:10px}

.portfolio-cta{padding:0 0 105px}
.cta-box{
  text-align:center;padding:90px 30px;border:1px solid rgba(166,255,63,.18);
  border-radius:30px;background:radial-gradient(circle at 50% 0,rgba(166,255,63,.12),transparent 48%),var(--card);
}
.cta-box h2{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-2px}
.cta-box>p:not(.eyebrow){max-width:620px;margin:18px auto 28px;color:var(--muted)}
.primary-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 22px;
  background:var(--green);color:#081006;font-weight:800;border-radius:999px;
  transition:var(--transition);
}
.primary-btn:hover{background:#fff;transform:translateY(-2px)}
.primary-btn span{font-size:18px}

.footer{border-top:1px solid var(--border);padding:55px 24px 30px;background:#05070a}
.footer-inner{width:min(100%,var(--container));margin:auto;text-align:center}
.footer-brand img{margin:0 auto 16px}
.footer-inner>p{color:var(--muted);font-size:14px}
.footer-links{display:flex;justify-content:center;gap:25px;margin:28px 0}
.footer-links a{font-size:13px;color:#c4c9d2}
.footer-links a:hover{color:var(--green)}
.footer small{color:#626a78;font-size:11px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .nav-links{gap:18px}
  .project-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(3){border-top:1px solid var(--border)}
  .stat:nth-child(4){border-top:1px solid var(--border);border-right:0}
}
@media(max-width:720px){
  .navbar{height:72px;width:min(100% - 30px,var(--container))}
  .brand img{width:132px}
  .menu-toggle{display:block}
  .nav-links{
    position:absolute;top:72px;left:15px;right:15px;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,13,18,.98);border:1px solid var(--border);
    border-radius:18px;padding:10px;opacity:0;visibility:hidden;
    transform:translateY(-8px);transition:var(--transition);
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links>a{padding:13px 14px}
  .nav-links .nav-cta{text-align:center;margin-top:6px}
  .portfolio-hero{min-height:67vh;padding:115px 20px 70px}
  .hero-content h1{font-size:clamp(44px,13vw,64px);letter-spacing:-2px}
  .hero-text{font-size:15px}
  .section{width:min(100% - 30px,var(--container))}
  .projects-section{padding:75px 0 45px}
  .project-visual{height:300px}
  .mock-content strong{font-size:25px}
  .brand-sheet strong{font-size:38px}
  .campaign-card strong,.video-frame strong{font-size:30px}
  .stats-section{padding:30px 0 70px}
  .stat{padding:27px 12px}
  .stat strong{font-size:32px}
  .cta-box{padding:65px 20px}
  .footer-links{flex-wrap:wrap;gap:15px}
}
@media(max-width:480px){
  .project-info{padding:20px}
  .project-info h3{font-size:18px}
  .project-visual{height:270px}
  .phone-mockup{transform:scale(.82)}
  .mock-browser{width:86%}
  .brand-sheet{width:80%}
  .campaign-card{width:82%}
  .ui-dashboard{width:88%}
  .video-frame{width:84%;padding:25px}
}

/* Phones: use the portrait workspace photo (same hero-m.webp as every other page) */
@media(max-width:700px){.hero-bg{background-image:url("../assets/images/hero/hero-m.webp");background-position:50% 25%}}