/* ═══════════════════════════════════════════
   ROOT & RESET — Design System Applied
═══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --p1:#9009B8;
  --p2:#763DC5;
  --p3:#B511E6;
  --cyan:#22C4F8;
  --dark:#06040A;
  --mid:#0D0915;
  --card:#120B1E;
  --white:#F0E8FF;
  --muted:rgba(240,232,255,.35);
  --border:rgba(144,9,184,.18);
  --paragraphs:rgba(240,232,255,.5);
  --glass-grad:linear-gradient(140deg,rgba(24,13,40,.9),rgba(12,7,22,.95));
  --radius:16px;
}
html{scroll-behavior:auto;background:var(--dark);}
body{background:var(--dark);color:var(--white);font-family:'Barlow',sans-serif;cursor:none;overflow-x:hidden;}

/* ═══ CURSOR ═══ */
#cur{width:8px;height:8px;background:var(--cyan);border-radius:50%;position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;box-shadow:0 0 12px var(--cyan);}
#cur-ring{width:36px;height:36px;border:1px solid rgba(34,196,248,.3);border-radius:50%;position:fixed;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);}
body.hov #cur{width:48px;height:48px;background:var(--p3);box-shadow:0 0 24px var(--p3);}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--p2);border-radius:50px;}

/* ═══════════════════════════════════════════
   NAV — Glass Rounded Bar (Design System)
═══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  padding:16px;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1080px;margin:0 auto;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  backdrop-filter:blur(20px);
  border-radius:var(--radius);
  padding:10px 10px 10px 20px;
  position:relative;overflow:hidden;
}
.nav-inner::before{
  content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:60%;height:45px;
  background:var(--p3);opacity:.15;filter:blur(30px);border-radius:100%;
  pointer-events:none;
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;letter-spacing:.12em;
  color:var(--white);text-decoration:none;
  display:flex;align-items:center;gap:10px;
  border-right:1px solid var(--border);
  margin-right:18px;padding-right:20px;
  transition:border-color .3s;
}
.nav-logo:hover{border-right-color:var(--p3);}
.nav-logo-img{
  height:36px;width:auto;display:block;
}
.nav-links{display:flex;gap:0;list-style:none;flex:1;}
.nav-links a{
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;
  color:var(--white);text-decoration:none;
  padding:12px 18px;opacity:.5;
  transition:opacity .3s;
}
.nav-links a:hover{opacity:1;}
.nav-cta{
  background:linear-gradient(90deg,var(--p1),var(--p3));
  color:#fff;
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;
  border:none;border-radius:50px;
  padding:12px 30px;cursor:none;
  transition:background .3s,box-shadow .3s;
}
.nav-cta:hover{box-shadow:0 4px 30px rgba(181,17,230,.5);}
.nav-cta span{position:relative;z-index:1;}

/* ═══════════════════════════════════════════
   HERO — DARK WITH REVEAL
═══════════════════════════════════════════ */
#hero{
  position:relative;width:100vw;height:100vh;
  overflow:hidden;background:var(--dark);
  display:flex;align-items:flex-end;
}

/* PHOTO STACK */
#hero-figure{
  position:absolute;inset:0;z-index:4;
  width:100%;height:100%;
}
#photo-stack{
  position:relative;width:100%;height:100%;
  /* fallback: static photo if WebGL or texture loading fails */
  background:url("../img/hero-frente.webp") center/cover no-repeat;
}
#photo-reveal{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}
#photo-glow{
  position:absolute;
  bottom:-20%;left:50%;transform:translateX(-50%);
  width:120%;height:50%;
  background:radial-gradient(ellipse at 50% 80%,rgba(144,9,184,.35),rgba(34,196,248,.1) 50%,transparent 70%);
  pointer-events:none;z-index:0;filter:blur(20px);
}

/* animated neon grid bg */
#hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(144,9,184,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(144,9,184,.04) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridpulse 8s ease infinite;
}
@keyframes gridpulse{0%,100%{opacity:.4}50%{opacity:1}}

/* spotlight glow */
#hero-glow{
  position:absolute;
  top:-20%;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(ellipse at 50% 30%,rgba(181,17,230,.22) 0%,rgba(144,9,184,.1) 35%,transparent 70%);
  z-index:1;pointer-events:none;
  animation:glowpulse 4s ease infinite;
}
@keyframes glowpulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

