:root {
  --bg:   #05080f;
  --bg2:  #080c16;
  --card: #0c1120;
  --alt:  #090e1a;
  --p:    #00d4aa;
  --pl:   #33ffcc;
  --tx:   #e2eaf5;
  --mu:   #6b7fa0;
  --bd:   rgba(0,212,170,0.12);
  --glow: 0 0 28px rgba(0,212,170,0.28);
  --glg:  0 0 60px rgba(0,212,170,0.16);
  --gr:   linear-gradient(135deg,#00d4aa,#0097d4);
  --fh:   'Outfit',sans-serif;
  --fm:   'Space Mono',monospace;
  --r:    14px;
  --tr:   0.35s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg:   #f0f4fc;
  --bg2:  #e8eef9;
  --card: #ffffff;
  --alt:  #eaf0fb;
  --tx:   #0f1c35;
  --mu:   #5a6e90;
  --bd:   rgba(0,150,120,0.15);
  --glow: 0 0 28px rgba(0,212,170,0.18);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--tx); font-family:var(--fh); overflow-x:hidden; cursor:none; transition:background .4s,color .4s; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

#bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

#cursor { width:10px; height:10px; background:var(--p); border-radius:50%; position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); transition:width .2s,height .2s; mix-blend-mode:difference; }
#cursor-trail { width:32px; height:32px; border:2px solid var(--p); border-radius:50%; position:fixed; z-index:9998; pointer-events:none; transform:translate(-50%,-50%); opacity:.4; transition:all .1s; }
#cursor.big { width:22px; height:22px; }

.loader { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:10000; transition:opacity .7s,visibility .7s; }
.loader.out { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; width:260px; }
.loader-logo { font-size:2.4rem; font-weight:800; color:var(--tx); margin-bottom:1.4rem; letter-spacing:-1px; }
.loader-logo span { color:var(--p); }
.loader-bar-wrap { height:3px; background:rgba(0,212,170,.1); border-radius:10px; overflow:hidden; margin-bottom:1rem; }
.loader-bar { height:100%; width:0; background:var(--gr); border-radius:10px; box-shadow:var(--glow); transition:width .05s linear; }
.loader-pct { font-family:var(--fm); font-size:.85rem; color:var(--p); letter-spacing:2px; }

.navbar { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:1.3rem 6%; z-index:1000; transition:var(--tr); }
.navbar.scrolled { background:rgba(5,8,15,.93); backdrop-filter:blur(20px); border-bottom:1px solid var(--bd); padding:.9rem 6%; }
[data-theme="light"] .navbar.scrolled { background:rgba(240,244,252,.93); }
.nav-brand { font-size:1.8rem; font-weight:800; color:var(--tx); letter-spacing:-1px; z-index:1002; }
.ndot { color:var(--p); }
.nav-menu { display:flex; gap:2rem; }
.nav-link { font-size:.9rem; font-weight:500; color:var(--mu); position:relative; transition:color var(--tr); }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--gr); border-radius:2px; transition:width var(--tr); }
.nav-link:hover,.nav-link.active { color:var(--p); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:.8rem; z-index:1002; }
.theme-btn { width:40px; height:40px; border:1px solid var(--bd); border-radius:50%; background:var(--card); color:var(--p); font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:none; transition:var(--tr); }
.theme-btn:hover { border-color:var(--p); box-shadow:var(--glow); transform:rotate(20deg); }
.hbg { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:none; z-index:1001; }
.hbg span { display:block; width:24px; height:2px; background:var(--p); border-radius:2px; transition:var(--tr); }
.hbg.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hbg.open span:nth-child(2) { opacity:0; }
.hbg.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:space-between; padding:90px 6% 60px; gap:2rem; z-index:1; overflow:hidden; }
.grid-bg { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(0,212,170,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,.03) 1px,transparent 1px); background-size:60px 60px; }
.glow { position:absolute; pointer-events:none; border-radius:50%; filter:blur(110px); opacity:.18; }
.gl1 { width:500px; height:500px; top:-120px; left:-160px; background:var(--p); }
.gl2 { width:400px; height:400px; bottom:-100px; right:-100px; background:#0097d4; }
.hero-left { max-width:580px; z-index:2; }

.badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,212,170,.07); border:1px solid var(--bd); padding:.4rem 1rem; border-radius:50px; font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--p); margin-bottom:1.4rem; }
.bdot { width:8px; height:8px; border-radius:50%; background:#4dff91; box-shadow:0 0 8px #4dff91; animation:bp 1.5s infinite; }
@keyframes bp { 0%,100%{box-shadow:0 0 8px #4dff91} 50%{box-shadow:0 0 20px #4dff91} }

.hname { font-size:clamp(3rem,6vw,5.5rem); font-weight:800; line-height:1; margin-bottom:1rem; }
.ngrad { background:linear-gradient(135deg,#00d4aa,#0097d4,#00d4aa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200%; animation:gs 4s ease infinite; }
@keyframes gs { 0%,100%{background-position:0%} 50%{background-position:100%} }
.hl { background:linear-gradient(135deg,#00d4aa,#0097d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.htyped { font-size:1.25rem; color:var(--mu); margin-bottom:1.3rem; display:flex; align-items:center; flex-wrap:wrap; }
.tpre { color:var(--tx); margin-right:.4rem; }
#typed { color:var(--p); font-weight:600; }
.tcur { color:var(--p); animation:bl .7s step-end infinite; }
@keyframes bl { 50%{opacity:0} }

.hsub { color:var(--mu); line-height:1.85; font-size:1rem; max-width:500px; margin-bottom:2rem; }
.hsub strong { color:var(--tx); }
.hbtns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.hsoc { display:flex; gap:.8rem; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.8rem; border-radius:50px; font-size:.88rem; font-weight:600; border:none; cursor:none; position:relative; overflow:hidden; transition:transform var(--tr),box-shadow var(--tr); }
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); transform:translateX(-100%); transition:transform .4s; }
.btn:hover::before { transform:translateX(0); }
.btnp { background:var(--gr); color:#000; box-shadow:var(--glow); }
.btnp:hover { transform:translateY(-3px); box-shadow:var(--glg); }
.btno { background:transparent; border:2px solid var(--p); color:var(--p); }
.btno:hover { background:rgba(0,212,170,.1); transform:translateY(-3px); }
.btn-full { width:100%; justify-content:center; }

.soc { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--bd); border-radius:50%; color:var(--mu); font-size:.9rem; background:rgba(0,212,170,.04); transition:var(--tr); }
.soc:hover { border-color:var(--p); color:var(--p); background:rgba(0,212,170,.1); transform:translateY(-4px) scale(1.1); box-shadow:var(--glow); }

/* =====================
   HERO PHOTO SECTION
===================== */
.hero-right {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}
.pr1 {
  width: 280px;
  height: 280px;
  margin-top: -140px;
  margin-left: -140px;
  border: 1px dashed rgba(0,212,170,.25);
  animation: spinR 12s linear infinite;
}
.pr2 {
  width: 340px;
  height: 340px;
  margin-top: -170px;
  margin-left: -170px;
  border: 1px solid rgba(0,150,212,.2);
  animation: spinR 20s linear infinite reverse;
}
.pr3 {
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border: 1px solid rgba(0,212,170,.08);
  animation: spinR 30s linear infinite;
}
@keyframes spinR { to { transform: rotate(360deg); } }

.pcircle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  z-index: 10;
  border: 3px solid #00d4aa;
  background: #0c1120;
  box-shadow: 0 0 50px rgba(0,212,170,0.5);
  animation: floatUp 4s ease-in-out infinite;
}

@keyframes floatUp {
  0%,100% { margin-top: -100px; }
  50%      { margin-top: -114px; }
}

.pimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.orb {
  position: absolute;
  z-index: 15;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0c1120;
  border: 1px solid rgba(0,212,170,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 0 15px rgba(0,212,170,0.3);
  top: 50%;
  left: 50%;
  margin-top: -19px;
  margin-left: -19px;
}
.orb1 { color:#e34c26; animation:ob1 9s linear infinite; }
.orb2 { color:#2965f1; animation:ob2 12s linear infinite; }
.orb3 { color:#f0db4f; animation:ob3 15s linear infinite; }
.orb4 { color:#61dafb; animation:ob4 18s linear infinite; }
.orb5 { color:#777bb3; animation:ob5 21s linear infinite; }
@keyframes ob1 { 0%{transform:rotate(0deg) translateX(155px) rotate(0deg)} 100%{transform:rotate(360deg) translateX(155px) rotate(-360deg)} }
@keyframes ob2 { 0%{transform:rotate(72deg) translateX(175px) rotate(-72deg)} 100%{transform:rotate(432deg) translateX(175px) rotate(-432deg)} }
@keyframes ob3 { 0%{transform:rotate(144deg) translateX(155px) rotate(-144deg)} 100%{transform:rotate(504deg) translateX(155px) rotate(-504deg)} }
@keyframes ob4 { 0%{transform:rotate(216deg) translateX(175px) rotate(-216deg)} 100%{transform:rotate(576deg) translateX(175px) rotate(-576deg)} }
@keyframes ob5 { 0%{transform:rotate(288deg) translateX(155px) rotate(-288deg)} 100%{transform:rotate(648deg) translateX(155px) rotate(-648deg)} }

/* =====================
   SECTIONS
===================== */
.sec { position:relative; z-index:1; padding:8rem 6%; }
.sec-alt { background:var(--alt); }
[data-theme="light"] .sec-alt { background:var(--bg2); }
.slbl { font-family:var(--fm); font-size:.7rem; letter-spacing:5px; text-transform:uppercase; color:var(--p); margin-bottom:.8rem; display:block; }
.stitle { font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:800; line-height:1.1; margin-bottom:1rem; }
.ssub { color:var(--mu); font-size:1rem; margin-bottom:4rem; max-width:500px; }

.about-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:start; }
.apwrap { border-radius:20px; overflow:hidden; }
.aphoto { width:100%; height:420px; object-fit:cover; object-position:top center; border-radius:20px; border:2px solid rgba(0,212,170,0.3); display:block; transition:transform .5s; }
.aphoto:hover { transform:scale(1.02); }
.adesc { color:var(--mu); line-height:1.85; font-size:1rem; }
.adesc strong { color:var(--p); }
.arows { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.5rem; margin:1.6rem 0; }
.arow { display:flex; flex-direction:column; gap:.15rem; }
.alk { font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--mu); }
.alv { font-size:.9rem; color:var(--tx); font-weight:500; }
.agreen { color:#4dff91; font-weight:600; }
.astats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.5rem 0; }
.astat { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:1.2rem .8rem; text-align:center; transition:var(--tr); }
.astat:hover { border-color:var(--p); box-shadow:var(--glow); }
.anum { font-size:2.2rem; font-weight:800; background:var(--gr); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.apl { font-size:1.4rem; font-weight:800; color:var(--p); }
.alk2 { display:block; margin-top:.3rem; font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--mu); }
.intl { display:inline-flex; align-items:center; gap:.6rem; background:rgba(0,212,170,.07); border:1px solid var(--bd); padding:.6rem 1.2rem; border-radius:50px; font-size:.85rem; color:var(--mu); }
.intl i { color:var(--p); }
.intl strong { color:var(--tx); }

.skgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:3rem; }
.skbox { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:2rem; transition:var(--tr); }
.skbox:hover { border-color:var(--p); box-shadow:var(--glow); }
.skh { font-size:1rem; color:var(--p); margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem; }
.skbars { display:flex; flex-direction:column; gap:1.1rem; }
.skbt { display:flex; justify-content:space-between; font-size:.87rem; margin-bottom:.4rem; }
.skp { color:var(--p); font-weight:600; font-family:var(--fm); font-size:.78rem; }
.skt { height:5px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; }
[data-theme="light"] .skt { background:rgba(0,0,0,.08); }
.skf { height:100%; width:0; background:var(--gr); border-radius:10px; transition:width 1.5s cubic-bezier(.4,0,.2,1); position:relative; }
.skf::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:8px; height:8px; background:var(--pl); border-radius:50%; box-shadow:var(--glow); }
.tools { display:flex; flex-wrap:wrap; gap:.7rem; }
.pill { padding:.35rem .95rem; border:1px solid var(--bd); border-radius:50px; font-size:.82rem; color:var(--mu); background:var(--card); transition:var(--tr); cursor:default; }
.pill:hover { border-color:var(--p); color:var(--p); background:rgba(0,212,170,.07); }

.srvgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; }
.srvc { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:2rem; transition:var(--tr); position:relative; overflow:hidden; }
.srvc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gr); transform:scaleX(0); transition:transform .4s; transform-origin:left; }
.srvc:hover::before { transform:scaleX(1); }
.srvc:hover { border-color:var(--p); box-shadow:var(--glow); transform:translateY(-6px); }
.sico { width:52px; height:52px; background:rgba(0,212,170,.1); border:1px solid var(--bd); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--p); transition:var(--tr); margin-bottom:1.2rem; }
.srvc:hover .sico { background:var(--p); color:#000; }
.pico { animation:puli 2s ease infinite; }
@keyframes puli { 0%,100%{box-shadow:0 0 0 0 rgba(0,212,170,.4)} 50%{box-shadow:0 0 0 12px rgba(0,212,170,0)} }
.srvc h3 { font-size:1.1rem; margin-bottom:.7rem; display:flex; align-items:center; gap:.5rem; }
.ldot { width:8px; height:8px; border-radius:50%; background:#4dff91; display:inline-block; animation:bp 1.5s infinite; }
.srvc p { font-size:.88rem; color:var(--mu); line-height:1.7; margin-bottom:1rem; }
.slist { display:flex; flex-direction:column; gap:.4rem; }
.slist li { font-size:.82rem; color:var(--mu); display:flex; align-items:center; gap:.5rem; }
.slist li i { color:var(--p); font-size:.7rem; }
.opencrd { border-color:rgba(0,212,170,.22); }

.prjsec { margin-top:5rem; }
.prjh { font-size:1.8rem; font-weight:700; margin-bottom:2rem; }
.prjgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; }
.prjcard { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden; transition:var(--tr); }
.prjcard:hover { border-color:var(--p); box-shadow:var(--glow); transform:translateY(-6px); }
.prjimgbox { position:relative; height:200px; overflow:hidden; background:var(--alt); display:flex; align-items:center; justify-content:center; }
.noimg { background:linear-gradient(135deg,var(--alt),var(--card)); }
.prjimg { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.prjcard:hover .prjimg { transform:scale(1.05); }
.piconph { font-size:4rem; color:var(--p); opacity:.3; }
.prjover { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--tr); }
.prjcard:hover .prjover { opacity:1; }
.prjbtn { display:flex; align-items:center; gap:.4rem; background:var(--gr); color:#000; padding:.6rem 1.4rem; border-radius:50px; font-weight:700; font-size:.82rem; transition:var(--tr); }
.prjbtn:hover { transform:scale(1.05); }
.ptag { position:absolute; top:12px; left:12px; padding:.25rem .75rem; border-radius:50px; font-size:.7rem; font-weight:700; display:flex; align-items:center; gap:.35rem; }
.livetag { background:rgba(77,255,145,.15); color:#4dff91; border:1px solid rgba(77,255,145,.3); }
.livetag i { font-size:.5rem; animation:bp 1.5s infinite; }
.progtag { background:rgba(249,115,22,.15); color:#f97316; border:1px solid rgba(249,115,22,.3); }
.prjbody { padding:1.4rem 1.6rem 1.8rem; }
.ploc { font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--p); display:flex; align-items:center; gap:.3rem; margin-bottom:.4rem; }
.prjbody h3 { font-size:1.1rem; margin-bottom:.6rem; }
.prjbody p { font-size:.87rem; color:var(--mu); line-height:1.7; margin-bottom:1rem; }
.ptech { display:flex; flex-wrap:wrap; gap:.4rem; }
.ptech span { padding:3px 9px; background:rgba(0,212,170,.07); border:1px solid var(--bd); border-radius:50px; font-size:.72rem; color:var(--p); }

.congrid { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; max-width:1050px; margin:0 auto; }
.conleft h3 { font-size:1.6rem; font-weight:700; margin-bottom:1rem; }
.cintro { color:var(--mu); line-height:1.8; font-size:1rem; margin-bottom:1.8rem; }
.clinks { display:flex; flex-direction:column; gap:.9rem; }
.clink { display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem; background:var(--card); border:1px solid var(--bd); border-radius:12px; transition:var(--tr); color:inherit; }
.clink:hover { border-color:var(--p); box-shadow:var(--glow); transform:translateX(6px); }
.nhov:hover { transform:none; box-shadow:none; }
.cico { width:40px; height:40px; flex-shrink:0; background:rgba(0,212,170,.1); border:1px solid var(--bd); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--p); }
.clink span { font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--mu); display:block; }
.clink p { font-size:.88rem; color:var(--tx); margin-top:.1rem; }
.cform { display:flex; flex-direction:column; gap:1.2rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.fld { position:relative; }
.fld input,.fld textarea { width:100%; background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:1.15rem 1.1rem .55rem; color:var(--tx); font-family:var(--fh); font-size:.93rem; outline:none; resize:none; transition:border-color var(--tr),box-shadow var(--tr); }
.fld input:focus,.fld textarea:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(0,212,170,.1); }
.fld label { position:absolute; left:1.1rem; top:.9rem; font-size:.88rem; color:var(--mu); pointer-events:none; transition:all .25s; }
.fld input:focus~label,.fld input:not(:placeholder-shown)~label,.fld textarea:focus~label,.fld textarea:not(:placeholder-shown)~label { top:.26rem; font-size:.66rem; color:var(--p); letter-spacing:1px; }
.fnote { font-size:.85rem; padding:.8rem 1rem; border-radius:10px; display:none; }
.fnote.ok { display:block; background:rgba(77,255,145,.08); border:1px solid rgba(77,255,145,.3); color:#4dff91; }
.fnote.err { display:block; background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.3); color:#f97316; }
[data-theme="light"] .fld input,[data-theme="light"] .fld textarea { background:#fff; color:#0f1c35; }

.footer { text-align:center; padding:2.5rem 6%; border-top:1px solid var(--bd); position:relative; z-index:1; }
.ftop { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.fbrand { font-size:1.5rem; font-weight:800; }
.fsoc { display:flex; gap:.7rem; }
.fline { height:1px; background:var(--bd); margin-bottom:1.2rem; }
.fcopy { font-size:.85rem; color:var(--mu); }

.anim { opacity:0; transform:translateY(35px); transition:opacity .7s ease,transform .7s ease; }
.anim.in { opacity:1; transform:translateY(0); }
.anim-l { opacity:0; transform:translateX(-50px); transition:opacity .75s ease,transform .75s ease; }
.anim-l.in { opacity:1; transform:translateX(0); }
.anim-r { opacity:0; transform:translateX(50px); transition:opacity .75s ease,transform .75s ease; }
.anim-r.in { opacity:1; transform:translateX(0); }

[data-theme="light"] #bg-canvas { opacity:.25; }

@media (max-width:1100px) { .skgrid{grid-template-columns:1fr} .about-grid{grid-template-columns:1fr;gap:2.5rem} .astats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:960px) { .hero{flex-direction:column;text-align:center;padding-top:110px;gap:2.5rem} .hsub{margin:0 auto 1.5rem} .hbtns,.hsoc{justify-content:center} .hero-right{width:300px;height:300px} .photo-wrap{width:300px;height:300px} .pr1{width:210px;height:210px;margin-top:-105px;margin-left:-105px} .pr2{width:255px;height:255px;margin-top:-127px;margin-left:-127px} .pr3{width:300px;height:300px;margin-top:-150px;margin-left:-150px} .pcircle{width:150px;height:150px;margin-top:-75px;margin-left:-75px} .congrid{grid-template-columns:1fr;gap:2.5rem} .ftop{flex-direction:column;gap:1rem} }
@media (max-width:768px) { .nav-menu{display:none;position:fixed;inset:0;background:rgba(5,8,15,.97);flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;z-index:999} .nav-menu.open{display:flex} [data-theme="light"] .nav-menu{background:rgba(240,244,252,.97)} .nav-link{font-size:1.4rem} .hbg{display:flex} .frow{grid-template-columns:1fr} .arows{grid-template-columns:1fr} .srvgrid{grid-template-columns:1fr} }
@media (max-width:480px) { .hname{font-size:2.8rem} .sec{padding:5rem 5%} .astats{grid-template-columns:repeat(2,1fr)} }