:root{
  --bg:#050607;
  --panel:#0b0d0e;
  --muted:#9aa3a1;
  --accent:#2ad07a;
  --text:#e6efe9;
  --glass:rgba(255,255,255,0.04);
  --card:rgba(255,255,255,0.025);
  --maxw:980px;
  --radius:12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow:auto;
}

/* dot-grid canvas covers full viewport */
.dot-grid{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(transparent 0 1px, rgba(255,255,255,0.02) 1px),
    linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.02) 1px);
  pointer-events:none;
}

/* nav */
.nav{position:fixed;top:18px;left:0;right:0;z-index:6;padding:0 20px}
.nav nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.logo{color:var(--text);text-decoration:none;font-weight:600}
.links{margin-left:auto}
.links a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:15px;line-height:1}
.links a:hover{color:var(--text)}

/* tighter nav for small screens */
@media (max-width:480px){
  .nav{top:12px}
  .links a{font-size:14px;margin-left:10px;padding:6px}
  /* slightly reduce hero top padding on very small screens to keep content visible without overlap */
  .hero-inner{padding-top:66px}

  /* ensure pages with fixed nav (like portfolio) have extra top spacing so page headings don't sit too close to nav */
  .content-page .page-inner,
  .page.contact-page .page-inner {
    padding-top:86px;
  }
}

/* layout */
.hero, .page{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:28px}
/* ensure hero content sits clearly below fixed nav */
.hero-inner{max-width:var(--maxw);width:100%;padding-top:84px}
.page-inner{max-width:var(--maxw);width:100%}

/* hero content */
.eyebrow{color:var(--muted);margin:0 0 8px;font-size:14px}
h1{font-size:56px;margin:0;color:var(--text);letter-spacing:-0.02em;font-weight:700}
.role{color:var(--accent);margin-top:10px;font-weight:600}
.tagline{color:var(--muted);margin-top:12px;max-width:720px}

/* typing background and animation for hero heading */
.typing-bg{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:8px 14px;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(42,208,122,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(42,208,122,0.12);
  margin-bottom:8px;
}
.typed-line{
  font-size:56px;
  line-height:1;
  margin:0;
  color:var(--bg);
  font-weight:800;
  background:linear-gradient(180deg,#ffffff,#eafaf0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@media (min-width:900px){
  .typed-line{font-size:72px}
}

/* caret */
.caret{
  display:inline-block;
  margin-left:6px;
  color:var(--accent);
  font-weight:900;
  opacity:1;
  transition:opacity 200ms linear;
  transform:translateY(-2px);
  will-change:opacity;
}
/* blink animation */
@keyframes blink {
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
.caret.blinking{animation:blink 1s steps(1,end) infinite}
.meta{display:flex;gap:16px;color:var(--muted);list-style:none;padding:0;margin:18px 0}
.meta li{background:var(--card);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#14b46d);color:#03110b}
.btn.outline{background:transparent;border-color:rgba(255,255,255,0.06);color:var(--text)}
.btn.ghost{background:transparent;color:var(--accent);border:1px dashed rgba(25,195,125,0.12)}

/* cards and sections */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);backdrop-filter: blur(6px);padding:18px;border-radius:12px;margin-top:20px;border:1px solid rgba(255,255,255,0.02)}
.partner{max-width:780px}
.expertise{margin-top:26px}
.expertise h3{margin:0 0 12px}
.expertise .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.expertise article{background:var(--panel);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* pages */
.content-page .projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0}
.project{background:var(--panel);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);overflow:hidden;display:flex;flex-direction:column;gap:10px}
.thumb{display:flex;gap:10px;align-items:center}
.thumb .device{
  position:relative;
  flex:0 0 auto;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(2,6,8,0.55);
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border:1px solid rgba(255,255,255,0.03);
  transform-origin:center;
  transition:transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms;
  will-change:transform;
  backface-visibility:hidden;
}

/* image fills device and keeps aspect */
.thumb .device img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}

/* phone/tablet/desktop stacking with perspective + subtle tilt */
.thumb{position:relative;perspective:1200px}
.thumb .device.phone{
  width:92px;height:180px;transform:translateY(12px) rotateZ(-6deg) rotateX(6deg) scale(1);
  border-radius:14px; z-index:3; box-shadow:0 18px 40px rgba(2,6,8,0.55);
}
.thumb .device.tablet{
  width:132px;height:200px;transform:translateY(6px) translateX(-28px) rotateZ(-3deg) rotateX(3deg);
  border-radius:12px;opacity:0.98; z-index:2;
}
.thumb .device.desktop{
  width:200px;height:120px;transform:translateX(-48px) rotateZ(-1deg);
  border-radius:8px;opacity:0.94; z-index:1;
}

/* maintain overlap offsets across responsive breakpoints */
@media (max-width:900px){
  .thumb .device.phone{width:80px;height:160px;transform:translateY(12px) rotateZ(-6deg) rotateX(6deg)}
  .thumb .device.tablet{width:110px;height:170px;margin-left:-36px;transform:translateY(6px) translateX(-26px) rotateZ(-3deg) rotateX(3deg)}
  .thumb .device.desktop{width:160px;height:100px;margin-left:-44px;transform:translateX(-42px) rotateZ(-1deg)}
}

/* hover/interaction: lift and straighten devices for clearer preview */
.project:hover .device{
  transform:translateY(-6px) rotateZ(0deg) rotateX(0deg) scale(1.02);
  box-shadow:0 26px 50px rgba(2,6,8,0.6);
}
.project:active .device{transform:translateY(-2px) scale(1.01)}

