/* ═══════════════════════════════════════════════════════════
   Vishal Kumar Rajak — Portfolio
   Light "trust" palette: deep navy ink, confident blue,
   generous whitespace, soft elevation. No pure black.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --bg:#f5f8fd;
  --bg-tint:#eef4fc;
  --surface:#ffffff;

  /* ink */
  --ink:#0f2744;          /* headings */
  --text:#3f5270;         /* body */
  --muted:#76889f;        /* secondary */

  /* brand */
  --primary:#1d4ed8;
  --primary-soft:#e8effe;
  --sky:#0ea5e9;
  --teal:#0891b2;
  --success:#059669;
  --amber:#d97706;

  --line:#e2e9f4;
  --line-strong:#cfdbec;

  --grad:linear-gradient(110deg,#1d4ed8 0%,#2f6fe4 45%,#0ea5e9 100%);

  --shell:1180px;
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;

  --sh-sm:0 1px 2px rgba(15,39,68,.05),0 3px 10px rgba(15,39,68,.045);
  --sh:0 2px 5px rgba(15,39,68,.05),0 14px 32px rgba(15,39,68,.075);
  --sh-lg:0 6px 14px rgba(15,39,68,.06),0 28px 64px rgba(15,39,68,.11);
  --sh-brand:0 10px 28px rgba(29,78,216,.26);

  --ease:cubic-bezier(.22,1,.36,1);
  --head:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}

::selection{background:var(--primary);color:#fff}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg-tint)}
::-webkit-scrollbar-thumb{background:#c3d2e6;border-radius:10px;border:3px solid var(--bg-tint)}
::-webkit-scrollbar-thumb:hover{background:#a9bdd8}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}

/* ═══ Preloader ═══ */
.preloader{
  position:fixed;inset:0;z-index:999;
  background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .55s var(--ease),visibility .55s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader__mark{
  font-family:var(--head);font-weight:800;font-size:2.3rem;letter-spacing:.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-align:center;margin-bottom:1.1rem;
  animation:pulseMark 1.4s ease-in-out infinite;
}
@keyframes pulseMark{0%,100%{opacity:1}50%{opacity:.4}}
.preloader__bar{width:170px;height:3px;background:var(--line);border-radius:4px;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--grad);border-radius:4px;animation:loadBar 1.1s var(--ease) forwards}
@keyframes loadBar{to{width:100%}}

/* ═══ Scroll progress ═══ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--grad);
  transition:width .08s linear;
}

/* ═══ Custom cursor ═══ */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity .3s;
}
.cursor{width:32px;height:32px;border:1.5px solid rgba(29,78,216,.55);transition:transform .18s var(--ease),opacity .3s,background .2s}
.cursor-dot{width:5px;height:5px;background:var(--primary)}
.cursor.is-active{background:rgba(29,78,216,.1)}
@media (hover:hover) and (pointer:fine){
  .cursor,.cursor-dot{opacity:1}
  body,a,button,.tilt,input,textarea{cursor:none}
}

/* ═══ Background ═══ */
.bg-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(29,78,216,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(29,78,216,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
}
.blob{position:absolute;border-radius:50%;filter:blur(120px)}
.blob--1{width:620px;height:620px;background:rgba(59,130,246,.3);top:-240px;left:-180px;animation:drift1 24s ease-in-out infinite}
.blob--2{width:520px;height:520px;background:rgba(14,165,233,.22);top:14%;right:-200px;animation:drift2 28s ease-in-out infinite}
.blob--3{width:460px;height:460px;background:rgba(8,145,178,.16);bottom:-200px;left:30%;animation:drift1 32s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,80px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,50px)}}
.bg-noise{display:none}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* ═══ Header ═══ */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 0;transition:all .35s var(--ease)}
.header.scrolled{
  padding:.65rem 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 8px 28px rgba(15,39,68,.07);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--head);font-weight:700;color:var(--ink)}
