/* Cyberpunk single-page theme — minimalist, high contrast, neon glow */

:root{
  /* Deep wine-black base (Akatsuki red + cyberpunk void) */
  --bg:#100208;
  --bg2:#060103;
  --ink:#f7eef2;
  --muted:rgba(247,238,242,.74);
  /* Type scale — clear steps so headlines read above body copy */
  --type-section:clamp(1.5rem,1.05rem + 1.85vw,2.125rem);
  --type-section-sub:clamp(1rem,0.9rem + 0.35vw,1.125rem);
  --type-subhead:clamp(1.0625rem,0.98rem + 0.45vw,1.25rem);
  --type-body:clamp(1rem,0.94rem + 0.22vw,1.0625rem);
  --type-body-soft:rgba(240,232,236,.92);
  /* Secondary copy: readable on dark bg without competing with headlines */
  --type-caption:rgba(228,222,232,.88);
  /* UI chrome / labels — avoid going under ~12px for legibility */
  --type-ui:13px;
  --type-ui-sm:12px;
  --cyan:#00f2ff;
  --pink:#ff3dc8;
  --purple:#c4125a;
  --crimson:#e91c3c;
  --crimson-deep:#6a0618;
  --panel:rgba(18,4,12,.68);
  --border:rgba(255,55,95,.22);
  --shadow:0 0 16px rgba(233,28,60,.28),0 0 40px rgba(255,50,180,.12);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

::selection{
  background:rgba(233,28,60,.42);
  color:#fff9fa;
}
::-moz-selection{
  background:rgba(233,28,60,.42);
  color:#fff9fa;
}

body{
  margin:0;
  background:radial-gradient(1100px 720px at 18% 12%,rgba(220,25,55,.22),transparent 58%),
             radial-gradient(900px 560px at 82% 8%,rgba(255,55,190,.14),transparent 55%),
             radial-gradient(800px 500px at 50% 85%,rgba(90,10,30,.35),transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--type-body);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.skip-link{
  position:absolute;left:-999px;top:12px;
  background:#000;color:var(--ink);
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
}
.skip-link:focus{left:12px;z-index:9999}

/* HERO */
.hero{
  min-height:100svh;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
  overflow:hidden;
}

/* Hero wallpaper.
   Current: static image at `assets/images/hero.png`.
   Later: replace the first layer with a GIF, e.g.
   url("../assets/images/hero.gif") */
#hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  z-index:-3;
  /* Fallback behind the animated photo layer */
  background:linear-gradient(155deg,#120206,#070102);
}

/* Slow drift / Ken Burns on the photo only — scrims stay full-bleed on #hero-bg::after + .hero__overlay */
.hero-bg__photo{
  position:absolute;
  left:-7%;
  top:-7%;
  width:114%;
  height:114%;
  background:url("../assets/images/hero.png") center center / cover no-repeat;
  filter:saturate(1.06) contrast(1.06);
  transform:translateZ(0);
  animation:heroPhotoDrift 42s ease-in-out infinite alternate;
  will-change:transform;
}

#hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(10,0,5,.68) 0%,
    rgba(0,0,0,.28) 34%,
    rgba(0,0,0,.52) 66%,
    rgba(18,0,10,.92) 100%
  );
}

@keyframes heroPhotoDrift{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.055) translate(-1.2%,-0.6%)}
}
.hero__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  /* Same box as #hero-bg: global dim + slightly stronger band under nav (no scale mismatch). */
  background:
    linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.06) 28%,transparent 48%),
    rgba(6,0,3,.34);
  pointer-events:none;
  z-index:-2;
}

/* scanlines + subtle grid overlay */
.hero::before,.hero::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:-1;
}
.hero::before{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035),
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode:overlay;
  opacity:.55;
}
.hero::after{
  background:
    linear-gradient(transparent 70%,rgba(20,0,6,.4)),
    repeating-linear-gradient(to right,rgba(0,242,255,.07),rgba(0,242,255,.07) 1px,transparent 1px,transparent 70px),
    repeating-linear-gradient(to bottom,rgba(220,30,70,.07),rgba(220,30,70,.07) 1px,transparent 1px,transparent 70px);
  opacity:.38;
  transform:translateZ(0);
}

