/*
Theme Name: Dinesh Portfolio
Theme URI: https://example.com/dinesh-portfolio
Author: Dinesh Chavan
Author URI: https://dineshchavan.xelspire.com
Description: Modern one-page + multi-page hybrid portfolio theme tailored for an Embedded / Real‑Time / Robotics Software Engineer. Includes colorful hero, timeline, skills matrix, services, testimonials, projects, and contact form.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dinesh-portfolio
Tags: portfolio, responsive, one-page, dark, modern
*/

/* CSS Design System ------------------------------------------------------ */
:root {
  --dp-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --dp-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --dp-bg: #070b12;
  --dp-surface: #121923;
  --dp-surface-alt: #1b2530;
  --dp-border: #25313f;
  --dp-text: #d5dce6;
  --dp-text-dim: #93a2b4;
  --dp-danger: #ff4966;
  --dp-success: #31c98a;
  --dp-warning: #ffb347;
  --dp-gradient-start: #007bff;
  --dp-gradient-end: #00d1ff;
  --dp-accent: #0094ff;
  --dp-radius-xs: 4px;
  --dp-radius-sm: 6px;
  --dp-radius: 10px;
  --dp-shadow: 0 4px 24px -4px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.4);
  --dp-line: linear-gradient(120deg,var(--dp-gradient-start),var(--dp-gradient-end));
  --dp-transition: 140ms cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body {
  margin:0; font-family: var(--dp-font-sans); background: var(--dp-bg); color: var(--dp-text); -webkit-font-smoothing: antialiased; line-height:1.55; font-size:16px;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(0,180,255,0.08), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,120,255,0.06), transparent 65%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 100px),
    linear-gradient(160deg,#0a111b,#05070b 60%);
  background-attachment: fixed;
}
* { box-sizing: border-box; }
img { max-width:100%; height:auto; display:block; }
a { color: var(--dp-gradient-end); text-decoration:none; }
a:hover { color: var(--dp-gradient-start); }

/* Layout ---------------------------------------------------------------- */
.site-header { position:sticky; top:0; backdrop-filter: blur(12px); background:rgba(7,11,18,0.82); border-bottom:1px solid var(--dp-border); z-index:40; }
.nav-inner { max-width:1240px; margin:0 auto; display:flex; gap:40px; align-items:center; padding:10px 28px; }
.site-title a { font-weight:600; font-size:15px; letter-spacing:.5px; }
.primary-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:34px; }
.primary-nav a { position:relative; padding:6px 2px; font-size:14px; font-weight:500; color:var(--dp-text-dim); }
.primary-nav a:hover, .primary-nav a.active { color:var(--dp-text); }
.primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color:var(--dp-text); }
.primary-nav a.active:after, .primary-nav a:hover:after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--dp-line); border-radius:2px; }
.primary-nav .current-menu-item > a:after, .primary-nav .current_page_item > a:after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--dp-line); border-radius:2px; }
.site-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--dp-surface-alt); box-shadow:0 0 0 2px var(--dp-bg), 0 0 0 4px var(--dp-surface-alt); }
.site-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.toggle-theme { margin-left:auto; background:var(--dp-surface-alt); border:1px solid var(--dp-border); color:var(--dp-text-dim); padding:6px 12px; border-radius:var(--dp-radius-sm); cursor:pointer; font-size:13px; }
.toggle-theme:hover { color:var(--dp-text); background:var(--dp-surface); }

main { max-width:1240px; margin:0 auto; padding:40px 28px 120px; }
.section { margin:120px 0 0; position:relative; }
.section:first-of-type { margin-top:20px; }
.section h2 { margin:0 0 28px; font-size:32px; font-weight:600; letter-spacing:-.5px; background:var(--dp-line); -webkit-background-clip:text; color:transparent; }
.section-desc { max-width:740px; font-size:15px; margin-top:-12px; margin-bottom:38px; color:var(--dp-text-dim); }

