/* ============================= TOKENS ============================= */
:root{
  --void:#050609;
  --deep:#090c14;
  --panel:#0d111c;
  --line: rgba(255,255,255,0.08);
  --blue:#2E6FFF;
  --cyan:#00F0FF;
  --purple:#B026FF;
  --purple-soft:#7B2FF7;
  --ice:#F5F7FF;
  --muted:#8B93B0;
  --muted-dim:#5b6280;
  --font-display:'Syne', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--void); }
body{
  margin:0;
  color:var(--ice);
  font-family:var(--font-body);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
@media (pointer:coarse){
  body{ cursor:auto; }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--purple-soft); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--blue),var(--purple)); border-radius:10px; }

.wrap{ max-width:1360px; margin:0 auto; padding:0 40px; position:relative; }
@media(max-width:768px){ .wrap{ padding:0 22px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px 2px var(--cyan);
  animation:pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }

h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.02; }
p{ margin:0; }

/* ============================= LOADER ============================= */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-family:var(--font-display); font-size:20px; letter-spacing:.5em; font-weight:700;
  color:var(--ice); padding-left:.5em;
}
.loader-bar{ width:220px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader-bar span{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px var(--cyan);
}
.loader-pct{ font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:.2em; }

/* ============================= CURSOR ============================= */
#cursor-dot,#cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
#cursor-dot{ width:6px; height:6px; background:var(--cyan); box-shadow:0 0 8px 2px var(--cyan); }
#cursor-ring{
  width:34px; height:34px; border:1px solid rgba(0,240,255,.5);
  transition:width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s, background .25s;
}
#cursor-ring.active{ width:64px; height:64px; background:rgba(176,38,255,.08); border-color:var(--purple); }
@media(pointer:coarse){ #cursor-dot,#cursor-ring{ display:none; } }

/* ============================= BACKGROUND LAYERS ============================= */
#matrix-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.5;
  mix-blend-mode:screen;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.beam{
  position:fixed; z-index:0; pointer-events:none; filter:blur(90px); opacity:.35; mix-blend-mode:screen;
}
.beam-1{ top:-20%; left:-10%; width:60vw; height:60vw; background:radial-gradient(circle,var(--blue),transparent 70%); animation:drift1 22s ease-in-out infinite; }
.beam-2{ bottom:-25%; right:-15%; width:65vw; height:65vw; background:radial-gradient(circle,var(--purple),transparent 70%); animation:drift2 26s ease-in-out infinite; }
.beam-3{ top:35%; left:40%; width:40vw; height:40vw; background:radial-gradient(circle,var(--cyan),transparent 70%); opacity:.18; animation:drift1 30s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6%,8%) scale(1.15);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-8%,-6%) scale(1.1);} }

main, header, footer{ position:relative; z-index:2; }

.noise-line{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* ============================= REVEAL ============================= */
[data-reveal]{
  opacity:0; transform:translateY(36px);
  filter:blur(6px);
  transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft), filter 1s var(--ease-soft);
}
[data-reveal].in{ opacity:1; transform:translateY(0); filter:blur(0); }
[data-reveal="left"]{ transform:translateX(-50px) translateY(0); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(50px) translateY(0); }
[data-reveal="right"].in{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].in{ transform:scale(1); }

/* stagger children helper */
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ============================= NAV ============================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0; background:rgba(5,6,9,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.02em; z-index:10;}
.logo-f{ position:relative; width:34px; height:34px; }
.logo-f svg{ width:100%; height:100%; }
.logo-f .glyph{ stroke:var(--ice); }
.logo-f-glow{ filter:drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--purple)); animation:logo-pulse 3.4s ease-in-out infinite; }
@keyframes logo-pulse{ 0%,100%{ filter:drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 10px var(--purple));} 50%{ filter:drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 22px var(--purple));} }

nav.links{ display:flex; gap:38px; font-size:14.5px; font-weight:500; color:var(--muted); }
nav.links a{ position:relative; padding:6px 0; transition:color .3s; }
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); transition:width .35s var(--ease-soft);
}
nav.links a:hover{ color:var(--ice); }
nav.links a:hover::after{ width:100%; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 26px; border-radius:999px; font-weight:500; cursor:pointer; border:none;
  isolation:isolate; overflow:hidden;
}
.btn-primary{ color:#04060a; background:linear-gradient(100deg,var(--cyan),var(--blue) 60%, var(--purple)); background-size:200% 100%; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset, 0 10px 30px -8px rgba(46,111,255,.6); transition:background-position .6s var(--ease), transform .3s var(--ease-soft), box-shadow .3s; }
.btn-primary:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 16px 40px -8px rgba(176,38,255,.7); }
.btn-ghost{ color:var(--ice); background:rgba(255,255,255,.03); border:1px solid var(--line); backdrop-filter:blur(6px); transition:border-color .3s, background .3s, transform .3s var(--ease-soft); }
.btn-ghost:hover{ border-color:rgba(0,240,255,.5); background:rgba(0,240,255,.06); transform:translateY(-2px); }
.btn-nav{ display:none; }
@media(min-width:901px){ .btn-nav{ display:inline-flex; } }

