/* kranthiboggula.com — v5 "route". Deep-space theme: starfield, holographic HUD map panel, cyan signal + amber route; one typeface (Exo 2).
   Deliberately single (dark) theme. Layout: career chapters beside a sticky HUD chart that zooms to each place (top band on phones), then work list, training, contact. */
:root{
  --space:#04060D; --space-2:#0A1024; --panel:rgba(12,22,48,.62); --ink:#E7EDFF; --ink-2:#9DA9CB; --line:rgba(130,170,255,.18);
  --cyan:#6FE7FF; --cyan-dim:rgba(111,231,255,.55); --amber:#FFB547; --on-amber:#1A1206;
  --font:"Exo 2","Segoe UI",system-ui,sans-serif;
  --top:60px; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 12px);background:var(--space)}
body{margin:0;color:var(--ink);font:400 17px/1.62 var(--font);-webkit-font-smoothing:antialiased;
  background-color:var(--space);
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1px 1px at 68% 32%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 74%,rgba(190,225,255,.7),transparent 60%),
    radial-gradient(1px 1px at 88% 62%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 52% 8%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 24% 52%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 90%,rgba(255,220,180,.55),transparent 60%),
    radial-gradient(1px 1px at 6% 86%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(60% 50% at 85% 0%,rgba(40,80,200,.22),transparent 70%),
    radial-gradient(50% 40% at 0% 60%,rgba(20,140,170,.12),transparent 70%);
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,310px 310px,310px 310px,530px 530px,530px 530px,100% 100%,100% 100%;
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--space)}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--cyan);color:var(--space)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
p,ul,ol,dl{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--on-amber);padding:8px 12px;z-index:90}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.ico{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(4,6,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{height:var(--top);display:flex;align-items:center;gap:24px;max-width:1480px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mark{font-size:16px;font-weight:800;letter-spacing:.14em;text-decoration:none;color:var(--cyan);padding:7px 10px 6px 12px;border:1px solid var(--cyan-dim);border-radius:4px;line-height:1;box-shadow:0 0 18px rgba(111,231,255,.18),inset 0 0 12px rgba(111,231,255,.12)}
.mark:hover{background:var(--cyan);color:var(--space)}
.top nav{display:flex;gap:clamp(14px,2.8vw,34px);margin-left:auto;overflow-x:auto;scrollbar-width:none}
.top nav a{font-size:14.5px;font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--ink-2);padding:8px 0;white-space:nowrap}
.top nav a:hover{color:var(--cyan);text-shadow:0 0 12px rgba(111,231,255,.6)}

/* route */
.route{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"steps chart";max-width:1480px;margin:0 auto}
.steps{grid-area:steps;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:clamp(16px,3vw,44px)}
.chart{grid-area:chart;position:sticky;top:calc(var(--top) + env(safe-area-inset-top,0px) + 12px);height:calc(100svh - var(--top) - env(safe-area-inset-top,0px) - 28px);margin:0 max(16px,env(safe-area-inset-right,0px)) 16px 0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:radial-gradient(90% 70% at 60% 35%,rgba(30,70,160,.35),transparent 70%),linear-gradient(180deg,rgba(10,18,40,.92),rgba(6,10,24,.96));
  border:1px solid rgba(111,231,255,.22);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 60px rgba(40,110,255,.16),inset 0 0 80px rgba(60,140,255,.08)}
.chart::before,.chart::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cyan);pointer-events:none;z-index:2;opacity:.8}
.chart::before{top:10px;left:10px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.chart::after{top:10px;right:10px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.chart svg{flex:1;min-height:0;width:100%;display:block}
.step{min-height:80svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:56px;max-width:600px}
.step.hero{min-height:calc(100svh - var(--top));padding-block:24px 64px;gap:18px}

.face{width:100px;height:100px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--space),0 0 0 3px var(--cyan),0 0 30px rgba(111,231,255,.35)}
.status{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
h1{font-size:clamp(40px,4.8vw,74px);line-height:.98;font-weight:800;letter-spacing:-.01em}
h1 span{display:block;background:linear-gradient(90deg,var(--cyan),#8FB7FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.title{font-size:clamp(16px,1.35vw,18.5px);font-weight:600;color:var(--amber);letter-spacing:.02em}
.lead{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--ink-2);max-width:36em}
.glance{display:grid;gap:10px}
.glance div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:baseline}
.glance dt{font-size:18px;font-weight:700;color:var(--cyan)}
.glance dd{margin:0;font-weight:600;font-size:16px;line-height:1.35}
.glance dd span{display:block;font-weight:400;font-size:15px;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700;letter-spacing:.04em;text-decoration:none;padding:14px 22px;border-radius:6px;background:var(--amber);color:var(--on-amber);box-shadow:0 0 24px rgba(255,181,71,.28);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,181,71,.5)}
.btn.ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan-dim)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--cyan),0 0 22px rgba(111,231,255,.25)}