.brand__mark{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:12px;background:var(--grad);color:#fff;
  font-size:.86rem;font-weight:800;letter-spacing:.04em;
  box-shadow:var(--sh-brand);
}
.brand__text{font-size:1.1rem;letter-spacing:-.015em}
.brand__text em{color:var(--sky);font-style:normal}

.nav{display:flex;gap:.2rem}
.nav a{
  position:relative;padding:.5rem .85rem;border-radius:9px;
  font-size:.91rem;font-weight:500;color:var(--muted);
  transition:color .25s,background .25s;
}
.nav a:hover{color:var(--ink);background:var(--primary-soft)}
.nav a.active{color:var(--primary);background:var(--primary-soft);font-weight:600}

.header__actions{display:flex;align-items:center;gap:.7rem}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:0;position:relative;box-shadow:var(--sh-sm)}
.burger span{
  position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ═══ Buttons ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.88rem 1.6rem;border-radius:12px;border:1px solid transparent;
  font-family:var(--head);font-size:.93rem;font-weight:600;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s;
  will-change:transform;
}
.btn--sm{padding:.58rem 1.2rem;font-size:.86rem;border-radius:10px}
.btn--block{width:100%}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{box-shadow:0 16px 38px rgba(29,78,216,.38);transform:translateY(-2px)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh)}

/* ═══ Shared type ═══ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  padding:.42rem 1rem;border-radius:999px;
  background:var(--primary-soft);border:1px solid rgba(29,78,216,.14);
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:pulseDot 2s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 9px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}

.h2{
  font-family:var(--head);font-weight:700;letter-spacing:-.03em;line-height:1.13;
  font-size:clamp(1.95rem,4.3vw,3rem);margin:0 0 1rem;color:var(--ink);
}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
.section--alt{background:var(--bg-tint)}
.section__head{max-width:700px;margin-bottom:3.2rem}
.section__lead{color:var(--muted);font-size:1.05rem;margin:0}

/* ═══ HERO ═══ */
.hero{min-height:100svh;display:flex;align-items:center;padding:7.5rem 0 4.5rem;position:relative;overflow-x:clip}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}

.hero__title{
  font-family:var(--head);font-weight:800;letter-spacing:-.045em;line-height:1.03;
  font-size:clamp(2.7rem,7vw,4.9rem);margin:0 0 .65rem;color:var(--ink);
}
.hero__title .line{display:block}

.hero__role{font-family:var(--head);font-size:clamp(1.05rem,2.3vw,1.5rem);font-weight:600;margin:0 0 1.35rem;min-height:1.6em}
.hero__role-static{color:var(--muted);font-weight:400}
.typed{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.caret{display:inline-block;width:2.5px;height:1.05em;background:var(--sky);vertical-align:-.16em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.hero__lead{color:var(--text);font-size:1.06rem;max-width:55ch;margin:0 0 2.1rem}

.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.3rem}

.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;font-size:.88rem;color:var(--muted)}
.hero__meta li{display:flex;align-items:center;gap:.45rem}
.hero__meta svg{color:var(--primary);flex:none}

/* portrait */
.hero__visual{display:flex;justify-content:center}
.portrait{position:relative;width:min(100%,395px);aspect-ratio:3/4}
.portrait__glow{
  position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(29,78,216,.17),transparent 68%);
  filter:blur(46px);
}
.portrait__ringbox{
  position:absolute;inset:-3px;border-radius:calc(var(--r-xl) + 3px);
  overflow:hidden;z-index:1;
}
.portrait__ring{
  position:absolute;top:50%;left:50%;width:160%;aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0deg,#1d4ed8 70deg,#0ea5e9 140deg,transparent 220deg);
  transform:translate(-50%,-50%);
  animation:spin 10s linear infinite;opacity:.9;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.portrait__frame{
  position:absolute;inset:0;z-index:2;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-lg);
}
.portrait__frame img{width:100%;height:100%;object-fit:cover;object-position:center 12%;transition:transform .7s var(--ease)}
.portrait:hover .portrait__frame img{transform:scale(1.04)}
.portrait__sheen{
  position:absolute;top:0;left:-130%;width:70%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,74%{left:-130%}100%{left:150%}}