.burger{ display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); align-items:center; justify-content:center; background:rgba(255,255,255,.03); z-index:600;}
@media(max-width:900px){ .links, .btn-nav{ display:none; } .burger{ display:flex; } }

/* mobile menu */
#mobile-menu{
  position:fixed; inset:0; z-index:400; background:rgba(5,6,9,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:0 40px;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
#mobile-menu.open{ transform:translateY(0); }
#mobile-menu a{ font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--ice); }

/* ============================= HERO ============================= */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:160px; padding-bottom:80px; position:relative;
}
.hero-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; flex-wrap:wrap; gap:16px; }
.hero-badge{
  font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.1em;
  border:1px solid var(--line); padding:8px 14px; border-radius:999px; display:flex; gap:8px; align-items:center;
}
.hero-title{
  font-size:clamp(42px, 8.6vw, 128px);
  text-transform:uppercase;
  color:var(--ice);
  max-width:1250px;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .grad{
  background:linear-gradient(100deg,var(--cyan),var(--blue) 45%, var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub-row{ display:flex; gap:60px; margin-top:44px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; }
.hero-desc{ max-width:460px; font-size:17px; line-height:1.65; color:var(--muted); }
.hero-cta-group{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-floats{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
.holo-card{
  position:absolute; padding:16px 20px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); backdrop-filter:blur(14px);
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7);
  animation:float 6s ease-in-out infinite;
}
.holo-card b{ display:block; font-family:var(--font-display); font-size:26px; color:var(--ice); font-weight:700; }
.holo-1{ top:8%; right:2%; animation-delay:0s; }
.holo-2{ bottom:14%; right:14%; animation-delay:1.4s; }
.holo-3{ top:46%; right:-2%; animation-delay:.7s; }
@keyframes float{ 0%,100%{ transform:translateY(0px) rotate(0deg);} 50%{ transform:translateY(-16px) rotate(-1deg);} }
@media(max-width:1100px){ .holo-card{ display:none; } }

.scroll-cue{ position:absolute; bottom:36px; left:40px; display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:.15em; }
.scroll-cue .bar{ width:1px; height:34px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:linear-gradient(var(--cyan),transparent); animation:scrolldown 2s infinite ease-in-out; }
@keyframes scrolldown{ 0%{ top:-100%;} 100%{ top:100%;} }
@media(max-width:768px){ .scroll-cue{ display:none; } }

/* ============================= MARQUEE ============================= */
.marquee-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; position:relative; background:rgba(255,255,255,.015); }
.marquee-track{ display:flex; gap:60px; width:max-content; animation:marquee 32s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--muted-dim); white-space:nowrap; display:flex; align-items:center; gap:24px; text-transform:uppercase; letter-spacing:.02em;}
.marquee-track span em{ font-style:normal; color:transparent; -webkit-text-stroke:1px var(--cyan); }
.marquee-track span::after{ content:'◆'; font-size:12px; color:var(--purple); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================= SECTION HEADS ============================= */
.section{ padding:170px 0; position:relative; }
@media(max-width:768px){ .section{ padding:110px 0; } }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:80px; flex-wrap:wrap; }
.section-title{ font-size:clamp(34px,4.6vw,64px); text-transform:uppercase; max-width:640px; }
.section-note{ max-width:320px; color:var(--muted); font-size:15px; line-height:1.6; padding-bottom:6px; }
.index-tag{ font-family:var(--font-mono); font-size:13px; color:var(--muted-dim); letter-spacing:.2em; }

/* ============================= SERVICES (bento) ============================= */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); gap:22px;
  grid-template-areas:
    "w w w a a a"
    "w w w s s s"
    "so so so br br br";
}
@media(max-width:900px){ .bento{ grid-template-columns:1fr; grid-template-areas: "w" "a" "s" "so" "br"; } }
.svc{ grid-area:var(--area); }
.svc-w{ --area:w; } .svc-a{ --area:a; } .svc-s{ --area:s; } .svc-so{ --area:so; } .svc-br{ --area:br; }

.card{
  position:relative; border-radius:22px; padding:34px; min-height:220px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .5s var(--ease-soft), border-color .4s;
  transform-style:preserve-3d;
  display:flex; flex-direction:column; justify-content:space-between;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ang,0deg), transparent 0%, var(--cyan) 8%, transparent 20%, var(--purple) 40%, transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s; pointer-events:none;
  animation:spin-border 5s linear infinite paused;
}
.card:hover::before{ opacity:1; animation-play-state:running; }
@keyframes spin-border{ to{ --ang:360deg; } }
.card:hover{ border-color:rgba(255,255,255,.16); }
.svc-w{ min-height:340px; }
.svc-w .card-glow{ background:radial-gradient(circle at 30% 20%, rgba(0,240,255,.25), transparent 60%); }

