/* 
  Modern Tech Solutions stylesheet
  Built by the SunTan Superman..........
  Use the comments in this file to find each main design area.
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;600;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05060d;
  --panel:#0b0d18;
  --cyan:#4ffcff;
  --magenta:#ff007f;
  --purple:#9b4dff;
  --gold:#ffd166;
  --text:#f7fbff;
  --muted:#b7c0d1;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
.page-grid{
  position:fixed;inset:0;z-index:-2;
  background:
    linear-gradient(rgba(79,252,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,252,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(79,252,255,.18), transparent 28%),
    radial-gradient(circle at 85% 25%, rgba(255,0,127,.18), transparent 26%),
    #05060d;
  background-size:40px 40px,40px 40px,100% 100%,100% 100%,100%;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(90deg,transparent 0 48%,rgba(79,252,255,.35) 50%,transparent 52%),
             linear-gradient(0deg,transparent 0 48%,rgba(255,0,127,.20) 50%,transparent 52%);
  filter:blur(8px);opacity:.65;
}
.nav{
  position:sticky;top:0;z-index:10;
  height:84px;padding:0 8%;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(2,3,8,.88);
  border-bottom:1px solid rgba(255,209,102,.35);
  backdrop-filter:blur(14px);
}
.logo{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--cyan);font-family:Orbitron,sans-serif;font-weight:900;font-size:22px;
  text-shadow:0 0 15px rgba(79,252,255,.9);
}
.bolt{font-size:30px}
.nav nav{display:flex;gap:28px}
.nav nav a{
  color:#9ca5b7;text-decoration:none;text-transform:uppercase;letter-spacing:1.5px;
  font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;
}
.nav nav a:hover,.nav nav a.active{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.login-btn{
  border:1px solid rgba(79,252,255,.5);border-radius:9px;
  color:var(--cyan);text-decoration:none;padding:12px 18px;
  font-family:Orbitron,sans-serif;text-transform:uppercase;font-weight:700;
}
.hero{
  position:relative;min-height:calc(100vh - 84px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:70px 8% 50px;
}
.eyebrow{
  color:var(--cyan);font-family:Orbitron,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;margin-bottom:22px;
}
h1{
  font-family:Orbitron,sans-serif;font-size:clamp(46px,7vw,92px);line-height:1.05;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(79,252,255,.9),0 0 35px rgba(79,252,255,.5);
}
h1 span{
  color:var(--magenta);
  text-shadow:0 0 12px rgba(255,0,127,.9),0 0 35px rgba(255,0,127,.5);
}
.subtitle{
  max-width:760px;margin:32px auto 0;color:#d7dbe6;
  font-family:Orbitron,sans-serif;font-size:18px;line-height:1.8;
}
.hero-buttons{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:35px}
.btn{
  text-decoration:none;text-transform:uppercase;letter-spacing:1.5px;
  font-family:Orbitron,sans-serif;font-size:14px;font-weight:800;
  padding:16px 28px;border-radius:9px;display:inline-flex;align-items:center;gap:14px;
}
.btn.cyan{border:2px solid var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(79,252,255,.25)}
.btn.magenta{border:2px solid var(--purple);color:#cf86ff;box-shadow:0 0 18px rgba(155,77,255,.25)}
.stats-panel{
  margin-top:55px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  width:min(720px,100%);border:1px solid rgba(255,209,102,.42);
  background:rgba(0,0,0,.55);border-radius:20px;overflow:hidden;
  box-shadow:0 0 30px rgba(255,209,102,.12);
}
.stats-panel div{padding:24px;border-right:1px solid rgba(255,209,102,.22)}
.stats-panel div:last-child{border-right:0}
.stats-panel strong{display:block;color:var(--cyan);font-size:28px;font-family:Orbitron}
.stats-panel span{display:block;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:-1}
.orb-one{width:280px;height:280px;background:var(--cyan);left:8%;top:18%}
.orb-two{width:320px;height:320px;background:var(--magenta);right:8%;bottom:15%}

.section{padding:95px 8%;position:relative}
.section-label{color:var(--gold);font-family:Orbitron,sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:800;margin-bottom:14px}
.center{text-align:center}
h2{font-family:Orbitron,sans-serif;font-size:clamp(32px,4vw,54px);line-height:1.12;margin-bottom:24px}
.split{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:center}
.split p{color:var(--muted);font-size:18px;line-height:1.8}
.image-card{
  background:linear-gradient(135deg,rgba(79,252,255,.12),rgba(255,0,127,.09));
  border:1px solid rgba(79,252,255,.3);border-radius:22px;padding:22px;
  box-shadow:0 0 40px rgba(79,252,255,.12);
}
.image-card img{width:100%;border-radius:16px}
.service-grid,.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.service-grid article,.package,.project-card,form{
  background:rgba(7,9,18,.82);border:1px solid rgba(79,252,255,.24);
  border-radius:18px;padding:28px;box-shadow:0 0 28px rgba(79,252,255,.08);
}
.service-grid article:hover,.package:hover{border-color:var(--cyan);transform:translateY(-5px);transition:.22s;box-shadow:0 0 32px rgba(79,252,255,.18)}
.service-grid span{font-size:36px}
.service-grid h3,.package h3{font-family:Orbitron,sans-serif;color:var(--cyan);margin:15px 0 12px}
.service-grid p,.package p,.project-card p{color:var(--muted);line-height:1.7}
.project{background:linear-gradient(135deg,rgba(79,252,255,.08),rgba(255,0,127,.08))}
.project-card{max-width:850px;margin:auto;text-align:center}
.project-card p{font-size:18px;margin:12px 0 28px}
.price{font-size:42px!important;color:var(--magenta)!important;font-family:Orbitron,sans-serif;font-weight:900;margin-bottom:12px}
.package{text-align:center;position:relative}
.package.featured{border:2px solid var(--magenta);box-shadow:0 0 34px rgba(255,0,127,.2)}
.contact form{max-width:720px;margin:35px auto 0;display:grid;gap:16px}
input,textarea{
  width:100%;padding:17px;border-radius:10px;border:1px solid rgba(79,252,255,.28);
  background:#050814;color:white;font-size:16px;outline:none;
}
input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 14px rgba(79,252,255,.22)}
textarea{min-height:145px}
button{
  padding:17px;border-radius:10px;border:2px solid var(--cyan);
  background:transparent;color:var(--cyan);font-family:Orbitron,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;
}
button:hover{background:rgba(79,252,255,.12)}
footer{text-align:center;padding:32px 8%;border-top:1px solid rgba(79,252,255,.2);color:var(--muted)}
@media(max-width:900px){
  .nav{height:auto;padding:18px 6%;flex-direction:column;gap:16px}
  .nav nav{flex-wrap:wrap;justify-content:center;gap:14px}
  .split,.service-grid,.package-grid,.stats-panel{grid-template-columns:1fr}
  .stats-panel div{border-right:0;border-bottom:1px solid rgba(255,209,102,.22)}
  .stats-panel div:last-child{border-bottom:0}
}





/* =========================================================
   BACKGROUND LOGO EFFECTS
   This removes the old boxed logo and makes the brand feel
   printed directly onto the screen.
   ========================================================= */

