:root {
  --black: #0a0a0a;
  --white: #f0ece4;
  --accent: #d4ff00;
  --ghost: rgba(240,236,228,0.06);
  --blur: rgba(212,255,0,0.15);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--accent) var(--black); }
body { background:var(--black); color:var(--white); font-family:'Jura',sans-serif; font-weight:300; overflow-x:hidden; cursor:crosshair; }

/* RTL */
body.rtl { direction:rtl; }
body.rtl nav { flex-direction:row-reverse; }
body.rtl .nav-links { flex-direction:row-reverse; }
body.rtl footer { flex-direction:row-reverse; }
body.rtl .marquee { animation-direction:reverse; }

/* GRAIN */
body::before { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* LOADER */
.loader { position:fixed; inset:0; z-index:10000; background:var(--black); display:flex; align-items:center; justify-content:center; animation:loaderOut 0.6s ease forwards 2.4s; }
.loader-text { font-family:'Lobster Two',cursive; font-size:clamp(2rem,8vw,6rem); color:var(--accent); animation:glitchLoader 0.15s infinite alternate; }
@keyframes loaderOut { to { opacity:0; pointer-events:none; } }
@keyframes glitchLoader { 0% { text-shadow:2px 0 var(--accent),-2px 0 #ff003c; transform:skewX(-1deg); } 100% { text-shadow:-2px 0 var(--accent),2px 0 #00f0ff; transform:skewX(1deg); } }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.5rem 3rem; display:flex; justify-content:space-between; align-items:center; mix-blend-mode:difference; }
.logo { font-family:'Lobster Two',cursive; font-size:1.4rem; color:var(--white); letter-spacing:1px; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { font-family:'Jura',sans-serif; font-weight:500; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--white); text-decoration:none; position:relative; transition:color 0.3s; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--accent); transition:width 0.4s cubic-bezier(0.22,1,0.36,1); }
.nav-links a:hover { color:var(--accent); }
.nav-links a:hover::after { width:100%; }

/* LANG SWITCHER */
.lang-switcher { position:relative; }
.lang-current { font-family:'Jura',sans-serif; font-weight:500; font-size:0.7rem; letter-spacing:2px; color:rgba(240,236,228,0.5); background:none; border:1px solid rgba(240,236,228,0.1); padding:4px 10px; cursor:pointer; transition:all 0.3s; }
.lang-current:hover { color:var(--accent); border-color:rgba(212,255,0,0.3); }
.lang-dropdown { display:none; position:absolute; top:100%; right:0; margin-top:8px; background:var(--black); border:1px solid rgba(240,236,228,0.1); min-width:180px; z-index:10001; }
body.rtl .lang-dropdown { right:auto; left:0; }
.lang-dropdown.open { display:block; }
.lang-option { display:flex; align-items:center; gap:10px; padding:10px 14px; font-family:'Jura',sans-serif; font-size:0.65rem; letter-spacing:2px; color:rgba(240,236,228,0.5); transition:all 0.2s; cursor:pointer; text-decoration:none; }
.lang-option:hover { background:rgba(212,255,0,0.05); color:var(--white); }
.lang-option.active { color:var(--accent); }
.lang-option span { opacity:0.5; font-size:0.6rem; }

/* HERO */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.hero-bg-text { position:absolute; font-family:'Lobster Two',cursive; font-size:clamp(8rem,25vw,22rem); color:var(--ghost); white-space:nowrap; user-select:none; pointer-events:none; top:50%; left:50%; transform:translate(-50%,-50%); animation:driftText 20s ease-in-out infinite alternate; }
@keyframes driftText { 0% { transform:translate(-50%,-50%) translateX(-5%); } 100% { transform:translate(-50%,-50%) translateX(5%); } }

.faceless-avatar { width:clamp(180px,22vw,280px); height:clamp(180px,22vw,280px); border-radius:50%; position:relative; margin-bottom:3rem; animation:fadeSlideUp 1s ease 2.6s both; }
.faceless-avatar .circle-outer { width:100%; height:100%; border-radius:50%; border:1px solid rgba(212,255,0,0.3); display:flex; align-items:center; justify-content:center; animation:pulseRing 4s ease-in-out infinite; position:relative; }
.faceless-avatar .circle-outer::before { content:''; position:absolute; inset:-15px; border-radius:50%; border:1px solid rgba(212,255,0,0.08); animation:pulseRing 4s ease-in-out infinite 0.5s; }
.faceless-avatar .circle-outer::after { content:''; position:absolute; inset:-30px; border-radius:50%; border:1px solid rgba(212,255,0,0.04); animation:pulseRing 4s ease-in-out infinite 1s; }
@keyframes pulseRing { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.03); opacity:0.6; } }

.faceless-avatar .inner { width:75%; height:75%; border-radius:50%; background:linear-gradient(135deg,rgba(212,255,0,0.08),rgba(212,255,0,0.02)); backdrop-filter:blur(40px); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.faceless-avatar .inner::before { content:'?'; font-family:'Lobster Two',cursive; font-size:4rem; color:rgba(212,255,0,0.15); animation:flickerQ 3s ease-in-out infinite; }
@keyframes flickerQ { 0%,100% { opacity:0.15; transform:scale(1); } 50% { opacity:0.4; transform:scale(1.1); } }

.hero-title { font-family:'Lobster Two',cursive; font-size:clamp(3rem,9vw,7.5rem); line-height:0.95; text-align:center; position:relative; animation:fadeSlideUp 1s ease 2.8s both; }
.hero-title .first { display:block; color:var(--white); }
.hero-title .last { display:block; color:var(--accent); position:relative; }
.hero-title .last::after { content:'Blissett'; position:absolute; left:4px; top:4px; color:transparent; -webkit-text-stroke:1px rgba(212,255,0,0.2); z-index:-1; }

.hero-tagline { font-family:'Jura',sans-serif; font-weight:500; font-size:clamp(0.7rem,1.2vw,0.9rem); letter-spacing:6px; text-transform:uppercase; margin-top:2rem; color:rgba(240,236,228,0.5); animation:fadeSlideUp 1s ease 3s both; }
.scroll-indicator { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0.5rem; animation:fadeSlideUp 1s ease 3.2s both; }
.scroll-indicator span { font-family:'Jura',sans-serif; font-weight:300; font-size:0.6rem; letter-spacing:4px; text-transform:uppercase; color:rgba(240,236,228,0.25); }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--accent),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity:1; height:40px; } 50% { opacity:0.3; height:25px; } }
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

/* MARQUEE */
.marquee-wrap { padding:1.5rem 0; border-top:1px solid rgba(240,236,228,0.06); border-bottom:1px solid rgba(240,236,228,0.06); overflow:hidden; position:relative; }
.marquee { display:flex; gap:4rem; animation:marqueeScroll 25s linear infinite; width:max-content; }
.marquee span { font-family:'Jura',sans-serif; font-weight:500; font-size:0.7rem; letter-spacing:4px; text-transform:uppercase; white-space:nowrap; color:rgba(240,236,228,0.2); }
.marquee span.accent { color:var(--accent); opacity:0.5; }
@keyframes marqueeScroll { to { transform:translateX(-50%); } }

/* SECTIONS */
section { padding:clamp(4rem,10vw,8rem) clamp(2rem,8vw,6rem); }
.section-label { font-family:'Jura',sans-serif; font-weight:500; font-size:0.65rem; letter-spacing:5px; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; opacity:0.7; }
.section-title { font-family:'Lobster Two',cursive; font-size:clamp(2.2rem,5vw,4rem); margin-bottom:2.5rem; line-height:1.1; }