/* Hero ------------------------------------------------------------------ */
.hero { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:60px; align-items:center; }
.hero .intro { max-width:780px; }
.hero-visual { display:flex; flex-direction:column; gap:22px; align-items:center; }
.avatar-wrap { position:relative; width:260px; height:260px; border-radius:50%; padding:6px; background:linear-gradient(140deg,var(--dp-gradient-start),var(--dp-gradient-end)); box-shadow:0 8px 40px -8px rgba(0,140,255,.45); }
.hero-avatar { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; border:4px solid #0b121a; background:#0b121a; }
.hero pre.code-stamp { background: var(--dp-surface); color:#7fd1ff; font-family:var(--dp-font-mono); padding:20px 24px; margin:0; border:1px solid var(--dp-border); border-radius:var(--dp-radius); font-size:13px; line-height:1.4; box-shadow:var(--dp-shadow); position:relative; overflow:auto; }
.hero pre.code-stamp:before { content:"/embedded/rt/robotics"; position:absolute; top:6px; right:12px; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--dp-text-dim); }
.hero h1 { font-size: clamp(42px, 7vw, 64px); line-height:1.05; margin:0 0 24px; font-weight:700; letter-spacing:-1.2px; }
.hero h1 span.accent { background:var(--dp-line); -webkit-background-clip:text; color:transparent; text-shadow:0 4px 22px rgba(0,180,255,.25); }
.hero p.lead { font-size:18px; color:var(--dp-text-dim); max-width:680px; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn { --btn-bg:var(--dp-surface-alt); --btn-color:var(--dp-text); --btn-border:var(--dp-border); font-size:14px; padding:11px 20px; border-radius:var(--dp-radius-sm); font-weight:500; letter-spacing:.3px; position:relative; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); transition:var(--dp-transition); display:inline-flex; gap:8px; align-items:center; }
.btn:hover { --btn-bg:var(--dp-gradient-start); --btn-border:var(--dp-gradient-start); color:#fff; box-shadow:0 3px 16px -2px rgba(0,140,255,.6); transform:translateY(-2px); }
.btn.outline { --btn-bg:rgba(255,255,255,0.02); }
.btn.gradient { background:var(--dp-line); border:none; color:#fff; }
.btn.small { padding:7px 14px; font-size:12px; }

/* Cards / Surfaces ------------------------------------------------------ */
.card { background: linear-gradient(160deg,var(--dp-surface), var(--dp-surface-alt)); border:1px solid var(--dp-border); border-radius:var(--dp-radius); padding:20px 22px 22px; position:relative; box-shadow:var(--dp-shadow); }
.card:hover { border-color: var(--dp-gradient-start); }
.badge { font-size:11px; text-transform:uppercase; letter-spacing:.7px; background:var(--dp-line); color:#fff; padding:4px 8px 3px; border-radius:20px; font-weight:600; display:inline-block; }

/* Timeline --------------------------------------------------------------- */
.timeline { position:relative; padding-left:18px; display:grid; gap:38px; }
.timeline:before { content:""; position:absolute; top:0; left:4px; bottom:0; width:2px; background:linear-gradient(to bottom,var(--dp-gradient-start),transparent); }
.timeline-item { position:relative; }
.timeline-item:before { content:""; position:absolute; left:-18px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--dp-gradient-start); box-shadow:0 0 0 4px #0d1621; }
.timeline-item h3 { margin:0 0 4px; font-size:17px; font-weight:600; }
.timeline-item .meta { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--dp-text-dim); margin-bottom:8px; display:flex; gap:10px; flex-wrap:wrap; }
.timeline-item p { margin:0; font-size:14px; }

/* Skills Matrix ---------------------------------------------------------- */
.skills-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.skill { background:var(--dp-surface-alt); border:1px solid var(--dp-border); padding:10px 12px 12px; border-radius:10px; position:relative; overflow:hidden; font-size:13px; font-weight:500; letter-spacing:.2px; min-height:64px; display:flex; flex-direction:column; justify-content:space-between; }
.skill:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(0,180,255,0.18), transparent 70%); opacity:0; transition:var(--dp-transition); }
.skill:hover:before { opacity:1; }
.skill .group { font-size:10px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--dp-text-dim); }
.skill .name { font-weight:600; }
.skill.core { border-color:rgba(0,180,255,.4); }

/* Services --------------------------------------------------------------- */
.services-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.service-card { background:linear-gradient(155deg,var(--dp-surface),#0d1824); border:1px solid var(--dp-border); padding:24px 24px 26px; border-radius:var(--dp-radius); position:relative; overflow:hidden; }
.service-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 14% 18%, rgba(0,180,255,.4), transparent 65%); opacity:.22; pointer-events:none; mix-blend-mode:screen; }
.service-card h3 { margin:0 0 10px; font-size:18px; }
.service-card p { margin:0; font-size:14px; color:var(--dp-text-dim); }