.float-card{
  position:absolute;z-index:3;display:flex;align-items:center;gap:.7rem;
  padding:.75rem 1rem;border-radius:15px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--sh);
  animation:floatY 5s ease-in-out infinite;
}
.float-card strong{display:block;font-family:var(--head);font-size:1rem;font-weight:700;line-height:1.2;color:var(--ink)}
.float-card small{display:block;font-size:.7rem;color:var(--muted);line-height:1.3}
.float-card__icon{font-size:1.2rem}
.float-card--1{top:9%;left:-13%;animation-delay:0s}
.float-card--2{bottom:22%;right:-13%;animation-delay:1.3s}
.float-card--3{bottom:2%;left:-7%;animation-delay:2.4s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-card,.portrait__ring,.portrait__sheen{animation:none}}

.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  width:25px;height:40px;border:2px solid var(--line-strong);border-radius:14px;
}
.scroll-hint span{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:4px;height:7px;border-radius:3px;background:var(--primary);
  animation:scrollDot 1.9s ease-in-out infinite;
}
@keyframes scrollDot{0%{opacity:0;top:7px}30%{opacity:1}60%{opacity:0;top:22px}100%{opacity:0}}

/* ═══ STATS ═══ */
.stats{padding:1rem 0 2rem}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh);overflow:hidden;
}
.stat{padding:2.1rem 1.3rem;text-align:center;position:relative;transition:background .3s}
.stat+.stat::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat:hover{background:var(--primary-soft)}
.stat__num{
  font-family:var(--head);font-size:clamp(1.9rem,3.9vw,2.7rem);font-weight:800;line-height:1;
  letter-spacing:-.035em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__num em{font-style:normal}
.stat p{margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}

/* ═══ ABOUT ═══ */
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:4rem;align-items:center}
.about__media{position:relative}
.about__photo{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-lg);position:relative;background:var(--surface);
}
.about__photo img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 14%}
.about__badge{
  position:absolute;bottom:-18px;right:-14px;
  display:flex;align-items:center;gap:.65rem;
  padding:1rem 1.25rem;border-radius:18px;
  background:var(--grad);color:#fff;box-shadow:var(--sh-brand);
}
.about__badge strong{font-family:var(--head);font-size:1.8rem;font-weight:800;line-height:1}
.about__badge span{font-size:.72rem;line-height:1.25;opacity:.95}

.about__text p{color:var(--text);margin:0 0 1rem}
.about__text strong{color:var(--ink);font-weight:600}
.about__points{display:grid;gap:.65rem;margin:1.7rem 0 2rem}
.about__points li{display:flex;align-items:flex-start;gap:.7rem;font-size:.95rem;color:var(--text)}
.about__points span{
  flex:none;width:21px;height:21px;margin-top:.2rem;border-radius:50%;
  display:grid;place-items:center;font-size:.66rem;font-weight:700;
  background:rgba(5,150,105,.11);color:var(--success);
}
.about__cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* ═══ CARDS ═══ */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.card{
  padding:2.1rem 1.8rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),border-color .35s,box-shadow .35s;
}
.card:hover{border-color:rgba(29,78,216,.25);transform:translateY(-6px);box-shadow:var(--sh-lg)}
.card__icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:1.2rem;
  background:var(--primary-soft);
}
.card h3{font-family:var(--head);font-size:1.18rem;font-weight:700;margin:0 0 .6rem;color:var(--ink)}
.card p{color:var(--muted);font-size:.93rem;margin:0 0 1.1rem}
.card__list{display:grid;gap:.45rem;padding-top:1rem;border-top:1px solid var(--line)}
.card__list li{font-size:.85rem;color:var(--text);padding-left:1.3rem;position:relative}
.card__list li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700}