.nav{
  position:absolute;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
}
.nav__brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.nav__sigil{
  display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(255,90,110,.35);
  box-shadow:0 0 16px rgba(233,28,60,.25),0 0 20px rgba(0,242,255,.12);
  color:var(--cyan);
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
}
.nav__name{
  font-family:Orbitron,system-ui,sans-serif;
  letter-spacing:.14em;
  font-weight:700;
  font-size:var(--type-ui);
  opacity:.94;
}
.nav__name--site{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.1em;
  font-weight:600;
  font-size:15px;
  text-transform:lowercase;
  opacity:1;
}
.nav__links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.nav__links a{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui);
  letter-spacing:.06em;
  opacity:.9;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition:transform .18s ease,opacity .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.nav__links a:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(233,28,60,.42);
  box-shadow:0 0 16px rgba(233,28,60,.22),0 0 22px rgba(0,242,255,.1);
  color:rgba(255,236,240,.98);
}

/* Language toggle in nav */
.nav__lang{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:16px;
}
.nav__lang-sep{
  opacity:.75;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
}
.nav__lang-btn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:rgba(240,236,248,.92);
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.88;
  transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
}
.nav__lang-btn.is-active{
  opacity:1;
  border-color:rgba(233,28,60,.5);
  background:linear-gradient(180deg,rgba(233,28,60,.14),rgba(0,242,255,.06));
  color:rgba(230,255,252,.98);
  box-shadow:0 0 14px rgba(233,28,60,.22),0 0 18px rgba(0,242,255,.12);
}
.nav__lang-btn:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(255,90,110,.45);
}

.hero__content{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:120px 20px 86px;
}

.hero__identity{
  display:flex;
  gap:16px;
  align-items:center;
  margin:0 0 10px;
}
.hero__identityText{min-width:0}

.avatar{
  display:block;
  border-radius:22px;
  border:1px solid rgba(255,90,110,.28);
  box-shadow:0 0 18px rgba(233,28,60,.18),0 0 36px rgba(0,242,255,.08);
  background:rgba(12,2,6,.35);
}
.avatar--hero{
  width:86px;
  height:86px;
  object-fit:cover;
  filter:grayscale(.12) contrast(1.08);
}

.avatar--about{
  width:100%;
  max-width:240px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  margin:0 0 14px;
  filter:grayscale(.06) contrast(1.05) saturate(1.04);
}

/* About photo: cyber frame + crimson / magenta / purple wash (matches site palette) */
.avatar-wrap--about{
  position:relative;
  display:block;
  width:fit-content;
  max-width:240px;
  margin:0 0 14px;
  padding:2px;
  border-radius:26px;
  background:linear-gradient(
    135deg,
    rgba(233,28,60,.88) 0%,
    rgba(140,12,58,.95) 28%,
    rgba(45,6,28,1) 52%,
    rgba(110,14,72,.94) 78%,
    rgba(0,242,255,.22) 100%
  );
  isolation:isolate;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 0 0 2px rgba(233,28,60,.4),
    0 12px 36px rgba(0,0,0,.45),
    0 0 32px rgba(233,28,60,.28),
    0 0 48px rgba(255,55,190,.14),
    0 0 36px rgba(0,242,255,.08);
}
.avatar-wrap--about .avatar--about{
  margin:0;
  border-radius:22px;
  border:none;
  box-shadow:none;
  display:block;
  filter:contrast(1.06) saturate(1.08) brightness(1.02);
}
.avatar-wrap--about::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:22px;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(
      165deg,
      rgba(255,255,255,.07) 0%,
      transparent 38%,
      rgba(8,0,6,.28) 100%
    ),
    radial-gradient(ellipse 130% 90% at 50% 100%,rgba(60,4,28,.42),transparent 58%);
  opacity:.62;
  mix-blend-mode:soft-light;
}
.avatar-wrap--about::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:22px;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(
      125deg,
      rgba(233,28,60,.38) 0%,
      rgba(255,61,200,.12) 42%,
      transparent 62%
    ),
    linear-gradient(
      305deg,
      transparent 35%,
      rgba(196,18,88,.28) 72%,
      rgba(40,4,32,.45) 100%
    ),
    radial-gradient(ellipse 95% 80% at 50% 0%,rgba(255,210,228,.14),transparent 52%),
    radial-gradient(ellipse 70% 55% at 85% 15%,rgba(0,242,255,.1),transparent 50%);
  mix-blend-mode:soft-light;
  opacity:.58;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui);
  letter-spacing:.1em;
  color:rgba(238,234,246,.9);
  margin:0 0 18px;
  text-transform:uppercase;
}
.kicker__dot{
  width:8px;height:8px;border-radius:99px;
  background:radial-gradient(circle at 30% 30%,#fff6f8,var(--crimson));
  box-shadow:0 0 12px rgba(233,28,60,.85),0 0 26px rgba(255,55,190,.35);
  animation:pulse 2.2s ease-in-out infinite;
}

/* Glitch headline */
.glitch{
  position:relative;
  font-family:Orbitron,system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.02;
  font-size:clamp(38px,7vw,84px);
  margin:0 0 12px;
  text-shadow:
    0 0 16px rgba(233,28,60,.32),
    0 0 32px rgba(255,55,190,.15),
    0 0 48px rgba(0,242,255,.12);
  animation:floaty 6s ease-in-out infinite;
}
.glitch .accent{color:var(--cyan)}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  width:100%;
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  opacity:.9;
}
.glitch::before{
  transform:translate(2px,0);
  color:var(--pink);
  mix-blend-mode:screen;
  animation:glitchTop 2.2s infinite linear;
  text-shadow:0 0 10px rgba(255,44,237,.4);
}
.glitch::after{
  transform:translate(-2px,0);
  color:var(--crimson);
  mix-blend-mode:screen;
  animation:glitchBot 2.6s infinite linear;
  text-shadow:0 0 14px rgba(233,28,60,.5);
}
.glitch.is-burst::before{animation-duration:.7s}
.glitch.is-burst::after{animation-duration:.8s}

.subheading{
  margin:0 0 26px;
  max-width:52ch;
  color:var(--type-caption);
  font-size:clamp(1rem,0.92rem + 0.45vw,1.1875rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.02em;
}

.hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.neon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 18px;
  border-radius:14px;
  border:1px solid rgba(0,242,255,.75);
  background:linear-gradient(180deg,rgba(233,28,60,.08),rgba(8,2,4,.35));
  color:var(--cyan);
  box-shadow:0 0 14px rgba(0,242,255,.22),0 0 28px rgba(233,28,60,.12);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  will-change:transform,box-shadow;
  overflow:hidden;
}
.neon-btn__label{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:var(--type-ui-sm);
}
.neon-btn__glow{
  position:absolute;inset:-60% -30%;
  background:radial-gradient(circle at 30% 40%,rgba(0,242,255,.22),transparent 55%),
             radial-gradient(circle at 70% 60%,rgba(233,28,60,.22),transparent 58%);
  transform:translateY(10%);
  opacity:.0;
  transition:opacity .18s ease;
}
.neon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,80,130,.85);
  box-shadow:0 0 20px rgba(0,242,255,.28),0 0 36px rgba(233,28,60,.22);
}
.neon-btn:hover .neon-btn__glow{opacity:1}
.neon-btn:active{transform:translateY(0)}
.neon-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.neon-btn--submit{margin-top:14px;width:100%}

.ghost-btn{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(233,28,60,.45);
  color:rgba(255,228,232,.9);
  background:linear-gradient(180deg,rgba(90,8,22,.35),rgba(24,4,10,.5));
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ghost-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,80,120,.65);
  box-shadow:0 0 22px rgba(233,28,60,.28),0 0 36px rgba(255,55,190,.12);
}

