/* Fillum v2 — Minimal & Clean */

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --altro-black: #0A0A0F;
  --altro-void: #06060A;
  --altro-purple-deep: #2D0B5E;
  --altro-purple: #7B2FF7;
  --altro-purple-neon: #B14AED;
  --altro-magenta: #E838CB;
  --altro-white: #EEEEF2;
  --altro-white-dim: rgba(238,238,242,0.45);
  --altro-border: rgba(255,255,255,0.07);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rotateGradient { to { --gradient-angle: 360deg; } }
@keyframes float-1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.06)} }
@keyframes float-2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,40px) scale(1.04)} }
@keyframes float-3 { 0%,100%{transform:translate(0,0) scale(1.02)} 50%{transform:translate(25px,20px) scale(0.96)} }
@keyframes marquee-l { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-r { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@keyframes fade-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scroll-pulse { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:.8;transform:translateY(5px)} }
@keyframes border-glow { 0%,100%{border-color:var(--altro-purple);box-shadow:0 0 0 0 rgba(123,47,247,.2)} 50%{border-color:var(--altro-purple-neon);box-shadow:0 0 10px 0 rgba(177,74,237,.15)} }
@keyframes check-draw { to{stroke-dashoffset:0} }

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:auto}
body{background:var(--altro-void);color:var(--altro-white);overflow-x:hidden;cursor:none}

/* Noise */
.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.04;mix-blend-mode:overlay}

/* Cursor */
.c-dot{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--altro-white);border-radius:50%;pointer-events:none;z-index:10000;will-change:transform;transition:width .3s,height .3s,background .3s}
.c-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid rgba(238,238,242,.25);border-radius:50%;pointer-events:none;z-index:10000;will-change:transform;transition:width .5s var(--ease-out),height .5s var(--ease-out),border-color .3s,opacity .3s;opacity:.5}
.c-ring.hover{width:56px;height:56px;border-color:var(--altro-purple);opacity:.7}

/* NEW NAV */
.hero-nav { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; width: 100%; font-family: 'Geist Sans', sans-serif;}
.nav-left { display: flex; align-items: center; }
.nav-logo-img { height: 36px; width: auto; display: block; }
.nav-logo-name { font-family: 'General Sans', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; color: hsl(40, 6%, 95%); text-transform: uppercase; }
.nav-center { display: flex; gap: 24px; }
.nav-item { background: none; border: none; color: hsla(40, 6%, 95%, 0.9); font-size: 15px; cursor: pointer; transition: color 0.3s; display: flex; align-items: center; gap: 4px; }
.nav-item:hover { color: hsl(40, 6%, 95%); }
.nav-right { display: flex; align-items: center; }
.hero-secondary-btn { background: rgba(255,255,255,0.1); color: hsl(40, 6%, 95%); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; font-family: 'Geist Sans', sans-serif; transition: all 0.3s; }
.hero-secondary-btn:hover { background: rgba(255,255,255,0.2); }
.hero-secondary-btn.rounded-full { border-radius: 9999px; padding: 8px 16px; font-weight: 500; font-size: 14px; }

.nav-divider { position: relative; z-index: 10; width: 100%; height: 1px; margin-top: 3px; background: linear-gradient(90deg, transparent, hsla(40, 6%, 95%, 0.2), transparent); }

/* NEW HERO */
body { background: hsl(260, 87%, 3%); }
.hero-new { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: visible; }
.hero-video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; }

.hero-blur-shape {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 984px; height: 527px;
  background: radial-gradient(ellipse at center, rgba(3,7,18,0.65) 0%, rgba(3,7,18,0.3) 50%, transparent 70%);
  opacity: 1; pointer-events: none; z-index: 1;
}

