:root { --ink:#071817; --pine:#0e302c; --green:#74d59b; --lime:#d9f66b; --paper:#f5f5ef; --cloud:#dfe8e0; --muted:#71807a; --line:rgba(7,24,23,.17); --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; --serif:"Playfair Display",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.grid-noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.site-header { width:100%; height:84px; padding:0 clamp(23px,4.2vw,68px); display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:4; color:var(--paper); }
.monogram { font-size:25px; font-weight:800; letter-spacing:-.1em; }
.monogram span { color:var(--lime); }
.nav { display:flex; gap:clamp(18px,3.3vw,52px); font-size:12px; font-weight:700; }
.nav a,.header-link { transition:color .2s ease; }
.nav a:hover,.header-link:hover { color:var(--lime); }
.header-link { font:11px var(--mono); text-transform:uppercase; letter-spacing:.03em; }
.header-link span { color:var(--lime); font:16px var(--sans); }
.menu-button { display:none; border:0; padding:3px; background:transparent; gap:5px; flex-direction:column; }
.menu-button i { display:block; width:22px; height:1px; background:var(--paper); }

.hero { min-height:750px; height:100svh; max-height:930px; padding:150px clamp(23px,9.3vw,150px) 50px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-content { position:relative; z-index:2; max-width:720px; }
.kicker { margin:0; color:var(--green); font:11px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.hero h1 { font-size:clamp(73px,11.4vw,178px); line-height:.79; letter-spacing:-.097em; margin:28px 0 38px; font-weight:800; }
.hero h1 span { color:var(--green); }
.hero-summary { max-width:445px; margin:0; font-size:clamp(16px,1.45vw,21px); line-height:1.5; color:rgba(245,245,239,.77); }
.hero-summary strong { color:var(--paper); font-weight:700; }
.hero-actions { display:flex; align-items:center; gap:29px; margin-top:39px; }
.button { font:11px var(--mono); letter-spacing:.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:18px; }
.button-primary { background:var(--lime); color:var(--ink); padding:15px 18px; transition:transform .2s ease,background .2s ease; }
.button-primary:hover { background:var(--green); transform:translateY(-3px); }
.button-primary span,.button-plain span { font:18px var(--sans); }
.button-plain { color:var(--paper); border-bottom:1px solid rgba(245,245,239,.55); padding-bottom:5px; transition:color .2s ease; }
.button-plain:hover { color:var(--lime); }
.hero-visual { width:min(42vw,610px); aspect-ratio:1; position:absolute; right:clamp(-40px,2vw,35px); top:50%; transform:translateY(-47%); border-radius:50%; border:1px solid rgba(217,246,107,.33); }
.device { width:70%; aspect-ratio:1; position:absolute; top:15%; left:15%; border:1px solid rgba(217,246,107,.7); border-radius:8%; transform:rotate(11deg) translate(19%,-12%); background:#0b2623; box-shadow:18px 21px 0 rgba(116,213,155,.08); }
.device:before,.device:after { content:""; position:absolute; background:repeating-linear-gradient(90deg,var(--lime) 0 5px,transparent 5px 10px); width:66%; height:4px; left:17%; }.device:before { top:-5px; }.device:after { bottom:-5px; }
.device-label { position:absolute; top:13%; left:12%; color:var(--green); font:8px/1.35 var(--mono); letter-spacing:.08em; }
.chip { width:31%; aspect-ratio:1; background:var(--paper); color:var(--ink); position:absolute; left:35%; top:35%; display:grid; place-items:center; font:700 22px var(--mono); box-shadow:0 0 0 7px var(--ink),0 0 0 8px var(--green); }
.trace { position:absolute; height:1px; background:var(--green); transform-origin:left center; opacity:.8; }.trace-one { width:26%; top:24%; left:50%; transform:rotate(25deg); }.trace-two { width:31%; top:55%; left:30%; transform:rotate(158deg); }.trace-three { width:27%; top:70%; left:58%; transform:rotate(-51deg); }.trace-four { width:17%; top:33%; left:30%; transform:rotate(-130deg); }
.node { width:8px; height:8px; border-radius:50%; position:absolute; background:var(--lime); box-shadow:0 0 12px var(--lime); }.node-a { top:19%; right:18%; }.node-b { bottom:17%; left:20%; }.node-c { bottom:14%; right:20%; }
.status { position:absolute; bottom:11%; right:9%; font:8px var(--mono); color:var(--paper); }.status i { width:6px; height:6px; background:var(--green); display:inline-block; border-radius:50%; margin-right:4px; }
.portrait { width:66%; height:78%; position:absolute; left:13%; bottom:3%; z-index:2; overflow:hidden; margin:0; border:1px solid rgba(217,246,107,.75); border-radius:50% 50% 10% 10%; background:var(--green); box-shadow:16px 16px 0 rgba(116,213,155,.22); }
.portrait::after { content:"ROHIT GANORKAR"; position:absolute; right:11px; bottom:11px; padding:5px 7px; background:var(--lime); color:var(--ink); font:7px var(--mono); letter-spacing:.06em; }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.88) contrast(1.05); }
.visual-caption { position:absolute; right:5%; top:88%; margin:0; font:9px var(--mono); color:var(--green); letter-spacing:.06em; transform:rotate(-8deg); }
.scroll-cue { position:absolute; left:clamp(23px,4.2vw,68px); bottom:31px; color:rgba(245,245,239,.5); font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:12px; }.scroll-cue span { width:38px; height:1px; background:var(--green); }

.section { padding:clamp(90px,12vw,180px) clamp(23px,9.3vw,150px); }
.section-label { margin-bottom:clamp(47px,7vw,98px); font:11px var(--mono); text-transform:uppercase; letter-spacing:.05em; display:flex; gap:35px; align-items:center; }.section-label span { color:var(--muted); }
.about-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(34px,10vw,140px); }
.about h2,.projects-heading h2,.skills h2,.contact h2 { margin:0; font-size:clamp(47px,6.5vw,103px); letter-spacing:-.08em; line-height:.91; font-weight:700; }.about h2 em,.projects-heading h2 em,.skills h2 em,.contact h2 em { font:italic 600 1em var(--serif); color:var(--pine); }
.about-copy { padding-top:9px; max-width:405px; }.about-copy p { font-size:16px; line-height:1.68; margin:0 0 20px; }.text-link { display:inline-flex; gap:15px; border-bottom:1px solid var(--ink); padding-bottom:7px; margin-top:19px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.03em; transition:gap .2s ease; }.text-link:hover { gap:22px; }.text-link span { color:var(--pine); font:16px var(--sans); }

.dark-section { color:var(--paper); background:var(--pine); }.dark-section .section-label span { color:var(--green); }.projects-heading { display:grid; grid-template-columns:1.2fr .4fr; gap:45px; align-items:end; margin-bottom:clamp(48px,7vw,110px); }.projects-heading h2 em { color:var(--lime); }.projects-heading p { margin:0; color:rgba(245,245,239,.64); font-size:15px; line-height:1.5; max-width:270px; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(45px,8vw,120px) clamp(25px,5vw,78px); }.project-card { min-width:0; }.feature-card { grid-column:span 2; display:grid; grid-template-columns:1.1fr .9fr; column-gap:clamp(30px,7vw,110px); align-items:start; }.feature-card .project-art { grid-row:span 4; }.project-art { height:clamp(245px,31vw,470px); margin-bottom:21px; overflow:hidden; position:relative; background:#cbdccb; color:var(--ink); }.feature-card .project-art { height:clamp(300px,42vw,590px); }.project-number { color:var(--green); font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; margin-bottom:13px; }.project-card h3 { font-size:clamp(27px,3.2vw,48px); letter-spacing:-.07em; line-height:.97; margin:0 0 16px; font-weight:700; }.project-copy { max-width:480px; font-size:14px; line-height:1.65; margin:0; color:rgba(245,245,239,.7); }.tag-list { display:flex; gap:8px; list-style:none; padding:0; margin:22px 0 0; flex-wrap:wrap; }.tag-list li { border:1px solid rgba(245,245,239,.3); padding:6px 8px; font:9px var(--mono); letter-spacing:.03em; text-transform:uppercase; }
.smart-home { background:#9fc9a8; }.home-body { position:absolute; width:53%; height:44%; background:var(--paper); bottom:13%; left:24%; display:flex; align-items:end; gap:9%; padding:0 10% 0; }.home-body div { background:var(--ink); width:20%; height:45%; }.home-roof { position:absolute; width:48%; aspect-ratio:1; background:var(--ink); transform:rotate(45deg); top:16%; left:26.5%; }.home-body,.home-roof { z-index:1; }.smart-home p { position:absolute; margin:0; bottom:6%; right:6%; z-index:2; font:10px var(--mono); color:var(--pine); letter-spacing:.08em; }.signal { position:absolute; border:2px solid var(--green); border-left:0; border-bottom:0; border-radius:0 100% 0 0; transform:rotate(-44deg); }.signal-one { width:17%; height:17%; top:11%; right:18%; }.signal-two { width:26%; height:26%; top:5%; right:13%; }.signal-three { width:35%; height:35%; top:-1%; right:8%; }
.robot-art { background:#c1b3ff; }.robot-eye { position:absolute; width:36%; aspect-ratio:1; background:var(--lime); border:14px solid var(--ink); border-radius:50%; left:32%; top:18%; box-shadow:inset 0 0 0 7px #8674d0; }.robot-wheel { position:absolute; width:25%; aspect-ratio:1; border:12px solid var(--ink); bottom:9%; border-radius:50%; background:var(--paper); }.robot-wheel.left { left:16%; }.robot-wheel.right { right:16%; }.robot-line { position:absolute; bottom:18%; left:28%; width:44%; height:20%; border:5px solid var(--ink); border-top:0; }.robot-art span { position:absolute; right:7%; top:8%; font:10px var(--mono); letter-spacing:.06em; }
.controller-art { background:#f3bb60; }.controller-screen { width:52%; height:48%; background:var(--ink); position:absolute; top:18%; left:24%; color:var(--lime); padding:9%; border-radius:4px; font:11px var(--mono); }.controller-screen b { display:block; font-size:clamp(24px,4vw,51px); letter-spacing:-.1em; margin-top:4px; }.controller-screen i { height:4px; background:var(--lime); width:72%; position:absolute; left:9%; bottom:16%; }.controller-knob { width:15%; aspect-ratio:1; border:5px solid var(--ink); border-radius:50%; position:absolute; bottom:11%; left:42.5%; }.controller-art p { position:absolute; bottom:5%; right:6%; margin:0; font:9px var(--mono); }.sensor-art { background:#78baad; }.sensor-glow { position:absolute; width:22%; aspect-ratio:1; border-radius:50%; background:var(--lime); top:39%; left:39%; box-shadow:0 0 50px 20px rgba(217,246,107,.65); }.sensor-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(7,24,23,.65); border-radius:50%; transform:translate(-50%,-50%); }.sensor-ring.one { width:30%; aspect-ratio:1; }.sensor-ring.two { width:55%; aspect-ratio:1; }.sensor-ring.three { width:84%; aspect-ratio:1; }.sensor-art span { position:absolute; bottom:8%; left:8%; font:11px/1.1 var(--mono); letter-spacing:.08em; }

.skills-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(38px,11vw,160px); }.skills h2 em { color:var(--green); }.skill-groups { border-top:1px solid var(--line); }.skill-group { padding:21px 0 24px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34% 1fr; gap:16px; }.skill-group p { font:10px var(--mono); letter-spacing:.04em; text-transform:uppercase; margin:5px 0 0; color:var(--muted); }.skill-group ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 16px; }.skill-group li { font-size:16px; font-weight:600; letter-spacing:-.03em; }

.soft-section { background:var(--cloud); }.experience-list { border-top:1px solid var(--line); }.experience-item { display:grid; grid-template-columns:26% 1fr; gap:25px; padding:27px 0 31px; border-bottom:1px solid var(--line); }.time { font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; padding-top:6px; }.experience-item h3 { margin:0 0 5px; font-size:clamp(21px,2.5vw,36px); letter-spacing:-.06em; line-height:1.05; }.company { margin:0 0 17px; color:var(--pine); font-weight:700; font-size:14px; }.experience-item div:last-child > p:last-child { max-width:600px; line-height:1.58; margin:0; font-size:14px; }

.contact { min-height:600px; padding:clamp(90px,11vw,155px) clamp(23px,9.3vw,150px); color:var(--paper); background:var(--ink); position:relative; overflow:hidden; }.contact-content { position:relative; z-index:2; }.contact h2 { margin-top:30px; }.contact h2 em { color:var(--green); }.contact-actions { margin-top:43px; display:flex; align-items:center; gap:28px; }.contact-button { display:inline-flex; gap:24px; align-items:center; border-bottom:1px solid rgba(245,245,239,.6); padding-bottom:9px; font:13px var(--mono); letter-spacing:.02em; transition:color .2s ease; }.contact-button:hover { color:var(--lime); }.contact-button span { color:var(--lime); font:20px var(--sans); }.linkedin-link { color:var(--green); font:11px var(--mono); border-bottom:1px solid var(--green); padding-bottom:7px; text-transform:uppercase; }.contact-circuit { position:absolute; right:7%; bottom:-16%; width:min(43vw,570px); aspect-ratio:1; border:1px solid rgba(116,213,155,.4); border-radius:50%; transform:rotate(16deg); }.contact-circuit span { position:absolute; display:grid; place-items:center; width:33%; aspect-ratio:1; top:33.5%; left:33.5%; color:var(--ink); background:var(--lime); border-radius:50%; font:700 clamp(25px,4vw,55px) var(--mono); }.contact-circuit i { position:absolute; width:28%; height:1px; background:var(--green); transform-origin:left center; }.contact-circuit i:nth-child(1) { top:21%; left:23%; transform:rotate(45deg); }.contact-circuit i:nth-child(2) { top:61%; left:60%; transform:rotate(-28deg); }.contact-circuit i:nth-child(3) { top:50%; left:9%; transform:rotate(170deg); }.contact-circuit i:nth-child(4) { top:80%; left:31%; transform:rotate(-95deg); }
footer { padding:21px clamp(23px,4.2vw,68px); color:rgba(245,245,239,.6); background:var(--ink); border-top:1px solid rgba(245,245,239,.21); display:flex; justify-content:space-between; font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; } footer a { color:var(--paper); } footer a:hover { color:var(--lime); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:760px) { .site-header { height:70px; }.nav,.header-link { display:none; }.menu-button { display:flex; }.nav.open { display:flex; position:absolute; flex-direction:column; gap:16px; top:70px; right:0; left:0; padding:22px 24px; background:var(--ink); border-top:1px solid rgba(245,245,239,.2); font:12px var(--mono); text-transform:uppercase; letter-spacing:.04em; }.hero { min-height:670px; padding-top:122px; align-items:flex-start; }.hero h1 { font-size:clamp(67px,19vw,102px); margin-top:26px; }.hero-summary { max-width:300px; font-size:15px; }.hero-actions { flex-direction:column; align-items:flex-start; gap:20px; margin-top:29px; }.hero-visual { width:84vw; right:-36vw; top:59%; opacity:.8; }.visual-caption { display:none; }.scroll-cue { bottom:22px; }.about-grid,.skills-layout,.projects-heading { grid-template-columns:1fr; }.about-copy { padding-top:0; }.projects-heading { margin-bottom:55px; }.project-grid { grid-template-columns:1fr; }.feature-card { grid-column:auto; display:block; }.project-art,.feature-card .project-art { height:min(74vw,400px); }.section-label { margin-bottom:45px; }.skill-group { grid-template-columns:1fr; gap:13px; }.experience-item { grid-template-columns:1fr; gap:11px; }.time { padding-top:0; }.contact { min-height:590px; }.contact-circuit { width:80vw; right:-25vw; bottom:-11%; }.contact h2 { font-size:clamp(48px,13vw,82px); }.contact-actions { flex-direction:column; align-items:flex-start; gap:21px; }.contact-button { gap:12px; font-size:11px; }.contact-button span { font-size:16px; }footer { flex-wrap:wrap; row-gap:18px; }footer span:nth-child(2) { order:3; width:100%; }}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }