/* ============================================================
   Harsha Ramesh — Portfolio
   Tokens
============================================================ */
:root{
  --bg0:#030305;
  --bg1:#050507;
  --bg2:#0b0b0f;
  --text:rgba(246,248,255,.96);
  --muted:rgba(216,219,231,.66);
  --faint:rgba(216,219,231,.40);
  --blue:#2f7bff;
  --cyan:#63d7ff;
  --purple:#8b5cff;
  --pink:#ff5db1;
  --green:#34d399;
  --bd:rgba(255,255,255,.10);
  --bd2:rgba(215,226,234,.22);
  --sans:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --maxw:1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--bg0);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--cyan); color:#04121a; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }

/* ---------- global overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  mix-blend-mode:overlay;
}
.cursor-aura{
  position:fixed; top:0; left:0; z-index:1; pointer-events:none;
  width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,123,255,.16), rgba(99,215,255,.07) 40%, transparent 68%);
  opacity:0; transition:opacity .6s var(--ease); will-change:transform;
  mix-blend-mode:screen;
}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  padding:0 clamp(20px,4vw,56px) clamp(54px,8vh,86px);
  isolation:isolate; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; background:var(--bg0); }
/* fluted vertical stripes */
.fluted{
  position:absolute; inset:-4% -2%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.045) 1px,
      rgba(255,255,255,.000) 3px,
      rgba(0,0,0,.10) 11px,
      rgba(255,255,255,.018) 22px);
  background-size:22px 100%;
  mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
  opacity:.55; will-change:transform;
}
.hero-glow{
  position:absolute; left:50%; top:-12%; width:120vmax; height:90vmax;
  transform:translateX(-50%);
  background:
    radial-gradient(38% 42% at 50% 28%, rgba(47,123,255,.20), transparent 70%),
    radial-gradient(30% 36% at 28% 44%, rgba(139,92,255,.16), transparent 72%),
    radial-gradient(28% 32% at 74% 40%, rgba(99,215,255,.13), transparent 72%);
  filter:blur(28px); will-change:transform; opacity:.9;
}
.hero-vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 52%, rgba(3,3,5,.78) 100%);
}

/* ---------- floating design doodles ---------- */
.doodles{ position:absolute; inset:0; will-change:transform; }
.doodle{ position:absolute; display:block; opacity:0; color:var(--cyan);
  transition:opacity 1.4s var(--ease) 1.2s; }
.loaded .doodle{ opacity:.26; }
.doodle svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 10px currentColor); }
.doodle.d1{ width:30px; height:30px; color:var(--cyan); animation:floatA 13s var(--ease) infinite; }
.doodle.d2{ width:26px; height:26px; color:var(--purple); animation:floatB 16s var(--ease) infinite; }
.doodle.d3{ width:40px; height:34px; color:var(--blue); animation:floatA 18s var(--ease) infinite reverse; }
.doodle.d4{ width:34px; height:30px; color:rgba(246,248,255,.9); animation:floatB 15s var(--ease) infinite; }
.doodle.d5{ width:24px; height:24px; color:var(--pink); animation:floatA 14s var(--ease) infinite; }
.doodle.d6{ width:22px; height:22px; color:var(--cyan); animation:floatB 17s var(--ease) infinite reverse; }
.doodle.d7{ width:26px; height:26px; color:var(--blue); animation:floatB 19s var(--ease) infinite; }
.doodle.d8{ width:52px; height:24px; color:var(--cyan); animation:floatA 16s var(--ease) infinite reverse; }
.doodle.d9{ width:34px; height:28px; color:rgba(246,248,255,.9); animation:floatB 15s var(--ease) infinite; }
.doodle.d10{ width:28px; height:28px; color:var(--purple); animation:floatA 18s var(--ease) infinite; }
.doodle.d11{ width:24px; height:24px; color:var(--pink); animation:floatB 20s var(--ease) infinite reverse; }
.doodle.d12{ width:28px; height:28px; color:var(--blue); animation:floatA 15s var(--ease) infinite; }
@keyframes floatA{ 0%,100%{ transform:translate(0,0) rotate(-6deg);} 50%{ transform:translate(6px,-16px) rotate(6deg);} }
@keyframes floatB{ 0%,100%{ transform:translate(0,0) rotate(5deg);} 50%{ transform:translate(-8px,-12px) rotate(-7deg);} }