.hero-content-new { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-label-new { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsla(40, 6%, 95%, 0.6); margin-bottom: 24px; }
.hero-title-new { font-family: 'General Sans', sans-serif; font-size: clamp(40px, 8vw, 100px); font-weight: 500; line-height: 1.08; letter-spacing: -0.024em; margin-bottom: 0; }
.hero-title-new .text-plain { color: hsl(40, 6%, 95%); }
.hero-title-new .text-gradient { background-image: linear-gradient(to left, #6366f1, #a855f7, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-subtitle-new { font-family: 'Geist Sans', sans-serif; color: hsl(40, 6%, 82%); font-size: 1.125rem; line-height: 1.6; max-width: 44rem; margin-top: 16px; opacity: 0.8; }
.hero-secondary-btn.big-btn { border-radius: 12px; padding: 24px 29px; font-size: 16px; margin-top: 25px; font-weight: 600; cursor: pointer; }

.hero-marquee-container { position: relative; z-index: 10; width: 100%; max-width: 1024px; margin: 0 auto; padding-bottom: 40px; display: flex; align-items: center; gap: 48px; overflow: hidden;}
.marquee-left { font-family: 'Geist Sans', sans-serif; color: hsla(40, 6%, 95%, 0.5); font-size: 0.875rem; line-height: 1.4; white-space: nowrap; flex-shrink: 0; }
.marquee-track-wrap { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: heroMarquee 20s linear infinite; }
@keyframes heroMarquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

.marquee-logo { display: flex; align-items: center; gap: 12px; font-family: 'Geist Sans', sans-serif; font-size: 1rem; font-weight: 600; color: hsl(40, 6%, 95%); padding: 8px 16px; }
.marquee-icon { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(255,255,255,0.1); }

.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; border-radius: 12px; }
.liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* WHY US */
.why-us { padding: 120px clamp(32px, 8vw, 160px); position: relative; }
.why-us-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 64px; }
.why-us-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.04); }
.why-card { padding: 40px; display: flex; flex-direction: column; gap: 18px; background: rgba(6,6,10,0.7); transition: background 0.3s; }
.why-card:hover { background: rgba(14,12,24,0.9); }
.why-card.liquid-glass { box-shadow: none; }
.why-card.liquid-glass::before { display: none; }
.why-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.why-card-index { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--altro-white-dim); opacity: 0.6; }
.why-card-svg { width: 20px; height: 20px; color: var(--altro-purple-neon); opacity: 0.8; flex-shrink: 0; }
.why-card-title { font-family: 'General Sans', sans-serif; font-size: 1.15rem; font-weight: 500; color: hsl(40, 6%, 95%); line-height: 1.25; letter-spacing: -0.015em; }
.why-card-desc { font-family: 'Geist Sans', sans-serif; font-size: 0.9rem; line-height: 1.7; color: hsl(40, 6%, 75%); }
@media (max-width: 640px) { .why-us-grid { grid-template-columns: 1fr; } }

/* SECTION SHARED */
.section-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--altro-white-dim);margin-bottom:12px}
.section-title{font-weight:600;font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.025em;color:var(--altro-white);line-height:1.15}
.section-divider{width:100%;height:1px;background:var(--altro-border)}

/* ABOUT */
.about{position:relative;padding:120px 0}
.about-sticky{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1100px;padding:0 clamp(32px,6vw,80px);width:100%;align-items:center}
.about-text{display:flex;flex-direction:column;gap:20px}
.about-phrase{font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.02em;color:var(--altro-white);opacity:0;transform:translateY(28px);transition:all .7s var(--ease-out)}
.about-phrase.visible{opacity:1;transform:translateY(0)}
.about-phrase .dim{color:var(--altro-white-dim)}
.about-support{font-size:.75rem;color:var(--altro-white-dim);line-height:1.8;max-width:380px;opacity:0;transition:opacity .8s .2s}
.about-support.visible{opacity:1}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-card{background:rgba(255,255,255,.02);border:1px solid var(--altro-border);border-radius:14px;padding:28px 24px;transition:all .5s var(--ease-out);opacity:0;transform:translateY(20px)}
.about-card.visible{opacity:1;transform:translateY(0)}
.about-card:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.about-card-num{font-size:.65rem;letter-spacing:.15em;color:var(--altro-white-dim);margin-bottom:14px}
.about-card-title{font-weight:600;font-size:.95rem;margin-bottom:6px}
.about-card-desc{font-size:.78rem;color:var(--altro-white-dim);line-height:1.55}