/* ═══ MARQUEE ═══ */
.marquee{overflow:hidden;padding:1.5rem 0;background:var(--ink)}
.marquee__track{display:flex;align-items:center;gap:2rem;width:max-content;animation:scrollX 38s linear infinite}
.marquee span{font-family:var(--head);font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap}
.marquee i{color:var(--sky);font-style:normal;font-size:.85rem}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ═══ SKILLS ═══ */
.skills__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start}
.skills__bars{display:grid;gap:1.5rem}
.bar__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem;font-size:.93rem}
.bar__head span{font-weight:500;color:var(--ink)}
.bar__head b{font-family:var(--head);font-size:.85rem;color:var(--primary)}
.bar__track{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar__fill{height:100%;width:0;border-radius:999px;background:var(--grad);transition:width 1.4s var(--ease)}

.skills__tools{background:var(--surface);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--sh-sm);border:1px solid var(--line)}
.skills__tools h3{font-family:var(--head);font-size:1.02rem;margin:0 0 1rem;color:var(--ink)}
.skills__tools h3.mt{margin-top:1.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  padding:.46rem 1rem;border-radius:999px;font-size:.83rem;
  background:var(--bg-tint);border:1px solid var(--line);color:var(--text);
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)}

/* ═══ TIMELINE ═══ */
.timeline{position:relative;padding-left:2.5rem;max-width:880px}
.timeline::before{
  content:'';position:absolute;left:8px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--sky),transparent);
}
.timeline__item{position:relative;padding-bottom:1.5rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__dot{
  position:absolute;left:-2.5rem;top:2rem;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:3px solid var(--primary);
  box-shadow:0 0 0 5px rgba(29,78,216,.1);
}
.timeline__card{
  padding:1.8rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease),box-shadow .3s;
}
.timeline__card:hover{transform:translateX(6px);box-shadow:var(--sh)}
.timeline__top{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.35rem}
.timeline__card h3{font-family:var(--head);font-size:1.15rem;font-weight:700;margin:0;color:var(--ink)}
.pill{
  padding:.26rem .72rem;border-radius:999px;font-size:.69rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-tint);border:1px solid var(--line);color:var(--muted);
}
.pill--live{background:rgba(5,150,105,.1);border-color:rgba(5,150,105,.25);color:var(--success)}
.pill--gold{background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.25);color:var(--amber)}
.timeline__org{margin:0;font-weight:600;font-size:.97rem;color:var(--primary)}
.timeline__when{margin:.1rem 0 .95rem;font-size:.83rem;color:var(--muted)}
.timeline__card ul{display:grid;gap:.55rem}
.timeline__card li{position:relative;padding-left:1.2rem;font-size:.92rem;color:var(--text)}
.timeline__card li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sky)}
.timeline__card strong{color:var(--ink);font-weight:600}

/* ═══ PROJECTS ═══ */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.project{
  grid-column:span 1;display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .35s;
}
.project:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:rgba(29,78,216,.22)}
.project--wide{grid-column:span 2}

.project__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-tint);border-bottom:1px solid var(--line)}
.project__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.project:hover .project__media img{transform:scale(1.05)}
.project__live{
  position:absolute;top:.8rem;left:.8rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--success);
  box-shadow:var(--sh-sm);
}
.project__live i{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulseDot 2s infinite}

.project__body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.project__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.project__tags span{
  padding:.26rem .68rem;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--primary-soft);color:var(--primary);
}
.project h3{font-family:var(--head);font-size:1.2rem;font-weight:700;margin:0 0 .6rem;color:var(--ink)}
.project p{color:var(--muted);font-size:.92rem;margin:0 0 1.1rem}
.project__facts{display:grid;gap:.4rem;margin-bottom:1.2rem;font-size:.84rem;color:var(--muted);padding-top:1rem;border-top:1px solid var(--line)}
.project__facts b{color:var(--ink);font-weight:600;margin-right:.4rem}
.project__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-family:var(--head);font-size:.88rem;font-weight:600;color:var(--primary);
  transition:gap .25s var(--ease);
}
.project__link:hover{gap:.7rem}