.hero__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:34px;
}
.chip{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(32,6,14,.55),rgba(8,2,6,.4));
  border:1px solid rgba(255,70,100,.22);
  box-shadow:0 0 20px rgba(233,28,60,.1),0 0 24px rgba(0,242,255,.06);
}
.chip__k{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  opacity:.82;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(216,220,230,.95);
}
.chip__v{
  font-family:Orbitron,system-ui,sans-serif;
  font-size:var(--type-ui);
  letter-spacing:.06em;
  color:rgba(244,240,248,.96);
}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:.7;
}
.scroll-hint__line{
  width:2px;height:44px;border-radius:99px;
  background:linear-gradient(var(--crimson),transparent);
  box-shadow:0 0 14px rgba(233,28,60,.45);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
.scroll-hint__text{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.12em;
  color:rgba(236,232,242,.88);
}

/* SECTIONS */
.section{padding:76px 0}
.section--alt{
  background:
    radial-gradient(820px 400px at 25% 15%,rgba(230,28,55,.1),transparent 56%),
    radial-gradient(760px 380px at 72% 22%,rgba(255,55,195,.07),transparent 55%),
    radial-gradient(700px 320px at 50% 80%,rgba(0,242,255,.05),transparent 58%),
    linear-gradient(180deg,rgba(255,240,245,.025),rgba(255,255,255,0));
}
.section__header{margin-bottom:clamp(28px,4vw,40px)}
.section__title{
  margin:0 0 14px;
  font-family:Orbitron,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.05em;
  font-size:var(--type-section);
  line-height:1.15;
  color:rgba(255,248,250,.99);
  text-shadow:0 0 40px rgba(233,28,60,.12);
}
.section__tag{
  display:inline-block;
  margin-right:10px;
  vertical-align:middle;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  font-weight:600;
  letter-spacing:.12em;
  padding:7px 11px;
  border-radius:12px;
  border:1px solid rgba(255,80,110,.35);
  color:rgba(255,200,210,.92);
  box-shadow:0 0 20px rgba(233,28,60,.12),0 0 28px rgba(0,242,255,.06);
}
.section__subtitle{
  margin:0;
  color:var(--type-caption);
  max-width:62ch;
  line-height:1.7;
  font-size:var(--type-section-sub);
  font-weight:400;
  letter-spacing:.01em;
}

.panel{
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid rgba(255,120,140,.1);
  box-shadow:0 0 32px rgba(0,0,0,.35),0 0 48px rgba(80,0,20,.12);
  padding:18px 18px;
  backdrop-filter:blur(10px);
}
.panel--accent{
  border-color:rgba(255,70,100,.28);
  box-shadow:var(--shadow);
}
.panel__title{
  margin:0 0 14px;
  font-family:Orbitron,system-ui,sans-serif;
  letter-spacing:.07em;
  font-size:var(--type-subhead);
  font-weight:800;
  line-height:1.2;
  color:rgba(255,248,252,.98);
}

.divider{
  height:1px;
  margin:16px 0;
  background:linear-gradient(90deg,transparent,rgba(233,28,60,.75),rgba(255,60,200,.55),rgba(0,242,255,.35),transparent);
  opacity:.72;
}
/* Long-form copy: same family as body, comfortable measure (labels still use Share Tech Mono in their rules) */
.mono{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:var(--type-body);
  font-weight:400;
  line-height:1.72;
  letter-spacing:.012em;
  color:var(--type-body-soft);
}

.about{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.about__offer-wrap{
  margin-top:clamp(32px,5vw,56px);
  padding-top:clamp(20px,3vw,36px);
  border-top:1px solid rgba(233,28,60,.14);
}
.about__offer-heading{
  margin:0 0 18px;
  font-family:Orbitron,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.055em;
  font-size:clamp(1.35rem,1.05rem + 1.25vw,1.85rem);
  line-height:1.18;
  color:rgba(255,248,250,.99);
  text-shadow:0 0 28px rgba(233,28,60,.22),0 0 42px rgba(255,55,190,.1);
}
.about__intro .mono + .mono{margin-top:1.25em}
.about__intro .mono:first-of-type{
  font-size:clamp(1.03rem,0.96rem + 0.35vw,1.125rem);
  font-weight:500;
  color:rgba(248,240,244,.94);
}
.about__featured-heading{
  margin:clamp(8px,1.5vw,14px) 0 12px;
  font-family:Orbitron,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.055em;
  font-size:var(--type-subhead);
  line-height:1.25;
  color:rgba(255,248,250,.98);
}
.featured__timeline{
  list-style:none;
  margin:0;
  padding:0;
}
.featured__step{
  display:flex;
  gap:8px 10px;
  align-items:stretch;
  margin:0;
  padding:0 0 14px;
}
.featured__step:last-child{padding-bottom:0}
.featured__marker{
  flex:0 0 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:0.28em;
}
.featured__dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#e8ffff,var(--cyan));
  box-shadow:0 0 8px rgba(0,242,255,.55),0 0 14px rgba(233,28,60,.2);
}
.featured__marker::after{
  content:"";
  flex:1 1 auto;
  width:1px;
  min-height:4px;
  margin-top:3px;
  background:linear-gradient(180deg,rgba(233,28,60,.42),rgba(233,28,60,.08));
}
.featured__step:last-child .featured__marker::after{display:none}
.featured__line{
  margin:0;
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.25em 0.55em;
  line-height:1.62;
  font-size:clamp(0.9375rem,0.88rem + 0.22vw,1.0625rem);
  font-weight:400;
  color:var(--type-body-soft);
}
.featured__link{
  display:inline;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:0.9em;
  letter-spacing:.03em;
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-color:rgba(0,242,255,.35);
  text-underline-offset:2px;
  white-space:nowrap;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.featured__link:hover{
  color:rgba(180,255,255,.98);
  text-decoration-color:rgba(0,242,255,.65);
}
.about__facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:720px){
  .modules--offer{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.fact{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,70,95,.18);
  background:linear-gradient(135deg,rgba(40,6,14,.5),rgba(0,242,255,.04));
}
.fact__icon{color:var(--cyan);text-shadow:0 0 14px rgba(0,242,255,.4),0 0 22px rgba(233,28,60,.25)}
.fact__text{color:rgba(233,230,255,.82)}

.modules{display:grid;gap:10px}
.module{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(220,35,75,.22);
  background:linear-gradient(180deg,rgba(196,20,88,.1),rgba(24,4,12,.35));
}
.module__label{
  display:block;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.1em;
  opacity:.85;
  font-weight:600;
  text-transform:uppercase;
  color:rgba(214,220,232,.95);
}
.module__value{
  display:block;
  margin-top:6px;
  font-size:var(--type-body);
  line-height:1.62;
  font-weight:500;
  color:rgba(245,240,248,.93);
}

/* What I offer: larger, clearer type on small / laptop screens */
.about__offer .modules--offer{
  gap:12px;
}
.about__offer .module{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
}
.about__offer .module__icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,70,100,.25);
  background:linear-gradient(145deg,rgba(233,28,60,.12),rgba(0,242,255,.06));
  color:var(--cyan);
  box-shadow:0 0 18px rgba(233,28,60,.1);
}
.about__offer .module__icon svg{
  width:26px;
  height:26px;
  display:block;
}
.about__offer .module__body{
  flex:1;
  min-width:0;
}
.about__offer .module--ai .module__icon{
  color:var(--pink);
  border-color:rgba(255,60,200,.32);
  background:linear-gradient(145deg,rgba(255,55,190,.12),rgba(233,28,60,.08));
  box-shadow:0 0 18px rgba(255,55,190,.12);
}
.about__offer .module__label{
  font-size:var(--type-ui);
  letter-spacing:.1em;
  opacity:.88;
  color:rgba(208,216,228,.95);
}
.about__offer .module__value{
  margin-top:8px;
  font-size:clamp(1rem,0.94rem + 0.28vw,1.0625rem);
  line-height:1.65;
  font-weight:500;
  color:rgba(248,242,248,.95);
}
@media (min-width:640px){
  .about__offer .module__label{font-size:var(--type-ui);letter-spacing:.09em}
  .about__offer .module__value{font-size:clamp(1rem,0.9rem + 0.45vw,1.0625rem)}
}