.card-glow{ position:absolute; inset:-40%; background:radial-gradient(circle at 50% 0%, rgba(176,38,255,.22), transparent 60%); opacity:0; transition:opacity .5s; pointer-events:none; }
.card:hover .card-glow{ opacity:1; }

.svc-icon{ width:46px; height:46px; margin-bottom:22px; position:relative; z-index:2; }
.svc-icon svg{ width:100%; height:100%; stroke:var(--cyan); transition:transform .5s var(--ease-soft), stroke .4s; }
.card:hover .svc-icon svg{ transform:scale(1.15) rotate(-6deg); stroke:var(--ice); filter:drop-shadow(0 0 10px var(--cyan)); }

.svc-num{ font-family:var(--font-mono); font-size:12px; color:var(--muted-dim); position:absolute; top:30px; right:30px; z-index:2;}
.svc h3{ font-size:24px; margin-bottom:10px; position:relative; z-index:2; text-transform:none; }
.svc-w h3{ font-size:32px; }
.svc p{ color:var(--muted); font-size:14.5px; line-height:1.6; position:relative; z-index:2; max-width:340px; }
.svc-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; position:relative; z-index:2; }
.svc-tags span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:999px; }

/* ============================= PROCESS ============================= */
.timeline{ position:relative; padding-left:0; }
.timeline-line{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-50%); }
.timeline-line .fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(var(--cyan),var(--purple)); box-shadow:0 0 14px var(--cyan); transition:height .1s linear; }
.t-item{ display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; gap:0; margin-bottom:60px; }
.t-item:nth-child(even) .t-content{ grid-column:3; text-align:left; }
.t-item:nth-child(odd) .t-content{ grid-column:1; text-align:right; }
.t-dot-col{ grid-column:2; display:flex; justify-content:center; }
.t-dot{ width:14px; height:14px; border-radius:50%; background:var(--void); border:2px solid var(--purple); box-shadow:0 0 0 6px rgba(176,38,255,.08); position:relative; z-index:2; transition:box-shadow .4s, border-color .4s; }
.t-item.in .t-dot{ border-color:var(--cyan); box-shadow:0 0 0 8px rgba(0,240,255,.14), 0 0 20px var(--cyan); }
.t-content{ padding:10px 30px; }
.t-num{ font-family:var(--font-mono); font-size:13px; color:var(--muted-dim); letter-spacing:.2em; margin-bottom:8px; display:block;}
.t-content h3{ font-size:26px; margin-bottom:10px; text-transform:none; }
.t-content p{ color:var(--muted); font-size:14.5px; line-height:1.6; max-width:380px; }
.t-item:nth-child(odd) .t-content p{ margin-left:auto; }
@media(max-width:768px){
  .timeline-line{ left:16px; }
  .t-item{ grid-template-columns:34px 1fr; }
  .t-dot-col{ grid-column:1; }
  .t-item:nth-child(even) .t-content, .t-item:nth-child(odd) .t-content{ grid-column:2; text-align:left; }
  .t-item:nth-child(odd) .t-content p{ margin-left:0; }
}

/* ============================= PORTFOLIO ============================= */
.proj{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:170px; position:relative; }
.proj:last-child{ margin-bottom:0; }
.proj:nth-child(even){ direction:rtl; }
.proj:nth-child(even) > *{ direction:ltr; }
@media(max-width:900px){ .proj{ grid-template-columns:1fr; gap:30px; direction:ltr !important; } .proj:nth-child(even){ direction:ltr; } }

.proj-visual{
  position:relative; aspect-ratio:4/3.1; border-radius:24px; overflow:hidden;
  border:1px solid var(--line);
  background:#080a11;
}
.proj-art{ position:absolute; inset:0; }
.proj-grid-overlay{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:34px 34px; opacity:.4; }
.proj-visual::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 80px rgba(0,0,0,.55); }
.proj-clip{ clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease-soft); }
.proj.in .proj-clip{ clip-path:inset(0 0 0 0); }
.proj-visual .zoomlayer{ transition:transform 1.6s var(--ease-soft); }
.proj-visual:hover .zoomlayer{ transform:scale(1.08); }
.proj-tag{ position:absolute; bottom:20px; left:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; padding:8px 14px; border-radius:999px; background:rgba(5,6,9,.6); border:1px solid var(--line); backdrop-filter:blur(8px); z-index:3;}