/* PORTFOLIO */
.portfolio{position:relative;padding:120px 0;overflow:hidden}
.portfolio-header{padding:0 clamp(32px,6vw,80px);margin-bottom:64px}
.portfolio-header .section-label{font-size:1.1rem;letter-spacing:.25em;margin-bottom:20px;color:rgba(238,238,242,.7)}
.portfolio-header .section-title{font-size:clamp(2.4rem, 6vw, 4.8rem);line-height:1.05}
.portfolio-grid{display:flex;flex-direction:row;height:clamp(500px, 65vh, 680px);gap:16px;padding:0 clamp(32px,6vw,80px);max-width:1400px;margin:0 auto}
.portfolio-card{flex:1;border-radius:32px;overflow:hidden;position:relative;cursor:none;border:1px solid var(--altro-border);transition:flex 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s;display:flex;flex-direction:column;justify-content:flex-end}
.portfolio-card:hover{flex:4.5;border-color:rgba(255,255,255,.25)}
.portfolio-card-bg{position:absolute;inset:0;transition:transform 1s var(--ease-out);will-change:transform}
.portfolio-card:hover .portfolio-card-bg{transform:scale(1.06)}
.portfolio-card-overlay-solid{position:absolute;inset:0;background:rgba(10,10,15,0.5);z-index:1;transition:opacity .6s var(--ease-out)}
.portfolio-card:hover .portfolio-card-overlay-solid{opacity:0.1}
.portfolio-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,10,.95) 0%,rgba(6,6,10,.4) 40%,transparent 100%);z-index:2;pointer-events:none}
.click-indicator{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:rgba(255,255,255,.1);backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.3);color:var(--altro-white);padding:14px 28px;border-radius:999px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:10px;opacity:0;z-index:3;transition:all .5s var(--ease-out);letter-spacing:.02em}
.portfolio-card:hover .click-indicator{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hand-icon{font-size:1.2rem;animation:bounce-hand 1.5s infinite}
@keyframes bounce-hand{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-4px) rotate(0deg)}}
.portfolio-card-content{position:relative;padding:32px;z-index:3;transform:translateY(15px);transition:all .5s var(--ease-out);min-width:300px}
.portfolio-card:hover .portfolio-card-content{transform:translateY(0)}
.portfolio-card-name{font-weight:600;font-size:clamp(1.6rem,2.8vw,2.6rem);margin-bottom:10px;letter-spacing:-.02em}
.portfolio-card-desc{font-size:.9rem;color:rgba(238,238,242,.7);line-height:1.6;max-width:480px;margin-bottom:14px;opacity:0;transform:translateY(8px);transition:all .5s var(--ease-out) .05s}
.portfolio-card:hover .portfolio-card-desc{opacity:1;transform:translateY(0)}
.portfolio-card-tags{display:flex;gap:10px;flex-wrap:nowrap}
.portfolio-tag{font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}