/* WORK grid */
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

/* BLOG (single full-width column after sidebar removal) */
.blog{
  display:block;
  width:100%;
  min-width:0;
}
.blog > .panel{
  width:100%;
  max-width:none;
  min-width:0;
}
.blog__lead{
  margin:0 0 18px;
  max-width:52ch;
  line-height:1.72;
  color:var(--type-body-soft);
  font-size:var(--type-body);
  font-weight:400;
}
.blog__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.blog__actions .neon-btn,
.blog__actions .ghost-btn{
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
}
.blog__hint{margin:0}
.blog-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:14px;
  width:100%;
  min-width:0;
}
.blog-card{
  grid-column:auto;
  border-radius:var(--radius);
  padding:14px 14px;
  border:1px solid rgba(255,90,110,.12);
  background:linear-gradient(165deg,rgba(48,8,18,.55),rgba(12,3,8,.75));
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  overflow:hidden;
  min-width:0;
  overflow-wrap:anywhere;
}
.blog-card:hover{
  transform:translateY(-2px);
  border-color:rgba(233,28,60,.35);
  box-shadow:0 0 22px rgba(233,28,60,.14),0 0 40px rgba(255,55,190,.1);
}
.blog-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.blog-card__date{opacity:.85;font-size:var(--type-ui-sm);color:rgba(220,216,228,.9)}
.blog-card__badge{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.12em;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,44,237,.22);
  color:rgba(255,44,237,.88);
  background:rgba(255,44,237,.05);
}
.blog-card__title{
  margin:0 0 6px;
  font-family:Orbitron,system-ui,sans-serif;
  letter-spacing:.04em;
  font-size:clamp(1rem,0.92rem + 0.35vw,1.125rem);
  line-height:1.28;
  overflow-wrap:anywhere;
}
.blog-card__desc{
  margin:0 0 10px;
  color:rgba(222,216,230,.9);
  font-size:var(--type-ui-sm);
  line-height:1.65;
  overflow-wrap:anywhere;
}
.blog-card__link{
  display:inline-flex;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,70,100,.28);
  color:rgba(255,235,240,.95);
  background:linear-gradient(180deg,rgba(233,28,60,.12),rgba(20,4,10,.4));
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.04em;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.blog-card__link:hover{
  transform:translateY(-1px);
  border-color:rgba(0,242,255,.4);
  box-shadow:0 0 18px rgba(233,28,60,.18),0 0 22px rgba(0,242,255,.1);
}
.blog-card__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.blog-card__link--ghost{
  border-color:rgba(196,20,88,.35);
  color:rgba(247,238,242,.9);
  background:linear-gradient(180deg,rgba(196,20,88,.12),rgba(16,4,10,.45));
}
.blog-card__link--ghost:hover{
  border-color:rgba(255,60,200,.4);
  box-shadow:0 0 16px rgba(233,28,60,.2);
}
.card{
  grid-column:span 6;
  border-radius:var(--radius);
  padding:16px 16px;
  background:linear-gradient(165deg,rgba(42,8,16,.5),rgba(10,2,6,.72));
  border:1px solid rgba(255,100,120,.1);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.card::before{
  content:"";
  position:absolute;inset:-1px;
  background:radial-gradient(800px 220px at 18% 0%,rgba(233,28,60,.22),transparent 55%),
             radial-gradient(700px 200px at 82% 0%,rgba(255,55,190,.18),transparent 55%);
  opacity:.0;
  transition:opacity .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(233,28,60,.32);
  box-shadow:0 0 22px rgba(233,28,60,.14),0 0 40px rgba(196,20,88,.12);
  background:linear-gradient(165deg,rgba(233,28,60,.08),rgba(196,20,88,.06));
}
.card:hover::before{opacity:1}
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;position:relative;z-index:1}
.card__badge{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.12em;
  padding:7px 11px;
  border-radius:12px;
  border:1px solid rgba(255,70,100,.28);
  color:rgba(255,220,228,.92);
  background:linear-gradient(180deg,rgba(233,28,60,.1),rgba(12,2,6,.35));
}
.card__lines{
  width:56px;height:10px;border-radius:999px;
  background:linear-gradient(90deg,rgba(233,28,60,.75),rgba(255,55,200,.55));
  opacity:.75;
  box-shadow:0 0 16px rgba(233,28,60,.25);
}
.card__title{
  position:relative;z-index:1;
  margin:0 0 10px;
  font-family:Orbitron,system-ui,sans-serif;
  letter-spacing:.04em;
  font-size:clamp(1.0625rem,0.95rem + 0.55vw,1.3125rem);
  font-weight:800;
  line-height:1.22;
  color:rgba(255,248,250,.98);
}
.card__desc{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  font-size:clamp(0.9375rem,0.86rem + 0.25vw,1.0625rem);
  font-weight:400;
  line-height:1.72;
  color:rgba(224,218,230,.9);
}
.card__meta{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
.pill{
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.06em;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,120,140,.14);
  background:rgba(20,4,10,.45);
  opacity:1;
  color:rgba(236,230,240,.94);
}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:16px;
  align-items:start;
}
.form{position:relative;overflow:hidden}
.form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field{display:block}
.field--full{grid-column:1/-1}
.field__label{
  display:block;
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:var(--type-ui-sm);
  letter-spacing:.1em;
  opacity:1;
  color:rgba(210,214,224,.92);
  margin:0 0 6px;
  text-transform:uppercase;
}
.field__input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,100,120,.14);
  background:linear-gradient(180deg,rgba(28,6,12,.65),rgba(8,2,4,.55));
  color:rgba(247,238,242,.94);
  padding:12px 12px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field__input--area{resize:vertical;min-height:120px}