.proj-info .index-tag{ display:block; margin-bottom:18px; }
.proj-info h3{ font-size:clamp(30px,3.6vw,46px); text-transform:none; margin-bottom:16px; }
.proj-info p{ color:var(--muted); font-size:15.5px; line-height:1.7; max-width:420px; margin-bottom:30px; }
.proj-stats{ display:flex; gap:34px; margin-bottom:30px; flex-wrap:wrap; }
.proj-stats div b{ display:block; font-family:var(--font-display); font-size:30px; color:var(--cyan); }
.proj-stats div span{ font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:.08em; }
.proj-link{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); border-bottom:1px solid var(--line); padding-bottom:6px; transition:border-color .3s, gap .3s, color .3s; }
.proj-link:hover{ border-color:var(--cyan); color:var(--cyan); gap:16px; }
.proj-link svg{ width:14px; height:14px; }

/* ============================= TECH STACK ============================= */
.tech-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.tech-pill{
  display:flex; align-items:center; gap:12px; padding:16px 22px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); backdrop-filter:blur(10px);
  font-family:var(--font-mono); font-size:14px; color:var(--ice);
  animation:float 5s ease-in-out infinite;
  transition:border-color .3s, background .3s, transform .3s var(--ease-soft);
}
.tech-pill:hover{ border-color:var(--purple); background:rgba(176,38,255,.07); transform:translateY(-6px); }
.tech-dot{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 8px currentColor; }

/* ============================= TESTIMONIALS ============================= */
.test-row{ display:flex; gap:26px; overflow-x:auto; padding-bottom:20px; scroll-snap-type:x proximity; margin:0 -40px; padding-left:40px; padding-right:40px; }
.test-row::-webkit-scrollbar{ height:6px; }
.t-card{
  min-width:380px; scroll-snap-align:start; border-radius:22px; padding:34px; position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border:1px solid var(--line); backdrop-filter:blur(10px);
  transition:transform .4s var(--ease-soft), border-color .4s;
}
.t-card:hover{ transform:translateY(-8px); border-color:rgba(0,240,255,.35); }
.t-quote{ font-size:16.5px; line-height:1.65; color:var(--ice); margin-bottom:28px; min-height:130px; }
.t-person{ display:flex; align-items:center; gap:14px; }
.t-avatar{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--void); position:relative; }
.t-avatar::before{ content:''; position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(var(--cyan),var(--purple),var(--blue),var(--cyan)); z-index:-1; animation:spin 4s linear infinite; }
.t-avatar span{ background:var(--ice); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
@keyframes spin{ to{ transform:rotate(360deg); } }
.t-name{ font-weight:600; font-size:14.5px; }
.t-role{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted-dim); }

/* ============================= FAQ ============================= */
.faq-list{ max-width:900px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:30px 4px; cursor:pointer; gap:20px; }
.faq-q h4{ font-family:var(--font-display); font-weight:700; font-size:19px; text-transform:none; }
.faq-plus{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; position:relative; transition:border-color .3s, transform .4s var(--ease-soft), background .3s; }
.faq-plus::before,.faq-plus::after{ content:''; position:absolute; background:var(--ice); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .35s var(--ease-soft), opacity .3s; }
.faq-plus::before{ width:11px; height:1px; }
.faq-plus::after{ width:1px; height:11px; }
.faq-item.open .faq-plus{ transform:rotate(135deg); border-color:var(--cyan); background:rgba(0,240,255,.08); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-soft); }
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{ padding:0 4px 32px; color:var(--muted); font-size:15px; line-height:1.7; max-width:640px; }

/* ============================= CONTACT ============================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }
.contact-title{ font-size:clamp(36px,5vw,68px); text-transform:uppercase; margin-bottom:26px; }
.contact-desc{ color:var(--muted); font-size:16px; line-height:1.7; max-width:420px; margin-bottom:44px; }
.contact-info{ display:flex; flex-direction:column; gap:22px; }
.contact-info a{ display:flex; align-items:center; gap:16px; font-size:16px; font-weight:500; }
.contact-info .ci-icon{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.03); transition:border-color .3s, transform .3s var(--ease-soft); flex-shrink:0;}
.contact-info a:hover .ci-icon{ border-color:var(--cyan); transform:translateY(-3px) rotate(-6deg); box-shadow:0 0 16px rgba(0,240,255,.35); }
.contact-info .ci-icon svg{ width:18px; height:18px; stroke:var(--cyan); }

.form-panel{ border-radius:26px; padding:44px; background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line); backdrop-filter:blur(14px); position:relative; overflow:hidden;}
.field{ margin-bottom:24px; position:relative; }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:10px; }
.field input, .field textarea, .field select{
  width:100%; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--ice); font-family:var(--font-body); font-size:15px; outline:none;
  transition:border-color .3s, box-shadow .3s; resize:none;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,240,255,.12); }
.field textarea{ min-height:110px; }
.form-row{ display:flex; gap:16px; }
.form-row .field{ flex:1; }
.submit-btn{ width:100%; justify-content:center; margin-top:8px; }
.form-status{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); margin-top:16px; height:16px; text-align:center; }

/* floating icons in contact */
.contact-floats{ position:absolute; z-index:-1; pointer-events:none; }

