/* ==========================================================================
   Kalaivanan Ramesh, portfolio home — v3.
   Card-based, centered, light. Inter. Pill nav, pastel art panels,
   watercolor footer. Reference: websiddu.com-style home.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --ink:#101318;
  --t1:#40454E;
  --t2:#69707B;
  --t3:#9AA0AA;
  --line:#EAECF0;
  --blue:#2E5BFF;
  --blue-t:#EEF2FF;

  --max:1040px;
  --pad:clamp(20px,5vw,48px);
  --r-card:20px;
  --r-art:14px;

  --tk-l:-0.035em;
  --tk-m:-0.02em;
  --tk-s:-0.01em;

  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 1px 2px rgba(16,19,24,.05);
  --shadow-lift:0 14px 34px rgba(16,19,24,.09);
  --shadow-m:0 12px 30px rgba(18,20,28,.14);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400; font-size:16px; line-height:1.6;
  font-feature-settings:'ss01','cv05','calt';
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100% } svg{ display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p{ margin:0 }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad) }

/* ── nav ──────────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50; padding:14px var(--pad);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.nav__in{ max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px }
.nav__sp{ justify-self:end }
.nav__in > .nav__sp:first-child{ justify-self:start }

.pill{ display:flex; align-items:center; gap:4px; padding:4px;
  background:#F4F6F9; border:1px solid var(--line); border-radius:999px }
.pill a{ display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  font-size:13.5px; font-weight:500; letter-spacing:var(--tk-s); color:var(--t2);
  transition:color .2s var(--ease), background .2s var(--ease) }
.pill a svg{ width:14px; height:14px; fill:currentColor }
.pill a:hover{ color:var(--ink) }
.pill a.act{ background:var(--blue); color:#fff; font-weight:600;
  box-shadow:0 2px 8px rgba(46,91,255,.35) }

/* ── hero: fills the first screen; work appears on scroll ─────────── */
/* nav is ~62px tall (14px padding ×2 + 30px logo + border-ish) */
.hero{ position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:calc(84vh - 62px); min-height:calc(84svh - 62px);
  padding-top:0; padding-bottom:84px }
.hero h1{ font-size:clamp(2rem,4.6vw,2.9rem); font-weight:700; line-height:1.1; letter-spacing:var(--tk-l) }
.hero p{ margin-top:18px; max-width:62ch;
  font-size:clamp(16.5px,1.9vw,19px); line-height:1.6; letter-spacing:var(--tk-s); color:var(--t1) }
.hero p b{ color:var(--ink); font-weight:600 }
.hero__pos{ margin-top:16px !important; font-size:clamp(15px,1.7vw,16.5px) !important;
  font-weight:650; letter-spacing:var(--tk-s); color:var(--ink) !important }

.hero__cue{ position:absolute; left:50%; bottom:clamp(22px,4vh,44px); transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card);
  color:var(--t2); animation:cue 2.2s var(--ease) infinite;
  transition:color .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease) }
.hero__cue svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.hero__cue:hover{ color:var(--blue); border-color:var(--blue); box-shadow:var(--shadow-lift);
  animation-play-state:paused }
@keyframes cue{
  0%,100%{ transform:translate(-50%,0) }
  50%{ transform:translate(-50%,7px) }
}
/* short landscape screens (phones rotated): let the hero breathe instead of cramming */
@media (max-height:520px){
  .hero{ min-height:0; padding-block:72px 110px }
}

.hero__x{ margin-top:clamp(24px,3.5vw,36px); display:flex; flex-wrap:wrap; gap:10px 24px;
  font-size:14px; font-weight:500; letter-spacing:var(--tk-s); color:var(--t2) }
.hero__x span{ color:var(--ink); font-weight:600 }
.hero__x a{ border-bottom:1px solid var(--line); padding-bottom:2px }
.hero__x a:hover{ color:var(--blue); border-bottom-color:var(--blue) }