.field__input:focus{
  border-color:rgba(233,28,60,.45);
  box-shadow:0 0 0 3px rgba(233,28,60,.12),0 0 22px rgba(0,242,255,.12);
}
.form__hint{margin:12px 0 0;color:rgba(218,214,226,.88);font-size:var(--type-ui)}

/* Form overlay messages (toggled with .is-visible in script.js) */
.form-message{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
  background:linear-gradient(180deg,rgba(24,4,10,.82),rgba(6,1,3,.88));
  backdrop-filter:blur(6px);
}
.form-message.is-visible{
  opacity:1;
  visibility:visible;
}
.form-message--success p{
  margin:0;
  max-width:34ch;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(255,90,110,.5);
  color:rgba(220,255,252,.96);
  background:linear-gradient(165deg,rgba(233,28,60,.14),rgba(0,242,255,.06));
  box-shadow:0 0 22px rgba(233,28,60,.22),0 0 28px rgba(0,242,255,.1);
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:15px;
  line-height:1.55;
}
.form-message--error p{
  margin:0;
  max-width:36ch;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(255,0,64,.45);
  color:#ff8ba3;
  background:rgba(255,0,64,.08);
  box-shadow:0 0 22px rgba(255,0,64,.12);
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
  font-size:15px;
  line-height:1.55;
}