/* noise overlay */
#hero::after{
  content:'';position:absolute;inset:0;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;opacity:.6;
}

/* HERO TEXT */
#hero-text{
  position:absolute;
  bottom:80px;left:48px;
  z-index:10;
}
.ht-tag{
  font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
  opacity:0;transform:translateY(10px);
}
.ht-tag::before{content:'';width:8px;height:8px;background:var(--cyan);border-radius:50%;flex-shrink:0;}
.ht-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(72px,10vw,140px);
  line-height:.88;letter-spacing:-.01em;
}
.ht-title .line{overflow:hidden;display:block;}
.ht-title .word{display:inline-block;transform:translateY(108%);}
.ht-title .purple{color:var(--p3);text-shadow:0 0 40px rgba(181,17,230,.6);}
.ht-sub{
  margin-top:22px;
  font-size:16px;line-height:1.7;color:var(--paragraphs);
  max-width:480px;opacity:0;transform:translateY(16px);
}
.ht-btns{
  display:flex;gap:16px;margin-top:30px;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
}
.btn-primary{
  background:linear-gradient(90deg,var(--p1),var(--p3));
  color:#fff;font-family:'Barlow',sans-serif;
  font-size:15px;font-weight:700;
  border:none;border-radius:50px;padding:16px 36px;cursor:none;
  position:relative;overflow:hidden;
  box-shadow:0 4px 30px rgba(144,9,184,.4);
  transition:box-shadow .3s,transform .3s;
}
.btn-primary:hover{box-shadow:0 4px 50px rgba(181,17,230,.7);transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  border:2px solid rgba(240,232,255,.2);
  color:var(--white);font-family:'Barlow',sans-serif;
  font-size:15px;font-weight:700;
  border-radius:50px;padding:14px 34px;cursor:none;
  transition:border-color .3s,color .3s,background .3s;
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--dark);background:var(--cyan);}

/* RIGHT side */
#hero-right{
  position:absolute;right:48px;bottom:80px;
  z-index:10;text-align:right;
  opacity:0;transform:translateX(20px);
}
#hero-right p{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,232,255,.28);line-height:2;
}
#hero-right strong{color:var(--cyan);}

/* SCROLL indicator */
#hero-scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;
}
#hero-scroll span{
  font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,232,255,.2);
}
.scroll-arrow{
  width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--p2));
  position:relative;overflow:hidden;
}
.scroll-arrow::after{
  content:'';position:absolute;top:-100%;width:100%;height:100%;
  background:linear-gradient(to bottom,transparent,var(--cyan));
  animation:scrollarrow 2s ease infinite;
}
@keyframes scrollarrow{0%{top:-100%}100%{top:100%}}

