:root{
  --bg1:#FFFFFF;
  --bg2:#F3FAFF;

  --ink:#0B1320;
  --muted:#41536C;

  --card:#FFFFFFee;
  --stroke: rgba(13, 40, 80, .10);
  --stroke2: rgba(43, 92, 255, .25);

   --brand:#2B5CFF;      /* main logo blue */
  --brand2:#4FA3FF;     /* lighter electric blue */

  --shadow: 0 18px 60px rgba(10, 25, 45, .10);
  --shadow2: 0 10px 30px rgba(0, 164, 255, .10);

  --radius: 18px;
  --radius2: 14px;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  overflow-x:hidden;
}

/* Background layers */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bg-base{
  background:
    radial-gradient(900px 520px at 10% 12%, rgba(0,164,255,.14) 0%, transparent 62%),
    radial-gradient(820px 460px at 90% 22%, rgba(46,231,184,.12) 0%, transparent 64%),
    radial-gradient(720px 480px at 60% 88%, rgba(0,164,255,.08) 0%, transparent 68%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}

/* subtle circuit lines */
.bg-circuits{
  opacity: .40;
  background-repeat: repeat;
  background-size: 980px 640px;
  filter: drop-shadow(0 0 10px rgba(0,164,255,.06));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='640' viewBox='0 0 980 640'%3E%3Cg fill='none' stroke='%2300A4FF' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M60 110h220v140h150v120h210'/%3E%3Cpath d='M120 560h270v-110h140v-170h260'/%3E%3Cpath d='M860 110h-220v150h-150v120h-170'/%3E%3Cpath d='M920 560h-270v-110h-140v-170h-260'/%3E%3Cpath d='M480 80v160h140v140h150'/%3E%3Cpath d='M520 600v-160h-140v-140h-150'/%3E%3C/g%3E%3Cg fill='%2300A4FF' fill-opacity='.18'%3E%3Ccircle cx='60' cy='110' r='6'/%3E%3Ccircle cx='280' cy='250' r='6'/%3E%3Ccircle cx='430' cy='250' r='6'/%3E%3Ccircle cx='580' cy='370' r='6'/%3E%3Ccircle cx='790' cy='370' r='6'/%3E%3Ccircle cx='920' cy='560' r='6'/%3E%3Ccircle cx='860' cy='110' r='6'/%3E%3Ccircle cx='640' cy='260' r='6'/%3E%3C/g%3E%3Cg fill='%232EE7B8' fill-opacity='.12'%3E%3Ccircle cx='390' cy='450' r='7'/%3E%3Ccircle cx='720' cy='220' r='7'/%3E%3C/g%3E%3C/svg%3E");
  animation: drift 34s linear infinite;
}

/* gentle glow, not dark */
.bg-glow{
  opacity: .8;
  background:
    radial-gradient(520px 260px at 25% 30%, rgba(0,164,255,.16) 0%, transparent 72%),
    radial-gradient(520px 260px at 70% 60%, rgba(46,231,184,.14) 0%, transparent 74%),
    radial-gradient(420px 220px at 55% 10%, rgba(0,164,255,.10) 0%, transparent 72%);
  filter: blur(1px);
  animation: pulse 9s ease-in-out infinite;
}

/* BIG faint logo watermark in background */
.bg-logo{
  opacity: .08;            /* main strength */
  background-repeat: no-repeat;
  background-position: 82% 18%;
  background-size: 720px auto;
  filter: saturate(1.1);
  /* Uses your /assets/logo.png */
  background-image: url("../assets/logo.png");
  mix-blend-mode: multiply;
}

/* Make watermark adjust on smaller screens */
@media (max-width: 820px){
  .bg-logo{
    background-position: 10% 10%;
    background-size: 520px auto;
    opacity: .06;
  }
}

@keyframes drift{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(-2%,1.5%,0); }
  100%{ transform: translate3d(-4%,3%,0); }
}
@keyframes pulse{
  0%,100%{ opacity:.75; }
  50%{ opacity:1; }
}

/* Layout */
.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.section{ padding: 90px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,0));
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

a{ color: inherit; text-decoration: none; }

/* Minimal brand row (not a header bar) */
.top-brand{
  padding: 18px 0 0 0;
}
.top-brand-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-right{
  margin-left: auto;      /* forces it to the far right */
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-logo{
  height: 64px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.06));
}

.mini-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 12px 18px;
  border-radius: 999px;

  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;

  /* ELVIT logo blue */
  background: linear-gradient(180deg, #3B4FD9, #2F3E9E);
  color: #FFFFFF;

  border: 1px solid rgba(47, 62, 158, .55);

  box-shadow:
    0 10px 26px rgba(47, 62, 158, .35),
    0 2px 0 rgba(255,255,255,.18) inset;

  position: relative;
  top: -4px;

  transition: transform .12s ease,
              box-shadow .12s ease,
              filter .12s ease;
}

.mini-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 34px rgba(47, 62, 158, .45),
    0 2px 0 rgba(255,255,255,.22) inset;
}

.mini-cta:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(47, 62, 158, .30),
    0 1px 0 rgba(255,255,255,.18) inset;
}

.mini-cta:focus-visible{
  outline: none;
  box-shadow:
    0 14px 34px rgba(47, 62, 158, .45),
    0 0 0 4px rgba(59, 79, 217, .35);
}


/* Hero */
.hero{ padding-top: 46px; }
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: start;
}

