/* ==========================================================================
Vrushank Soni — portfolio design system
Tokens, glass material, ambient leaves, and shared components.
Used by index.html and everything under /blog.
========================================================================== */
:root{
--bg: #05070E;
--bg-2: #0A0F1C;
--ink: #EAF1F8;
--ink-dim: rgba(255,255,255,.62);
--ink-faint: rgba(255,255,255,.4);
--leaf-deep: #1B7A4D;
--leaf: #2FD174;
--leaf-bright: #7CFFB2;
--leaf-soft: rgba(47,209,116,.14);
--red-deep: #1E5FBF;
--red: #3B82F6;
--red-bright: #6BA5FF;
--red-soft: rgba(59,130,246,.14);
--orange: #F2A33D;
--amber: #F2C46B;
--sky: #7FC8FF;
--blue: #4C8DFF;
--glass-fill: rgba(255,255,255,.07);
--glass-border: rgba(255,255,255,.14);
--radius-lg: 24px;
--radius-md: 14px;
--ease: cubic-bezier(.16,.84,.44,1);
--font-display: 'Sora', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
[data-theme="light"]{
--bg: #EDF1F8;
--bg-2: #FFFFFF;
--ink: #0D1526;
--ink-dim: rgba(13,21,38,.66);
--ink-faint: rgba(13,21,38,.44);
--glass-fill: rgba(13,21,38,.045);
--glass-border: rgba(13,21,38,.12);
--red-deep:#1D4ED8; --red:#2563EB; --red-bright:#2563EB; --red-soft:rgba(37,99,235,.10);
--leaf-bright:#12915A; --amber:#B4791A;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0; min-height:100vh; position:relative; overflow-x:hidden;
background: radial-gradient(ellipse 70% 45% at 50% -10%, var(--bg-2), var(--bg) 60%);
color:var(--ink); font-family:var(--font-body); line-height:1.5;
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
a:focus-visible, button:focus-visible, summary:focus-visible{
outline:2px solid var(--red-bright); outline-offset:3px; border-radius:6px;
}
.grain{
position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px 180px;
}
/* ---------- ambient leaves (replaces the old glow circle) ---------- */
.ambient-leaves{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; }
.leaf{
position:absolute;
background: radial-gradient(ellipse at 38% 28%, var(--leaf) 0%, var(--leaf-deep) 45%, transparent 72%);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50,2 C88,28 96,74 50,138 C4,74 12,28 50,2 Z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50,2 C88,28 96,74 50,138 C4,74 12,28 50,2 Z'/%3E%3C/svg%3E");
-webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
filter:blur(55px); opacity:.16; will-change:transform;
}
/* ---------- glass ---------- */
.glass{
background: linear-gradient(135deg, rgba(255,255,255,.12), var(--glass-fill) 65%);
backdrop-filter: blur(32px) saturate(175%);
-webkit-backdrop-filter: blur(32px) saturate(175%);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
box-shadow:0 12px 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
position:relative; overflow:hidden;
}
.glass::before{
content:""; position:absolute; inset:-1px; z-index:0;
background: radial-gradient(240px circle at var(--mx,50%) var(--my,10%), rgba(255,255,255,.22), transparent 60%);
opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.glass:hover::before{ opacity:1; }
.glass > *{ position:relative; z-index:1; }
/* window-chrome bar, reused on code panel + dashboard tiles */
.chrome-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--glass-border); }
.chrome-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.chrome-filename{ margin-left:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
/* ---------- nav ---------- */
.navbar{
position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:10;
display:flex; align-items:center; gap:clamp(14px,4vw,36px);
padding:8px 10px 8px 16px; border-radius:999px;
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-mark{ width:20px; height:20px; border-radius:50%; flex:none;
background: radial-gradient(circle at 35% 30%, var(--red-bright), var(--red-deep) 70%);
box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.brand-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--ink-dim); }
.nav-links{ display:flex; gap:18px; }
.nav-links a{ font-size:14px; text-decoration:none; opacity:.82; transition:opacity .25s; }
.nav-links a:hover{ opacity:1; }
.glass-btn{
font-family:var(--font-mono); font-size:12.5px; font-weight:600;
padding:9px 18px; border-radius:999px; text-decoration:none; display:inline-block; white-space:nowrap;
background: linear-gradient(135deg, var(--red-bright), var(--red-deep)); color:#1a0705;
}
.glass-btn.ghost{ background:var(--glass-fill); color:var(--ink); border:1px solid var(--glass-border); }
.glass-btn.placeholder{ background:transparent; color:var(--ink-faint); border:1px dashed var(--glass-border); }
/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; min-height:100svh; z-index:1; padding:150px 6vw 70px;
display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:48px; }
.hero-copy, .hero-panel{ position:relative; z-index:1; }
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-bright); margin:0 0 20px; }
.hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5vw,62px); line-height:1.05; margin:0 0 22px; letter-spacing:0; }
.tagline{ font-size:clamp(16px,1.8vw,20px); color:var(--ink-dim); max-width:32ch; line-height:1.55; }
.hero-panel{ padding:28px 24px 22px; }
.vine-chart{ width:100%; height:auto; display:block; }
.vine-path{ fill:none; stroke:var(--leaf-bright); stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(124,255,178,.55)); }
.node{ fill:var(--ink); opacity:0; filter:drop-shadow(0 0 6px rgba(124,255,178,.7)); }
.panel-foot{ display:flex; align-items:baseline; gap:10px; margin-top:16px; }
.panel-stat{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--leaf-bright); }
.panel-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
/* ---------- marquee (skills + brands) ---------- */
.marquee-wrap{ position:relative; z-index:1; overflow:hidden; padding:36px 0; }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:scrollx 32s linear infinite; }
.marquee-track.slow{ animation-duration:44s; }
.chip{ font-family:var(--font-mono); font-size:13px; white-space:nowrap; padding:10px 20px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass-fill); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
/* ---------- generic section ---------- */
.section{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 6vw; }
.section-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 26px; }
.section-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.4vw,40px); margin:0 0 30px; max-width:20ch; }
/* ---------- experience / education ---------- */
.exp-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.exp-card{ display:flex; align-items:center; gap:14px; padding:20px; }
.exp-mark{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:16px; background:var(--red-soft); color:var(--red-bright); }
.exp-name{ font-weight:600; font-size:15px; }
.exp-role{ font-size:12.5px; color:var(--ink-dim); margin-top:4px; font-family:var(--font-mono); }
.edu-line{ margin-top:18px; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.edu-line b{ color:var(--ink); font-weight:600; }
/* ---------- code panel ---------- */
.code-panel{ max-width:640px; }
.code-block{ padding:18px 20px 22px; font-family:var(--font-mono); font-size:13px; line-height:1.75; overflow-x:auto; }
.code-line{ display:block; white-space:pre; }
.c-kw{ color:var(--leaf-bright); }
.c-str{ color:var(--amber); }
.c-num{ color:var(--sky); }
.c-comment{ color:var(--ink-faint); font-style:italic; }
/* ---------- metrics ---------- */
.metrics-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.metric-card{ padding:28px 24px; }
.metric-num-wrap{ display:flex; align-items:baseline; }
.metric-num{ font-family:var(--font-display); font-weight:700; color:var(--red-bright); }
.metric-suffix{ font-family:var(--font-display); font-weight:700; color:var(--orange); }
.metric-num{ font-size:48px; }
.metric-suffix{ font-size:26px; }
.metric-label{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); }
/* ---------- horizontal-scroll dashboard ---------- */
.hscroll-wrap{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; }
.hscroll-track{ display:flex; gap:18px; width:max-content; }
.hscroll-page{ flex:0 0 min(560px,82vw); scroll-snap-align:center; }
.hscroll-page .dash-placeholder{ padding:64px 20px; text-align:center; }
.hscroll-page .dash-placeholder p{ font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.hscroll-hint{ margin-top:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; }
/* ---------- statement (text-only) ---------- */
.statement-section{ max-width:820px; }
.statement-text{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,3vw,34px); line-height:1.4; }
.statement-text b{ color:var(--red-bright); font-weight:700; }
/* ---------- ventures ---------- */
.ventures-row{ display:flex; flex-wrap:wrap; gap:14px; }
.venture-chip{ padding:16px 20px; min-width:220px; flex:1 1 220px; }
.venture-name{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--red-bright); }
.venture-desc{ font-family:var(--font-mono); font-size:12px; color:var(--blue); margin-top:6px; }
/* ---------- blog teaser + blog index cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.blog-card{ padding:26px; text-decoration:none; display:block; transition:transform .35s var(--ease); }
.blog-card:hover{ transform:translateY(-4px); }
.blog-tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--red-bright); text-transform:uppercase; letter-spacing:.08em; }
.blog-title{ font-family:var(--font-display); font-weight:700; font-size:20px; margin-top:12px; line-height:1.3; }
.blog-excerpt{ font-size:13.5px; color:var(--ink-dim); margin-top:10px; line-height:1.6; }
/* ---------- contact ---------- */
.contact-section{ text-align:center; padding-top:50px; padding-bottom:60px; }
.contact-line{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4vw,42px); margin-bottom:26px; }
.contact-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.contact-note{ margin-top:18px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
footer.footer-note{ position:relative; z-index:1; text-align:center; padding:0 6vw 60px;
font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
/* ---------- article (blog post) typography ---------- */
.article-header{ max-width:760px; margin:0 auto; padding:150px 6vw 20px; position:relative; z-index:1; }
.article-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-bright); }
.article-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.6vw,50px); line-height:1.12; margin:18px 0 16px; }
.article-meta{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.article-body{ max-width:760px; margin:0 auto; padding:20px 6vw 10px; position:relative; z-index:1; font-size:16px; line-height:1.75; }
.article-body p{ margin:0 0 20px; color:var(--ink-dim); }
.article-body h2{ font-family:var(--font-display); font-size:24px; margin:44px 0 16px; color:var(--ink); }
.article-body h3{ font-family:var(--font-display); font-size:18px; margin:28px 0 12px; color:var(--ink); }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:22px; color:var(--ink-dim); }
.article-body li{ margin-bottom:8px; }
.article-body strong{ color:var(--ink); }
.article-body a{ color:var(--red-bright); text-decoration-color: rgba(255,107,87,.4); }
.callout{ padding:22px 24px; margin:28px 0; }
.callout p{ margin:0; color:var(--ink); font-size:14.5px; }
.faq-section{ max-width:760px; margin:10px auto 0; padding:20px 6vw 60px; position:relative; z-index:1; }
.faq-item{ padding:6px 22px; margin-bottom:12px; }
.faq-item summary{ cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:15.5px; padding:14px 0; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; float:right; color:var(--orange); font-family:var(--font-mono); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding-bottom:16px; color:var(--ink-dim); font-size:14.5px; line-height:1.7; }
.article-links{ max-width:760px; margin:0 auto; padding:0 6vw 70px; position:relative; z-index:1; }
.article-links .section-label{ margin-bottom:14px; }
.link-row{ display:flex; flex-wrap:wrap; gap:10px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); text-decoration:none; }
.back-link:hover{ color:var(--ink); }
/* ---------- responsive ---------- */
@media (max-width:860px){
.hero{ grid-template-columns:1fr; padding-top:120px; }
.nav-links{ display:none; }
.exp-row, .metrics-grid, .blog-grid{ grid-template-columns:1fr; }
.article-header, .article-body, .faq-section, .article-links{ padding-left:7vw; padding-right:7vw; }
}
@media (prefers-reduced-motion: reduce){
.marquee-track{ animation:none !important; }
}
/* ==========================================================================
v4 additions — clickable brands, pile cards, hero terminal, reviews,
author bio, in-article mockups
========================================================================== */
/* brand chips as real links */
a.chip{ text-decoration:none; cursor:pointer; transition:transform .25s var(--ease), background .25s; }
a.chip:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); }
/* hero panel reused as a terminal / code panel — neutralise the plain hero-panel box model */
.hero-panel.code-panel{ padding:0; max-width:none; }
.cursor-blink{ display:inline-block; width:8px; height:15px; background:var(--leaf-bright); margin-left:2px; vertical-align:-2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor-blink{ animation:none; opacity:1; } }
/* section intro copy (used under a section-label for a proper written intro) */
.section-intro{ font-size:15.5px; color:var(--ink-dim); max-width:62ch; line-height:1.7; margin:-10px 0 30px; }
/* plain-language caption under technical panels */
.plain-caption{ margin-top:14px; font-size:13px; color:var(--ink-dim); line-height:1.6; max-width:52ch; }
.plain-caption b{ color:var(--ink); }
/* pile-shape card: a stacked pair of glass panels, reused for skills + blog teasers */
.pile-wrap{ position:relative; }
.pile-back{ position:absolute; inset:0; transform:rotate(-4deg) translate(-10px,10px); opacity:.32; z-index:0; }
.pile-front{ position:relative; z-index:1; padding:26px 24px; }
.knowledge-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 20px; }
.pile-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
background:var(--leaf-soft); color:var(--leaf-bright); font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:14px; }
.pile-title{ font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:8px; }
.pile-desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; }
.pile-tools{ margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); line-height:1.7; }
/* reviews */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card{ padding:26px 24px; }
.review-quote{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:14.5px; line-height:1.6; color:var(--ink-dim); }
.review-attrib{ margin-top:16px; font-family:var(--font-mono); font-size:11.5px; color:var(--red-bright); }
/* author / "let's connect" box on blog posts */
.author-box{ max-width:760px; margin:36px auto 0; padding:28px 26px; position:relative; z-index:1;
display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.author-avatar{ width:46px; height:46px; border-radius:50%; flex:none;
background:radial-gradient(circle at 35% 30%, var(--red-bright), var(--red-deep) 70%); }
.author-name{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.author-bio{ font-size:13.5px; color:var(--ink-dim); margin-top:6px; max-width:46ch; line-height:1.6; }
.author-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
/* small in-article tool-style mockups */
.mini-mockup{ margin:30px 0; max-width:100%; }
.mini-mockup .chrome-bar{ padding:11px 14px; }
.mini-mockup-body{ padding:18px 20px; }
.mockup-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--glass-border); font-family:var(--font-mono); font-size:12px; }
.mockup-row:last-child{ border-bottom:none; }
.mockup-label{ color:var(--ink-faint); }
.mockup-value{ color:var(--orange); font-weight:600; text-align:right; }
@media (max-width:860px){
.knowledge-grid, .reviews-grid{ grid-template-columns:1fr; }
}
/* ==========================================================================
v5 additions — iOS-style traffic-light dots, plain square skill boxes,
horizontal review + findings sliders
========================================================================== */
/* real macOS/iOS-style traffic-light chrome dots (applies to every chrome-bar) */
.chrome-bar span:nth-child(1){ background:#1B7A4D; }
.chrome-bar span:nth-child(2){ background:#2FD174; }
.chrome-bar span:nth-child(3){ background:#7CFFB2; }
/* plain square skill box — no icon, no stacked-pile effect */
.pile-square{ padding:30px 28px; }
/* review + finding slides, reusing the horizontal-scroll mechanism already built for the dashboard */
.hscroll-page.review-slide{ padding:26px 24px; display:flex; flex-direction:column; justify-content:center; min-height:150px; }
.hscroll-page.finding-slide{ padding:26px 24px; text-decoration:none; display:block; transition:transform .3s var(--ease); }
.hscroll-page.finding-slide:hover{ transform:translateY(-4px); }
.blog-oneliner{ font-size:13px; color:var(--ink-dim); margin-top:8px; line-height:1.5; }
/* ==========================================================================
v6 additions — narrative prose, process steps, live clock
========================================================================== */
.narrative{ max-width:70ch; }
.narrative p{ color:var(--ink-dim); font-size:15.5px; line-height:1.8; margin-bottom:18px; }
.narrative p:last-child{ margin-bottom:0; }
.narrative b{ color:var(--ink); font-weight:600; }
.ist-clock-line{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-top:10px; }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.process-step{ padding:24px 20px; }
.process-num{ font-family:var(--font-mono); font-size:12px; color:var(--orange); }
.process-title{ font-family:var(--font-display); font-weight:700; font-size:17px; margin:10px 0 8px; }
.process-desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; }
@media (max-width:860px){
.process-grid{ grid-template-columns:1fr 1fr; }
}
/* ==========================================================================
v7 additions — crux skills line, animated data-network motif,
auto-scrolling reviews, contact card, two-tier footer credits
========================================================================== */
/* keep content above any absolutely-positioned decorative motif inside a section */
.section > *:not(.data-network){ position:relative; z-index:1; }
.crux-skills{ margin-top:16px; font-family:var(--font-mono); font-size:12.5px; color:var(--red-bright); letter-spacing:.02em; }
/* animated data-network motif — the "defines my profession" background element */
.data-network{ position:absolute; width:340px; height:auto; opacity:.18; pointer-events:none; z-index:0; }
.data-network .net-lines line{ stroke:var(--leaf); stroke-width:1; stroke-dasharray:6 4; animation:net-flow 3s linear infinite; }
.data-network .net-dots circle{ fill:var(--leaf-bright); transform-origin:center; animation:net-pulse 2.4s ease-in-out infinite; }
.data-network .net-dots circle:nth-child(2n){ animation-delay:.6s; }
.data-network .net-dots circle:nth-child(3n){ animation-delay:1.2s; }
@keyframes net-flow{ to{ stroke-dashoffset:-20; } }
@keyframes net-pulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.3); } }
@media (prefers-reduced-motion: reduce){
.data-network .net-lines line, .data-network .net-dots circle{ animation:none !important; opacity:.8; }
}
/* auto-scrolling review marquee, replacing the manual-scroll version */
.review-marquee{ overflow:hidden; position:relative; z-index:1; }
.review-track{ display:flex; gap:18px; width:max-content; animation:scrollx 46s linear infinite; }
.review-slide-card{ flex:0 0 300px; padding:26px 24px; display:flex; flex-direction:column; justify-content:center; min-height:150px; }
/* contact card */
.contact-card{ max-width:640px; margin:0 auto; padding:48px 36px; text-align:center; }
.contact-sweet{ font-size:14.5px; color:var(--ink-dim); max-width:44ch; margin:0 auto 28px; line-height:1.6; }
/* two-tier footer credits */
.footer-credit{ font-size:12.5px; color:var(--ink-dim); }
.footer-subcredit{ margin-top:6px; font-size:10.5px; color:var(--ink-faint); }
/* ==========================================================================
v8 additions — root/branch background motif, text-overflow fixes,
degree-to-skill connection lines, draft-quote tag
========================================================================== */
/* animated root/branch network, grows as each region scrolls through view */
.roots-layer{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; }
.roots-svg{ position:absolute; width:220px; height:auto; opacity:.22; }
.roots-svg path{ fill:none; stroke:var(--leaf); stroke-width:1.4; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(47,209,116,.35)); }
@media (prefers-reduced-motion: reduce){
.roots-svg path{ stroke-dashoffset:0 !important; }
}
/* degree → skill connection lines in "My Knowledge" */
.skill-link{ margin-top:12px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); }
.skill-link b{ color:var(--red-bright); }
/* fixes for the reported text-overflow / "mixed text" issue: flex children
need min-width:0 to wrap instead of overflowing their row */
.exp-card > div, .author-box > div{ min-width:0; }
.mockup-row{ flex-wrap:wrap; row-gap:2px; }
.mockup-label{ min-width:0; word-break:break-word; }
.faq-item summary{ padding-right:34px; }
/* clearly-marked draft tag on sample review quotes */
.review-slide-card{ position:relative; }
.review-draft-tag{
position:absolute; top:12px; right:14px; font-family:var(--font-mono); font-size:9px;
letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
border:1px solid var(--glass-border); padding:2px 7px; border-radius:999px;
}
/* ==========================================================================
v5 additions — traffic-light chrome dots, subsection labels, horizontal
review/finding sliders, compact icon-free skill boxes
========================================================================== */
.chrome-bar span:nth-child(1){ background:#1B7A4D; }
.chrome-bar span:nth-child(2){ background:#2FD174; }
.chrome-bar span:nth-child(3){ background:#7CFFB2; }
.subsection-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:30px 0 14px; }
.pile-front.skill-box{ padding:22px; }
.skill-box .pile-title{ font-size:15.5px; margin-bottom:6px; }
.skill-box .pile-desc{ font-size:12.5px; }
.hscroll-page.narrow{ flex:0 0 min(300px,76vw); }
.hscroll-page.review-page{ padding:0; }
.hscroll-page.review-page .review-quote, .hscroll-page.review-page .review-attrib{ padding:0 22px; }
.hscroll-page.review-page .review-quote{ padding-top:22px; }
.hscroll-page.review-page .review-attrib{ display:block; padding-bottom:22px; }
.finding-title{ padding:38px 20px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:15.5px; line-height:1.4; text-decoration:none; }
a.hscroll-page{ text-decoration:none; color:var(--ink); display:block; }
/* ==========================================================================
v9 additions — spider companion, embossed site frame, brand button colors
========================================================================== */
/* site-frame removed per feedback — no border around the viewport anymore */
/* cute red spider companion — original mascot, 3D-shaded, not a copyrighted character */
.spider-companion{
position:fixed; right:22px; top:5%; z-index:5; width:50px; height:auto;
transform-origin:50% 0%; pointer-events:none;
transition: top .35s ease-out;
animation: spider-swing 3.2s ease-in-out infinite;
filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.spider-companion path, .spider-companion line{ stroke:var(--red-bright); }
.spider-companion ellipse, .spider-companion circle.body{ fill:url(#spiderBodyGradient); }
@keyframes spider-swing{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } }
@media (prefers-reduced-motion: reduce){ .spider-companion{ animation:none; } }
@media (max-width:700px){ .spider-companion{ width:38px; right:12px; } }
/* branded contact buttons */
.glass-btn.linkedin{ background: linear-gradient(135deg, #0A66C2, #084d95); color:#fff; }
.glass-btn.whatsapp{ background: linear-gradient(135deg, #25D366, #1da851); color:#04150c; }
/* ==========================================================================
v10 additions — theme toggle, contact tile colors, name treatment,
spider centerpiece watermark, enhanced spider detail
========================================================================== */
.theme-toggle{
width:34px; height:34px; border-radius:50%; border:1px solid var(--glass-border);
background:var(--glass-fill); color:var(--ink); cursor:pointer; display:flex;
align-items:center; justify-content:center; font-size:15px; flex:none;
}
.hero h1{
text-transform:uppercase; letter-spacing:.02em;
background: linear-gradient(100deg, var(--ink) 55%, var(--red-bright) 130%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* spider watermark centerpiece behind the hero — reverted to the organic mascot style */
.spider-watermark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); width:min(60vw,520px); opacity:.1; z-index:0; pointer-events:none; }
.spider-watermark path, .spider-watermark line{ stroke:var(--red-bright); }
.spider-watermark ellipse, .spider-watermark circle{ fill:var(--red-deep); }
/* contact card: each action tile gets its own accent, still one family */
.contact-actions .glass-btn{ }
.glass-btn.instagram{ background: linear-gradient(135deg, #E1306C, #C13584); color:#fff; }
.glass-btn.github{ background: linear-gradient(135deg, #3a3a3a, #1c1c1c); color:#fff; border:1px solid var(--glass-border); }
/* ==========================================================================
v11 — premium refinement + Data-Analyst-first sections
(typography, spacing, projects, brands grid, achievements, contact tiles)
Evolves the existing system — same tokens, same glass, same spider.
========================================================================== */
/* ---- refined accent scale: red = brand/primary, green = data/secondary ---- */
:root{
--accent: var(--red);
--accent-bright: var(--red-bright);
--data: var(--leaf);
--data-bright: var(--leaf-bright);
--space-section: clamp(56px, 8vw, 104px);
--maxw: 1160px;
}
/* smoother base rhythm */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-0.006em; }
/* accessible skip link */
.skip-link{ position:absolute; left:-999px; top:0; z-index:100; background:var(--accent); color:#fff;
padding:10px 16px; border-radius:0 0 10px 0; font-family:var(--font-mono); font-size:12px; }
.skip-link:focus{ left:0; }
/* section vertical rhythm + real headings */
.section{ padding-top:var(--space-section); padding-bottom:var(--space-section); }
h2.section-heading{
font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.2vw,38px);
line-height:1.12; letter-spacing:-0.02em; margin:0 0 14px; max-width:24ch;
}
h2.section-heading .accent{ color:var(--accent-bright); }
.section-kicker{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-faint); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.section-kicker::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:.7; }
/* ---------- hero refinements ---------- */
.hero .eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-dim); }
.hero .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--data-bright);
box-shadow:0 0 10px var(--data-bright); }
.hero .eyebrow b{ color:var(--accent-bright); font-weight:600; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.glass-btn.primary{ background:linear-gradient(135deg,var(--accent-bright),var(--red-deep)); color:#1a0705;
padding:12px 22px; font-size:13px; box-shadow:0 8px 22px rgba(225,75,61,.28); }
.glass-btn.secondary{ background:var(--glass-fill); color:var(--ink); border:1px solid var(--glass-border);
padding:12px 22px; font-size:13px; backdrop-filter:blur(10px); }
.glass-btn.secondary:hover, .glass-btn.primary:hover{ transform:translateY(-2px); }
.glass-btn{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.hero-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; font-family:var(--font-mono);
font-size:11.5px; color:var(--ink-faint); }
.hero-meta span{ display:inline-flex; align-items:center; gap:7px; }
.hero-meta .pip{ width:5px; height:5px; border-radius:50%; background:var(--data); }
/* ---------- minimal grouped skills ---------- */
.skills-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.skill-col{ padding:24px 22px; }
.skill-col .col-head{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--accent-bright); margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.skill-col .col-head::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--data); }
.skill-list{ display:flex; flex-direction:column; gap:11px; }
.skill-item{ font-size:14px; color:var(--ink-dim); display:flex; align-items:center; gap:9px; }
.skill-item::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--ink-faint); flex:none; }
@media (max-width:900px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .skills-grid{ grid-template-columns:1fr; } }
/* ---------- selected projects ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.project-card{ display:flex; flex-direction:column; padding:0; overflow:hidden;
transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.project-card:hover{ transform:translateY(-5px); box-shadow:0 22px 60px rgba(0,0,0,.55); }
/* media area — a terminal/code mock now; swap the inner .project-mock for
when the dashboard is ready */
.project-media{ position:relative; border-bottom:1px solid var(--glass-border); background:rgba(0,0,0,.22); }
[data-theme="light"] .project-media{ background:rgba(20,10,8,.03); }
.project-img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.project-mock{ padding:16px 18px; font-family:var(--font-mono); font-size:11.5px; line-height:1.7;
min-height:150px; overflow:hidden; }
.project-mock .c-comment{ color:var(--ink-faint); font-style:italic; }
.project-mock .c-kw{ color:var(--data-bright); }
.project-mock .c-str{ color:var(--amber); }
.project-mock .c-num{ color:var(--sky); }
.project-mock .ln{ display:block; white-space:pre; }
.project-body{ padding:22px 22px 20px; display:flex; flex-direction:column; flex:1; }
.project-title{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em; }
.project-desc{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin-top:9px; }
.project-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.tag{ font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:999px;
border:1px solid var(--glass-border); background:var(--glass-fill); color:var(--ink-dim); }
.project-foot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:18px; flex-wrap:wrap; }
.badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
padding:5px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.badge.soon{ color:var(--amber); border:1px solid rgba(242,196,107,.4); background:rgba(242,196,107,.08); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber);
box-shadow:0 0 8px var(--amber); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@media (prefers-reduced-motion: reduce){ .badge .dot{ animation:none; } }
.project-links{ display:flex; gap:8px; margin-left:auto; }
.mini-btn{ font-family:var(--font-mono); font-size:11px; padding:7px 13px; border-radius:8px; text-decoration:none;
border:1px solid var(--glass-border); color:var(--ink-dim); display:inline-flex; align-items:center; gap:6px;
transition:all .25s var(--ease); }
.mini-btn:hover{ color:var(--ink); border-color:var(--accent); transform:translateY(-1px); }
.mini-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; border-style:dashed; }
.mini-btn[aria-disabled="true"]:hover{ transform:none; color:var(--ink-dim); border-color:var(--glass-border); }
@media (max-width:820px){ .project-grid{ grid-template-columns:1fr; } }
/* ---------- brands / my work ---------- */
.brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.brand-card{ padding:20px 20px; display:flex; flex-direction:column; gap:12px;
transition:transform .35s var(--ease), border-color .35s var(--ease); }
.brand-card:hover{ transform:translateY(-3px); }
.brand-top{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center;
justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px;
background:linear-gradient(135deg,var(--red-soft),var(--leaf-soft)); color:var(--ink);
border:1px solid var(--glass-border); overflow:hidden; }
.brand-logo img{ width:100%; height:100%; object-fit:contain; }
.brand-name-lg{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-0.01em; }
.brand-role{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent-bright); margin-top:2px;
text-transform:uppercase; letter-spacing:.05em; }
.brand-services{ font-size:12.5px; color:var(--ink-dim); line-height:1.55; }
.brand-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto;
padding-top:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.brand-type{ padding:3px 9px; border-radius:999px; border:1px solid var(--glass-border); }
@media (max-width:900px){ .brand-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .brand-grid{ grid-template-columns:1fr; } }
/* ---------- achievements ---------- */
.ach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ach-card{ padding:26px 24px; display:flex; flex-direction:column; gap:14px;
transition:transform .35s var(--ease); }
.ach-card:hover{ transform:translateY(-4px); }
.ach-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
font-size:20px; background:var(--red-soft); color:var(--accent-bright); border:1px solid rgba(225,75,61,.25); }
.ach-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.ach-desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; }
/* certificate slot — drop … in later */
.cert-slot{ margin-top:auto; padding-top:10px; }
.cert-link, .cert-placeholder{ font-family:var(--font-mono); font-size:11px; display:inline-flex; align-items:center;
gap:7px; padding:7px 12px; border-radius:8px; border:1px dashed var(--glass-border); color:var(--ink-faint);
text-decoration:none; transition:all .25s var(--ease); }
.cert-link{ border-style:solid; color:var(--ink-dim); }
.cert-link:hover{ color:var(--ink); border-color:var(--accent); }
@media (max-width:820px){ .ach-grid{ grid-template-columns:1fr; } }
/* ---------- contact tiles (adds phone) ---------- */
.contact-actions .glass-btn{ padding:11px 20px; }
.glass-btn.email{ background:linear-gradient(135deg,var(--accent-bright),var(--red-deep)); color:#1a0705; }
.glass-btn.phone{ background:linear-gradient(135deg,var(--leaf),var(--leaf-deep)); color:#04150c; }
/* ---------- light-mode premium polish ---------- */
[data-theme="light"] .glass{ box-shadow:0 10px 34px rgba(20,10,8,.10), inset 0 1px 0 rgba(255,255,255,.6); }
[data-theme="light"] .glass-btn.github{ background:linear-gradient(135deg,#2b2b2b,#111); }
/* ---------- refined navbar (adds subtle divider on scroll feel) ---------- */
.navbar{ backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); }
/* ---------- utility: eyebrow reveal spacing already handled by GSAP ---------- */
.section-intro{ margin-top:-4px; }
/* ---- light-mode code syntax contrast (a11y) ---- */
[data-theme="light"] .c-kw, [data-theme="light"] .project-mock .c-kw{ color:#146a3a; }
[data-theme="light"] .c-str{ color:#9a6b12; }
[data-theme="light"] .c-num, [data-theme="light"] .project-mock .c-num{ color:#215fa6; }
[data-theme="light"] .c-comment{ color:rgba(23,17,15,.52); }
[data-theme="light"] .cursor-blink{ background:#146a3a; }
/* ==========================================================================
v12 — professional revision:
remove spider, premium fonts, wider layout, bigger hero,
horizontal sliders for projects + brands, certificates grid.
========================================================================== */
/* --- retire the spider entirely --- */
.spider-companion, .spider-watermark{ display:none !important; }
/* --- wider, fuller layout across aspect ratios --- */
:root{ --maxw:1340px; --pad-x:clamp(22px,4.5vw,72px); }
.section{ max-width:var(--maxw); padding-left:var(--pad-x); padding-right:var(--pad-x); }
.navbar{ max-width:calc(var(--maxw) - 40px); width:calc(100% - 40px); justify-content:space-between; }
/* --- bigger, more confident hero --- */
.hero{ min-height:100vh; padding:180px var(--pad-x) 90px; gap:clamp(36px,5vw,80px);
grid-template-columns:1.15fr .95fr; max-width:var(--maxw); margin:0 auto; }
.hero .eyebrow{ font-size:13px; letter-spacing:.16em; margin-bottom:26px; }
.hero h1{ font-size:clamp(46px,8.5vw,112px); line-height:.98; letter-spacing:-0.03em; margin:0 0 26px;
text-transform:none; }
.tagline{ font-size:clamp(18px,1.9vw,23px); max-width:34ch; line-height:1.5; }
.hero-cta{ margin-top:38px; }
.glass-btn.primary, .glass-btn.secondary{ padding:14px 26px; font-size:13.5px; }
.hero-panel.code-panel{ align-self:center; }
.code-block{ font-size:13.5px; line-height:1.85; padding:22px 24px 26px; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; min-height:auto; padding-top:130px; } }
/* --- About as two columns so wide screens fill --- */
.about-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.about-split .narrative{ max-width:none; }
.about-split .narrative p{ font-size:16.5px; }
@media (max-width:820px){ .about-split{ grid-template-columns:1fr; gap:18px; } }
/* --- section heading scale bump --- */
h2.section-heading{ font-size:clamp(28px,3.6vw,46px); }
/* --- horizontal sliders (projects + brands) --- */
.slider-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.slider-link{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); text-decoration:none;
display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .25s var(--ease); }
.slider-link:hover{ color:var(--accent-bright); }
.slider-viewport{ margin-top:26px; position:relative; }
.slider{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:6px 4px 22px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.slider::-webkit-scrollbar{ display:none; }
.slide{ scroll-snap-align:start; flex:0 0 auto; }
.slider-hint{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.05em;
margin-top:2px; display:flex; align-items:center; gap:7px; }
.slider-hint::before{ content:""; width:16px; height:1px; background:var(--ink-faint); }
/* project slide (links to detail page) */
.project-slide{ width:min(400px,84vw); text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.project-slide:hover{ transform:translateY(-5px); }
.project-slide .project-media{ border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg); }
/* brand slide (one compact row) */
.brand-slide{ width:270px; padding:20px; display:flex; flex-direction:column; gap:11px; text-decoration:none;
color:inherit; transition:transform .35s var(--ease); }
.brand-slide:hover{ transform:translateY(-4px); }
/* --- certificates grid --- */
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.cert-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease); }
.cert-card:hover{ transform:translateY(-4px); }
/* image slot — swap .cert-frame's inner for later */
.cert-frame{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid var(--glass-border); background:
linear-gradient(135deg, rgba(225,75,61,.06), rgba(47,209,116,.05));
overflow:hidden; }
[data-theme="light"] .cert-frame{ background:linear-gradient(135deg, rgba(225,75,61,.05), rgba(47,209,116,.04)); }
.cert-img{ width:100%; height:100%; object-fit:cover; }
.cert-frame .cert-badge{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink-faint); border:1px dashed var(--glass-border); padding:8px 14px; border-radius:999px; }
.cert-frame .cert-mark{ position:absolute; top:14px; left:16px; font-family:var(--font-mono); font-size:11px;
color:var(--accent-bright); }
.cert-info{ padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.cert-name{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-0.01em; }
.cert-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); }
@media (max-width:820px){ .cert-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cert-grid{ grid-template-columns:1fr; } }
/* achievements: tighten to a row that fills width */
.ach-grid{ gap:16px; }
/* premium micro-polish */
.glass{ box-shadow:0 14px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.hero h1{ background:linear-gradient(120deg, var(--ink) 60%, var(--accent-bright) 125%);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-note{ padding-top:20px; }
/* ==========================================================================
projects.html — detailed project layout
========================================================================== */
.page-header{ max-width:var(--maxw); margin:0 auto; padding:150px var(--pad-x) 10px; position:relative; z-index:1; }
.page-header .section-kicker{ margin-bottom:16px; }
.page-header h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,6vw,72px);
line-height:1; letter-spacing:-0.03em; margin:0 0 18px;
background:linear-gradient(120deg,var(--ink) 60%,var(--accent-bright) 125%);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.page-header p{ font-size:17px; color:var(--ink-dim); max-width:60ch; line-height:1.6; }
.proj-list{ max-width:var(--maxw); margin:0 auto; padding:40px var(--pad-x) 40px; display:flex; flex-direction:column; gap:22px; }
.proj-detail{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; overflow:hidden; scroll-margin-top:100px; }
.proj-detail .media-col{ border-right:1px solid var(--glass-border); background:rgba(0,0,0,.2); display:flex; flex-direction:column; }
[data-theme="light"] .proj-detail .media-col{ background:rgba(20,10,8,.03); }
.proj-detail .media-col .project-mock{ font-size:13px; line-height:1.85; padding:20px 22px; }
/* image slot: replace .project-mock with */
.proj-detail .info-col{ padding:30px 30px 28px; display:flex; flex-direction:column; gap:14px; }
.proj-cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-bright); }
.proj-detail h2{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.01em; margin:0; }
.proj-detail .lead{ font-size:14.5px; color:var(--ink-dim); line-height:1.65; }
.kpi-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.kpi{ border:1px solid var(--glass-border); background:var(--glass-fill); border-radius:12px; padding:10px 14px; min-width:96px; }
.kpi .k-num{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--accent-bright); }
.kpi .k-lbl{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }
.proj-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
@media (max-width:820px){ .proj-detail{ grid-template-columns:1fr; } .proj-detail .media-col{ border-right:none; border-bottom:1px solid var(--glass-border); } }
/* ==========================================================================
v13 — award-style elevation:
aurora backdrop, scroll progress, custom cursor, magnetic buttons,
real dashboard thumbnails + live-preview cards, refined motion.
========================================================================== */
/* scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
background:linear-gradient(90deg, var(--data-bright), var(--accent-bright)); box-shadow:0 0 12px var(--accent); }
/* animated aurora backdrop (behind everything, subtle) */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora b{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform; }
.aurora .a1{ width:52vw; height:52vw; left:-12vw; top:-14vw; background:radial-gradient(circle,rgba(225,75,61,.28),transparent 62%); animation:drift1 22s ease-in-out infinite; }
.aurora .a2{ width:46vw; height:46vw; right:-10vw; top:6vw; background:radial-gradient(circle,rgba(47,209,116,.20),transparent 62%); animation:drift2 26s ease-in-out infinite; }
.aurora .a3{ width:40vw; height:40vw; left:24vw; top:52vh; background:radial-gradient(circle,rgba(76,141,255,.16),transparent 62%); animation:drift3 30s ease-in-out infinite; }
[data-theme="light"] .aurora b{ opacity:.30; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,4vw) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,5vw) scale(1.08);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,-6vw) scale(1.15);} }
@media (prefers-reduced-motion: reduce){ .aurora b{ animation:none !important; } }
body > *:not(.aurora):not(.grain):not(.scroll-progress):not(.cursor-dot):not(.cursor-ring){ position:relative; z-index:1; }
/* custom cursor (pointer:fine only, enabled via JS .cursor-on) */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:70;
transform:translate(-50%,-50%); opacity:0; mix-blend-mode:difference; }
.cursor-dot{ width:7px; height:7px; background:#fff; }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(255,255,255,.7);
transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s; }
.cursor-on .cursor-dot, .cursor-on .cursor-ring{ opacity:1; }
.cursor-on.cursor-hover .cursor-ring{ width:56px; height:56px; background:rgba(255,255,255,.08); }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce){ .cursor-dot,.cursor-ring{ display:none !important; } }
/* hero scroll cue */
.scroll-cue{ position:absolute; bottom:26px; left:var(--pad-x); display:flex; align-items:center; gap:10px;
font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.scroll-cue .line{ width:34px; height:1px; background:var(--ink-faint); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; inset:0; background:var(--accent-bright); transform:translateX(-100%); animation:cueline 2.4s var(--ease) infinite; }
@keyframes cueline{ 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue .line::after{ animation:none; } }
@media (max-width:900px){ .scroll-cue{ display:none; } }
/* magnetic buttons feel */
[data-magnetic]{ will-change:transform; }
/* --- project cards with real dashboard thumbnails --- */
.project-card{ padding:0; }
.p-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--glass-border);
background:#0d1420; }
.p-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
transition:transform .6s var(--ease); }
.project-card:hover .p-thumb img{ transform:scale(1.06); }
.p-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px;
background:linear-gradient(to top, rgba(5,5,5,.72), transparent 58%); opacity:0; transition:opacity .35s var(--ease); }
.project-card:hover .p-overlay{ opacity:1; }
.p-overlay .live-pill{ font-family:var(--font-mono); font-size:11px; color:#fff; display:inline-flex; align-items:center; gap:7px;
background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25); padding:7px 13px; border-radius:999px; backdrop-filter:blur(6px); }
.p-tag{ position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
text-transform:uppercase; color:var(--data-bright); background:rgba(5,5,5,.6); border:1px solid var(--glass-border);
padding:5px 11px; border-radius:999px; backdrop-filter:blur(6px); display:inline-flex; align-items:center; gap:6px; }
.p-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--data-bright); box-shadow:0 0 8px var(--data-bright); }
.badge.live{ color:var(--data-bright); border:1px solid rgba(47,209,116,.4); background:rgba(47,209,116,.08); }
.badge.live .dot{ background:var(--data-bright); box-shadow:0 0 8px var(--data-bright); }
/* projects.html detail media = live dashboard image */
.proj-detail .media-col{ padding:0; }
.proj-detail .media-col .p-thumb{ aspect-ratio:16/10; border-bottom:none; height:100%; }
.proj-detail .media-col .p-thumb img{ object-position:top center; }
@media (max-width:820px){ .proj-detail .media-col .p-thumb{ aspect-ratio:16/9; } }
/* hero: line-based entrance target (JS adds motion; visible without JS) */
.hero h1{ letter-spacing:-0.035em; }
.eyebrow{ backdrop-filter:blur(6px); }
/* refined glass hover on cards */
.project-card, .brand-slide, .cert-card, .ach-card, .exp-card, .skill-col, .metric-card{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
/* ==========================================================================
v14 — blue/green palette, galaxy backdrop, compact premium, skill highlights,
VS logo. Removes aurora/cursor. Lighter, faster (no smooth-scroll lib).
========================================================================== */
/* retire prior heavy layers */
.aurora, .cursor-dot, .cursor-ring{ display:none !important; }
.glass{ backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); }
/* accents: blue primary, green secondary */
:root{ --accent:var(--blue); --accent-bright:#7FB0FF; --data:var(--leaf); --data-bright:var(--leaf-bright);
--blue:#4C8DFF; --cyan:#38BDF8; --violet:#8B5CF6; --space-section:clamp(48px,6.5vw,88px); }
[data-theme="light"]{ --accent:#2563EB; --accent-bright:#2563EB; }
/* galaxy background — minimal starfield + soft nebula */
.galaxy{ position:fixed; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden;
background:
radial-gradient(58vw 42vw at 80% -10%, rgba(76,141,255,.15), transparent 60%),
radial-gradient(50vw 42vw at 6% 14%, rgba(47,209,116,.11), transparent 60%),
radial-gradient(44vw 34vw at 52% 112%, rgba(139,92,246,.09), transparent 62%); }
.galaxy .stars{ position:absolute; inset:-60%; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27800%27 height=%27800%27%3E%3Ccircle cx=%27259.1%27 cy=%27120.7%27 r=%271.1%27 fill=%27white%27 opacity=%270.39%27/%3E%3Ccircle cx=%27428.7%27 cy=%27292.6%27 r=%270.6%27 fill=%27white%27 opacity=%270.65%27/%3E%3Ccircle cx=%2730.0%27 cy=%27346.9%27 r=%270.6%27 fill=%27white%27 opacity=%270.4%27/%3E%3Ccircle cx=%27339.6%27 cy=%27661.5%27 r=%270.6%27 fill=%27white%27 opacity=%270.48%27/%3E%3Ccircle cx=%27501.9%27 cy=%27758.2%27 r=%271.0%27 fill=%27white%27 opacity=%270.59%27/%3E%3Ccircle cx=%27781.0%27 cy=%2737.3%27 r=%271.3%27 fill=%27white%27 opacity=%270.52%27/%3E%3Ccircle cx=%27115.4%27 cy=%2794.2%27 r=%270.8%27 fill=%27white%27 opacity=%270.84%27/%3E%3Ccircle cx=%27144.6%27 cy=%27465.3%27 r=%271.1%27 fill=%27white%27 opacity=%270.57%27/%3E%3Ccircle cx=%27438.2%27 cy=%2750.2%27 r=%270.6%27 fill=%27white%27 opacity=%270.47%27/%3E%3Ccircle cx=%27544.3%27 cy=%27342.1%27 r=%270.8%27 fill=%27white%27 opacity=%270.7%27/%3E%3Ccircle cx=%27362.5%27 cy=%27239.8%27 r=%271.2%27 fill=%27white%27 opacity=%270.77%27/%3E%3Ccircle cx=%27195.3%27 cy=%27459.5%27 r=%271.0%27 fill=%27white%27 opacity=%270.88%27/%3E%3Ccircle cx=%27583.6%27 cy=%27230.4%27 r=%271.4%27 fill=%27white%27 opacity=%270.42%27/%3E%3Ccircle cx=%27334.5%27 cy=%27605.7%27 r=%270.6%27 fill=%27white%27 opacity=%270.64%27/%3E%3Ccircle cx=%2731.4%27 cy=%27534.6%27 r=%271.2%27 fill=%27white%27 opacity=%270.69%27/%3E%3Ccircle cx=%27700.4%27 cy=%27251.0%27 r=%271.1%27 fill=%27white%27 opacity=%270.71%27/%3E%3Ccircle cx=%27463.9%27 cy=%27365.0%27 r=%271.3%27 fill=%27white%27 opacity=%270.92%27/%3E%3Ccircle cx=%27379.3%27 cy=%27531.3%27 r=%270.6%27 fill=%27white%27 opacity=%270.77%27/%3E%3Ccircle cx=%27517.7%27 cy=%27794.5%27 r=%271.2%27 fill=%27white%27 opacity=%270.52%27/%3E%3Ccircle cx=%27308.6%27 cy=%27534.9%27 r=%270.5%27 fill=%27white%27 opacity=%270.63%27/%3E%3Ccircle cx=%27134.4%27 cy=%2793.7%27 r=%270.6%27 fill=%27white%27 opacity=%270.81%27/%3E%3Ccircle cx=%27103.5%27 cy=%27198.1%27 r=%270.9%27 fill=%27white%27 opacity=%270.87%27/%3E%3Ccircle cx=%2764.5%27 cy=%27359.3%27 r=%271.0%27 fill=%27white%27 opacity=%270.88%27/%3E%3Ccircle cx=%27655.4%27 cy=%27691.2%27 r=%270.8%27 fill=%27white%27 opacity=%270.6%27/%3E%3Ccircle cx=%27287.0%27 cy=%27707.4%27 r=%271.4%27 fill=%27white%27 opacity=%270.44%27/%3E%3Ccircle cx=%27141.0%27 cy=%27185.6%27 r=%270.7%27 fill=%27white%27 opacity=%270.64%27/%3E%3Ccircle cx=%27471.3%27 cy=%27210.2%27 r=%270.5%27 fill=%27white%27 opacity=%270.6%27/%3E%3Ccircle cx=%27295.4%27 cy=%27453.1%27 r=%271.4%27 fill=%27white%27 opacity=%270.76%27/%3E%3Ccircle cx=%27412.4%27 cy=%27494.1%27 r=%271.1%27 fill=%27white%27 opacity=%270.38%27/%3E%3Ccircle cx=%27719.6%27 cy=%27624.0%27 r=%271.3%27 fill=%27white%27 opacity=%270.83%27/%3E%3Ccircle cx=%27313.9%27 cy=%27319.2%27 r=%270.6%27 fill=%27white%27 opacity=%270.73%27/%3E%3Ccircle cx=%2749.8%27 cy=%2753.9%27 r=%270.7%27 fill=%27white%27 opacity=%270.45%27/%3E%3Ccircle cx=%27272.0%27 cy=%2742.1%27 r=%270.5%27 fill=%27white%27 opacity=%270.44%27/%3E%3Ccircle cx=%2781.2%27 cy=%27290.9%27 r=%270.5%27 fill=%27white%27 opacity=%270.87%27/%3E%3Ccircle cx=%27491.3%27 cy=%27118.8%27 r=%270.7%27 fill=%27white%27 opacity=%270.56%27/%3E%3Ccircle cx=%27291.3%27 cy=%2798.3%27 r=%271.3%27 fill=%27white%27 opacity=%270.95%27/%3E%3Ccircle cx=%27372.8%27 cy=%27387.1%27 r=%270.6%27 fill=%27white%27 opacity=%270.41%27/%3E%3Ccircle cx=%27274.1%27 cy=%27211.8%27 r=%271.2%27 fill=%27white%27 opacity=%270.45%27/%3E%3Ccircle cx=%2718.5%27 cy=%27760.8%27 r=%271.0%27 fill=%27white%27 opacity=%270.44%27/%3E%3Ccircle cx=%27434.5%27 cy=%2721.6%27 r=%271.0%27 fill=%27white%27 opacity=%270.94%27/%3E%3Ccircle cx=%27690.7%27 cy=%27557.0%27 r=%270.7%27 fill=%27white%27 opacity=%270.57%27/%3E%3Ccircle cx=%27133.6%27 cy=%27617.6%27 r=%271.0%27 fill=%27white%27 opacity=%270.82%27/%3E%3Ccircle cx=%27263.7%27 cy=%27178.4%27 r=%271.2%27 fill=%27white%27 opacity=%270.94%27/%3E%3Ccircle cx=%27682.1%27 cy=%27644.9%27 r=%271.2%27 fill=%27white%27 opacity=%270.79%27/%3E%3Ccircle cx=%27181.4%27 cy=%27414.1%27 r=%270.8%27 fill=%27white%27 opacity=%270.37%27/%3E%3Ccircle cx=%2722.3%27 cy=%27223.5%27 r=%270.7%27 fill=%27white%27 opacity=%270.77%27/%3E%3Ccircle cx=%27765.2%27 cy=%27357.8%27 r=%271.3%27 fill=%27white%27 opacity=%270.94%27/%3E%3Ccircle cx=%27764.0%27 cy=%27291.7%27 r=%270.7%27 fill=%27white%27 opacity=%270.49%27/%3E%3Ccircle cx=%27157.4%27 cy=%27163.5%27 r=%271.1%27 fill=%27white%27 opacity=%270.89%27/%3E%3Ccircle cx=%27672.3%27 cy=%27383.6%27 r=%271.1%27 fill=%27white%27 opacity=%270.83%27/%3E%3Ccircle cx=%2767.8%27 cy=%27528.5%27 r=%271.3%27 fill=%27white%27 opacity=%270.82%27/%3E%3Ccircle cx=%27600.1%27 cy=%27382.4%27 r=%270.7%27 fill=%27white%27 opacity=%270.82%27/%3E%3Ccircle cx=%27266.0%27 cy=%27640.7%27 r=%271.4%27 fill=%27white%27 opacity=%270.59%27/%3E%3Ccircle cx=%27321.1%27 cy=%27757.4%27 r=%271.2%27 fill=%27white%27 opacity=%270.45%27/%3E%3Ccircle cx=%27101.6%27 cy=%27120.9%27 r=%271.3%27 fill=%27white%27 opacity=%270.83%27/%3E%3Ccircle cx=%27116.9%27 cy=%27661.2%27 r=%271.4%27 fill=%27white%27 opacity=%270.74%27/%3E%3Ccircle cx=%27280.3%27 cy=%27438.9%27 r=%270.6%27 fill=%27white%27 opacity=%270.36%27/%3E%3Ccircle cx=%27776.7%27 cy=%27519.7%27 r=%271.0%27 fill=%27white%27 opacity=%270.91%27/%3E%3Ccircle cx=%27347.0%27 cy=%27697.4%27 r=%271.2%27 fill=%27white%27 opacity=%270.48%27/%3E%3Ccircle cx=%27201.5%27 cy=%27234.4%27 r=%270.7%27 fill=%27white%27 opacity=%270.7%27/%3E%3Ccircle cx=%27207.5%27 cy=%27335.2%27 r=%270.6%27 fill=%27white%27 opacity=%270.9%27/%3E%3Ccircle cx=%27283.0%27 cy=%27366.5%27 r=%271.0%27 fill=%27white%27 opacity=%270.89%27/%3E%3Ccircle cx=%27336.5%27 cy=%27734.2%27 r=%271.0%27 fill=%27white%27 opacity=%270.67%27/%3E%3Ccircle cx=%27418.8%27 cy=%2715.0%27 r=%270.9%27 fill=%27white%27 opacity=%270.46%27/%3E%3Ccircle cx=%273.1%27 cy=%27639.3%27 r=%270.7%27 fill=%27white%27 opacity=%270.63%27/%3E%3Ccircle cx=%27580.2%27 cy=%27445.2%27 r=%270.8%27 fill=%27white%27 opacity=%270.66%27/%3E%3Ccircle cx=%27444.4%27 cy=%27627.4%27 r=%270.6%27 fill=%27white%27 opacity=%270.69%27/%3E%3Ccircle cx=%27198.8%27 cy=%27221.5%27 r=%271.2%27 fill=%27white%27 opacity=%270.65%27/%3E%3Ccircle cx=%27449.4%27 cy=%27608.0%27 r=%271.3%27 fill=%27white%27 opacity=%270.62%27/%3E%3Ccircle cx=%27490.0%27 cy=%27404.4%27 r=%271.0%27 fill=%27white%27 opacity=%270.77%27/%3E%3C/svg%3E"); background-size:800px 800px;
opacity:.55; animation:twinkleA 7s ease-in-out infinite alternate, drift 140s linear infinite; }
.galaxy .stars.s2{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27800%27 height=%27800%27%3E%3Ccircle cx=%27361.9%27 cy=%27426.6%27 r=%270.7%27 fill=%27white%27 opacity=%270.91%27/%3E%3Ccircle cx=%27559.4%27 cy=%27701.2%27 r=%271.0%27 fill=%27white%27 opacity=%270.51%27/%3E%3Ccircle cx=%27447.6%27 cy=%27754.6%27 r=%270.9%27 fill=%27white%27 opacity=%270.43%27/%3E%3Ccircle cx=%2797.3%27 cy=%27353.7%27 r=%270.5%27 fill=%27white%27 opacity=%270.49%27/%3E%3Ccircle cx=%2758.5%27 cy=%27535.6%27 r=%270.9%27 fill=%27white%27 opacity=%270.89%27/%3E%3Ccircle cx=%27123.6%27 cy=%27572.9%27 r=%270.8%27 fill=%27white%27 opacity=%270.44%27/%3E%3Ccircle cx=%27706.3%27 cy=%27774.0%27 r=%270.6%27 fill=%27white%27 opacity=%270.92%27/%3E%3Ccircle cx=%27318.6%27 cy=%27389.8%27 r=%271.0%27 fill=%27white%27 opacity=%270.85%27/%3E%3Ccircle cx=%27129.2%27 cy=%27345.2%27 r=%270.8%27 fill=%27white%27 opacity=%270.55%27/%3E%3Ccircle cx=%27156.6%27 cy=%27254.8%27 r=%270.9%27 fill=%27white%27 opacity=%270.36%27/%3E%3Ccircle cx=%27443.2%27 cy=%27352.4%27 r=%270.5%27 fill=%27white%27 opacity=%270.55%27/%3E%3Ccircle cx=%27499.1%27 cy=%27409.8%27 r=%270.5%27 fill=%27white%27 opacity=%270.94%27/%3E%3Ccircle cx=%27630.7%27 cy=%27777.4%27 r=%270.6%27 fill=%27white%27 opacity=%270.51%27/%3E%3Ccircle cx=%2731.7%27 cy=%27623.2%27 r=%270.6%27 fill=%27white%27 opacity=%270.43%27/%3E%3Ccircle cx=%27337.8%27 cy=%27729.1%27 r=%270.9%27 fill=%27white%27 opacity=%270.51%27/%3E%3Ccircle cx=%27119.5%27 cy=%27735.3%27 r=%270.8%27 fill=%27white%27 opacity=%270.77%27/%3E%3Ccircle cx=%2771.6%27 cy=%2746.0%27 r=%270.8%27 fill=%27white%27 opacity=%270.61%27/%3E%3Ccircle cx=%2757.9%27 cy=%27750.7%27 r=%270.8%27 fill=%27white%27 opacity=%270.83%27/%3E%3Ccircle cx=%2767.0%27 cy=%27685.0%27 r=%270.5%27 fill=%27white%27 opacity=%270.87%27/%3E%3Ccircle cx=%27363.0%27 cy=%27271.3%27 r=%270.8%27 fill=%27white%27 opacity=%270.91%27/%3E%3Ccircle cx=%27214.3%27 cy=%27103.4%27 r=%270.8%27 fill=%27white%27 opacity=%270.49%27/%3E%3Ccircle cx=%2787.6%27 cy=%27129.2%27 r=%270.5%27 fill=%27white%27 opacity=%270.47%27/%3E%3Ccircle cx=%27249.6%27 cy=%27244.0%27 r=%270.9%27 fill=%27white%27 opacity=%270.52%27/%3E%3Ccircle cx=%27400.1%27 cy=%27142.3%27 r=%270.7%27 fill=%27white%27 opacity=%270.36%27/%3E%3Ccircle cx=%27200.4%27 cy=%2712.3%27 r=%270.9%27 fill=%27white%27 opacity=%270.68%27/%3E%3Ccircle cx=%27151.6%27 cy=%27379.8%27 r=%271.0%27 fill=%27white%27 opacity=%270.41%27/%3E%3Ccircle cx=%27655.1%27 cy=%27345.7%27 r=%270.7%27 fill=%27white%27 opacity=%270.85%27/%3E%3Ccircle cx=%27314.5%27 cy=%27405.3%27 r=%270.8%27 fill=%27white%27 opacity=%270.94%27/%3E%3Ccircle cx=%27274.2%27 cy=%27665.8%27 r=%270.9%27 fill=%27white%27 opacity=%270.73%27/%3E%3Ccircle cx=%27323.8%27 cy=%27278.0%27 r=%270.5%27 fill=%27white%27 opacity=%270.43%27/%3E%3Ccircle cx=%2756.6%27 cy=%27592.7%27 r=%270.6%27 fill=%27white%27 opacity=%270.45%27/%3E%3Ccircle cx=%2767.6%27 cy=%27673.0%27 r=%270.9%27 fill=%27white%27 opacity=%270.75%27/%3E%3Ccircle cx=%27225.5%27 cy=%27193.8%27 r=%270.6%27 fill=%27white%27 opacity=%270.63%27/%3E%3Ccircle cx=%27126.0%27 cy=%27356.7%27 r=%270.6%27 fill=%27white%27 opacity=%270.93%27/%3E%3Ccircle cx=%27778.1%27 cy=%27437.7%27 r=%270.6%27 fill=%27white%27 opacity=%270.93%27/%3E%3Ccircle cx=%27247.6%27 cy=%27285.3%27 r=%270.5%27 fill=%27white%27 opacity=%270.58%27/%3E%3Ccircle cx=%27379.7%27 cy=%27402.2%27 r=%270.6%27 fill=%27white%27 opacity=%270.65%27/%3E%3Ccircle cx=%274.0%27 cy=%27211.3%27 r=%270.5%27 fill=%27white%27 opacity=%270.59%27/%3E%3Ccircle cx=%2733.3%27 cy=%2718.0%27 r=%270.7%27 fill=%27white%27 opacity=%270.49%27/%3E%3Ccircle cx=%27468.5%27 cy=%27423.4%27 r=%270.9%27 fill=%27white%27 opacity=%270.74%27/%3E%3Ccircle cx=%27572.8%27 cy=%27703.3%27 r=%270.7%27 fill=%27white%27 opacity=%270.55%27/%3E%3Ccircle cx=%27787.8%27 cy=%27119.6%27 r=%270.9%27 fill=%27white%27 opacity=%270.74%27/%3E%3Ccircle cx=%2735.0%27 cy=%27668.2%27 r=%270.9%27 fill=%27white%27 opacity=%270.73%27/%3E%3Ccircle cx=%27587.1%27 cy=%27649.8%27 r=%270.6%27 fill=%27white%27 opacity=%270.66%27/%3E%3Ccircle cx=%27403.5%27 cy=%27668.0%27 r=%270.9%27 fill=%27white%27 opacity=%270.85%27/%3E%3C/svg%3E"); background-size:560px 560px; opacity:.32;
animation:twinkleB 11s ease-in-out infinite alternate, drift 240s linear infinite reverse; }
@keyframes twinkleA{ from{opacity:.35} to{opacity:.65} }
@keyframes twinkleB{ from{opacity:.2} to{opacity:.45} }
@keyframes drift{ to{ transform:translateY(-60px); } }
[data-theme="light"] .galaxy{ background:
radial-gradient(58vw 42vw at 80% -10%, rgba(37,99,235,.08), transparent 60%),
radial-gradient(50vw 42vw at 6% 14%, rgba(18,145,90,.07), transparent 60%); }
[data-theme="light"] .galaxy .stars{ display:none; }
@media (prefers-reduced-motion: reduce){ .galaxy .stars{ animation:none !important; } }
/* keep content above galaxy */
.navbar{ z-index:20; } main, footer{ position:relative; z-index:1; }
/* VS brand logo */
.brand{ gap:11px; }
.brand-logo-svg{ width:26px; height:26px; display:block; }
.brand-mark{ display:none; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); letter-spacing:-0.01em; }
/* primary/secondary buttons in blue→green */
.glass-btn{ background:linear-gradient(135deg,#4C8DFF,#2FD174); color:#05131a; }
.glass-btn.primary{ background:linear-gradient(135deg,#4C8DFF,#2FD174); color:#05131a;
box-shadow:0 8px 22px rgba(76,141,255,.26); }
.glass-btn.secondary{ background:var(--glass-fill); color:var(--ink); border:1px solid var(--glass-border); }
.glass-btn.email{ background:linear-gradient(135deg,#4C8DFF,#2FD174); color:#05131a; }
.glass-btn.whatsapp{ background:linear-gradient(135deg,#25D366,#1da851); color:#04150c; }
.glass-btn.linkedin{ background:linear-gradient(135deg,#0A66C2,#084d95); color:#fff; }
.glass-btn.github{ background:linear-gradient(135deg,#2b2b2b,#111); color:#fff; }
.glass-btn.instagram{ background:linear-gradient(135deg,#8B5CF6,#4C8DFF); color:#fff; }
/* skills — highlight the key skill per sector with its own colour */
.skill-col .col-head{ color:var(--hl, var(--accent-bright)); }
.skill-col .col-head::before{ background:var(--hl, var(--data)); }
.skill-item.key{ color:var(--ink); font-weight:600; }
.skill-item.key::before{ width:7px; height:7px; background:var(--hl); box-shadow:0 0 10px var(--hl); }
.skill-item .kbadge{ margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
text-transform:uppercase; color:var(--hl); border:1px solid var(--hl); opacity:.55; border-radius:999px; padding:2px 7px; }
.skill-item{ justify-content:flex-start; }
.skill-item.key{ display:flex; align-items:center; }
/* certificates — show real images, card is a link to full cert */
.cert-card{ text-decoration:none; color:inherit; }
.cert-frame{ aspect-ratio:1.55/1; background:#0b1220; }
[data-theme="light"] .cert-frame{ background:#eef2f8; }
.cert-img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.cert-frame .cert-open{ position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:10px;
color:#fff; background:rgba(5,7,14,.55); border:1px solid rgba(255,255,255,.2); padding:5px 10px; border-radius:999px;
opacity:0; transition:opacity .3s var(--ease); backdrop-filter:blur(6px); }
.cert-card:hover .cert-frame .cert-open{ opacity:1; }
.cert-card:hover{ transform:translateY(-4px); }
/* compact rhythm + premium tightening */
.section-heading{ letter-spacing:-0.02em; }
.hero{ padding-top:150px; }
.footer-subcredit{ color:var(--ink-faint); }
/* light-mode: brand name + code contrast already handled; ensure galaxy text legible */
[data-theme="light"] .glass{ box-shadow:0 10px 30px rgba(13,21,38,.08), inset 0 1px 0 rgba(255,255,255,.6); }
/* JS-gated reveals (visible if JS/observer absent) */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1 !important; transform:none !important; } }
/* achievement cards as links + cert frame open affordance */
.ach-card{ text-decoration:none; color:inherit; }
.ach-foot{ margin-top:auto; padding-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--accent-bright);
display:inline-flex; align-items:center; gap:6px; }
.cert-frame{ position:relative; }
/* ==========================================================================
v15 — softer minimal palette, background grid element, terminal blog tiles,
AI skill sector. Less "pop", more calm premium.
========================================================================== */
/* soften accents (less saturated, slightly lighter) */
:root{
--blue:#5E93E6; --accent:var(--blue); --accent-bright:#8FB4F0;
--leaf:#42C58A; --leaf-bright:#78DBA9; --data:var(--leaf); --data-bright:var(--leaf-bright);
--cyan:#5AB6E6; --violet:#8E86E0;
}
[data-theme="light"]{ --accent:#3568C4; --accent-bright:#3568C4; --blue:#3568C4; --leaf-bright:#178A58; }
/* calmer galaxy (lighter, less colour) */
.galaxy{ background:
radial-gradient(56vw 42vw at 80% -12%, rgba(94,147,230,.09), transparent 62%),
radial-gradient(48vw 40vw at 6% 16%, rgba(66,197,138,.07), transparent 62%),
radial-gradient(40vw 32vw at 52% 114%, rgba(142,134,224,.055), transparent 64%); }
.galaxy .stars{ opacity:.4; } .galaxy .stars.s2{ opacity:.22; }
[data-theme="light"] .galaxy{ background:
radial-gradient(56vw 42vw at 80% -12%, rgba(53,104,196,.05), transparent 62%),
radial-gradient(48vw 40vw at 6% 16%, rgba(23,138,88,.045), transparent 62%); }
/* subtle background grid element — faded toward edges */
.bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:66px 66px;
-webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 84%);
mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 84%); }
[data-theme="light"] .bg-grid{ background-image:
linear-gradient(rgba(13,21,38,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,21,38,.045) 1px, transparent 1px); }
/* softer button + glow intensity */
.glass-btn.primary{ box-shadow:0 8px 20px rgba(94,147,230,.18); }
.eyebrow .dot, .pip{ box-shadow:0 0 8px rgba(120,219,169,.55); }
/* ---- terminal-style blog tiles ---- */
.blog-term{ width:min(360px,84vw); padding:0; overflow:hidden; text-decoration:none; color:inherit;
display:flex; flex-direction:column; transition:transform .35s var(--ease), border-color .35s var(--ease); }
.blog-term:hover{ transform:translateY(-5px); }
.blog-term .chrome-bar{ padding:11px 14px; }
.term-body{ padding:15px 17px 18px; font-family:var(--font-mono); }
.term-body .ln{ display:block; font-size:12px; line-height:1.7; }
.term-body .c-comment{ color:var(--ink-faint); font-style:italic; }
.term-body .c-kw{ color:var(--accent-bright); }
.bt-tag{ display:inline-block; margin:8px 0 4px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
color:var(--data-bright); border:1px solid var(--glass-border); border-radius:999px; padding:3px 9px; }
.bt-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-0.01em;
margin:8px 0 6px; color:var(--ink); line-height:1.3; }
.bt-desc{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-dim); line-height:1.55; }
.bt-foot{ margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--accent-bright);
display:inline-flex; align-items:center; gap:6px; }
/* blog index — terminal tiles in a responsive grid */
.blog-term-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px;
max-width:var(--maxw); margin:0 auto; padding:14px var(--pad-x) 40px; position:relative; z-index:1; }
.blog-term-grid .blog-term{ width:auto; }
/* ==========================================================================
v16 — light mode is now the default; refined theme switch; polish both modes
========================================================================== */
.theme-toggle{ width:50px; height:26px; border-radius:999px; padding:3px; display:flex; align-items:center;
justify-content:flex-start; border:1px solid var(--glass-border); background:var(--glass-fill);
cursor:pointer; font-size:0; color:transparent; overflow:hidden; flex:none;
transition:background .3s var(--ease), border-color .25s var(--ease); }
.theme-toggle:hover{ border-color:var(--accent); }
.theme-toggle::before{ content:""; width:20px; height:20px; border-radius:50%;
background:linear-gradient(135deg, var(--accent-bright), var(--data-bright));
box-shadow:0 1px 3px rgba(0,0,0,.3); transform:translateX(0); transition:transform .28s var(--ease); }
html[data-theme="light"] .theme-toggle{ background:linear-gradient(90deg, rgba(94,147,230,.20), rgba(66,197,138,.20)); }
html[data-theme="light"] .theme-toggle::before{ transform:translateX(24px); }
/* strong hero tagline emphasis */
.tagline b{ color:var(--ink); font-weight:700; }
/* light-mode polish: crisper glass, softer grid, readable navbar */
[data-theme="light"]{ --bg:#EEF2F9; --bg-2:#FFFFFF; }
[data-theme="light"] body{ background: radial-gradient(ellipse 70% 45% at 50% -10%, #FFFFFF, #EAEFF7 60%); }
[data-theme="light"] .navbar{ background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); }
[data-theme="light"] .brand-name{ color:var(--ink); }
[data-theme="light"] .grain{ opacity:.02; }
[data-theme="light"] .hero h1{ background:linear-gradient(120deg, var(--ink) 55%, #3568C4 100%);
-webkit-background-clip:text; background-clip:text; color:transparent; }
/* ==========================================================================
v17 — light-mode contrast, background texture (waves + blur orbs),
two-column SQL block.
========================================================================== */
/* --- background decorative layers --- */
.orbs{ position:fixed; inset:0; z-index:0 !important; pointer-events:none; overflow:hidden; }
.orbs b{ position:absolute; border-radius:50%; filter:blur(72px); }
.orbs .o1{ width:34vw; height:34vw; left:-8vw; top:6vh; background:radial-gradient(circle, rgba(94,147,230,.30), transparent 66%); }
.orbs .o2{ width:30vw; height:30vw; right:-6vw; top:42vh; background:radial-gradient(circle, rgba(66,197,138,.26), transparent 66%); }
.orbs .o3{ width:26vw; height:26vw; left:34vw; bottom:-10vh; background:radial-gradient(circle, rgba(142,134,224,.20), transparent 66%); }
.waves{ position:fixed; inset:0; z-index:0 !important; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271200%27%20height=%27800%27%3E%3Cpath%20d=%27M-50%2C70%20C300%2C30%20700%2C110%201250%2C50%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C190%20C300%2C230%20700%2C150%201250%2C210%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C300%20C300%2C260%20700%2C340%201250%2C280%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C430%20C300%2C470%20700%2C390%201250%2C450%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C560%20C300%2C520%20700%2C600%201250%2C540%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C690%20C300%2C730%20700%2C650%201250%2C710%27%20fill=%27none%27%20stroke=%27%236E9BE8%27%20stroke-opacity=%270.12%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C760%20C400%2C500%20800%2C560%201250%2C240%27%20fill=%27none%27%20stroke=%27%234FC79A%27%20stroke-opacity=%270.10%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M-50%2C120%20C450%2C360%20850%2C300%201250%2C620%27%20fill=%27none%27%20stroke=%27%238E86E0%27%20stroke-opacity=%270.08%27%20stroke-width=%271.4%27/%3E%3C/svg%3E"); background-size:1200px 800px; opacity:.6; }
[data-theme="light"] .orbs .o1{ background:radial-gradient(circle, rgba(37,99,235,.20), transparent 66%); }
[data-theme="light"] .orbs .o2{ background:radial-gradient(circle, rgba(15,168,94,.18), transparent 66%); }
[data-theme="light"] .orbs .o3{ background:radial-gradient(circle, rgba(124,58,237,.14), transparent 66%); }
[data-theme="light"] .waves{ opacity:.5; }
/* --- LIGHT MODE: make cards pop off the background --- */
[data-theme="light"]{
--bg:#E6ECF7; --bg-2:#F1F5FC;
--ink:#0B1424; --ink-dim:rgba(11,20,36,.70); --ink-faint:rgba(11,20,36,.50);
--glass-fill:rgba(255,255,255,.92); --glass-border:rgba(24,40,74,.14);
--accent:#2563EB; --accent-bright:#2563EB; --blue:#2563EB; --leaf:#0FA85E; --leaf-bright:#0E9A55;
}
[data-theme="light"] body{ background:radial-gradient(ellipse 90% 60% at 50% -10%, #F3F7FD, #DEE6F3 70%); }
[data-theme="light"] .glass{
background:linear-gradient(160deg, #FFFFFF, #F5F8FD);
border:1px solid rgba(24,40,74,.14);
box-shadow:0 8px 26px rgba(24,44,86,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .glass:hover{ box-shadow:0 14px 36px rgba(24,44,86,.16); }
[data-theme="light"] .navbar{ background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); border-color:rgba(24,40,74,.12); }
[data-theme="light"] .tag, [data-theme="light"] .brand-type, [data-theme="light"] .kbadge{ background:#EEF3FB; border-color:rgba(24,40,74,.14); }
[data-theme="light"] .skill-item.key::before{ filter:saturate(1.4); }
[data-theme="light"] .code-panel .code-block, [data-theme="light"] .project-mock, [data-theme="light"] .term-body{ background:#F7FAFE; }
[data-theme="light"] .grain{ opacity:.02; }
[data-theme="light"] .hero h1{ background:linear-gradient(120deg, var(--ink) 55%, #2563EB 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* --- two-column SQL block --- */
.sql-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center; }
.sql-split .code-panel{ max-width:none; margin:0; }
.sql-note .section-kicker{ margin-bottom:12px; }
.sql-note h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,28px);
letter-spacing:-0.02em; margin:0 0 14px; line-height:1.15; }
.sql-note .plain-caption{ max-width:44ch; margin-top:0; font-size:14.5px; }
@media (max-width:820px){ .sql-split{ grid-template-columns:1fr; } }