/* Projects --------------------------------------------------------------- */
.projects-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.project { background:linear-gradient(150deg,var(--dp-surface), var(--dp-surface-alt)); border:1px solid var(--dp-border); border-radius:var(--dp-radius); padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.project:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 110%, rgba(0,180,255,.35), transparent 70%); opacity:.3; pointer-events:none; }
.project h3 { margin:0; font-size:17px; }
.project .tags { display:flex; gap:6px; flex-wrap:wrap; }
.project .tags span { background:rgba(255,255,255,0.06); font-size:11px; padding:4px 8px; border-radius:30px; letter-spacing:.5px; }
.project a.more { align-self:flex-start; }
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 26px; }
.filter-btn { background:rgba(255,255,255,0.05); border:1px solid var(--dp-border); color:var(--dp-text-dim); font:inherit; padding:8px 14px; border-radius:40px; cursor:pointer; font-size:12px; letter-spacing:.5px; text-transform:uppercase; transition:var(--dp-transition); }
.filter-btn:hover { color:var(--dp-text); }
.filter-btn.active { background:var(--dp-gradient-start); color:#fff; border-color:var(--dp-gradient-start); }

/* Testimonials ----------------------------------------------------------- */
.testimonials-wrap { display:grid; gap:26px; }
.testimonial { background:linear-gradient(150deg,var(--dp-surface), #0d1822); border:1px solid var(--dp-border); padding:22px 24px 26px; border-radius:var(--dp-radius); position:relative; }
.testimonial:before { content:"\201C"; position:absolute; top:-24px; left:10px; font-size:140px; line-height:1; opacity:.05; font-family:serif; }
.testimonial p { margin:0 0 14px; font-size:15px; }
.testimonial .who { font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--dp-text-dim); font-weight:600; }

/* Metrics --------------------------------------------------------------- */
.metrics-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:22px; }
.metric-card { background:linear-gradient(150deg,var(--dp-surface),#102331); border:1px solid var(--dp-border); padding:22px 20px 24px; border-radius:var(--dp-radius); position:relative; overflow:hidden; }
.metric-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(0,180,255,.45), transparent 70%); opacity:.25; }
.metric-value { font-size:20px; font-weight:600; line-height:1.25; }
.metric-cat { display:inline-block; margin-top:8px; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--dp-text-dim); }

.projects-search-wrap { margin:0 0 22px; }
.projects-search-wrap input { width:100%; background:var(--dp-surface-alt); border:1px solid var(--dp-border); padding:12px 16px; font:inherit; border-radius:var(--dp-radius-sm); color:var(--dp-text); }
.projects-search-wrap input:focus { outline:2px solid var(--dp-gradient-start); }

/* Contact --------------------------------------------------------------- */
.contact-grid { display:grid; grid-template-columns: minmax(0,1fr) 420px; gap:60px; align-items:start; }
form.contact-form { display:grid; gap:14px; }
form.contact-form input, form.contact-form textarea { width:100%; background:var(--dp-surface-alt); border:1px solid var(--dp-border); color:var(--dp-text); font:inherit; padding:12px 14px; border-radius:var(--dp-radius-sm); resize:vertical; min-height:52px; }
form.contact-form textarea { min-height:140px; }
form.contact-form input:focus, form.contact-form textarea:focus { outline:2px solid var(--dp-gradient-start); }

/* Footer ---------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--dp-border); padding:50px 28px 70px; background:#05070b; }
.site-footer .inner { max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.footer-meta { font-size:12px; color:var(--dp-text-dim); }

/* Utilities -------------------------------------------------------------- */
.grid-2 { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.muted { color:var(--dp-text-dim); }
.fade-in { opacity:0; transform:translateY(18px); animation:fadeIn .8s var(--delay,0s) forwards cubic-bezier(.4,0,.2,1); }
@keyframes fadeIn { to { opacity:1; transform:none; } }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1040px) { .hero { grid-template-columns:1fr; } .contact-grid { grid-template-columns:1fr; } }
@media (max-width: 720px) { main { padding:34px 20px 90px; } .nav-inner { padding:10px 20px; gap:20px; } .primary-nav ul { gap:18px; } .hero h1 { font-size: clamp(40px, 12vw, 56px); } }

/* Dynamic Pagination / Loader ------------------------------------------- */
.dp-loader { width:38px; height:38px; border:4px solid rgba(255,255,255,0.12); border-top-color: var(--dp-gradient-start); border-radius:50%; margin:20px auto 0; animation: dpSpin 0.8s linear infinite; display:none; }
@keyframes dpSpin { to { transform: rotate(360deg); } }
.load-more-wrap button[disabled] { opacity:.55; cursor:default; }

/* Accessibility helpers */
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.screen-reader-text:focus { position:static; width:auto; height:auto; margin:0; clip:auto; white-space:normal; padding:8px 14px; background:var(--dp-surface-alt); border:1px solid var(--dp-border); border-radius:var(--dp-radius-sm); }

/* Small-screen refinements */
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
  .load-more-wrap { display:flex; flex-direction:column; align-items:stretch; }
  #projectsLoadMore { width:100%; }
  .btn { min-height:44px; }
  .filter-bar { overflow-x:auto; scrollbar-width:none; }
  .filter-bar::-webkit-scrollbar { display:none; }
}
@media (max-width: 420px) {
  .projects-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:18px; }
  .hero { grid-template-columns:1fr; }
  .hero pre.code-stamp { font-size:11px; }
}