/* ═══ LOADER ═══ */
#loader{
  position:fixed;inset:0;
  background:var(--dark);
  z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.ld-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(42px,8vw,80px);
  letter-spacing:.1em;
  background:linear-gradient(90deg,var(--p2),var(--cyan),var(--p3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  overflow:hidden;
}
.ld-logo span{display:block;transform:translateY(100%);}
.ld-bar-wrap{width:min(360px,70vw);height:2px;background:rgba(240,232,255,.06);border-radius:50px;position:relative;overflow:hidden;}
.ld-bar{position:absolute;inset-y:0;left:0;width:0;background:linear-gradient(90deg,var(--p2),var(--cyan));border-radius:50px;}
.ld-pct{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(240,232,255,.3);}

/* ═══════════════════════════════════════════
   MARQUEE — Rounded Strip
═══════════════════════════════════════════ */
#marquee{
  overflow:hidden;padding:18px 0;
  margin:0 16px;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  position:relative;
}
#marquee::before{
  content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:40%;height:30px;background:var(--p3);opacity:.12;filter:blur(25px);border-radius:100%;
}
.mq-track{display:flex;white-space:nowrap;animation:mq 18s linear infinite;}
.mq-item{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,5vw,64px);letter-spacing:.06em;
  padding:0 36px;flex-shrink:0;
  color:transparent;-webkit-text-stroke:2px rgba(144,9,184,.5);
  transition:color .3s,-webkit-text-stroke .3s;cursor:default;
}
.mq-item:hover{color:var(--p3);-webkit-text-stroke:0;}
.mq-sep{display:inline-flex;align-items:center;padding:0 4px;vertical-align:middle;opacity:.6;transition:opacity .3s;}
.mq-item:hover .mq-sep{opacity:1;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════
   SECTION WRAPPER (Design System pattern)
═══════════════════════════════════════════ */
.section-wrap{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;padding:100px 20px;
}
.section-content{width:100%;max-width:1080px;}

/* ═══════════════════════════════════════════
   ABOUT — Rounded Card Layout
═══════════════════════════════════════════ */
#about{
  padding:120px 48px;
  display:grid;grid-template-columns:1fr;
  gap:48px;
  max-width:1140px;margin:0 auto;
  position:relative;overflow:hidden;
}
#about::before{
  content:'HAGER';
  position:absolute;top:-40px;left:-20px;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(140px,22vw,300px);
  color:transparent;-webkit-text-stroke:1px rgba(144,9,184,.06);
  line-height:1;pointer-events:none;z-index:0;
  letter-spacing:-.02em;
}
.ab-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
}
.ab-tag::before{content:'01 —';}
.ab-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(56px,7vw,96px);line-height:.9;
  position:relative;z-index:1;
}
.ab-title em{
  font-style:italic;font-family:'Merriweather',serif;font-weight:300;
  background:linear-gradient(90deg,var(--p3),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ab-right{
  position:relative;z-index:1;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:40px;
  overflow:hidden;
}
.ab-right::before{
  content:'';position:absolute;top:-30px;right:20%;
  width:40%;height:30px;background:var(--p3);opacity:.15;filter:blur(25px);border-radius:100%;pointer-events:none;
}
.ab-right p{font-size:16px;line-height:1.8;color:var(--paragraphs);margin-bottom:18px;}
.ab-right p strong{color:var(--white);}
.ab-quote{
  margin-top:28px;padding:24px 28px;
  border-left:2px solid var(--p3);
  background:rgba(144,9,184,.08);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:'Merriweather',serif;
  font-size:clamp(16px,2vw,20px);
  line-height:1.5;font-style:italic;font-weight:300;
  color:var(--white);
}
.ab-quote em{color:var(--cyan);font-style:italic;}

/* ═══════════════════════════════════════════
   O QUE FAZEMOS — Glass Cards (Design System)
═══════════════════════════════════════════ */
#services{
  padding:100px 48px;
  background:var(--mid);
  position:relative;overflow:hidden;
}
#services::after{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(144,9,184,.08),transparent 70%);
  pointer-events:none;
}
.sv-header{margin-bottom:70px;max-width:1140px;margin-left:auto;margin-right:auto;}
.sv-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
}
.sv-tag::before{content:'02 —';}
.sv-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,8vw,110px);line-height:.88;
}
.sv-title em{font-style:italic;font-family:'Merriweather',serif;font-weight:300;color:var(--p3);}
.sv-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1140px;margin:0 auto;}
.sv-col{
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:45px 40px;
  position:relative;overflow:hidden;
  transition:border-color .4s;
}
.sv-col::before{
  content:'';position:absolute;top:-30px;left:30%;
  width:40%;height:30px;background:var(--p3);opacity:0;filter:blur(25px);border-radius:100%;
  transition:opacity .4s;pointer-events:none;
}
.sv-col:hover::before{opacity:.2;}
.sv-col:hover{border-color:rgba(144,9,184,.4);}
.sv-col-icon{
  width:56px;height:56px;margin-bottom:24px;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);
  position:relative;overflow:hidden;
  transition:border-color .3s,color .3s;
}
.sv-col-icon::before{
  content:'';position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:60%;height:15px;background:var(--cyan);opacity:.3;filter:blur(12px);border-radius:100%;
}
.sv-col:hover .sv-col-icon{border-color:rgba(34,196,248,.4);color:#fff;}
.sv-col-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:28px;letter-spacing:.04em;margin-bottom:16px;
  color:var(--white);
}
.sv-col-title em{color:var(--cyan);font-style:italic;font-family:'Merriweather',serif;font-weight:300;}
.sv-col-list{list-style:none;}
.sv-col-list li{
  font-size:15px;font-weight:400;
  color:var(--paragraphs);
  padding:9px 0;
  border-bottom:1px solid rgba(240,232,255,.05);
  display:flex;align-items:center;gap:12px;transition:color .3s;
}
.sv-col-list li:hover{color:var(--cyan);}
.sv-col-list li::before{content:'→';color:var(--p3);font-size:12px;}