/* ---------- nav ---------- */
.nav{
  position:relative; z-index:10;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:24px 4px 0;
  opacity:0; transform:translateY(-8px);
  transition:opacity 1s var(--ease) 1.5s, transform 1s var(--ease) 1.5s;
}
.loaded .nav{ opacity:1; transform:none; }
.brand{ display:flex; align-items:center; gap:13px; justify-self:start; }
.avatar{
  width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none;
  position:relative; box-shadow:0 0 0 1.5px rgba(99,215,255,.55), 0 0 22px -4px rgba(139,92,255,.6);
  transition:transform .5s var(--spring), box-shadow .5s var(--ease);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.loaded .avatar img{ animation:avatarSpin 11s var(--ease) infinite; }
@keyframes avatarSpin{ 0%{ transform:rotate(0); } 70%,100%{ transform:rotate(360deg); } }
.brand:hover .avatar{ transform:scale(1.1); box-shadow:0 0 0 1.5px rgba(99,215,255,.95), 0 0 34px -2px rgba(139,92,255,.95); }
.brand:hover .avatar img{ animation-play-state:paused; }
.brand-label{ font-family:var(--mono); font-size:11px; line-height:1.35; letter-spacing:.22em; text-transform:uppercase; }
.brand-label b{ display:block; font-weight:700; color:var(--text); }
.brand-label span{ display:block; color:var(--muted); }

.clock{
  justify-self:center; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--bd);
  padding:9px 16px; border-radius:30px; white-space:nowrap;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.clock .dot{ width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(52,211,153,.55); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 8px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }

.nav-right{ justify-self:end; display:flex; align-items:center; gap:26px; }
.navlink{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:4px 0; transition:color .3s var(--ease); }
.navlink::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--cyan); transition:right .35s var(--ease); }
.navlink:hover{ color:var(--text); }
.navlink:hover::after{ right:0; }
.cta-contact{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:#fff; color:#04060d; padding:13px 22px; border-radius:30px;
  border:none; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--spring);
}
.cta-contact:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }

/* ---------- headline ---------- */
.hero-inner{
  position:relative; z-index:5; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(26px,4.4vh,52px);
  padding-top:clamp(14px,3vh,30px);
}
.hero-eyebrow{
  font-family:var(--mono); font-size:clamp(12px,1.1vw,14px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:10px;
  margin-bottom:clamp(-38px,-4vh,-26px);
  opacity:0; transform:translateY(10px);
  transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s;
}
.loaded .hero-eyebrow{ opacity:1; transform:none; }
.hero-eyebrow .wave{ display:inline-block; transform-origin:70% 70%; animation:wave 2.6s var(--ease) infinite; }
@keyframes wave{ 0%,60%,100%{ transform:rotate(0);} 70%{ transform:rotate(16deg);} 80%{ transform:rotate(-8deg);} 90%{ transform:rotate(12deg);} }
.headline{
  font-weight:800; line-height:1.05; letter-spacing:-.01em;
  font-size:clamp(25px,4.3vw,46px); max-width:none;
  will-change:transform;
}
.headline .ln{ display:block; overflow:hidden; padding:.02em 0; }
.headline .ln>span{ display:inline-block; white-space:nowrap; transform:translateY(110%); filter:blur(8px); opacity:0; }
.loaded .headline .ln>span{ animation:rise 1s var(--ease) forwards; }
.headline .ln:nth-child(1)>span{ animation-delay:.5s; }
.headline .ln:nth-child(2)>span{ animation-delay:.66s; }
@keyframes rise{ to{ transform:none; filter:blur(0); opacity:1; } }
.headline .hl{ font-style:normal; color:var(--cyan); text-shadow:0 0 26px rgba(99,215,255,.5); }

/* ---------- hero card deck ---------- */
.deck{
  position:relative; width:100%; max-width:740px;
  height:clamp(168px,20vw,222px); margin:0 auto;
}
.hcard{
  position:absolute; bottom:0; left:50%; top:0;
  width:clamp(150px,16vw,196px); aspect-ratio:3/3.85;
  cursor:pointer; will-change:transform; opacity:0;
  transform-origin:bottom center; transform-style:preserve-3d;
}
.loaded .hcard{ animation:deal 1s var(--spring) forwards; }
@keyframes deal{ from{ opacity:0; transform:translateY(50px) scale(.9);} }
.hcard-face{
  position:absolute; inset:0; border-radius:22px; padding:1.5px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.72), 0 6px 16px -8px rgba(0,0,0,.5);
  transition:box-shadow .45s var(--ease);
}
.loaded .hcard-face{ animation:breath 3.6s var(--ease) infinite; }
.hcard:hover .hcard-face{ box-shadow:0 44px 76px -24px rgba(0,0,0,.8), 0 0 40px -10px var(--cardglow); }
@keyframes breath{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hcard-body{
  position:relative; width:100%; height:100%; border-radius:21px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:15px; color:#fff;
}
.hcard-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
  z-index:1; pointer-events:none; filter:drop-shadow(0 8px 16px rgba(0,0,0,.28)); }