/* SKILLS */
.skills{padding:100px 0;overflow:hidden}
.skills-header{text-align:center;margin-bottom:48px;padding:0 24px}
.marquee-wrap{margin-bottom:64px;display:flex;flex-direction:column;gap:12px;opacity:.6}
.marquee-row{display:flex;width:max-content;will-change:transform}
.marquee-row.left{animation:marquee-l 35s linear infinite}
.marquee-row.right{animation:marquee-r 35s linear infinite}
.marquee-item{padding:8px 20px;border:1px solid var(--altro-border);border-radius:999px;margin:0 6px;font-size:.78rem;font-weight:500;white-space:nowrap;transition:all .4s;cursor:none;color:var(--altro-white-dim)}
.marquee-item:hover{border-color:var(--altro-purple);color:var(--altro-white);background:rgba(123,47,247,.08)}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:24px;max-width:1000px;margin:0 auto;padding:0 clamp(32px,6vw,80px);position:relative}
.skills-grid::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(circle,rgba(123,47,247,.12) 0%,rgba(123,47,247,.04) 50%,transparent 70%);pointer-events:none;z-index:0}
.skill-pillar{position:relative;background:rgba(10,10,15,.6);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.05);border-radius:24px;padding:48px 40px;transition:all .5s var(--ease-out);z-index:1;overflow:hidden}
.skill-pillar::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 100%);opacity:0;transition:opacity .5s}
.skill-pillar:hover{border-color:var(--altro-purple-neon);transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.4), 0 0 40px rgba(177,74,237,.12)}
.skill-pillar:hover::before{opacity:1}
.skill-pillar-num{display:inline-block;padding:6px 14px;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.65rem;font-weight:600;letter-spacing:.15em;color:var(--altro-white-dim);background:rgba(255,255,255,.02);margin-bottom:28px;transition:all .4s;position:relative;z-index:2}
.skill-pillar:hover .skill-pillar-num{border-color:var(--altro-purple);background:rgba(123,47,247,.15);color:var(--altro-white);box-shadow:0 0 20px rgba(123,47,247,.2)}
.skill-pillar-title{font-weight:600;font-size:1.4rem;margin-bottom:12px;letter-spacing:-.015em;position:relative;z-index:2}
.skill-pillar-desc{font-size:.9rem;color:rgba(238,238,242,.55);line-height:1.75;position:relative;z-index:2}

/* CONTACT */
.contact{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px clamp(32px,6vw,80px);overflow:hidden}
.contact-glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(45,11,94,0.35) 0%,rgba(45,11,94,0.12) 40%,transparent 70%);opacity:1;top:50%;left:50%;transform:translate(-50%,-50%);animation:float-1 18s ease-in-out infinite;will-change:transform;pointer-events:none}
.contact-inner{position:relative;z-index:1;max-width:520px;width:100%}
.contact-title{font-weight:600;font-size:clamp(1.6rem,3.5vw,2.4rem);text-align:center;margin-bottom:32px;letter-spacing:-.025em;line-height:1.2}
.step-indicators{display:flex;justify-content:center;gap:8px;margin-bottom:32px}
.step-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);transition:all .4s}
.step-dot.active{background:linear-gradient(135deg,var(--altro-purple),var(--altro-magenta));border-color:transparent;width:24px;border-radius:4px;box-shadow:0 0 10px rgba(123,47,247,.4)}
.form-step{display:none;flex-direction:column;gap:16px}
.form-step.active{display:flex}
.form-field label{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,238,242,.4);margin-bottom:8px}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  color:var(--altro-white);
  font-size:.92rem;outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s;
  cursor:none;font-family:inherit;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  border-color:var(--altro-purple);
  background:rgba(123,47,247,.06);
  box-shadow:0 0 0 3px rgba(123,47,247,.12);
}
.form-field textarea{min-height:100px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(238,238,242,.18)}
.project-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.project-type{
  padding:13px;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;text-align:center;font-size:.8rem;
  cursor:none;transition:all .3s;background:transparent;
  color:rgba(238,238,242,.5);
}
.project-type.selected{
  border-color:var(--altro-purple);color:var(--altro-white);
  background:rgba(123,47,247,.12);
  box-shadow:0 0 0 1px rgba(123,47,247,.3);
}
.project-type:hover{border-color:rgba(255,255,255,.18);color:var(--altro-white)}
.budget-slider{width:100%;-webkit-appearance:none;height:2px;border-radius:1px;background:rgba(255,255,255,.1);outline:none;cursor:none;accent-color:var(--altro-purple)}
.budget-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--altro-purple),var(--altro-magenta));cursor:none;box-shadow:0 0 12px rgba(123,47,247,.4)}
.budget-value{text-align:center;font-size:1.3rem;font-weight:600;color:var(--altro-white);margin-top:10px;letter-spacing:-.02em}
.form-nav{display:flex;gap:8px;margin-top:4px}
.form-nav button{flex:1}
/* Botão próximo — gradiente */
.btn-primary{
  width:100%;padding:15px 16px;
  background:linear-gradient(135deg,var(--altro-purple),var(--altro-magenta));
  border:none;
  border-radius:12px;color:var(--altro-white);
  font-size:.92rem;font-weight:600;
  cursor:pointer;transition:opacity .3s,transform .2s;
  letter-spacing:.01em;
  box-shadow:0 4px 20px rgba(123,47,247,.35);
}
.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
/* Botão voltar — discreto */
.btn-ghost{
  width:100%;padding:15px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;color:rgba(238,238,242,.55);
  font-size:.88rem;font-weight:400;cursor:pointer;transition:all .3s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.2);color:var(--altro-white);background:rgba(255,255,255,.07)}