/* ═══════════════════════════════════════════
   PARA QUEM — Feature Cards (Design System)
═══════════════════════════════════════════ */
#forwhom{
  padding:100px 48px;
  background:var(--dark);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.fw-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
}
.fw-tag::before{content:'03 —';}
.fw-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,7vw,100px);line-height:.9;
  margin-bottom:60px;
  text-align:center;
}
.fw-title em{
  font-style:italic;font-family:'Merriweather',serif;font-weight:300;
  background:linear-gradient(90deg,var(--p3),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.fw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1140px;width:100%;}
.fw-card{
  text-align:left;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:40px 36px;
  position:relative;overflow:hidden;cursor:none;
  transition:border-color .4s;
}
.fw-card::before{
  content:'';position:absolute;top:-30px;right:20%;
  width:35%;height:30px;background:var(--p3);opacity:0;filter:blur(25px);border-radius:100%;
  transition:opacity .4s;pointer-events:none;
}
.fw-card:hover::before{opacity:.2;}
.fw-card:hover{border-color:rgba(144,9,184,.4);}
.fw-card-num{
  font-family:'Merriweather',serif;font-style:italic;font-weight:300;
  font-size:3em;line-height:1;
  color:rgba(144,9,184,.15);
  position:absolute;top:20px;right:28px;
  transition:color .4s;
}
.fw-card:hover .fw-card-num{color:rgba(181,17,230,.25);}
.fw-card-icon{
  width:56px;height:56px;margin-bottom:20px;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--p3);
  position:relative;overflow:hidden;
  transition:border-color .4s,color .4s;
}
.fw-card-icon::before{
  content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:50%;height:12px;background:var(--p3);opacity:.25;filter:blur(10px);border-radius:100%;
}
.fw-card:hover .fw-card-icon{border-color:rgba(34,196,248,.4);color:var(--cyan);}
.fw-card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;letter-spacing:.03em;
  margin-bottom:12px;color:var(--white);
}
.fw-card-desc{font-size:15px;line-height:1.8;color:var(--paragraphs);}
.fw-card-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;font-family:'Barlow',sans-serif;
  font-size:14px;font-weight:700;
  color:var(--cyan);text-decoration:none;
  background:transparent;border:1px solid var(--border);
  border-radius:50px;padding:10px 24px;
  transition:border-color .3s,background .3s;
}
.fw-card-link:hover{border-color:var(--cyan);background:rgba(34,196,248,.08);}

/* ═══════════════════════════════════════════
   IMPACT — Centered Glow Panel (Design System)
═══════════════════════════════════════════ */
#impact{
  padding:120px 48px;
  background:var(--mid);
  text-align:center;
  position:relative;overflow:hidden;
}
#impact::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(181,17,230,.15),transparent 60%);
}
.ip-icon{
  width:72px;height:72px;margin-bottom:28px;
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;margin-right:auto;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);
}
.ip-icon::before{
  content:'';position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:60%;height:15px;background:var(--p3);opacity:.4;filter:blur(12px);border-radius:100%;
}
.ip-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,100px);
  line-height:1;letter-spacing:-.01em;
  position:relative;z-index:1;
}
.ip-title em{font-style:italic;font-family:'Merriweather',serif;font-weight:300;color:var(--p3);}
.ip-subtitle{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(28px,4vw,56px);
  line-height:1;color:var(--cyan);
  margin-top:8px;position:relative;z-index:1;
}
.ip-body{
  margin-top:32px;font-size:16px;line-height:1.8;
  color:var(--paragraphs);max-width:680px;
  margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
}
.ip-body strong{color:var(--white);}