.hcard-art + .c-top{ }
/* halftone dotted overlay */
.hcard-body::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.45) 1px, transparent 1.4px);
  background-size:11px 11px;
  mask-image:linear-gradient(150deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(150deg,#000,transparent 70%);
}
.hcard-body::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(165deg,rgba(255,255,255,.12),transparent 36%,rgba(0,0,0,.42));
}
.hcard .c-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; position:relative; z-index:2; }
.hcard .c-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.95; max-width:78%; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.hcard .c-num{ font-family:var(--mono); font-size:10.5px; opacity:.7; flex:none; }
.hcard .c-tags{ position:relative; z-index:2; display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.hcard:hover .c-tags{ opacity:1; transform:none; }
.hcard .c-tags span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.3); color:#fff;
  padding:5px 9px; border-radius:20px; white-space:nowrap; backdrop-filter:blur(4px); }
.hcard .c-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:8px; position:relative; z-index:2; }
.hcard .c-title{ font-weight:800; font-size:16px; line-height:1.05; letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.hcard .c-arrow{ flex:none; font-size:16px; font-weight:700; opacity:0; transform:translate(-4px,4px); transition:.35s var(--ease); }
.hcard:hover .c-arrow{ opacity:.95; transform:none; }

.deck-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  opacity:0; transition:opacity .9s var(--ease) 1.8s; }
.loaded .deck-hint{ opacity:1; }

.scroll-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  opacity:0; transition:opacity .9s var(--ease) 2s; pointer-events:none; }
.loaded .scroll-cue{ opacity:1; }
.mouse{ width:17px; height:27px; border:1.5px solid var(--faint); border-radius:10px; position:relative; }
.mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; background:var(--cyan); border-radius:2px; animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(0);opacity:1;} 70%{transform:translateY(8px);opacity:0;} 100%{opacity:0;} }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* force-visible fallback (frozen-transition / hidden-tab safety net) */
body.force .nav,
body.force .deck-hint,
body.force .hero-eyebrow,
body.force .doodle,
body.force .scroll-cue{ opacity:1 !important; transform:none !important; transition:none !important; }
body.force .doodle{ opacity:.28 !important; }
body.force .headline .ln>span{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
body.force .hcard{ animation:none !important; opacity:1 !important; }
body.force .reveal{ opacity:1 !important; transform:none !important; }
body.motion-off .hcard-face,
body.motion-off .contact-glow{ animation:none !important; }

/* ============================================================
   FEATURED PROJECTS
============================================================ */
.featured{ position:relative; background:var(--bg0); padding:clamp(44px,6vh,84px) clamp(20px,4vw,56px) 0; }
.featured-head{ max-width:var(--maxw); margin:0 auto; text-align:left; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--blue); margin-bottom:18px; }
.section-title{ font-size:clamp(34px,5.6vw,68px); font-weight:800; line-height:1.0; color:var(--text); letter-spacing:-.01em; }
.section-sub{ margin-top:20px; max-width:900px; font-size:clamp(15px,1.4vw,18px); color:var(--muted); }