.field__error{
  display:block;
  color:#ff8ba3;
  font-size:var(--type-ui-sm);
  margin-top:6px;
  min-height:0;
}
.field__error:empty,
.field__error[hidden]{
  display:none;
}

/* Social Links */
.social{display:grid;gap:10px}
.social__link{
  display:flex;gap:10px;align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,80,100,.18);
  background:linear-gradient(135deg,rgba(36,8,14,.45),rgba(0,242,255,.04));
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.social__icon{
  width:32px;height:32px;border-radius:12px;
  display:inline-grid;place-items:center;
  border:1px solid rgba(233,28,60,.35);
  color:var(--pink);
  box-shadow:0 0 18px rgba(233,28,60,.22);
  font-family:"Share Tech Mono",ui-monospace,Menlo,monospace;
}
.social__text{
  font-size:var(--type-ui);
  line-height:1.5;
  opacity:.95;
  color:rgba(232,226,236,.94);
}
.social__link:hover{
  transform:translateY(-1px);
  border-color:rgba(255,60,200,.32);
  box-shadow:0 0 22px rgba(233,28,60,.14),0 0 32px rgba(196,20,88,.12);
}

/* Footer */
.footer{padding:30px 0;border-top:1px solid rgba(233,28,60,.12);font-size:var(--type-ui-sm);color:rgba(226,220,232,.9)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer__top{opacity:.88;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,90,110,.2);background:rgba(18,4,10,.35);font-size:var(--type-ui-sm)}
.footer__top:hover{opacity:1;box-shadow:0 0 18px rgba(233,28,60,.15)}