/* ═══════════════════════════════════════════
   HORIZONTAL SCROLL — Rounded Project Cards
═══════════════════════════════════════════ */
#projects-outer{background:var(--dark);}
#projects-pin{
  height:100vh;overflow:hidden;
  display:flex;align-items:center;
  position:relative;
}
#proj-hdr{
  position:absolute;top:44px;z-index:10;
  left:50%;transform:translateX(-50%);
  width:100%;max-width:1140px;
  padding:0 48px;box-sizing:border-box;
}
#proj-hdr h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,90px);line-height:.9;
}
#proj-hdr h2 em{font-style:italic;font-family:'Merriweather',serif;font-weight:300;color:var(--p3);}
#proj-hdr p{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,232,255,.25);margin-top:8px;}
#proj-track{
  display:flex;gap:16px;padding:0 48px;
  will-change:transform;align-items:center;
}
.pcard{
  flex-shrink:0;
  width:min(400px,72vw);height:64vh;
  position:relative;overflow:hidden;cursor:none;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  border-radius:var(--radius);
}
.pcard-bg{
  position:absolute;inset:0;
  overflow:hidden;
  border-radius:var(--radius);
}
.pcard-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s;
  filter:brightness(.45) saturate(1.3);
}
.pcard:hover .pcard-bg img{transform:scale(1.07);filter:brightness(.35) saturate(1.5);}
.pcard-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,4,10,.85) 0%,transparent 55%);
  border-radius:var(--radius);
}
.pcard-glow{
  position:absolute;inset:0;opacity:0;
  transition:opacity .4s;
  border-radius:var(--radius);
}
.pcard:hover .pcard-glow{opacity:1;}
.pcard-inner{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;}
.pcard-tag{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px;
  display:inline-block;
  border:1px solid rgba(34,196,248,.2);border-radius:50px;
  padding:4px 12px;width:fit-content;
}
.pcard-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,4vw,50px);line-height:1;color:#fff;}
.pcard-desc{font-size:13px;color:rgba(255,255,255,.4);margin-top:8px;line-height:1.6;max-width:300px;}
.pcard-arrow{
  position:absolute;top:22px;right:22px;
  width:44px;height:44px;
  border:1px solid rgba(240,232,255,.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:rgba(255,255,255,.5);
  transform:rotate(-45deg);transition:all .35s;
}
.pcard:hover .pcard-arrow{background:var(--p3);border-color:var(--p3);color:#fff;transform:rotate(0);box-shadow:0 4px 20px rgba(181,17,230,.5);}
/* card colors */
.pc1 .pcard-bg{background:linear-gradient(135deg,#0a0514,#1a0a2e,#2d0d5c);}
.pc1 .pcard-glow{background:radial-gradient(circle at 50% 50%,rgba(144,9,184,.15),transparent 70%);}
.pc2 .pcard-bg{background:linear-gradient(135deg,#030d18,#061a30,#0a2550);}
.pc2 .pcard-glow{background:radial-gradient(circle at 50% 50%,rgba(34,196,248,.12),transparent 70%);}
.pc3 .pcard-bg{background:linear-gradient(135deg,#0d0514,#200a30,#3d0f60);}
.pc3 .pcard-glow{background:radial-gradient(circle at 50% 50%,rgba(181,17,230,.15),transparent 70%);}
.pc4 .pcard-bg{background:linear-gradient(135deg,#060a14,#0d1828,#162040);}
.pc4 .pcard-glow{background:radial-gradient(circle at 50% 50%,rgba(34,196,248,.1),transparent 70%);}
.pc5 .pcard-bg{background:linear-gradient(135deg,#100514,#200a1e,#400a40);}
.pc5 .pcard-glow{background:radial-gradient(circle at 50% 50%,rgba(181,17,230,.18),transparent 70%);}

#proj-prog{position:absolute;bottom:36px;left:48px;z-index:10;display:flex;align-items:center;gap:12px;}
.pp-bar{width:160px;height:2px;background:rgba(240,232,255,.06);border-radius:50px;position:relative;overflow:hidden;}
.pp-fill{position:absolute;inset-y:0;left:0;width:0;background:linear-gradient(90deg,var(--p2),var(--cyan));border-radius:50px;}
.pp-cnt{font-family:'Space Mono',monospace;font-size:10px;color:rgba(240,232,255,.25);letter-spacing:.1em;}

/* ═══════════════════════════════════════════
   CLIENTS — Rounded Logo Cards (Design System)
═══════════════════════════════════════════ */
#clients{padding:100px 48px;}
.cl-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);text-align:center;margin-bottom:16px;
  display:block;
}
.cl-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(44px,6vw,80px);
  text-align:center;margin-bottom:52px;
}
.cl-title em{font-style:italic;font-family:'Merriweather',serif;font-weight:300;color:var(--p3);}
.cl-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);gap:16px;
  max-width:1140px;margin:0 auto;
}
.cl-item{
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:28px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:border-color .3s;
}
.cl-item::before{
  content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:50%;height:20px;background:var(--p3);opacity:0;filter:blur(18px);border-radius:100%;
  transition:opacity .3s;pointer-events:none;
}
.cl-item:hover::before{opacity:.25;}
.cl-item:hover{border-color:rgba(144,9,184,.4);}
.cl-item img{
  height:36px;width:auto;max-width:110px;
  opacity:.5;
  transition:opacity .4s;
}
.cl-item:hover img{opacity:1;}

/* ═══════════════════════════════════════════
   CTA — Glass Newsletter Panel (Design System)
═══════════════════════════════════════════ */
#cta{
  padding:120px 48px 100px;
  background:var(--mid);
  text-align:center;position:relative;overflow:hidden;
}
#cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(144,9,184,.18),transparent 55%),
             radial-gradient(ellipse at 70% 50%,rgba(34,196,248,.1),transparent 55%);
}
.ct-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:20px;
  position:relative;z-index:1;
  display:inline-block;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
}
.ct-num{
  font-family:'Merriweather',serif;font-style:italic;font-weight:300;
  font-size:clamp(100px,18vw,220px);
  line-height:.85;
  background:linear-gradient(135deg,rgba(144,9,184,.15),rgba(34,196,248,.1));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;letter-spacing:-.03em;
  width:100%;text-align:center;
}
.ct-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,8vw,120px);
  line-height:.9;position:relative;z-index:1;
}
.ct-title em{
  font-style:italic;font-family:'Merriweather',serif;font-weight:300;
  background:linear-gradient(90deg,var(--p3),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ct-sub{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(28px,4vw,56px);
  color:rgba(240,232,255,.3);
  margin-top:4px;position:relative;z-index:1;
}
.ct-form{
  margin-top:48px;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:460px;
  margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:40px;
  overflow:hidden;
}
.ct-form::before{
  content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:50%;height:30px;background:var(--p3);opacity:.15;filter:blur(25px);border-radius:100%;pointer-events:none;
}
.ct-input{
  width:100%;background:rgba(240,232,255,.05);
  border:1px solid var(--border);
  color:var(--white);
  font-family:'Barlow',sans-serif;font-size:15px;
  padding:14px 20px;outline:none;
  border-radius:80px 16px 16px 80px;
  transition:border-color .3s;
}
.ct-input::placeholder{color:rgba(240,232,255,.25);}
.ct-input:focus{border-color:var(--p2);}
.ct-btn{
  width:100%;
  background:linear-gradient(90deg,var(--p1),var(--p3));
  color:#fff;
  font-family:'Barlow',sans-serif;
  font-size:16px;font-weight:700;
  border:none;border-radius:50px;
  padding:16px 36px;cursor:none;
  transition:box-shadow .3s,transform .3s;
  box-shadow:0 4px 40px rgba(144,9,184,.35);
}
.ct-btn:hover{box-shadow:0 4px 60px rgba(181,17,230,.6);transform:translateY(-2px);}
.ct-stat{
  margin-top:24px;
  font-family:'Merriweather',serif;font-style:italic;font-weight:300;
  font-size:clamp(16px,2vw,20px);
  color:rgba(240,232,255,.3);
  position:relative;z-index:1;
}
.ct-stat em{color:var(--cyan);font-style:italic;}

/* ═══════════════════════════════════════════
   BLOG — Glass Article Cards (Design System)
═══════════════════════════════════════════ */
#blog{padding:100px 48px;}
.bl-tag{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:50px;
  padding:6px 18px;
}
.bl-tag::before{content:'05 —';}
.bl-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,96px);line-height:.9;margin-bottom:52px;
}
.bl-title em{font-style:italic;font-family:'Merriweather',serif;font-weight:300;color:var(--p3);}
.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1140px;margin:0 auto;}
.bl-card{
  border-style:solid none none solid;border-width:1px;border-color:var(--border);
  background:var(--glass-grad);
  border-radius:var(--radius);
  padding:36px;
  position:relative;overflow:hidden;cursor:none;
  transition:border-color .4s;
}
.bl-card-img{
  margin:-36px -36px 24px;
  height:220px;overflow:hidden;
}
.bl-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.7) saturate(1.3);
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s;
}
.bl-card:hover .bl-card-img img{
  transform:scale(1.06);
  filter:brightness(.55) saturate(1.5);
}
.bl-card::before{
  content:'';position:absolute;top:-25px;left:30%;
  width:40%;height:25px;background:var(--p3);opacity:0;filter:blur(20px);border-radius:100%;
  transition:opacity .4s;pointer-events:none;
}
.bl-card:hover::before{opacity:.2;}
.bl-card:hover{border-color:rgba(144,9,184,.4);}
.bl-card-tag{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
  display:inline-block;
  border:1px solid rgba(34,196,248,.15);border-radius:50px;
  padding:4px 14px;
}
.bl-card-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,2.5vw,30px);line-height:1.1;margin-bottom:12px;}
.bl-card-desc{font-size:15px;line-height:1.7;color:var(--paragraphs);}
.bl-card-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;
  color:var(--p3);text-decoration:none;
  transition:color .3s;
}
.bl-card-link:hover{color:var(--cyan);}