.stack{ position:relative; height:420vh; max-width:var(--maxw); margin:12px auto 0; }
.stack-sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center; }
.stack-cards{ position:relative; width:min(940px,100%); height:calc(100svh - 7rem); }
.pcard{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:40px; overflow:hidden; background:#0c0c0c;
  border:2px solid var(--bd2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  display:flex; flex-direction:column; will-change:transform;
}
.pcard-visual{ position:relative; flex:1; overflow:hidden; }
.pcard-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.pcard.clickable{ cursor:pointer; }
.pcard-open{ position:absolute; top:18px; right:18px; z-index:4; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  background:rgba(8,8,14,.6); border:1px solid rgba(255,255,255,.32); color:#fff; padding:8px 14px; border-radius:30px;
  backdrop-filter:blur(7px); opacity:0; transform:translateY(-5px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.pcard.clickable:hover .pcard-open{ opacity:1; transform:none; }
.hcard.clickable{ cursor:pointer; }
.pcard-scene{ position:absolute; inset:0; }
.pcard-scene::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.4px); background-size:14px 14px;
  mask-image:linear-gradient(160deg,#000,transparent 75%); -webkit-mask-image:linear-gradient(160deg,#000,transparent 75%); }
/* abstract UI mockup */
.mock{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:min(78%,640px); aspect-ratio:16/9.6;
  background:rgba(11,12,16,.86); border:1px solid var(--bd); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.7); backdrop-filter:blur(6px); display:flex; flex-direction:column; }
.mock-bar{ height:34px; flex:none; display:flex; align-items:center; gap:6px; padding:0 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--bd); }
.mock-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.mock-bar .mb-grow{ flex:1; }
.mock-bar em{ height:9px; width:120px; border-radius:5px; background:rgba(255,255,255,.10); font-style:normal; }
.mock-main{ flex:1; display:flex; min-height:0; }
.mock-side{ width:74px; flex:none; border-right:1px solid var(--bd); padding:12px 10px; display:flex; flex-direction:column; gap:9px; }
.mock-side i{ height:9px; border-radius:5px; background:rgba(255,255,255,.12); }
.mock-side i:first-child{ background:var(--accentc); opacity:.9; }
.mock-content{ flex:1; padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; grid-auto-rows:minmax(0,1fr); }
.mock-content i{ border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--bd); }
.mock-content i.wide{ grid-column:1/-1; }
.mock-content i.accent{ background:linear-gradient(135deg,var(--accentc),transparent); border-color:transparent; }
.pcard-info{ flex:none; background:#000; padding:clamp(20px,3vw,34px) clamp(22px,3.4vw,42px) clamp(24px,3.4vw,38px); border-top:1px solid var(--bd); }
.pcard-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.pcard-tags span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--bd); padding:6px 12px; border-radius:30px; }
.pcard-tags span.k{ color:var(--cyan); border-color:rgba(99,215,255,.4); }
.pcard-name{ font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:-.01em; line-height:1.05; }
.pcard-desc{ margin-top:12px; max-width:760px; color:var(--muted); font-size:clamp(14px,1.3vw,17px); }
.pcard-foot{ margin-top:20px; display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--bd); }
.pcard-role{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--text); }
.pcard-role i{ display:block; font-style:normal; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.pcard-impact{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--cyan);
  position:relative; padding-left:16px; }
.pcard-impact::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