/* ═══ CAMPAIGN RESULTS ═══ */
.results__top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-bottom:1.8rem}
.result-stat{
  min-width:0;padding:2rem 1.5rem;border-radius:var(--r-lg);text-align:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease),box-shadow .3s;
}
.result-stat:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.result-stat__num{
  font-family:var(--head);font-size:clamp(2rem,4.4vw,2.9rem);font-weight:800;
  line-height:1;letter-spacing:-.035em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.result-stat__num em{font-style:normal}
.result-stat p{margin:.75rem 0 0;font-size:.86rem;color:var(--muted)}

.results__table{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm);border:1px solid var(--line)}
.results__row{
  display:grid;grid-template-columns:1.5fr 1.3fr 1fr .9fr;gap:1rem;
  padding:1.1rem 1.6rem;align-items:center;
  border-bottom:1px solid var(--line);
  font-size:.92rem;transition:background .3s;
}
.results__row:last-child{border-bottom:0}
.results__row:not(.results__row--head):hover{background:var(--bg-tint)}
.results__row--head{
  background:var(--bg-tint);
  font-family:var(--head);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.results__row b{color:var(--ink);font-weight:600}
.results__row span{color:var(--muted);min-width:0}
.results__row em{font-style:normal;font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--primary)}
.results__row em.best{color:var(--success)}
.results__note{margin:1.2rem 0 0;font-size:.82rem;color:var(--muted);text-align:center}