.logo-watermark{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.logo-watermark::before{
  content:"MTS";
  position:absolute;
  left:50%;
  top:34%;
  transform:translate(-50%,-50%) rotate(-8deg);
  font-family:Orbitron,sans-serif;
  font-size:clamp(120px,22vw,330px);
  font-weight:900;
  letter-spacing:12px;
  color:transparent;
  -webkit-text-stroke:2px rgba(79,252,255,.20);
  text-shadow:
    0 0 25px rgba(79,252,255,.22),
    0 0 65px rgba(255,0,127,.14);
  opacity:.45;
}

.floating-symbols{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

.symbol{
  position:absolute;
  display:inline-block;
  font-family:Orbitron,sans-serif;
  font-weight:900;
  font-size:34px;
  letter-spacing:3px;
  color:rgba(79,252,255,.22);
  text-shadow:
    0 0 12px rgba(79,252,255,.55),
    0 0 24px rgba(255,0,127,.20);
  opacity:.55;
}

/* Floating pattern speeds */
.symbol-one{animation:floatOne 24s linear infinite alternate, symbolSpin 9s linear infinite}
.symbol-two{animation:floatTwo 28s linear infinite alternate, symbolSpin 11s linear infinite reverse}
.symbol-three{animation:floatThree 32s linear infinite alternate, symbolSpin 13s linear infinite}
.symbol-four{animation:floatFour 36s linear infinite alternate, symbolSpin 15s linear infinite reverse}

@keyframes symbolSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes floatOne{
  0%{left:6%;top:12%}
  25%{left:78%;top:22%}
  50%{left:16%;top:70%}
  75%{left:84%;top:66%}
  100%{left:12%;top:84%}
}

@keyframes floatTwo{
  0%{left:88%;top:18%}
  25%{left:22%;top:30%}
  50%{left:72%;top:78%}
  75%{left:8%;top:58%}
  100%{left:66%;top:10%}
}

@keyframes floatThree{
  0%{left:18%;top:82%}
  25%{left:56%;top:16%}
  50%{left:90%;top:48%}
  75%{left:30%;top:68%}
  100%{left:6%;top:24%}
}

@keyframes floatFour{
  0%{left:42%;top:8%}
  25%{left:84%;top:82%}
  50%{left:12%;top:50%}
  75%{left:68%;top:28%}
  100%{left:34%;top:88%}
}

.nav,.hero,.section,footer{
  position:relative;
  z-index:2;
}

@media(max-width:900px){
  .symbol{
    font-size:22px;
    opacity:.35;
  }
  .logo-watermark::before{
    font-size:clamp(88px,26vw,180px);
    opacity:.28;
  }
}

/* =========================================================
   QUICK EDIT NOTES
   Hero text: edit index.html inside HERO SECTION.
   Services: edit index.html inside SERVICES SECTION.
   Prices: edit index.html inside PRICING PACKAGES SECTION.
   Contact email: edit form action in CONTACT SECTION.
   Background motion: edit BACKGROUND LOGO EFFECTS here.
   ========================================================= */


/* =========================================================
   PORTFOLIO PROJECT SECTION
   This section shows project case studies and demo links.
   ========================================================= */
.portfolio-section{
  background:linear-gradient(135deg,rgba(79,252,255,.06),rgba(255,0,127,.08));
}

.portfolio-card{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:center;
  margin-top:38px;
  background:rgba(7,9,18,.82);
  border:1px solid rgba(79,252,255,.26);
  border-radius:22px;
  padding:34px;
  box-shadow:0 0 34px rgba(79,252,255,.10);
}

.portfolio-copy h3{
  font-family:Orbitron,sans-serif;
  color:var(--cyan);
  margin-bottom:14px;
}

.portfolio-copy p,
.portfolio-list li{
  color:var(--muted);
  line-height:1.7;
}

.portfolio-list{
  margin:18px 0 24px 20px;
}

.portfolio-actions{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.mock-window{
  background:linear-gradient(145deg,#080b16,#121629);
  border:1px solid rgba(79,252,255,.28);
  border-radius:18px;
  padding:24px;
  box-shadow:0 0 35px rgba(79,252,255,.16);
}

.window-dots{
  display:flex;
  gap:8px;
  margin-bottom:20px;
}

.window-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}

.mock-window h4{
  font-family:Orbitron,sans-serif;
  color:var(--text);
  margin-bottom:10px;
}

.mock-window p{
  color:var(--muted);
  margin-bottom:18px;
}

.mock-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:13px;
  margin-top:10px;
  border:1px solid rgba(79,252,255,.18);
  border-radius:10px;
  color:var(--muted);
}

.mock-row span{
  color:var(--cyan);
}

/* =========================================================
   HOSPITAL DEMO PAGE
   This is a static interactive demo using JavaScript/localStorage.
   ========================================================= */
.hospital-hero{
  min-height:70vh;
}

.demo-form select{
  width:100%;
  padding:17px;
  border-radius:10px;
  border:1px solid rgba(79,252,255,.28);
  background:#050814;
  color:white;
  font-size:16px;
  outline:none;
}

.appointment-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:35px;
}

.appointment-card{
  background:rgba(7,9,18,.82);
  border:1px solid rgba(79,252,255,.24);
  border-radius:18px;
  padding:24px;
  box-shadow:0 0 28px rgba(79,252,255,.08);
}

.appointment-card h3{
  font-family:Orbitron,sans-serif;
  color:var(--cyan);
  margin-bottom:12px;
}

.appointment-card p{
  color:var(--muted);
  margin-bottom:8px;
}

.delete-btn{
  margin-top:12px;
  border-color:var(--magenta);
  color:#ff8fc2;
}

@media(max-width:900px){
  .portfolio-card,
  .appointment-list{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   ALL PROJECTS PORTFOLIO SECTION
   Added to show more of Lorenzo's projects on Modern Tech Solutions.
   ========================================================= */
.all-projects-section{
  background:linear-gradient(135deg,rgba(79,252,255,.07),rgba(155,77,255,.08),rgba(255,0,127,.06));
}
.portfolio-intro{
  max-width:880px;
  margin:0 auto 34px;
  color:var(--muted);
  line-height:1.7;
}
.all-projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:35px;
}
.portfolio-mini-card,
.portfolio-detail-card{
  background:rgba(7,9,18,.82);
  border:1px solid rgba(79,252,255,.24);
  border-radius:18px;
  padding:24px;
  box-shadow:0 0 28px rgba(79,252,255,.08);
  transition:transform .22s ease, border-color .22s ease;
}
.portfolio-mini-card:hover,
.portfolio-detail-card:hover{
  transform:translateY(-5px);
  border-color:var(--cyan);
  box-shadow:0 0 34px rgba(79,252,255,.18);
}
.portfolio-mini-card h3,
.portfolio-detail-card h3{
  font-family:Orbitron,sans-serif;
  color:var(--cyan);
  margin:14px 0 8px;
}
.portfolio-mini-card p,
.portfolio-detail-card p{
  color:var(--muted);
  line-height:1.65;
}
.portfolio-mini-card .tools,
.portfolio-detail-card .tools{
  color:#d4ddff;
  font-style:italic;
  font-size:.92rem;
}
.portfolio-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:35px;
}
.portfolio-detail-card{
  min-height:330px;
}
@media(max-width:900px){
  .all-projects-grid,
  .portfolio-detail-grid{
    grid-template-columns:1fr;
  }
}