/* phone / tablet / desktop sizing and stacking */
.thumb .device.phone{width:92px;height:180px;transform:translateY(12px);border-radius:14px}
.thumb .device.tablet{width:132px;height:200px;transform:translateY(6px);border-radius:12px;opacity:0.95}
.thumb .device.desktop{width:200px;height:120px;border-radius:8px;opacity:0.9;box-shadow:0 10px 30px rgba(2,6,8,0.55)}

/* layout: phone overlaps tablet which overlaps desktop for a layered preview */
.thumb{position:relative}
.thumb .device.phone{z-index:3;margin-left:0}
.thumb .device.tablet{margin-left:-40px;z-index:2}
.thumb .device.desktop{margin-left:-48px;z-index:1}

/* ensure images have a subtle border and inner padding to mimic screens */
.thumb .device::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}

/* responsive adjustments */
@media (max-width:900px){
  .content-page .projects-grid{grid-template-columns:1fr}
  .thumb{justify-content:flex-start}
  .thumb .device.phone{width:80px;height:160px}
  .thumb .device.tablet{width:110px;height:170px;margin-left:-36px}
  .thumb .device.desktop{width:160px;height:100px;margin-left:-44px}
}

/* contact */
.contact-row{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.contact-form label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.01);color:var(--text)}
.form-row{display:flex;gap:10px;margin-top:10px}
.contact-info{background:var(--panel);padding:16px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* icon-only contact buttons */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--card);
  color:var(--muted);
  text-decoration:none;
  transition:transform 180ms ease, box-shadow 180ms ease, color 180ms ease, background 180ms ease;
  border:1px solid rgba(255,255,255,0.02);
}
.icon-btn svg{width:20px;height:20px;display:block}
.icon-btn:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(2,6,8,0.45);
  color:var(--accent);
  background:linear-gradient(180deg, rgba(42,208,122,0.06), rgba(42,208,122,0.02));
}

/* footer */
.site-foot{
  margin-top:28px;
  color:var(--muted);
  font-size:15px; /* larger base size for improved readability */
  text-align:center; /* center-align footer content site-wide */
}
/* green full-width footer bar that highlights footer text — wider and greener */
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:calc(100% - 40px);
  max-width:100%;
  margin:12px auto 0;
  padding:14px 22px;
  border-radius:999px;
  /* stronger greener gradient */
  background:linear-gradient(90deg, rgba(25,195,125,0.22), rgba(25,195,125,0.16));
  border:1px solid rgba(25,195,125,0.26);
  color: #ffffff;
  box-shadow: 0 12px 36px rgba(25,195,125,0.12);
  min-height:56px;
}
/* center the footer-bar content on small screens */
@media (max-width:480px){
  .footer-bar{justify-content:center;padding:12px 14px;width:calc(100% - 24px)}
}
/* ensure the small element in footers scales nicely and appears white */
.site-foot small{
  font-size:15px;
  display:block;
  color:#ffffff; /* white text on green bar */
  font-weight:700;
}

/* responsive (fit single-screen height comfortably) */
@media (max-width:900px){
  h1{font-size:36px}
  .expertise .grid{grid-template-columns:1fr}
  .content-page .projects-grid{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr}
}

/* small helper */
.muted{color:var(--muted);font-size:13px}
.highlight{color:var(--accent);font-weight:700}

/* Partner heading: split white + green and larger */
.partner h3,
.partner h4 {
  margin: 0;
}
.partner h3 .part-white {
  color: var(--text);
  font-weight:700;
  font-size:28px;
}
.partner h3 .part-green {
  color: var(--accent);
  font-weight:800;
  font-size:28px;
}
.partner h4 {
  color: var(--accent);
  margin-top:6px;
  font-size:15px;
  font-weight:600;
}

/* Make Expertise heading white and the exclamation green */
.expertise > h3 {
  color: var(--text);
  margin: 0 0 12px;
}
.expertise > h3 .accent-excl {
  color: var(--accent);
  margin-left: 6px;
  font-weight: 700;
}

/* Add a green underline to each expertise item heading */
.expertise article h4 {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.expertise article h4::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 48px;
  background: var(--accent);
  border-radius: 3px;
}

/* hero portrait */
.hero-photo{
  width:112px;
  height:112px;
  border-radius:14px;
  object-fit:cover;
  display:block;
  margin:12px 0 6px;
  box-shadow:0 14px 36px rgba(2,6,8,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
  border:2px solid rgba(255,255,255,0.02);
  align-self:flex-start;
}

/* keep portrait compact on larger screens and ensure spacing */
@media (min-width:900px){
  .hero-photo{width:140px;height:140px;margin-left:8px;margin-bottom:12px}
}

/* ensure hero layout remains single-screen on small devices */
@media (max-width:480px){
  .hero-photo{width:96px;height:96px;margin:8px 0}
}

/* Global refined preview/card styles for professional dashboard mockups */
.preview{
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(0,0,0,0.03));
  border: 1px solid rgba(255,255,255,0.035);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 20px 48px rgba(2,6,8,0.62);
  overflow: hidden;
  transition:transform 220ms ease, box-shadow 220ms ease;
}

/* lift on hover for emphasis */
.preview:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 80px rgba(2,6,8,0.66);
}

/* ensure images inside previews scale and crop cleanly */
.preview img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:8px;
}

/* small top toolbar for dashboard previews (title, controls) */
.preview .toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.preview .toolbar .title{
  font-weight:700;
  font-size:14px;
  color:var(--text);
}
.preview .toolbar .controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.preview .toolbar .chip{
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.02);
}

/* tighter inner panels inside preview */
.preview .panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.03);
}