.yr{font-size:clamp(70px,8.4vw,124px);line-height:.85;font-weight:800;letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 28px rgba(111,231,255,.45);transition:color .5s,text-shadow .5s}
.js .step:not(.is-on) .yr{color:transparent;-webkit-text-stroke:1.5px rgba(130,170,255,.35);text-shadow:none}
.when{font-size:14.5px;font-weight:600;letter-spacing:.04em;color:var(--amber)}
.step h2{font-size:clamp(26px,2.4vw,35px);line-height:1.1;font-weight:700}
.org{font-size:16px;color:var(--ink-2);margin-top:-6px}
.pts{padding:0;list-style:none;display:grid;gap:10px}
.pts li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.58;color:#D5DDF5}
.pts li::before{content:"";position:absolute;left:2px;top:.58em;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--cyan)}
.kit{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kit li{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border-radius:8px;background:rgba(14,26,58,.7);border:1px solid var(--line);color:var(--cyan)}
.kit span{display:grid;line-height:1.2;font-size:14px;font-weight:600;color:var(--ink)}
.kit small{font-size:12px;font-weight:500;color:var(--ink-2)}
.body{font-size:17px;color:var(--ink-2)}
.partners{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.partners li{font-size:14.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(14,26,58,.6)}

/* chart drawing (user units; --k = current zoom so lines keep their on-screen weight) */
.grat line{stroke:rgba(111,231,255,.12);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 6}
.grat text{font:600 9px var(--font);letter-spacing:.14em;fill:rgba(111,231,255,.55)}
.land{fill:none;stroke:rgba(120,165,255,.42);stroke-width:max(1.4px,calc(3.4px * var(--k,1)));stroke-linecap:round;transition:opacity .9s}
.fine{fill:none;stroke:rgba(111,231,255,.78);stroke-linecap:round;opacity:0;transition:opacity .9s}
.f-ind{stroke-width:1.15}.f-tz{stroke-width:.95}.f-car{stroke-width:1}
.sites{opacity:0;transition:opacity .6s}
.sites circle{fill:var(--amber);opacity:0;transition:opacity .35s;transition-delay:var(--d,0ms)}
.r{fill:none;stroke:var(--amber);stroke-width:calc(3px * var(--k,1));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(255,181,71,.8));transition:stroke-dashoffset 1.6s cubic-bezier(.6,.05,.25,1),opacity .5s}
.r3{fill:none;stroke:var(--amber);stroke-width:calc(2px * var(--k,1));stroke-dasharray:calc(5px * var(--k,1)) calc(5px * var(--k,1));transition:opacity .8s}
.lab{opacity:0;transition:opacity .6s}
.lab text,.car-lbl{fill:#F2F7FF;font-family:var(--font);font-weight:700;paint-order:stroke;stroke:#050A18;stroke-linejoin:round}
.lab-region text{stroke-width:4px}.lab-ind text{stroke-width:1.2px}.lab-tz text{stroke-width:1.1px}.lab-rw text{stroke-width:1.5px}.car-lbl{stroke-width:1px}
.city circle{fill:#0A1430;stroke:var(--cyan);stroke-width:2.4;transition:fill .5s}
.city text{font-size:13px;letter-spacing:.1em}
.city text.sm{font-size:11px}
.city .pulse{fill:none;stroke:var(--cyan);transform-origin:165.6px 256.4px;animation:ping 2.6s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.6);opacity:0}}
.mk{fill:var(--cyan)}.mk.on{fill:var(--amber)}
.lab-ind text{font-size:4.4px}.lab-ind .sub{font-size:2.9px;font-weight:600;fill:#C9D6F5}.lab-ind .sm{font-size:3.2px}
.lab-tz text{font-size:4px}.lab-tz .sm{font-size:3.2px}
.lab-rw text{font-size:5.6px}.lab-rw .sm{font-size:4.4px}
.ctry{font-weight:600!important;letter-spacing:.3em;fill:rgba(111,231,255,.8)!important}
.lab-ind .ctry{font-size:3px}.lab-tz .ctry{font-size:2.8px}.lab-rw .ctry{font-size:3.6px}.car-layer .ctry{font-size:2.8px}
.car-layer{opacity:0;transition:opacity .8s}
.car-lbl{font-size:3.8px}
.hub{fill:var(--amber)}
.spoke{stroke:var(--amber);stroke-width:.34;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,.05,.25,1)}
.office{fill:#0A1430;stroke:var(--cyan);stroke-width:.5;opacity:0;transition:opacity .6s,fill .6s}
.sweep{fill:none;stroke:var(--cyan);stroke-width:.35;opacity:0;transform-origin:165.6px 256.4px}

/* views: which layers show at each zoom (no-JS rests on "region" with the whole route drawn) */
.chart .grat{transition:opacity .6s}
.chart:not([data-view="region"]) .grat{opacity:0}
.chart:not([data-view="region"]) .land{opacity:.75}
.chart[data-view="rw"] .land-car,.chart[data-view="car"] .land-car{opacity:0}
.chart[data-view="region"] .lab-region{opacity:1}
.chart[data-view="ind"] .f-ind,.chart[data-view="ind"] .st-ind,.chart[data-view="ind"] .lab-ind{opacity:1}
.chart[data-view="tz"] .f-tz,.chart[data-view="tz"] .st-tz,.chart[data-view="tz"] .lab-tz{opacity:1}
.chart[data-view="rw"] .f-car,.chart[data-view="rw"] .st-car,.chart[data-view="rw"] .lab-rw{opacity:1}
.chart[data-view="car"] .f-car,.chart[data-view="car"] .car-layer{opacity:1}
.chart[data-view="ind"] .st-ind circle,.chart[data-view="tz"] .st-tz circle,.chart[data-view="rw"] .st-car circle{opacity:.95}
.chart[data-view="car"] .r,.chart[data-view="car"] .r3{opacity:0}
.js .chart .r{stroke-dashoffset:1}
.js .chart .r3{opacity:0}
.js .chart.s2 .r1,.js .chart.s3 .r2{stroke-dashoffset:0}
.js .chart.s3:not([data-view="car"]) .r3{opacity:.9}
.js .chart.s1 .c-hyd circle:not(.pulse),.js .chart.s2 .c-dar circle,.js .chart.s3 .c-kgl circle,.js .chart.s3 .c-bgf circle:not(.pulse){fill:var(--amber);stroke:var(--amber)}
.chart.s4:not(.s6) .sweep{animation:sweep 3s ease-out infinite}
.chart.s4:not(.s6) .sweep.s-b{animation-delay:1.5s}
@keyframes sweep{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.chart.s5 .office{opacity:1}
.chart.s6 .office{fill:var(--amber);stroke:var(--amber)}
.chart.s6 .spoke{stroke-dashoffset:0}

.chart-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 20px 14px;font-size:13.5px;line-height:1.3;border-top:1px solid var(--line);background:rgba(4,8,20,.7)}
.coord{color:var(--amber);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.place{font-weight:600}
.hint{margin-left:auto;color:var(--ink-2)}

/* section heads */
.work-head h2,.training h2,.contact h2{font-size:clamp(34px,4.2vw,60px);line-height:1;font-weight:800;letter-spacing:-.01em}
.kicker{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}

/* work */
.work{padding-block:clamp(64px,10vw,128px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,16,36,.6),rgba(4,6,13,0))}
.work-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:32px}
.work-head > div{display:grid;gap:10px}
.work-head p:not(.kicker){font-size:17.5px;color:var(--ink-2);max-width:32em}
.lenses{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lenses button{font:600 15px/1 var(--font);letter-spacing:.02em;color:var(--ink-2);background:rgba(14,26,58,.6);border:1px solid var(--line);border-radius:6px;padding:11px 16px;cursor:pointer}
.lenses button:hover{color:var(--ink);border-color:var(--cyan-dim)}
.lenses button[aria-selected="true"]{color:var(--space);background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(111,231,255,.35)}
.lens-panels{min-height:56px;margin-bottom:18px}
.lens-p{font-size:16.5px;color:var(--ink-2);max-width:52em}
.w-list{list-style:none;padding:0;display:grid;gap:10px}
.w{display:grid;grid-template-columns:52px 104px minmax(0,1fr) minmax(0,1.5fr) minmax(0,.9fr);gap:12px 28px;align-items:start;padding:22px 22px;border-radius:12px;background:rgba(12,22,48,.55);border:1px solid var(--line);transition:opacity .35s,border-color .25s,box-shadow .25s}
.w:hover{border-color:var(--cyan-dim);box-shadow:0 0 30px rgba(60,140,255,.15)}
.w-i{width:52px;height:52px;display:grid;place-items:center;border-radius:10px;background:rgba(111,231,255,.08);border:1px solid rgba(111,231,255,.25);color:var(--cyan)}
.w-i .ico{width:30px;height:30px}
.w-y{font-size:14.5px;font-weight:700;color:var(--amber);padding-top:3px}
.w-h h3{font-size:clamp(20px,1.7vw,24px);line-height:1.15;font-weight:700}
.w-h p{font-size:14.5px;color:var(--ink-2);margin-top:4px}
.w-d{font-size:16px;line-height:1.55;color:#D5DDF5}
.w-t{font-size:13.5px;font-weight:600;color:var(--ink-2);padding-top:3px}
.work:not([data-lens="all"]) .w{opacity:.22}
.work[data-lens="im"] .w[data-lens~="im"],.work[data-lens="me"] .w[data-lens~="me"],.work[data-lens="da"] .w[data-lens~="da"],.work[data-lens="fo"] .w[data-lens~="fo"]{opacity:1}
.note{margin-top:16px;font-size:14px;color:var(--ink-2)}

/* training */
.training{padding-block:clamp(64px,10vw,128px);border-top:1px solid var(--line)}
.tr-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:32px 64px}
.tr-in > div:first-child{display:grid;gap:10px;align-content:start}
.tr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px}
.tr-cols h3{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.tr-cols h3:not(:first-child){margin-top:34px}
.tr-cols dl div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.tr-cols dt{font-size:14.5px;font-weight:700;color:var(--amber)}
.tr-cols dd{margin:0;font-weight:600;font-size:16.5px;line-height:1.4}
.tr-cols dd span{display:block;font-weight:400;font-size:15px;color:var(--ink-2)}

/* contact */
.contact{padding-block:clamp(56px,9vw,112px)}
.contact-box{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px 64px;align-items:end;padding:clamp(28px,5vw,56px);border-radius:16px;border:1px solid rgba(111,231,255,.25);background:radial-gradient(80% 120% at 100% 0%,rgba(40,90,220,.3),transparent 60%),rgba(10,18,40,.7);box-shadow:0 0 60px rgba(40,110,255,.14)}
.contact-box > div:first-child{display:grid;gap:12px}
.reach{display:grid;gap:16px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:clamp(18px,1.9vw,22px);font-weight:700;color:var(--cyan)}
.mail span{overflow-wrap:anywhere;user-select:all}
.mail button{font:700 14px/1 var(--font);padding:10px 14px;border-radius:6px;border:0;background:var(--amber);color:var(--on-amber);cursor:pointer}
.mail button:hover{box-shadow:0 0 20px rgba(255,181,71,.5)}
.links{display:flex;flex-wrap:wrap;gap:20px}
.links a{font-size:16px;font-weight:700;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--amber)}
.tz{font-size:15px;color:var(--ink-2)}

.foot{padding-block:24px 40px;border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.foot a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:4px}
.foot .side{margin-left:auto}
.foot .fine{flex-basis:100%;font-size:13px}

/* tablet / phone */
@media (max-width:1100px){
  .w{grid-template-columns:52px minmax(0,1fr) minmax(0,1.4fr)}
  .w-y{grid-column:2;grid-row:1}
  .w-h{grid-column:2;grid-row:2}
  .w-i{grid-row:1 / span 2}
  .w-d{grid-column:3;grid-row:1 / span 2}
  .w-t{grid-column:2 / -1}
}
@media (max-width:900px){
  .route{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "steps"}
  .chart{height:40svh;margin:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));top:calc(var(--top) + env(safe-area-inset-top,0px) + 8px);z-index:5;box-shadow:0 0 0 10px var(--space),0 0 40px rgba(40,110,255,.18)}
  .chart-cap{padding:8px 14px 10px;font-size:12px}
  .hint{display:none}
  .steps{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .step{min-height:66svh;padding-block:44px;max-width:none}
  .step.hero{min-height:0;padding-block:32px 52px}
  .work-head,.tr-in,.contact-box{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .w{grid-template-columns:44px minmax(0,1fr);gap:8px 14px;padding:18px 16px}
  .w-i{width:44px;height:44px;grid-row:1 / span 2}
  .w-y,.w-h{grid-column:2}
  .w-d,.w-t{grid-column:1 / -1;grid-row:auto}
  .tr-cols{grid-template-columns:minmax(0,1fr)}
  .glance div{grid-template-columns:minmax(0,1fr);gap:0}
  .face{width:80px;height:80px}
  .top nav a{font-size:13.5px;letter-spacing:.02em}
  .foot .side{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}