:root { --bg:#060606; --surface:#101010; --surface-2:#151515; --line:rgba(255,255,255,.13); --text:#f6f4ee; --muted:#999892; --acid:#d8ff56; --purple:#a88dff; --shell:min(1180px, calc(100% - 48px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:Manrope, sans-serif; margin:0; overflow-x:hidden; }
button, a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.shell { margin-inline:auto; width:var(--shell); }
.page-glow { background:radial-gradient(circle, rgba(168,141,255,.12), transparent 58%); filter:blur(12px); height:650px; left:50%; pointer-events:none; position:absolute; top:-325px; transform:translateX(-50%); width:900px; }
.noise { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); inset:0; opacity:.035; pointer-events:none; position:fixed; z-index:10; }
.site-header { align-items:center; display:flex; justify-content:space-between; padding:25px 0; position:relative; z-index:2; }
.brand { align-items:center; display:flex; font-family:"Space Grotesk",sans-serif; font-size:1rem; font-weight:700; gap:9px; letter-spacing:-.04em; }
.brand-mark { align-items:center; background:var(--text); border-radius:50%; color:#070707; display:inline-flex; font-size:.74rem; height:27px; justify-content:center; letter-spacing:0; width:27px; }
.muted-dot { color:var(--acid); }
.main-nav { align-items:center; display:flex; gap:27px; font-size:.78rem; font-weight:700; }
.main-nav>a:not(.mentor-nav) { color:#c3c2bd; transition:color .2s ease; }
.main-nav>a:not(.mentor-nav):hover { color:var(--text); }
.mentor-nav { border:1px solid var(--line); border-radius:999px; padding:10px 14px; }
.mentor-nav span { color:var(--acid); margin-left:6px; }
.menu-toggle { display:none; }
.hero { min-height:690px; padding:100px 0 50px; position:relative; }
.eyebrow { color:var(--acid); font-family:"DM Mono",monospace; font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.hero-grid { align-items:center; display:grid; gap:50px; grid-template-columns:1.15fr .85fr; margin-top:35px; }
h1,h2,h3,p { margin:0; }
.hero h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(3.5rem,7.4vw,6.8rem); font-weight:600; letter-spacing:-.075em; line-height:.93; }
em { color:var(--purple); font-style:normal; }
.hero-copy { color:var(--muted); font-size:1rem; line-height:1.75; margin-top:29px; max-width:470px; }
.hero-actions { align-items:center; display:flex; gap:24px; margin-top:35px; }
.button { align-items:center; display:inline-flex; gap:20px; font-size:.78rem; font-weight:800; padding:14px 17px; }
.button-primary { background:var(--acid); color:#111; }
.button-primary span { font-size:1.1rem; }
.text-link { border-bottom:1px solid rgba(255,255,255,.4); font-size:.77rem; font-weight:700; padding-bottom:5px; }
.hero-orbit { aspect-ratio:1; margin:auto; max-width:380px; position:relative; width:100%; }
.orbit-ring { border:1px solid rgba(255,255,255,.2); border-radius:50%; inset:13%; position:absolute; }
.ring-two { border-color:rgba(168,141,255,.48); inset:27%; }
.orbit-center { align-items:center; background:#f5f3ee; border-radius:50%; color:#0a0a0a; display:flex; flex-direction:column; font-family:"Space Grotesk"; font-size:2rem; font-weight:700; height:30%; justify-content:center; left:35%; letter-spacing:-.08em; position:absolute; top:35%; width:30%; }
.orbit-center small { font-family:"DM Mono"; font-size:.45rem; letter-spacing:.1em; margin-top:4px; }
.orbit-label { font-family:"DM Mono"; font-size:.56rem; letter-spacing:.15em; position:absolute; }
.label-one { left:0; top:26%; transform:rotate(-30deg); }.label-two { bottom:19%; right:0; transform:rotate(26deg); }
.orbit-pip { background:var(--acid); border-radius:50%; height:10px; position:absolute; width:10px; }.pip-one { left:12%; top:15%; }.pip-two { bottom:11%; right:18%; }
.hero-meta { align-items:center; color:var(--muted); display:flex; font-family:"DM Mono"; font-size:.61rem; gap:14px; letter-spacing:.06em; margin-top:54px; text-transform:uppercase; }.line { background:var(--line); height:1px; width:75px; }
.projects-section { padding:120px 0; }.section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:38px; }.section-heading h2,.about-panel h2,.contact-section h2 { font-family:"Space Grotesk"; font-size:clamp(2.3rem,4.5vw,4.6rem); font-weight:600; letter-spacing:-.075em; line-height:.98; margin-top:13px; }.section-heading p { color:var(--muted); font-size:.88rem; line-height:1.7; max-width:300px; }
.project-filters { display:flex; gap:8px; margin-bottom:22px; }.filter { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.68rem; font-weight:700; padding:9px 13px; }.filter.is-active,.filter:hover { background:var(--text); border-color:var(--text); color:#090909; }
.projects-empty { align-items:flex-start; background:linear-gradient(135deg,#111,#0b0b0b); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; min-height:280px; padding:28px; }.projects-empty span { color:var(--acid); font-family:"DM Mono"; font-size:.62rem; letter-spacing:.12em; }.projects-empty p { font-family:"Space Grotesk"; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.06em; line-height:1.05; margin-top:12px; max-width:360px; }
.chatbot-project { min-height:390px; }.preview-chatbot { background:radial-gradient(circle at 80% 10%,rgba(168,141,255,.28),transparent 34%),linear-gradient(135deg,#17142a,#0b0b11); padding:18px; }.chatbot-preview-head { align-items:center; border-bottom:1px solid rgba(255,255,255,.12); display:flex; gap:8px; padding-bottom:12px; }.chatbot-preview-head span { background:var(--acid); border-radius:50%; box-shadow:0 0 16px var(--acid); height:7px; width:7px; }.chatbot-preview-head b { font-family:"Space Grotesk"; font-size:.72rem; }.chatbot-preview-head i { color:#9f9d98; font-family:"DM Mono"; font-size:.52rem; font-style:normal; margin-left:auto; }.chatbot-preview-body { display:flex; flex-direction:column; gap:12px; padding:27px 6% 0; }.chatbot-bubble { border-radius:13px; font-size:clamp(.61rem,1.25vw,.78rem); line-height:1.45; margin:0; max-width:68%; padding:11px 13px; }.chatbot-bubble.bot { align-self:flex-start; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.1); }.chatbot-bubble.user { align-self:flex-end; background:var(--purple); color:#171123; font-weight:700; }.chatbot-bubble.small { color:#d8ff56; }
.projects-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }.project-card { background:var(--surface); border:1px solid var(--line); min-height:350px; overflow:hidden; padding:17px; position:relative; transition:transform .35s ease,border-color .35s ease; }.project-card:hover { border-color:rgba(216,255,86,.7); transform:translateY(-5px); }.project-card.featured { grid-column:span 2; min-height:430px; }.project-number { color:var(--muted); font-family:"DM Mono"; font-size:.6rem; letter-spacing:.1em; position:absolute; right:17px; top:17px; z-index:2; }
.preview { background:#0a0a0a; height:calc(100% - 68px); overflow:hidden; position:relative; }.project-card.featured .preview { height:330px; }.project-copy { align-items:center; bottom:17px; display:flex; justify-content:space-between; left:17px; position:absolute; right:17px; }.project-copy h3 { font-family:"Space Grotesk"; font-size:1.3rem; letter-spacing:-.05em; }.project-copy p { color:var(--muted); font-size:.66rem; margin-top:3px; }.open-project { background:transparent; border:1px solid var(--line); border-radius:50%; color:var(--text); font-size:1.1rem; height:38px; width:38px; }
.preview-top { align-items:center; background:#151515; color:#74736e; display:flex; font-family:"DM Mono"; font-size:.5rem; gap:5px; height:29px; padding:0 10px; }.preview-top i { background:#44433e; border-radius:50%; height:5px; width:5px; }.preview-top span { margin-left:6px; }.dashboard-body { display:grid; gap:12px; grid-template-columns:50px 1fr 140px; height:calc(100% - 29px); padding:14px; }.dashboard-body aside { border-right:1px solid #262626; display:flex; flex-direction:column; gap:12px; padding:8px; }.dashboard-body aside b { background:#383838; border-radius:2px; height:7px; width:19px; }.chart,.metric { background:#121212; border:1px solid #262626; padding:15px; }.chart-title { color:#aaa; font-size:.63rem; }.chart-bars { align-items:end; display:flex; gap:8px; height:76%; padding-top:15px; }.chart-bars i { background:linear-gradient(180deg,var(--purple),#403170); flex:1; height:var(--h,50%); }.chart-bars i:nth-child(1){--h:32%}.chart-bars i:nth-child(2){--h:61%}.chart-bars i:nth-child(3){--h:43%}.chart-bars i:nth-child(4){--h:78%}.chart-bars i:nth-child(5){--h:58%}.chart-bars i:nth-child(6){--h:88%}.chart-bars i:nth-child(7){--h:70%}.metric { display:flex; flex-direction:column; justify-content:center; }.metric small,.metric span { color:#83827d; font-family:"DM Mono"; font-size:.55rem; }.metric strong { font-family:"Space Grotesk"; font-size:2.1rem; letter-spacing:-.08em; margin:8px 0; }.metric span { color:var(--acid); }
.preview-code { background:linear-gradient(125deg,#17162b,#0c0c11); padding:17% 12%; }.code-tab { color:#aaa; display:flex; font-family:"DM Mono"; font-size:.55rem; justify-content:space-between; }.code-tab i { background:var(--acid); border-radius:50%; height:7px; width:7px; }.preview-code code { color:#cbc8c0; display:block; font-family:"DM Mono"; font-size:clamp(.6rem,1.2vw,.8rem); line-height:2.1; margin-top:17px; }.preview-code b { color:#9c8cff; }.preview-code span { color:#efaa76; }.preview-code em { color:#8edca2; }.preview-code i { color:#73beee; }.cursor { animation:blink .9s infinite; background:var(--acid); bottom:25%; height:16px; left:48%; position:absolute; width:2px; } @keyframes blink {50%{opacity:0}}
.preview-orbit { background:radial-gradient(circle at center,#27184c 0 4%,#121019 5% 18%,#080808 19%); }.preview-orbit>div { align-items:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:var(--acid); display:flex; font-family:"Space Grotesk"; font-size:2rem; height:44px; justify-content:center; left:calc(50% - 22px); position:absolute; top:calc(50% - 22px); width:44px; }.orb { border:1px solid rgba(168,141,255,.52); border-radius:50%; height:25%; left:37.5%; position:absolute; top:37.5%; width:25%; }.o1{animation:orbit 8s linear infinite; transform:translateX(130px)}.o2{animation:orbit 5s linear reverse infinite; transform:translateX(-95px)}.o3{animation:orbit 9s linear infinite; transform:translateY(-78px)}.o4{animation:orbit 6s linear reverse infinite; transform:translateY(93px);background:var(--acid);height:7px;width:7px}@keyframes orbit{to{rotate:360deg}}
.preview-editorial { background:#d8ff56; color:#090909; padding:11% 12%; }.preview-editorial span { font-family:"DM Mono"; font-size:.55rem; letter-spacing:.1em; }.preview-editorial strong { display:block; font-family:"Space Grotesk"; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.1em; line-height:.86; margin-top:15px; }.preview-editorial em { color:#3c2678; }.preview-editorial i { background:#0b0b0b; border-radius:50%; bottom:-40px; height:120px; position:absolute; right:-10px; width:120px; }
.about-section { padding:40px 0 120px; }.about-panel { background:var(--surface-2); border:1px solid var(--line); padding:clamp(30px,7vw,80px); }.about-panel h2 { max-width:850px; }.about-panel p { color:var(--muted); font-size:.94rem; line-height:1.8; margin-top:29px; max-width:570px; }.skill-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:35px; }.skill-list span { border:1px solid var(--line); border-radius:999px; color:#d0cec6; font-family:"DM Mono"; font-size:.62rem; padding:9px 11px; }
.contact-section { border-top:1px solid var(--line); padding:110px 0 95px; }.contact-section h2 { margin:15px 0 35px; }.contact-link { border-bottom:1px solid var(--acid); color:var(--acid); display:inline-block; font-size:clamp(1rem,2.2vw,1.65rem); font-weight:700; padding-bottom:8px; }.contact-link span { margin-left:10px; }.site-footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-family:"DM Mono"; font-size:.59rem; justify-content:space-between; padding:20px 0 30px; }
.project-dialog { background:#121212; border:1px solid rgba(216,255,86,.5); color:var(--text); max-width:570px; padding:45px; width:calc(100% - 36px); }.project-dialog::backdrop { backdrop-filter:blur(8px); background:rgba(0,0,0,.76); }.dialog-close { background:none; border:0; color:var(--text); font-size:1.8rem; position:absolute; right:16px; top:10px; }.dialog-label { color:var(--acid); font-family:"DM Mono"; font-size:.65rem; letter-spacing:.1em; }.project-dialog h2 { font-family:"Space Grotesk"; font-size:3rem; letter-spacing:-.08em; margin:13px 0; }.project-dialog p { color:#b6b4ae; line-height:1.75; }.dialog-tags { display:flex; flex-wrap:wrap; gap:7px; margin:23px 0; }.dialog-tags span { border:1px solid var(--line); font-family:"DM Mono"; font-size:.6rem; padding:7px 9px; }.project-dialog .dialog-note { border-top:1px solid var(--line); color:#85837d; font-size:.72rem; padding-top:17px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (max-width:760px) { :root{--shell:min(100% - 32px,1180px)} .site-header{padding:17px 0}.menu-toggle{background:none;border:0;color:var(--text);display:block;font-size:.72rem;font-weight:800}.menu-toggle span{color:var(--acid);font-size:1.1rem}.main-nav{background:#101010;border:1px solid var(--line);display:none;flex-direction:column;gap:20px;left:16px;padding:22px;position:absolute;right:16px;top:62px;align-items:flex-start}.main-nav.is-open{display:flex}.hero{min-height:auto;padding:80px 0}.hero-grid{grid-template-columns:1fr;margin-top:26px}.hero-orbit{max-width:270px;order:-1}.hero h1{font-size:clamp(3rem,15vw,4.7rem)}.hero-meta{margin-top:60px}.section-heading{align-items:start;flex-direction:column;gap:20px}.projects-section{padding:80px 0}.projects-grid{grid-template-columns:1fr}.project-card.featured{grid-column:auto;min-height:350px}.project-card.featured .preview{height:260px}.dashboard-body{grid-template-columns:35px 1fr}.metric{display:none}.preview{height:260px}.about-section{padding-bottom:80px}.contact-section{padding:80px 0}.project-dialog{padding:36px 25px}.project-dialog h2{font-size:2.5rem} }