/* Botão enviar final — branco sólido */
.btn-submit{
  width:100%;padding:16px;border:none;border-radius:12px;
  font-size:.92rem;font-weight:700;
  color:var(--altro-void);
  background:var(--altro-white);
  cursor:none;transition:all .3s;letter-spacing:.02em;margin-top:4px;
  box-shadow:0 4px 24px rgba(238,238,242,.15);
}
.btn-submit:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 32px rgba(238,238,242,.2)}

/* SUCCESS */
.success-overlay{position:fixed;inset:0;z-index:2000;background:var(--altro-void);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;transition:opacity .5s}
.success-overlay.show{opacity:1;pointer-events:all}
.success-check{width:64px;height:64px}
.success-check circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1.5}
.success-check path{fill:none;stroke:var(--altro-white);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.success-overlay.show .success-check path{animation:check-draw .6s .3s forwards ease-out}
.success-text{font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.success-sub{color:var(--altro-white-dim);font-size:.82rem}

/* FOOTER */
.footer{padding:72px clamp(32px,6vw,80px) 40px;position:relative;overflow:hidden}
.footer-top{text-align:center;margin-bottom:48px}
.footer-brand{font-weight:700;font-size:clamp(3rem,12vw,9rem);line-height:.85;letter-spacing:-.04em;user-select:none;opacity:0.85;margin-bottom:16px}
.footer-brand .text-gradient{background-image:linear-gradient(to left,#6366f1,#a855f7,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-tagline{font-size:.78rem;color:rgba(238,238,242,.35);letter-spacing:.04em}
.footer-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin-bottom:48px}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:600px;margin:0 auto 48px}
.footer-col-title{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(238,238,242,.3);margin-bottom:16px}
.footer-col a{display:block;color:rgba(238,238,242,.45);text-decoration:none;font-size:.82rem;margin-bottom:10px;transition:color .3s}
.footer-col a:hover{color:var(--altro-white)}
.footer-instagram{color:var(--altro-purple-neon) !important;font-size:.78rem !important}
.footer-instagram:hover{color:var(--altro-magenta) !important}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid rgba(255,255,255,.05)}
.footer-bottom p{font-size:.62rem;color:rgba(238,238,242,.25);letter-spacing:.03em}
.footer-copy{font-style:italic}

/* LOADING */
.loading-screen { position: fixed; inset: 0; z-index: 9999; background: hsl(260, 87%, 3%); display: flex; align-items: center; justify-content: center; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
.loading-screen.exit { opacity: 0; pointer-events: none; }
.loading-screen.done { display: none; }

/* Ambient glow blobs inside loader */
.loading-screen::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  top: -150px; right: -150px;
  background: radial-gradient(circle, rgba(123,47,247,0.18) 0%, rgba(123,47,247,0.05) 50%, transparent 70%);
  pointer-events: none;
}
.loading-screen::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  bottom: -120px; left: -120px;
  background: radial-gradient(circle, rgba(232,56,203,0.12) 0%, rgba(232,56,203,0.04) 50%, transparent 70%);
  pointer-events: none;
}

.ls-label { position: absolute; top: 32px; left: 32px; font-size: 12px; color: var(--altro-white-dim); text-transform: uppercase; letter-spacing: 0.3em; animation: ls-slide-down 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; font-family: 'JetBrains Mono', monospace; }
@media (min-width: 768px) { .ls-label { top: 48px; left: 48px; } }