/* ── story blocks (the four "problems I ran into") ────────────────── */
.tale{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding-block:clamp(44px,6.5vw,88px); border-top:1px solid var(--line) }
.tale:first-of-type{ border-top:0; padding-top:clamp(18px,3vw,36px) }
.tale--flip .tale__v{ order:-1 }
@media (max-width:820px){
  .tale{ grid-template-columns:1fr; gap:26px }
  .tale--flip .tale__v{ order:0 }
}

.tale__t > p:not(.tale__hit):not(.tale__note){
  font-size:clamp(16px,1.75vw,18.5px); line-height:1.65; letter-spacing:var(--tk-s); color:var(--t1) }
.tale__t > p + p{ margin-top:14px }
.tale__hit{ margin-top:24px !important; font-size:clamp(19px,2.4vw,24px); font-weight:650;
  line-height:1.35; letter-spacing:var(--tk-m); color:var(--ink) }
.tale__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:clamp(15px,1.7vw,16.5px); font-weight:600; letter-spacing:var(--tk-s); color:var(--blue) }
.tale__cta span{ transition:transform .3s var(--ease) }
.tale__cta:hover span{ transform:translateX(5px) }
.tale__cta--soon{ color:var(--t2); font-weight:550; cursor:default }
.tale__note{ margin-top:14px !important; font-size:13px; line-height:1.55; color:var(--t3); max-width:46ch }

/* project category, so range reads at a glance */
.tale__k{ margin-bottom:18px !important; font-size:11px !important; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink) }
.tale__k b{ color:var(--t3); font-weight:600 }

/* role, scope and status: the useful part, at a size you can actually read */
.tale__meta{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  display:grid; gap:11px }
.tale__meta > div{ display:flex; gap:16px; align-items:baseline }
.tale__meta b{ flex:none; width:52px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3); line-height:1.7 }
.tale__meta span{ font-size:14.5px; line-height:1.55; letter-spacing:var(--tk-s); color:var(--t1) }
@media (max-width:520px){
  .tale__meta > div{ flex-direction:column; gap:3px }
  .tale__meta b{ width:auto }
}

/* art panels reused inside stories: bigger, no card margins */
.tale__v .card__art{ margin:0; min-height:clamp(280px,32vw,400px); border-radius:18px }

/* ── section headers ──────────────────────────────────────────────── */
.sec{ padding-top:clamp(34px,4.5vw,62px) }
.sh{ text-align:center; font-size:clamp(1.45rem,2.8vw,1.75rem); font-weight:700;
  letter-spacing:var(--tk-m) }
.sh__s{ margin-top:10px; text-align:center; font-size:14.5px; color:var(--t2); letter-spacing:var(--tk-s) }
.sh + .grid, .sh + .about{ margin-top:clamp(26px,3.5vw,40px) }
.sh__s + .grid{ margin-top:clamp(22px,3vw,34px) }