/* ============================================================
   FOCUS AREAS
============================================================ */
.focus{ position:relative; background:var(--bg0); padding:clamp(80px,12vh,140px) clamp(20px,4vw,56px); }
.focus-head{ max-width:var(--maxw); margin:0 auto; }
.focus-grid{ max-width:var(--maxw); margin:clamp(38px,6vh,60px) auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fcard{ position:relative; padding:30px 28px 32px; border:1px solid var(--bd); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:opacity .9s var(--ease), transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.fcard::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:linear-gradient(90deg,var(--cyan),transparent); transition:width .55s var(--ease); }
.fcard:hover{ border-color:rgba(99,215,255,.42); transform:translateY(-5px); background:linear-gradient(180deg,rgba(99,215,255,.06),rgba(255,255,255,.012)); }
.fcard:hover::before{ width:100%; }
.fcard-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--cyan); }
.fcard-t{ margin-top:18px; font-size:clamp(18px,1.7vw,22px); font-weight:800; letter-spacing:-.01em; color:var(--text); line-height:1.18; }
.fcard-d{ margin-top:11px; font-size:14.5px; line-height:1.62; color:var(--muted); text-wrap:pretty; }
@media (max-width:1024px){ .focus-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .focus-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT
============================================================ */
.about{ position:relative; background:linear-gradient(180deg,var(--bg0),var(--bg1)); padding:clamp(80px,12vh,150px) clamp(20px,4vw,56px); overflow:hidden; }
.about-glow{ position:absolute; left:18%; top:30%; width:60vmax; height:60vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(47,123,255,.14),rgba(99,215,255,.06) 42%,transparent 70%); filter:blur(20px); pointer-events:none; }
.about-grid{ position:relative; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,400px) 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-portrait{ position:relative; }
.about-arrow{ position:absolute; top:-30px; right:-46px; z-index:3; width:104px; color:var(--cyan);
  display:flex; flex-direction:column; align-items:flex-end; gap:3px; opacity:0; transform:translateY(8px);
  transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; animation:arrowBob 4.5s var(--ease) infinite; }
.reveal.in .about-arrow, .in.about-portrait .about-arrow{ opacity:.85; transform:none; }
.about-portrait.in .about-arrow{ opacity:.85; transform:none; }
.about-arrow svg{ width:104px; height:auto; display:block; filter:drop-shadow(0 0 10px currentColor); }
.about-arrow em{ font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); text-shadow:0 0 12px rgba(99,215,255,.5); }
@keyframes arrowBob{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(4px,-4px) rotate(3deg); } }
.portrait-card{ position:relative; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  transform:rotate(-1.6deg); box-shadow:0 40px 90px -34px rgba(0,0,0,.8); aspect-ratio:4/4.5; max-width:400px; }
.portrait-card img{ width:100%; height:100%; object-fit:cover; }
.portrait-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(3,3,5,.86)); }
.portrait-cap{ position:absolute; left:22px; bottom:20px; z-index:2; font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; }
.portrait-cap b{ display:block; font-size:13px; font-weight:700; }
.portrait-cap span{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.about-title{ font-size:clamp(32px,4.6vw,56px); font-weight:800; line-height:1.02; letter-spacing:-.01em; }
.about-title .emoji{ opacity:.55; }
.about-lede{ margin-top:24px; font-size:clamp(18px,1.9vw,24px); font-weight:600; line-height:1.4; max-width:620px; }
.about-body{ margin-top:16px; color:var(--muted); font-size:clamp(15px,1.4vw,17px); max-width:600px; }
.experience{ margin-top:30px; border-left:2px solid rgba(99,215,255,.4); padding-left:22px; }
.exp-title{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.exp-row{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--bd); }
.exp-row .r-role{ font-weight:700; font-size:clamp(14px,1.2vw,16px); }
.exp-row .r-co{ color:var(--muted); font-size:13px; }
.exp-row .r-note{ display:block; margin-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); }
.exp-row .r-dur{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--faint); white-space:nowrap; }

/* ============================================================
   EXPLORATIONS — pinned center + parallax columns
============================================================ */
.explore{ position:relative; min-height:300vh; background:var(--bg1); }
/* Layer 1 — pinned center */
.explore-pin{ position:sticky; top:0; height:100vh; z-index:25; display:grid; place-items:center;
  text-align:center; padding:0 clamp(20px,4vw,56px); pointer-events:none; }
.explore-pin-inner{ max-width:760px; }
.explore-pin-inner > *{ pointer-events:auto; }
.el-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--blue); margin-bottom:26px; }
.explore-head{ font-size:clamp(40px,7vw,88px); font-weight:800; line-height:1.0; letter-spacing:-.02em; }
.explore-head em{ font-style:italic; font-weight:500; color:var(--cyan); text-shadow:0 0 30px rgba(99,215,255,.4); }
.explore-sub{ margin:0 auto; max-width:720px; font-size:clamp(26px,3.5vw,46px); font-weight:600; line-height:1.18; letter-spacing:-.01em;
  color:var(--text); text-shadow:0 6px 40px rgba(3,3,5,.85); }
.explore-sub::after{ content:""; }
.explore-btn{ display:inline-block; margin-top:34px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text); border:1px solid var(--bd2); padding:14px 26px; border-radius:34px;
  transition:border-color .35s var(--ease), transform .35s var(--spring), background .35s var(--ease); }
.explore-btn:hover{ border-color:var(--cyan); background:rgba(99,215,255,.06); transform:translateY(-2px); }

/* Layer 2 — parallax columns */
.explore-cols{ position:absolute; inset:0; z-index:15; padding:62vh clamp(20px,4vw,56px) 30vh; pointer-events:none; }
.explore-colgrid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,9vw,160px); align-items:start; }
.explore-col{ display:flex; flex-direction:column; gap:clamp(56px,12vh,150px); will-change:transform; }
.explore-col.right{ margin-top:clamp(140px,28vh,360px); }
.gcard{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:1/1; width:100%; max-width:320px; margin:0 auto; cursor:default; pointer-events:auto;
  border:1px solid var(--bd); box-shadow:0 36px 70px -30px rgba(0,0,0,.8); transition:transform .5s var(--spring), box-shadow .5s var(--ease); }
.gcard::before, .gcard::after{ display:none; }
.gcard .g-slot{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.gcard .g-shade{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6)); }
.gcard:hover{ transform:rotate(0deg) translateY(-8px) scale(1.02) !important; box-shadow:0 50px 90px -30px rgba(0,0,0,.85); }
.gcard .g-meta{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; pointer-events:none; }
.gcard .g-idx{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; opacity:.8; }
.gcard .g-title{ font-size:clamp(18px,2vw,24px); font-weight:800; line-height:1.12; margin-top:6px; letter-spacing:-.01em; }
.gcard .g-plus{ position:absolute; top:18px; right:20px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; font-size:18px; opacity:0; transform:scale(.8); transition:.35s var(--spring); }
.gcard:hover .g-plus{ opacity:1; transform:none; }

/* ============================================================
   STATS
============================================================ */
.stats{ background:linear-gradient(180deg,var(--bg1),#04060e); padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px); }
.stats-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px); }
.stat{ border-top:1px solid var(--bd2); padding-top:22px; }
.stat .s-num{ font-size:clamp(40px,6vw,76px); font-weight:800; line-height:1; letter-spacing:-.02em;
  color:#dfe9ff; text-shadow:0 0 30px rgba(99,215,255,.18); }
.stat .s-label{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:14px; }

/* ============================================================
   CONTACT
============================================================ */
.contact{ position:relative; background:#04050a; padding:clamp(80px,12vh,150px) clamp(20px,4vw,56px) 0; overflow:hidden; }
.contact-glow{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 30%, rgba(47,123,255,.18), transparent 70%),
    radial-gradient(36% 46% at 78% 40%, rgba(139,92,255,.16), transparent 72%),
    radial-gradient(30% 40% at 55% 78%, rgba(255,93,177,.12), transparent 72%);
  filter:blur(16px); animation:glowShift 16s ease-in-out infinite; }
@keyframes glowShift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(0,-2%) scale(1.06);} }
.contact-inner{ position:relative; max-width:var(--maxw); margin:0 auto; text-align:center; }
.avail{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--bd); padding:10px 18px; border-radius:30px; }
.avail-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.55); animation:pulse 2.4s ease-out infinite; }
.contact-title{ margin:28px auto 0; font-size:clamp(34px,5.6vw,72px); font-weight:800; line-height:1.04; letter-spacing:-.01em; max-width:16ch; }
.contact-sub{ margin:20px auto 0; max-width:540px; color:var(--muted); font-size:clamp(15px,1.5vw,18px); }
.contact-cta{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.btn-primary{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; background:#fff; color:#04060d;
  padding:16px 30px; border-radius:34px; transition:transform .35s var(--spring), background .35s var(--ease); }
.btn-primary:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.btn-ghost{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  padding:16px 30px; border-radius:34px; border:1px solid var(--bd2); transition:border-color .35s var(--ease), transform .35s var(--spring); }
.btn-ghost:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.footer{ position:relative; max-width:var(--maxw); margin:clamp(70px,10vh,120px) auto 0; padding:28px 0 36px; border-top:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-role{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s var(--ease); }
.foot-links a:hover{ color:var(--cyan); }
.foot-copy{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--faint); }

/* ============================================================
   LIGHTBOX
============================================================ */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,5,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lightbox.open{ display:flex; }
.lightbox-card{ width:min(720px,92vw); aspect-ratio:16/10; border-radius:28px; overflow:hidden; position:relative;
  border:1px solid var(--bd2); box-shadow:0 50px 100px -30px rgba(0,0,0,.9); transform:scale(.94); transition:transform .4s var(--spring); }
.lightbox.open .lightbox-card{ transform:none; }
.lightbox-card .lb-meta{ position:absolute; left:28px; bottom:26px; right:28px; z-index:2; }
.lightbox-card .lb-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; opacity:.85; }
.lightbox-card .lb-title{ font-size:clamp(22px,3vw,34px); font-weight:800; margin-top:8px; line-height:1.1; }
.lightbox-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6)); }
.lightbox-close{ position:absolute; top:22px; right:24px; z-index:3; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--bd); color:#fff; font-size:18px; cursor:pointer; transition:background .3s var(--ease); }
.lightbox-close:hover{ background:rgba(255,255,255,.18); }