.ls-words { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.ls-word { position: absolute; font-family: 'Instrument Serif', serif; font-size: clamp(2.25rem, 6vw, 4.5rem); font-style: italic; font-weight: 400; color: var(--altro-white); opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.ls-word.active { opacity: 1; transform: translateY(0); }
.ls-word.exit { opacity: 0; transform: translateY(-20px); }

.ls-counter { position: absolute; bottom: 32px; right: 32px; font-family: 'Instrument Serif', serif; font-size: clamp(3.75rem, 8vw, 8rem); font-style: italic; color: var(--altro-white); font-variant-numeric: tabular-nums; animation: ls-slide-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; opacity: 0.25; }
@media (min-width: 768px) { .ls-counter { bottom: 48px; right: 48px; } }

.ls-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.05); overflow: hidden; }
.ls-fill { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--altro-purple) 0%, var(--altro-magenta) 100%); box-shadow: 0 0 12px rgba(123, 47, 247, 0.5); }

@keyframes ls-slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ls-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* TWEAKS */
.tweaks-panel{position:fixed;bottom:20px;right:20px;z-index:3000;background:rgba(10,10,15,.92);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--altro-border);border-radius:14px;padding:18px;width:240px;display:none;font-size:.75rem}
.tweaks-panel.show{display:block}
.tweaks-title{font-weight:600;font-size:.78rem;margin-bottom:14px;color:var(--altro-white)}
.tweak-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tweak-row label{color:var(--altro-white-dim);font-size:.7rem}
.tweak-row input[type="range"]{width:90px;accent-color:var(--altro-white);cursor:pointer}
.tweak-row input[type="color"]{width:28px;height:22px;border:1px solid var(--altro-border);border-radius:6px;background:none;cursor:pointer}
.tweak-toggle{width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,.08);border:none;position:relative;cursor:pointer;transition:background .3s}
.tweak-toggle.on{background:var(--altro-white)}
.tweak-toggle::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--altro-void);top:2px;left:2px;transition:transform .3s}
.tweak-toggle.on::after{transform:translateX(14px)}

/* RESPONSIVE */
/* ─── MOBILE-ONLY ELEMENT (hidden on desktop) ─── */
.hero-subtitle-mobile{display:none}