/* ═══════════════════════════════════════════
   FOOTER — Multi-column (Design System)
═══════════════════════════════════════════ */
footer{
  padding:60px 48px 40px;
  background:var(--dark);
  border-top:1px solid var(--border);
}
.ft-inner{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:60px;margin-bottom:48px;
}
.ft-logo-img{height:40px;width:auto;opacity:.7;margin-bottom:16px;display:block;}
.ft-desc{font-size:15px;line-height:1.7;color:var(--paragraphs);max-width:36ch;margin-bottom:24px;}
.ft-social{display:flex;gap:12px;}
.ft-social a{
  width:44px;height:44px;
  border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(240,232,255,.4);text-decoration:none;
  transition:opacity .3s,border-color .3s,color .3s;
  opacity:.5;
}
.ft-social a:hover{opacity:1;border-color:var(--cyan);color:var(--cyan);}
.ft-col-title{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--paragraphs);margin-bottom:20px;
}
.ft-col-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft-col-links a{
  font-family:'Barlow',sans-serif;font-size:15px;font-weight:700;
  color:var(--white);text-decoration:none;
  transition:color .3s;
}
.ft-col-links a:hover{color:var(--cyan);}
.ft-bottom{
  max-width:1140px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border);
  padding-top:24px;
}
.ft-copy{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,232,255,.2);}