/* ═══ SOCIAL REACH ═══ */
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.social{
  display:flex;align-items:center;gap:1.2rem;padding:1.5rem 1.6rem;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease),box-shadow .3s,border-color .3s;
}
.social:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(29,78,216,.22)}
.social__icon{
  flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-size:1.3rem;font-weight:700;color:#fff;
}
.social__icon--fb{background:#1877f2}
.social__icon--ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.social__icon--yt{background:#ff0033}
.social__icon--wa{background:#25d366}
.social__body{flex:1;min-width:0}
.social__count{font-family:var(--head);font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--ink);letter-spacing:-.03em}
.social__body h3{font-family:var(--head);font-size:.97rem;font-weight:600;margin:.15rem 0 .1rem;color:var(--ink)}
.social__body p{margin:0;font-size:.82rem;color:var(--muted)}
.social__arrow{color:var(--muted);flex:none;transition:transform .3s var(--ease),color .3s}
.social:hover .social__arrow{transform:translate(3px,-3px);color:var(--primary)}

/* ═══ CONTACT ═══ */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.contact__items{display:grid;gap:.85rem;margin-top:2rem}
.contact__item{
  display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.contact__item:hover{transform:translateX(6px);border-color:var(--primary);box-shadow:var(--sh)}
.contact__ic{font-size:1.35rem}
.contact__item small{display:block;font-size:.71rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.contact__item strong{font-family:var(--head);font-size:1rem;font-weight:600;color:var(--ink)}

.contact__form{padding:2.1rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.contact__form h3{font-family:var(--head);font-size:1.2rem;margin:0 0 1.4rem;color:var(--ink)}
.field{position:relative;margin-bottom:1.1rem}
.field input,.field textarea{
  width:100%;padding:1.25rem 1rem .55rem;border-radius:12px;
  background:var(--bg);border:1px solid var(--line-strong);
  color:var(--ink);font-family:var(--body);font-size:.95rem;
  transition:border-color .25s,background .25s,box-shadow .25s;resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
.field label{
  position:absolute;left:1rem;top:1rem;font-size:.94rem;color:var(--muted);
  pointer-events:none;transition:all .2s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{top:.4rem;font-size:.69rem;color:var(--primary);letter-spacing:.05em;font-weight:600}
.field.invalid input,.field.invalid textarea{border-color:#dc2626}
.contact__note{margin:.95rem 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.contact__note.error{color:#dc2626}

/* ═══ FOOTER ═══ */
.footer{background:var(--ink);color:#c9d6e8;padding:2.8rem 0 1.8rem}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.footer__brand{display:flex;align-items:center;gap:.85rem}
.footer__brand strong{display:block;font-family:var(--head);font-size:1rem;color:#fff}
.footer__brand small{display:block;font-size:.79rem;color:#8fa4bf}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.88rem}
.footer__nav a{color:#a7bbd3;transition:color .25s}
.footer__nav a:hover{color:#fff}
.footer__copy{margin:0;font-size:.81rem;color:#7e93ae;width:100%;text-align:center;padding-top:1.5rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.1)}

/* ═══ WhatsApp float ═══ */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.wa-float::before{
  content:'';position:absolute;inset:0;border-radius:50%;background:#25d366;
  opacity:.5;animation:waRing 2.4s ease-out infinite;z-index:-1;
}
@keyframes waRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}
.wa-float:hover{transform:scale(1.08);box-shadow:0 14px 38px rgba(37,211,102,.55)}
.wa-float__tip{
  position:absolute;right:68px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;padding:.45rem .85rem;border-radius:9px;font-size:.8rem;font-weight:500;
  background:var(--ink);color:#fff;
  opacity:0;pointer-events:none;transition:all .28s var(--ease);
}
.wa-float:hover .wa-float__tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none}}

/* ═══ Reveal ═══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1100px){
  .hero__grid{gap:2.5rem}
  .float-card--1{left:-4%}
  .float-card--2{right:-2%}
  .float-card--3{left:-1%}
  .cards,.projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project--wide{grid-column:span 2}
}

@media (max-width:980px){
  /* backdrop-filter on .header would trap the fixed drawer inside it */
  .header.scrolled{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(255,255,255,.98);
  }
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,310px);height:100dvh;
    flex-direction:column;justify-content:center;gap:.5rem;padding:2rem;
    background:var(--surface);
    box-shadow:-20px 0 50px rgba(15,39,68,.14);
    transform:translateX(100%);transition:transform .4s var(--ease);
  }
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.1rem;padding:.85rem 1rem;text-align:center}
  .burger{display:block}
  .header__actions .btn--sm{display:none}

  .hero{min-height:auto;padding:6.5rem 0 4rem}
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .hero__copy{order:2;text-align:center}
  .hero__visual{order:1}
  .hero__lead{margin-inline:auto}
  .hero__cta,.hero__meta{justify-content:center}
  .scroll-hint{display:none}

  .about__grid,.skills__grid,.contact{grid-template-columns:1fr;gap:2.8rem}
  .about__media{max-width:330px;margin-inline:auto}
  .section__head{margin-bottom:2.5rem}
  .results__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-stat:last-child{grid-column:span 2}
  .results__row{grid-template-columns:1.6fr 1.2fr .9fr .8fr;padding:1rem 1.1rem;font-size:.87rem}
  .socials{grid-template-columns:1fr}
}

@media (max-width:760px){
  .shell{width:calc(100% - 2rem)}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3)::before,.stat:nth-child(1)::before{display:none}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  .cards,.projects,.socials{grid-template-columns:1fr}
  .project--wide{grid-column:span 1}
  .portrait{width:min(76%,310px)}
  .float-card--1{left:-5%;top:5%}
  .float-card--2{right:-5%}
  .float-card--3{display:none}
  .footer__inner{flex-direction:column;text-align:center}
  .footer__nav{justify-content:center}

  .results__row--head{display:none}
  .results__row{grid-template-columns:1fr;gap:.5rem;padding:1.2rem 1.3rem}
  .results__row span{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .results__row span::before{
    content:attr(data-label);
    font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);flex:none;font-weight:600;
  }
}

@media (max-width:480px){
  body{font-size:15.5px}
  .hero__title{font-size:clamp(2.1rem,10vw,2.9rem)}
  .float-card{padding:.55rem .8rem;gap:.5rem}
  .float-card strong{font-size:.86rem}
  .float-card small{font-size:.63rem}
  .float-card__icon{font-size:1rem}
  .timeline{padding-left:1.9rem}
  .timeline__dot{left:-1.9rem;width:15px;height:15px}
  .timeline__card,.card,.contact__form,.skills__tools{padding:1.4rem}
  .hero__meta{flex-direction:column;align-items:center;gap:.5rem}
  .wa-float{right:14px;bottom:14px;width:52px;height:52px}
  .wa-float__tip{display:none}
  .social{padding:1.2rem}
  .social__icon{width:48px;height:48px}
}