.eyebrow{
  margin: 0 0 14px 0;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 120, 200, .95);
}

.hero h1{
  margin: 0 0 12px 0;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.lead{
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.hero-actions{
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn.primary{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #07131F;
  box-shadow: var(--shadow2);
}
.btn.soft{
  background: rgba(255,255,255,.92);
  color: rgba(11,19,32,.9);
  border-color: var(--stroke2);
}

.trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  color: rgba(11,19,32,.80);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 26px rgba(10, 25, 45, .05);
}

/* Right hero panel */
.hero-panel{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.panel-stat{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
}
.panel-num{
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panel-sub{
  font-weight: 900;
  color: rgba(11,19,32,.65);
}

.panel-divider{
  height: 1px;
  margin: 16px 0;
  background: var(--stroke);
}

.check{
  list-style:none;
  padding:0;
  margin:0;
}
.check li{
  position: relative;
  padding-left: 26px;
  margin: 11px 0;
  color: rgba(11,19,32,.82);
  font-weight: 700;
}
.check li::before{
  content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 3px rgba(0,164,255,.12);
}

.panel-note{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,164,255,.30);
  background: rgba(255,255,255,.92);
  color: rgba(11,19,32,.70);
  font-weight: 900;
}
.spark{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand2);
  box-shadow: 0 0 18px rgba(46,231,184,.28);
}

/* Section headings */
.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}
.section-head h2{
  margin:0;
  font-size: 34px;
  letter-spacing: -.02em;
}
.section-head p{
  margin: 8px 0 0 0;
  color: var(--muted);
  max-width: 60ch;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: 0 16px 46px rgba(10, 25, 45, .08);
}
.card-icon{
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(0,164,255,.10);
  border: 1px solid rgba(0,164,255,.18);
  color: rgba(0, 92, 150, 1);
  font-weight: 900;
  margin-bottom: 12px;
}
.card h3{ margin: 0 0 10px 0; }
.card p{ margin: 0 0 12px 0; color: var(--muted); }
.card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,19,32,.82);
}
.card li{ margin: 6px 0; }

/* Projects */
.projects{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.project{
  display:block;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 46px rgba(10, 25, 45, .07);
  transition: transform .14s ease, box-shadow .14s ease;
}
.project:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(10, 25, 45, .10);
}
.project-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 12px;
}
.tag{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0, 120, 200, .95);
}
.chip{
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,19,32,.75);
  border: 1px solid rgba(0,164,255,.20);
  background: rgba(0,164,255,.06);
  padding: 6px 10px;
  border-radius: 999px;
}
.project h3{ margin: 0 0 8px 0; }
.project p{ margin: 0; color: var(--muted); }

/* About */
.about{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}
.about-points{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.point{
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(10, 25, 45, .05);
}
.point h4{ margin: 0 0 6px 0; }
.point p{ margin: 0; color: var(--muted); }

.sidecard{
  background: rgba(255,255,255,.94);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.sidecard h3{ margin-top:0; }
.btn.full{ width: 100%; }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 60px rgba(10,25,45,.08);
}
.field{ display:flex; flex-direction: column; gap: 8px; }
.field.full, .actions.full{ grid-column: 1 / -1; }

label{
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,19,32,.88);
}

input, textarea{
  border-radius: 14px;
  border: 1px solid rgba(0,164,255,.20);
  background: rgba(255,255,255,.98);
  color: rgba(11,19,32,1);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
input:focus, textarea:focus{
  border-color: rgba(46,231,184,.55);
  box-shadow: 0 0 0 4px rgba(0,164,255,.12);
}

.profile-card{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  padding: 22px;
  display:flex;
  flex-direction: column;
  align-items: center; /* CENTER EVERYTHING */
  text-align: center;
}

.profile-photo{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;

  border: 4px solid rgba(47,62,158,.15);
  box-shadow: 0 14px 34px rgba(47,62,158,.20);

  margin-bottom: 14px;
}

.profile-body{
  width: 100%;
}

.profile-name{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color: rgba(11,19,32,.95);
}

.profile-role{
  margin: 4px 0 14px 0;
  font-weight: 800;
  color: rgba(47,62,158,.85);
}

.profile-meta{
  display:flex;
  flex-direction: column;
  gap: 6px;

  font-weight: 750;
  color: rgba(11,19,32,.78);
  margin-bottom: 16px;
}

.profile-meta span{
  font-weight: 900;
  color: rgba(11,19,32,.55);
  margin-right: 4px;
}

.profile-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;

  font-weight: 950;
  font-size: 14px;

  background: linear-gradient(180deg, #3B4FD9, #2F3E9E);
  color: #fff;

  border: 1px solid rgba(47,62,158,.55);
  box-shadow: 0 12px 28px rgba(47,62,158,.30);
}
.profile-cta:hover{ filter: brightness(1.04); }

.actions{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.form-note{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Contact meta row */
.contact-meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.meta-card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: 0 14px 40px rgba(10,25,45,.05);
}
.meta-title{
  font-weight: 900;
  color: rgba(11,19,32,.70);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.meta-value{
  font-weight: 800;
  color: rgba(11,19,32,.92);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 0;
  color: rgba(11,19,32,.72);
  font-weight: 800;
}
.to-top{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,164,255,.20);
  background: rgba(255,255,255,.90);
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .projects{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
  .about-points{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .contact-meta{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .hero h1{ font-size: 40px; }
}