/* ============================= FOOTER ============================= */
footer{ padding:100px 0 40px; border-top:1px solid var(--line); position:relative; }
.footer-top{ display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; margin-bottom:100px; }
.footer-wordmark{ font-family:var(--font-display); font-size:clamp(50px,9vw,150px); font-weight:800; text-transform:uppercase; line-height:.85; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-cols{ display:flex; gap:80px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14.5px; color:var(--muted); padding:6px 0; transition:color .3s; }
.footer-col a:hover{ color:var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-family:var(--font-mono); font-size:12px; color:var(--muted-dim); }
.footer-socials{ display:flex; gap:14px; }
.footer-socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .3s, transform .3s var(--ease-soft); }
.footer-socials a:hover{ border-color:var(--purple); transform:translateY(-4px); }
.footer-socials svg{ width:15px; height:15px; stroke:var(--ice); }

/* magnetic */
.magnetic{ will-change:transform; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* ============================= FEATURED PROJECT — PAWEŁ ============================= */
.project-featured .project-laptop{
  isolation:isolate;
  cursor:pointer;
  overflow:visible;
  background:#03050a;
  box-shadow:
    0 30px 90px -35px rgba(0,240,255,.32),
    0 30px 110px -45px rgba(176,38,255,.34);
  transition:
    transform .18s ease-out,
    border-color .45s ease,
    box-shadow .45s ease,
    filter .45s ease;
  will-change:transform;
}
.project-featured .proj-clip{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:#020309;
}
.project-featured .project-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.005);
  filter:saturate(.94) contrast(1.02) brightness(.94);
  transition:transform 1.1s var(--ease-soft), filter .55s ease;
  will-change:transform;
}
.project-featured .project-laptop:hover .project-image{
  transform:scale(1.035);
  filter:saturate(1.08) contrast(1.05) brightness(1.02);
}
.project-featured .project-laptop:hover{
  border-color:rgba(0,240,255,.62);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 35px rgba(0,240,255,.30),
    0 0 85px rgba(46,111,255,.22),
    0 0 125px rgba(176,38,255,.25),
    0 38px 110px -42px rgba(0,0,0,.95);
}
.project-aura{
  position:absolute;
  inset:-10%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 70%, rgba(255,0,180,.24), transparent 38%),
    radial-gradient(circle at 82% 42%, rgba(0,174,255,.28), transparent 42%);
  filter:blur(38px);
  opacity:.45;
  transform:scale(.92);
  transition:opacity .5s ease, transform .7s var(--ease-soft), filter .5s ease;
}
.project-laptop:hover .project-aura{
  opacity:.95;
  transform:scale(1.08);
  filter:blur(30px);
}
.project-reflection{
  position:absolute;
  left:8%;
  right:8%;
  bottom:-18%;
  height:30%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,0,180,.28),rgba(110,70,255,.36),rgba(0,220,255,.30));
  filter:blur(26px);
  opacity:.24;
  transform:scaleX(.8) scaleY(.55);
  transition:opacity .5s ease, transform .7s var(--ease-soft), filter .5s ease;
}
.project-laptop:hover .project-reflection{
  opacity:.68;
  transform:scaleX(1.08) scaleY(.82);
  filter:blur(20px);
}
.project-scan{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:-16%;
  height:13%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(0,240,255,.16),rgba(255,255,255,.24),transparent);
  filter:blur(2px);
}
.project-laptop:hover .project-scan{
  opacity:1;
  animation:project-scan 1.8s ease-in-out infinite;
}
@keyframes project-scan{
  0%{ transform:translateY(-10%); opacity:0; }
  15%{ opacity:.85; }
  80%{ opacity:.55; }
  100%{ transform:translateY(850%); opacity:0; }
}
.project-shine{
  position:absolute;
  z-index:3;
  inset:-40% -75%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 49%,rgba(0,240,255,.12) 52%,transparent 60%);
  transform:translateX(-45%) rotate(2deg);
  transition:transform 1.2s var(--ease-soft);
}
.project-laptop:hover .project-shine{
  transform:translateX(48%) rotate(2deg);
}
.project-live{
  position:absolute;
  right:20px;
  top:20px;
  z-index:6;
  padding:9px 13px;
  border-radius:999px;
  font:500 10.5px/1 var(--font-mono);
  letter-spacing:.14em;
  color:var(--ice);
  background:rgba(5,6,9,.62);
  border:1px solid rgba(0,240,255,.22);
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .35s ease, transform .45s var(--ease-soft), border-color .35s, box-shadow .35s;
}
.project-laptop:hover .project-live{
  opacity:1;
  transform:translateY(0);
  border-color:rgba(0,240,255,.65);
  box-shadow:0 0 22px rgba(0,240,255,.18);
}
body.project-energy #matrix-canvas{
  opacity:.68;
  filter:saturate(1.25) brightness(1.12);
}
#matrix-canvas{
  transition:opacity .4s ease, filter .4s ease;
}
@media(max-width:900px){
  .project-featured .project-laptop{ overflow:hidden; }
  .project-live{ opacity:1; transform:none; }
  .project-reflection{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .project-scan,.project-shine{ display:none; }
  .project-featured .project-laptop,
  .project-featured .project-image,
  .project-aura,
  .project-reflection{ transition:none!important; animation:none!important; }
}


/* PROSTY OBRAZ — PROJEKT PAWŁA */
.project-image-simple{
  display:block;
  overflow:hidden;
  background:#080a11;
}
.project-image-simple img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.project-image-simple::after{
  pointer-events:none;
}

/* ============================= TAXENA — PIONOWY MOCKUP ============================= */
/* Oryginalny obraz ma proporcje 931 × 1690. Kontener ma dokładnie te same proporcje. */
.taxena-mockup{
  width:100%;
  max-width:500px;
  aspect-ratio:931 / 1690;
  margin-inline:auto;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:#080a11;
  box-shadow:
    0 28px 70px -34px rgba(0,0,0,.9),
    0 0 40px -26px rgba(0,240,255,.55);
}

.taxena-mockup img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:0;
  background:#080a11;
  transition:transform .6s var(--ease-soft), filter .6s var(--ease-soft);
}