/* MANIFESTO */
.manifesto { max-width:800px; margin:0 auto; text-align:center; }
.manifesto-text { font-family:'Jura',sans-serif; font-weight:300; font-size:clamp(1.1rem,2vw,1.5rem); line-height:1.9; color:rgba(240,236,228,0.7); }
.manifesto-text em { font-style:italic; color:var(--accent); font-family:'Lobster Two',cursive; font-size:1.15em; }
.manifesto-text .strike { text-decoration:line-through; opacity:0.35; }

/* WORK */
.work-section { max-width:1200px; margin:0 auto; }
.work-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.work-card { aspect-ratio:4/3; border:1px solid rgba(240,236,228,0.06); border-radius:4px; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(240,236,228,0.03),rgba(240,236,228,0.01)); transition:all 0.5s cubic-bezier(0.22,1,0.36,1); cursor:pointer; }
.work-card:hover { border-color:rgba(212,255,0,0.3); transform:translateY(-4px); box-shadow:0 20px 60px rgba(212,255,0,0.05); }
.work-card .card-noise { position:absolute; inset:0; opacity:0.08; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(240,236,228,0.03) 2px,rgba(240,236,228,0.03) 4px); }
.work-card .card-content { position:absolute; bottom:0; left:0; right:0; padding:1.8rem; background:linear-gradient(to top,rgba(10,10,10,0.95),transparent); }
.card-tag { font-family:'Jura',sans-serif; font-weight:500; font-size:0.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.card-title { font-family:'Lobster Two',cursive; font-size:1.5rem; color:var(--white); }
.card-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3rem; opacity:0.06; transition:opacity 0.4s,transform 0.4s; }
.work-card:hover .card-icon { opacity:0.15; transform:translate(-50%,-50%) scale(1.2); }

/* STATS */
.stats-row { display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(2rem,5vw,5rem); padding:4rem 2rem; border-top:1px solid rgba(240,236,228,0.06); border-bottom:1px solid rgba(240,236,228,0.06); }
.stat { text-align:center; }
.stat-number { font-family:'Lobster Two',cursive; font-size:clamp(2.5rem,5vw,4rem); color:var(--accent); line-height:1; }
.stat-label { font-family:'Jura',sans-serif; font-weight:500; font-size:0.6rem; letter-spacing:4px; text-transform:uppercase; color:rgba(240,236,228,0.4); margin-top:0.5rem; }

/* CONTACT */
.contact-section { text-align:center; max-width:700px; margin:0 auto; }
.contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; }
.contact-link { font-family:'Jura',sans-serif; font-weight:500; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--white); text-decoration:none; padding:1rem 2.2rem; border:1px solid rgba(240,236,228,0.15); border-radius:2px; transition:all 0.4s; position:relative; overflow:hidden; }
.contact-link::before { content:''; position:absolute; inset:0; background:var(--accent); transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.22,1,0.36,1); z-index:0; }
.contact-link:hover::before { transform:translateY(0); }
.contact-link:hover { color:var(--black); border-color:var(--accent); }
.contact-link span { position:relative; z-index:1; }
.contact-whisper { font-family:'Jura',sans-serif; font-weight:300; font-size:0.85rem; color:rgba(240,236,228,0.25); margin-top:3rem; font-style:italic; }

/* FOOTER */
footer { padding:2rem 3rem; display:flex; justify-content:space-between; align-items:center; font-family:'Jura',sans-serif; font-weight:300; font-size:0.65rem; letter-spacing:2px; color:rgba(240,236,228,0.2); }

/* CURSOR GLOW */
.cursor-glow { position:fixed; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(212,255,0,0.04),transparent 70%); pointer-events:none; z-index:1; transform:translate(-50%,-50%); transition:left 0.3s ease-out,top 0.3s ease-out; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:768px) { nav { padding:1rem 1.5rem; } .nav-links { gap:1.5rem; } .nav-links a { font-size:0.65rem; letter-spacing:2px; } section { padding:4rem 1.5rem; } footer { flex-direction:column; gap:0.5rem; text-align:center; } }
@media (max-width:500px) { .nav-links { display:none; } }