/* ============================================================
   CONTACT MODAL
============================================================ */
.cmodal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,5,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.cmodal.open{ display:flex; animation:cmFade .3s var(--ease); }
@keyframes cmFade{ from{ opacity:0; } to{ opacity:1; } }
.cmodal-card{ position:relative; width:min(460px,92vw); border-radius:26px; padding:40px 34px 34px;
  background:linear-gradient(165deg,rgba(18,19,26,.96),rgba(8,8,12,.97));
  border:1px solid var(--bd2); box-shadow:0 50px 100px -30px rgba(0,0,0,.9), 0 0 60px -24px rgba(99,215,255,.4);
  transform:scale(.92) translateY(10px); opacity:0; transition:transform .42s var(--spring), opacity .3s var(--ease); overflow:hidden; }
.cmodal-card::before{ content:""; position:absolute; left:0; top:0; right:0; height:120px; pointer-events:none;
  background:radial-gradient(120% 100% at 80% 0%, rgba(139,92,255,.22), transparent 70%); }
.cmodal.open .cmodal-card{ transform:none; opacity:1; }
.cmodal-close{ position:absolute; top:18px; right:18px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--bd); color:#fff; font-size:15px; cursor:pointer; transition:background .3s var(--ease); }
.cmodal-close:hover{ background:rgba(255,255,255,.18); }
.cmodal-eyebrow{ position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.cmodal-title{ position:relative; font-size:30px; font-weight:800; letter-spacing:-.01em; line-height:1.05; color:var(--text); }
.cmodal-sub{ position:relative; margin-top:12px; color:var(--muted); font-size:15px; max-width:340px; }
.cmodal-rows{ position:relative; margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.cmodal-row{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--bd); transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--spring); }
.cmodal-row:hover{ background:rgba(255,255,255,.07); border-color:var(--bd2); transform:translateY(-2px); }
.cmodal-ico{ flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(99,215,255,.1); border:1px solid rgba(99,215,255,.28); color:var(--cyan); }
.cmodal-ico svg{ width:20px; height:20px; }
.cmodal-rt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cmodal-rt i{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.cmodal-rt b{ font-weight:600; font-size:15px; color:var(--text); letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmodal-arrow{ flex:none; font-size:16px; color:var(--muted); transition:color .3s var(--ease), transform .3s var(--spring); }
.cmodal-row:hover .cmodal-arrow{ color:var(--cyan); transform:translate(2px,-2px); }
@media (max-width:520px){
  .cmodal-card{ padding:34px 22px 26px; }
  .cmodal-title{ font-size:26px; }
  .cmodal-rt b{ font-size:13.5px; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px){
  .nav{ grid-template-columns:auto 1fr; gap:14px; }
  .clock{ display:none; }
  .navlink{ display:none; }
  .nav-right{ gap:14px; }
  .deck{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:380px; }
  .hcard{ position:relative; left:auto; top:auto; width:100%; transform:none !important; }
  .hcard-face{ animation:none !important; }
  .hcard .c-tags{ opacity:1; transform:none; }
  .hcard .c-arrow{ opacity:.95; transform:none; }
  .stack{ height:auto; }
  .stack-sticky{ position:static; height:auto; display:block; }
  .stack-cards{ position:static; width:100%; height:auto; display:flex; flex-direction:column; gap:24px; }
  .pcard{ position:relative; inset:auto; transform:none !important; height:auto; border-radius:28px; }
  .pcard-visual{ aspect-ratio:16/11; flex:none; }
  .about-grid{ grid-template-columns:1fr; }
  .portrait-card{ max-width:360px; margin:0 auto; }
  .about-arrow{ display:none; }
  .exp-row{ grid-template-columns:1fr; gap:4px; }
  .exp-row .r-dur{ margin-top:2px; }
  .gallery{ grid-template-columns:1fr; }
  .explore{ min-height:auto; }
  .explore-pin{ position:static; height:auto; padding:clamp(60px,9vh,110px) clamp(20px,4vw,56px) clamp(30px,5vh,50px); }
  .explore-cols{ position:static; inset:auto; padding:0 clamp(20px,4vw,56px) clamp(60px,9vh,110px); }
  .explore-colgrid{ grid-template-columns:1fr; gap:24px; }
  .explore-col{ gap:24px; }
  .explore-col.right{ margin-top:24px; }
  .explore-col,[id="galCol1"],[id="galCol2"]{ transform:none !important; }
  .gcard{ transform:none !important; max-width:420px; }
  .stats-grid{ grid-template-columns:1fr; gap:8px; }
  .footer{ justify-content:center; text-align:center; }
}
/* ============================================================
   PROJECT PREVIEW MODAL
============================================================ */
.preview{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.preview.open{ opacity:1; pointer-events:auto; }
.preview-backdrop{ position:absolute; inset:0; background:rgba(3,3,6,.72); backdrop-filter:blur(8px); }
.preview-card{ position:relative; z-index:1; width:min(560px,100%); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg,#0e0e15,#0a0a10); border:1px solid var(--bd2); border-radius:28px;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(18px) scale(.97); opacity:0; transition:transform .42s var(--spring), opacity .3s var(--ease); }
.preview.open .preview-card{ transform:none; opacity:1; }
.preview-x{ position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--bd2); background:rgba(8,8,14,.55); color:#fff; font-size:14px; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:background .25s, transform .25s; }
.preview-x:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }
.preview-visual{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:28px 28px 0 0;
  background:radial-gradient(120% 130% at 30% 0%, color-mix(in srgb, var(--pc) 36%, transparent), #07070c); }
.preview-visual.nofill{ aspect-ratio:16/7; }
.preview-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.preview-body{ padding:24px clamp(22px,4vw,32px) clamp(26px,4vw,32px); }
.preview-meta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }
.preview-k{ color:var(--pc); }
.preview-yr{ color:var(--faint); }
.preview-title{ margin-top:12px; font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--text); }
.preview-tags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.preview-tags span{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--bd); border-radius:30px; padding:5px 11px; }
.preview-desc{ margin-top:16px; font-size:15px; line-height:1.62; color:var(--muted); text-wrap:pretty; }
.preview-impact{ margin-top:18px; position:relative; padding-left:18px; font-family:var(--mono); font-size:13px; color:var(--text); }
.preview-impact::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--pc); box-shadow:0 0 10px var(--pc); }
.preview-cta{ margin-top:24px; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:#06060a; font-weight:700;
  background:var(--pc); padding:13px 22px; border-radius:30px; transition:transform .25s var(--spring), box-shadow .25s; }
.preview-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px color-mix(in srgb, var(--pc) 40%, transparent); }
.preview-note{ margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--muted); text-wrap:pretty;
  border:1px solid var(--bd); border-radius:14px; padding:13px 15px; background:rgba(255,255,255,.025); }
.preview-note b{ color:var(--text); font-weight:700; }
.preview-card.locked .preview-impact{ display:none; }

@media (min-width:1500px){ .pcard{ border-radius:60px; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .headline .ln>span{ transform:none !important; filter:none !important; opacity:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

#seo-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}