/* Reveal animation */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease,transform .7s ease;
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glitch,.kicker__dot,.scroll-hint__line{animation:none}
  .hero-bg__photo{animation:none}
  .reveal{transition:none;opacity:1;transform:none}
}

/* Responsive */
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .work-grid{gap:12px}
  .card{grid-column:span 12}
  .nav{
    flex-wrap:wrap;
    row-gap:8px;
  }
  .nav__links{
    flex:1 1 auto;
    justify-content:flex-end;
    gap:6px;
  }
  .nav__links a{padding:8px 6px}
  .nav__lang{
    flex:0 0 auto;
  }
}
@media (max-width:520px){
  .hero__content{padding-top:110px}
  .form__grid{grid-template-columns:1fr}
  .hero__identity{gap:12px}
  .avatar--hero{width:68px;height:68px;border-radius:18px}
  .avatar-wrap--about,
  .avatar-wrap--about .avatar--about{max-width:200px}
  .blog__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .blog__actions .neon-btn,
  .blog__actions .ghost-btn{width:100%}
}

/* Animations */
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.95}
  50%{transform:scale(1.25);opacity:.7}
}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}
@keyframes scrollPulse{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(6px);opacity:.45}
}
@keyframes glitchTop{
  0%{clip-path:inset(0 0 85% 0);transform:translate(2px,-1px)}
  10%{clip-path:inset(0 0 55% 0);transform:translate(1px,0)}
  20%{clip-path:inset(0 0 75% 0);transform:translate(3px,-1px)}
  30%{clip-path:inset(0 0 40% 0);transform:translate(2px,0)}
  40%{clip-path:inset(0 0 65% 0);transform:translate(2px,-1px)}
  50%{clip-path:inset(0 0 50% 0);transform:translate(1px,0)}
  60%{clip-path:inset(0 0 80% 0);transform:translate(3px,-1px)}
  70%{clip-path:inset(0 0 62% 0);transform:translate(2px,0)}
  80%{clip-path:inset(0 0 74% 0);transform:translate(1px,-1px)}
  90%{clip-path:inset(0 0 58% 0);transform:translate(2px,0)}
  100%{clip-path:inset(0 0 85% 0);transform:translate(2px,-1px)}
}
@keyframes glitchBot{
  0%{clip-path:inset(80% 0 0 0);transform:translate(-2px,1px)}
  12%{clip-path:inset(50% 0 0 0);transform:translate(-1px,0)}
  24%{clip-path:inset(70% 0 0 0);transform:translate(-3px,1px)}
  36%{clip-path:inset(42% 0 0 0);transform:translate(-2px,0)}
  48%{clip-path:inset(60% 0 0 0);transform:translate(-2px,1px)}
  60%{clip-path:inset(54% 0 0 0);transform:translate(-1px,0)}
  72%{clip-path:inset(76% 0 0 0);transform:translate(-3px,1px)}
  84%{clip-path:inset(66% 0 0 0);transform:translate(-2px,0)}
  100%{clip-path:inset(80% 0 0 0);transform:translate(-2px,1px)}
}