/* ── work cards ───────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:760px){ .grid{ grid-template-columns:1fr } }

.card{ display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift) }

.card__body{ padding:24px 24px 18px }
.card__body h3{ font-size:18px; font-weight:650; letter-spacing:var(--tk-m); line-height:1.3 }
.card__body > p{ margin-top:10px; font-size:14.5px; line-height:1.6; letter-spacing:var(--tk-s); color:var(--t1) }
.card__role{ margin-top:12px !important; font-size:12.5px !important; color:var(--t3) !important;
  font-weight:500; letter-spacing:0 !important }
.card__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:13px;
  font-size:14px; font-weight:600; letter-spacing:var(--tk-s); color:var(--ink) }
.card__cta span{ transition:transform .3s var(--ease) }
.card__cta:hover{ color:var(--blue) }
.card__cta:hover span{ transform:translateX(4px) }
.card__cta--soon{ color:var(--t3); font-weight:500; cursor:default }

.card__art{ position:relative; margin:6px 14px 14px; flex:1;
  min-height:240px; border-radius:var(--r-art); overflow:hidden;
  display:grid; place-items:center; align-content:center; padding:26px; gap:12px }
.card__art::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 18% 8%, rgba(255,255,255,.75), transparent 60%) }
.card__art > *{ position:relative }

.art--tippd  { background:linear-gradient(140deg,#FDECE4,#F9DECF) }
.art--swiggy { background:linear-gradient(140deg,#FFF0DA,#FFE0B5) }
.art--ccmc   { background:linear-gradient(140deg,#E3F4EE,#CFEADF) }
.art--fit    { background:linear-gradient(140deg,#FCE9EE,#F4D6E2) }
.art--cred   { background:linear-gradient(140deg,#ECE8FA,#DCD5F3) }
.art--rapido { background:linear-gradient(140deg,#FFF6D9,#FFECAF) }
.art--digri  { background:linear-gradient(140deg,#E4EFFB,#CFE3F8) }
.art--track  { background:linear-gradient(140deg,#EAF0F4,#D6E2EA) }
.art--veril  { background:linear-gradient(140deg,#E9F6E3,#D5EDC9) }
.art--vosay  { background:linear-gradient(140deg,#EFE9FC,#DFD4F8) }

/* ── mini mocks ───────────────────────────────────────────────────── */
.m{ background:#fff; border-radius:14px; box-shadow:var(--shadow-m);
  font-size:11px; line-height:1.4; letter-spacing:0 }