.taxena-mockup:hover img{
  transform:scale(1.012);
  filter:brightness(1.025);
}

.taxena-mockup::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 50px rgba(0,0,0,.18);
}

.taxena-mockup .proj-tag{
  left:20px;
  bottom:20px;
}

@media(max-width:900px){
  .taxena-mockup{
    max-width:460px;
  }
}

@media(max-width:560px){
  .taxena-mockup{
    max-width:100%;
    border-radius:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  .taxena-mockup img{
    transition:none;
  }

  .taxena-mockup:hover img{
    transform:none;
  }
}

/* ============================= ROLL-UP PAWŁA — PIONOWY MOCKUP ============================= */
.rollup-mockup{
  width:100%;
  max-width:500px;
  aspect-ratio:930 / 1654;
  margin-inline:auto;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:#080a11;
  box-shadow:
    0 28px 70px -34px rgba(0,0,0,.9),
    0 0 42px -28px rgba(176,38,255,.52);
}

.rollup-mockup img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:0;
  background:#080a11;
  transition:transform .6s var(--ease-soft), filter .6s var(--ease-soft);
}

.rollup-mockup:hover img{
  transform:scale(1.012);
  filter:brightness(1.025);
}

.rollup-mockup::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 50px rgba(0,0,0,.16);
}

.rollup-mockup .proj-tag{
  left:20px;
  bottom:20px;
}

@media(max-width:900px){
  .rollup-mockup{
    max-width:460px;
  }
}

@media(max-width:560px){
  .rollup-mockup{
    max-width:100%;
    border-radius:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  .rollup-mockup img{
    transition:none;
  }

  .rollup-mockup:hover img{
    transform:none;
  }
}

/* ============================= FOOTER — LINK PRAWNY ============================= */
.footer-legal{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  flex-wrap:wrap;
}

.footer-legal a{
  color:var(--muted);
  transition:color .3s ease, text-shadow .3s ease;
}

.footer-legal a:hover{
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,240,255,.45);
}

@media(max-width:720px){
  .footer-legal{
    justify-content:flex-start;
    gap:12px 18px;
  }
}

/* ============================= POLITYKA PRYWATNOŚCI ============================= */
body.legal-page{
  cursor:auto;
}

.legal-page #matrix-canvas{
  opacity:.28;
}

.legal-header{
  position:relative;
  z-index:3;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  background:rgba(5,6,9,.72);
  backdrop-filter:blur(18px) saturate(140%);
}

.legal-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.legal-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s ease, transform .3s var(--ease-soft);
}

.legal-back:hover{
  color:var(--cyan);
  transform:translateX(-4px);
}

.legal-main{
  position:relative;
  z-index:2;
  padding:110px 0 130px;
}

.legal-hero{
  max-width:900px;
  margin-bottom:58px;
}

.legal-title{
  margin-top:18px;
  font-size:clamp(42px,7vw,88px);
  text-transform:uppercase;
  background:linear-gradient(100deg,var(--ice),var(--cyan) 45%,var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.legal-lead{
  max-width:760px;
  margin-top:28px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.legal-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px;
}

.legal-meta span{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  font-family:var(--font-mono);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
}

.legal-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:60px;
  align-items:start;
}

.legal-content{
  display:grid;
  gap:20px;
}

.legal-card{
  padding:34px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 24px 70px -46px rgba(0,0,0,.95);
}

.legal-card h2{
  margin-bottom:18px;
  font-size:clamp(23px,3vw,31px);
  text-transform:none;
}

.legal-card h3{
  margin:24px 0 10px;
  font-size:18px;
  text-transform:none;
}

.legal-card p,
.legal-card li{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.legal-card p + p{
  margin-top:14px;
}

.legal-card ul{
  margin:14px 0 0;
  padding-left:22px;
}

.legal-card li + li{
  margin-top:8px;
}

.legal-card a{
  color:var(--cyan);
  overflow-wrap:anywhere;
}

.legal-note{
  margin-top:18px;
  padding:16px 18px;
  border-left:2px solid var(--cyan);
  background:rgba(0,240,255,.045);
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.legal-nav{
  position:sticky;
  top:30px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(9,12,20,.8);
  backdrop-filter:blur(16px);
}

.legal-nav strong{
  display:block;
  margin-bottom:16px;
  font-family:var(--font-mono);
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.legal-nav a{
  display:block;
  padding:9px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:color .25s ease, padding-left .25s ease;
}

.legal-nav a:last-child{
  border-bottom:0;
}

.legal-nav a:hover{
  color:var(--ice);
  padding-left:5px;
}

.legal-footer{
  position:relative;
  z-index:2;
  padding:30px 0;
  border-top:1px solid var(--line);
  color:var(--muted-dim);
  font-size:13px;
}

.legal-footer-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

@media(max-width:920px){
  .legal-layout{
    grid-template-columns:1fr;
  }

  .legal-nav{
    position:relative;
    top:auto;
    order:-1;
  }
}

@media(max-width:600px){
  .legal-main{
    padding:80px 0 95px;
  }

  .legal-header-row{
    align-items:flex-start;
  }

  .legal-header .logo{
    font-size:16px;
  }

  .legal-card{
    padding:25px 22px;
    border-radius:18px;
  }

  .legal-lead{
    font-size:15.5px;
  }
}

/* ============================= KONTAKT — FORMULARZ PEŁNEJ SZEROKOŚCI ============================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:54px;
  align-items:start;
}

.contact-grid > div:first-child{
  max-width:820px;
}

.form-panel{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:1fr;
}

.form-panel .form-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.hp-field{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.form-status{
  min-height:22px;
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
}

.form-status.success{ color:var(--cyan); }
.form-status.error{ color:#ff6b8a; }

.submit-btn[disabled]{
  opacity:.65;
  cursor:not-allowed;
  transform:none !important;
}

@media(max-width:700px){
  .form-panel .form-row{
    grid-template-columns:1fr;
  }
}


/* ============================= KONTAKT V2 — WYMUSZONY UKŁAD ============================= */
#contact .contact-grid{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  width:100% !important;
  gap:52px !important;
}

#contact .contact-grid > div:first-child{
  width:100% !important;
  max-width:860px !important;
}

#contact #contact-form.form-panel{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  position:relative !important;
  transform:none !important;
  margin:0 !important;
  padding:44px !important;
  overflow:hidden !important;
}

#contact #contact-form .form-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}

#contact #contact-form .field{
  width:100% !important;
  min-width:0 !important;
}

#contact #contact-form input,
#contact #contact-form select,
#contact #contact-form textarea{
  width:100% !important;
  min-width:0 !important;
}

#contact #contact-form textarea{
  min-height:170px !important;
  resize:vertical;
}

#contact #contact-form .hp-field,
#contact #contact-form .hp-field[hidden]{
  display:none !important;
}

@media(max-width:700px){
  #contact #contact-form.form-panel{
    padding:28px 20px !important;
  }

  #contact #contact-form .form-row{
    grid-template-columns:1fr !important;
  }
}

/* ============================= LOGO FILIP STUDIO ============================= */
.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-logo img{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 auto;
  filter:
    drop-shadow(0 0 5px rgba(0,240,255,.55))
    drop-shadow(0 0 12px rgba(176,38,255,.42));
  transition:transform .35s var(--ease-soft), filter .35s ease;
}

.brand-logo span{
  white-space:nowrap;
}

.brand-logo:hover img{
  transform:scale(1.06);
  filter:
    drop-shadow(0 0 8px rgba(0,240,255,.75))
    drop-shadow(0 0 18px rgba(176,38,255,.58));
}

@media(max-width:560px){
  .brand-logo{
    gap:9px;
  }

  .brand-logo img{
    width:40px;
    height:40px;
  }

  .brand-logo span{
    font-size:15px;
  }
}



/* ============================= MOBILE FIX — PRODUKCJA ============================= */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

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