/* ═══════════════════════════════════════════
   REVEAL utils
═══════════════════════════════════════════ */
.wrap{max-width:1140px;margin:0 auto;width:100%;}
.rev-line{overflow:hidden;display:block;}
.rev-inner{display:block;transform:translateY(108%);}
.fade-up{opacity:0;transform:translateY(28px);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  nav{padding:10px;}
  .nav-inner{padding:8px 8px 8px 16px;}
  .nav-links{display:none;}
  .nav-logo{border-right:none;margin-right:0;padding-right:0;}
  #hero-text{left:20px;right:20px;bottom:40px;}
  #hero-right,#hero-scroll{display:none;}
  /* darken the bottom of the photo so the hero text stays readable */
  #hero-figure::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(6,4,10,.95) 0%,rgba(6,4,10,.7) 40%,transparent 68%);
  }
  #about{grid-template-columns:1fr;padding:72px 20px;gap:36px;}
  #services{padding:72px 20px;}
  .sv-cols{grid-template-columns:1fr;}
  #forwhom{padding:72px 20px;}
  .fw-grid{grid-template-columns:1fr;}
  #impact{padding:80px 20px;}
  #proj-hdr{left:20px;}
  #proj-track{padding:0 20px;}
  #clients{padding:60px 20px;}
  .cl-grid{grid-template-columns:repeat(3,1fr);}
  #cta{padding:80px 20px;}
  #blog{padding:72px 20px;}
  .bl-grid{grid-template-columns:1fr;}
  #marquee{margin:0 10px;}
  footer{padding:40px 20px 24px;}
  .ft-inner{grid-template-columns:1fr;gap:36px;text-align:center;}
  .ft-social{justify-content:center;}
  .ft-desc{max-width:none;margin-left:auto;margin-right:auto;}
  .ft-bottom{flex-direction:column;gap:12px;text-align:center;}
  .ft-copy{text-align:center;}
}