.m--dark{ background:#17181D; color:#F4F5F7 }

/* Tippd: tip screen */
.m-tip{ width:min(206px,100%); padding:18px }
.m-tip__t{ font-size:14px; font-weight:650 }
.m-tip__s{ margin-top:3px; font-size:10.5px; color:#9BA0AB }
.m-tip__chips{ display:flex; gap:7px; margin-top:13px }
.m-tip__chips span{ flex:1; text-align:center; padding:6px 0; border-radius:8px;
  border:1px solid rgba(255,255,255,.16); font-weight:550; font-size:11.5px }
.m-tip__chips .on{ background:var(--blue); border-color:var(--blue); font-weight:650 }
.m-tip__btn{ margin-top:12px; text-align:center; padding:8px 0; border-radius:9px;
  background:#fff; color:#17181D; font-weight:650; font-size:11.5px }

/* Swiggy: map + notification */
.m-map{ width:min(212px,100%); padding:10px; position:relative }
.m-map svg{ width:100% }
.m-map__eta{ position:absolute; top:8px; left:10px; padding:3px 8px; border-radius:6px;
  background:#17181D; color:#fff; font-size:9.5px; font-weight:600 }
.m-note{ width:min(226px,100%); padding:10px 12px; display:flex; gap:9px; align-items:flex-start }
.m-note__ic{ flex:none; width:22px; height:22px; border-radius:50%; background:#22B573; position:relative }
.m-note__ic::after{ content:''; position:absolute; inset:6px; border-radius:50%;
  border:2px solid #fff; border-color:#fff transparent transparent #fff; transform:rotate(45deg) }
.m-note b{ display:block; font-size:11px; font-weight:650 }
.m-note span:last-child{ font-size:10px; color:#7B818C }

/* CCMC: skeleton dashboard */
.m-dash{ width:min(246px,100%); padding:13px }
.m-dash__top{ display:flex; gap:4px }
.m-dash__top i{ width:6px; height:6px; border-radius:50%; background:#E1E5EB }
.m-dash__tiles{ display:flex; gap:7px; margin-top:11px }
.m-dash__tiles span{ flex:1; height:26px; border-radius:6px; background:#F1F3F7 }
.m-dash__bars{ display:flex; align-items:flex-end; gap:7px; height:58px; margin-top:12px }
.m-dash__bars i{ flex:1; height:var(--h,40%); border-radius:4px 4px 2px 2px; background:#DDE3EC }
.m-dash__bars .hot{ background:var(--blue) }

/* Fitnethix: rest timer */
.m-fit{ width:min(196px,100%); padding:16px }
.m-fit__k{ font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#8B909B }
.m-fit__n{ margin-top:7px; font-size:27px; font-weight:700; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums }
.m-fit__bar{ margin-top:10px; height:5px; border-radius:99px; background:rgba(255,255,255,.14) }
.m-fit__bar i{ display:block; width:62%; height:100%; border-radius:99px; background:#22B573 }
.m-fit__r{ margin-top:9px; font-size:10px; color:#8B909B }

/* CRED: statement */
.m-cred{ width:min(222px,100%); padding:16px }
.m-cred__row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.m-cred__row i{ display:block; font-style:normal; font-size:9.5px; color:#8B909B }
.m-cred__row b{ display:block; font-size:17px; font-weight:700; letter-spacing:-0.02em }
.m-cred__pay{ padding:6px 11px; border-radius:8px; background:#1E9E62; color:#fff;
  font-size:10px; font-weight:650; white-space:nowrap }
.m-cred__ft{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.12) }
.m-cred__ft i{ font-style:normal; font-size:9.5px; color:#8B909B }
.m-cred__ft b{ font-size:11px; font-weight:600; color:#C9CCD3 }

/* Rapido: cancelled rides */
.m-stack{ display:grid; gap:9px; width:min(224px,100%); justify-items:center }
.m-ride{ width:100%; padding:10px 12px; display:flex; align-items:center; gap:9px }
.m-ride__av{ flex:none; width:22px; height:22px; border-radius:50%; background:#E7EAF0 }
.m-ride__tx{ flex:1; min-width:0 }
.m-ride__tx b{ display:block; font-size:10.5px; font-weight:650 }
.m-ride__tx{ font-size:9.5px; color:#8B909B }
.m-ride__bd{ flex:none; padding:3px 8px; border-radius:6px; background:#FDE8E6; color:#C0392B;
  font-size:9px; font-weight:650; letter-spacing:.02em }
.m-ride.is-off{ opacity:.62 }
.m-ride.is-off .m-ride__tx b{ text-decoration:line-through; text-decoration-color:#B9BEC7 }
.m-ride__wait{ font-size:10px; font-weight:550; color:#8A6D1B; opacity:.85 }

/* digri.ai: a profile line that carries its source */
.m-prof{ width:min(232px,100%); padding:16px }
.m-prof__k{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#9BA0AB }
.m-prof__n{ margin-top:5px; font-size:14px; font-weight:650; letter-spacing:var(--tk-s) }
.m-prof__row{ margin-top:9px; display:flex; align-items:center; gap:7px;
  padding:8px 10px; border-radius:9px; background:#F4F6F9 }
.m-prof__row b{ font-size:11px; font-weight:650 }
.m-prof__row span{ font-size:9.5px; color:#8B909B }
.m-prof__row em{ margin-left:auto; font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:.02em; color:#0E7C6B; white-space:nowrap }
.m-prof__f{ margin-top:11px; font-size:9.5px; color:#9BA0AB }

/* ── parked: sunset case studies. Markup removed from index.html, styles kept so the
      Swiggy, CRED, Rapido, Trackchain, Veril and Vosay blocks can be restored as-is. ── */

/* Digri: lesson with an AI hint */
.m-lrn{ width:min(222px,100%); padding:14px }
.m-lrn__k{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8B909B }
.m-lrn__bar{ margin-top:9px; height:5px; border-radius:99px; background:#EEF1F5 }
.m-lrn__bar i{ display:block; width:58%; height:100%; border-radius:99px; background:var(--blue) }
.m-lrn__ai{ margin-top:12px; display:flex; gap:8px; align-items:flex-start;
  font-size:10.5px; line-height:1.5; color:#40454E }
.m-lrn__ai span{ flex:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#7C5CFF,#2E5BFF) }

/* Trackchain: shipment checkpoints */
.m-trk{ width:min(226px,100%); padding:14px; display:grid; gap:11px }
.m-trk__row{ display:flex; align-items:center; gap:9px; font-size:10.5px; font-weight:550; color:#40454E }
.m-trk__row i{ flex:none; width:10px; height:10px; border-radius:50%; border:2px solid #D6DCE4 }
.m-trk__row i.done{ background:#22B573; border-color:#22B573 }
.m-trk__row b{ margin-left:auto; padding:3px 8px; border-radius:6px;
  background:#FCF0DA; color:#9A6B0F; font-size:9px; font-weight:650; white-space:nowrap }

/* Veril: verified skill */
.m-ver{ width:min(206px,100%); padding:16px }
.m-ver__t{ font-size:13px; font-weight:650 }
.m-ver__s{ margin-top:4px; font-size:10px; line-height:1.5; color:#8B909B }
.m-ver__bd{ display:inline-block; margin-top:12px; padding:5px 12px; border-radius:999px;
  background:#1E9E62; color:#fff; font-size:10.5px; font-weight:650 }

/* Vosay: voice waveform */
.m-vox{ width:min(206px,100%); padding:18px 16px; text-align:center }
.m-vox__wave{ display:flex; justify-content:center; align-items:center; gap:4px; height:30px }
.m-vox__wave i{ width:4px; border-radius:99px; background:#A78BFA; height:10px }
.m-vox__wave i:nth-child(2){ height:18px } .m-vox__wave i:nth-child(3){ height:28px }
.m-vox__wave i:nth-child(4){ height:14px } .m-vox__wave i:nth-child(5){ height:24px }
.m-vox__wave i:nth-child(6){ height:16px } .m-vox__wave i:nth-child(7){ height:8px }
.m-vox__t{ margin-top:10px; font-size:12px; font-weight:600 }
.m-vox__s{ margin-top:4px; font-size:10px; color:#8B909B }

/* ── about ────────────────────────────────────────────────────────── */
.about{ max-width:620px; margin-inline:auto }
.about p{ font-size:15.5px; line-height:1.7; letter-spacing:var(--tk-s); color:var(--t1) }
.about p + p{ margin-top:16px }
.about p b{ color:var(--ink); font-weight:600 }
.about__lead{ font-size:clamp(20px,2.7vw,26px) !important; font-weight:650; line-height:1.32;
  letter-spacing:var(--tk-m); color:var(--ink) !important }
.about__lead + p{ margin-top:18px }
.about p:last-child{ font-size:14.5px; color:var(--t2) }

/* ── footer ───────────────────────────────────────────────────────── */
.foot{ margin-top:clamp(64px,9vw,110px); position:relative }
.foot__in{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px;
  padding-top:34px; border-top:1px solid var(--line) }
.foot h2{ font-size:19px; font-weight:700; letter-spacing:var(--tk-m) }
.foot__in p{ margin-top:8px; font-size:14px; color:var(--t2); letter-spacing:var(--tk-s); max-width:40ch }
.foot__m{ display:inline-block; margin-top:6px; font-size:14px; font-weight:550; color:var(--t1);
  border-bottom:1px solid var(--line); padding-bottom:1px }
.foot__m:hover{ color:var(--blue); border-bottom-color:var(--blue) }
.foot__l{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; font-weight:550;
  color:var(--t2); letter-spacing:var(--tk-s) }
.foot__l a:hover{ color:var(--ink) }
@media (max-width:640px){ .foot__in{ flex-direction:column } }

.foot__scape{ width:100%; height:clamp(58px,7vw,96px); margin-top:clamp(30px,5vw,56px);
  opacity:.42 }

/* ── reveal ───────────────────────────────────────────────────────── */
[data-r]{ opacity:0; transform:translateY(12px); transition:opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms) }
[data-r].in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important }
  [data-r]{ opacity:1 !important; transform:none !important }
}

/* ── small screens ────────────────────────────────────────────────── */
@media (max-width:560px){
  .pill a span{ display:none }
  .pill a{ padding:8px 12px }
  .pill a svg{ width:15px; height:15px }
}