@media(max-width:900px){
  .wrap{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
  }

  /* Naprawa menu: selektor musi mieć większą siłę niż nav.links */
  nav.links{
    display:none !important;
  }

  .btn-nav{
    display:none !important;
  }

  .burger{
    display:flex !important;
    flex:0 0 40px;
  }

  .nav-row{
    width:100%;
    min-width:0;
    gap:12px;
  }

  .brand-logo{
    max-width:calc(100% - 52px);
    min-width:0;
    overflow:hidden;
  }

  .brand-logo span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero{
    min-height:auto;
    padding-top:130px;
    padding-bottom:80px;
  }

  .hero-top{
    align-items:flex-start;
    justify-content:flex-start;
    margin-bottom:30px;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    font-size:clamp(36px,10.7vw,58px);
    line-height:.94;
    letter-spacing:-.035em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .hero-title .line{
    width:100%;
    overflow:visible;
  }

  .hero-sub-row{
    width:100%;
    margin-top:34px;
    gap:28px;
    align-items:flex-start;
  }

  .hero-desc{
    width:100%;
    max-width:100%;
    font-size:16px;
  }

  .hero-cta-group{
    width:100%;
  }

  .hero-cta-group .btn{
    max-width:100%;
  }

  .section-head,
  .contact-grid,
  .proj,
  .bento,
  .timeline,
  .faq-list,
  .form-panel{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .proj > *,
  .contact-grid > *,
  .bento > *,
  .form-row > *{
    min-width:0;
    max-width:100%;
  }

  .proj-visual,
  .project-image-simple,
  .taxena-mockup,
  .rollup-mockup{
    width:100%;
    max-width:100%;
  }

  .testimonials-track{
    max-width:100%;
  }

  .testimonial{
    min-width:0;
    width:min(88vw,380px);
    max-width:100%;
  }

  #contact #contact-form.form-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #contact #contact-form input,
  #contact #contact-form select,
  #contact #contact-form textarea,
  #contact #contact-form button{
    max-width:100% !important;
  }

  img,
  video,
  canvas,
  svg{
    max-width:100%;
  }
}

@media(max-width:560px){
  header{
    padding:16px 0;
  }

  header.scrolled{
    padding:11px 0;
  }

  .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .brand-logo img{
    width:36px;
    height:36px;
  }

  .brand-logo span{
    font-size:14px;
  }

  .hero{
    padding-top:116px;
  }

  .hero-title{
    font-size:clamp(34px,10.4vw,48px);
    line-height:.96;
  }

  .hero-badge{
    max-width:100%;
    font-size:10.5px;
    letter-spacing:.08em;
  }

  .hero-cta-group{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-cta-group .btn{
    width:100%;
    justify-content:center;
  }

  .section{
    padding:88px 0;
  }

  .section-title{
    font-size:clamp(30px,9vw,42px);
    overflow-wrap:anywhere;
  }

  #contact #contact-form.form-panel{
    padding:24px 16px !important;
  }

  #mobile-menu{
    padding-left:24px;
    padding-right:24px;
  }

  #mobile-menu a{
    font-size:30px;
  }
}


/* ============================= MOBILE FIX 2 — OBCIĘTE NAGŁÓWKI ============================= */
@media(max-width:768px){
  .timeline{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .t-item{
    width:100%;
    max-width:100%;
    grid-template-columns:34px minmax(0,1fr);
  }

  .t-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:10px 0 10px 20px;
  }

  .t-content h3{
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:clamp(30px,8.4vw,40px);
    line-height:1.02;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }

  .t-content p{
    width:100%;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  #contact .contact-title{
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:clamp(38px,10.5vw,50px);
    line-height:1.02;
    letter-spacing:-.035em;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }

  #contact .contact-info,
  #contact .contact-info a{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #contact .contact-info a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

@media(max-width:420px){
  .t-content h3{
    font-size:clamp(28px,8vw,34px);
  }

  #contact .contact-title{
    font-size:clamp(34px,9.8vw,42px);
  }
}


/* ============================= MOBILE FIX 3 — NATURALNE ŁAMANIE TEKSTU ============================= */
@media(max-width:768px){
  /* Hero — cały napis mieści się bez obciętej litery E */
  .hero-title{
    font-size:clamp(32px,9.15vw,44px);
    line-height:.98;
    letter-spacing:-.045em;
  }

  .hero-title .line{
    overflow:visible;
    white-space:normal;
  }

  /* Nagłówki sekcji — bez przenoszenia pojedynczych liter i przecinka */
  .section-title,
  #stack .section-title{
    font-size:clamp(31px,8.4vw,40px);
    line-height:1.04;
    letter-spacing:-.035em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  /* Proces — wyłącznie pełne słowa, bez sztucznych myślników */
  .t-content h3{
    font-size:clamp(27px,7.25vw,35px);
    line-height:1.05;
    letter-spacing:-.025em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}

@media(max-width:420px){
  .hero-title{
    font-size:clamp(31px,8.95vw,38px);
  }

  .section-title,
  #stack .section-title{
    font-size:clamp(29px,7.9vw,35px);
  }

  .t-content h3{
    font-size:clamp(26px,6.9vw,31px);
  }
}