@media(max-width:768px){
  /* ── CURSOR ─────────────────────────────── */
  .c-dot,.c-ring{display:none}
  body{cursor:auto}

  /* ── NAV ────────────────────────────────── */
  .hero-nav{position:sticky;top:0;padding:12px 24px;background:rgba(6,6,10,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);z-index:200;box-shadow:0 4px 30px rgba(0,0,0,0.1)}
  .nav-center{display:none}
  .nav-divider{display:none}
  .nav-logo-name{font-size:0.95rem;letter-spacing:0.15em;font-weight:700}
  .nav-logo-img{height:28px}
  .hero-secondary-btn.rounded-full{padding:8px 16px;font-size:0.8rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(10px)}

  /* ── HERO ───────────────────────────────── */
  .hero-new{
    min-height:calc(100svh - 60px);
    background:
      radial-gradient(circle at 50% 100%, rgba(123,47,247,0.35) 0%, transparent 60%),
      radial-gradient(circle at 80% 10%, rgba(232,56,203,0.2) 0%, transparent 50%),
      hsl(260, 87%, 5%);
    flex-direction:column;
    justify-content:center;
  }
  .hero-blur-shape{display:block;width:300px;height:300px;background:radial-gradient(circle,rgba(123,47,247,0.4) 0%,transparent 70%);opacity:0.8;filter:blur(40px)}
  .hero-content-new{flex:unset;padding:0 24px 60px;align-items:center;text-align:center;justify-content:center}
  .hero-label-new{display:block;font-size:0.65rem;margin-bottom:20px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.8)}
  .hero-title-new{font-size:clamp(2.2rem,10vw,3.2rem);text-align:center;line-height:1.05;margin-bottom:8px}
  .hero-subtitle-new{display:none}
  .hero-subtitle-mobile{
    display:block;
    font-family:"Geist Sans",sans-serif;
    font-size:1.05rem;
    color:hsl(40,6%,82%);
    line-height:1.6;
    margin-top:20px;
    opacity:0.9;
    max-width:90%;
  }
  .hero-secondary-btn.big-btn{
    display:inline-block;width:auto;text-align:center;margin-top:32px;padding:18px 36px;font-size:1.05rem;border-radius:100px;font-weight:600;
    background:linear-gradient(135deg,var(--altro-purple),var(--altro-magenta));
    color:#fff;border:none;box-shadow:0 8px 32px rgba(123,47,247,0.4);
  }
  .hero-marquee-container{display:none}

  /* ── ABOUT — full screen, com substância ── */
  .about{min-height:auto;padding:80px 0;display:flex;align-items:center}
  .about-sticky{width:100%}
  .about-inner{grid-template-columns:1fr;gap:40px;padding:0 24px;width:100%;max-width:100%}
  .about-text{gap:0;text-align:center}
  /* Mostra só frase 0 */
  .about-phrase[data-p="1"],.about-phrase[data-p="2"]{display:none}
  .about-phrase{font-size:clamp(1.6rem,7.5vw,2.2rem);margin-bottom:20px;opacity:1 !important;transform:none !important;line-height:1.2}
  /* Support text de volta */
  .about-support{
    display:block;
    font-family:var(--font-body);
    font-size:0.95rem;line-height:1.7;
    color:rgba(238,238,242,.7);
    margin:0 auto 32px;
    opacity:1 !important;
  }
  /* Cards em coluna com descrição */
  .about-cards{grid-template-columns:1fr;gap:16px}
  .about-card{
    border-radius:20px;border:1px solid rgba(255,255,255,.08);
    padding:24px;
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);
    opacity:1 !important;transform:none !important;transition:all 0.3s;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
  }
  .about-card-num{
    margin-bottom:0;font-size:0.7rem;opacity:0.6;
    letter-spacing:.15em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);
  }
  .about-card-title{
    font-size:1.1rem;font-weight:600;
    margin-bottom:4px;letter-spacing:-.01em;
  }
  .about-card-desc{
    display:block;
    font-size:0.85rem;color:rgba(238,238,242,.6);
    line-height:1.6;
  }

  /* ── PORTFOLIO — full screen */
  .portfolio{min-height:auto;padding:80px 0;display:flex;flex-direction:column;justify-content:center}
  .portfolio-header{padding:0 24px;margin-bottom:32px;text-align:center}
  .portfolio-header .section-label{margin-bottom:12px}
  .portfolio-header .section-title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .portfolio-grid{flex-direction:column;height:auto;gap:24px;padding:0 24px}
  .portfolio-card{flex:none !important;height:420px;width:100%;border-radius:28px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
  .portfolio-card-content{min-width:0;padding:24px;transform:none !important;background:linear-gradient(to top, rgba(6,6,10,0.95) 0%, rgba(6,6,10,0.4) 60%, transparent 100%)}
  .portfolio-card-name{font-size:1.5rem;margin-bottom:8px}
  .portfolio-card-desc{display:block;opacity:1;transform:none;font-size:0.9rem;line-height:1.5;margin-bottom:16px;color:rgba(238,238,242,.8)}
  .portfolio-card-tags{flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .portfolio-tag{font-size:0.65rem;padding:6px 12px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15)}
  .click-indicator{position:relative;top:auto;left:auto;transform:none !important;opacity:1 !important;padding:10px 20px;font-size:0.8rem;gap:8px;backdrop-filter:blur(10px);background:rgba(255,255,255,0.1);border-radius:100px;display:inline-flex;width:fit-content;border:1px solid rgba(255,255,255,0.2)}

  /* ── SKILLS ───────────────────────────────── */
  .skills{padding:80px 0}
  .skills-header{margin-bottom:32px;padding:0 24px;text-align:center}
  .skills-header .section-title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .marquee-wrap{margin-bottom:32px;opacity:0.8}
  .skills-grid{display:grid;grid-template-columns:1fr;gap:20px;padding:0 24px}
  .skills-grid::before{display:none}
  .skill-pillar{padding:32px 24px;border-radius:24px;background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.2);transform:none !important}
  .skill-pillar:hover{transform:none !important}
  .skill-pillar-num{margin-bottom:20px;background:rgba(123,47,247,0.15);color:var(--altro-white);border-color:var(--altro-purple)}
  .skill-pillar-title{font-size:1.3rem}

  /* ── WHY US ─────────────────────────────── */
  .why-us{min-height:auto;padding:80px 24px;display:flex;flex-direction:column;justify-content:center}
  .why-us-header{margin-bottom:32px;text-align:center;align-items:center}
  .why-us-header .section-title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .why-us-grid{
    grid-template-columns:1fr;gap:16px;
    border:none;border-radius:0;background:transparent;
  }
  .why-card{
    padding:28px;
    display:flex;flex-direction:column;gap:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
  }
  .why-card.liquid-glass{backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
  .why-card.liquid-glass::before{display:block}
  .why-card-top{margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
  .why-card-index{font-size:0.65rem;opacity:0.6;letter-spacing:.15em;background:rgba(255,255,255,0.05);padding:4px 10px;border-radius:999px}
  .why-card-svg{width:22px;height:22px;opacity:1;filter:drop-shadow(0 0 6px rgba(177,74,237,0.6));color:var(--altro-purple-neon)}
  .why-card-title{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;margin:0}
  /* Descrições de volta — curtas e impactantes */
  .why-card-desc{
    display:block;
    font-size:0.9rem;
    color:rgba(238,238,242,.7);
    line-height:1.65;
  }

  /* ── CONTACT ────────────────────────────── */
  .contact{min-height:auto;padding:80px 24px 100px;display:flex;align-items:center;justify-content:center}
  .contact-glow{animation:none;opacity:0.6;width:150vw;height:150vw;background:radial-gradient(circle,rgba(123,47,247,0.25) 0%,transparent 60%)}
  .contact-title{font-size:1.8rem;margin-bottom:28px;text-align:center;letter-spacing:-.02em}
  .contact-inner{max-width:100%;background:rgba(255,255,255,0.02);padding:32px 20px;border-radius:32px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,0.3)}
  .step-indicators{justify-content:center;margin-bottom:28px}
  .form-field label{font-size:0.65rem;color:rgba(255,255,255,0.6)}
  .form-field input,.form-field textarea,.form-field select{font-size:1rem;border-radius:16px;padding:16px;cursor:auto;background:rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.1)}
  .form-field input:focus,.form-field textarea:focus,.form-field select:focus{background:rgba(123,47,247,0.1)}
  .project-types{grid-template-columns:1fr 1fr;gap:12px}
  .project-type{padding:16px 10px;font-size:0.85rem;cursor:auto;border-radius:14px;background:rgba(0,0,0,0.3)}
  .btn-submit{padding:18px;font-size:1.05rem;border-radius:16px;cursor:auto;background:linear-gradient(135deg,var(--altro-purple),var(--altro-magenta));color:#fff}
  .btn-primary{border-radius:16px;cursor:auto;padding:16px;font-size:1rem}
  .btn-ghost{border-radius:16px;cursor:auto;padding:16px;font-size:1rem;background:rgba(255,255,255,0.05)}

  /* ── FOOTER ─────────────────────────────── */
  .footer{padding:60px 24px 40px;background:rgba(0,0,0,0.3)}
  .footer-top{margin-bottom:40px;text-align:center}
  .footer-brand{font-size:clamp(3.5rem,18vw,6rem);margin-bottom:12px}
  .footer-tagline{font-size:0.85rem;color:rgba(255,255,255,0.6)}
  .footer-divider{margin-bottom:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)}
  .footer-cols{grid-template-columns:1fr 1fr;gap:32px;max-width:100%;margin-bottom:40px;text-align:center}
  .footer-col-title{font-size:0.7rem;margin-bottom:20px;color:rgba(255,255,255,0.5)}
  .footer-col a{font-size:0.95rem;margin-bottom:14px;display:block}
  .footer-bottom{flex-direction:column;gap:12px;align-items:center;text-align:center;padding-top:32px;border-top-color:rgba(255,255,255,0.1)}
  .footer-bottom p{font-size:0.75rem}

  /* ── PERFORMANCE ────────────────────────── */
  .noise{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}